/* H&H product reviews. Built on the theme's tokens; falls back to the same values. */
.hhr-pdp,
.hhr-page,
.hhr-admin {
  --hhr-ink: var(--hh-black, #1A1A1A);
  --hhr-muted: var(--hh-gray-700, #555555);
  --hhr-rule: var(--hh-gray-200, #E8E8E8);
  --hhr-soft: var(--hh-gray-100, #F7F7F7);
  --hhr-star: var(--hh-yellow, #FEDD00);
  --hhr-star-edge: #8A7400;
  --hhr-ok: #1E6B34;
}

/* ---------- stars ---------- */
.hhr-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; white-space: nowrap; }
.hhr-stars svg { width: 18px; height: 18px; }
.hhr-stars-empty svg { fill: none; stroke: var(--hhr-star-edge); stroke-width: 1.5; }
.hhr-stars-full { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.hhr-stars-full svg { fill: var(--hhr-star); stroke: var(--hhr-star-edge); stroke-width: 1.5; }

/* ---------- product page ---------- */
.hhr-pdp { scroll-margin-top: 120px; }
.hhr-pdp-empty .hhr-first { margin: 0; }
.hhr-first { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--hhr-muted); }
.hhr-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 20px; background: var(--hhr-soft); border-radius: 4px; margin-bottom: 24px; }
.hhr-summary-score { display: grid; justify-items: start; gap: 4px; }
.hhr-avg { font-family: var(--font-display, 'Oswald', sans-serif); font-size: 44px; line-height: 1; color: var(--hhr-ink); }
.hhr-summary-score .hhr-stars svg { width: 22px; height: 22px; }
.hhr-count { font-size: 14px; color: var(--hhr-muted); }
.hhr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hhr-bars li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 13px; color: var(--hhr-muted); }
.hhr-bar { height: 8px; background: var(--hhr-rule); border-radius: 4px; overflow: hidden; }
.hhr-bar span { display: block; height: 100%; background: var(--hhr-ink); }
.hhr-bar-n { text-align: right; }
.hhr-summary-cta { margin: 0; }

.hhr-list { list-style: none; margin: 0; padding: 0; }
.hhr-item { padding: 18px 0; border-top: 1px solid var(--hhr-rule); }
.hhr-item:first-child { border-top: 0; padding-top: 0; }
.hhr-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hhr-item-title { font-size: 17px; color: var(--hhr-ink); }
.hhr-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 14px; color: var(--hhr-muted); }
.hhr-author { font-weight: 600; color: var(--hhr-ink); }
.hhr-verified { color: var(--hhr-ok); font-weight: 600; }
.hhr-verified::before { content: "\2713\00a0"; }
.hhr-other { margin: 6px 0 0; font-size: 14px; color: var(--hhr-muted); }
.hhr-other a { color: var(--hhr-ink); }
.hhr-body { margin-top: 8px; color: var(--hh-gray-900, #333333); }
.hhr-body p { margin: 0 0 8px; }
.hhr-reply { margin-top: 10px; padding: 12px 14px; background: var(--hhr-soft); border-left: 3px solid var(--hhr-ink); font-size: 15px; }
.hhr-reply p { margin: 0 0 6px; }
.hhr-reply-head { font-weight: 700; color: var(--hhr-ink); }
.hhr-more-btn { margin-top: 8px; padding: 10px 18px; background: none; border: 2px solid var(--hhr-ink); color: var(--hhr-ink); font-weight: 700; cursor: pointer; border-radius: 2px; }
.hhr-more-btn:hover { background: var(--hhr-ink); color: #fff; }
.hhr-line-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 28px 0 12px; font-size: 18px; color: var(--hhr-ink); }
.hhr-line-avg { font-size: 14px; font-weight: 400; color: var(--hhr-muted); }

/* ---------- buttons ---------- */
.hhr-btn { display: inline-block; padding: 12px 22px; background: var(--hhr-ink); color: #fff; border: 2px solid var(--hhr-ink); border-radius: 2px; font-weight: 700; text-decoration: none; cursor: pointer; font-size: 16px; line-height: 1.2; }
.hhr-btn:hover, .hhr-btn:focus-visible { background: #000; color: #fff; }
.hhr-btn-ghost { background: transparent; color: var(--hhr-ink); }
.hhr-btn-ghost:hover, .hhr-btn-ghost:focus-visible { background: var(--hhr-ink); color: #fff; }
.hhr-btn:focus-visible, .hhr-more-btn:focus-visible { outline: 3px solid var(--hhr-ink); outline-offset: 3px; }
.hhr-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- review pages ---------- */
.hhr-page { background: #fff; }
.hhr-wrap { max-width: 760px; margin: 0 auto; padding: 128px 16px 72px; } /* the fixed site header is 83px */
.hhr-kicker { margin: 0 0 6px; font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--hhr-muted); }
.hhr-h1 { margin: 0 0 12px; font-family: var(--font-display, 'Oswald', sans-serif); font-size: clamp(28px, 5vw, 40px); line-height: 1.15; color: var(--hhr-ink); text-transform: uppercase; }
.hhr-h2 { margin: 0 0 14px; font-size: 20px; color: var(--hhr-ink); }
.hhr-h3 { margin: 0 0 8px; font-size: 17px; color: var(--hhr-ink); }
.hhr-lede { margin: 0 0 28px; font-size: 18px; color: var(--hhr-muted); }
.hhr-lede a { color: var(--hhr-ink); }
.hhr-note { padding: 16px; background: var(--hhr-soft); }
.hhr-card { margin: 0 0 20px; padding: 20px; border: 1px solid var(--hhr-rule); border-radius: 4px; background: #fff; min-width: 0; }
.hhr-product-head { display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 17px; color: var(--hhr-ink); float: left; width: 100%; }
.hhr-product-head + * { clear: both; }
.hhr-thumb { width: 64px; height: 64px; object-fit: contain; background: var(--hhr-soft); border-radius: 2px; flex: none; }
.hhr-rate { margin: 0 0 16px; }
.hhr-label, .hhr-field label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--hhr-ink); }
.hhr-optional { font-weight: 400; color: var(--hhr-muted); }
.hhr-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.hhr-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hhr-rate-stars label { cursor: pointer; line-height: 0; padding: 2px; border-radius: 2px; }
.hhr-rate-stars svg { width: 36px; height: 36px; fill: #fff; stroke: var(--hhr-star-edge); stroke-width: 1.4; transition: fill .1s; }
.hhr-rate-stars input:checked ~ label svg,
.hhr-rate-stars label:hover svg,
.hhr-rate-stars label:hover ~ label svg { fill: var(--hhr-star); }
.hhr-rate-stars:hover input:checked ~ label svg { fill: var(--hhr-star); }
.hhr-rate-stars input:focus-visible + label { outline: 3px solid var(--hhr-ink); outline-offset: 1px; }
.hhr-field { margin: 0 0 16px; }
.hhr-field input, .hhr-field textarea { width: 100%; padding: 11px 12px; font: inherit; font-size: 16px; color: var(--hhr-ink); border: 1px solid #8a8a8a; border-radius: 2px; background: #fff; }
.hhr-field input:focus, .hhr-field textarea:focus { outline: 3px solid var(--hhr-ink); outline-offset: 0; border-color: var(--hhr-ink); }
.hhr-hint { display: block; margin-top: 4px; font-size: 14px; color: var(--hhr-muted); }
.hhr-error { margin: 0 0 12px; padding: 10px 12px; background: #FDECEC; border-left: 3px solid #B42318; color: #7A1A12; font-weight: 600; }
.hhr-actions { margin: 8px 0 32px; }
.hhr-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hhr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hhr-guidelines { padding: 18px 20px; background: var(--hhr-soft); border-radius: 4px; font-size: 15px; color: var(--hhr-muted); }
.hhr-guidelines ul { margin: 0; padding-left: 18px; }
.hhr-thanks { margin-bottom: 28px; }

@media (max-width: 640px) {
  .hhr-summary { grid-template-columns: 1fr; }
  .hhr-card { padding: 16px; }
  .hhr-rate-stars svg { width: 40px; height: 40px; }
}