.reviewkit-review {
	/* ——— tbreak-v26 tokens. The block inherits the theme's preset palette, so night mode
	   rides the html.tb-dark variable swap automatically — no colour-scheme functions,
	   no guessed dark selectors. Fallbacks keep the block presentable off-theme (block editor,
	   plain installs).
	   --rk-accent is the article's VERTICAL accent (decorative: kicker, chip, meter,
	   band, commerce emphasis); --rk-punch stays the brand punch for NEGATIVE semantics
	   only (the cons column) so a teal-vertical review doesn't paint + and − in the
	   same colour. */
	--rk-accent: var(--tb-vertical, #f80052);
	--rk-accent-hover: var(--tb-vertical-deep, #d60047);
	--rk-accent-on: var(--tb-vertical-on, #fff);
	--rk-punch: var(--wp--preset--color--punch, #f80052);
	--rk-teal: #00988a;
	--rk-teal-text: #00695e;
	--rk-ink: var(--wp--preset--color--ink, #050831);
	--rk-body: var(--wp--preset--color--ink, #1f2a44);
	--rk-secondary: var(--wp--preset--color--slate, #52607c);
	--rk-card: var(--wp--preset--color--white, #ffffff);
	--rk-muted: color-mix(in srgb, var(--rk-secondary) 72%, var(--rk-card));
	--rk-border: var(--tb-hairline, #e3e7ee);
	--rk-row: color-mix(in srgb, var(--rk-ink) 6%, var(--rk-card));
	--rk-paper: color-mix(in srgb, var(--rk-ink) 4%, var(--rk-card));
	--rk-band: color-mix(in srgb, var(--rk-accent) 40%, var(--tb-chrome-bg, #050831));
	--rk-band-fg: var(--tb-chrome-fg, #f6f9fc);
	--rk-band-meta: rgba(246, 249, 252, 0.65);
	--rk-headline-font: var(--wp--preset--font-family--bricolage-grotesque, inherit);
	--rk-mono-font: var(--tb-mono, inherit);
	background: var(--rk-card);
	border: 1px solid var(--rk-border);
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(5, 8, 49, 0.06);
	color: var(--rk-body);
	font-family: inherit;
	margin-block: 1.9rem 2.1rem;
	overflow: hidden;
}

/* Wide layout — ride the theme's wide-media rail (--tb-wide-media, the same
   min(960px, 100vw - 48px) measure images, galleries and tables break out to).
   Scoped to .tb-single so the block keeps the normal content measure in the
   editor and on other themes. */
.tb-single .entry-content > .reviewkit-review {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--tb-wide-media);
}

.reviewkit-review * {
	box-sizing: border-box;
}

.reviewkit-review .rk-inner {
	padding: 0 32px 28px;
}

.reviewkit-review .rk-head {
	align-items: stretch;
	background: linear-gradient(180deg, color-mix(in srgb, var(--rk-accent) 9%, transparent), transparent);
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 -32px 24px;
	padding: 26px 32px;
}

.reviewkit-review .rk-head-main {
	min-width: 0;
}

.reviewkit-review .rk-chip {
	background: var(--rk-accent);
	border-radius: 3px;
	color: var(--rk-accent-on);
	display: inline-flex;
	font-family: var(--rk-mono-font);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	margin: 0 0 10px;
	padding: 6px 8px;
	text-transform: uppercase;
}

.reviewkit-review .rk-kicker {
	color: var(--rk-accent);
	display: block;
	font-family: var(--rk-mono-font);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.reviewkit-review .rk-title {
	color: var(--rk-ink);
	font-family: var(--rk-headline-font);
	font-size: 27px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.12;
	margin: 8px 0 0;
}

.reviewkit-review .rk-byline {
	align-items: center;
	color: var(--rk-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12.5px;
	gap: 8px;
	margin: 10px 0 0;
}

.reviewkit-review .rk-byline b {
	color: var(--rk-secondary);
	font-weight: 700;
}

.reviewkit-review .rk-dot {
	opacity: 0.5;
}

.reviewkit-review .rk-rating {
	align-self: start;
	background: var(--rk-band);
	border-radius: 10px;
	color: var(--rk-band-fg);
	min-width: 190px;
	padding: 16px 22px;
}

.reviewkit-review .rk-score {
	color: var(--rk-band-fg);
	font-family: var(--rk-headline-font);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 0.95;
}

.reviewkit-review .rk-meter {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(10, 1fr);
	margin: 12px 0 10px;
}

.reviewkit-review .rk-seg {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 3px;
	height: 6px;
	overflow: hidden;
}

.reviewkit-review .rk-seg i {
	background: var(--rk-accent);
	border-radius: 3px;
	display: block;
	height: 100%;
}

.reviewkit-review .rk-out {
	color: var(--rk-band-meta);
	display: block;
	font-family: var(--rk-mono-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.reviewkit-review .rk-badge {
	background: color-mix(in srgb, var(--rk-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--rk-accent) 22%, transparent);
	border-radius: 3px;
	color: var(--rk-accent);
	display: inline-flex;
	font-family: var(--rk-mono-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	margin: 0 0 14px;
	padding: 7px 9px;
	text-transform: uppercase;
}

.reviewkit-review .rk-summary {
	color: var(--rk-body);
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
}

.reviewkit-review .rk-stuff {
	border-top: 1px solid var(--rk-row);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 24px 0 0;
}

.reviewkit-review .rk-col {
	padding: 24px 26px 8px 0;
}

.reviewkit-review .rk-col + .rk-col {
	border-left: 1px solid var(--rk-row);
	padding-left: 26px;
	padding-right: 0;
}

/* Same heading as the recommendation card: Bricolage 700 at 19px, title case,
   28px round chip, 12px gap — the two pros/cons constructs read as one family. */
.reviewkit-review .rk-col-h {
	align-items: center;
	display: flex;
	font-family: var(--rk-headline-font);
	font-size: 19px;
	font-weight: 700;
	gap: 12px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.reviewkit-review .rk-col-h span {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 800;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.reviewkit-review .rk-liked .rk-col-h {
	color: var(--rk-teal-text);
}

.reviewkit-review .rk-liked .rk-col-h span {
	background: color-mix(in srgb, var(--rk-teal) 11%, transparent);
	color: var(--rk-teal);
}

.reviewkit-review .rk-cons .rk-col-h {
	color: var(--rk-punch);
}

.reviewkit-review .rk-cons .rk-col-h span {
	background: color-mix(in srgb, var(--rk-punch) 10%, transparent);
	color: var(--rk-punch);
}

.reviewkit-review .rk-col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* :root prefix — the v26 theme styles article list items DIRECTLY
   (`.tb-single .entry-content ul > li`, 0,2,2: Bricolage 500/16px, 26px padding,
   plus its own square marker), which outguns the block's 0,2,1 rules — that is what
   pushed the bullets off the body font and out of line with the heading. :root lifts
   these to 0,3,1/0,3,2 and re-asserts every themed property. The marker sits in a
   fixed 28px centre-aligned column with the heading's 12px gap, so each +/− centres
   exactly under the 28px heading chip and the text aligns under the label — the same
   construction as the recommendation card. */
:root .reviewkit-review .rk-col li {
	align-items: baseline;
	color: var(--rk-body);
	display: flex;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	gap: 12px;
	letter-spacing: normal;
	line-height: 1.45;
	margin: 0;
	padding: 0;
	position: static;
}

:root .reviewkit-review .rk-col li::before {
	background: none;
	flex-shrink: 0;
	font-weight: 800;
	height: auto;
	position: static;
	text-align: center;
	width: 28px;
}

:root .reviewkit-review .rk-liked li::before {
	color: var(--rk-teal);
	content: "+";
}

:root .reviewkit-review .rk-cons li::before {
	color: var(--rk-punch);
	content: "\2212";
}

.reviewkit-review .rk-offers {
	background: var(--rk-paper);
	border: 1px solid var(--rk-border);
	border-radius: 10px;
	margin: 26px 0 0;
	overflow: hidden;
}

.reviewkit-review .rk-offers-kicker {
	color: var(--rk-muted);
	font-family: var(--rk-mono-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.3;
	margin: 0;
	padding: 15px 18px;
	text-transform: uppercase;
}

.reviewkit-review .rk-offer {
	align-items: center;
	border-top: 1px solid var(--rk-row);
	color: var(--rk-ink);
	display: flex;
	gap: 14px;
	padding: 13px 18px;
	text-decoration: none;
}

/* First child (retailer on buy rows, label on watch/static rows) fills the row so the trailing
   pill / price / View pack to the right edge CONSISTENTLY whether or not the "Lowest" pill is present.
   The old 4-column grid reserved an empty 4th column (+ its gap) on rows without the pill, shifting
   them out of line. :first-child (not .rk-retailer) so watch/static offer rows stay right-aligned too. */
.reviewkit-review .rk-offer > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.reviewkit-review .rk-retailer {
	font-size: 15px;
	font-weight: 700;
}

.reviewkit-review .rk-best-tag {
	background: color-mix(in srgb, var(--rk-accent) 10%, transparent);
	border-radius: 3px;
	color: var(--rk-accent);
	font-family: var(--rk-mono-font);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 5px 7px;
	text-transform: uppercase;
}

.reviewkit-review .rk-price {
	color: var(--rk-secondary);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.reviewkit-review .rk-best .rk-price {
	color: var(--rk-accent);
	font-size: 18px;
	font-weight: 800;
}

.reviewkit-review .rk-go {
	border: 1px solid var(--rk-ink);
	border-radius: 999px;
	color: var(--rk-ink);
	font-size: 12px;
	font-weight: 800;
	padding: 7px 12px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.reviewkit-review .rk-best .rk-go {
	background: var(--rk-accent);
	border-color: var(--rk-accent);
	color: var(--rk-accent-on);
}

.reviewkit-review .rk-offer:hover .rk-go {
	background: var(--rk-ink);
	color: var(--rk-card);
}

.reviewkit-review .rk-best:hover .rk-go {
	background: var(--rk-accent-hover);
	border-color: var(--rk-accent-hover);
}

.reviewkit-review .rk-disclosure {
	color: var(--rk-muted);
	font-size: 11.5px;
	line-height: 1.55;
	margin: 12px 0 0;
}

.reviewkit-review .rk-hubs {
	border-top: 1px solid var(--rk-row);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 18px;
}

.reviewkit-review .rk-hub {
	color: var(--rk-secondary);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.reviewkit-review .rk-hub:hover {
	color: var(--rk-accent);
}

.reviewkit-review .rk-placeholder {
	color: var(--rk-muted);
	font-style: italic;
	padding: 26px 30px;
}

/* ——— tbreak-v26 night. html.tb-dark is the theme's real dark-mode hook (the masthead
   toggle in progress.js, persisted as localStorage 'tb-mode'); the preset swap above
   re-colours every inherited token on its own. Only the cross-mapped pieces need a
   hand: the card steps UP onto paper (the navy page is white→#050831, paper→#121843)
   so panels stay visibly raised — the same move the theme itself makes — plus the
   hand-tuned teal legend where a block has one. */
html.tb-dark .reviewkit-review {
	--rk-card: var(--wp--preset--color--paper, #121843);
	--rk-teal-text: #5dcfc2;
}

@media (max-width: 640px) {
	.reviewkit-review .rk-inner {
		padding: 0 20px 22px;
	}

	.reviewkit-review .rk-head {
		grid-template-columns: 1fr;
		margin-inline: -20px;
		padding: 22px 20px;
	}

	.reviewkit-review .rk-rating {
		width: 100%;
	}

	.reviewkit-review .rk-stuff {
		grid-template-columns: 1fr;
	}

	.reviewkit-review .rk-col + .rk-col {
		border-left: 0;
		border-top: 1px solid var(--rk-row);
		padding-left: 0;
	}

	.reviewkit-review .rk-offer {
		flex-wrap: wrap;
	}
}

/* Space BELOW the block. WordPress's constrained-layout reset
   `:root :where(.is-layout-constrained) > * { margin-block-end: 0 }` (specificity 0,1,0) ties the
   margin-block above (also 0,1,0) and wins by cascade order, zeroing the block's bottom margin so the
   next paragraph sits flush. Re-assert the designed bottom spacing at higher specificity (:root … =
   0,2,0) so it wins. Bottom only — the top keeps the block-gap rhythm. */
:root .reviewkit-review { margin-bottom: 2.1rem; }