/* Aylmer Repair — Equipment Panels (front end). Sizes are in cqw so the panel scales like the old 16:9 video. */
.arep-panel {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--arep-bg, #e56927);
	container-type: inline-size;
	isolation: isolate;
	line-height: 0;
}

/* The panel has no intrinsic width, so a wrapping Elementor column (the home boxes on phones)
 * would size it at 0 px tall. Give its widget the full width, as Elementor does for the Video widget.
 * .arep-host is set by panel.js for browsers without :has(). */
.e-con .elementor-widget-shortcode:has(.arep-panel),
.e-con .elementor-widget.arep-host {
	width: 100%;
}

.arep-word {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	font-size: var(--arep-size, 28.65cqw);
	line-height: 1;
	letter-spacing: var(--arep-ls, -0.05em);
	color: var(--arep-fg, #e68556);
	/* --arep-dx / --arep-dy centre the ink (not the advance box); panel.js refines them per word */
	transform: translate(-50%, -50%) translate(var(--arep-dx, calc(var(--arep-ls, -0.05em) / 2)), var(--arep-dy, 0.0135em));
}

.arep-slides {
	position: absolute;
	inset: 0;
}

.arep-slide {
	position: absolute;
	inset: 0;
	will-change: transform, opacity;
}

/* Without JS (or with reduced motion) only the first product shows, centred. */
.arep-slide:not(:first-child) {
	opacity: 0;
}

.arep-panel .arep-slide img {
	position: absolute;
	left: calc(50% + var(--arep-x, 0%));
	top: calc(50% + var(--arep-y, 0%));
	width: var(--arep-w, 60%);
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: translate(-50%, -50%);
}

.arep-panel .arep-slide.has-shadow img {
	filter: drop-shadow(0 0.35cqw 0.9cqw rgba(0, 0, 0, 0.35));
}