/**
 * Customer-facing review styles (Phase 2b).
 *
 * Matches the vacuumsrus.com palette via vru-theme tokens with literal
 * fallbacks: blue #0170B9 actions and links, green #1A7F37 positive, orange
 * #D97706 helpful callouts, red #CF2E2E warnings, slate #4B4F58 text, warm gold
 * star fill. No dash punctuation in any customer-facing copy.
 */

.vru-rev-block,
.vru-rev-compare {
	--vru-rev-blue: var(--vru-color-primary, #0170B9);
	--vru-rev-green: #1A7F37;
	--vru-rev-orange: #D97706;
	--vru-rev-red: #CF2E2E;
	--vru-rev-text: var(--vru-color-text, #4B4F58);
	--vru-rev-muted: var(--vru-color-muted, #62666c);
	--vru-rev-border: var(--vru-color-border, #e2e8ed);
	--vru-rev-surface: var(--vru-color-surface, #F2F5F7);
	--vru-rev-star: #E8A33D;
	--vru-rev-star-track: #E6E1D6;
	/* Round 18 Fix 2: the gap between a reading's rating (star plus score) and its
	   trailing value in its unit. Roughly double the old 4px so "3.9" and "63 dB"
	   read as two distinct things, never one blurred string. Defined on the shared
	   review-block/compare root so the tree and the comparison inherit one rule. */
	--vru-rev-rating-value-gap: 12px;
	color: var(--vru-rev-text);
	font-family: var(--vru-font-body, inherit);
	line-height: 1.5;
}

.vru-rev-block {
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	padding: 20px;
	margin: 24px 0;
	background: #fff;
}

.vru-rev-block-title {
	font-family: var(--vru-font-heading, inherit);
	font-size: 1.35rem;
	margin: 0 0 12px;
}

/* ---------------------------------------------------------------- stars. */

.vru-rev-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.vru-rev-stars-svg {
	display: inline-block;
	height: 1.05em;
	width: auto;
	vertical-align: middle;
}

.vru-rev-stars-sm .vru-rev-stars-svg { height: 0.95em; }
.vru-rev-stars-md .vru-rev-stars-svg { height: 1.2em; }
.vru-rev-stars-lg .vru-rev-stars-svg { height: 1.9em; }

.vru-rev-star-track { fill: var(--vru-rev-star-track); }
.vru-rev-star-fill { fill: var(--vru-rev-star); }

.vru-rev-star-num {
	font-weight: 700;
	font-size: 0.95em;
}

.vru-rev-stars-lg .vru-rev-star-num { font-size: 1.5rem; }

.vru-rev-star-note {
	color: var(--vru-rev-muted);
	font-size: 0.9em;
	/* Round 45 Fix 3: the gathering note is a text child of .vru-rev-stars, which
	   sets white-space: nowrap to keep the star glyphs on one line. Left inherited,
	   that nowrap ran the note straight out of its box at mobile width. The note is
	   prose, so it wraps; the stars beside it still do not (their own rule holds). */
	white-space: normal;
}

/* ---------------------------------------------------------------- headline. */

.vru-rev-headline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	padding: 12px 0 16px;
	border-bottom: 1px solid var(--vru-rev-border);
	margin-bottom: 12px;
}
/* Round 18 Fix 3: the overall stars and the value sit in their own row, while the
   machine's face sits upper right beside them. With no hero the main group is the
   sole child, so nothing shifts. Round 22 Fix 2: the row top-aligns (flex-start)
   so the two ratings' tops line up while the Compare button hangs under the overall
   in its own column; with the equal-height rating blocks this matches the old
   centered row exactly. */
.vru-rev-headline-main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	flex: 1 1 auto;
	min-width: 0;
}
.vru-rev-hero {
	flex: 0 0 auto;
	margin-left: auto;
}
.vru-rev-hero-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 300px;
	border-radius: 10px;
	border: 1px solid var(--vru-rev-border);
	background: #fff;
}

.vru-rev-overall,
.vru-rev-value {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vru-rev-overall-label,
.vru-rev-value-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vru-rev-muted);
	font-weight: 600;
}

.vru-rev-value {
	padding-left: 24px;
	border-left: 1px solid var(--vru-rev-border);
}

.vru-rev-completeness {
	font-size: 0.85rem;
	color: var(--vru-rev-muted);
}

/* ----------------------------------------------------------- crosslinks. */

.vru-rev-crosslink { margin: 8px 0; }

.vru-rev-cta {
	display: inline-block;
	background: var(--vru-rev-blue);
	color: #fff;
	padding: 10px 22px;
	border-radius: var(--vru-btn-radius, 3px);
	text-decoration: none;
	font-weight: 600;
}
/* Round 17 Fix 2: a fixed accessible hover, not the theme link-hover accent, so
   the white button text always clears WCAG AA (the accent orange did not). */
.vru-rev-cta:hover { background: #c1341a; color: #fff; }
.vru-rev-cta:focus-visible { outline: 2px solid var(--vru-rev-blue); outline-offset: 2px; }
.vru-rev-cta-sm { padding: 5px 12px; font-size: 0.85rem; }

.vru-rev-permalink {
	color: var(--vru-rev-blue);
	font-weight: 600;
}

/* -------------------- the product page injection (revisions round 6). */

/* WooCommerce lays the product summary out as two floats (the gallery left,
   the summary right) and only clears them at the tab area, two priorities
   after this block. Injected between those open floats, an uncleared block's
   line boxes wrap beside whichever column ends first (seen on the Sebo X7
   Onyx page: the review climbed into the gallery column beside the short
   description). Clearing both floats is WooCommerce's own mechanism for
   every after-summary section (the tabs, upsells, and related grids all
   carry it), so the review starts below BOTH columns and reads as its own
   full-width section. */
.vru-rev-product-injection {
	clear: both;
}

/* Breathing room between the summary above and the tab area below, so the
   review reads as a section of its own rather than a tail on the summary. */
.vru-rev-product-injection .vru-rev-block {
	margin: 32px 0;
}

/* -------------------- sold under several model numbers (Phase 4.6). */

/* The review's in-page jump down to the grid when it renders below the
   long description (revisions round 4). */
.vru-rev-soldas-jump { margin: 8px 0; }
.vru-rev-soldas-jump a {
	color: var(--vru-rev-blue);
	font-weight: 600;
}

/* The grid standing apart below the long description: breathing room from
   the tab area above and the alternates grid below. */
.vru-rev-product-soldas { margin: 24px 0; }
.vru-rev-product-soldas .vru-rev-soldas { margin: 0; }

.vru-rev-soldas {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid var(--vru-rev-border, #e2e4e8);
	border-radius: 4px;
	background: var(--vru-rev-soft, #f7f8f9);
}
.vru-rev-soldas-title {
	margin: 0 0 6px;
	font-size: 1rem;
}
.vru-rev-soldas-note {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: var(--vru-rev-muted, #565961);
}
.vru-rev-soldas-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vru-rev-soldas-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid var(--vru-rev-border, #e2e4e8);
}
.vru-rev-soldas-item:first-child { border-top: 0; }
.vru-rev-soldas-number { font-weight: 600; }
.vru-rev-soldas-price { font-weight: 600; }
.vru-rev-soldas-buy {
	color: var(--vru-rev-blue);
	font-weight: 600;
	text-decoration: underline;
}
.vru-rev-soldas-buy:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}
.vru-rev-soldas-current {
	font-size: 0.85rem;
	font-weight: 600;
	color: #146c30;
}
.vru-rev-soldas-elsewhere {
	font-size: 0.85rem;
	color: #565961;
}

/* The carried numbers as real product boxes: a responsive row that wraps. */
.vru-rev-soldas-grid {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}
.vru-rev-soldas-box {
	border: 1px solid var(--vru-rev-border, #e2e4e8);
	border-radius: 6px;
	background: #fff;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.vru-rev-soldas-box-img { display: block; line-height: 0; }
.vru-rev-soldas-box-img img {
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: contain;
	border-radius: 4px;
}
.vru-rev-soldas-desc {
	font-size: 0.88rem;
	color: var(--vru-rev-muted, #565961);
}
.vru-rev-soldas-box .vru-rev-soldas-price del { color: var(--vru-rev-muted, #565961); font-weight: 400; margin-right: 6px; }
.vru-rev-soldas-box .vru-rev-soldas-price ins { text-decoration: none; }
.vru-rev-soldas-stock { font-size: 0.85rem; font-weight: 600; }
.vru-rev-soldas-stock-in { color: var(--vru-rev-green, #1A7F37); }
.vru-rev-soldas-stock-out { color: var(--vru-rev-red, #CF2E2E); }
.vru-rev-soldas-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding-top: 4px;
}
.vru-rev-soldas-add.vru-rev-cta { font-size: 0.9rem; }
.vru-rev-soldas-details {
	color: var(--vru-rev-blue);
	font-size: 0.88rem;
	text-decoration: underline;
}
.vru-rev-soldas-details:focus-visible,
.vru-rev-soldas-add:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- tree. */

.vru-rev-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.vru-rev-expand-all {
	background: none;
	border: 1px solid var(--vru-rev-border);
	border-radius: 4px;
	padding: 4px 12px;
	color: var(--vru-rev-blue);
	cursor: pointer;
	font-size: 0.85rem;
}
.vru-rev-expand-all:hover { border-color: var(--vru-rev-blue); }

.vru-rev-level {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vru-rev-level .vru-rev-level {
	margin-left: 14px;
	padding-left: 10px;
	border-left: 2px solid var(--vru-rev-surface);
}

.vru-rev-node { margin: 0; }

.vru-rev-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 6px;
	border-bottom: 1px solid var(--vru-rev-border);
	cursor: pointer;
	list-style: none;
}

.vru-rev-row-static { cursor: default; }

.vru-rev-details > summary.vru-rev-row::-webkit-details-marker { display: none; }
.vru-rev-details > summary.vru-rev-row::marker { content: ""; }

.vru-rev-details > summary.vru-rev-row::before {
	content: "\25B8"; /* right triangle */
	color: var(--vru-rev-muted);
	font-size: 0.8em;
	transition: transform 0.15s ease;
	width: 1em;
	display: inline-block;
}
.vru-rev-details[open] > summary.vru-rev-row::before {
	transform: rotate(90deg);
}

.vru-rev-topic-label {
	font-weight: 600;
	flex: 1 1 auto;
}

.vru-rev-weight {
	color: var(--vru-rev-muted);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	min-width: 3em;
	text-align: right;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
	flex: 0 0 auto;
}

/* The share-of-the-score label directly under the percent (round 12): the
   number must read as importance, never as how much data is filled in. */
.vru-rev-weight-of,
.vru-trust-topic-weight .vru-rev-weight-of {
	font-size: 0.62rem;
	color: var(--vru-rev-muted);
	white-space: nowrap;
	font-variant-numeric: normal;
	letter-spacing: 0.01em;
}

.vru-rev-node-rating {
	flex: 0 0 auto;
	min-width: 5em;
	text-align: right;
}

.vru-rev-node-body {
	padding: 4px 6px 12px 20px;
}

.vru-rev-note {
	background: var(--vru-rev-surface);
	border-left: 3px solid var(--vru-rev-orange);
	padding: 8px 12px;
	margin: 4px 0 10px;
	font-size: 0.9rem;
}

.vru-rev-transparency {
	margin-top: 14px;
	font-size: 0.85rem;
	color: var(--vru-rev-muted);
}

/* ---------------------------------------------------------------- pills. */

.vru-rev-pill {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Pill text colours are darkened from the palette accents so small pill text meets
   WCAG AA (4.5:1) on its tint; the accent hue is preserved. Every pill also carries
   a text label, so meaning never rides on colour alone. */
.vru-rev-pill-provisional { background: #FEF3E2; color: #8a5308; }
.vru-rev-pill-surface { background: #FEF3E2; color: #8a5308; }
.vru-rev-pill-muted { background: var(--vru-rev-surface); color: #565961; }
.vru-rev-pill-disagree { background: #FDECEC; color: #b02020; }

/* ------------------------------------------------------------- evidence. */

.vru-rev-evidence {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-top: 6px;
}

/* Round 17 Fix 3: the round 9 stable-layout contract on the customer readings
   table. Column widths come only from the declared colgroup, so opening a
   reading's Details grows only its own row downward and no column ever moves. */
.vru-rev-evidence.vru-rev-table-stable { table-layout: fixed; }

.vru-rev-evidence th,
.vru-rev-evidence td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--vru-rev-border);
	vertical-align: top;
	overflow-wrap: break-word;
}

.vru-rev-evidence th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--vru-rev-muted);
}

.vru-rev-evidence-disagree { background: #FDF6F6; }

/* Round 19 Fix 6: the reading proof aligns under its source's column. The empty pad
   cell holds the Rating column with no border, so the proof (spanning Source and
   Weight) sits under the source detail above it and reads as that source's own
   column ending with its proof. An indent by construction, not a reflow. */
.vru-rev-ev-proof-pad { padding: 0; border-bottom: 0; }
.vru-rev-ev-proof-cell { padding-top: 4px; }

/* Round 17 Fix 5: the star leads the Rating cell; the raw value trails it in its
   own unit as a muted secondary reading, never a duplicate of the star's number. */
.vru-rev-ev-value {
	color: var(--vru-rev-muted);
	font-variant-numeric: tabular-nums;
	/* Round 18 Fix 2: roughly double the space to the rating before it, via the
	   shared token, so the score and the measurement read as two distinct things.
	   The value stays whole (never split mid unit) so a narrow cell stacks it
	   honestly onto its own line rather than breaking "63 dB" apart. */
	margin-left: var(--vru-rev-rating-value-gap, 12px);
	white-space: nowrap;
}
.vru-rev-ev-weight { color: var(--vru-rev-muted); font-variant-numeric: tabular-nums; }

.vru-rev-source-line {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* Round 45 Fix 5: the dot is now the source name's leading inline glyph (bound to
   it in the markup, so a wrapping name never strands it), a single definition
   replacing the earlier duplicate further down the file. */
.vru-rev-prov-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

.vru-rev-source-name { color: var(--vru-rev-blue); font-weight: 600; text-decoration: none; }
.vru-rev-source-name:hover { text-decoration: underline; }

.vru-rev-prov-label { font-size: 0.75rem; font-weight: 600; }

/* Round 45 Fix 5: in the comparison's tight columns the provenance dot shrinks 40%
   (9px to 5.4px) and the source name and its provenance-type ("sub-source") line
   each drop two points. Applied at EVERY width, not only mobile: the comparison
   sets two or more machines side by side, so its cells are column-constrained at
   all widths, and the reductions stay legible (the name is still bold blue). The
   dot's provenance color stays inline; only its size changes. */
.vru-rev-compare .vru-rev-prov-dot { width: 5.4px; height: 5.4px; margin-right: 4px; }
.vru-rev-compare .vru-rev-source-name { font-size: calc(1em - 2px); }
.vru-rev-compare .vru-rev-prov-label { font-size: calc(0.75rem - 2px); }

/* The expert's reason, shown in full beneath the star next to the person. Reads
   like a person talking: a quiet quote, never truncated. */
.vru-rev-reasoning {
	margin: 6px 0 0;
	padding: 6px 0 6px 12px;
	border-left: 3px solid var(--vru-rev-blue);
	color: var(--vru-rev-text);
	font-size: 0.9rem;
	line-height: 1.5;
}
.vru-rev-reasoning-speaker { font-weight: 600; }
.vru-rev-reasoning-speaker::after { content: ":"; }
.vru-rev-reasoning-text { font-style: italic; }

/* Round 17 Fix 3: the source detail (bio, photo, how it was measured) renders
   open by default, so it is a plain block now, not a collapsed details. */
.vru-rev-source-detail { margin-top: 4px; }

.vru-rev-source-bio {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 6px 0;
}
/* Round 17 Fix 3: the source logo or staff photo is 70% larger (48 to 82) and
   holds its size in the flex row; it never shrinks the layout as it loads. */
.vru-rev-source-photo {
	border-radius: 50%;
	object-fit: cover;
	width: 82px;
	height: 82px;
	flex: 0 0 auto;
}
.vru-rev-source-credentials { font-size: 0.85rem; }

/* -------------------------------------------------------------------------
 * Round 21 Fix 5: the compact reading density for the comparison. One construct,
 * two densities: only these rules differ, switched on by the modifier class and
 * the bio expander; the markup contract matches the review page (stable layout,
 * evidence rules, gold stars, source links all inherited).
 * ---------------------------------------------------------------------- */
/* Round 25 (Josh, superseding the round 21 stack): the star graphic and the
   numeric score render on ONE line, the score to the RIGHT of the stars, exactly
   as the review pages render them. The base .vru-rev-stars is already an inline
   row (score after the svg in source order), so the compact density simply does
   NOT override it here anymore; only the trailing value still drops beneath, per
   the narrow column's honesty. Seen live, the round 21 score-under-stars read as
   a wrap, not a saving. */
.vru-rev-evidence-compact .vru-rev-ev-value { display: block; margin-top: 2px; }
/* The gap between the rating and the source columns narrows 30% (10px to 7px),
   then a further 30% in round 22 Fix 1 (7px to 5px). The freed width lands in the
   source paragraph: the source column is the fixed-layout table's auto middle
   column, so trimming its left padding widens the reasoning text, which is where
   the value lives, while the rating side stays symmetric. */
.vru-rev-evidence-compact .vru-rev-ev-rating { padding-right: 5px; }
.vru-rev-evidence-compact .vru-rev-ev-source { padding-left: 5px; }
/* A long bio truncates behind an in-place expander (a native details/summary, so
   it opens in place, is keyboard reachable, and is announced as a disclosure).
   The teaser reads collapsed, the full text expanded; the control reads "more"
   then "less". */
.vru-rev-bio-more { display: block; }
.vru-rev-bio-more > summary { cursor: pointer; list-style: none; }
.vru-rev-bio-more > summary::-webkit-details-marker { display: none; }
.vru-rev-bio-more > summary::marker { content: ''; }
.vru-rev-bio-toggle { color: var(--vru-rev-blue); font-weight: 600; white-space: nowrap; }
.vru-rev-bio-toggle::after { content: 'more'; }
.vru-rev-bio-more[open] .vru-rev-bio-teaser { display: none; }
.vru-rev-bio-more[open] .vru-rev-bio-toggle::after { content: 'less'; }
/* Round 23 Fix 3: the review page's bio expander is responsive. At desktop the
   full bio shows with no control (the closed details' body is forced visible and
   the collapsed summary hidden), so the desktop bio is unchanged; the mobile
   breakpoint below restores the collapsed 150 character expander. The
   comparison's compact expander (no -resp class) is unaffected. */
.vru-rev-bio-more-resp:not([open]) .vru-rev-bio-full { display: block; }
.vru-rev-bio-more-resp > summary { display: none; }

/* Round 44 Fix 1: one line under a reading naming the method it was measured
   by, with the name linking to that method's own section of the How we test
   page. It is a quiet credential line, not a claim of its own, so it reads a
   size down and in the muted colour; only the method's name carries the link
   colour. A reading that names no method renders none of this. */
.vru-rev-method {
	font-size: 0.85rem;
	margin-top: 4px;
	color: var(--vru-rev-muted);
}
.vru-rev-method-link { color: var(--vru-rev-blue); }
.vru-rev-method-name { color: var(--vru-rev-text); }
.vru-staff-reading .vru-rev-method { margin-top: 0.4rem; }

/* ---------------------------------------------------------------- help. */

.vru-rev-help {
	position: relative;
	display: inline-flex;
	margin-left: 4px;
}
.vru-rev-help-i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--vru-rev-blue);
	color: #fff;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: help;
}
.vru-rev-help-pop {
	display: none;
	position: absolute;
	top: 22px;
	left: 0;
	z-index: 20;
	width: 260px;
	background: #fff;
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	padding: 10px 12px;
	font-size: 0.82rem;
	font-weight: 400;
	white-space: normal;
	color: var(--vru-rev-text);
}
.vru-rev-help:hover .vru-rev-help-pop,
.vru-rev-help:focus .vru-rev-help-pop,
.vru-rev-help:focus-within .vru-rev-help-pop { display: block; }

/* ---------------------------------------------------------- comparison. */

.vru-rev-compare { margin: 24px 0; }
.vru-rev-compare-scroll { overflow-x: auto; }

.vru-rev-compare-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}
.vru-rev-compare-table th,
.vru-rev-compare-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--vru-rev-border);
	text-align: left;
}
.vru-rev-compare-model { font-family: var(--vru-font-heading, inherit); }
/* Round 17 Fix 2: the broad link colour excludes action buttons, so it can never
   paint a button's text its own background colour (the blue-on-blue disease). */
.vru-rev-compare-model a:not(.vru-rev-cta) { color: var(--vru-rev-blue); text-decoration: none; }
.vru-rev-compare-name { display: block; margin-bottom: 6px; }
/* Round 23 Fix 1: the "Starting at" commerce line sits between the machine name
   and the shop button in the header's flex column. The label stays quiet; the
   amount carries the weight. WooCommerce's own price markup renders inside. */
/* Round 35 Fix 4: the average price of a machine we do not sell, under the
   headline. It reads as information rather than as an offer: no button follows
   it, and the note beneath says plainly why there is nothing to buy. */
.vru-rev-average-price { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.4; }
.vru-rev-average-price-lbl { color: var(--vru-rev-muted); }
.vru-rev-average-price-amt { font-weight: 700; color: var(--vru-rev-text); }
.vru-rev-average-price-amt .amount { color: inherit; }
.vru-rev-average-price-note { display: block; font-size: 0.82rem; color: var(--vru-rev-muted); }

.vru-rev-compare-starting { font-size: 0.82rem; line-height: 1.3; }
.vru-rev-compare-starting-lbl { color: var(--vru-rev-muted); }
.vru-rev-compare-starting-amt { font-weight: 700; color: var(--vru-rev-text); }
.vru-rev-compare-starting-amt .amount { color: inherit; }
/* Round 53 Fix 3: the "machine we do not sell" notice, shown beside the average
   price where the Shop button does not (the two are mutually exclusive). It reads
   in the warm callout family the finder's notice uses, but a step darker than the
   token orange (#D97706 is ~3.2:1 on white, below AA for this text size): #B45309
   clears WCAG AA on the white card (5.0:1). Dash free copy, from the one seeded
   source. */
.vru-rev-compare-unavailable { margin: 4px 0 0; font-size: 0.82rem; font-weight: 700; color: #B45309; }
.vru-rev-compare-buy { margin-top: 2px; }
.vru-rev-compare-overall th,
.vru-rev-compare-overall td,
.vru-rev-compare-value th,
.vru-rev-compare-value td { background: var(--vru-rev-surface); font-weight: 600; }

/* --------------------------------------------------------- focus states. */

.vru-rev-details > summary:focus-visible,
.vru-rev-expand-all:focus-visible,
.vru-rev-help:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}

@media (max-width: 782px) {
	.vru-rev-value { padding-left: 0; border-left: 0; }
	.vru-rev-headline { gap: 14px; }
	/* Round 18 Fix 3: on a narrow screen the face wraps under the stars, aligned
	   to the same left edge, at a gentler size so it never crowds the title. */
	.vru-rev-hero { margin-left: 0; }
	.vru-rev-hero-img { max-width: 180px; max-height: 180px; }
	/* Keep the evidence table inside the viewport: tighten it and let long source
	   names or links wrap instead of forcing a horizontal page scroll. */
	.vru-rev-evidence { font-size: 0.82rem; }
	.vru-rev-evidence th, .vru-rev-evidence td { padding: 6px 6px; }
	.vru-rev-source-name, .vru-rev-reasoning { overflow-wrap: anywhere; }
	.vru-rev-node-body { padding-left: 12px; }
	.vru-rev-block { padding: 16px; }
	/* Round 23 Fix 2, retuned round 25 Fix 4 (Josh: at 650px the desktop view broke,
	   600 was too low a line): 782px is the review surface's mobile breakpoint now,
	   WordPress core's own admin breakpoint, superseding the round 23 line of 600. A
	   CSS media query cannot take a custom property, so this width is the shared
	   mobile token, reused by the readings (Fix 3) and the comparison (Fix 4); its
	   desktop companion gate rose to min-width 783px (below) so the two still tile
	   the range with no overlap. At this width the "N% of the score" weight percent
	   has no room, so the badge and its bubble explanation drop together; the freed
	   width falls to the topic name and stars. Desktop keeps both. */
	.vru-rev-weight { display: none; }
	.vru-rev-help-weight { display: none; }
	/* Round 45 Fix 4 (Josh): at the mobile token the topic row STACKS, one on top of
	   the other. The name takes the full width on its own line; the stars, the score,
	   the info bubble and the See the evidence control wrap onto their own row
	   beneath it, instead of the name squashing into a vertical sliver while the
	   stars roll off the right edge. The toggle, the depth indentation and the
	   evidence chip all keep working in the stacked shape. Desktop keeps the
	   side-by-side row (this is mobile-only). */
	.vru-rev-row { flex-wrap: wrap; }
	.vru-rev-row .vru-rev-topic-label { flex: 1 1 100%; }
	/* Round 24 (Josh): the readings STACK at the shared mobile breakpoint so the star
	   and the data-point value sit ABOVE the evidence at full width, instead of a
	   narrow rating column beside it. The fixed table becomes blocks; the header row
	   drops (a stacked reading names itself); the weight cell and the proof pad drop;
	   the proof spans the full width. A separator sits before each reading, keeping a
	   reading and its proof together. Applies wherever the one readings construct
	   renders; desktop keeps its columns. This supersedes the round 23 Fix 3 column
	   hide for the weight (the stacked layout has no columns to keep). */
	.vru-rev-evidence,
	.vru-rev-evidence tbody,
	.vru-rev-evidence tr { display: block; width: auto; }
	.vru-rev-evidence thead { display: none; }
	.vru-rev-evidence td { border-bottom: 0; padding: 2px 0; }
	/* Block only the visible cells; the weight cell and the proof pad keep their
	   display:none below (a bare td selector would out-rank a class and unhide them). */
	.vru-rev-ev-rating,
	.vru-rev-ev-source,
	.vru-rev-ev-proof-cell { display: block; width: auto; }
	.vru-rev-evidence tr { padding: 8px 0; }
	.vru-rev-evidence tbody tr:not(.vru-rev-ev-proof-row) { border-top: 1px solid var(--vru-rev-border); }
	.vru-rev-evidence tbody tr:first-child { border-top: 0; padding-top: 0; }
	.vru-rev-ev-proof-row { padding-top: 0; }
	.vru-rev-ev-rating { padding-bottom: 4px; }
	.vru-rev-ev-weight { display: none; }
	.vru-rev-ev-proof-pad { display: none; }
	.vru-rev-ev-proof-cell { padding: 0; }
	/* Round 24 (Josh): no blue rule to the left of the evidence write-up on a narrow
	   screen (it earns no width there and the stacked reading already reads as one). */
	.vru-rev-reasoning { border-left: 0; padding-left: 0; }
	/* The source photo leads the bio: it stacks above the text instead of floating
	   into the middle of a long bio. Applies wherever a reading renders its source,
	   so the comparison's compact readings get the photo-first order too (Fix 4). */
	.vru-rev-source-bio { flex-direction: column; align-items: flex-start; }
	/* The review page bio collapses to its 150 character expander here (desktop
	   shows it whole, above). */
	.vru-rev-bio-more-resp > summary { display: block; }
	.vru-rev-bio-more-resp:not([open]) .vru-rev-bio-full { display: none; }
	/* Round 23 Fix 4: the comparison denotes depth by font size, not geometry. The
	   metric column drops its guide rails and per-level indent (a flat base padding
	   overrides the inline step). Round 25 Fix 3 (Josh, exact values superseding the
	   round 23 scale of 16 / 14.4 / 13.12 / 12.16px): each depth level takes a fixed
	   pixel size, 12 / 10 / 8px for levels 0 / 1 / 2, the deepest levels flooring at
	   7px; the levels stay distinct and legible. Desktop keeps the round 19 rails and
	   indents and its own per-depth scale (below). */
	/* Round 26 Fix 3 set the leading gutter to ZERO at the mobile token; round 28 (Josh)
	   gives the metric label text a 2px left inset so it is not glued to the screen edge,
	   while the gray Overall/Value title bars stay flush (they carry no metric cell). The
	   !important still beats the inline per-depth padding-left the markup carries, so no
	   depth spends width on a deeper indent, and the data columns keep the rest. */
	.vru-rev-compare-metric-cell { background-image: none !important; padding-left: 2px !important; }
	.vru-rev-compare-row[data-vru-depth="0"] .vru-rev-compare-metric-cell { font-size: 12px; }
	.vru-rev-compare-row[data-vru-depth="1"] .vru-rev-compare-metric-cell { font-size: 10px; }
	.vru-rev-compare-row[data-vru-depth="2"] .vru-rev-compare-metric-cell { font-size: 8px; }
	.vru-rev-compare-row[data-vru-depth="3"] .vru-rev-compare-metric-cell { font-size: 7px; }
	/* The inline evidence indent (the pad cell that holds the Rating column and sits
	   the proof under the source) tightens 30% here, 26% to 18%; the source-column
	   alignment survives, just closer in. Scoped to the comparison's inline evidence. */
	.vru-rev-compare-proof-cell .vru-rev-evidence colgroup col:first-child { width: 18% !important; }
}

/* ---------------------------------------------------------------- Trust pages. */
.vru-trust {
	--vru-rev-blue: var(--vru-color-primary, #0170B9);
	--vru-rev-green: #1A7F37;
	--vru-rev-orange: #D97706;
	--vru-rev-text: var(--vru-color-text, #4B4F58);
	--vru-rev-muted: var(--vru-color-muted, #62666c);
	--vru-rev-border: var(--vru-color-border, #e2e8ed);
	color: var(--vru-rev-text);
	/* Round 12: no prose cap and no self-centring; the trust pages carry
	   the same margins as the rest of the review tree, from the shared
	   page container. */
	line-height: 1.6;
}
.vru-trust-title { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; }
.vru-trust-intro { font-size: 1.05rem; color: var(--vru-rev-text); margin: 0 0 1.5rem; }
.vru-trust-prose p { margin: 0 0 1rem; }
.vru-trust h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; }
.vru-trust h3 { font-size: 1.05rem; margin: 1rem 0 0.3rem; }
.vru-trust a { color: var(--vru-rev-blue); }

.vru-trust-nav {
	margin: 2.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--vru-rev-border);
	font-size: 0.95rem;
}
.vru-trust-nav span { color: var(--vru-rev-muted); margin-right: 0.4rem; }
.vru-trust-nav a { margin-right: 1rem; white-space: nowrap; }

.vru-trust-person-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
/* Round 18 Fix 4: each expert in a light card (the hub badge surface and border
   pattern), the photo, name and title, and bio cleanly separated. Content and
   links are unchanged; this is structure, not a redesign. */
.vru-trust-person {
	display: flex;
	gap: 1.15rem;
	align-items: flex-start;
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	background: #fff;
	padding: 1.1rem 1.2rem;
}
.vru-trust-person-body { min-width: 0; }
/* The photo doubled (72 to 144) and forced to a true circle: a fixed square
   frame clips a cover-fitted image, so any upload aspect renders as a perfect
   circle rather than an oval, and any source size (even an original with no
   generated thumbnail) is still cropped to the circle by the cover fit. The
   display:block is load bearing (round 20 Fix 1): it makes the frame hold its
   square in every card, both as a bare flex child (an unlinked expert) and
   inside the photo link of a linked expert, where an inline span would ignore
   width, height, and the clip and let the image escape at natural size. The
   !important on the image beats the theme's img { height: auto } reset, which
   is what squashed mixed aspects before. */
.vru-trust-photo-frame {
	display: block;
	flex: 0 0 auto;
	width: 144px;
	height: 144px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--vru-rev-surface);
}
/* Round 20 Fix 1: the linked expert's photo link behaves as the bare frame does
   in the unlinked card (a fixed, non-growing flex child with no inline gap), so
   a linked photo and an unlinked photo render the identical circle. */
.vru-trust-person-photo-link {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}
.vru-trust-photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
}
.vru-trust-person-name { font-weight: 600; display: block; }
.vru-trust-person-bio { color: var(--vru-rev-text); display: block; margin-top: 0.2rem; }
@media (max-width: 782px) {
	.vru-trust-person { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
	.vru-trust-photo-frame { width: 120px; height: 120px; }
}

.vru-trust-source-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.vru-trust-source-list li { margin: 0.35rem 0; }
.vru-trust-source-group { color: var(--vru-rev-muted); font-weight: 600; margin: 1rem 0 0.3rem; }
.vru-trust-source-bio { color: var(--vru-rev-muted); }
/* Round 39 Fix 2: a child source indents beneath its parent, so the hierarchy the
   admin sets is what the page shows. A slight indent on the same house scale as
   the method body's, never a rail, so the narrow width keeps its content room. */
.vru-trust-source-children { list-style: none; margin: 0.25rem 0 0; padding-left: 1rem; }
.vru-trust-source-children li { margin: 0.3rem 0; }
@media (max-width: 782px) {
	.vru-trust-source-children { padding-left: 0.7rem; }
}

/* Round 38 Fix 1: the How we test page reads as a page of methods rather than a
   wall of paragraphs. Each methodology sits in the house large card (the finder
   result card's border, radius, padding and white surface), its NAME is the
   heading it is (larger than the body, above the shared .vru-trust h3 size), and
   everything under the name indents slightly so the eye tracks what belongs to
   what. Colors are the declared trust-page tokens on the card's white surface,
   so the contrast contract is unchanged. */
.vru-trust-method { margin: 0 0 1.5rem; }
.vru-trust-why { color: var(--vru-rev-muted); }
.vru-trust-method-body {
	border: 1px solid var(--vru-rev-border);
	border-radius: 10px;
	background: #fff;
	padding: 18px 20px;
	margin: 0 0 1rem;
}
.vru-trust-method-body:last-child { margin-bottom: 0; }
.vru-trust .vru-trust-method-body h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.6rem;
}
.vru-trust-method-body > p { margin: 0 0 0.6rem; padding-left: 1rem; }
.vru-trust-method-body > p:last-child { margin-bottom: 0; }
.vru-trust-method-src { color: var(--vru-rev-muted); font-weight: 400; font-size: 0.9em; }
.vru-trust-equip { color: var(--vru-rev-muted); }
@media (max-width: 782px) {
	.vru-trust-method-body { padding: 15px 16px; }
	.vru-trust .vru-trust-method-body h3 { font-size: 1.15rem; }
	.vru-trust-method-body > p { padding-left: 0.7rem; }
}

.vru-trust-topics { list-style: none; margin: 0.3rem 0 0; padding-left: 1rem; border-left: 2px solid var(--vru-rev-border); }
.vru-trust-framework > .vru-trust-topics { padding-left: 0; border-left: 0; }
.vru-trust-topic { margin: 0.5rem 0; }
.vru-trust-topic-head { display: flex; align-items: baseline; gap: 0.6rem; }
.vru-trust-topic-label { font-weight: 600; }
/* Same badge markup as the review tree (round 12); here the room allows the
   share-of-the-score label to sit on the same line as the number. */
.vru-trust-topic-weight { color: var(--vru-rev-blue); font-size: 0.85rem; font-variant-numeric: tabular-nums; display: inline-flex; flex-direction: row; align-items: baseline; gap: 0.35rem; }
.vru-trust-topic-help { display: block; color: var(--vru-rev-muted); font-size: 0.92rem; margin: 0.1rem 0 0.3rem; }
/* Round 27 Fix 4: a topic's optional picture rides beside its explanation on the About
   our ratings page. When present the help block lays out as a row (thumbnail left, text
   right); with no picture it stays the plain block above. The image is fixed at 64px so
   the row never reflows as it loads, and it is object-fit cover so any source crops clean. */
.vru-trust-topic-help.has-image { display: flex; align-items: flex-start; gap: 12px; }
.vru-trust-topic-help-text { display: block; min-width: 0; }
.vru-trust-topic-img { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vru-rev-border); }

.vru-trust-state-list { padding-left: 1.1rem; }
.vru-trust-state-list li { margin: 0.4rem 0; }

/* ------------------------------------------------- accessibility (Phase 4). */
.vru-rev-compare-scroll:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.vru-rev-details > summary.vru-rev-row::before,
	.vru-rev-expand-all { transition: none; }
}

/* -------------------------------------- proof and evidence (attached media). */

.vru-rev-pill-proof { background: #E8F1F9; color: #0A5C94; }

.vru-rev-proof {
	margin: 20px 0 8px;
	padding-top: 14px;
	border-top: 1px solid var(--vru-rev-border);
}

.vru-rev-proof-title {
	font-family: var(--vru-font-heading, inherit);
	font-size: 1.1rem;
	margin: 0 0 4px;
}

.vru-rev-proof-intro {
	color: var(--vru-rev-muted);
	font-size: 0.92rem;
	margin: 0 0 12px;
}

.vru-rev-proof-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.vru-rev-node-body .vru-rev-proof-grid { margin: 10px 0; }

.vru-rev-proof-item {
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	padding: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* A video card is twice the size of the other proof cards: it takes its own
   full grid row, capped at double a standard card's width, so it can never
   overflow a narrow single-column grid. */
.vru-rev-proof-item-video {
	grid-column: 1 / -1;
	max-width: 480px;
	width: 100%;
}

.vru-rev-proof-caption { font-size: 0.95rem; }
.vru-rev-proof-from { color: var(--vru-rev-muted); font-size: 0.85rem; }
.vru-rev-proof-note { color: var(--vru-rev-muted); font-size: 0.8rem; }

.vru-rev-proof-thumb { display: block; line-height: 0; }
.vru-rev-proof-thumb img {
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: cover;
	border-radius: 4px;
}
.vru-rev-proof-thumb:focus-visible,
.vru-rev-proof-video:focus-visible,
.vru-rev-proof-link:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}

.vru-rev-proof-video { display: block; text-decoration: none; }
.vru-rev-proof-facade {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	background: #1d2327;
}
.vru-rev-proof-facade img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vru-rev-proof-playwrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vru-rev-proof-play {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	fill: #1d2327;
	padding: 10px;
	box-sizing: border-box;
}
.vru-rev-proof-video:hover .vru-rev-proof-play,
.vru-rev-proof-video:focus-visible .vru-rev-proof-play {
	background: var(--vru-rev-blue);
	fill: #fff;
}

.vru-rev-proof-player { display: block; aspect-ratio: 16 / 9; }
.vru-rev-proof-player iframe,
.vru-rev-proof-player video {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 4px;
	background: #000;
}

.vru-rev-proof-link { color: var(--vru-rev-blue); text-decoration: underline; }

.vru-rev-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(20, 23, 26, 0.88);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
}
.vru-rev-lightbox img {
	max-width: min(92vw, 1100px);
	max-height: 78vh;
	border-radius: 4px;
	background: #fff;
}
.vru-rev-lightbox-caption {
	color: #fff;
	font-size: 0.95rem;
	margin: 0;
	text-align: center;
	max-width: 60em;
}
.vru-rev-lightbox-close {
	align-self: flex-end;
	background: #fff;
	color: #1d2327;
	border: 0;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: 0.9rem;
	cursor: pointer;
}
.vru-rev-lightbox-close:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ hubs.
   The browsable review hubs: /reviews/ and /reviews/{brand}/, restyled to
   visual parity with the schematics landing pages (the site's settled
   reference): the site-standard container tokens, a branded badge grid on
   the hub, a product-image card grid on the brand pages, and the pager.
   House palette via vru-theme tokens with literal fallbacks. */

.vru-hub {
	--vru-rev-blue: var(--vru-color-primary, #0170B9);
	--vru-rev-green: #1A7F37;
	--vru-rev-orange: #D97706;
	--vru-rev-red: #CF2E2E;
	--vru-rev-text: var(--vru-color-text, #4B4F58);
	--vru-rev-muted: var(--vru-color-muted, #62666c);
	--vru-rev-border: var(--vru-color-border, #e2e8ed);
	--vru-rev-surface: var(--vru-color-surface, #F2F5F7);
	--vru-rev-star: #E8A33D;
	--vru-rev-star-track: #E6E1D6;
	/* Round 12: the inline geometry lives on the shared page container
	   (.vru-rev-page > .vru-rev-page-inner), one line for the whole review
	   tree; the article keeps only the vertical rhythm. No second column
	   inside the column. */
	padding-block: var(--vru-section-pad, 4em);
	color: var(--vru-rev-text);
	font-size: 1rem;
	line-height: 1.6;
}
.vru-hub-title { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; }
/* The hub's broad link colour excludes action buttons (round 17 Fix 2: the root
   cure for the blue-on-blue disease, applied everywhere a broad link rule lives, so
   a link rule can never paint a button's label the same blue as its background;
   round 11 and round 10 had scoped this by hand). */
.vru-hub a:not(.vru-rev-cta) { color: var(--vru-rev-blue); }
.vru-hub a.vru-rev-cta { color: #fff; }
.vru-hub a.vru-rev-cta:hover,
.vru-hub a.vru-rev-cta:focus { color: #fff; }
/* Round 18 Fix 6: the intro spans the same content width as the brand grid
   below it (both are direct children of the .vru-hub container on the round 12
   shared line), so the page reads as one column. The old 52em prose cap left it
   visibly narrower than the grid, with odd white space beside it. */
.vru-hub-intro { max-width: none; }
.vru-hub-intro p { margin: 0 0 1rem; }

.vru-hub-ways {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 0 0 1.5rem;
}
.vru-hub-trust-links a { margin-right: 1rem; white-space: nowrap; }

.vru-hub-brands h2 { font-size: 1.3rem; margin: 1.5rem 0 0.6rem; }

/* The hidden attribute must always win inside the hub: the cards and the
   pager carry their own display rules (flex), which would otherwise beat
   the browser's default [hidden] handling when hub.js filters them out. */
.vru-hub [hidden] { display: none !important; }

/* The filter row above each grid: the schematics controls pattern. The
   input and the count line are wired by hub.js and idle without it. */
.vru-hub-controls {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.vru-hub-filter {
	flex: 1 1 240px;
	max-width: 360px;
	padding: 8px 12px;
	font-size: 15px;
	border: 1px solid var(--vru-rev-border);
	border-radius: 4px;
}
.vru-hub-filter:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 1px;
}
.vru-hub-meta { color: var(--vru-rev-muted); font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Round 34 Fix 1: the one model search. The box, its dropdown, and the
   results page rows. Sized to the same 62px face and the same type scale the
   brand-page results and the compare typeahead already use, so every search
   across the review tree reads as one system.                          */
.vru-hub-search {
	position: relative;
	display: flex;
	gap: 8px;
	flex: 1 1 280px;
	max-width: 460px;
}
.vru-hub-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	font-size: 15px;
	border: 1px solid var(--vru-rev-border);
	border-radius: 4px;
}
.vru-hub-search-input:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 1px;
}
.vru-hub-search-go {
	flex: 0 0 auto;
	padding: 8px 14px;
	font-size: 15px;
	border: 1px solid var(--vru-rev-blue);
	border-radius: 4px;
	background: var(--vru-rev-blue);
	color: #fff;
	cursor: pointer;
}
.vru-hub-search-go:hover { filter: brightness(0.94); }
.vru-hub-search-go:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}

/* The dropdown. It overlays what follows rather than pushing the page down,
   so the brand grid beneath never jumps as a shopper types. */
.vru-hub-search-drop {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	max-height: 420px;
	overflow-y: auto;
}
.vru-hub-search-drop-item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 7px 10px;
	cursor: pointer;
}
.vru-hub-search-drop-item.is-active,
.vru-hub-search-drop-item:hover { background: var(--vru-rev-surface); }
/* The brand row leads a brand-only query, and reads as its own kind of row. */
.vru-hub-search-drop-item.is-brand {
	border-bottom: 1px solid var(--vru-rev-border);
	font-weight: 600;
}
.vru-hub-search-drop-img,
.vru-hub-search-drop-noimg {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: contain;
	background: var(--vru-rev-surface);
	flex: 0 0 auto;
}
.vru-hub-search-drop-body { min-width: 0; }
.vru-hub-search-drop-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vru-hub-search-drop-sub {
	display: block;
	color: var(--vru-rev-muted);
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vru-hub-search-drop-note {
	padding: 8px 10px;
	color: var(--vru-rev-muted);
	font-size: 0.88rem;
}

/* The results page. */
.vru-hub-search-count { font-weight: 600; margin: 14px 0 4px; }
.vru-hub-search-widen,
.vru-hub-search-empty { color: var(--vru-rev-muted); margin: 0 0 14px; }
.vru-hub-search-results {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.vru-hub-search-item { border-bottom: 1px solid var(--vru-rev-border); }
.vru-hub-search-link {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 4px;
	text-decoration: none;
	color: inherit;
}
.vru-hub-search-link:hover .vru-hub-search-name,
.vru-hub-search-link:focus-visible .vru-hub-search-name { text-decoration: underline; }
.vru-hub-search-img,
.vru-hub-search-noimg {
	width: 62px;
	height: 62px;
	border-radius: 4px;
	object-fit: cover;
	background: var(--vru-rev-surface);
	flex: 0 0 auto;
}
.vru-hub-search-body { min-width: 0; }
.vru-hub-search-name { display: block; font-weight: 600; font-size: 1.05rem; }
.vru-hub-search-sub,
.vru-hub-search-score,
.vru-hub-search-state {
	display: block;
	font-size: 0.9rem;
	margin-top: 2px;
}
.vru-hub-search-sub,
.vru-hub-search-state { color: var(--vru-rev-muted); }
.vru-hub-search-more { margin: 16px 0; }
.vru-hub-more-link {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--vru-rev-blue);
	border-radius: 4px;
	color: var(--vru-rev-blue);
	text-decoration: none;
	font-weight: 600;
}
.vru-hub-more-link:hover { background: var(--vru-rev-surface); }
.vru-hub-more-link:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}
.vru-hub-search-done { color: var(--vru-rev-muted); }

/* Narrow: the box takes the full width and the thumbnails give the names room
   rather than crowding them. */
@media (max-width: 782px) {
	.vru-hub-search { max-width: none; flex: 1 1 100%; }
	.vru-hub-search-drop { max-height: 60vh; }
	.vru-hub-search-img,
	.vru-hub-search-noimg { width: 48px; height: 48px; }
	.vru-hub-search-drop-img,
	.vru-hub-search-drop-noimg { width: 34px; height: 34px; }
}
.vru-hub-empty {
	padding: 24px;
	color: var(--vru-rev-muted);
	text-align: center;
	font-style: italic;
}

/* The brand index: one badge card per rated brand, in the schematics
   brand-grid pattern (image box on top, name and count below, the whole
   card one link, primary border and a one pixel lift on hover). */
.vru-hub-badge-grid {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.vru-hub-badge {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .15s;
}
.vru-hub-badge:hover { border-color: var(--vru-rev-blue); transform: translateY(-1px); }
.vru-hub-badge:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}
.vru-hub-badge-media {
	height: 120px;
	background: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vru-hub-badge-img {
	max-width: 160px;
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.vru-hub-badge-body { padding: 10px 12px; }
.vru-hub-badge-name { display: block; font-weight: 600; font-size: 15px; }
.vru-hub-badge-plain .vru-hub-badge-name { font-size: 1.15rem; }
.vru-hub-badge-plain { justify-content: center; min-height: 120px; }
.vru-hub-badge-count { display: block; color: var(--vru-rev-muted); font-size: 0.88rem; margin-top: 3px; }

/* A brand page: the rated items as a card grid in the same pattern, each
   card a product image (or the honest placeholder), the name, the overall
   star rating, and the numbers it is sold under. */
.vru-hub-card-grid {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.vru-hub-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vru-rev-border);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s, transform .15s;
}
.vru-hub-card:hover { border-color: var(--vru-rev-blue); transform: translateY(-1px); }
.vru-hub-card-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
	color: inherit;
}
.vru-hub-card-link:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: -2px;
}
.vru-hub-card-media {
	height: 160px;
	background: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vru-hub-card-img {
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.vru-hub-card-noimg { color: var(--vru-rev-muted); font-size: 0.85rem; } /* Round 17 Fix 2: was #8a8f98, below AA on the card surface. */
.vru-hub-card-name {
	display: block;
	font-weight: 600;
	font-size: 1.02rem;
	padding: 10px 12px 0;
}
.vru-hub-card-link:hover .vru-hub-card-name,
.vru-hub-card-link:focus-visible .vru-hub-card-name { text-decoration: underline; }
.vru-hub-card-rating { display: block; padding: 4px 12px 10px; }
/* Round 51 Fix 2: the .vru-hub-item-members "Sold under" line left the card, so
   its styling is gone with it. The card is now image, name, and rating only. */

/* Search results on a brand page: while the filter is active the whole
   brand's matches render as uniform rows (name, rating, sold-under numbers)
   in place of the card grid, whichever page of the pager you searched from. */
.vru-hub-results {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.vru-hub-result {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-bottom: 1px solid var(--vru-rev-border);
	padding: 12px 0;
}
/* Round 20 Fix 3: the machine thumbnail on a brand-page search result, sized to
   match the compare search results (62px, round 19's 30% enlargement) so every
   search on the review tree reads as one system. Dimensioned and cover-fitted; an
   imageless machine shows the same neutral tile, never a broken image. */
.vru-hub-result-img,
.vru-hub-result-noimg {
	width: 62px;
	height: 62px;
	border-radius: 4px;
	object-fit: cover;
	background: var(--vru-rev-surface);
	flex: 0 0 auto;
}
.vru-hub-result-body { min-width: 0; }
.vru-hub-result-name { display: block; font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.vru-hub-result-name:hover,
.vru-hub-result-name:focus-visible { text-decoration: underline; }
.vru-hub-result-rating { display: block; font-size: 0.9rem; margin-top: 2px; }
.vru-hub-result-members {
	display: block;
	color: var(--vru-rev-muted);
	font-size: 0.9rem;
	margin-top: 2px;
}

.vru-hub-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1.2rem;
	justify-content: center;
}
.vru-hub-pager a,
.vru-hub-pager button,
.vru-hub-pager-current {
	display: inline-block;
	min-width: 36px;
	text-align: center;
	padding: 6px 10px;
	border: 1px solid var(--vru-rev-border);
	border-radius: 4px;
	text-decoration: none;
	background: #fff;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
}
.vru-hub-pager a:hover,
.vru-hub-pager button:hover { border-color: var(--vru-rev-blue); color: var(--vru-rev-blue); }
.vru-hub-pager-gap { color: var(--vru-rev-muted); padding: 6px 4px; }
.vru-hub-pager-current {
	background: var(--vru-rev-blue);
	border-color: var(--vru-rev-blue);
	color: #fff;
	font-weight: 600;
}
.vru-hub-pager a:focus-visible,
.vru-hub-pager button:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}

/* Round 45 Fix 2: the hub list's sort controls, the plain link to the by-brand
   index, and the by-brand page's lead line. */
.vru-hub-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 1.2rem 0 0.4rem;
	font-size: 0.95rem;
}
.vru-hub-sort-label {
	color: var(--vru-rev-muted);
	font-weight: 600;
}
.vru-hub-sort a {
	color: var(--vru-rev-blue);
	text-decoration: none;
}
.vru-hub-sort a:hover { text-decoration: underline; }
.vru-hub-sort a:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}
.vru-hub-sort-current { font-weight: 600; color: inherit; }
.vru-hub-browse-brands { margin: 0.4rem 0 0.8rem; }
.vru-hub-browse-brands a,
.vru-hub-brands-lead a { color: var(--vru-rev-blue); }
.vru-hub-brands-lead { color: var(--vru-rev-muted); margin: 0 0 1rem; }

@media (max-width: 782px) {
	.vru-hub { padding-block: calc(var(--vru-section-pad, 4em) / 2); }
	.vru-hub-badge-grid,
	.vru-hub-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.vru-hub-card-media { height: 130px; }
	.vru-hub-card-img { max-height: 120px; }
}

/* --------------------------------------------------------- breadcrumbs.
   The customer breadcrumb trail across the review tree (the hub, the brand
   pages, the review pages, the trust pages), in the schematics pattern: a
   labelled nav, a CSS separator no screen reader announces, the current
   page an unlinked span. Rendered by Frontend\Breadcrumbs. */

.vru-rev-breadcrumbs {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.4;
}
/* The menu-item slot (revisions round 10, superseding the round 7
   schematics parity on Josh's ruling): the trail is the first element of
   the main content area, directly under the menu bar, and its left edge
   sits exactly where the first menu item's word starts. That point is the
   menu's own geometry, not a pixel of ours: the nav bar is full width with
   an inline padding (40px in the theme's header part) and the first link
   carries its own padding (16px in the theme's nav rules), so the word
   begins at their sum at every desktop width. The two custom properties
   let the theme drive both numbers the day it tokenises them; the
   fallbacks mirror the theme's current literals and the selftest reads
   the theme's own files to keep them honest. Still anchored to the
   viewport exactly like the menu bar itself: no max-width, no auto
   centring, no content column, at any width. The schematics trail keeps
   its own (40px left of here) until its already filed task moves it.
   Placement only; the trail's markup, links, and structured data are
   unchanged. */
.vru-rev-page > .vru-rev-breadcrumbs {
	max-width: none;
	margin: 12px 0 16px;
	padding-inline: calc(var(--vru-nav-bar-pad, 40px) + var(--vru-nav-link-pad, 16px));
}
/* Below the theme's nav breakpoint the desktop menu bar is gone, so the
   menu-item standard has nothing to anchor to; the trail falls back to
   the content gutter and sits flush with the page content instead. */
@media (max-width: 768px) {
	.vru-rev-page > .vru-rev-breadcrumbs {
		padding-inline: var(--vru-gutter, 20px);
	}
}

/* One geometry for the whole review tree (revisions round 12, Josh's
   standard stated finally and completely): the hub, the brand pages, the
   review pages, and the trust pages all carry the SAME margins. The
   content starts on the same left line the trail sits on (under the first
   menu item's word), and the right gutter mirrors it exactly, at every
   desktop width. A centred max-width column can only touch that fixed
   line at one single viewport width, which is why rounds 7 and 10 kept
   looking right on one screen and wrong on another; the menu bar the
   line comes from is anchored to the viewport, so the container must be
   too. This is the geometry the theme itself gives product pages
   (max-width 100% with a fixed inline padding). One source rule on the
   shared container, no per-page offsets; the padding expression is the
   trail's own, so the two lines cannot drift apart. */
.vru-rev-page > .vru-rev-page-inner {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: calc(var(--vru-nav-bar-pad, 40px) + var(--vru-nav-link-pad, 16px));
}
/* The same fallback the trail takes when the desktop menu bar is gone. */
@media (max-width: 768px) {
	.vru-rev-page > .vru-rev-page-inner {
		padding-inline: var(--vru-gutter, 20px);
	}
}
.vru-rev-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.vru-rev-breadcrumbs li {
	display: flex;
	align-items: center;
}
.vru-rev-breadcrumbs li + li::before {
	content: "\203A"; /* › */
	margin: 0 8px;
	color: #999;
}
.vru-rev-breadcrumbs a {
	color: var(--vru-color-primary, #0170B9);
	text-decoration: none;
}
.vru-rev-breadcrumbs a:hover,
.vru-rev-breadcrumbs a:focus {
	text-decoration: underline;
}
.vru-rev-breadcrumbs a:focus-visible {
	outline: 2px solid var(--vru-color-primary, #0170B9);
	outline-offset: 2px;
}
.vru-rev-breadcrumbs [aria-current="page"] {
	color: var(--vru-color-muted, #62666c);
}

/* -------------------------------------------------------------------------
 * Source pages (round 15 staff experts, round 21 outside sources). Reuses the
 * review tokens so it themes with the rest of the tree.
 * ---------------------------------------------------------------------- */
/* Round 21 Fix 4: the review palette tokens on the source-page root, so the
   shared machine-section construct renders the same warm gold stars as the
   review tree. The star fill reads var(--vru-rev-star); the token was scoped to
   the tree, the comparison, and the hub only, so on a source page the fill fell
   back to the SVG default (black). Defined here once, the stars can never render
   off palette on these pages again. */
.vru-staff-page {
	--vru-rev-blue: var(--vru-color-primary, #0170B9);
	--vru-rev-green: #1A7F37;
	--vru-rev-orange: #D97706;
	--vru-rev-red: #CF2E2E;
	--vru-rev-text: var(--vru-color-text, #4B4F58);
	--vru-rev-muted: var(--vru-color-muted, #62666c);
	--vru-rev-border: var(--vru-color-border, #e2e8ed);
	--vru-rev-surface: var(--vru-color-surface, #F2F5F7);
	--vru-rev-star: #E8A33D;
	--vru-rev-star-track: #E6E1D6;
}
.vru-staff-header {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin: 0 0 1.75rem;
}
.vru-staff-photo-wrap { flex: 0 0 auto; }
/* Round 18 Fix 4: the large photo forced to a true circle, the same crop as the
   experts directory (a fixed square frame clipping a cover-fitted image), since
   these pages share the directory's source images and shared its oval fault. */
.vru-staff-photo-frame {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--vru-rev-surface);
	display: block;
}
.vru-staff-photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
}
.vru-staff-ident { min-width: 0; }
.vru-staff-name { font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.25rem; }
.vru-staff-title { color: var(--vru-rev-muted); font-size: 1.05rem; margin: 0 0 0.75rem; }
.vru-staff-bio { color: var(--vru-rev-text); }
.vru-staff-bio p { margin: 0 0 0.5rem; }

.vru-staff-section-title {
	font-size: 1.4rem;
	margin: 1.75rem 0 0.35rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vru-rev-border);
}
.vru-staff-section-intro { color: var(--vru-rev-muted); margin: 0 0 1rem; }

.vru-staff-machines { display: grid; gap: 1.1rem; }
.vru-staff-machine {
	border: 1px solid var(--vru-rev-border);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	background: #fff;
}
.vru-staff-machine-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}
/* Round 18 Fix 1: the machine's face before its heading. The thumbnail and the
 * heading group together on the left; the overall state stays on the right. */
.vru-staff-machine-ident {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}
.vru-staff-machine-thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}
/* The dimension contract: a fixed box so nothing reflows as the image loads,
 * and the honest placeholder holds the very same box (never a broken image).
 * Round 21 Fix 4: doubled from 56 to 112, dimensions still declared so nothing
 * shifts, the honest placeholder holding the same larger box. */
.vru-staff-machine-img,
.vru-staff-machine-noimg {
	width: 112px;
	height: 112px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	background: var(--vru-rev-surface);
	border: 1px solid var(--vru-rev-border);
	box-sizing: border-box;
}
/* Round 18 Fix 5: the brand logo beside a brand assessment, sized like the Fix 1
   machine thumbnail but contained (a logo is shown whole, never cropped). */
.vru-staff-brand-badge-img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
	background: #fff;
	border-radius: 8px;
	border: 1px solid var(--vru-rev-border);
	box-sizing: border-box;
	padding: 3px;
}
.vru-staff-machine-name { font-size: 1.15rem; margin: 0; }
/* The active theme colours heading anchors dark with an !important rule that
 * loads after this file, so beating it needs both the higher-specificity
 * .vru-staff-page scope AND !important. These machine names are links and must
 * look clickable. */
.vru-staff-page .vru-staff-machine-name a { color: var(--vru-color-primary, #0170B9) !important; text-decoration: none; }
.vru-staff-page .vru-staff-machine-name a:hover,
.vru-staff-page .vru-staff-machine-name a:focus { text-decoration: underline; }
.vru-staff-machine-overall { flex: 0 0 auto; }

.vru-staff-reading-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.vru-staff-reading {
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background: var(--vru-rev-surface);
}
.vru-staff-reading-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.vru-staff-reading-topic { font-weight: 600; }
.vru-staff-reading-star { flex: 0 0 auto; }
.vru-staff-reading-value { margin: 0.35rem 0 0; font-size: 0.95rem; }
.vru-staff-reading-reason { margin: 0.4rem 0 0; }
.vru-staff-reading-proof { margin-top: 0.6rem; }
.vru-staff-brandvalue-value { font-weight: 600; color: var(--vru-color-primary, #0170B9); }

.vru-staff-back { margin: 1.5rem 0 0; }
.vru-staff-page .vru-staff-back a { color: var(--vru-color-primary, #0170B9) !important; }

/* The experts directory now links each person who has a page. Same theme
 * override applies (scope plus !important), so the name reads as a link. */
.vru-trust-page a.vru-trust-person-name { color: var(--vru-color-primary, #0170B9) !important; text-decoration: none; }
.vru-trust-page a.vru-trust-person-name:hover,
.vru-trust-page a.vru-trust-person-name:focus { text-decoration: underline; }

/* Round 21 Fix 3: an outside source's landing page. Its logo is shown WHOLE
   (contained in a soft square frame), never cropped to a circle, because a
   source is not a face. Sized to the same box as the staff photo. */
.vru-staff-logo-frame {
	width: 200px;
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--vru-rev-border);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.vru-staff-logo {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
}
/* The link out to the source's own website, with the house opens-host note. */
.vru-staff-source-site { margin: 0.85rem 0 0; }
.vru-staff-page .vru-staff-source-site a { color: var(--vru-color-primary, #0170B9) !important; }
.vru-staff-source-site-note { margin-left: 0.4rem; font-size: 0.9rem; }
/* The "see all" link at the foot of a landing preview, and the sub-list crumb. */
.vru-staff-see-all { margin: 0.9rem 0 0; }
.vru-staff-page .vru-staff-see-all a { color: var(--vru-color-primary, #0170B9) !important; font-weight: 600; text-decoration: none; }
.vru-staff-page .vru-staff-see-all a:hover,
.vru-staff-page .vru-staff-see-all a:focus { text-decoration: underline; }
.vru-staff-sublist-header { display: block; }
.vru-staff-sublist-crumb { margin: 0 0 0.35rem; }
.vru-staff-page .vru-staff-sublist-crumb a { color: var(--vru-color-primary, #0170B9) !important; text-decoration: none; }
.vru-staff-page .vru-staff-sublist-crumb a:hover,
.vru-staff-page .vru-staff-sublist-crumb a:focus { text-decoration: underline; }
/* The directory now links each outside source with a page, the same theme
   override (scope plus !important) so the name reads as a link. */
.vru-trust-page a.vru-trust-source-name { color: var(--vru-color-primary, #0170B9) !important; text-decoration: none; }
.vru-trust-page a.vru-trust-source-name:hover,
.vru-trust-page a.vru-trust-source-name:focus { text-decoration: underline; }

@media (max-width: 782px) {
	.vru-staff-header { flex-direction: column; gap: 1rem; }
	.vru-staff-photo-frame { width: 160px; height: 160px; }
	.vru-staff-logo-frame { width: 160px; height: 160px; }
}

/* ---------------------------------------------- comparison (round 17 Fix 1). */

/* The review block header holds the machine title. Round 22 Fix 2 moved the
   Compare button out of here to under the overall rating (see headline-overall). */
.vru-rev-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.vru-rev-block-header .vru-rev-block-title { margin: 0; }
/* The Compare button forces its own readable colour, so no link-colour rule can
   paint its text onto its own background (the contrast lesson, applied up front). */
a.vru-rev-compare-btn.vru-rev-cta,
a.vru-rev-compare-btn.vru-rev-cta:hover,
a.vru-rev-compare-btn.vru-rev-cta:focus { color: #fff; }

/* Round 22 Fix 2: the Compare button's new home is under the overall rating, in
   the overall column on the left. The column stacks the rating and the button,
   left aligned, so the button reads as belonging to the rating and never crowds
   the stars; on narrow widths the whole column drops full width and the button
   stays under the stars, reachable. With no compare button the column holds only
   the rating, unchanged. */
.vru-rev-headline-overall {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
/* The button grows 30 percent from the small CTA it was, font and padding alike
   (calc keeps the 30 percent literal). Its readable white text, accessible focus
   and hover (the contrast sweep guards, keyed on .vru-rev-cta) all still apply at
   the new size. */
.vru-rev-compare-btn.vru-rev-cta-sm {
	font-size: calc(0.85rem * 1.3);
	padding: calc(5px * 1.3) calc(12px * 1.3);
}

.vru-rev-compare-intro { color: var(--vru-rev-muted); margin: 4px 0 14px; }
/* Round 27 Fix 4: the line beneath the chart linking to the About our ratings page. It
   sits in the content gutter (the chart itself may bleed full width on a phone) and shows
   at every width; on mobile it stands in for the info bubbles the chart hides there. */
.vru-rev-compare-ratings-link { margin: 14px 0 0; font-size: 0.95rem; }

/* The machine chips and the search slot sit in a row that wraps. */
.vru-rev-compare-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 20px;
}
.vru-rev-compare-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 120px;
	max-width: 160px;
	text-align: center;
}
.vru-rev-compare-chip-img img,
.vru-rev-compare-noimg {
	width: 80px;
	height: 80px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--vru-rev-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vru-rev-compare-noimg { font-size: 0.72rem; color: var(--vru-rev-muted); padding: 6px; }
.vru-rev-compare-chip-name { font-weight: 600; font-size: 0.9rem; }
.vru-rev-compare-remove { font-size: 0.8rem; color: var(--vru-rev-blue); }

/* The search slot: a combobox with a picture-per-row dropdown. */
.vru-rev-compare-slot { position: relative; min-width: 240px; }
.vru-rev-compare-slot-label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.vru-rev-compare-search {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--vru-rev-border);
	border-radius: 4px;
	box-sizing: border-box;
}
.vru-rev-compare-results {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--vru-rev-border);
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.12 );
	max-height: 340px;
	overflow-y: auto;
}
.vru-rev-compare-result {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	cursor: pointer;
}
.vru-rev-compare-result.is-active,
.vru-rev-compare-result:hover { background: var(--vru-rev-surface); }
/* Round 19 Fix 3: the search result thumbnail grows 30% (48 to 62), dimensioned on
   the img too (see compare.js) so result rows do not jump as the images load. */
.vru-rev-compare-result-img,
.vru-rev-compare-result-noimg { width: 62px; height: 62px; border-radius: 4px; object-fit: cover; background: var(--vru-rev-surface); flex: 0 0 auto; }
.vru-rev-compare-result-name { font-weight: 600; display: block; }
.vru-rev-compare-result-sub { font-size: 0.8rem; color: var(--vru-rev-muted); }
.vru-rev-compare-result-note { padding: 8px 10px; font-size: 0.8rem; color: var(--vru-rev-muted); }

/* The comparison table's expand toggle and metric head. */
/* Round 19 Fix 7: the topic column trees out like the review page. The guide rails are
   drawn as a full-height background on the metric cell (one line per level, capped to the
   row's depth via --vru-rail-depth), so they read continuous down the column and through a
   variable-height open proof row. The label is indented per level (16px, tighter than the
   review's step for the narrower column), and the two named gaps are compressed 30% from
   the review page: guide-to-arrow (about 8px here) and arrow-to-word (10px to 7px). */
.vru-rev-compare-metric-cell {
	background-image: repeating-linear-gradient( to right,
		transparent 0, transparent 14px,
		var(--vru-rev-border) 14px, var(--vru-rev-border) 16px );
	background-repeat: no-repeat;
	background-size: calc( var(--vru-rail-depth, 0) * 16px ) 100%;
}
/* Round 23 follow-up (Josh): on the wide comparison the nested topic levels also
   step the font size DOWN from the 18px root (depth 1 down 2px to 16px, depth 2
   down 4px to 14px, depth 3 down 6px to 12px), so a sub-topic and a sub-sub-topic
   read as subordinate at a glance on top of the rails and indent. Desktop only
   (min-width 783px, the companion of the round 25 Fix 4 mobile token, raised from
   601): the mobile breakpoint keeps its own compressed per-depth scale from Fix 3. */
@media (min-width: 783px) {
	.vru-rev-compare-row[data-vru-depth="1"] .vru-rev-compare-metric-cell { font-size: 16px; }
	.vru-rev-compare-row[data-vru-depth="2"] .vru-rev-compare-metric-cell { font-size: 14px; }
	.vru-rev-compare-row[data-vru-depth="3"] .vru-rev-compare-metric-cell { font-size: 12px; }
}
.vru-rev-compare-metric-head { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.vru-rev-compare-toggle {
	border: 0;
	background: transparent;
	cursor: pointer;
	width: 18px;
	height: 18px;
	padding: 0;
	color: var(--vru-rev-muted);
	flex: 0 0 auto;
}
/* Round 19 Fix 7: the same arrow the review tree draws (a right triangle that rotates
   open), so the comparison's nesting reads like the review window's. */
.vru-rev-compare-toggle::before { content: '\25B8'; font-size: 0.8em; display: inline-block; transition: transform 0.15s ease; }
.vru-rev-compare-toggle[aria-expanded="true"]::before { transform: rotate( 90deg ); }
/* Round 26 Fix 6: the expand line's word shows only at the mobile token (where the
   toggle moves under the topic name); on desktop the toggle stays the small arrow
   beside the name, so the word is hidden. A visible focus ring on the control. */
.vru-rev-compare-toggle-word { display: none; }
.vru-rev-compare-toggle:focus-visible { outline: 2px solid var(--vru-rev-blue); outline-offset: 2px; }

/* Round 19 Fix 5: the inline proof toggle (a disclosure styled like the tree's text
   controls) and the aligned proof row it opens, showing both machines side by side. */
.vru-rev-compare-proof-toggle {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	margin-left: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	color: #0A5C94;
	text-decoration: underline;
	flex: 0 0 auto;
}
.vru-rev-compare-proof-toggle:focus-visible {
	outline: 2px solid var(--vru-rev-blue);
	outline-offset: 2px;
}
.vru-rev-compare-proof-row > th,
.vru-rev-compare-proof-row > td { background: var(--vru-rev-surface); vertical-align: top; }
.vru-rev-compare-proof-cell { padding-top: 6px; padding-bottom: 12px; }
/* The house proof cards, stacked single-column so they fit the narrow compare column
   (the video card's own max-width still caps it). One evidence renderer, one look. */
.vru-rev-compare-proof-cell .vru-rev-proof-grid { grid-template-columns: 1fr; margin: 6px 0 0; }
.vru-rev-compare-proof-cell .vru-rev-ev-proof-block { margin-top: 10px; }
.vru-rev-compare-proof-cell .vru-rev-ev-proof-block:first-child { margin-top: 0; }
.vru-rev-compare-noproof { font-size: 0.85rem; }
/* Round 20 Fix 2: the metric's full backing (the readings table) renders inside
   each machine's comparison column, the same table the review page shows, so
   both machines' backing sit side by side. It fills its cell and its text wraps
   (the stable-layout contract still holds); the outer region scrolls sideways
   when the columns get narrow. Slightly smaller type suits the compact column. */
.vru-rev-compare-proof-cell .vru-rev-evidence { margin-top: 8px; font-size: 0.85rem; }
.vru-rev-compare-proof-cell .vru-rev-evidence:first-child { margin-top: 0; }

/* ------------------------------------------ compare, column-anchored (round 18 Fix 7). */

/* Two machine columns, each headed by its own search box with, beneath it, the
   machine's image and title sitting directly over that machine's data column
   (they are the same table column, so they align by construction). */
.vru-rev-compare-anchored .vru-rev-compare-table { table-layout: fixed; min-width: 560px; }
/* The metric column shrinks (about 30% narrower than an even split) so the topic
   words and the machine scores each get room; the two machine columns share the rest. */
.vru-rev-compare-anchored .vru-rev-compare-metric-col { width: 24%; }
.vru-rev-compare-anchored .vru-rev-compare-machine-col { width: 38%; }
/* Clear white space between the metric labels and the machine scores. */
.vru-rev-compare-anchored tr > th:first-child,
.vru-rev-compare-anchored tr > td:first-child { padding-right: 24px; }
.vru-rev-compare-col { vertical-align: top; }
.vru-rev-compare-anchored .vru-rev-compare-slot { min-width: 0; margin-bottom: 12px; }
/* Round 19 Fix 3: the column search box narrows by 30% (to 70% of its column), with a
   usable floor at narrow widths. The dropdown beneath stays the slot's full width
   (left:0 right:0 above), so its image-plus-name rows keep room to read. */
.vru-rev-compare-anchored .vru-rev-compare-search { width: 70%; min-width: 140px; max-width: 100%; }
.vru-rev-compare-col-machine { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 auto; }
/* Round 26 Fix 4 (with the v0.130.0 cross browser correction): the buy area (the
   Starting at line and the Shop button) anchors to the BOTTOM of every machine box,
   so across side by side columns it sits level whatever the name length above it.
   The header cell lays out as a flex column via an inner wrapper, which uses
   MIN-height:100%, not height:100%. Chrome resolves the percentage against the
   cell's USED row height, so the inner fills and the buy area's auto top margin
   drops it to the foot. Firefox resolves the percentage against the cell's DECLARED
   height (the height:1px) instead, where a MIN-height floor is simply overflowed by
   the content, so the box renders at its natural height. A plain height:100% clamped
   the inner to 1px in Firefox and the machine box spilled over the rows below (the
   round 26 bug Josh caught); a min-height cannot collapse. So the anchor works in
   Chrome and Firefox stays correct either way. A machine with no buy area keeps the
   same box height. Desktop and mobile alike.
   Round 27 Fix 2: this floor stays as the no-JS honesty, and compare.js now delivers
   the real anchor on top in BOTH engines: it measures the tallest column box per
   table and floors every column's inner to it, so the auto-margin buy areas sit
   level across the columns in Firefox too (the finder cards never needed this: their
   flex grid already anchors cross engine, no table-cell percent height involved). */
.vru-rev-compare-anchored .vru-rev-compare-col { height: 1px; }
.vru-rev-compare-anchored .vru-rev-compare-col-inner { display: flex; flex-direction: column; min-height: 100%; }
.vru-rev-compare-buyarea { margin-top: auto; }
/* Round 19 Fix 2: the machine face atop each column doubles (88 to 176 desktop,
   64 to 128 narrow), dimensions declared here and on the img so it never shifts as
   it loads; it stays directly over its own data column per the round 18 alignment. */
.vru-rev-compare-col-img {
	width: 176px;
	height: 176px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--vru-rev-surface);
	border: 1px solid var(--vru-rev-border);
	display: block;
	max-width: 100%;
}
.vru-rev-compare-col .vru-rev-compare-noimg { width: 176px; height: 176px; max-width: 100%; }
.vru-rev-compare-empty-row td { color: var(--vru-rev-muted); }

@media (max-width: 782px) {
	/* Round 27 Fix 5, corrected round 28 (Josh: the comparison goes edge to edge — the gray
	   Overall/Value title bars run flush to both screen edges — while the metric label text is
	   inset 2px on the left so it is not glued to the edge. That 2px lives on the metric cell
	   below, NOT here, so only the label text moves in; the gray bars carry no metric cell and
	   stay flush). The band negates the page gutter exactly: the only horizontal inset between
	   the comparison and the screen is the --vru-gutter padding on .vru-rev-page-inner, and
	   every wrapper between is full width and unpadded, so a negative margin of one gutter
	   lands the section on both screen edges with zero padding of its own. Negating the real
	   gutter (not the 50% - 50vw viewport trick) means no scrollbar overhang: no horizontal
	   page scroll, and the right column never slides under a desktop scrollbar. The table
	   below fills the freed width (100%, flexible machine columns) so the reading rows and
	   their backgrounds span the whole screen. Desktop keeps its gutters (under the 782 token). */
	.vru-rev-compare { margin-inline: calc(-1 * var(--vru-gutter, 20px)); padding-inline: 0; }

	/* Round 27 Fix 4: no room for the little information bubbles on a phone, so the
	   comparison hides them here; the "learn more" line beneath the chart is their
	   replacement, and it links the About our ratings page where every metric is
	   explained. Scoped to the comparison, so the review pages keep their bubbles at
	   every width (Josh's scope is the comparison for now). Desktop comparisons keep
	   theirs too (this lives under the 782 token). */
	.vru-rev-compare .vru-rev-help { display: none; }

	/* Round 25: the machine face atop each column at the mobile token. Round 26 Fix 8
	   keys the whole header column to this width. */
	.vru-rev-compare-col-img,
	.vru-rev-compare-col .vru-rev-compare-noimg { width: 128px; height: 128px; }

	/* Round 26 Fix 8, revised round 28 (Josh: fill the screen edge to edge). The table takes
	   the full width and the metric column stays narrow (80px), so the two machine columns
	   split all the remaining width between them (table-layout:fixed hands its auto columns
	   the leftover equally), reaching the screen edges rather than stopping at the image
	   width. The images (max-width:100%) simply grow into their columns; nothing forces a
	   column wider than its share. */
	.vru-rev-compare-anchored .vru-rev-compare-table { width: 100%; min-width: 0; }
	.vru-rev-compare-anchored .vru-rev-compare-metric-col { width: 80px; }
	.vru-rev-compare-anchored .vru-rev-compare-machine-col { width: auto; }
	.vru-rev-compare-anchored .vru-rev-compare-table th,
	.vru-rev-compare-anchored .vru-rev-compare-table td { padding: 8px 6px; }
	/* The clear gap round 18 set between the metric labels and the scores shrinks, and
	   the leading edge goes flush (Fix 3 does the metric cells; this does the Overall and
	   Value row headers too), because on a phone that width is the pressed resource. */
	.vru-rev-compare-anchored tr > th:first-child,
	.vru-rev-compare-anchored tr > td:first-child { padding-left: 0; padding-right: 8px; }
	/* The per column search box pulls in to the image width (it carried a 140px floor
	   that forced the column wider than the picture). Round 27 Fix 3: its text (the
	   placeholder and what a shopper types) drops 5px and its side padding tightens, so
	   the shorter mobile placeholder reads in the image-width box without a mid-word clip.
	   The !important beats the theme's own input rule (input:not([type=...]), specificity
	   higher than a two-class selector), the same way the metric cell gutter does. */
	.vru-rev-compare-anchored .vru-rev-compare-search { width: 100%; min-width: 0; max-width: 128px; font-size: calc(0.875rem - 5px) !important; padding-inline: 6px !important; }
	/* Fix 8: the label drops 2 points and the linked title drops 4, so the search
	   interface reads at the picture's width end to end. */
	.vru-rev-compare-slot-label { font-size: calc(0.85rem - 2px); }
	.vru-rev-compare-name { font-size: calc(1rem - 4px); }
	/* Fix 8: the Shop button becomes the image's width (128px, keyed to the face above),
	   its words wrapping to as many lines as they need rather than forcing the column
	   wider; the tap target stays honest at the fixed width. */
	.vru-rev-compare-buy.vru-rev-cta { display: block; width: 128px; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }

	/* Round 26 Fix 1: the per column search labels reserve two lines at the narrow token
	   so a wrapped label ("Add a machine to compare") and a one line label ("Replace this
	   machine") both leave their search boxes on a common line. The boxes sit level
	   whatever wraps; desktop keeps its one line labels and its layout unchanged. */
	.vru-rev-compare-anchored .vru-rev-compare-slot-label { min-height: 3em; }

	/* Round 26 Fix 6: the leading expand arrow leaves the row and becomes a small line
	   UNDER the topic name (a chevron plus "expand", "collapse" when open), so nothing
	   sits beside the name adding width. The metric head stacks: the label and its help
	   hold the first line, the expand line and the evidence toggle each take a line
	   beneath (order plus a full flex basis break them). The name and the line are one
	   control: compare.js toggles the row from a tap on either at this token, and the
	   chevron rotates for state. */
	.vru-rev-compare-metric-cell .vru-rev-compare-metric-head { display: flex; align-items: flex-start; gap: 2px 7px; }
	.vru-rev-compare-metric-label { order: 1; cursor: pointer; }
	.vru-rev-compare-metric-cell .vru-rev-help { order: 1; }
	.vru-rev-compare-toggle {
		order: 2;
		flex-basis: 100%;
		width: auto;
		height: auto;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 4px 0;
		font-size: 11px;
		color: var(--vru-rev-blue);
	}
	.vru-rev-compare-toggle-word { display: inline; }

	/* Round 26 Fix 2 and Fix 7: the "See the evidence" toggle sits flush (no indent
	   spends the metric column's width) and drops to exactly 8px, on its own line under
	   the expand line. Vertical padding keeps the tap target honest at the smaller text
	   without adding a left indent. */
	.vru-rev-compare-proof-toggle {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
		font-size: 8px;
		padding: 6px 8px 6px 0;
	}

	/* Round 26 Fix 5: the comparison's evidence reasoning drops 2 points here (the review
	   pages keep theirs). Scoped to the comparison root, so both the compact and the
	   inline evidence take the reduction. */
	.vru-rev-compare .vru-rev-reasoning-text { font-size: calc(0.9rem - 2px); }
}

/* ------------------------------------------ compare, in-place swap (round 19 Fix 1). */

/* The screen-reader status line the compare script announces swaps through. Present
   in the page, outside the swapped region, so it survives every swap. */
.vru-rev-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* While a swap is in flight the region dims and stops taking input, and an honest
   in-place label shows, so the update never looks dead or half applied. */
.vru-rev-compare-page { position: relative; }
.vru-rev-compare-page.is-loading .vru-rev-compare-region {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.1s ease;
}
.vru-rev-compare-page.is-loading::after {
	content: 'Updating the comparison';
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 30;
	background: var(--vru-rev-blue);
	color: #fff;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
}
@media (prefers-reduced-motion: reduce) {
	.vru-rev-compare-page.is-loading .vru-rev-compare-region { transition: none; }
}

/* Round 55 Fix 1 (+ round 55 follow-up: the format rework Josh asked for). The
   reviewed-machines list shortcode: a RESPONSIVE GRID of vertical cards (the image on top,
   then the star, the name, the teaser, and the two buttons), not a single column of wide
   rows. Uses the site palette and the existing Star_Display widget (never an invented star
   pill or colour). Its own token scope so it inherits the tokens like the other blocks. */
.vru-reviewed-list {
	--vru-rev-blue: var(--vru-color-primary, #0170B9);
	--vru-rev-text: var(--vru-color-text, #4B4F58);
	--vru-rev-muted: var(--vru-color-muted, #62666c);
	--vru-rev-border: var(--vru-color-border, #e2e8ed);
	--vru-rev-surface: var(--vru-color-surface, #F2F5F7);
	/* The star widget's own tokens, so the Star_Display pill renders in the site's gold on
	   grey exactly as it does everywhere else, never a fallback black star. */
	--vru-rev-star: #E8A33D;
	--vru-rev-star-track: #E6E1D6;
	color: var(--vru-rev-text);
	font-family: var(--vru-font-body, inherit);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin: 20px 0;
}
.vru-reviewed-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--vru-rev-border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.vru-reviewed-card-media {
	aspect-ratio: 4 / 3;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.vru-reviewed-card-img,
.vru-reviewed-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.vru-reviewed-card-noimg {
	color: var(--vru-rev-muted);
	font-size: 0.82rem;
	text-align: center;
	padding: 8px;
}
.vru-reviewed-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	flex: 1 1 auto;
}
.vru-reviewed-star { display: block; }
.vru-reviewed-name {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--vru-rev-blue);
	text-decoration: none;
	font-family: var(--vru-font-heading, inherit);
}
.vru-reviewed-name:hover { text-decoration: underline; }
.vru-reviewed-blurb {
	margin: 0;
	color: var(--vru-rev-text);
	font-size: 0.92rem;
	line-height: 1.5;
}
.vru-reviewed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}
/* The buttons match the site's own buttons: the same --vru-btn-radius, the blue primary
   and a matching outline, sized for a card so the two sit side by side. */
.vru-reviewed-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--vru-btn-radius, 3px);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	border: 1px solid var(--vru-rev-blue);
}
.vru-reviewed-btn-primary { background: var(--vru-rev-blue); color: #fff; }
.vru-reviewed-btn-primary:hover { background: #c1341a; border-color: #c1341a; color: #fff; }
.vru-reviewed-btn-ghost { background: #fff; color: var(--vru-rev-blue); }
.vru-reviewed-btn-ghost:hover { background: var(--vru-rev-surface); color: var(--vru-rev-blue); }
.vru-reviewed-btn:focus-visible { outline: 2px solid var(--vru-rev-blue); outline-offset: 2px; }
/* On a phone, one card per row. */
@media (max-width: 400px) {
	.vru-reviewed-list { grid-template-columns: 1fr; }
}