/**
 * Vedera Content Blocks — frontend + shared styles.
 *
 * DESIGN-TOKEN CONTRACT
 * ---------------------
 * This file contains NO literal design values in component rules. Every colour,
 * font and spacing value is read from a CSS custom property defined in the token
 * layer below. Each token maps to a theme.json preset (`--wp--preset--*` /
 * `--wp--custom--*`) with a sensible fallback, so the plugin adopts the active
 * theme's design system automatically and still looks right on a theme that
 * defines none of these tokens.
 *
 * To re-skin on any site, define the matching preset in the theme's theme.json
 * (or override any `--vcb-*` token in the theme stylesheet).
 */

/* ------------------------------------------------------------------ *
 * TOKEN LAYER — the only place fallback literals are allowed to live. *
 * ------------------------------------------------------------------ */
:root {
	/* Colour — mapped to common theme presets, else graceful fallback. */
	--vcb-accent:        var(--wp--preset--color--primary, #2f6bff);
	--vcb-accent-ink:    var(--wp--preset--color--primary, #2453cc);
	--vcb-on-accent:     var(--wp--preset--color--base, #ffffff);
	--vcb-ink:           var(--wp--preset--color--contrast, #16181d);
	--vcb-body:          var(--wp--preset--color--vcb-body, #3b4048);
	--vcb-muted:         var(--wp--preset--color--vcb-muted, #8a909c);
	--vcb-faint:         var(--wp--preset--color--vcb-faint, #a0a6b0);
	--vcb-surface:       var(--wp--preset--color--base, #ffffff);
	--vcb-surface-2:     var(--wp--preset--color--vcb-surface-2, #f7f8fa);
	--vcb-surface-3:     var(--wp--preset--color--vcb-surface-3, #eef0f3);
	--vcb-border:        var(--wp--preset--color--vcb-border, #e7e9ee);
	--vcb-border-2:      var(--wp--preset--color--vcb-border-2, #f0f2f5);
	--vcb-star:          var(--wp--preset--color--vcb-star, #f5a623);
	--vcb-pro:           var(--wp--preset--color--vcb-pro, #12855a);
	--vcb-pro-ink:       var(--wp--preset--color--vcb-pro-ink, #0e7150);
	--vcb-pro-bg:        var(--wp--preset--color--vcb-pro-bg, #f2faf6);
	--vcb-pro-border:    var(--wp--preset--color--vcb-pro-border, #cfe9dc);
	--vcb-con:           var(--wp--preset--color--vcb-con, #d23f3f);
	--vcb-con-ink:       var(--wp--preset--color--vcb-con-ink, #b73535);
	--vcb-con-bg:        var(--wp--preset--color--vcb-con-bg, #fdf4f4);
	--vcb-con-border:    var(--wp--preset--color--vcb-con-border, #f0d3d3);
	--vcb-info-bg:       var(--wp--preset--color--vcb-info-bg, #f3f6ff);
	--vcb-info-border:   var(--wp--preset--color--vcb-info-border, #d9e3ff);
	--vcb-dark:          var(--wp--preset--color--contrast, #16181d);
	--vcb-on-dark:       var(--wp--preset--color--base, #ffffff);
	--vcb-on-dark-muted: var(--wp--preset--color--vcb-on-dark-muted, #a7adba);

	/* Typography — theme font families, else inherit the theme default. */
	--vcb-font-heading: var(--wp--preset--font-family--heading, inherit);
	--vcb-font-body:    var(--wp--preset--font-family--body, inherit);
	--vcb-font-mono:    var(--wp--preset--font-family--monospace, ui-monospace, SFMono-Regular, Menlo, monospace);

	/* Font sizes. */
	--vcb-fs-eyebrow: var(--wp--custom--vcb--fs-eyebrow, 0.6875rem);
	--vcb-fs-small:   var(--wp--custom--vcb--fs-small, 0.75rem);
	--vcb-fs-meta:    var(--wp--custom--vcb--fs-meta, 0.8125rem);
	--vcb-fs-base:    var(--wp--custom--vcb--fs-base, 0.9375rem);
	--vcb-fs-dek:     var(--wp--custom--vcb--fs-dek, 1.1875rem);
	--vcb-fs-h3:      var(--wp--custom--vcb--fs-h3, 1.1875rem);
	--vcb-fs-h2:      var(--wp--custom--vcb--fs-h2, 1.625rem);
	--vcb-fs-h1:      var(--wp--custom--vcb--fs-h1, clamp(1.7rem, 1.1rem + 2.6vw, 2.875rem));

	/* Spacing scale. */
	--vcb-sp-1:  var(--wp--custom--vcb--sp-1, 0.25rem);
	--vcb-sp-2:  var(--wp--custom--vcb--sp-2, 0.5rem);
	--vcb-sp-3:  var(--wp--custom--vcb--sp-3, 0.75rem);
	--vcb-sp-4:  var(--wp--custom--vcb--sp-4, 1rem);
	--vcb-sp-5:  var(--wp--custom--vcb--sp-5, 1.25rem);
	--vcb-sp-6:  var(--wp--custom--vcb--sp-6, 1.5rem);
	--vcb-sp-7:  var(--wp--custom--vcb--sp-7, 2rem);
	--vcb-sp-8:  var(--wp--custom--vcb--sp-8, 2.75rem);

	/* Radii + layout. */
	--vcb-radius-s:  var(--wp--custom--vcb--radius-s, 8px);
	--vcb-radius-m:  var(--wp--custom--vcb--radius-m, 13px);
	--vcb-radius-l:  var(--wp--custom--vcb--radius-l, 16px);
	--vcb-maxw:      var(--wp--custom--vcb--maxw, 1080px);
	--vcb-aside-w:   var(--wp--custom--vcb--aside-w, 300px);
	--vcb-header-h:  var(--wp--custom--vcb--header-h, 60px);
	--vcb-shadow-cta: 0 8px 18px -6px color-mix(in srgb, var(--vcb-accent) 55%, transparent);
	--vcb-shadow-card: 0 14px 34px -22px color-mix(in srgb, var(--vcb-ink) 40%, transparent);
}

/* ------------------------------------------------------------------ *
 * PRIMITIVES                                                          *
 * ------------------------------------------------------------------ */
.vcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vcb-sp-1);
	border: 0;
	border-radius: var(--vcb-radius-s);
	background: var(--vcb-accent);
	color: var(--vcb-on-accent);
	font-family: var(--vcb-font-body);
	font-weight: 600;
	font-size: var(--vcb-fs-meta);
	line-height: 1;
	padding: var(--vcb-sp-3) var(--vcb-sp-4);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, opacity .15s ease;
}
.vcb-btn:hover { background: var(--vcb-accent-ink); color: var(--vcb-on-accent); }
.vcb-btn--lg { font-size: var(--vcb-fs-base); padding: var(--vcb-sp-4) var(--vcb-sp-5); border-radius: var(--vcb-radius-m); box-shadow: var(--vcb-shadow-cta); }
.vcb-btn--block { width: 100%; box-shadow: var(--vcb-shadow-cta); padding: var(--vcb-sp-4); border-radius: var(--vcb-radius-m); }

.vcb-eyebrow {
	margin: 0 0 var(--vcb-sp-2);
	font-family: var(--vcb-font-heading);
	font-weight: 600;
	font-size: var(--vcb-fs-eyebrow);
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--vcb-accent);
}

.vcb-h2 {
	margin: 0 0 var(--vcb-sp-4);
	font-family: var(--vcb-font-heading);
	font-weight: 700;
	font-size: var(--vcb-fs-h2);
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--vcb-ink);
}
.vcb-h3 {
	margin: var(--vcb-sp-6) 0 var(--vcb-sp-3);
	font-family: var(--vcb-font-heading);
	font-weight: 600;
	font-size: var(--vcb-fs-h3);
	line-height: 1.25;
	color: var(--vcb-ink);
}

.vcb-stars { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.vcb-stars__track { color: var(--vcb-surface-3); }
.vcb-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--vcb-star); white-space: nowrap; }

.vcb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--vcb-muted);
	font-family: var(--vcb-font-mono);
	font-size: var(--vcb-fs-small);
	background: repeating-linear-gradient(45deg, var(--vcb-surface-3) 0 12px, var(--vcb-surface-2) 12px 24px);
	border: 1px solid var(--vcb-border);
	border-radius: var(--vcb-radius-m);
	padding: var(--vcb-sp-4);
}
.vcb-placeholder--hero { aspect-ratio: 4 / 3; }
.vcb-placeholder--rows { min-height: 72px; }

/* ------------------------------------------------------------------ *
 * STICKY HEADER + PROGRESS + JUMP NAV                                 *
 * ------------------------------------------------------------------ */
.vcb-header {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 0 auto;
	max-width: var(--vcb-maxw);
	background: color-mix(in srgb, var(--vcb-surface) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--vcb-border);
}
.vcb-header__progress { height: 3px; background: var(--vcb-surface-3); }
.vcb-header__progress-bar { display: block; height: 100%; width: 0; background: var(--vcb-accent); transition: width .1s linear; }
.vcb-header__inner {
	display: flex;
	align-items: center;
	gap: var(--vcb-sp-4);
	flex-wrap: wrap;
	padding: var(--vcb-sp-3) var(--vcb-sp-4);
}
.vcb-header__id { display: flex; align-items: center; gap: var(--vcb-sp-2); min-width: 0; }
.vcb-header__name { font-family: var(--vcb-font-heading); font-weight: 700; font-size: var(--vcb-fs-meta); color: var(--vcb-ink); }
.vcb-header__score { font-family: var(--vcb-font-mono); font-weight: 600; font-size: var(--vcb-fs-small); color: var(--vcb-star); white-space: nowrap; }
.vcb-header__nav { display: flex; gap: var(--vcb-sp-1); overflow-x: auto; order: 3; width: 100%; }
.vcb-header__link {
	padding: var(--vcb-sp-3) var(--vcb-sp-3);
	font-family: var(--vcb-font-body);
	font-weight: 600;
	font-size: var(--vcb-fs-meta);
	line-height: 1;
	color: var(--vcb-muted);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.vcb-header__link.is-active { color: var(--vcb-accent); border-bottom-color: var(--vcb-accent); }
.vcb-header__cta { margin-left: auto; opacity: 1; }
.vcb-header__cta.is-hidden { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ *
 * HERO                                                                *
 * ------------------------------------------------------------------ */
.vcb-hero { display: block; margin: 0 auto; max-width: var(--vcb-maxw); padding: var(--vcb-sp-6) var(--vcb-sp-4) var(--vcb-sp-5); }
.vcb-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--vcb-sp-5); }
.vcb-hero__title { margin: 0 0 var(--vcb-sp-3); font-family: var(--vcb-font-heading); font-weight: 700; font-size: var(--vcb-fs-h1); line-height: 1.08; letter-spacing: -.025em; color: var(--vcb-ink); }
.vcb-rating { display: flex; align-items: center; gap: var(--vcb-sp-3); margin-bottom: var(--vcb-sp-4); flex-wrap: wrap; }
.vcb-rating__score { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-base); color: var(--vcb-ink); }
.vcb-rating__meta { font-size: var(--vcb-fs-small); color: var(--vcb-muted); }
.vcb-hero__dek { margin: 0 0 var(--vcb-sp-4); font-size: var(--vcb-fs-dek); line-height: 1.5; color: var(--vcb-body); font-weight: 500; max-width: 32em; }
.vcb-hero__media { margin: 0; }
.vcb-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--vcb-radius-l); border: 1px solid var(--vcb-border); }

.vcb-pricebox {
	display: flex;
	align-items: center;
	gap: var(--vcb-sp-3);
	background: var(--vcb-surface-2);
	border: 1px solid var(--vcb-border);
	border-radius: var(--vcb-radius-m);
	padding: var(--vcb-sp-3) var(--vcb-sp-4);
	margin-bottom: var(--vcb-sp-3);
}
.vcb-pricebox__meta { flex: 1; min-width: 0; }
.vcb-pricebox__price { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-dek); color: var(--vcb-ink); }
.vcb-pricebox__sub { font-size: var(--vcb-fs-small); color: var(--vcb-muted); margin-top: var(--vcb-sp-1); }

.vcb-disclosure { margin: var(--vcb-sp-3) 0 0; font-size: var(--vcb-fs-small); line-height: 1.4; color: var(--vcb-faint); }
.vcb-disclosure a { color: var(--vcb-accent); }

.vcb-byline { display: flex; align-items: center; gap: var(--vcb-sp-2); margin-top: var(--vcb-sp-4); padding-top: var(--vcb-sp-4); border-top: 1px solid var(--vcb-border-2); }
.vcb-byline__avatar { width: 28px; height: 28px; border-radius: 50%; background-color: var(--vcb-surface-3); background-size: cover; background-position: center; flex-shrink: 0; }
.vcb-byline__text { font-size: var(--vcb-fs-small); color: var(--vcb-body); line-height: 1.4; }
.vcb-byline__text strong { color: var(--vcb-ink); }
.vcb-byline__meta { color: var(--vcb-muted); }

/* ------------------------------------------------------------------ *
 * LAYOUT: main column + sticky aside (built from core columns)        *
 * ------------------------------------------------------------------ */
.vcb-body.wp-block-columns { margin: 0 auto; max-width: var(--vcb-maxw); padding: 0 var(--vcb-sp-4) var(--vcb-sp-8); align-items: flex-start; gap: var(--vcb-sp-7); }
.vcb-aside-col { position: sticky; top: calc(var(--vcb-header-h) + var(--vcb-sp-5)); }

.vcb-section { margin: 0 auto var(--vcb-sp-7); max-width: var(--vcb-maxw); padding-left: var(--vcb-sp-4); padding-right: var(--vcb-sp-4); scroll-margin-top: calc(var(--vcb-header-h) + var(--vcb-sp-4)); }
.vcb-main-col .vcb-section { max-width: none; padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------------ *
 * SPECS                                                               *
 * ------------------------------------------------------------------ */
.vcb-specs__table { border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-m); overflow: hidden; }
.vcb-specs__row { display: flex; justify-content: space-between; gap: var(--vcb-sp-4); padding: var(--vcb-sp-3) var(--vcb-sp-4); border-bottom: 1px solid var(--vcb-border-2); background: var(--vcb-surface); }
.vcb-specs__row:last-child { border-bottom: 0; }
.vcb-specs__row.is-alt { background: var(--vcb-surface-2); }
.vcb-specs__label { font-size: var(--vcb-fs-meta); color: var(--vcb-muted); flex-shrink: 0; }
.vcb-specs__value { font-family: var(--vcb-font-mono); font-weight: 600; font-size: var(--vcb-fs-meta); line-height: 1.4; color: var(--vcb-ink); text-align: right; }

/* ------------------------------------------------------------------ *
 * PROS / CONS                                                         *
 * ------------------------------------------------------------------ */
.vcb-proscons__grid { display: grid; grid-template-columns: 1fr; gap: var(--vcb-sp-3); }
.vcb-card { border-radius: var(--vcb-radius-m); padding: var(--vcb-sp-4) var(--vcb-sp-5); border: 1px solid var(--vcb-border); }
.vcb-card--pros { border-color: var(--vcb-pro-border); background: var(--vcb-pro-bg); }
.vcb-card--cons { border-color: var(--vcb-con-border); background: var(--vcb-con-bg); }
.vcb-card__title { font-family: var(--vcb-font-heading); font-weight: 700; font-size: var(--vcb-fs-meta); line-height: 1; margin-bottom: var(--vcb-sp-3); text-transform: uppercase; letter-spacing: .06em; }
.vcb-card__title--pro { color: var(--vcb-pro-ink); }
.vcb-card__title--con { color: var(--vcb-con-ink); }
.vcb-listrow { display: flex; gap: var(--vcb-sp-2); align-items: flex-start; margin-bottom: var(--vcb-sp-2); }
.vcb-listrow__text { font-size: var(--vcb-fs-meta); line-height: 1.45; color: var(--vcb-body); }
.vcb-ic { flex-shrink: 0; margin-top: 1px; }
.vcb-ic__bg-pro { fill: var(--vcb-pro); }
.vcb-ic__bg-con { fill: var(--vcb-con); }
.vcb-ic__mark { stroke: var(--vcb-on-accent); }

/* ------------------------------------------------------------------ *
 * ARTICLE BODY                                                        *
 * ------------------------------------------------------------------ */
.vcb-prose { margin: 0 0 var(--vcb-sp-3); font-size: var(--vcb-fs-base); line-height: 1.65; color: var(--vcb-body); text-wrap: pretty; max-width: 40em; }
.vcb-article__figure { margin: var(--vcb-sp-3) 0 var(--vcb-sp-4); }
.vcb-article__figure img { display: block; width: 100%; height: auto; border-radius: var(--vcb-radius-m); border: 1px solid var(--vcb-border); }
.vcb-article__caption { margin-top: var(--vcb-sp-2); font-size: var(--vcb-fs-small); color: var(--vcb-muted); }
.vcb-callout { border-left: 3px solid var(--vcb-accent); background: var(--vcb-info-bg); border-radius: 0 var(--vcb-radius-m) var(--vcb-radius-m) 0; padding: var(--vcb-sp-3) var(--vcb-sp-4); margin: var(--vcb-sp-3) 0 var(--vcb-sp-4); max-width: 40em; }
.vcb-callout__title { font-family: var(--vcb-font-heading); font-weight: 600; font-size: var(--vcb-fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--vcb-accent); margin-bottom: var(--vcb-sp-1); }
.vcb-callout__text { margin: 0; font-size: var(--vcb-fs-meta); line-height: 1.55; color: var(--vcb-body); }

/* ------------------------------------------------------------------ *
 * FAQ (native details/summary accordion)                             *
 * ------------------------------------------------------------------ */
.vcb-faq__list { border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-m); overflow: hidden; }
.vcb-faq__item { border-bottom: 1px solid var(--vcb-border-2); background: var(--vcb-surface); }
.vcb-faq__item:last-child { border-bottom: 0; }
.vcb-faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--vcb-sp-4); padding: var(--vcb-sp-4); cursor: pointer; list-style: none; font-family: var(--vcb-font-body); font-weight: 600; font-size: var(--vcb-fs-meta); line-height: 1.4; color: var(--vcb-ink); }
.vcb-faq__q::-webkit-details-marker { display: none; }
.vcb-faq__sign { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.vcb-faq__sign::before,
.vcb-faq__sign::after { content: ""; position: absolute; background: var(--vcb-accent); border-radius: 2px; }
.vcb-faq__sign::before { top: 7px; left: 1px; width: 14px; height: 2px; }
.vcb-faq__sign::after { top: 1px; left: 7px; width: 2px; height: 14px; transition: transform .18s ease; }
.vcb-faq__item[open] .vcb-faq__sign::after { transform: scaleY(0); }
.vcb-faq__a { padding: 0 var(--vcb-sp-4) var(--vcb-sp-4); }
.vcb-faq__a p { margin: 0; font-size: var(--vcb-fs-meta); line-height: 1.6; color: var(--vcb-muted); max-width: 44em; }

/* ------------------------------------------------------------------ *
 * VERDICT CARD (sticky aside) + WHY TRUST                             *
 * ------------------------------------------------------------------ */
.vcb-verdict { display: flex; flex-direction: column; gap: var(--vcb-sp-4); }
.vcb-verdict__card { border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-l); padding: var(--vcb-sp-6); background: var(--vcb-surface); box-shadow: var(--vcb-shadow-card); }
.vcb-verdict__score { display: flex; align-items: baseline; gap: var(--vcb-sp-2); margin-bottom: var(--vcb-sp-1); }
.vcb-verdict__num { font-family: var(--vcb-font-heading); font-weight: 700; font-size: 2.625rem; line-height: 1; letter-spacing: -.03em; color: var(--vcb-ink); }
.vcb-verdict__scale { font-family: var(--vcb-font-mono); font-weight: 600; font-size: var(--vcb-fs-base); color: var(--vcb-muted); }
.vcb-verdict__stars { display: flex; align-items: center; gap: var(--vcb-sp-2); margin-bottom: var(--vcb-sp-4); }
.vcb-verdict__count { font-size: var(--vcb-fs-small); color: var(--vcb-muted); }
.vcb-verdict__price { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-h3); color: var(--vcb-ink); margin-bottom: var(--vcb-sp-1); }
.vcb-verdict__sub { font-size: var(--vcb-fs-small); color: var(--vcb-muted); margin-bottom: var(--vcb-sp-4); }
.vcb-verdict__note { margin: var(--vcb-sp-3) 0 0; font-size: var(--vcb-fs-small); line-height: 1.4; color: var(--vcb-faint); text-align: center; }
.vcb-verdict__note a { color: var(--vcb-accent); }
.vcb-whytrust { border: 1px solid var(--vcb-info-border); background: var(--vcb-info-bg); border-radius: var(--vcb-radius-l); padding: var(--vcb-sp-5); }
.vcb-whytrust__text { margin: 0; font-size: var(--vcb-fs-small); line-height: 1.55; color: var(--vcb-body); }

/* ------------------------------------------------------------------ *
 * SHARED PATTERN HELPERS (core blocks + plugin classes)              *
 * ------------------------------------------------------------------ */
.vcb-cta-banner.wp-block-group { margin: 0 auto var(--vcb-sp-7); max-width: var(--vcb-maxw); background: var(--vcb-dark); border-radius: var(--vcb-radius-l); padding: var(--vcb-sp-7); }
.vcb-main-col .vcb-cta-banner.wp-block-group { max-width: none; }
.vcb-cta-banner :where(h2, h3, p) { color: var(--vcb-on-dark); }
.vcb-cta-banner .vcb-cta-banner__sub { color: var(--vcb-on-dark-muted); }

/* ------------------------------------------------------------------ *
 * DESKTOP                                                             *
 * ------------------------------------------------------------------ */
@media (min-width: 782px) {
	.vcb-header__inner { flex-wrap: nowrap; padding: var(--vcb-sp-3) var(--vcb-sp-6); }
	.vcb-header__nav { order: 0; width: auto; margin: 0 auto; }
	.vcb-header__link { padding: var(--vcb-sp-2) var(--vcb-sp-3); }
	.vcb-header__cta { margin-left: 0; }

	.vcb-hero { padding: var(--vcb-sp-8) var(--vcb-sp-6) var(--vcb-sp-4); }
	.vcb-hero__grid { grid-template-columns: 1.12fr .88fr; gap: var(--vcb-sp-8); align-items: center; }
	.vcb-hero__dek { font-size: var(--vcb-fs-dek); }
	/* On desktop the price/CTA live in the sticky verdict card. */
	.vcb-pricebox--inline { display: none; }

	.vcb-proscons__grid { grid-template-columns: 1fr 1fr; gap: var(--vcb-sp-4); }
}

/* The verdict card is desktop-only; on mobile the hero pricebox covers it. */
@media (max-width: 781.98px) {
	.vcb-aside-col { display: none; }
}

/* ================================================================== *
 * GENERIC-TOPIC (ARTICLE) PATTERN — `.vcb-topic` scope               *
 * ------------------------------------------------------------------ *
 * The article's warm-paper palette + serif type are declared here as *
 * TOKEN FALLBACKS, remapping the shared --vcb-* tokens inside the     *
 * .vcb-topic wrapper. Theme presets still win when present, and the   *
 * reused omnivi/vi-faq block auto-reskins because it reads these tokens. *
 * No hardcoded hex outside this fallback layer.                       *
 * ================================================================== */
.vcb-topic {
	/* Palette (theme presets first, warm-paper fallback). */
	--vcb-surface:      var(--wp--preset--color--base, #f7f3ec);
	--vcb-topic-outer:  var(--wp--preset--color--vcb-topic-outer, #f2ece1);
	--vcb-ink:          var(--wp--preset--color--contrast, #2a2521);
	--vcb-body:         var(--wp--preset--color--vcb-body, #463f38);
	--vcb-muted:        var(--wp--preset--color--vcb-muted, #6f675d);
	--vcb-faint:        var(--wp--preset--color--vcb-faint, #8a8073);
	--vcb-border:       var(--wp--preset--color--vcb-border, #e6ddce);
	--vcb-border-2:     var(--wp--preset--color--vcb-border-2, #e2d9cb);
	--vcb-surface-2:    var(--wp--preset--color--vcb-surface-2, #efe9dd);
	--vcb-surface-3:    var(--wp--preset--color--vcb-surface-3, #ebe3d5);
	--vcb-accent:       var(--wp--preset--color--primary, #b0562f);
	--vcb-accent-soft:   color-mix(in oklab, var(--vcb-accent) 11%, var(--vcb-surface));
	--vcb-accent-border: color-mix(in oklab, var(--vcb-accent) 34%, var(--vcb-surface));
	/* Type. */
	--vcb-font-body:    var(--wp--preset--font-family--body, 'Newsreader', Georgia, serif);
	--vcb-font-heading: var(--wp--preset--font-family--heading, 'Newsreader', Georgia, serif);
	--vcb-font-mono:    var(--wp--preset--font-family--monospace, 'IBM Plex Mono', ui-monospace, monospace);
	/* Layout. */
	--vcb-topic-maxw:   var(--wp--custom--vcb--topic-maxw, 720px);
	--vcb-topic-px:     var(--wp--custom--vcb--topic-px, 22px);

	max-width: var(--vcb-topic-maxw);
	margin: 0 auto;
	background: var(--vcb-surface);
	color: var(--vcb-ink);
	font-family: var(--vcb-font-body);
	box-shadow: 0 0 60px rgba(0, 0, 0, .03);
}
/* Full-bleed outer band behind the paper column. */
.vcb-topic-bg { background: var(--vcb-topic-outer); }
.vcb-topic :where(h1, h2, h3) { font-family: var(--vcb-font-heading); }
/* Zero-specificity link reset so class-based colours (e.g. .vcb-tag) still win. */
:where(.vcb-topic a) { color: inherit; text-decoration: none; }

/* Fixed reading-progress bar. */
.vcb-topic-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(0, 0, 0, .05); }
.vcb-topic-progress__bar { display: block; height: 100%; width: 0; background: var(--vcb-accent); transition: width .12s linear; }

/* Category chip. */
.vcb-topic-header { padding: var(--vcb-sp-7) var(--vcb-topic-px) var(--vcb-sp-6); }
.vcb-topic-header__meta { margin-bottom: var(--vcb-sp-6); }
.vcb-tag { display: inline-block; font-family: var(--vcb-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vcb-accent); border: 1px solid var(--vcb-accent-border); padding: var(--vcb-sp-1) var(--vcb-sp-2); border-radius: var(--vcb-radius-s); }
.vcb-topic-header__title { font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--vcb-sp-5); text-wrap: pretty; }
.vcb-topic-header__intro { font-size: 19px; line-height: 1.55; margin: 0 0 var(--vcb-sp-6); color: var(--vcb-body); text-wrap: pretty; }
.vcb-topic-header__byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vcb-sp-2) var(--vcb-sp-3); font-family: var(--vcb-font-mono); font-size: 12px; color: var(--vcb-muted); border-top: 1px solid var(--vcb-border); border-bottom: 1px solid var(--vcb-border); padding: var(--vcb-sp-3) 0; }
.vcb-topic-header__byline strong { color: var(--vcb-ink); font-weight: 600; }
.vcb-topic-header__dot { opacity: .4; }

/* Sticky collapsible TOC nav. */
.vcb-topic-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--vcb-surface) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vcb-border); }
.vcb-topic-nav__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--vcb-sp-3); background: none; border: 0; padding: var(--vcb-sp-3) var(--vcb-topic-px); cursor: pointer; font-family: var(--vcb-font-mono); font-size: 12px; color: var(--vcb-ink); text-align: left; }
.vcb-topic-nav__lead { display: flex; align-items: center; gap: var(--vcb-sp-2); min-width: 0; }
.vcb-topic-nav__label { color: var(--vcb-muted); letter-spacing: .1em; text-transform: uppercase; }
.vcb-topic-nav__current { color: var(--vcb-accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcb-topic-nav__chevron { color: var(--vcb-muted); font-size: 10px; transition: transform .2s; }
.vcb-topic-nav.is-open .vcb-topic-nav__chevron { transform: rotate(180deg); }
.vcb-topic-nav__list { list-style: none; margin: 0; padding: var(--vcb-sp-1) var(--vcb-topic-px) var(--vcb-sp-3); display: flex; flex-direction: column; gap: 2px; }
.vcb-topic-nav__link { display: flex; align-items: baseline; gap: var(--vcb-sp-3); padding: var(--vcb-sp-2) var(--vcb-sp-2); border-radius: var(--vcb-radius-s); font-family: var(--vcb-font-mono); font-size: 13px; color: var(--vcb-muted); font-weight: 400; border-left: 2px solid transparent; }
.vcb-topic-nav__link .vcb-topic-nav__n { font-size: 11px; color: var(--vcb-faint); }
.vcb-topic-nav__link.is-active { color: var(--vcb-accent); font-weight: 600; background: var(--vcb-accent-soft); border-left-color: var(--vcb-accent); }
.vcb-topic-nav__link.is-active .vcb-topic-nav__n { color: var(--vcb-accent); }

/* Body wrapper padding (shared by takeaways, sections, faq). */
.vcb-topic-body { padding: var(--vcb-sp-1) var(--vcb-topic-px) 0; }

/* Key takeaways. */
.vcb-takeaways { margin: var(--vcb-sp-6) 0 var(--vcb-sp-7); background: var(--vcb-accent-soft); border: 1px solid var(--vcb-accent-border); border-radius: var(--vcb-radius-l); padding: var(--vcb-sp-6); }
.vcb-takeaways__title { font-family: var(--vcb-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vcb-accent); margin-bottom: var(--vcb-sp-3); }
.vcb-takeaways__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vcb-sp-3); }
.vcb-takeaways__item { display: flex; gap: var(--vcb-sp-3); font-size: 16.5px; line-height: 1.5; }
.vcb-takeaways__mark { color: var(--vcb-accent); flex: none; margin-top: 1px; }

/* Body sections. */
.vcb-section-body { scroll-margin-top: 64px; margin-top: var(--vcb-sp-7); }
.vcb-section-body__heading { font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--vcb-sp-3); text-wrap: pretty; }
.vcb-section-body__p { font-size: 17.5px; line-height: 1.68; margin: 0 0 var(--vcb-sp-4); color: var(--vcb-ink); }
.vcb-section-body__bullets { margin: 0 0 var(--vcb-sp-4); padding-left: var(--vcb-sp-5); font-size: 16.5px; line-height: 1.6; display: flex; flex-direction: column; gap: var(--vcb-sp-2); }
.vcb-section-body__figure { margin: var(--vcb-sp-6) 0 var(--vcb-sp-2); }
.vcb-section-body__figure img { display: block; width: 100%; height: auto; border-radius: var(--vcb-radius-m); border: 1px solid var(--vcb-border-2); }
.vcb-section-body__caption { font-family: var(--vcb-font-mono); font-size: 11.5px; color: var(--vcb-faint); margin-top: var(--vcb-sp-2); line-height: 1.5; }
.vcb-figph { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--vcb-radius-m); background-color: var(--vcb-surface-3); background-image: repeating-linear-gradient(135deg, transparent, transparent 11px, rgba(0, 0, 0, .045) 11px, rgba(0, 0, 0, .045) 12px); border: 1px solid var(--vcb-border-2); display: flex; align-items: center; justify-content: center; }
.vcb-figph__label { font-family: var(--vcb-font-mono); font-size: 12px; color: var(--vcb-faint); background: var(--vcb-surface); padding: var(--vcb-sp-1) var(--vcb-sp-2); border-radius: var(--vcb-radius-s); border: 1px solid var(--vcb-border-2); }

/* FAQ — scoped re-skin of the reused omnivi/vi-faq block (rule-separated, serif). */
.vcb-topic .vcb-faq { margin-top: var(--vcb-sp-8); }
.vcb-topic .vcb-faq__list { border: 0; border-top: 1px solid var(--vcb-border); border-radius: 0; }
.vcb-topic .vcb-faq__item { background: transparent; }
.vcb-topic .vcb-faq__q { padding: 17px var(--vcb-sp-1); font-size: 18px; font-weight: 600; }
.vcb-topic .vcb-faq__a { padding: 0 var(--vcb-sp-1) var(--vcb-sp-5); }
.vcb-topic .vcb-faq__a p { font-size: 16.5px; line-height: 1.62; color: var(--vcb-body); }

/* Related articles ("Keep reading"). */
.vcb-related { margin-top: var(--vcb-sp-8); background: var(--vcb-surface-2); border-top: 1px solid var(--vcb-border); padding: var(--vcb-sp-7) var(--vcb-topic-px) var(--vcb-sp-8); }
.vcb-related__title { font-family: var(--vcb-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vcb-muted); margin-bottom: var(--vcb-sp-5); }
.vcb-related__tag { font-family: var(--vcb-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--vcb-accent); margin-bottom: var(--vcb-sp-2); }
.vcb-related__read { font-family: var(--vcb-font-mono); font-size: 11px; color: var(--vcb-faint); }
/* image cards */
.vcb-related--cards-image .vcb-related__list { display: flex; flex-direction: column; gap: var(--vcb-sp-4); }
.vcb-related__media { display: flex; gap: var(--vcb-sp-4); align-items: center; background: var(--vcb-surface); border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-m); padding: var(--vcb-sp-3); transition: border-color .15s; }
.vcb-related__media:hover { border-color: var(--vcb-accent-border); }
.vcb-related__thumb { flex: none; width: 88px; height: 72px; border-radius: var(--vcb-radius-s); overflow: hidden; background-color: var(--vcb-surface-3); background-image: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(0, 0, 0, .05) 8px, rgba(0, 0, 0, .05) 9px); border: 1px solid var(--vcb-border-2); }
.vcb-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vcb-related__mediatext { min-width: 0; display: block; }
.vcb-related__mediatitle { display: block; font-size: 17px; font-weight: 600; line-height: 1.28; color: var(--vcb-ink); text-wrap: pretty; }
.vcb-related__media .vcb-related__read { margin-top: var(--vcb-sp-2); display: block; }
/* text cards */
.vcb-related--cards-noimage .vcb-related__list { display: flex; flex-direction: column; gap: var(--vcb-sp-3); }
.vcb-related__card { display: block; background: var(--vcb-surface); border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-m); padding: var(--vcb-sp-5); }
.vcb-related__cardtitle { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--vcb-ink); margin-bottom: var(--vcb-sp-2); text-wrap: pretty; }
.vcb-related__excerpt { font-size: 15px; line-height: 1.5; color: var(--vcb-muted); }
/* compact list */
.vcb-related--text-list .vcb-related__list { display: flex; flex-direction: column; }
.vcb-related__row { display: flex; align-items: baseline; gap: var(--vcb-sp-3); padding: var(--vcb-sp-4) var(--vcb-sp-1); border-bottom: 1px solid var(--vcb-border-2); }
.vcb-related__arrow { color: var(--vcb-accent); flex: none; }
.vcb-related__rowtitle { font-size: 17px; font-weight: 600; color: var(--vcb-ink); line-height: 1.3; }
.vcb-related__row .vcb-related__read { margin-left: var(--vcb-sp-2); }

@media (min-width: 640px) {
	.vcb-topic-header { padding-left: var(--vcb-topic-px); padding-right: var(--vcb-topic-px); }
}

/* ================================================================== *
 * TEMPLATE A — PRODUCT REVIEW BLOCKS                                  *
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * BREADCRUMB                                                          *
 * ------------------------------------------------------------------ */
.vcb-breadcrumb { margin: 0 auto; max-width: var(--vcb-maxw); padding: var(--vcb-sp-3) var(--vcb-sp-4); }
.vcb-breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vcb-sp-1); list-style: none; margin: 0; padding: 0; }
.vcb-breadcrumb__item { display: flex; align-items: center; gap: var(--vcb-sp-1); }
.vcb-breadcrumb__link { font-size: var(--vcb-fs-small); color: var(--vcb-muted); text-decoration: none; }
.vcb-breadcrumb__link:hover { color: var(--vcb-accent); text-decoration: underline; }
.vcb-breadcrumb__current { font-size: var(--vcb-fs-small); color: var(--vcb-body); }
.vcb-breadcrumb__sep { font-size: var(--vcb-fs-small); color: var(--vcb-faint); margin-left: var(--vcb-sp-1); }

/* ------------------------------------------------------------------ *
 * AFFILIATE DISCLOSURE                                                *
 * ------------------------------------------------------------------ */
.vcb-affil { display: flex; align-items: flex-start; gap: var(--vcb-sp-2); margin: 0 auto; max-width: var(--vcb-maxw); padding: var(--vcb-sp-3) var(--vcb-sp-4); background: var(--vcb-surface-2); border-top: 1px solid var(--vcb-border); border-bottom: 1px solid var(--vcb-border); }
.vcb-affil__icon { flex-shrink: 0; color: var(--vcb-faint); margin-top: 1px; }
.vcb-affil__text { font-size: var(--vcb-fs-small); line-height: 1.5; color: var(--vcb-faint); }
.vcb-affil__text a { color: var(--vcb-accent); }

/* ------------------------------------------------------------------ *
 * REVIEW HERO — Template A additions                                  *
 * ------------------------------------------------------------------ */
.vcb-hero__eyebrow-row { display: flex; align-items: center; gap: var(--vcb-sp-3); margin-bottom: var(--vcb-sp-2); flex-wrap: wrap; }
.vcb-hero__badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--vcb-font-mono); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--vcb-accent); border: 1px solid currentColor; border-radius: var(--vcb-radius-s); padding: 3px 7px; }
.vcb-hero__tagline { margin: 0 0 var(--vcb-sp-4); padding: var(--vcb-sp-3) var(--vcb-sp-4); border-left: 3px solid var(--vcb-accent); background: var(--vcb-info-bg); border-radius: 0 var(--vcb-radius-s) var(--vcb-radius-s) 0; max-width: 36em; }
.vcb-hero__tagline p { margin: 0; font-size: var(--vcb-fs-base); line-height: 1.55; color: var(--vcb-body); font-style: italic; }
.vcb-hero__facts { list-style: none; margin: 0 0 var(--vcb-sp-4); padding: var(--vcb-sp-3) var(--vcb-sp-4); background: var(--vcb-surface-2); border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-m); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vcb-sp-3) var(--vcb-sp-2); }
.vcb-hero__fact { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vcb-hero__fact-value { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-base); color: var(--vcb-ink); line-height: 1.2; }
.vcb-hero__fact-label { font-size: var(--vcb-fs-small); color: var(--vcb-muted); line-height: 1.3; }

/* Avatar initials monogram */
.vcb-byline__avatar { display: flex; align-items: center; justify-content: center; font-family: var(--vcb-font-mono); font-weight: 700; font-size: 10px; color: var(--vcb-muted); background-color: var(--vcb-surface-3); }

/* ------------------------------------------------------------------ *
 * STICKY MOBILE CTA                                                   *
 * ------------------------------------------------------------------ */
.vcb-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--vcb-dark); padding: var(--vcb-sp-3) var(--vcb-sp-4); transform: translateY(100%); transition: transform .25s ease; will-change: transform; }
.vcb-sticky-cta.is-visible { transform: translateY(0); }
.vcb-sticky-cta__inner { display: flex; align-items: center; gap: var(--vcb-sp-3); max-width: var(--vcb-maxw); margin: 0 auto; }
.vcb-sticky-cta__name { flex: 1; min-width: 0; font-family: var(--vcb-font-heading); font-weight: 600; font-size: var(--vcb-fs-meta); color: var(--vcb-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcb-sticky-cta__price { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-base); color: var(--vcb-on-dark); white-space: nowrap; }
/* Hide sticky CTA on desktop — the aside verdict card covers that role */
@media (min-width: 782px) { .vcb-sticky-cta { display: none; } }

/* ------------------------------------------------------------------ *
 * STICKY ANCHOR TOC                                                   *
 * ------------------------------------------------------------------ */
.vcb-toc { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--vcb-surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vcb-border); margin: 0 auto; max-width: var(--vcb-maxw); }
.vcb-toc__toggle { width: 100%; display: flex; align-items: center; gap: var(--vcb-sp-3); padding: var(--vcb-sp-3) var(--vcb-sp-4); background: none; border: 0; cursor: pointer; font-family: var(--vcb-font-body); font-size: var(--vcb-fs-meta); color: var(--vcb-ink); text-align: left; }
.vcb-toc__toggle-label { display: flex; align-items: center; gap: var(--vcb-sp-2); font-weight: 600; }
.vcb-toc__icon { color: var(--vcb-accent); flex-shrink: 0; }
.vcb-toc__current { flex: 1; min-width: 0; color: var(--vcb-accent); font-weight: 600; font-size: var(--vcb-fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcb-toc__chevron { color: var(--vcb-muted); transition: transform .2s; flex-shrink: 0; }
.vcb-toc[aria-expanded="true"] .vcb-toc__chevron,
.vcb-toc.is-open .vcb-toc__chevron { transform: rotate(180deg); }
.vcb-toc__list { list-style: none; margin: 0; padding: var(--vcb-sp-1) var(--vcb-sp-4) var(--vcb-sp-3); display: flex; flex-direction: column; gap: 2px; }
.vcb-toc__item { margin: 0; }
.vcb-toc__item--sub .vcb-toc__link { padding-left: var(--vcb-sp-6); }
.vcb-toc__link { display: flex; align-items: baseline; gap: var(--vcb-sp-3); padding: var(--vcb-sp-2) var(--vcb-sp-2); border-radius: var(--vcb-radius-s); font-size: var(--vcb-fs-meta); color: var(--vcb-muted); text-decoration: none; border-left: 2px solid transparent; transition: color .15s, background .15s; }
.vcb-toc__link:hover { color: var(--vcb-accent); background: var(--vcb-info-bg); }
.vcb-toc__link.is-active { color: var(--vcb-accent); font-weight: 600; background: var(--vcb-info-bg); border-left-color: var(--vcb-accent); }
.vcb-toc__n { font-family: var(--vcb-font-mono); font-size: var(--vcb-fs-small); color: var(--vcb-faint); }
.vcb-toc__link.is-active .vcb-toc__n { color: var(--vcb-accent); }

/* ------------------------------------------------------------------ *
 * SCORE CARD                                                          *
 * ------------------------------------------------------------------ */
.vcb-scorecard__inner { display: grid; grid-template-columns: 1fr; gap: var(--vcb-sp-6); border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-l); padding: var(--vcb-sp-6); background: var(--vcb-surface); box-shadow: var(--vcb-shadow-card); }
.vcb-scorecard__overall { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vcb-sp-2); padding-bottom: var(--vcb-sp-5); border-bottom: 1px solid var(--vcb-border); }
.vcb-scorecard__num { font-family: var(--vcb-font-heading); font-weight: 700; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -.04em; color: var(--vcb-ink); }
.vcb-scorecard__num.is-good { color: var(--vcb-pro); }
.vcb-scorecard__num.is-fair { color: var(--vcb-con); }
.vcb-scorecard__scale { font-family: var(--vcb-font-mono); font-size: var(--vcb-fs-h3); font-weight: 600; color: var(--vcb-muted); }
.vcb-scorecard__label { font-family: var(--vcb-font-heading); font-weight: 600; font-size: var(--vcb-fs-h3); color: var(--vcb-ink); }
.vcb-scorecard__bar-wrap { width: 100%; }
.vcb-scorecard__bar-track { height: 6px; background: var(--vcb-surface-3); border-radius: 4px; overflow: hidden; }
.vcb-scorecard__bar-fill { height: 100%; background: var(--vcb-muted); border-radius: 4px; transition: width .4s ease; }
.vcb-scorecard__bar-fill.is-good { background: var(--vcb-pro); }
.vcb-scorecard__bar-fill.is-fair { background: var(--vcb-con); }
.vcb-scorecard__breakdown { display: flex; flex-direction: column; gap: var(--vcb-sp-4); }
.vcb-scorecard__criterion { display: flex; flex-direction: column; gap: var(--vcb-sp-2); }
.vcb-scorecard__c-meta { display: flex; align-items: center; gap: var(--vcb-sp-2); }
.vcb-scorecard__c-label { font-size: var(--vcb-fs-meta); color: var(--vcb-body); flex: 1; }
.vcb-scorecard__c-weight { font-family: var(--vcb-font-mono); font-size: var(--vcb-fs-small); color: var(--vcb-faint); }
.vcb-scorecard__c-score { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-meta); color: var(--vcb-muted); min-width: 2.5em; text-align: right; }
.vcb-scorecard__c-score.is-good { color: var(--vcb-pro); }
.vcb-scorecard__c-score.is-fair { color: var(--vcb-con); }
@media (min-width: 782px) {
	.vcb-scorecard__inner { grid-template-columns: auto 1fr; }
	.vcb-scorecard__overall { padding-bottom: 0; border-bottom: 0; padding-right: var(--vcb-sp-6); border-right: 1px solid var(--vcb-border); min-width: 160px; }
}

/* ------------------------------------------------------------------ *
 * QUICK SPECS                                                         *
 * ------------------------------------------------------------------ */
.vcb-qspecs__table { border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-m); overflow: hidden; }
.vcb-qspecs__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vcb-sp-4); padding: var(--vcb-sp-3) var(--vcb-sp-4); border-bottom: 1px solid var(--vcb-border-2); background: var(--vcb-surface); }
.vcb-qspecs__row:last-child { border-bottom: 0; }
.vcb-qspecs__row.is-alt { background: var(--vcb-surface-2); }
.vcb-qspecs__label { font-size: var(--vcb-fs-meta); color: var(--vcb-muted); flex-shrink: 0; }
.vcb-qspecs__value { font-family: var(--vcb-font-mono); font-weight: 600; font-size: var(--vcb-fs-meta); color: var(--vcb-ink); text-align: right; }

/* ------------------------------------------------------------------ *
 * SHOULD YOU BUY THIS (reuses .vcb-proscons__grid, .vcb-card, etc.)  *
 * ------------------------------------------------------------------ */
.vcb-syb { /* inherits vcb-section spacing */ }


/* ------------------------------------------------------------------ *
 * INLINE CTA                                                          *
 * ------------------------------------------------------------------ */
.vcb-inline-cta { margin: var(--vcb-sp-5) 0; text-align: center; }
.vcb-inline-cta__sub { margin: var(--vcb-sp-2) 0 0; font-size: var(--vcb-fs-small); color: var(--vcb-muted); }

/* ------------------------------------------------------------------ *
 * ALTERNATIVES                                                        *
 * ------------------------------------------------------------------ */
.vcb-alts__grid { display: grid; grid-template-columns: 1fr; gap: var(--vcb-sp-4); }
.vcb-alts__card { border: 1px solid var(--vcb-border); border-radius: var(--vcb-radius-l); overflow: hidden; background: var(--vcb-surface); transition: box-shadow .2s; }
.vcb-alts__card:hover { box-shadow: var(--vcb-shadow-card); }
.vcb-alts__tag { background: var(--vcb-dark); color: var(--vcb-on-dark); font-family: var(--vcb-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: var(--vcb-sp-2) var(--vcb-sp-3); }
.vcb-alts__fig { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--vcb-surface-2); }
.vcb-alts__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcb-alts__img-link { display: block; }
.vcb-alts__body { padding: var(--vcb-sp-4) var(--vcb-sp-4) var(--vcb-sp-5); }
.vcb-alts__label { font-family: var(--vcb-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vcb-accent); margin: 0 0 var(--vcb-sp-1); }
.vcb-alts__name { font-family: var(--vcb-font-heading); font-weight: 700; font-size: var(--vcb-fs-h3); line-height: 1.25; margin: 0 0 var(--vcb-sp-2); }
.vcb-alts__name a { color: var(--vcb-ink); text-decoration: none; }
.vcb-alts__name a:hover { color: var(--vcb-accent); }
.vcb-alts__score { display: flex; align-items: baseline; gap: var(--vcb-sp-2); margin: 0 0 var(--vcb-sp-3); }
.vcb-alts__score-num { font-family: var(--vcb-font-mono); font-weight: 700; font-size: var(--vcb-fs-base); color: var(--vcb-muted); }
.vcb-alts__score-num.is-good { color: var(--vcb-pro); }
.vcb-alts__score-num.is-fair { color: var(--vcb-con); }
.vcb-alts__score-label { font-size: var(--vcb-fs-small); color: var(--vcb-muted); }
.vcb-alts__link { font-size: var(--vcb-fs-meta); font-weight: 600; color: var(--vcb-accent); text-decoration: none; }
.vcb-alts__link:hover { text-decoration: underline; }
@media (min-width: 600px) { .vcb-alts__grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ *
 * VIDEO SLOT                                                          *
 * ------------------------------------------------------------------ */
.vcb-videoslot__embed { margin: 0; }
.vcb-videoslot__player { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--vcb-radius-l); border: 1px solid var(--vcb-border); background: var(--vcb-dark); }
.vcb-videoslot__player iframe,
.vcb-videoslot__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcb-videoslot__caption { margin-top: var(--vcb-sp-2); font-size: var(--vcb-fs-small); color: var(--vcb-muted); }
.vcb-videoslot__fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--vcb-sp-4); text-align: center; background: var(--vcb-surface-2); border: 1px dashed var(--vcb-border); border-radius: var(--vcb-radius-l); padding: var(--vcb-sp-8) var(--vcb-sp-6); aspect-ratio: 16/9; }
.vcb-videoslot__fallback-icon { color: var(--vcb-muted); }
.vcb-videoslot__fallback-text { margin: 0; font-size: var(--vcb-fs-base); color: var(--vcb-muted); }

/* ------------------------------------------------------------------ *
 * AUTHOR BOX                                                          *
 * ------------------------------------------------------------------ */
.vcb-authorbox { margin: 0 auto; max-width: var(--vcb-maxw); padding: var(--vcb-sp-6) var(--vcb-sp-4); border-top: 1px solid var(--vcb-border); }
.vcb-authorbox__inner { display: flex; align-items: flex-start; gap: var(--vcb-sp-5); }
.vcb-authorbox__avatar-wrap { flex-shrink: 0; }
.vcb-authorbox__avatar { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--vcb-border); object-fit: cover; display: block; }
.vcb-authorbox__content { flex: 1; min-width: 0; }
.vcb-authorbox__meta { display: flex; flex-direction: column; gap: var(--vcb-sp-1); margin-bottom: var(--vcb-sp-3); }
.vcb-authorbox__badge { font-family: var(--vcb-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vcb-accent); }
.vcb-authorbox__name { font-family: var(--vcb-font-heading); font-weight: 700; font-size: var(--vcb-fs-h3); color: var(--vcb-ink); text-decoration: none; }
.vcb-authorbox__name:hover { color: var(--vcb-accent); }
.vcb-authorbox__bio { margin: 0; font-size: var(--vcb-fs-meta); line-height: 1.6; color: var(--vcb-body); }

.vcb-alts__summary{margin:.45rem 0;color:var(--vcb-muted);font-size:.9rem;line-height:1.5}