/* Review browser: page heading + lede over a split of a rating-summary panel and a filter/sort
   toolbar with a card grid. The card surface intentionally mirrors `testimonial-grid`'s item so a
   merchant never sees two different review cards in one theme. */
.review-browser {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
/* The compact page rhythm (56px, 40px on narrow screens) lives on the wrapper so the keyed
   container measures as the bare content box. */
.review-browser--pad-top { padding-top: 56px; }
.review-browser--pad-bottom { padding-bottom: 56px; }
.review-browser--pad-both { padding-block: 56px; }
@media (max-width: 560px) {
  .review-browser--pad-top { padding-top: 40px; }
  .review-browser--pad-bottom { padding-bottom: 40px; }
  .review-browser--pad-both { padding-block: 40px; }
}

.review-browser__inner { display: block; }
.review-browser__lede {
  margin-top: var(--review-browser-lede-gap, 16px);
  max-width: var(--review-browser-lede-width, 50ch);
}
.review-browser__browser { display: block; }

/* The split keeps one gap at every width (the stack below 900px inherits it), so the two-column
   rhythm and the stacked rhythm stay in step. Two selectors to outrank the `.theme-split` reset. */
.review-browser .review-browser__split {
  margin-top: var(--review-browser-split-gap-top, 36px);
  gap: var(--review-browser-split-gap, 36px);
}

/* ---- Summary panel ---- */
.review-browser__summary-head { gap: 16px; align-items: baseline; }
.review-browser__average { font-size: var(--review-browser-average-size, 56px); }
.review-browser__summary-stars { font-size: 18px; }
.review-browser__count { margin-top: 6px; }
.review-browser__bars { gap: 10px; margin-top: var(--review-browser-bars-gap, 22px); }
.review-browser__bar { display: flex; align-items: center; gap: 12px; }
.review-browser__bar-label { width: 34px; }
.review-browser__bar-count { width: 34px; text-align: right; }
.review-browser__bar-track {
  flex: 1; height: 8px; background: rgba(var(--color-text), 0.08);
  border-radius: var(--pill); overflow: hidden;
}
/* The fill only paints when it is blockified. Leaving the modifier off reproduces a source whose
   own fill span stays inline (zero-sized), so a 1:1 migration can match that rendering exactly. */
.review-browser__bar-fill { height: 100%; background: var(--theme-accent); }
.review-browser__bars--filled .review-browser__bar-fill { display: block; }
.review-browser__cta { margin-top: var(--review-browser-cta-gap, 22px); }

/* ---- Toolbar ---- */
.review-browser__toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: var(--review-browser-toolbar-gap, 16px);
}
.review-browser__filters { flex: 1; gap: 8px; }
.review-browser__sort { gap: 8px; }
/* The mono sort label reads as a control label, not sentence copy, so it keeps the uppercase
   treatment whatever casing the merchant types. */
.review-browser__sort-label { text-transform: uppercase; }
.review-browser__sort-select { width: auto; border-radius: var(--pill); padding: 12px 16px; }

/* ---- Cards ---- */
.review-browser__item {
  background: rgba(var(--color-card-background)); border: 1px solid var(--theme-line); border-radius: 20px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.review-browser__item p { margin: 0; font-size: 16px; line-height: 1.55; flex: 1; text-wrap: pretty; }
.review-browser__item footer { font: 600 13px/1 var(--font-body); letter-spacing: 0.04em; color: var(--theme-text-mono); }

.review-browser__empty { padding: 60px 20px; text-align: center; color: rgba(var(--color-light-text)); }

@media (max-width: 620px) {
  /* The toolbar tightens with the rest of the narrow-screen chrome so the chips keep their row. */
  .review-browser__toolbar { gap: 8px; }
}