/* ==========================================================================
   REVMINT — DESIGN 2  ·  interface overrides
   --------------------------------------------------------------------------
   Loaded AFTER theme.css, so this file alone carries the Design 2 interface.
   Design 1's theme.css is untouched: delete this file's enqueue in
   inc/setup.php and the theme falls straight back to the Design 1 layout.

   Buy buttons are UNCHANGED from Design 1: exactly one, at the end of the
   article. No hero CTA, no sticky bar. This file is presentation only.

   What changes vs Design 1
   1. Product hero      — much bigger product image, larger score plate, and
                          room to breathe (the card is no longer squeezed into
                          the 760px prose measure).
   2. Reading column    — wider measure, larger body type, real vertical rhythm.
   3. Section headings  — numbered rule instead of plain bold text.
   4. Cards (home/archive) — fixed 4:3 image well, hover lift, category chip
                          sitting on the image.
   5. Category tiles    — depth and gradient.
   6. Specs / TOC / verdict — quieter chrome, less boxed-in stacking.
   7. Components break out to 1060px while prose stays narrow.
   ========================================================================== */

/* ============================ 1 · PRODUCT HERO ============================ */

.br-rs {
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.07);
	margin: 0 0 2.4em;
}

/* Facts get the room; the PRICE rail is wider when a price exists. A review
   with no stored price keeps Design 1's behaviour exactly — the rail collapses
   and the score + verdict fill the whole row.
   There is NO buy button in the hero: the one and only buy button is the
   [aff_button] at the END of the article, same as Design 1. */
.br-rs-band {
	grid-template-columns: minmax(0, 1fr) 290px;
	align-items: stretch;
}
.br-rs-band--norail { grid-template-columns: 1fr; }

.br-rs-facts {
	gap: 28px;
	padding: 30px 30px 30px 28px;
	align-items: flex-start;
}

/* The product photo is the reason the reader is here — give it real size. */
.br-rs-media {
	width: 208px;
	height: 208px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius-sm);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.br-rs-media img { max-height: 100%; }
.br-rs-ph { font-size: 0.92rem; }

.br-rs-headwrap { gap: 14px; padding-top: 2px; }

/* Score: a solid tinted plate rather than a small chip. */
.br-rs-score {
	gap: 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--br-border);
}
.br-rs-num {
	font-size: 2.6rem;
	line-height: 1;
	padding: 10px 16px;
	border-radius: var(--br-radius-sm);
	letter-spacing: -0.02em;
}
.br-rs-badge { letter-spacing: 0.08em; font-size: 0.68rem; }
.br-rs-out   { font-size: 0.74rem; }

.br-rs-verdict {
	font-size: 1.06rem;
	line-height: 1.62;
	color: var(--br-text);
	margin: 0;
	max-width: 62ch;   /* the rail can collapse; keep the verdict readable anyway */
}
/* Same reason: the score rule should not run the full width of a rail-less card. */
.br-rs-band--norail .br-rs-score { max-width: 62ch; }

/* ---- the conversion rail ---- */
.br-rs-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 26px 24px;
	background: linear-gradient(180deg, var(--br-soft) 0%, #e7edf4 100%);
	border-left: 1px solid var(--br-border);
}
.br-rs-pricewrap { text-align: center; }
.br-rs-pricelabel {
	display: block;
	font-family: var(--br-font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--br-muted);
	margin-bottom: 2px;
}
.br-rs-price {
	font-family: var(--br-font-head);
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1.15;
	color: var(--br-ink);
	letter-spacing: -0.02em;
}
.br-rs-foot {
	background: var(--br-surface);
	border-top: 1px solid var(--br-border);
	padding: 11px 24px;
}
.br-rs-note { font-size: 0.72rem; color: var(--br-muted); }

@media (max-width: 860px) {
	.br-rs-band,
	.br-rs-band--norail { grid-template-columns: 1fr; }
	.br-rs-facts { flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 26px 20px; }
	.br-rs-media { width: 190px; height: 190px; }
	.br-rs-score { justify-content: center; }
	.br-rs-cta { border-left: 0; border-top: 1px solid var(--br-border); }
}

/* ============================ 2 · BUY BUTTONS ============================= */
/* One hot action colour on an otherwise neutral page. */

.br-btn,
.br-btn.br-btn--amazon,
.br-btn.br-btn--primary {
	background: linear-gradient(180deg, var(--br-action) 0%, var(--br-action-dark) 100%);
	border: 1px solid var(--br-action-dark);
	color: #2b1600;
	border-radius: 8px;
	font-family: var(--br-font-head);
	font-weight: 700;
	letter-spacing: 0.005em;
	box-shadow: 0 1px 2px rgba(61, 31, 0, 0.18), 0 6px 16px rgba(247, 144, 9, 0.28);
	transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.br-btn:hover,
.br-btn.br-btn--amazon:hover,
.br-btn.br-btn--primary:hover {
	filter: saturate(1.06) brightness(1.03);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(61, 31, 0, 0.2), 0 12px 26px rgba(247, 144, 9, 0.36);
	color: #2b1600;
}
.br-btn--lg { padding: 15px 24px; font-size: 1.02rem; }

/* ============================ 3 · READING COLUMN ========================== */

.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	font-size: 1.06rem;
	line-height: 1.78;
	color: #1d2739;
}
.entry-content > p { margin-bottom: 1.35em; }

/* Numbered section headings — a quiet rule and a counter give the article
   structure without another box. */
.entry-content { counter-reset: br-sec; }
.entry-content > h2 {
	counter-increment: br-sec;
	position: relative;
	margin: 2.5em 0 0.85em;
	padding: 0 0 0.5em 0;
	font-size: 1.62rem;
	line-height: 1.28;
	letter-spacing: -0.015em;
	border-bottom: 1px solid var(--br-border);
}
.entry-content > h2::before {
	content: counter(br-sec, decimal-leading-zero);
	display: inline-block;
	margin-right: 12px;
	font-family: var(--br-font-mono);
	font-size: 0.72em;
	font-weight: 500;
	color: var(--br-action-dark);
	vertical-align: 0.14em;
}

/* ============================ 4 · SPECS / TOC / VERDICT =================== */

.br-specs {
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius);
	overflow: hidden;
	box-shadow: none;
}
.br-specs table { font-size: 0.95rem; }
.br-specs tbody tr:nth-child(odd) { background: #f8fafc; }
.br-specs tbody tr:nth-child(even) { background: var(--br-surface); }

/* TOC: a light inline panel, not a heavy card */
.br-toc {
	background: transparent;
	border: 0;
	border-left: 3px solid var(--br-action);
	border-radius: 0;
	box-shadow: none;
	padding: 4px 0 4px 20px;
	margin: 2em 0 2.4em;
}
.br-toc a { text-decoration: none; }
.br-toc a:hover { text-decoration: underline; }

.br-verdict {
	border: 1px solid var(--br-border);
	border-top: 3px solid var(--br-action);
	border-radius: var(--br-radius);
	background: linear-gradient(180deg, #ffffff 0%, var(--br-soft) 100%);
	box-shadow: var(--br-shadow);
}

/* ============================ 5 · REVIEW CARDS ============================ */

.br-card {
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	overflow: hidden;
}
.br-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--br-shadow-hover);
	border-color: #c6d2e0;
}
/* Taller, cleaner image well so mixed product shots line up on the grid */
.br-card-media {
	background: #fff;
	border-bottom: 1px solid var(--br-border);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}
.br-card-media img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}
.br-card:hover .br-card-media img { transform: scale(1.04); }

/* Category chip sits ON the image well, not above the title */
.br-card-cat {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--br-border);
	color: var(--br-primary);
	border-radius: 999px;
	padding: 4px 11px;
	font-family: var(--br-font-body);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.br-card-media { position: relative; }

.br-card-body { padding: 16px 17px 18px; }
.br-card-title {
	font-size: 1.05rem;
	line-height: 1.42;
	letter-spacing: -0.012em;
	margin: 6px 0 8px;
}
.br-card-excerpt { font-size: 0.9rem; line-height: 1.62; color: var(--br-muted); }
.br-card-link {
	font-family: var(--br-font-head);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--br-action-dark);
	text-decoration: none;
}
.br-card-link:hover { color: var(--br-action); text-decoration: underline; }

/* ============================ 6 · CATEGORY TILES ========================== */

.br-cat-card {
	border-radius: var(--br-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 22px rgba(16, 24, 40, 0.08);
	transition: transform 0.18s ease, box-shadow 0.22s ease;
	position: relative;
	overflow: hidden;
}
.br-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.22) 100%);
	pointer-events: none;
}
.br-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 18px 34px rgba(16, 24, 40, 0.16);
}
/* keep the tile text above the new gradient veil */
.br-cat-name,
.br-cat-desc,
.br-cat-count { position: relative; z-index: 1; }
.br-cat-name { letter-spacing: -0.015em; }

/* ============================ 7 · STICKY BAR — KEPT OFF ==================
   Design 1 ships a sticky buy bar but leaves its hook commented out, and
   Design 2 keeps it off for the same reason: ONE buy button, at the end of the
   article. These rules only tidy its type should it ever be switched on in
   inc/engagement.php — nothing here renders by default.
   ========================================================================== */

.br-sticky-cta {
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: saturate(1.4) blur(10px);
	border-top: 1px solid var(--br-border);
	box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.12);
}
.br-sticky-name { font-family: var(--br-font-head); font-weight: 700; letter-spacing: -0.01em; }
.br-sticky-price { font-family: var(--br-font-head); font-weight: 800; color: var(--br-ink); }
.br-sticky-cta .br-btn { white-space: nowrap; }

/* ============================ 8 · TRUST BAR / HEADER ===================== */

.br-topbar {
	background: var(--br-primary);
	color: #dbe6f2;
	border: 0;
	font-size: 0.76rem;
	letter-spacing: 0.01em;
}
.br-topbar a { color: #fff; }

/* Hero band on the front page: cool neutral instead of warm cream */
.br-hero {
	background: linear-gradient(180deg, var(--br-soft) 0%, var(--br-bg) 100%);
	border-bottom: 1px solid var(--br-border);
}
.br-hero-title { letter-spacing: -0.03em; }
.br-hero-trust { font-family: var(--br-font-mono); font-size: 0.74rem; color: var(--br-muted); }
.br-kicker { color: var(--br-action-dark); letter-spacing: 0.16em; }

/* Section heads on the home/archive grids */
.br-section-head { border-bottom: 1px solid var(--br-border); padding-bottom: 10px; }
.br-section-more {
	font-family: var(--br-font-head);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	color: var(--br-action-dark);
}

/* ============================ 9 · FULL-WIDTH BREAKOUT ====================
   Design 1 capped EVERY component at the 760px reading measure, so the product
   hero, the specs table and the comparison table were all squeezed into the
   same narrow column as the prose — the hero had no room for an image, a score
   and a buy rail side by side.

   Design 2 keeps the narrow measure for PROSE (that's what makes it readable)
   and lets the data-heavy components break out to ~1060px, centred on the page.
   ========================================================================== */

.single-post .entry-content > .br-rs,
.single-post .entry-content > .br-specs,
.single-post .entry-content > .br-verdict,
.single-post .entry-content > .br-compare-wrap,
.single-post .entry-content > .br-faq {
	width: min(1060px, calc(100vw - 72px));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Inline product shots get a modest breakout too, so they read as figures
   rather than as another paragraph. */
.single-post .entry-content > .br-inline-fig {
	width: min(860px, calc(100vw - 72px));
	margin-left: 50%;
	transform: translateX(-50%);
}
.br-inline-fig img { border-radius: var(--br-radius-sm); }

/* Prose measure: a touch wider than Design 1's 760px to match the larger type. */
.single-post .entry-content,
.single-post .entry-header,
.br-crumbs { max-width: 780px; }

@media (max-width: 1140px) {
	.single-post .entry-content > .br-rs,
	.single-post .entry-content > .br-specs,
	.single-post .entry-content > .br-verdict,
	.single-post .entry-content > .br-compare-wrap,
	.single-post .entry-content > .br-faq,
	.single-post .entry-content > .br-inline-fig {
		width: 100%;
		margin-left: 0;
		transform: none;
	}
}

/* ==========================================================================
   10 · DESIGN 2 HOMEPAGE — ranked editorial layout
   --------------------------------------------------------------------------
   Structural, not cosmetic. Design 1's homepage gave every review the same
   weight: a centred masthead, six colour blocks, then nine identical cards.
   Design 2 ranks the page — one lead panel, four numbered runners-up beside
   it, then a compact list — so the eye lands somewhere on purpose.
   ========================================================================== */

/* ---- 1 · slim masthead: brand left, trust line right, one band ---------- */
.br2-masthead { padding: 0; }
.br2-masthead-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 30px 20px 28px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.br2-masthead-brand { min-width: 0; }
.br2-masthead .br-hero-title {
	margin: 4px 0 4px;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
}
.br2-masthead .br-hero-sub {
	margin: 0;
	font-size: 1.02rem;
	color: var(--br-muted);
	max-width: 46ch;
}
.br2-masthead-trust {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
	padding-bottom: 4px;
}
.br2-masthead-trust span {
	color: var(--br-action-dark);
	font-weight: 600;
}
@media (max-width: 720px) {
	.br2-masthead-inner { align-items: flex-start; padding: 24px 20px 22px; }
	.br2-masthead-trust { align-items: flex-start; text-align: left; }
}

/* ---- 2 · category pill bar (replaces six colour blocks) ---------------- */
.br2-catbar {
	background: var(--br-surface);
	border-top: 1px solid var(--br-border);
	border-bottom: 1px solid var(--br-border);
	position: relative;
	z-index: 2;
}
.br2-catbar-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 9px;
	overflow-x: auto;
	scrollbar-width: none;
}
.br2-catbar-inner::-webkit-scrollbar { display: none; }
.br2-catbar-label {
	flex: 0 0 auto;
	font-family: var(--br-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--br-muted);
	padding-right: 6px;
}
.br2-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--br-border);
	border-radius: 999px;
	background: var(--br-bg);
	font-family: var(--br-font-head);
	font-weight: 600;
	font-size: 0.86rem;
	color: var(--br-text);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.br2-pill span {
	font-family: var(--br-font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--br-muted);
	background: var(--br-surface);
	border: 1px solid var(--br-border);
	border-radius: 999px;
	padding: 1px 6px;
}
.br2-pill:hover {
	border-color: var(--br-action);
	background: #fff8ee;
	color: var(--br-ink);
}
.br2-pill--soon { opacity: 0.62; }

/* ---- 3 · lead panel + ranked runners-up -------------------------------- */
.br2-featured-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.br2-lead {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	background: var(--br-surface);
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.07);
	transition: transform 0.2s ease, box-shadow 0.24s ease;
}
.br2-lead:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(16, 24, 40, 0.07), 0 22px 44px rgba(16, 24, 40, 0.14);
}
.br2-lead-media {
	position: relative;
	background: linear-gradient(160deg, var(--br-soft) 0%, #e3e9f1 100%);
	border-right: 1px solid var(--br-border);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px;
	min-height: 320px;
}
.br2-lead-media img {
	max-width: 100%;
	max-height: 300px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 12px 20px rgba(16, 24, 40, 0.16));
}
.br2-lead-ph {
	font-family: var(--br-font-head);
	font-weight: 700;
	color: var(--br-muted);
}
.br2-lead-seal {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--br-action);
	color: #2b1600;
	border-radius: 999px;
	padding: 5px 13px;
	font-family: var(--br-font-head);
	font-weight: 800;
	font-size: 0.66rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(247, 144, 9, 0.4);
}
.br2-lead-body {
	padding: 26px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.br2-eyebrow {
	font-family: var(--br-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--br-action-dark);
}
.br2-lead-title {
	margin: 0;
	font-size: clamp(1.24rem, 1.55vw, 1.5rem);
	line-height: 1.26;
	letter-spacing: -0.022em;
	color: var(--br-ink);
}
.br2-lead-score { display: flex; align-items: center; gap: 11px; }
.br2-scoreplate {
	font-family: var(--br-font-head);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: #fff;
	background: var(--br-score-good);
	border-radius: var(--br-radius-sm);
	padding: 8px 12px;
}
.br-tier-ok   .br2-scoreplate, .br2-scoreplate.br-tier-ok   { background: var(--br-score-ok); }
.br-tier-bad  .br2-scoreplate, .br2-scoreplate.br-tier-bad  { background: var(--br-score-bad); }
.br2-scoreplate.br-tier-good { background: var(--br-score-good); }
.br2-scoremeta { display: flex; flex-direction: column; gap: 2px; }
/* The score plate already states the number, so suppress the one br_stars()
   appends inside the star row — otherwise the lead reads "3.9 ... 3.9". */
.br2-lead-score .br-stars-num { display: none; }
.br2-row-score .br-stars-num { font-family: var(--br-font-head); font-weight: 700; color: var(--br-text); margin-left: 4px; }
.br2-scorelabel {
	font-family: var(--br-font-head);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--br-muted);
}
.br2-lead-blurb {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.68;
	color: var(--br-muted);
}
.br2-lead-cta {
	margin-top: auto;
	font-family: var(--br-font-head);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--br-action-dark);
}
.br2-lead:hover .br2-lead-cta { color: var(--br-action); }

@media (max-width: 1000px) {
	.br2-featured-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.br2-lead { grid-template-columns: 1fr; }
	.br2-lead-media { border-right: 0; border-bottom: 1px solid var(--br-border); min-height: 240px; }
}

/* ---- the ranked list beside the lead ----------------------------------- */
.br2-rank {
	background: var(--br-surface);
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius);
	padding: 6px 6px 8px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.br2-rank-head {
	display: block;
	padding: 13px 14px 11px;
	font-family: var(--br-font-mono);
	font-size: 0.67rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--br-muted);
	border-bottom: 1px solid var(--br-border);
	margin-bottom: 4px;
}

/* ---- 4 · the compact row (used in both lists) -------------------------- */
.br2-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 12px;
	border-radius: var(--br-radius-sm);
	text-decoration: none;
	transition: background 0.15s ease;
}
.br2-row:hover { background: var(--br-soft); }
.br2-row-rank {
	flex: 0 0 auto;
	width: 26px;
	font-family: var(--br-font-mono);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--br-action-dark);
	text-align: center;
}
.br2-row-media {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius-sm);
	overflow: hidden;
	padding: 5px;
}
.br2-row-media img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.br2-row-ph {
	font-family: var(--br-font-head);
	font-weight: 700;
	font-size: 0.74rem;
	color: var(--br-muted);
}
.br2-row-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.br2-row-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.br2-row-cat {
	font-family: var(--br-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--br-muted);
}
.br2-row-score { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; }
.br2-row-score b { font-family: var(--br-font-head); color: var(--br-text); }
.br2-row-title {
	font-family: var(--br-font-head);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.38;
	letter-spacing: -0.012em;
	color: var(--br-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.br2-row:hover .br2-row-title { color: var(--br-primary); }

/* ---- the "more reviews" two-column list -------------------------------- */
.br2-rowlist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 20px;
	background: var(--br-surface);
	border: 1px solid var(--br-border);
	border-radius: var(--br-radius);
	padding: 8px;
}
@media (max-width: 780px) {
	.br2-rowlist { grid-template-columns: 1fr; }
}

/* Section heads on the new homepage */
.br2-home .br-section { max-width: 1160px; margin: 0 auto; padding: 34px 20px 6px; }
.br2-home .br-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.br2-home .br-section-head h2 {
	margin: 0;
	font-size: 1.32rem;
	letter-spacing: -0.02em;
}
.br2-home .br2-more { padding-bottom: 44px; }

/* ---- archive / category pages -----------------------------------------
   Same ranked structure as the homepage: one lead panel, then compact rows. */
.br2-archive-lead { margin: 0 0 22px; }
.br2-archive-lead .br2-lead { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
.br-archive .br2-rowlist { margin-bottom: 26px; }
.br-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.br-subcat {
	padding: 6px 13px;
	border: 1px solid var(--br-border);
	border-radius: 999px;
	background: var(--br-surface);
	font-family: var(--br-font-head);
	font-weight: 600;
	font-size: 0.82rem;
	text-decoration: none;
	color: var(--br-text);
}
.br-subcat:hover { border-color: var(--br-action); background: #fff8ee; }
.br-archive-title { letter-spacing: -0.028em; }