/*
 * Review items, dressed for the article rather than for the product page.
 *
 * The values here are lifted from ocracing.com itself (measured on a live review, not guessed):
 * Space Grotesk at 18px/25.6px, ink #44464C, brand green #1C8E4D, an 836px text column, 8px on
 * buttons, 16px on the images that sit in the prose, and headings set in uppercase. Items inherit
 * the article's font instead of importing one, so a future theme change carries them along.
 *
 * The tables come from SRPP's compare.css, which dresses them for a product page -- a dark header
 * bar, its own display font, a drop shadow. Inside an article that reads as an embedded widget, so
 * the overrides below quiet them down: hairlines, no shadow, inherited type. Nothing is !important;
 * these simply carry more specificity.
 */

.ocrb,
.ocrb *,
.ocrb *::before,
.ocrb *::after {
	box-sizing: border-box;
}

.ocrb {
	--ocrb-ink: #44464c;
	--ocrb-muted: #6b6e78;
	--ocrb-line: #e4e5e9;
	--ocrb-green: #1c8e4d;
	--ocrb-green-dark: #166534;
	--ocrb-green-soft: rgba(28, 142, 77, 0.12);
	--ocrb-radius: 16px;
	--ocrb-radius-sm: 8px;

	margin: 36px 0;
	color: var(--ocrb-ink);
	font-family: inherit;
}

/*
 * Two classes deep on purpose. Themes style headings as `.entry-content h3`, which outranks a
 * single class -- that is why one item's heading came out at the theme's h3 size while another,
 * set as h2, came out at 35px. Every item heading now resolves to the same rule whatever tag it
 * uses, and the tag is left free for the document outline.
 */
.ocrb .ocrb__heading,
.ocrb h2.ocrb__heading,
.ocrb h3.ocrb__heading,
.ocrb h4.ocrb__heading {
	margin: 0 0 14px;
	padding: 0;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ocrb-ink);
}

/* Same treatment for the price card's own heading, which SRPP renders as an h2. */
.ocrb--price-chart .srpp-price-card > h2 {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.25;
	text-transform: uppercase;
}

/* Tables: shop list and specs ------------------------------------------ */

.ocrb .srpp-price-table,
.ocrb .ocrb-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ocrb-line);
	border-radius: var(--ocrb-radius);
	overflow: hidden;
	box-shadow: none;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
}

/* Framed item ----------------------------------------------------------- */

/*
 * Content plus its affiliate disclosure, in one frame. The border sits here instead of on the
 * table or list inside, so the disclosure reads as the last row of the element rather than as a
 * stray sentence in the gap below it.
 */
.ocrb-box {
	border: 1px solid var(--ocrb-line);
	border-radius: var(--ocrb-radius);
	overflow: hidden;
	background: #fff;
}

/* Anything inside the box gives up its own frame -- two nested borders look like a mistake. */
.ocrb-box > .srpp-price-table,
.ocrb-box > .ocrb-deals,
.ocrb-box > .ocrb-basket,
.ocrb-box > .ocrb-code,
.ocrb-box > .ocrb-verdict {
	border: none;
	border-radius: 0;
	margin: 0;
}

/* Add to build --------------------------------------------------------- */

/*
 * The counterpart to Buy: same row, same size, outlined instead of filled. Buying leaves the site,
 * building keeps the reader here -- the second one has to be visible without competing with the
 * first, which is why it is an outline and not a second green slab.
 */
.ocrb .ocrb-build {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--ocrb-green);
	border-radius: var(--ocrb-radius-sm);
	background: #fff;
	color: var(--ocrb-green-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ocrb .ocrb-build:hover {
	background: var(--ocrb-green-soft);
	color: var(--ocrb-green-dark);
}

.ocrb .ocrb-build--small {
	margin-left: 8px;
	padding: 5px 10px;
	font-size: 12px;
}

.ocrb-build__plus {
	font-size: 1.1em;
	line-height: 1;
}

/* In a basket line it sits beside the product name, so it reads as part of the label. */
.ocrb-basket__label .ocrb-build--small {
	text-transform: none;
	letter-spacing: 0;
}

.ocrb-box__foot--split {
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

/* The disclosure reads as a footnote; the action is the thing you can press. */
.ocrb-box__note {
	color: var(--ocrb-muted);
	font-size: 12px;
	text-decoration: none;
	border-bottom: 1px solid var(--ocrb-line);
}

a.ocrb-box__note:hover {
	color: var(--ocrb-ink);
}

/* The chart card already draws its own frame; inside our box it must not draw a second one. */
.ocrb--price-chart .ocrb-box > .srpp-price-card {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.ocrb-box__foot {
	display: flex;
	justify-content: flex-end;
	padding: 9px 16px;
	border-top: 1px solid var(--ocrb-line);
	background: #fbfbfc;
	font-size: 12px;
	letter-spacing: 0.02em;
}

.ocrb-box__foot a {
	color: var(--ocrb-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--ocrb-line);
}

.ocrb-box__foot a:hover {
	color: var(--ocrb-ink);
	border-bottom-color: currentColor;
}

/* The product page uses a near-black header bar. In an article it shouts; a quiet label does the
   same job when the table is only three columns wide. */
.ocrb .srpp-price-table thead th {
	background: #fff;
	color: var(--ocrb-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 18px 10px;
	border-bottom: 1px solid var(--ocrb-line);
}

.ocrb .srpp-price-table tbody td,
.ocrb .ocrb-spec-table td,
.ocrb .ocrb-spec-table th {
	padding: 14px 18px;
	border-top: 1px solid var(--ocrb-line);
	font-family: inherit;
	vertical-align: middle;
}

.ocrb .ocrb-spec-table tr:first-child td,
.ocrb .ocrb-spec-table tr:first-child th {
	border-top: none;
}

.ocrb .ocrb-spec-table th {
	width: 42%;
	text-align: left;
	font-weight: 500;
	color: var(--ocrb-muted);
}

.ocrb .srpp-price-table .shop-name-text {
	font-weight: 600;
	color: var(--ocrb-ink);
}

/* Prices line up in a column, so they get lining figures of a fixed width -- a proportional 1
   makes a price list look ragged even when the numbers are right. */
.ocrb .srpp-price-table .shop-price,
.ocrb .ocrb-deal__price,
.ocrb .ocrb-deal__was {
	font-family: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ocrb-ink);
}

.ocrb .srpp-price-table .shop-price-usd {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ocrb-muted);
}

.ocrb .srpp-price-table tr.lowest-price td {
	background: var(--ocrb-green-soft);
}

.ocrb .srpp-price-table tr.lowest-price td.shop-name {
	box-shadow: inset 3px 0 0 var(--ocrb-green);
}

.ocrb .srpp-price-table .lowest-badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ocrb-green);
	color: #fff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Buttons: the site's own -- green, uppercase, 8px, from the Discount Codes button in the header. */
.ocrb .srpp-btn,
.ocrb .srpp-cta-button,
.ocrb .ocrb-deal__go,
.ocrb .ocrb-code__link {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--ocrb-radius-sm);
	background: var(--ocrb-green);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	transition: background 0.15s ease;
}

.ocrb .srpp-btn:hover,
.ocrb .srpp-cta-button:hover,
.ocrb .ocrb-deal__go:hover,
.ocrb .ocrb-code__link:hover {
	background: var(--ocrb-green-dark);
	color: #fff;
}

/*
 * One filled button per table. Eight shops with eight solid green buttons is a wall of calls to
 * action that reads as an ad break; the cheapest row is the recommendation, so it gets the filled
 * button and the rest step back to outlines. They are equally clickable, just not equally loud.
 */
.ocrb .srpp-price-table tr:not(.lowest-price) .srpp-btn {
	background: #fff;
	color: var(--ocrb-green-dark);
	border: 1px solid var(--ocrb-line);
}

.ocrb .srpp-price-table tr:not(.lowest-price) .srpp-btn:hover {
	background: var(--ocrb-green-soft);
	color: var(--ocrb-green-dark);
	border-color: var(--ocrb-green);
}

/* Price history card --------------------------------------------------- */

.ocrb--price-chart .srpp-price-card {
	margin: 0;
	border: 1px solid var(--ocrb-line);
	border-radius: var(--ocrb-radius);
	box-shadow: none;
	padding: 24px;
}

.ocrb--price-chart .srpp-price-card > h2 {
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ocrb-ink);
}

.ocrb--price-chart .srpp-price-headline strong {
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Head-to-head ---------------------------------------------------------- */

/*
 * The product the article is about is stated once, at the top. Repeating it inside every card --
 * same picture, same price, four times -- filled the block with the one thing the reader already
 * knows and pushed the rivals off the screen.
 */
.ocrb-vs-self {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--ocrb-line);
	border-radius: var(--ocrb-radius) var(--ocrb-radius) 0 0;
	border-bottom: none;
	background: var(--ocrb-green-soft);
}

.ocrb-vs-grid {
	display: grid;
	border: 1px solid var(--ocrb-line);
	border-radius: 0 0 var(--ocrb-radius) var(--ocrb-radius);
	overflow: hidden;
	background: #fff;
}

.ocrb-vs {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-top: 1px solid var(--ocrb-line);
	color: var(--ocrb-ink);
	transition: background 0.15s ease;
}

.ocrb-vs:first-child {
	border-top: none;
}

.ocrb-vs:hover {
	background: #fafafb;
}

/* The card is one link, so the theme underlines everything inside it unless told otherwise. */
.ocrb .ocrb-vs,
.ocrb .ocrb-vs:hover,
.ocrb .ocrb-vs span {
	text-decoration: none;
}

.ocrb-vs__side {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ocrb-vs__shot {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 64px;
	height: 48px;
}

.ocrb-vs__side--self .ocrb-vs__shot {
	width: 76px;
	height: 56px;
}

/* Shop photography arrives at every size and background; contain keeps the product intact
   instead of cropping a wheelbase in half. */
.ocrb-vs__shot img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ocrb-vs__name {
	font-weight: 600;
	line-height: 1.3;
}

.ocrb-vs__side--self .ocrb-vs__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ocrb-vs__price {
	margin-left: auto;
	padding-left: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ocrb-vs__mark {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ocrb-green-soft);
	color: var(--ocrb-green-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ocrb-vs__cta {
	color: var(--ocrb-green-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ocrb-vs__cta::after {
	content: " \2192";
}



/* Live deals ----------------------------------------------------------- */

.ocrb-deals {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.ocrb-deal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var(--ocrb-line);
	background: #fff;
}

.ocrb-deal:first-child {
	border-top: none;
}

.ocrb-deal__shop {
	font-weight: 600;
}

.ocrb-deal__was {
	font-weight: 400;
	color: var(--ocrb-muted);
}

.ocrb-deal__off {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ocrb-green-soft);
	color: var(--ocrb-green-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ocrb-deal__go {
	margin-left: auto;
}

/* Discount code -------------------------------------------------------- */

.ocrb-code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--ocrb-line);
	border-radius: var(--ocrb-radius);
	background: #fff;
}

.ocrb-code__brand {
	font-weight: 700;
}

.ocrb-code__discount {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ocrb-green-soft);
	color: var(--ocrb-green-dark);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* The code is the thing to copy, so it looks like a coupon rather than a button: dashed, and it
   only fills in on hover. The solid green button next to it is the one that leads to the shop. */
.ocrb-code__copy {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	border: 1px dashed var(--ocrb-green);
	border-radius: var(--ocrb-radius-sm);
	background: #fff;
	color: var(--ocrb-ink);
	font: inherit;
	cursor: pointer;
}

.ocrb-code__copy:hover {
	background: var(--ocrb-green-soft);
}

.ocrb-code__value {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ocrb-code__hint {
	font-size: 13px;
	color: var(--ocrb-muted);
}

.ocrb-code__copy.is-copied {
	border-style: solid;
	border-color: var(--ocrb-green);
	color: var(--ocrb-green-dark);
}

.ocrb-code__link {
	margin-left: auto;
}

/* Hand-written tables -------------------------------------------------- */

/*
 * For a plain table a writer builds themselves -- a compatibility matrix, a "which model has what"
 * grid. Add `ocrb-table` as the block's CSS class and it inherits the same hairlines, the same
 * quiet uppercase header and the same radius as the rendered items, instead of sitting in the
 * article looking like it came from somewhere else.
 */
.wp-block-table.ocrb-table table,
table.ocrb-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e4e5e9;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
}

.wp-block-table.ocrb-table thead th,
table.ocrb-table thead th {
	background: #fff;
	color: #6b6e78;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 18px 10px;
	border: none;
	border-bottom: 1px solid #e4e5e9;
}

.wp-block-table.ocrb-table tbody td,
table.ocrb-table tbody td {
	padding: 14px 18px;
	border: none;
	border-top: 1px solid #e4e5e9;
	vertical-align: top;
}

/* First column is the question ("your wheel base"), second is the answer. */
.wp-block-table.ocrb-table tbody td:first-child,
table.ocrb-table tbody td:first-child {
	font-weight: 600;
	color: #44464c;
}

.wp-block-table.ocrb-table tbody tr:first-child td,
table.ocrb-table tbody tr:first-child td {
	border-top: none;
}

.wp-block-table.ocrb-table figcaption {
	margin-top: 8px;
	font-size: 15px;
	color: #6b6e78;
}

/* Inline price token --------------------------------------------------- */

/*
 * Sits inside a sentence, so it must not look like a widget. The dotted underline is the only
 * signal that this number maintains itself; everything else is the paragraph's own type.
 */
.ocrb-price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px dotted rgba(28, 142, 77, 0.5);
	white-space: nowrap;
}

.ocrb-price__shop {
	font-weight: 400;
	color: #6b6e78;
}

/* Buy now or wait ------------------------------------------------------ */

.ocrb-timing {
	padding: 16px 20px;
	border-left: 3px solid #d3d5da;
	border-radius: 0 8px 8px 0;
	background: #f7f7f9;
}

.ocrb-timing--good {
	border-left-color: #1c8e4d;
	background: rgba(28, 142, 77, 0.08);
}

.ocrb-timing--warn {
	border-left-color: #9a5b00;
	background: rgba(154, 91, 0, 0.08);
}

.ocrb-timing__headline {
	margin: 0;
	font-weight: 700;
}

.ocrb-timing__detail {
	margin: 4px 0 0;
	font-size: 16px;
	color: #6b6e78;
}

/* Verdict card --------------------------------------------------------- */

.ocrb-verdict {
	border: 1px solid #e4e5e9;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

.ocrb-verdict__head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 24px;
}

.ocrb-verdict__score {
	display: flex;
	align-items: baseline;
	gap: 2px;
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(28, 142, 77, 0.12);
	color: #166534;
	font-variant-numeric: tabular-nums;
}

.ocrb-verdict__score strong {
	font-size: 32px;
	line-height: 1;
	font-weight: 700;
}

.ocrb-verdict__outof {
	font-size: 15px;
	font-weight: 600;
	opacity: 0.7;
}

.ocrb-verdict__lines {
	display: grid;
	gap: 4px;
}

.ocrb-verdict__product {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6e78;
}

.ocrb-verdict__sentence {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
}

.ocrb-verdict__best {
	margin: 2px 0 0;
	font-size: 16px;
	color: #6b6e78;
}

.ocrb-verdict__best span {
	font-weight: 700;
	color: #44464c;
}

.ocrb-verdict__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid #e4e5e9;
	background: #fafafb;
}

.ocrb-verdict__price {
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ocrb-verdict__shop {
	color: #6b6e78;
}

.ocrb-verdict__buy .srpp-btn {
	margin-left: auto;
}

.ocrb-verdict__coverage {
	margin: 0;
	padding: 10px 24px 16px;
	background: #fafafb;
	font-size: 14px;
	color: #6b6e78;
}

/* Line-up table -------------------------------------------------------- */

.ocrb-lineup__note {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 400;
	color: #6b6e78;
}

.ocrb .ocrb-lineup .ocrb-lineup__gap {
	font-variant-numeric: tabular-nums;
	color: #6b6e78;
	white-space: nowrap;
}

/* Keeps "at 6sigma Racing" on one line instead of stacking under the price. */
.ocrb .ocrb-lineup td.shop-price,
.ocrb .ocrb-lineup th:nth-child(2) {
	min-width: 168px;
}

/* Deal verdict chips --------------------------------------------------- */

/*
 * The chip that tests a shop's own sale claim against the archive. Muted on purpose -- it is
 * evidence, not a badge, and the "not a discount" case must not read as an error state.
 */
.ocrb-chip {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.ocrb-chip--good {
	background: rgba(28, 142, 77, 0.12);
	color: #166534;
}

.ocrb-chip--warn {
	background: rgba(154, 91, 0, 0.1);
	color: #8a5200;
}

/* What this setup costs ------------------------------------------------- */

/*
 * Product (with its shop underneath), price, action -- the same three columns as the shop table,
 * so a reader who has just read one recognises the other. The earlier version hung the button off
 * the label and pushed the shop onto its own line, which left a wide empty middle and read as
 * half-finished.
 */
.ocrb-basket {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ocrb-basket__line,
.ocrb-basket__total {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 4px 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--ocrb-line);
}

.ocrb-basket__line:first-child {
	border-top: none;
}

.ocrb-basket__product {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ocrb-basket__label {
	font-weight: 600;
	line-height: 1.3;
}

.ocrb-basket__shop {
	font-size: 13px;
	color: var(--ocrb-muted);
}

.ocrb-basket__price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ocrb-basket__price.is-missing {
	font-weight: 400;
	font-size: 14px;
	color: var(--ocrb-muted);
}

.ocrb-basket__action {
	display: flex;
	justify-content: flex-end;
	min-width: 92px;
}

/* The total is the line the reader came for, so it carries the accent and the biggest number. */
.ocrb-basket__total {
	background: var(--ocrb-green-soft);
	border-top: 1px solid var(--ocrb-line);
}

.ocrb-basket__total .ocrb-basket__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 14px;
}

.ocrb-basket__total .ocrb-basket__price {
	font-size: 22px;
	font-weight: 700;
}

.ocrb-basket__note {
	margin: 0;
	padding: 12px 18px;
	border-top: 1px solid var(--ocrb-line);
	font-size: 14px;
	color: var(--ocrb-muted);
}

/* Buy and Build, side by side, never stacked ---------------------------- */

.ocrb-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	white-space: nowrap;
}

.ocrb-actions .ocrb-build--small {
	margin-left: 0;
}

/* Reviewed by ----------------------------------------------------------- */

/*
 * The provenance card: who tested it, for how long, on what. Quiet by design -- it is context for
 * the article, not a headline -- but framed, so a reader can tell at a glance that this is the
 * site speaking about its own method rather than another paragraph of the review.
 */
.ocrb-tested {
	padding: 18px 20px;
	border: 1px solid var(--ocrb-line);
	border-radius: var(--ocrb-radius);
	background: #fafafb;
}

.ocrb-tested__who {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.ocrb-tested__who span {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ocrb-muted);
}

.ocrb-tested__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ocrb-line);
	list-style: none;
	font-size: 15px;
	color: var(--ocrb-ink);
}

.ocrb-tested__facts span {
	font-weight: 700;
	color: var(--ocrb-muted);
}

.ocrb-tested__disclosure {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ocrb-muted);
}

/* Empty states are editor-only; readers never receive this markup -------- */

.ocrb-empty {
	margin: 24px 0;
	padding: 14px 18px;
	border: 1px dashed #c9cbd2;
	border-radius: var(--ocrb-radius-sm);
	background: #f7f7f9;
	color: #55575f;
	font-size: 15px;
}

.ocrb-empty__label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.ocrb-empty__detail {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}

/* ======================================================================== *
 * MOBILE
 *
 * Not a set of patches on the desktop layout: at 375px the constraint is the
 * opposite way round -- almost no width, effectively unlimited height. So every
 * item is re-laid out down the page instead of across it, and nothing is
 * dropped: a phone reader gets the same shops, the same prices, the same
 * evidence, just stacked.
 *
 * Rules that hold everywhere below: one column, labels above values, prices
 * never shrink (they are the reason the item exists), and anything tappable is
 * at least 44px tall and full width where there is nothing to sit beside it.
 * ======================================================================== */

@media (max-width: 640px) {
	.ocrb {
		margin: 28px 0;
	}

	.ocrb .ocrb__heading,
	.ocrb h2.ocrb__heading,
	.ocrb h3.ocrb__heading,
	.ocrb h4.ocrb__heading {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.ocrb-box {
		border-radius: 12px;
	}

	/* Tappables -------------------------------------------------------- */

	.ocrb .srpp-btn,
	.ocrb .srpp-cta-button,
	.ocrb .ocrb-deal__go,
	.ocrb .ocrb-code__link,
	.ocrb .ocrb-build {
		min-height: 44px;
		padding: 11px 16px;
		justify-content: center;
	}

	/* Footer: the disclosure is a footnote, the action is a target ------ */

	.ocrb-box__foot,
	.ocrb-box__foot--split {
		display: grid;
		/* Both are flex rows on desktop and end-aligned; as a grid that alignment survives as a
		   single content-width column pinned right, which reads as a mistake. One full-width column. */
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		gap: 10px;
		justify-items: stretch;
		padding: 12px 14px;
	}

	/* Both footer shapes carry this link -- the plain one and the split one -- so it is targeted by
	   position rather than by class, and gets a thumb-sized row either way. */
	.ocrb-box__foot a,
	.ocrb-box__note {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		font-size: 12px;
		text-align: center;
		/* Desktop marks the link with a bottom border on an inline element. Stretched to the full
		   footer row that border becomes a rule across the card, so the mark moves to the text -- and
		   only where there is something to press: the same slot also holds a plain sentence. */
		border-bottom: none;
	}

	.ocrb-box__foot a,
	a.ocrb-box__note {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.ocrb-box__foot .ocrb-build,
	.ocrb-box__foot--split .ocrb-build {
		width: 100%;
	}

	/* Reviewed by ------------------------------------------------------ */

	.ocrb-tested {
		padding: 16px;
	}

	.ocrb-tested__facts {
		display: grid;
		gap: 10px;
		margin-top: 12px;
		padding-top: 12px;
	}

	/* Label above value: side by side, both wrap and neither reads. */
	.ocrb-tested__facts li {
		display: grid;
		gap: 1px;
		font-size: 15px;
	}

	.ocrb-tested__facts span {
		font-size: 12px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/* Verdict ---------------------------------------------------------- */

	.ocrb-verdict {
		padding: 16px;
	}

	.ocrb-verdict__buy {
		display: grid;
		/* Without an explicit track the single implicit column takes the width of the widest line --
		   here the shop name -- and the Buy button stops short of the card edge. */
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--ocrb-line);
		text-align: left;
	}

	.ocrb-verdict__price {
		font-size: 26px;
	}

	.ocrb-verdict__buy .srpp-btn {
		width: 100%;
	}

	/* Shop list and line-up: tables become cards ------------------------ */

	/*
	 * A table keeps its content-driven minimum width even after display:block, which is what kept
	 * the shop list 400px wide inside a 313px box. Pinning the width and clearing the minimum is
	 * what actually turns it into a stack of cards.
	 */
	.ocrb .srpp-price-table,
	.ocrb .srpp-price-table tbody,
	.ocrb .srpp-price-table tr,
	.ocrb .srpp-price-table td {
		display: block;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.ocrb .srpp-price-table thead {
		display: none; /* two labels for two obvious values is noise on a phone */
	}

	.ocrb .srpp-price-table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 8px 12px;
		padding: 12px 14px;
		border-top: 1px solid var(--ocrb-line);
	}

	.ocrb .srpp-price-table tr:first-child {
		border-top: none;
	}

	/* Cells keep the hairline they need in a real table; inside a card it draws a line through the
	   middle of the shop name. */
	.ocrb .srpp-price-table td,
	.ocrb .srpp-price-table tbody td {
		padding: 0;
		border: none;
		background: transparent;
		box-shadow: none;
	}

	/* Two lines per shop: who, then what it costs with the button beside the number -- the two
	   things being compared stay on one eye line, and a row is ~90px instead of 150. */
	.ocrb .srpp-price-table td.shop-name {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 16px;
		line-height: 1.3;
	}

	.ocrb .srpp-price-table td.shop-price {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		font-size: 19px;
	}

	.ocrb .srpp-price-table td.shop-action {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}

	.ocrb .srpp-price-table td.shop-action .srpp-btn {
		min-width: 92px;
	}

	.ocrb .srpp-price-table tr.lowest-price {
		background: var(--ocrb-green-soft);
		box-shadow: inset 3px 0 0 var(--ocrb-green);
		padding-left: 20px; /* clear of the accent bar, which otherwise sits on the first letter */
	}

	/* td.shop-name carries the accent on desktop and outranks a plain td selector here, so the
	   cell has to be named to give the bar back to the row. */
	.ocrb .srpp-price-table tr.lowest-price td,
	.ocrb .srpp-price-table tr.lowest-price td.shop-name {
		background: transparent;
		box-shadow: none;
	}

	.ocrb .srpp-price-table .lowest-badge {
		margin-left: 8px;
	}

	.ocrb .ocrb-chip {
		display: block;
		margin: 4px 0 0;
		font-size: 12px;
	}

	/*
	 * The line-up is a comparison, not a price list: each product becomes a card with its name, the
	 * one-line reason, then price, then the two actions. Selectors are one class deeper than the
	 * shop-table rules above on purpose -- otherwise those win and the note and the gap end up
	 * dangling under a two-column layout that was never meant for them.
	 */
	.ocrb .ocrb-lineup tr {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 16px 14px;
	}

	.ocrb .ocrb-lineup td.shop-name,
	.ocrb .ocrb-lineup td.shop-price,
	.ocrb .ocrb-lineup td.ocrb-lineup__gap,
	.ocrb .ocrb-lineup td.shop-action {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		align-self: auto;
	}

	.ocrb .ocrb-lineup td.shop-price {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 4px 10px;
		font-size: 22px;
	}

	/* The shop belongs beside the number, not under it: one line, two facts. */
	.ocrb .ocrb-lineup td.shop-price .shop-price-usd {
		display: inline;
		margin: 0;
		font-size: 14px;
	}

	.ocrb-lineup__note {
		display: block;
		margin-top: 2px;
		font-size: 14px;
	}

	.ocrb-lineup td.ocrb-lineup__gap {
		font-size: 14px;
		color: var(--ocrb-muted);
	}

	/* "+$23.95" under a hidden column header is a number without a question. */
	.ocrb-lineup td.ocrb-lineup__gap[data-ocrb-gap="delta"]::before {
		content: "Difference: ";
	}

	.ocrb-lineup .ocrb-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
		margin-top: 4px;
	}

	.ocrb-lineup .ocrb-actions .srpp-btn,
	.ocrb-lineup .ocrb-actions .ocrb-build {
		width: 100%;
		font-size: 13px;
	}

	/* Specifications: label above value -------------------------------- */

	.ocrb .ocrb-spec-table,
	.ocrb .ocrb-spec-table tbody,
	.ocrb .ocrb-spec-table tr,
	.ocrb .ocrb-spec-table th,
	.ocrb .ocrb-spec-table td {
		display: block;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	/*
	 * Two spec cells per row. Ten single-file rows for values as short as "12 Nm" made a column of
	 * mostly empty space that the reader has to scroll past; paired, the whole sheet is five rows
	 * and still one glance per fact.
	 */
	.ocrb .ocrb-spec-table tbody {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.ocrb .ocrb-spec-table tr {
		padding: 12px 14px;
		border-top: 1px solid var(--ocrb-line);
	}

	/* The two cells of the top row, and the divider between the columns. */
	.ocrb .ocrb-spec-table tr:nth-child(-n + 2) {
		border-top: none;
	}

	.ocrb .ocrb-spec-table tr:nth-child(odd) {
		border-right: 1px solid var(--ocrb-line);
	}

	.ocrb .ocrb-spec-table td,
	.ocrb .ocrb-spec-table th {
		border: none;
	}

	.ocrb .ocrb-spec-table th {
		padding: 0;
		border: none;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ocrb-muted);
	}

	.ocrb .ocrb-spec-table td {
		padding: 2px 0 0;
		border: none;
		font-size: 16px;
	}

	/* Deals ------------------------------------------------------------ */

	/*
	 * Shop over one money line over the button. Wrapping flex items put the percentage on a row of
	 * its own, where the pill stretched across two thirds of the screen and looked like a broken
	 * progress bar; placing every part explicitly keeps it hugging its own text.
	 */
	.ocrb-deal {
		display: grid;
		grid-template-columns: auto auto 1fr;
		align-items: baseline;
		gap: 6px 10px;
		padding: 14px;
	}

	.ocrb-deal__shop {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 16px;
	}

	.ocrb-deal__price {
		grid-column: 1;
		grid-row: 2;
		font-size: 18px;
	}

	.ocrb-deal__was {
		grid-column: 2;
		grid-row: 2;
	}

	.ocrb-deal__off {
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
	}

	.ocrb-deal__go {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-left: 0;
		width: 100%;
		margin-top: 6px;
	}

	/* What this setup costs -------------------------------------------- */

	/*
	 * Name and shop on the left, price and its button stacked on the right. A full-width button per
	 * line turned a three-item basket into three green slabs and buried the total, which is the one
	 * number the item exists to show.
	 */
	.ocrb-basket__line,
	.ocrb-basket__total {
		grid-template-columns: 1fr auto;
		gap: 6px 12px;
		padding: 12px 14px;
	}

	.ocrb-basket__product {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.ocrb-basket__price {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		font-size: 17px;
	}

	.ocrb-basket__action {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		min-width: 0;
	}

	.ocrb-basket__action .ocrb-build {
		margin-left: 0;
		min-height: 36px;
		padding: 7px 12px;
		font-size: 12px;
	}

	.ocrb-basket__total .ocrb-basket__price {
		font-size: 24px;
	}

	.ocrb-basket__total .ocrb-basket__action {
		display: none; /* nothing to press on the total line */
	}

	/* Head to head ----------------------------------------------------- */

	.ocrb-vs-self {
		padding: 12px 14px;
	}

	/*
	 * The desktop card reads left to right: versus mark, rival, price, link. Narrow, that becomes a
	 * column of four stranded lines with a fat round chip eating a third of the width. So the card
	 * turns into a header row (what this is / what it does) over one product row -- the whole card is
	 * a link anyway, which frees the "Compare" cue to sit wherever it reads best.
	 */
	.ocrb-vs {
		grid-template-columns: auto 1fr;
		gap: 10px 12px;
		padding: 14px;
	}

	.ocrb-vs__mark {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.ocrb-vs__cta {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		font-size: 13px;
	}

	.ocrb-vs__side--rival {
		grid-column: 1 / -1;
		grid-row: 2;
		display: grid;
		grid-template-columns: 56px 1fr;
		align-items: center;
		gap: 4px 12px;
	}

	.ocrb-vs__shot {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 56px;
		height: 48px;
	}

	.ocrb-vs__name {
		grid-column: 2;
		grid-row: 1;
		font-size: 15px;
	}

	.ocrb-vs__price {
		grid-column: 2;
		grid-row: 2;
		margin-left: 0;
		padding-left: 0;
		font-size: 15px;
	}

	/* No price tracked for this rival: the name should then use the full height of the row. */
	.ocrb-vs__side--rival .ocrb-vs__name:last-child {
		grid-row: 1 / span 2;
	}

	/* Badges and the versus mark: 10 and 11px are unreadable at arm's length. */
	.ocrb-vs__mark,
	.ocrb .srpp-price-table .lowest-badge {
		font-size: 12px;
		padding: 4px 10px;
	}

	/* Discount code ---------------------------------------------------- */

	/*
	 * Brand and saving on one line, then the code, then the way out. Stacked full width, the "3% OFF"
	 * pill became a green bar as wide as the buttons under it and read like a third control.
	 */
	.ocrb-code {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 10px 12px;
		padding: 14px;
	}

	.ocrb-code__brand {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		font-size: 16px;
	}

	.ocrb-code__discount {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
	}

	.ocrb-code__copy,
	.ocrb-code__link {
		grid-column: 1 / -1;
	}

	.ocrb-code__copy {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}

	.ocrb-code__link {
		margin-left: 0;
		width: 100%;
	}

	/* Price history: SRPP's own card, given room to breathe ------------- */

	.ocrb--price-chart .srpp-price-card {
		padding: 16px 14px;
	}

	.ocrb--price-chart .srpp-price-headline strong {
		font-size: 24px;
	}

	.ocrb--price-chart .srpp-price-chart {
		height: 190px;
	}

	/* The range buttons are the one control on the card, so they become a
	   full-width segmented row rather than four small targets. */
	.ocrb--price-chart .srpp-price-ranges {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
		margin: 12px 0;
	}

	.ocrb--price-chart .srpp-price-range {
		min-height: 44px;
		font-size: 14px;
	}

	/* Six figures side by side is unreadable at this width; two columns with the
	   label above the number keeps every one of them. */
	.ocrb--price-chart .srpp-price-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 14px;
	}

	.ocrb--price-chart .srpp-price-fact {
		font-size: 15px;
	}

	/* The figures under the chart are a definition list: the term is the label, the definition is
	   the number. Ten-pixel labels are unreadable on a phone. */
	.ocrb--price-chart .srpp-price-facts dt {
		font-size: 12px;
		letter-spacing: 0.06em;
	}

	.ocrb--price-chart .srpp-price-facts dd {
		margin-left: 0;
		font-size: 16px;
	}

	.ocrb--price-chart .srpp-price-facts,
	.ocrb--price-chart .srpp-price-foot,
	.ocrb--price-chart .srpp-price-fact-hint {
		font-size: 13px;
	}

	/* Editor niceties --------------------------------------------------- */

	.ocrb-empty {
		font-size: 14px;
	}
}

/* Genuinely tiny screens only: at 375 two buttons still get ~140px each. */
@media (max-width: 340px) {
	.ocrb-lineup .ocrb-actions {
		grid-template-columns: 1fr;
	}

	.ocrb-vs__side--rival {
		grid-template-columns: 44px 1fr;
	}

	.ocrb--price-chart .srpp-price-facts {
		grid-template-columns: 1fr;
	}
}