/**
 * CW background presets — Elementor canvas wins over kit/post CSS.
 * 2026-03-31: widget roots (e.g. CW Heading default) use .elementor-widget.cw-bg-preset--* alongside .e-con / .elementor-section.
 *
 * Elementor outputs high-specificity rules such as
 * `.elementor-DOC .elementor-element-UID.e-con { background-color: … }`
 * which override single-class preset rules. These selectors add `.elementor`
 * + `!important` so presets match in the editor and on the front end.
 *
 * @package Compression_Works
 */

/* ——— Demo hero ——— */
.elementor .elementor-element.e-con.cw-bg-preset--demo-hero,
.elementor .elementor-element.elementor-section.cw-bg-preset--demo-hero,
.elementor .elementor-element.elementor-widget.cw-bg-preset--demo-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--cw-bg) !important;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 40%,
			rgba(0, 0, 0, 0.2) 100%
		),
		radial-gradient(
			circle at 90% -10%,
			color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 4%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			circle at -10% 40%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 80% 50% at 50% 0%,
			color-mix(in srgb, var(--cw-surface-2) 50%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse 70% 70% at 100% 30%,
			color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse 70% 70% at 0% 70%,
			color-mix(in srgb, var(--cw-surface-2) 20%, transparent) 0%,
			transparent 50%
		) !important;
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-size: 256px 256px, auto, auto, auto, auto, auto, auto !important;
	background-blend-mode: soft-light, normal, screen, screen, normal, normal, normal !important;
}

/* ——— iOS / demo-skin parity (subtle ::before noise — no soft-light) ——— */
.elementor .elementor-element.e-con.cw-bg-preset--ios,
.elementor .elementor-element.elementor-section.cw-bg-preset--ios,
.elementor .elementor-element.elementor-widget.cw-bg-preset--ios {
	position: relative;
	isolation: isolate;
	background-color: var(--cw-bg) !important;
	background-image:
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 40%,
			rgba(0, 0, 0, 0.2) 100%
		),
		radial-gradient(
			circle at 90% -10%,
			color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 4%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			circle at -10% 40%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 80% 50% at 50% 0%,
			color-mix(in srgb, var(--cw-surface-2) 50%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse 70% 70% at 100% 30%,
			color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse 70% 70% at 0% 70%,
			color-mix(in srgb, var(--cw-surface-2) 20%, transparent) 0%,
			transparent 50%
		) !important;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-blend-mode: normal, screen, screen, normal, normal, normal !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--ios::before,
.elementor .elementor-element.elementor-section.cw-bg-preset--ios::before,
.elementor .elementor-element.elementor-widget.cw-bg-preset--ios::before {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0.015 !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
	background-repeat: repeat !important;
	background-size: 256px 256px !important;
}

.elementor .elementor-element.elementor-section.cw-bg-preset--ios > .elementor-container,
.elementor .elementor-element.e-con.cw-bg-preset--ios > .e-con-inner,
.elementor .elementor-element.elementor-widget.cw-bg-preset--ios > .elementor-widget-container {
	position: relative;
	z-index: 2;
}

/* ——— Body radials ——— */
.elementor .elementor-element.e-con.cw-bg-preset--body-radials,
.elementor .elementor-element.elementor-section.cw-bg-preset--body-radials,
.elementor .elementor-element.elementor-widget.cw-bg-preset--body-radials {
	background: radial-gradient(
			ellipse 80% 50% at 50% 0%,
			color-mix(in srgb, var(--cw-surface-2) 50%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse 70% 70% at 100% 30%,
			color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse 70% 70% at 0% 70%,
			color-mix(in srgb, var(--cw-surface-2) 20%, transparent) 0%,
			transparent 50%
		),
		var(--cw-bg) !important;
}

/* ——— Trust strip ——— */
.elementor .elementor-element.e-con.cw-bg-preset--trust-strip,
.elementor .elementor-element.elementor-section.cw-bg-preset--trust-strip,
.elementor .elementor-element.elementor-widget.cw-bg-preset--trust-strip {
	background-color: color-mix(in srgb, var(--cw-surface-2) 88%, transparent) !important;
	background-image: linear-gradient(
			90deg,
			color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 0%,
			transparent 30%,
			transparent 70%,
			color-mix(in srgb, var(--cw-accent-secondary) 3%, transparent) 100%
		) !important;
	backdrop-filter: blur(24px) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ——— Footer premium ——— */
.elementor .elementor-element.e-con.cw-bg-preset--footer-premium,
.elementor .elementor-element.elementor-section.cw-bg-preset--footer-premium,
.elementor .elementor-element.elementor-widget.cw-bg-preset--footer-premium {
	background: color-mix(in srgb, var(--cw-surface-2) 92%, transparent) !important;
	background-color: color-mix(in srgb, var(--cw-surface-2) 92%, transparent) !important;
	backdrop-filter: blur(24px) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ——— Section depth: sections use ::before; .e-con uses ::after (Elementor reserves ::before) ——— */
.elementor .elementor-element.elementor-section.cw-bg-preset--section-depth {
	position: relative;
}

.elementor .elementor-element.elementor-section.cw-bg-preset--section-depth::before {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cw-accent-secondary) 2%, transparent) 0%,
		transparent 45%,
		transparent 55%,
		color-mix(in srgb, var(--cw-accent-primary) 2%, transparent) 100%
	) !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--section-depth::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--cw-accent-secondary) 2%, transparent) 0%,
			transparent 45%,
			transparent 55%,
			color-mix(in srgb, var(--cw-accent-primary) 2%, transparent) 100%
		) !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--section-depth > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Widgets (e.g. CW Heading default): ::after veil — Elementor may reserve ::before on the widget root */
.elementor .elementor-element.elementor-widget.cw-bg-preset--section-depth {
	position: relative;
}

.elementor .elementor-element.elementor-widget.cw-bg-preset--section-depth::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--cw-accent-secondary) 2%, transparent) 0%,
			transparent 45%,
			transparent 55%,
			color-mix(in srgb, var(--cw-accent-primary) 2%, transparent) 100%
		) !important;
}

.elementor .elementor-element.elementor-widget.cw-bg-preset--section-depth > .elementor-widget-container {
	position: relative;
	z-index: 1;
}

/* ——— Resource warm / cool ——— */
.elementor .elementor-element.e-con.cw-bg-preset--resource-warm,
.elementor .elementor-element.elementor-section.cw-bg-preset--resource-warm,
.elementor .elementor-element.elementor-widget.cw-bg-preset--resource-warm {
	background: radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-primary) 22%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 42%,
			color-mix(in srgb, var(--cw-bg) 98%, transparent) 100%
		) !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--resource-cool,
.elementor .elementor-element.elementor-section.cw-bg-preset--resource-cool,
.elementor .elementor-element.elementor-widget.cw-bg-preset--resource-cool {
	background: radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-secondary) 22%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 8%, transparent) 42%,
			color-mix(in srgb, var(--cw-bg) 98%, transparent) 100%
		) !important;
}

/* ——— Parallax / nova ——— */
.elementor .elementor-element.e-con.cw-bg-preset--parallax-bg,
.elementor .elementor-element.elementor-section.cw-bg-preset--parallax-bg,
.elementor .elementor-element.elementor-widget.cw-bg-preset--parallax-bg {
	background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-primary) 12%, transparent),
			color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent)
		) !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--nova-gradient-fill,
.elementor .elementor-element.elementor-section.cw-bg-preset--nova-gradient-fill,
.elementor .elementor-element.elementor-widget.cw-bg-preset--nova-gradient-fill {
	background: linear-gradient(
			135deg,
			var(--cw-accent-primary) 0%,
			var(--cw-accent-secondary) 100%
		) !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--nova-flat,
.elementor .elementor-element.elementor-section.cw-bg-preset--nova-flat,
.elementor .elementor-element.elementor-widget.cw-bg-preset--nova-flat {
	background: var(--cw-accent-primary) !important;
	background-color: var(--cw-accent-primary) !important;
}

.elementor .elementor-element.e-con.cw-bg-preset--ambient-orbs,
.elementor .elementor-element.elementor-section.cw-bg-preset--ambient-orbs,
.elementor .elementor-element.elementor-widget.cw-bg-preset--ambient-orbs {
	background: radial-gradient(
			circle at 90% -10%,
			color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 4%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			circle at -10% 40%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 40%,
			transparent 70%
		),
		var(--cw-bg) !important;
	background-repeat: no-repeat, no-repeat, no-repeat !important;
	background-blend-mode: screen, screen, normal !important;
}

/* ——— Overlays (::after) ——— */
.elementor .elementor-element.e-con.cw-bg-overlay--vignette::after,
.elementor .elementor-element.elementor-section.cw-bg-overlay--vignette::after,
.elementor .elementor-element.elementor-widget.cw-bg-overlay--vignette::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 40%,
			rgba(0, 0, 0, 0.2) 100%
		) !important;
}

.elementor .elementor-element.e-con.cw-bg-overlay--noise::after,
.elementor .elementor-element.elementor-section.cw-bg-overlay--noise::after,
.elementor .elementor-element.elementor-widget.cw-bg-overlay--noise::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0.015 !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
	background-repeat: repeat !important;
	background-size: 256px 256px !important;
}

.elementor .elementor-element.e-con.cw-bg-overlay--vignette-noise::after,
.elementor .elementor-element.elementor-section.cw-bg-overlay--vignette-noise::after,
.elementor .elementor-element.elementor-widget.cw-bg-overlay--vignette-noise::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 1 !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 40%,
			rgba(0, 0, 0, 0.2) 100%
		) !important;
	background-repeat: repeat, no-repeat !important;
	background-size: 256px 256px, auto !important;
	background-blend-mode: soft-light, normal !important;
}

/* Keep hero/content above overlay pseudo on containers */
.elementor .elementor-element.e-con[class*="cw-bg-overlay--"] > .e-con-inner,
.elementor .elementor-element.e-con[class*="cw-bg-overlay--"] > .elementor-widget,
.elementor .elementor-element.elementor-widget[class*="cw-bg-overlay--"] > .elementor-widget-container {
	position: relative;
	z-index: 2;
}