/* ==== Trust & engagement (P7): stars, reviews, Q&A, report ==== */
.stars { --r: 0; position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: .06em; color: #D9DCE5; vertical-align: -.08em; white-space: nowrap; }
.stars::before { content: '★★★★★'; }
.stars::after { content: '★★★★★'; position: absolute; inset: 0 auto 0 0; width: calc(var(--r) / 5 * 100%); overflow: hidden; color: #F2A20C; }
.stars-sm { font-size: .82rem; }
.stars-lg { font-size: 1.45rem; }

.pdp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .9rem; margin: -.25rem 0 .7rem; color: var(--nt-muted); }
.pdp-rating a { color: var(--nt-ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.pdp-rating a:hover { color: var(--nt-blue-deep); }
.pdp-rating a.muted { color: var(--nt-muted); }
.pdp-report { margin-top: .7rem; font-size: .8rem; color: var(--nt-muted); }

.rv-summary { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 1.4rem; align-items: center; background: var(--nt-card); border: 1px solid var(--nt-line); border-radius: var(--nt-radius); padding: 1.1rem 1.25rem; }
.rv-score { display: grid; justify-items: start; gap: .3rem; }
.rv-score b { font-size: 2.5rem; line-height: 1; font-weight: 800; color: var(--nt-ink); }
.rv-score .muted { font-size: .8rem; color: var(--nt-muted); }
.rv-bars { display: grid; gap: .28rem; }
.rv-bar { display: grid; grid-template-columns: 3rem 1fr 2.6rem; align-items: center; gap: .6rem; background: none; border: 0; padding: .12rem 0; font-size: .82rem; color: var(--nt-ink-2); cursor: pointer; text-align: left; border-radius: 6px; }
.rv-bar .bar { height: .5rem; background: #EEF0F5; border-radius: 99px; overflow: hidden; }
.rv-bar .bar i { display: block; height: 100%; background: #F2A20C; border-radius: 99px; }
.rv-bar .n { text-align: right; color: var(--nt-muted); }
.rv-bar:hover, .rv-bar:focus-visible { color: var(--nt-blue-deep); }
.rv-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .3rem; }
.rv-filters .chip { cursor: pointer; border: 1px solid var(--nt-line-2); background: #fff; }
.rv-filters .chip.on { background: var(--nt-ink); color: #fff; border-color: var(--nt-ink); }
.rv-sort { width: auto; margin-left: auto; }

.rv { border-bottom: 1px solid var(--nt-line); padding: 1rem 0; }
.rv-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rv-title { color: var(--nt-ink); }
.rv-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .78rem; color: var(--nt-muted); margin-top: .3rem; }
.rv-verified { color: var(--nt-ok); font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; }
.rv-variant { background: #EEF0F5; border-radius: 99px; padding: 0 .55rem; }
.rv-seller { font-size: .78rem; color: var(--nt-muted); margin-top: .3rem; }
.rv-body { margin: .55rem 0 0; white-space: pre-wrap; color: var(--nt-ink-2); overflow-wrap: anywhere; }
.rv-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.rv-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-line); }
.rv-reply { margin-top: .75rem; background: var(--nt-blue-soft); border-radius: var(--nt-radius-sm); padding: .6rem .85rem; font-size: .88rem; }
.rv-reply p { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-actions { display: flex; gap: 1.1rem; margin-top: .65rem; }
.rv-actions .link-btn.on { color: var(--nt-ok); }
.rv-actions .link-btn:disabled { opacity: .55; cursor: default; }
.rv-more { margin-top: .8rem; }
.rv-empty, .rv-howto { color: var(--nt-muted); font-size: .9rem; }
.rv-howto { margin-top: .9rem; }

.qa-ask { display: flex; gap: .5rem; }
.qa-item { border-bottom: 1px solid var(--nt-line); padding: .95rem 0; }
.qa-q, .qa-a { display: flex; gap: .7rem; align-items: flex-start; }
.qa-a { margin-top: .6rem; }
.qa-q p, .qa-a p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-q p { font-weight: 600; color: var(--nt-ink); }
.qa-tag { flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--nt-ink); color: #fff; }
.qa-a .qa-tag { background: var(--nt-lime); color: var(--nt-ink); }
.qa-meta { display: block; font-size: .76rem; color: var(--nt-muted); margin-top: .2rem; }
.qa-meta .chip { font-size: .68rem; padding: 0 .45rem; }
.qa-none { color: var(--nt-muted); font-size: .85rem; padding-left: 2.4rem; }
.qa-answer-btn { margin: .5rem 0 0 2.4rem; font-size: .8rem; }
.qa-answer-form { display: flex; gap: .4rem; margin: .5rem 0 0 2.4rem; }

.pcard-meta .rating { display: inline-flex; align-items: center; gap: .2rem; font-size: .76rem; font-weight: 700; color: var(--nt-ink-2); }
.pcard-meta .rating i { color: #F2A20C; }
.pcard-meta .rating .n { font-weight: 500; color: var(--nt-muted); }

/* star picker on the review form (inputs come 5 → 1, shown 1 → 5) */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 2rem; line-height: 1; color: #D9DCE5; cursor: pointer; transition: color .12s; }
.star-input-sm label { font-size: 1.45rem; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #F2A20C; }
.star-input input:focus-visible + label { outline: 2px solid var(--nt-blue); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 575.98px) {
    .rv-summary { grid-template-columns: 1fr; gap: .9rem; }
    .rv-sort { margin-left: 0; }
    .qa-ask { flex-direction: column; }
    .qa-answer-form, .qa-answer-btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .star-input label { transition: none; } }

/* ---- P7b: price / stock alerts and "message the store" on the product page ---- */
.pdp-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .8rem; }
.pdp-alert-form { display: flex; gap: .4rem; flex: 1 1 100%; max-width: 360px; }
.pdp-alert-form[hidden] { display: none; }
.pdp-alert-form .form-control { min-width: 0; }
.pdp-chat { margin-top: .6rem; }