/* ── SVG Duotone Filters ──
 * Apply to <img> or to any element with background-image.
 * Usage: <img class="ecv-duotone-brown" ...>
 *        <div class="ecv-duotone-blue" style="background-image:url(...)">
 *
 * For <img>: filter applies directly.
 * For elements with background-image: filter is applied via ::before
 * pseudo-element so children (text, marquee, etc.) are NOT affected.
 */

/* ── Direct filter for <img> tags ── */
img.ecv-duotone-brown {
	filter: url( #ecv-duotone-brown );
}
img.ecv-duotone-blue {
	filter: url( #ecv-duotone-blue );
}

/* ── Background-image containers: filter on ::before only ── */
:not(img).ecv-duotone-brown,
:not(img).ecv-duotone-blue {
	position: relative;
}

:not(img).ecv-duotone-brown::before,
:not(img).ecv-duotone-blue::before {
	content: '';
	position: absolute;
	inset: 0;
	background: inherit;
	border-radius: inherit;
	z-index: 0;
	pointer-events: none;
}

:not(img).ecv-duotone-brown::before {
	filter: url( #ecv-duotone-brown );
}
:not(img).ecv-duotone-blue::before {
	filter: url( #ecv-duotone-blue );
}

/* Content sits above the filtered background */
:not(img).ecv-duotone-brown > *,
:not(img).ecv-duotone-blue > * {
	position: relative;
	z-index: 1;
}