/* Our own reviews (Site, 3 Nov 2026): the product-page block (reviews.js → #frend-reviews), the write form (review-form.js,
   in the block and on /reviews/write → #frend-review-form) and the owner's dashboard (reviews-admin.js → #frend-reviews-admin).
   Function first: the look starts from the 29 Oct design-d1 reviews section (colours, type, stars); the layout calls are in
   the Site debrief. Spec: run-state/sessions-2026-10-30/3-site/REVIEWS-SPEC.md. */
.frv, .frf, .fra {
  --rv-band: #fffdf9; --rv-ground: #f4f1f8; --rv-line: #e0d8ed; --rv-head: #1f003d; --rv-ink: #43325c; --rv-muted: #6e5a94;
  --rv-btn: #457f79; --rv-btn-ink: #fffdf9; --rv-star: #e8a13a; --rv-err: #b8472f; --rv-ok: #457f79; --rv-r: 16px;
  --rv-h: var(--font-heading-family, 'ChadHeading', Georgia, serif); --rv-b: var(--font-body-family, 'ChadBodyV2', -apple-system, 'Segoe UI', sans-serif);
  color: var(--rv-ink); font: 400 16px/1.55 var(--rv-b); letter-spacing: 0
}
.frv *, .frf *, .fra * { box-sizing: border-box; letter-spacing: 0 }
.frv :is(h2, h3, p, ul, ol, figure), .frf :is(h2, h3, p, ul, ol, fieldset, legend), .fra :is(h1, h2, h3, p, ul) { margin: 0; padding: 0 }
.frv [hidden], .frf [hidden], .fra [hidden] { display: none !important }
.frv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- block on the product page. Owner 4 Nov (round 24): back to the round-20 look (cream band, our type, one hairline
   between rows, no boxes) with Happy Mammoth's layout and features (their reviews page, 3-site/research-r24/hm-rev-*.png):
   score strip with no star bars, sort over the list, reviewer column beside each review, "Featured" on pinned ones, Show more */
.frv { background: var(--rv-band); padding: 80px 0 88px; overflow-x: clip }
.frv-in { max-width: 1080px; margin: 0 auto; padding: 0 24px }
.frv h2.frv-h { font: 400 40px/1.08 var(--rv-h) !important; color: var(--rv-head) !important; margin: 0 0 28px !important; letter-spacing: 0 !important; text-wrap: balance }
/* the strip: score + stars + count | share who'd recommend | Write a review */
.frv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; padding: 0 0 28px; border-bottom: 1px solid var(--rv-line) }
.frv-sum .frv-btn { margin-left: auto }
.frv-sum--zero { justify-content: space-between }
.frv-zero { font-size: 17px; color: var(--rv-head) }
.frv-score { display: flex; align-items: center; gap: 16px }
.frv-num { font: 400 64px/.9 var(--rv-h); color: var(--rv-head); font-variant-numeric: tabular-nums }
.frv-score p { font-size: 15px; margin-top: 6px }
.frv-stars { display: inline-flex; gap: 2px; vertical-align: middle }
.frv-stars svg { width: 18px; height: 18px; display: block }
.frv-score .frv-stars svg { width: 22px; height: 22px }
.frv-stars .on { fill: var(--rv-star); stroke: var(--rv-star) }
.frv-stars .off { fill: none; stroke: var(--rv-star) }
.frv-stars path { stroke-width: 1.3; stroke-linejoin: round }
.frv-rec { font-size: 16px; color: var(--rv-head); padding-left: 48px; border-left: 1px solid var(--rv-line); min-height: 48px; display: flex; align-items: center }
.frv-rec b { font: 400 28px/1 var(--rv-h); margin-right: 8px; font-variant-numeric: tabular-nums }
.frv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--rv-btn); border-radius: 999px !important; background: var(--rv-btn); color: var(--rv-btn-ink) !important; font: 600 16px/1 var(--rv-b); text-decoration: none !important; cursor: pointer; box-shadow: none !important }
.frv-btn:hover { background: var(--rv-head); border-color: var(--rv-head) }
.frv-btn--line { background: transparent; color: var(--rv-btn) !important }
.frv-btn--line:hover { background: var(--rv-btn); border-color: var(--rv-btn); color: var(--rv-btn-ink) !important }
.frv-btn:disabled { opacity: .55; cursor: progress }
.frv :focus-visible, .frf :focus-visible, .fra :focus-visible { outline: 2px solid var(--rv-btn); outline-offset: 2px }

/* sort over the list */
.frv-tools { display: flex; align-items: center; justify-content: flex-end; margin: 18px 0 2px }
.frv-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rv-muted) }
.frv-sort select { min-height: 40px; padding: 0 32px 0 12px; border: 1.5px solid var(--rv-line); border-radius: 10px; background: var(--rv-band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2343325c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; color: var(--rv-head); font: 600 14px var(--rv-b); -webkit-appearance: none; appearance: none }

/* rows: one hairline between them, no boxes; the reviewer on the left, the review on the right */
.frv-list { list-style: none }
.frv-row { padding: 28px 0; border-top: 1px solid var(--rv-line) }
.frv-row:first-child { border-top: 0 }
.frv-row article { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px }
.frv-by { display: grid; align-content: start; gap: 6px; font-size: 14px; padding-top: 1px }
.frv-who { font-weight: 700; font-size: 15px; color: var(--rv-head); overflow-wrap: anywhere }
.frv-ver, .frv-recd { display: inline-flex; align-items: center; gap: 6px }
.frv-ver { color: var(--rv-ok); font-weight: 600 }
.frv-ver svg, .frv-recd svg { width: 15px; height: 15px; flex: none }
.frv-recd { color: var(--rv-ink) }
.frv-recd svg { color: var(--rv-ok) }
.frv-say { min-width: 0 }
.frv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px }
.frv-ago { color: var(--rv-muted); margin-left: auto }
.frv-row h3.frv-t { font: 400 20px/1.25 var(--rv-h) !important; color: var(--rv-head) !important; margin: 4px 0 6px !important; letter-spacing: 0 !important }
.frv-body { font-size: 16px; line-height: 1.6; max-width: 66ch; white-space: pre-line; overflow-wrap: anywhere }
.frv-body.is-cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden }
.frv-link { padding: 0; margin-top: 4px; border: 0; background: none; color: var(--rv-head); font: 600 15px var(--rv-b); text-decoration: underline; cursor: pointer; min-height: 32px }
.frv-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.frv-photos a { display: block; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--rv-ground) }
.frv-photos img { width: 100%; height: 100%; object-fit: cover; display: block }
.frv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px }
.frv-feat { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 6px; background: var(--rv-ground); color: var(--rv-head); font-size: 13px; font-weight: 600 }
.frv-feat svg { width: 12px; height: 12px }
.frv-help { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--rv-line); border-radius: 999px; background: none; color: var(--rv-ink); font: 600 14px var(--rv-b); cursor: pointer }
.frv-help[aria-pressed="true"] { border-color: var(--rv-btn); color: var(--rv-btn); cursor: default }
.frv-reply { margin-top: 16px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px 14px 10px; border-radius: 12px; background: var(--rv-ground) }
.frv-reply img { width: 52px; height: 52px; display: block }
.frv-reply b { display: block; font-size: 14px; color: var(--rv-head); margin-bottom: 2px }
.frv-reply p { font-size: 15px; line-height: 1.55; white-space: pre-line }
.frv-more { display: flex; margin: 20px auto 0 }
.frv-formwrap { margin: 24px 0 0; padding: 24px; border-radius: var(--rv-r); background: var(--rv-ground) }
/* owner 3 Nov (call 3): the phone sticky Subscribe bar steps aside while the write box is open */
@media (max-width: 989px) { html.frv-writing #stickyAddToCart, html.frv-writing .sticky-add-to-cart { display: none !important } }

/* ---------- write form (in the block and on /reviews/write) */
.frf { display: grid; gap: 18px }
.frf h2.frf-h { font: 400 26px/1.15 var(--rv-h) !important; color: var(--rv-head) !important; margin: 0 !important }
.frf fieldset { border: 0; min-width: 0 }
.frf legend, .frf label > span:first-child { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; color: var(--rv-head) }
.frf-opt { font-weight: 400; color: var(--rv-muted) }
.frf input[type="text"], .frf input[type="email"], .frf textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--rv-muted); border-radius: 10px; background: var(--rv-band); color: var(--rv-head); font: 16px/1.4 var(--rv-b) }
.frf textarea { min-height: 140px; resize: vertical }
.frf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
/* star picker: five radio buttons drawn as stars, right-to-left fill on hover and on checked */
.frf-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px }
.frf-stars input { position: absolute; opacity: 0; width: 1px; height: 1px }
.frf-stars label { cursor: pointer; padding: 2px; line-height: 0 }
.frf-stars svg { width: 34px; height: 34px }
.frf-stars path { fill: none; stroke: var(--rv-star); stroke-width: 1.3; stroke-linejoin: round }
.frf-stars input:checked ~ label path, .frf-stars label:hover path, .frf-stars label:hover ~ label path { fill: var(--rv-star) }
.frf-stars input:focus-visible + label { outline: 2px solid var(--rv-btn); outline-offset: 2px; border-radius: 6px }
.frf-yn { display: flex; gap: 10px }
.frf-yn label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--rv-line); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--rv-head) }
.frf-yn input { accent-color: var(--rv-head) }
.frf-yn label:has(input:checked) { border-color: var(--rv-head) }
.frf .frf-lab { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; color: var(--rv-head) }
/* photo picker (owner 3 Nov, call 4): the browser's file button stays in the form for screen readers and keyboards, out of sight */
.frf-files .frf-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden }
.frf-files .frf-pick { min-height: 44px; padding: 0 20px; font-size: 15px }
.frf-files .frf-file:focus-visible + .frf-pick { outline: 2px solid var(--rv-btn); outline-offset: 2px }
.frf-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.frf-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px }
.frf-help { font-size: 14px; color: var(--rv-muted); margin-top: 6px }
.frf-err { color: var(--rv-err); font-size: 15px }
.frf-done { padding: 18px 20px; border-radius: 12px; background: var(--rv-band); color: var(--rv-head) }
.frf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px }
.frf-page { max-width: 640px; margin: 0 auto; padding: 40px 16px 80px }
.frf-page .frf { padding: 24px; border-radius: var(--rv-r); background: var(--rv-band) }
#MainContent:has(.frf-page) { background: var(--rv-ground, #f4f1f8) }

@media (max-width: 989px) {
  .frv { padding: 56px 0 64px }
  .frv-in { padding: 0 20px }
  .frv h2.frv-h { font-size: 32px !important; margin-bottom: 20px !important }
  .frv-sum { gap: 16px 24px; padding-bottom: 24px }
  .frv-num { font-size: 52px }
  .frv-rec { padding-left: 0; border-left: 0; min-height: 0 }
  .frv-sum .frv-btn { margin-left: 0; flex: 1 1 100% }
  .frv-sum--zero { display: grid; justify-content: stretch }
  .frv-row { padding: 22px 0 }
  .frv-row article { grid-template-columns: 1fr; row-gap: 12px }
  .frv-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px }
  .frv-recd { flex-basis: 100% }
  .frv-formwrap { padding: 18px; margin: 20px -4px 0 }
}
@media (max-width: 480px) { .frf-two { grid-template-columns: 1fr } }

/* ---------- owner's dashboard */
.fra { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; background: var(--rv-ground) }
.fra h1 { font: 400 34px/1.1 var(--rv-h); color: var(--rv-head); margin-bottom: 18px }
.fra-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px }
.fra-bar input[type="search"] { flex: 1 1 220px; min-height: 42px; padding: 0 12px; border: 1px solid var(--rv-muted); border-radius: 10px; font: 15px var(--rv-b) }
.fra-tabs { display: flex; flex-wrap: wrap; gap: 6px }
.fra-tabs button, .fra-act button, .fra-small { min-height: 36px; padding: 0 12px; border: 1.5px solid var(--rv-line); border-radius: 8px; background: var(--rv-band); color: var(--rv-head); font: 600 13px var(--rv-b); cursor: pointer }
.fra-tabs button[aria-pressed="true"] { background: var(--rv-head); color: var(--rv-band); border-color: var(--rv-head) }
.fra-list { list-style: none; display: grid; gap: 10px }
.fra-row { padding: 16px; border-radius: 12px; background: var(--rv-band) }
.fra-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--rv-muted); margin-bottom: 6px }
.fra-meta b { color: var(--rv-head) }
.fra-tag { padding: 1px 8px; border-radius: 99px; background: var(--rv-ground); color: var(--rv-head); font-weight: 600 }
.fra-tag--held { background: #fbe9e4; color: var(--rv-err) }
.fra-tag--hidden { background: #ececec; color: #555 }
.fra-row h3 { font: 600 16px var(--rv-b); color: var(--rv-head) }
.fra-row .fra-body { font-size: 15px; white-space: pre-line; margin-top: 2px }
.fra-row .fra-reply { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--rv-ground); font-size: 14px; white-space: pre-line }
.fra-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.fra-edit { display: grid; gap: 8px; margin-top: 10px }
.fra-edit input, .fra-edit textarea, .fra-edit select { width: 100%; padding: 8px 10px; border: 1px solid var(--rv-muted); border-radius: 8px; font: 15px var(--rv-b) }
.fra-edit textarea { min-height: 90px }
.fra-pages { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 14px }
.fra-import { margin-top: 28px; padding: 16px; border-radius: 12px; background: var(--rv-band); display: grid; gap: 10px; font-size: 14px }
.fra-import code { font-size: 12px; overflow-wrap: anywhere }
.fra-msg { font-size: 14px; color: var(--rv-ok); min-height: 1.4em }
.fra-msg.is-bad { color: var(--rv-err) }
/* Cloudflare bot check in the open box (shows only when Cloudflare needs a tap; owner-approved Backend ask, 3 Nov) */
.frf-ts:empty { display: none } .frf-ts { min-height: 0 }
/* dashboard downloads under the title (Backend's two CSVs, 4 Nov) */
.fra-dl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 18px !important; font-size: 14px; color: var(--rv-muted) }
.fra-dl a { color: var(--rv-head); font-weight: 600 }