/**
 * Good Review — front end.
 *
 * Deliberately restrained: it inherits the theme's typography and only sets
 * what it has to. The complaint about the current setup was that fonts and
 * colours were "all a bit off" in the tables, which happened because the old
 * plugin shipped 21 box templates and per-post colour settings. There is one
 * look here, driven by these variables.
 */

/* The palette lives on :root, not on .goodreview.
   Only the full hub carries the .goodreview class; a score dropped into a
   comparison table, a lone key-figures block or the submission form on its
   own page have no such ancestor, so scoping the variables to .goodreview
   left every standalone component with unresolved var() and no colour at
   all. Anything inside .goodreview can still override them. */
:root {
  --gr-accent: #1e73be;
  --gr-star: #dba617;
  --gr-good: #2c6b4f;
  --gr-bad: #b4432c;
  --gr-line: #e2e6eb;
  --gr-muted: #5d6979;
  --gr-surface: #fff;
}

.goodreview {
  color: inherit;
}

/* ---------- score ---------- */
.goodreview-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-variant-numeric: tabular-nums;
}
.goodreview-score strong { font-size: 1.6em; line-height: 1; }
.goodreview-score__of { color: var(--gr-muted); font-size: 0.85em; }
.goodreview-score__label { color: var(--gr-good); font-weight: 600; font-size: 0.9em; }

/* A grey row with a gold row clipped over it, so a 3.7 shows three full
   stars and 70% of the fourth. Both rows carry the same five characters at
   the same metrics; letter-spacing is uniform per character, so a percentage
   of the total width is the same fraction of a star. Nothing here may set a
   width, padding or spacing on one row and not the other, or the fill drifts
   out of register with the base. */
.goodreview-stars {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}

.goodreview-stars__base {
  color: #d3d7dd;
}

.goodreview-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  color: var(--gr-star);
}

/* ---------- criteria ---------- */
/* The columns are declared here as well as on the card, because the rows are
   subgrid: placed on their own - a comparison cell, say - there was no parent
   track for them to line up with and the name, bar and score all landed in
   one column. */
.goodreview-criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.4em;
}
.goodreview-criteria--no-values { grid-template-columns: auto minmax(0, 1fr); }
.goodreview-criteria--no-values .goodreview-criterion { grid-column: 1 / 3; }

/* Stars instead of a bar. The track is sized to the stars rather than
   stretched, so two providers' rows line up beside each other. */
.goodreview-criteria--stars { grid-template-columns: minmax(0, 1fr) auto auto; }
.goodreview-criterion__stars {
  grid-column: 2 / 3;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.goodreview-criterion {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: subgrid;
  grid-column: 1 / 4;
  align-items: center;
  font-size: 0.95em;
}
.goodreview-criterion__name {
  grid-column: 1 / 2;
  min-width: 0;
}
.goodreview-criterion__bar {
  grid-column: 2 / 3;
  background: var(--gr-line);
  border-radius: 4px;
  height: 7px;
  overflow: hidden;
}
.goodreview-criterion__bar i { display: block; height: 100%; background: var(--gr-good); border-radius: 4px; }
.goodreview-criterion__value {
  grid-column: 3 / 4;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- distribution (shared shell; colours set in the hub sheet) ---------- */
.goodreview-dist {
  display: grid;
  list-style: none;
  margin: 0.8em 0 0;
  padding: 0;
  display: grid;
  gap: 0.3em;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-auto-flow: row dense;
}
.goodreview-dist li {
  display: grid;
  grid-template-columns: minmax(3.6em, auto) minmax(0, 1fr) 2.6em;
  align-items: center;
  gap: 0.6em;
  font-size: 0.86em;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
.goodreview-dist__bar { background: var(--gr-line); border-radius: 4px; height: 7px; overflow: hidden; }
.goodreview-dist__bar i { display: block; height: 100%; background: var(--gr-star); border-radius: 4px; }
.goodreview-dist__pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--gr-muted); }
/* Labels off: the bar takes the room the words had. */
.goodreview-dist--bare li { grid-template-columns: minmax(0, 1fr) 2.6em; }

.goodreview-customer-criteria__note { color: var(--gr-muted); font-size: 0.85em; margin-top: 0.4em; }

/* ---------- provider ---------- */
/* Who the review is of, linked to it. Inline-flex so it sits happily in a
   table cell, a heading or a sentence. */
.goodreview-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  line-height: 1.2;
}
a.goodreview-provider:hover .goodreview-provider__name,
a.goodreview-provider:focus .goodreview-provider__name { text-decoration: underline; }
.goodreview-provider__logo {
  width: 3em;
  height: 3em;
  object-fit: contain;
  border-radius: 6px;
  flex: none;
}
.goodreview-provider__name { min-width: 0; }

/* ---------- customer breakdown ---------- */
/* The customer card's numbers, without the card: a score, its stars, the
   count and the bars. Centred, because every placement so far is a column. */
.goodreview-breakdown { display: block; text-align: center; }
.goodreview-breakdown__value {
  display: block;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
}
.goodreview-breakdown .goodreview-stars { font-size: 1.3em; }
.goodreview-breakdown__text {
  margin: 0.25em 0 0;
  color: var(--gr-muted);
  font-size: 0.9em;
  text-wrap: pretty;
}
.goodreview-breakdown .goodreview-dist { text-align: left; }

/* ---------- themes ----------
   One variable rather than a rule per component: the accent drives the call to
   action and everything else that leans on it, so a theme is a change of
   accent. Orange is GoodTable's button colour, for placements that sit next to
   one of its tables and would otherwise be the only blue thing on the row. */
/* A theme recolours whatever the component draws in: the accent for a button,
   the stars for a rating. Gold stays the default everywhere it is not asked
   for - blue stars are what the comparison tables have always had, and the
   review pages have always had gold. */
.goodreview-theme--orange { --gr-accent: #ff9900; --gr-star: #ff9900; }
.goodreview-theme--blue { --gr-accent: #1e73be; --gr-star: #1e73be; }
.goodreview-theme--green { --gr-accent: #2c6b4f; --gr-star: #2c6b4f; }

/* Nothing else is needed for the stars: the fill already draws itself in
   var(--gr-star), and a variable set on the element reaches it whether the
   theme lands on the stars themselves or on something they sit inside. The
   grey base is a fixed colour, so only the filled part changes. */

/* The button is the reason the theme exists, so it takes the full treatment:
   GoodTable's buttons are solid, bold and do not wrap. */
.goodreview-cta__link.goodreview-theme--orange,
.goodreview-theme--orange .goodreview-cta__link {
  background: var(--gr-accent);
  border-color: var(--gr-accent);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- score + stars, for a comparison column ----------

   One element carries the size and both the number and the stars read from
   it, so they cannot drift apart the way two shortcodes side by side did.
   20px is the base Richard asked for; size="small|large" scales the pair
   because everything under here is in em.
   ----------------------------------------------------------------- */

.goodreview-rating {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1em;
  font-size: 20px;
  line-height: 1.25;
}

.goodreview-rating__row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.goodreview-rating__score {
  font-weight: 600;
}

/* The whole point: the stars are the size of the number beside them. */
.goodreview-rating .goodreview-stars {
  font-size: 1em;
  line-height: 1;
}

/* Block, not just a flex child: align="center" turns the root into a plain
   block (an inline component cannot align itself), and the count would then
   run on after the stars instead of sitting under them. */
.goodreview-rating__count {
  display: block;
  font-size: 0.7em;
  color: var(--gr-muted);
}

/* Centred or right-aligned, the two lines have to follow the alignment
   rather than staying left inside a centred block. */
.goodreview-align--center .goodreview-rating__row,
.goodreview-align--center.goodreview-rating,
.goodreview-align--center.goodreview-rating .goodreview-rating__count {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.goodreview-align--right .goodreview-rating__row,
.goodreview-align--right.goodreview-rating,
.goodreview-align--right.goodreview-rating .goodreview-rating__count {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

/* ---------- size and alignment ----------
   Set on the shortcode, for the same component in two places: a review page
   wants the stars at reading size, a comparison column wants them smaller.
   Font size carries it, because everything here is sized in em. */
.goodreview-size--small { font-size: 0.85em; }
.goodreview-size--medium { font-size: 1em; }
.goodreview-size--large { font-size: 1.25em; }
.goodreview-align--left { text-align: left; }
.goodreview-align--center { text-align: center; }
.goodreview-align--right { text-align: right; }
/* An inline component cannot align itself, so it becomes a block first. */
span.goodreview-align--left,
span.goodreview-align--center,
span.goodreview-align--right { display: block; }

/* ---------- reviews ---------- */
.goodreview-review { border-top: 1px solid var(--gr-line); padding: 0.9em 0; }
.goodreview-review h4 { margin: 0 0 0.25em; font-size: 1.25em; }
.goodreview-review .goodreview-stars { font-size: 1.5rem; }
.goodreview-review__head { margin: 0 0 0.5em; font-size: 0.95em; }
.goodreview-review__meta {
  margin: 0 0 0.25em;
  color: var(--gr-muted);
  font-size: 0.85em;
  margin-bottom: 0.5em;
}
.goodreview-review__author { font-weight: 600; color: inherit; }
.goodreview-review time { color: inherit; }
.goodreview-review__response {
  margin-top: 0.6em;
  padding: 0.6em 0.85em;
  border-left: 3px solid var(--gr-accent);
  background: rgba(30, 115, 190, 0.05);
  font-size: 0.95em;
}

/* ---------- compact ---------- */
.goodreview-compact { border: 1px solid var(--gr-line); border-radius: 6px; padding: 0.85em 1em; }
.goodreview-compact__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.goodreview-compact__name { font-weight: 700; }

/* ---------- form ---------- */
.goodreview-form { display: grid; gap: 0.85em; max-width: 34em; }
.goodreview-form label { display: block; font-weight: 600; margin-bottom: 0.2em; }
.goodreview-form input[type="text"],
.goodreview-form input[type="email"],
.goodreview-form select,
.goodreview-form textarea { width: 100%; }
.goodreview-form__criteria { border: 1px solid var(--gr-line); border-radius: 6px; padding: 0.75em 1em; }
.goodreview-form__consent label { font-weight: 400; font-size: 0.9em; display: flex; gap: 0.5em; }
.goodreview-form__notice {
  border-left: 3px solid var(--gr-good);
  background: rgba(44, 107, 79, 0.07);
  padding: 0.6em 0.9em;
}

/* @media (max-width: 600px) {
  .goodreview-criterion { grid-template-columns: 1fr 4em; }
  .goodreview-criterion__bar { display: none; }
} */


/* =================================================================
   Hub layout
   =================================================================

   Two columns: the rating cards carry the page, reference material sits
   beside them. Everything below inherits the theme font and colour where it
   can - the only things set here are structural, plus the accents that have
   to stay consistent for a score to read the same everywhere.
   ================================================================= */

.goodreview--hub {
  --gr-radius: 10px;
  --gr-pad: 1.25rem;
}

.goodreview-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.goodreview-layout__main,
.goodreview-layout__aside {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}

/* ---------- cards ---------- */
.goodreview-card {
  background: var(--gr-surface);
  border: 1px solid var(--gr-line);
  border-radius: var(--gr-radius);
  padding: var(--gr-pad);
  margin: 0;
}

/* The eyebrow is a row: the heading, then the info button beside it. The
   row carries the type so the heading inside can inherit it, which is how
   five of these became real h2 elements without changing the design. */
.goodreview .goodreview-eyebrow,
.goodreview-eyebrow {
  display: flex;
  align-items: baseline;
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gr-muted);
}

/* Doubled up for the same reason: a theme's `.entry-content h2` must not
   out-specify this and reintroduce its own size and margins. */
.goodreview .goodreview-eyebrow__text,
.goodreview-eyebrow__text {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* Score | detail | points. The score column is the anchor, so it gets a
   fixed-ish width and the other two share what is left. */
.goodreview-card__grid {
  display: grid;
  grid-template-areas:
    "score detail"
    "score points";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  align-items: start;
}

.goodreview-card__detail {
  grid-area: detail;
  min-width: 0;
}
.goodreview-card__detail .goodreview-criteria {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
}
.goodreview-card__detail .goodreview-dist { margin: 0; }

.goodreview-card__value {
  grid-area: value;
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


.goodreview-card__score {
  grid-area: score;
  display: grid;
  grid-template:
    "value stars"
    "label label"
    "intro intro";
  align-items: baseline;
}
.goodreview-card__score .goodreview-stars {
  grid-area: stars;
  display: block;
  margin: 0.35rem 0 0.2rem;
  font-size: 2.4rem;
  line-height: 1;
}

.goodreview-card__label {
  grid-area: label;
  display: block;
  font-weight: 600;
  color: var(--gr-good);
}

.goodreview-card__intro,
.goodreview-expert__intro {
  grid-area: intro;
  color: var(--gr-muted);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
  margin-bottom: 0;
}

/* ---------- header ---------- */
.goodreview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0 0 1.25rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--gr-line);
}

.goodreview-header__identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 22rem;
  min-width: 0;
}

/* ---------- pros, cons, likes, dislikes ---------- */
.goodreview-card__points {
  grid-area: points;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
}

.goodreview-points h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.goodreview-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.goodreview-points li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.86rem;
  line-height: 1.4;
}

.goodreview-points__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: 0.72rem;
  line-height: 1;
  margin-top: 0.1rem;
}

.goodreview-points--positive .goodreview-points__icon {
  background: rgba(44, 107, 79, 0.12);
  color: var(--gr-good);
}

.goodreview-points--negative .goodreview-points__icon {
  background: rgba(180, 67, 44, 0.12);
  color: var(--gr-bad);
}

/* ---------- distribution ---------- */
.goodreview-dist__bar i.is-good {
  background: var(--gr-good);
}

.goodreview-dist__bar i.is-mixed {
  background: var(--gr-star);
}

.goodreview-dist__bar i.is-bad {
  background: var(--gr-bad);
}

/* ---------- key figures ---------- */
.goodreview-figures ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.goodreview-figure {
  display: grid;
  grid-template-columns: 2rem auto 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gr-line);
  font-size: 0.88rem;
}

.goodreview-figure:last-child {
  border-bottom: 0;
}

.goodreview-figure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(30, 115, 190, 0.09);
  font-size: 0.95rem;
}

.goodreview-figure__name {
  color: var(--gr-muted);
  min-width: 0;
}

.goodreview-figure__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Yes/no figures read as a scannable column, which is the point of them -
   so the tick and cross carry the same green and red as the pros and cons
   rather than inventing a third pair. */
.goodreview-figure__bool {
  display: inline-flex;
  align-items: center;
}

.goodreview-figure__bool--yes {
  color: var(--gr-good);
}

.goodreview-figure__bool--no {
  color: var(--gr-bad);
}

.goodreview-figure__note {
  font-weight: 400;
  color: var(--gr-muted);
  font-size: 0.8em;
}

/* ---------- about, FAQs ---------- */

/* Full size rather than 0.88rem. It was sized as a sidebar aside, which put
   it at 14px - below what anyone should have to read body copy at. */
.goodreview-about p {
  font-size: 1rem;
}

.goodreview-about p:last-child {
  margin-bottom: 0;
}

.goodreview-faq {
  border-bottom: 1px solid var(--gr-line);
  padding: 0.6rem 0;
}

.goodreview-faq:last-child {
  border-bottom: 0;
}

.goodreview-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}

/* The question is an h4 so the affiliate autolinker leaves it alone - it
   skips headings - and so the questions sit in the outline where they
   belong. It has to look exactly like the summary text it replaced, hence
   inline and font: inherit rather than the theme's h4. */
.goodreview-faq__q {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.goodreview-faq div {
  font-size: 0.86rem;
  padding-top: 0.4rem;
}

/* ---------- disclosures ---------- */
.goodreview-disclosure {
  margin: 1rem 0 0;
  border-top: 1px solid var(--gr-line);
  padding-top: 0.75rem;
}

.goodreview-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gr-accent);
  list-style: none;
  text-align: right;
}

.goodreview-disclosure summary::-webkit-details-marker {
  display: none;
}

.goodreview-disclosure summary::after {
  content: " \2192";
}

.goodreview-disclosure[open] summary::after {
  content: " \2191";
}

.goodreview-disclosure__body {
  padding-top: 1rem;
}

/* ---------- the written review ---------- */
.goodreview-summary__title {
  margin: 0 0 0.5rem;
}

.goodreview-summary__image {
  float: right;
  width: 200px;
  height: auto;
  margin: 0 0 1rem 1.25rem;
  border-radius: 8px;
}

.goodreview-summary__body::after {
  content: "";
  display: block;
  clear: both;
}

.goodreview-section {
  margin: 0 0 1rem;
}

.goodreview-section h3 {
  margin: 0 0 0.3rem;
}

.goodreview-verdict {
  border-left: 3px solid var(--gr-accent);
  background: rgba(30, 115, 190, 0.05);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.2rem;
  margin: 0 0 1rem;
}

.goodreview-verdict h3 {
  margin: 0 0 0.3rem;
}

/* In the header it sits directly under the buttons, so it takes the grid's
   own gap rather than the standing-clear margin it needed at the foot of
   the page. */
.goodreview-header__actions .goodreview-risk {
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}

.goodreview-risk {
  color: var(--gr-muted);
  font-size: 0.78rem;
  margin: 1.25rem 0 0;
  line-height: 1.5;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .goodreview-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .goodreview-card__score {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
  }

  .goodreview-card__value {
    font-size: 2.1rem;
  }

  .goodreview-card__intro {
    flex: 1 0 100%;
    margin-top: 0.2rem;
  }
}

@media (max-width: 600px) {
  .goodreview-header__actions {
    flex: 1 1 100%;
  }

  .goodreview-summary__image {
    float: none;
    width: 100%;
    max-width: 200px;
    margin: 0 0 1rem;
  }


  .goodreview-card__grid {
    grid-template-areas:
      "score"
      "detail"
      "points";
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .goodreview-card__points {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- review pager ---------- */
.goodreview-reviews.is-loading .goodreview-reviews__list { opacity: 0.5; transition: opacity 0.15s; }

/* Search, sort and filter above the review list. A row on a wide screen,
   stacked on a narrow one - the search box is the part worth the width. */
.goodreview-reviews__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.goodreview-reviews__search {
  display: flex;
  flex: 1 1 16rem;
  min-width: 0;
}

.goodreview-reviews__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gr-line);
  border-radius: 6px 0 0 6px;
  font: inherit;
}

.goodreview-reviews__search button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gr-accent);
  border-radius: 0 6px 6px 0;
  background: var(--gr-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.goodreview-reviews__control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.goodreview-reviews__control label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gr-muted);
}

.goodreview-reviews__control select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gr-line);
  border-radius: 6px;
  background: var(--gr-surface);
  font: inherit;
}

.goodreview-reviews__none {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed var(--gr-line);
  border-radius: 6px;
  color: var(--gr-muted);
  text-align: center;
}

@media (max-width: 600px) {
  .goodreview-reviews__controls { gap: 0.5rem; }
  .goodreview-reviews__control { flex: 1 1 100%; }
}

.goodreview-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gr-line);
}

.goodreview-pager__status { margin: 0; color: var(--gr-muted); font-size: 0.82rem; }
.goodreview-pager__links { display: flex; gap: 0.5rem; }

.goodreview-pager__links a {
  border: 1px solid var(--gr-line);
  border-radius: 6px;
  padding: 0.35em 0.9em;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 600;
}

.goodreview-pager__links a:hover { border-color: var(--gr-accent); }

/* ---------- the form, as a card in the hub ---------- */
.goodreview-form-card .goodreview-form { max-width: 100%; }

.goodreview-form-card input[type="text"],
.goodreview-form-card input[type="email"],
.goodreview-form-card select,
.goodreview-form-card textarea {
  padding: 0.5em 0.65em;
  border: 1px solid var(--gr-line);
  border-radius: 6px;
}

.goodreview-form-card button[type="submit"] {
  background: var(--gr-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.7em 1.5em;
  font-weight: 600;
  cursor: pointer;
}

.goodreview-form-card button[type="submit"]:hover { filter: brightness(0.92); }

/* ---------- clickable star rating ----------

   The inputs are in the DOM 5 down to 1 and the row is reversed here, which
   is what makes "the chosen star and everything below it" a plain sibling
   selector. No script involved: this is radio buttons wearing stars.
   -------------------------------------------------------------------- */

.goodreview-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.goodreview-stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.1em;
  vertical-align: middle;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--gr-line);
}

.goodreview-stars-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.goodreview-stars-input label {
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  color: #d3d7dd;
  padding: 0 0.02em;
  margin: 0;
  font-weight: 400;
  transition: color 0.12s ease, transform 0.12s ease;
}

/* The checked star and every star below it. */
.goodreview-stars-input input:checked ~ label {
  color: var(--gr-star);
}

/* Hovering previews a rating, so the current value steps out of the way while
   the pointer is over the row.
   The two rules below have to stay in this specificity order: the reset is
   (0,2,1) and the preview is (0,3,2), so the preview wins. Written the other
   way round - :hover input:checked ~ label against label:hover ~ label - the
   reset outranks the preview and the whole row greys out under the pointer,
   which is exactly what it did the first time. */
.goodreview-stars-input:hover label {
  color: #d3d7dd;
}

.goodreview-stars-input:hover label:hover,
.goodreview-stars-input:hover label:hover ~ label {
  color: var(--gr-star);
}

/* Keyboard users get the same affordance as the mouse. */
.goodreview-stars-input input:focus-visible + label {
  outline: 2px solid var(--gr-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.goodreview-stars-input__none {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.goodreview-stars-input__clear {
  margin-left: 0.6em;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gr-muted);
  cursor: pointer;
  text-decoration: underline;
  vertical-align: middle;
}

.goodreview-stars-input__clear:hover {
  color: var(--gr-bad);
}

/* Hide "Clear" until something is actually rated. */
.goodreview-stars-input__none:checked ~ .goodreview-stars-input__clear {
  visibility: hidden;
}

/* ---------- form: rating rows ----------

   The label sits in a fixed column so every star box starts at the same x
   down the list. Sizing it in ch keeps that true when the theme changes the
   font, and the row wraps rather than squashing on a narrow screen.
   -------------------------------------------------------------------- */

.goodreview-form__rating {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

.goodreview-form__rating-label,
.goodreview-form__criterion-label {
  flex: 0 0 14ch;
  max-width: 100%;
  font-weight: 600;
  line-height: 1.3;
}

.goodreview-form__criterion-label {
  font-weight: 400;
}

.goodreview-form__criteria {
  display: grid;
  gap: 0.5em;
}

.goodreview-form__criteria legend {
  font-weight: 600;
  padding: 0 0.35em;
}

.goodreview-form__criterion {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

/* The star box is a control, so it gets the same border treatment as the
   text inputs beside it. */
.goodreview-stars-input {
  flex: 0 0 auto;
}

/* "Clear" is a <label>, which .goodreview-form label turns into a block —
   that dropped it onto its own line under the stars. */
.goodreview-form .goodreview-stars-input__clear {
  display: inline-block;
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .goodreview-form__rating-label,
  .goodreview-form__criterion-label {
    flex: 1 0 100%;
  }
}

.goodreview-form__criterion .goodreview-stars-input label {
  font-size: 1.35rem;
}

/* =================================================================
   Header and product pills — closer to the design
   ================================================================= */

.goodreview-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: var(--gr-surface);
  overflow: hidden;
}

/* The tile is an <a> when there is somewhere to go, so it needs the anchor
   defaults taking off it and something to show it is clickable. */
.goodreview-header__logo--link {
  text-decoration: none;
  border: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.goodreview-header__logo--link:hover,
.goodreview-header__logo--link:focus-visible {
  box-shadow: 0 0 0 2px var(--gr-accent);
}

.goodreview-header__logo--link:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .goodreview-header__logo--link:hover {
    transform: translateY(-1px);
  }
}

.goodreview-header__logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.goodreview-header__logo-initials {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gr-muted);
}

.goodreview-header__meta__head {
  margin-bottom: 0.75em;
}
.goodreview-header__name {
  display: inline;
  font-size: 2rem;
  line-height: 1.15;
  margin: 0;
  padding: 0;
}

/* The provider name carries the heading; what follows it says what kind of
   page this is, so it steps back. Sized in em so it tracks whatever heading
   level the shortcode was given. */
.goodreview-header__brand {
  font-weight: inherit;
}

.goodreview-header__subtitle {
  font-weight: 400;
}

.goodreview-headline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  line-height: 1;
}

.goodreview-headline__value {
  font-size: 3.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.goodreview-headline__value i {
  font-size: 1.5rem;
  opacity: 0.8;
  font-style: normal;
  font-weight: 400;
}

.goodreview-headline .goodreview-stars {
  font-size: 1.5rem;
}

.goodreview-headline__label {
  font-weight: 600;
  color: var(--gr-good);
}

.goodreview-header__basis,
.goodreview-header__byline,
p.goodreview-header__basis,
p.goodreview-header__byline {
  color: var(--gr-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
  margin-bottom: 0;
}
.goodreview-header__basis,
p.goodreview-header__basis {
  margin-top: 0.25rem;
}
.goodreview-header__byline,
p.goodreview-header__byline {
  margin-top: 1rem;
}


/* Both buttons share a column and match width, as in the design. */
.goodreview-header__actions {
  display: grid;
  gap: 0.5rem;
  flex: 0 1 19rem;
  min-width: 13rem;
  align-content: start;
}

.goodreview-cta__link,
.goodreview-cta__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  text-align: center;
  border-radius: 6px;
  padding: 0.72em 1.4em;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 0.12s ease, border-color 0.12s ease;
}

.goodreview-cta__link {
  background: var(--gr-accent);
  border-color: var(--gr-accent);
  color: #fff;
}

.goodreview-cta__link:hover,
.goodreview-cta__link:focus {
  filter: brightness(0.92);
  color: #fff;
}

.goodreview-cta__icon {
  font-size: 0.9em;
  line-height: 1;
}

.goodreview-cta__secondary {
  background: var(--gr-surface);
  color: inherit;
  border-color: var(--gr-line);
}

.goodreview-cta__secondary:hover,
.goodreview-cta__secondary:focus {
  border-color: var(--gr-accent);
  color: inherit;
}

.goodreview-products {
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* Sits on the same line as the chips, as in Richard's markup, and drops
   above them when the row runs out of width rather than squeezing them. */
p.goodreview-products__label,
.goodreview-products__label {
  margin: 0;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 600;
  color: var(--goodreview-muted, #4b5563);
}

.goodreview-products ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.goodreview-product {
  margin: 0;
}

/* ---------- product pills ----------

   Tints come from a fixed set chosen in the admin, not a colour picker.
   Each is a translucent wash of its own hue so it sits on any theme
   background, with the text a darker shade of the same hue for contrast.
   -------------------------------------------------------------------- */

.goodreview-product a,
.goodreview-product.is-plain span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border: 1px solid var(--gr-line);
  border-radius: 999px;
  padding: 0.35em 0.95em;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none !important;
  background: var(--gr-surface);
  color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.goodreview-product a:hover {
  border-color: currentColor;
  text-decoration: none;
}

.goodreview-product--blue a,
.goodreview-product--blue.is-plain span {
  background: rgba(30, 115, 190, 0.10);
  border-color: rgba(30, 115, 190, 0.10);
  color: #14568f;
}

.goodreview-product--green a,
.goodreview-product--green.is-plain span {
  background: rgba(44, 107, 79, 0.10);
  border-color: rgba(44, 107, 79, 0.10);
  color: #24573f;
}

.goodreview-product--red a,
.goodreview-product--red.is-plain span {
  background: rgba(180, 67, 44, 0.10);
  border-color: rgba(180, 67, 44, 0.10);
  color: #93341f;
}

.goodreview-product--amber a,
.goodreview-product--amber.is-plain span {
  background: rgba(219, 166, 23, 0.14);
  border-color: rgba(219, 166, 23, 0.14);
  color: #8a660b;
}

.goodreview-product--purple a,
.goodreview-product--purple.is-plain span {
  background: rgba(112, 68, 168, 0.10);
  border-color: rgba(112, 68, 168, 0.10);
  color: #5a3688;
}

.goodreview-product--teal a,
.goodreview-product--teal.is-plain span {
  background: rgba(23, 130, 130, 0.10);
  border-color: rgba(23, 130, 130, 0.10);
  color: #106363;
}

.goodreview-product--grey a,
.goodreview-product--grey.is-plain span {
  background: rgba(93, 105, 121, 0.10);
  border-color: rgba(93, 105, 121, 0.10);
  color: var(--gr-muted);
}

@media (max-width: 700px) {
  .goodreview-header__logo {
    width: 80px;
    height: 80px;
  }

  .goodreview-header__actions {
    flex: 1 1 100%;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .goodreview-header__actions {
    grid-template-columns: 1fr;
  }
}

/* Admin: the colour select on a product row. */

/* ---------- the (i) buttons ----------

   A button plus a panel shown on hover and focus-within, so it needs no
   script. Deliberately not <details>: the eyebrow is a <p>, and the parser
   auto-closes an open <p> on a <details> start tag, which threw the whole
   disclosure out of the heading. A button and a span are phrasing content
   and are valid wherever this is dropped.
   -------------------------------------------------------------------- */

.goodreview-info {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4em;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.goodreview-info__toggle {
  /* Matching .gmg-rev-head__info on the site: a bordered circle with an
     italic serif "i" drawn in CSS. The border is currentColor here rather
     than white, because these sit on light cards as well as the header. */
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--gr-muted);
  opacity: 0.75;
  transition: opacity 0.12s ease, color 0.12s ease;
}

.goodreview-info__toggle::before {
  content: "i";
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.goodreview-info__toggle:hover,
.goodreview-info__toggle:focus-visible {
  opacity: 1;
  color: var(--gr-accent);
  background: transparent;
}

.goodreview-info__toggle:focus-visible {
  outline: 2px solid var(--gr-accent);
  outline-offset: 2px;
}

.goodreview-info__body {
  position: absolute;
  top: calc(100% + 0.5em);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: 17rem;
  padding: 0.65em 0.85em;
  background: #2c3338;
  color: #fff;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.goodreview-info:hover .goodreview-info__body,
.goodreview-info:focus-within .goodreview-info__body {
  opacity: 1;
  visibility: visible;
}

.goodreview-info__body::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #2c3338;
}

/* In the sidebar the panel would run off the right edge of the card. */
.goodreview-layout__aside .goodreview-info__body {
  left: auto;
  right: -0.5em;
  transform: none;
}

.goodreview-layout__aside .goodreview-info__body::before {
  left: auto;
  right: 1em;
  transform: none;
}

@media (max-width: 600px) {
  .goodreview-info__body {
    max-width: 14rem;
  }
}

/* ---------- icons ----------

   Stroked SVG sized in em, so an icon always matches the text it sits with
   and takes its colour from the badge around it. The glyph fallback keeps
   any emoji an editor set by hand rendering as before.
   -------------------------------------------------------------------- */

.goodreview-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

.goodreview-icon--glyph {
  font-size: 0.95em;
  line-height: 1;
}

.goodreview-figure__icon .goodreview-icon {
  font-size: 1.05rem;
  color: var(--gr-accent);
}

.goodreview-points__icon .goodreview-icon {
  font-size: 0.8em;
  stroke-width: 2.5;
}

.goodreview-cta__icon .goodreview-icon {
  font-size: 0.85em;
}

/* ---------- what one reviewer scored ---------- */
.goodreview-review-criteria {
  /* Stacked and aligned, so the names read down one edge and the stars down
     the other - a small scorecard rather than a wrapped sentence. Two columns
     on the grid, not on each row, or nothing lines up between rows. */
  list-style: none;
  margin: 0 0 0.75em;
  padding: 0.6em 0.85em;
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.3em 0.9em;
  justify-content: start;
  border-left: 2px solid var(--gr-line);
}

.goodreview-review-criterion {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 3;
  align-items: center;
  font-size: 0.82em;
  color: var(--gr-muted);
}

.goodreview-review-criterion .goodreview-stars {
  font-size: 0.9em;
}

.goodreview-review__body > :first-child { margin-top: 0; }
.goodreview-review__body > :last-child { margin-bottom: 0; }

/* ---------- AI overview ---------- */

/* Sits directly under the header, as the first thing a reader gets. Tinted
   rather than boxed like the rating cards: it is a summary of what is below,
   not another panel of its own. */
.goodreview-overview {
  margin: 1.25rem 0;
  padding: 1em 1.2em;
  background: color-mix(in srgb, var(--gr-accent) 5%, var(--gr-surface));
  border: 1px solid color-mix(in srgb, var(--gr-accent) 18%, var(--gr-line));
  border-radius: 8px;
}

.goodreview-overview__title {
  margin: 0 0 0.5em;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gr-accent);
}

.goodreview-overview__body ul {
  margin: 0;
  padding-left: 1.15em;
  list-style: disc;
}

.goodreview-overview__body li {
  margin: 0 0 0.55em;
  line-height: 1.55;
}

.goodreview-overview__body li:last-child {
  margin-bottom: 0;
}

.goodreview-overview__body > p:first-child { margin-top: 0; }
.goodreview-overview__body > p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .goodreview-overview { transition: none; }
}

/* Editor-only shortcut back to wp-admin. Deliberately plain and out of the
   way: it is scaffolding for the two people who can see it, not part of the
   design Richard signed off. */
.goodreview-edit {
  margin: 0 0 0.6em;
  text-align: right;
  font-size: 0.8em;
}

.goodreview-edit a {
  color: var(--gr-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.goodreview-edit a:hover,
.goodreview-edit a:focus {
  color: var(--gr-accent);
}

@media print {
  .goodreview-edit { display: none; }
}