/**
 * Maps Comparix Theme tokens (--cx-theme-*) to plugin design system (--cx-*).
 * Loaded when Comparix Theme is active so plugin pages match theme chrome.
 */

body.cx-theme-shell-active,
body.cx-theme-shell-active .cx-app {
	--cx-primary: var(--cx-theme-primary, #2563eb);
	--cx-primary-hover: var(--cx-theme-primary-hover, #1d4ed8);
	--cx-accent: var(--cx-theme-accent, #0ea5e9);
	--cx-bg: var(--cx-theme-bg, #ffffff);
	--cx-card: var(--cx-theme-surface, #f8fafc);
	--cx-surface: var(--cx-theme-surface, #f8fafc);
	--cx-text: var(--cx-theme-text, #0f172a);
	--cx-g700: var(--cx-theme-text, #334155);
	--cx-g500: var(--cx-theme-text-muted, #64748b);
	--cx-g400: var(--cx-theme-text-muted, #94a3b8);
	--cx-border: var(--cx-theme-border, #e2e8f0);
	--cx-g100: color-mix(in srgb, var(--cx-theme-border, #e2e8f0) 55%, var(--cx-theme-bg, #fff));
	--cx-link: var(--cx-theme-link, var(--cx-primary));
	--cx-r: var(--cx-theme-radius, 8px);
	--cx-r-sm: calc(var(--cx-theme-radius, 8px) - 2px);
	--cx-r-lg: calc(var(--cx-theme-radius, 8px) + 4px);
	--cx-radius: var(--cx-theme-radius, 8px);
	--cx-radius-sm: var(--cx-r-sm);
	--cx-radius-md: var(--cx-theme-radius, 8px);
	--cx-radius-lg: var(--cx-r-lg);
	--cx-shadow: var(--cx-theme-shadow, 0 1px 3px rgba(15, 23, 42, 0.08));
	--cx-shadow-lg: var(--cx-theme-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12));
	--cx-font: var(--cx-theme-font, system-ui, sans-serif);
	--cx-font-display: var(--cx-theme-font, system-ui, sans-serif);
	--cx-font-body: var(--cx-theme-font, system-ui, sans-serif);
	--cx-container-xl: var(--cx-theme-container, 1200px);
}

body.cx-theme-scheme-dark.cx-theme-shell-active,
body.cx-theme-scheme-dark.cx-theme-shell-active .cx-app {
	--cx-bg: var(--cx-theme-bg, #0b1120);
	--cx-card: var(--cx-theme-surface, #111827);
	--cx-surface: var(--cx-theme-surface, #111827);
	--cx-text: var(--cx-theme-text, #f1f5f9);
	--cx-g700: var(--cx-theme-text, #e2e8f0);
	--cx-g500: var(--cx-theme-text-muted, #94a3b8);
	--cx-g400: var(--cx-theme-text-muted, #64748b);
	--cx-border: var(--cx-theme-border, #1e293b);
	--cx-g100: color-mix(in srgb, var(--cx-theme-border, #1e293b) 65%, var(--cx-theme-bg, #0b1120));
}

body.cx-theme-shell-active.cx-bar-active {
	padding-bottom: calc(52px + env(safe-area-inset-bottom, 0));
}

/* Single product page — respect theme dark tokens */
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root {
	background: var(--cx-bg);
	color: var(--cx-text);
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-section,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-section {
	background: var(--cx-card);
	color: var(--cx-text);
	box-shadow: var(--cx-shadow);
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-table th,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-table td,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-table th,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-table td {
	border-color: var(--cx-border);
	color: var(--cx-text);
}

@media (prefers-color-scheme: dark) {
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root {
		background: var(--cx-bg);
		color: var(--cx-text);
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-section,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-section {
		background: var(--cx-card);
		color: var(--cx-text);
	}
}

/* --------------------------------------------------------------------------
   Dark scheme — product sections with hardcoded light backgrounds
   -------------------------------------------------------------------------- */

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-section,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-section,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rating-section,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rating-section {
	background: var(--cx-card) !important;
	border-color: var(--cx-border) !important;
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-card,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-card,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-pill,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-pill {
	background: var(--cx-g900, #0f172a) !important;
	border: 1px solid var(--cx-border) !important;
	box-shadow: 0 10px 28px color-mix(in srgb, var(--cx-g900, #000) 18%, transparent) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-card:hover,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-card:hover {
	border-color: color-mix(in srgb, var(--cx-primary) 35%, transparent) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-sh,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-sh,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-gval,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-gval,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-card__value,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glance-card__value,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rbar-name,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rbar-name,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rbar-score,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rbar-score,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rating-sub,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rating-sub {
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glbl,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-glbl {
	color: var(--cx-g500) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rbar-track,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rbar-track {
	background: var(--cx-g100) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-pros,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-pros {
	background: rgba(34, 197, 94, 0.1) !important;
	border-color: rgba(34, 197, 94, 0.28) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-pros h3,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-pros h3 {
	color: #4ade80 !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-pros li,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-pros li {
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-cons,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-cons {
	background: rgba(239, 68, 68, 0.1) !important;
	border-color: rgba(239, 68, 68, 0.28) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-cons h3,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-cons h3 {
	color: #f87171 !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-cons li,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pc-cons li {
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-verdict,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-verdict {
	background: rgba(245, 158, 11, 0.1) !important;
	border-color: rgba(245, 158, 11, 0.28) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-verdict strong,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-verdict strong {
	color: #fbbf24 !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-verdict p,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-verdict p {
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pi-best-deal,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pi-best-deal {
	background: rgba(16, 185, 129, 0.12) !important;
	border: 1px solid rgba(16, 185, 129, 0.28) !important;
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pi-best-deal strong,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pi-best-deal strong {
	color: #6ee7b7 !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pi-buy,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-pi-buy {
	color: #34d399 !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-row:nth-child(odd),
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-row:nth-child(odd) {
	background: var(--cx-bg) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-acc-head,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-acc-head,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-val,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-val,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-prose,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-prose {
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-name,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-spec-name {
	color: var(--cx-g500) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-offer,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-offer,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-review,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-review,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rel-card,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-rel-card {
	background: var(--cx-bg) !important;
	border-color: var(--cx-border) !important;
	color: var(--cx-text) !important;
}

body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-share-bar a,
body.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-share-bar button,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-share-bar a,
html.cx-theme-scheme-dark.cx-theme-shell-active #cx-product-root .cx-share-bar button {
	background: var(--cx-card) !important;
	border-color: var(--cx-border) !important;
	color: var(--cx-text) !important;
}

/* Auto scheme (system dark) — mirror explicit dark overrides */
@media (prefers-color-scheme: dark) {
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-glance-section,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-glance-section,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rating-section,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rating-section {
		background: var(--cx-card) !important;
		border-color: var(--cx-border) !important;
		color: var(--cx-text) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-glance-pill,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-glance-pill {
		background: var(--cx-bg) !important;
		border: 1px solid var(--cx-border);
		box-shadow: none !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-sh,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-sh,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-gval,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-gval,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rbar-name,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rbar-name,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rbar-score,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rbar-score,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rating-sub,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rating-sub {
		color: var(--cx-text) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-glbl,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-glbl {
		color: var(--cx-g500) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rbar-track,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-rbar-track {
		background: var(--cx-g100) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-pros,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-pros {
		background: rgba(34, 197, 94, 0.1) !important;
		border-color: rgba(34, 197, 94, 0.28) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-pros h3,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-pros h3 {
		color: #4ade80 !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-pros li,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-pros li {
		color: var(--cx-text) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-cons,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-cons {
		background: rgba(239, 68, 68, 0.1) !important;
		border-color: rgba(239, 68, 68, 0.28) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-cons h3,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-cons h3 {
		color: #f87171 !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-cons li,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pc-cons li {
		color: var(--cx-text) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-verdict,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-verdict {
		background: rgba(245, 158, 11, 0.1) !important;
		border-color: rgba(245, 158, 11, 0.28) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-verdict strong,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-verdict strong {
		color: #fbbf24 !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-verdict p,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-verdict p {
		color: var(--cx-text) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pi-best-deal,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pi-best-deal {
		background: rgba(16, 185, 129, 0.12) !important;
		border: 1px solid rgba(16, 185, 129, 0.28) !important;
		color: var(--cx-text) !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pi-best-deal strong,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pi-best-deal strong {
		color: #6ee7b7 !important;
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pi-buy,
	body:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark).cx-theme-shell-active #cx-product-root .cx-pi-buy {
		color: #34d399 !important;
	}
}

/* Homepage Price Intelligence — readable empty states in all schemes */
body.cx-theme-shell-active .cx-bd-price-box li {
	color: var(--cx-g700, #475569);
}

body.cx-theme-shell-active .cx-bd-price-box li:not(:has(a)) {
	color: var(--cx-g500, #64748b);
}