/*
 * Overrides for Recster parent theme rules that hardcode brand-specific colors
 * directly in wp-content/themes/recster/assets/css/style.css instead of routing
 * them through Recster's --primary-color / --secondary-color / --gradient-*
 * custom properties. Re-asserting on the same selectors with the same
 * specificity wins same-rule ordering when this file loads after the parent.
 *
 * Defaults preserve the original visual when the brand variables are unset.
 * Once Redux is configured, the variables resolve to brand values and these
 * rules update automatically.
 *
 * Source mapping (parent theme style.css line numbers, theme version of
 * 2026-05-27 — re-audit after major Recster updates):
 *
 *   line 15030  .pxl-banner3 .pxl-box-counter
 *   line 24263  .pxl-meta-box2 .pxl-item--inner.box-right .pxl-icon
 *   line 24267  .pxl-meta-box2 .pxl-item--inner.box-right .pxl-item--title
 *   line 24290  .pxl-meta-box2 .pxl-item--inner.box-left .pxl-icon
 *   line 24293  .pxl-meta-box2 .pxl-item--inner.box-left .pxl-item--title
 *
 * Override these vars at :root in your own custom CSS if you want the EV
 * (box-right) and Hybrid (box-left) labels in different brand slots — they
 * default to primary/secondary so changing those in Theme Options propagates.
 */

:root {
	--recster-banner3-counter-from: var(--gradient-color-to, #e9021e);
	--recster-banner3-counter-to:   var(--gradient-color-from, #830111);

	--recster-box-right-icon:       var(--primary-color, #509200);
	--recster-box-right-grad-from:  var(--primary-color, #56ab2f);
	--recster-box-right-grad-to:    var(--gradient-color-to, #8bcd3a);

	--recster-box-left-icon:        var(--secondary-color, #0b52c2);
	--recster-box-left-grad-from:   var(--secondary-color, #0052d4);
	--recster-box-left-grad-to:     var(--gradient-color-from, #6593f7);
}

.pxl-banner3 .pxl-box-counter {
	background: radial-gradient( circle, var(--recster-banner3-counter-from) 0%, var(--recster-banner3-counter-to) 100% );
}

.pxl-meta-box2 .pxl-item--inner.box-right .pxl-icon {
	background-color: var(--recster-box-right-icon);
}
.pxl-meta-box2 .pxl-item--inner.box-right .pxl-item--title {
	background: linear-gradient( to right, var(--recster-box-right-grad-from) 0%, var(--recster-box-right-grad-to) 100% );
}

.pxl-meta-box2 .pxl-item--inner.box-left .pxl-icon {
	background-color: var(--recster-box-left-icon);
}
.pxl-meta-box2 .pxl-item--inner.box-left .pxl-item--title {
	background: linear-gradient( to right, var(--recster-box-left-grad-from) 0%, var(--recster-box-left-grad-to) 100% );
}