/**
 * EU AI Label badge styles.
 *
 * Fixed, accessibility-first styling (no user customization):
 *  - Always visible on first exposure — no hover/focus/click reveal.
 *  - Opaque background so text contrast is guaranteed over ANY photo
 *    (#ffffff on #1d1d1b ≈ 16.8:1, well above WCAG 1.4.3 AA 4.5:1).
 *  - A light hairline border + drop shadow give the badge edge contrast
 *    against both light and dark images (WCAG 1.4.11 non-text contrast).
 *  - Font size fixed at 13px (≥ the 12px mobile-readability floor).
 *  - Pill shape, #1d1d1b fill, and uppercase label mirror the EU
 *    standardized AI labels; unlike the flat EU SVGs the opaque fill keeps
 *    it legible on any image, and the text stays localized via .mo.
 *  - Positioned bottom-left to stay clear of top-corner sale badges and
 *    mid-edge / bottom-center carousel controls.
 */

.eu-ai-label-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0;
	line-height: 0;
}

.eu-ai-label-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Collapsed-wrapper compatibility.

   Themes routinely render cards at a fixed aspect ratio: a container gets a
   `padding-top` ratio box and the image is absolutely positioned to fill it.
   Inserting our wrapper makes it that image's containing block, and because
   its only child is out of flow the wrapper collapses to zero size — the image
   then resolves inset/height against nothing and disappears, while the badge
   is clipped against the container's top edge.

   Stretching the wrapper over the same box restores the original geometry: it
   resolves against the exact ancestor the image used before, so the theme's
   own descendant image rules keep working unchanged (including fit-height and
   hover-zoom variants) and the badge still overlays the image.

   assets/js/layout-guard.js adds the modifier class to any wrapper whose image
   a theme takes out of flow; the named selectors cover the layouts we know, so
   those never flash an invisible image before scripts run. */
.eu-ai-label-wrap--stretch,
/* Elementor Posts and Archive Posts ratio cards. */
.elementor-post__thumbnail > .eu-ai-label-wrap,
/* Flatsome (UX Themes): equal-height product cards, cover containers, post
   formats and grid columns all fill a ratio box the same way. */
.has-equal-box-heights .box-image .eu-ai-label-wrap,
.grid-col .box-image .eu-ai-label-wrap,
.grid-col .image-cover .eu-ai-label-wrap,
.image-cover .eu-ai-label-wrap,
.has-format .eu-ai-label-wrap {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Flatsome's hover-swap image is absolutely positioned wherever it appears, so
   it is recognized by the image itself rather than by an ancestor container.
   Kept in a separate block on purpose: one unsupported selector invalidates a
   whole list, and browsers without :has() must still get the rules above. */
.eu-ai-label-wrap:has(> img.back-image) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Layouts that size the image with `width: 100%` rather than by its intrinsic
   size. A shrink-to-fit wrapper would resolve that percentage against the
   image's own width instead of the column, shrinking wide containers down to
   the file's pixel width, so the wrapper takes the full width instead.

   Elementor Pro and Royal Elementor Addons can render a single-post featured
   image as a raw <img> URL, without WordPress' attachment-image function; the
   compatibility layer wraps that image after resolving the post's thumbnail ID.
   Flatsome (UX Themes) sizes the single-product gallery the same way. */
.elementor-widget-theme-post-featured-image .eu-ai-label-wrap,
.elementor-widget-wpr-post-media .eu-ai-label-wrap,
.product-gallery-slider .eu-ai-label-wrap,
.product-thumbnails .eu-ai-label-wrap {
	display: block;
	width: 100%;
}

.eu-ai-label-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: calc(100% - 16px);
	padding: 4px 11px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	/* Fully-rounded pill to match the EU standardized labels. */
	border-radius: 999px;
	background: #1d1d1b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	/* Uppercase mirrors the EU label wordmark; display-only, so the
	   underlying aria-label / .mo text stays sentence case for screen
	   readers and non-Latin scripts are unaffected. */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	/* Allow wrapping so the disclosure text is never clipped or truncated. */
	white-space: normal;
	/* Always visible: no hover/focus reveal, no fade. */
	visibility: visible;
	opacity: 1;
	/* Purely informational overlay — never intercept clicks on the image. */
	pointer-events: none;
}

.eu-ai-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.42em;
	font-size: 1.05em;
	line-height: 1;
}

/* Elementor background images have no <img> node to provide a positioning
   context. JS adds this class only when Elementor left the wrapper static. */
.eu-ai-label-background-wrap--relative {
	position: relative;
}

/* Undisclosed-details variant: a compact "AI" circle rather than a text pill.
   Used when the editor discloses AI involvement but not what was changed.
   The two-class selector outranks the base .eu-ai-label-badge declarations. */
.eu-ai-label-badge.eu-ai-label--ai_undisclosed {
	justify-content: center;
	width: 34px;
	height: 34px;
	max-width: none;
	padding: 0;
	/* Perfect circle instead of the rounded pill. */
	border-radius: 50%;
	letter-spacing: 0.02em;
	/* Two glyphs never wrap; keep them centered on one line. */
	white-space: nowrap;
}

/* Position: bottom-left keeps clear of sale badges and carousel controls. */
.eu-ai-label-pos--bottom-left .eu-ai-label-badge {
	bottom: 8px;
	left: 8px;
}

.eu-ai-label-pos--bottom-right .eu-ai-label-badge {
	right: 8px;
	bottom: 8px;
}

.eu-ai-label-pos--top-left .eu-ai-label-badge {
	top: 8px;
	left: 8px;
}

.eu-ai-label-pos--top-right .eu-ai-label-badge {
	top: 8px;
	right: 8px;
}

/* Respect users who prefer higher contrast: drop the translucent border. */
@media (prefers-contrast: more) {
	.eu-ai-label-badge {
		border-color: #ffffff;
	}
}