/* ═══════════════════════════════════════════════════════════════════════════════════════════════════ REVIEWS — shared by the product page section and the /reviews/ hub ═══════════════════════════════════════════════════════════════════════════════════════════════════ The same five partials in `templates/parts/reviews/` draw both screens, so these rules are shared for exactly the reason the markup is: a review row styled twice is a review row that differs. 🔴 STARS ARE INK. Never orange, never red, never amber on a review. Green appears once, on "Verified buyer", because it MEANS verified rather than decorating anything. ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ═══ REVIEWS ═══════════════════════════════════════════════════════════════ Brief of 23 Sep, mockup `reviews-section-mockup.html`. 🔴 STARS ARE INK. Amber means money held or a task you owe everywhere else on this site. Orange stars would be the only exception to that and would read as a warning on a five-star review. */ .pp-rv{max-width:860px} .rv-stars{display:inline-flex;gap:2px;vertical-align:middle} .rv-stars svg{width:15px;height:15px;fill:var(--pt-border-strong)} .rv-stars svg.on{fill:var(--pt-ink)} .rv-stars.lg svg{width:19px;height:19px} .rv-summary{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:40px;align-items:center;padding:20px 0;border-bottom:1px solid var(--pt-border)} /* The hub's product view has no "Write a review" in this block — it is up in the header — so the row is two columns there, and the average is a size down from the product page's. */ .rv-summary.is-compact{grid-template-columns:200px minmax(0,1fr)} .rv-summary.is-compact .rv-avg__n{font-size:40px} .rv-avg__n{margin:0 0 6px;font-family:var(--pt-mono);font-variant-numeric:tabular-nums;font-size:44px;font-weight:600;line-height:1;letter-spacing:-.02em} .rv-avg__n small{font-size:17px;font-weight:400;color:var(--pt-ink-3)} .rv-cnt{margin:8px 0 0;font-size:13px;color:var(--pt-ink-3)} /* Each row is a link — tapping "1 star" to read the worst ones is what people do anyway. */ /* 🔴 52px, NOT 34px. At 34 the label "4 star" wrapped onto two lines while "5 star" happened to fit, so the rows were different heights and the bars stopped lining up. `nowrap` too — a column wide enough today is not wide enough in another language. (Leon's screenshot, 23 Sep.) */ .rv-dist{display:grid;gap:5px;min-width:0;padding:18px 0} .rv-dist a{display:grid;grid-template-columns:52px minmax(0,1fr) 30px;gap:10px;align-items:center;font-size:12.5px;color:var(--pt-ink-3);white-space:nowrap} .rv-dist a:hover,.rv-dist a.is-on{color:var(--pt-ink)} .rv-bar{height:7px;background:var(--pt-fill-control);border:1px solid var(--pt-border)} .rv-bar i{display:block;height:100%;background:var(--pt-ink)} .rv-n{text-align:right} .rv-photos{padding:18px 0;border-bottom:1px solid var(--pt-border)} /* 🔴 `text-transform:none`. The theme capitalises headings, so this rendered "Photos From Buyers". Sentence case is the site's rule and this is not the first time that theme rule has had to be undone. */ .rv-photos h3{margin:0 0 10px;font-size:13.5px;font-weight:600;text-transform:none} .rv-photos h3 span{font-weight:400;color:var(--pt-ink-3);font-size:12.5px} .rv-photos h3 span::before{content:"· "} /* Up to 50 thumbnails before the "+n" tile, scrolling sideways with NO SNAP — the same free scroll as every other rail we own (Leon, 22 Sep). Wrapping fifty would push the reviews off the screen. */ .rv-photos__row{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;padding-bottom:2px} .rv-photos__row::-webkit-scrollbar{display:none} .rv-shot{width:74px;height:74px;flex:0 0 auto;padding:0;border:1px solid var(--pt-border);background:var(--pt-fill-control);cursor:pointer;overflow:hidden;border-radius:0} /* 🔴 CONTAIN, NOT COVER (Leon, 25 Sep 2026). `cover` fills the square by cropping, and a review photo is EVIDENCE — somebody photographs the scuff, the stitching, the part that failed, and a centre-crop is exactly as likely to cut it out as to keep it. A letterboxed thumbnail that shows the whole picture is right here; the hub shows it full size anyway. The tile keeps its own fill behind the letterbox so a portrait shot does not sit on a white hole. */ .rv-shot img{width:100%;height:100%;object-fit:contain;display:block;background:var(--pt-fill-control)} .rv-shot--more{display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--pt-ink-2);cursor:default} .rv-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:18px 0} .rv-pill{font-size:12.5px;padding:6px 11px;border:1px solid var(--pt-border-strong);background:var(--pt-surface);color:var(--pt-ink)} /* 🔴 THE TEXT STAYS DARK ON HOVER (Leon, 23 Sep). GeneratePress recolours every `a:hover` to the brand red, and a pill is an — so hovering a filter turned its label red, which on this site means a dispute. A pill only ever changes its FILL. */ .rv-pill:hover,.rv-pill:focus{background:var(--pt-fill-control);color:var(--pt-ink)} .rv-pill.is-on{background:var(--pt-ink);border-color:var(--pt-ink);color:#fff} .rv-pill.is-on:hover,.rv-pill.is-on:focus{background:var(--pt-ink);color:#fff} .rv-pill span{font-size:11.5px;color:var(--pt-ink-3);margin-left:5px} .rv-pill.is-on span{color:#BDB8AE} .rv-sort{margin-left:auto} .rv-sort select{height:34px;padding:0 10px;border:1px solid var(--pt-border-strong);background:var(--pt-surface);font-size:13px;border-radius:0} .rv-none{margin:8px 0 0;font-size:14px;color:var(--pt-ink-3)} .rv-none a{color:var(--pt-accent)} .rv-item{display:grid;grid-template-columns:var(--rv-gutter,150px) minmax(0,1fr);gap:var(--rv-gap,32px);padding:26px 0;border-top:1px solid var(--pt-border)} .rv-item[hidden]{display:none} .rv-who{display:flex;flex-direction:column;gap:8px} .rv-who__top{display:flex;gap:10px;align-items:center} .rv-av{width:34px;height:34px;border-radius:50%;border:1px solid var(--pt-border);flex:0 0 auto;object-fit:cover} .rv-nm{margin:0;font-size:13.5px;font-weight:600;line-height:1.25} .rv-when{margin:0;font-size:12px;color:var(--pt-ink-3)} /* The only colour on a review. Green because it means verified, not because it is decorative. */ .rv-vp{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--pt-green-text)} .rv-vp svg{width:12px;height:12px;fill:var(--pt-green-text)} .rv-body h4{margin:8px 0 6px;font-size:15.5px;font-weight:600} .rv-bought{margin:0 0 10px;font-size:12.5px;color:var(--pt-ink-3)} .rv-bought b{font-weight:500;color:var(--pt-ink-2)} .rv-text p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--pt-ink-2)} .rv-revshots{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap} .rv-revshots .rv-shot{width:66px;height:66px} /* ── REVIEW ACTIONS (mockup `Plan/review-actions-mockup.html`, 25 Sep 2026) ───────────────── 24px gap, 16px above, and a min-height so the row does not jump when a control is swapped for the muted "Reported." text. */ .rv-foot{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:16px;min-height:36px; font-size:14px;color:var(--pt-ink-3)} /* Helpful is a LINK, not a button: no background, no border, no pill. */ .rv-help{display:inline-flex;gap:6px;align-items:center;background:none;background-image:none;border:0; border-radius:0;padding:4px 0;font:inherit;font-size:14px;color:var(--pt-ink-3);cursor:pointer} /* 🔴 NO DARK BOX. These are