/**
 * Vermelle home hero layout contract.
 *
 * Elementor's historic per-slide Custom CSS contains several viewport-height
 * transforms and different alignment rules for each slide.  This active child
 * layer deliberately normalises those rules so that adding a slide does not
 * require another breakpoint patch.
 *
 * Future tuning belongs in the variables below:
 * --vermelle-hero-content-x      horizontal content anchor
 * --vermelle-hero-content-shift-y vertical adjustment from the hero centre
 * --vermelle-hero-content-width  maximum content width
 * --vermelle-hero-image-x/y      image focal point
 * --vermelle-hero-cta-offset-y   CTA row offset from the content anchor
 */
body.home .elementor-element.elementor-element-4f0dba8 {
	--vermelle-hero-content-x: clamp(72px, 10vw, 180px);
	--vermelle-hero-content-shift-y: -5%;
	--vermelle-hero-content-width: 560px;
	--vermelle-hero-image-x: 50%;
	--vermelle-hero-image-y: 18%;
	--vermelle-hero-arrow-width: 72px;
	--vermelle-hero-cta-offset-y: 133px;
	--vermelle-hero-arrow-y: calc(50% + var(--vermelle-hero-content-shift-y) + var(--vermelle-hero-cta-offset-y));
}

/* Keep the tea leaves in frame without reintroducing height-based movement. */
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21 {
	--vermelle-hero-image-y: 28%;
}

/*
 * Readability haze belongs to the active child layer. Elementor retained the
 * rules in page metadata but did not emit them into its generated stylesheet.
 */
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-b9f2c81.c-ip-slider__item--full,
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21.c-ip-slider__item--full {
	position: relative !important;
}

body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-b9f2c81.c-ip-slider__item--full::before,
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21.c-ip-slider__item--full::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-b9f2c81.c-ip-slider__item--full::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.28) 118px, rgba(255, 255, 255, 0) 260px);
}

body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21.c-ip-slider__item--full::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.34) 118px, rgba(255, 255, 255, 0) 290px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.54) 38%, rgba(255, 255, 255, 0.18) 66%, rgba(255, 255, 255, 0) 100%);
}

/* The section is only a neutral fallback. Each slide owns its media layer. */
body.home .elementor-element.elementor-element-bfde35b:not(.elementor-motion-effects-element-type-background),
body.home .elementor-element.elementor-element-bfde35b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #f6f1ea;
	background-image: none !important;
}

body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-7d760f1.c-ip-slider__item--full {
	background-color: #f6f1ea;
	background-image: url("/wp-content/uploads/2026/05/Vermelle_header.webp");
	background-position: var(--vermelle-hero-image-x) var(--vermelle-hero-image-y) !important;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Stable widescreen geometry: no 1536/1920 width jump. */
@media (min-width: 1025px) {
	body.home .c-ip-slider--full .c-ip-slider__item--full {
		height: 85vh;
		min-height: 700px;
		max-height: 1050px;
	}
}

/*
 * One composition for every slide.  The old Elementor rules used different
 * centring and vh-based translateY values, which caused both horizontal and
 * vertical jumps.  The content block now has one shared anchor slightly above
 * the hero midpoint; viewport height changes no longer select a new offset.
 */
body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full {
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	padding-top: 0 !important;
	padding-right: var(--vermelle-hero-content-x) !important;
	padding-bottom: 0 !important;
	padding-left: var(--vermelle-hero-content-x) !important;
	overflow: hidden !important;
}

body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full .c-ip-slider__wrap,
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-7d760f1 .c-ip-slider__wrap,
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-b9f2c81 .c-ip-slider__wrap,
body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21 .c-ip-slider__wrap {
	position: relative !important;
	top: var(--vermelle-hero-content-shift-y) !important;
	z-index: 2 !important;
	width: min(var(--vermelle-hero-content-width), calc(100vw - (2 * var(--vermelle-hero-content-x)))) !important;
	max-width: var(--vermelle-hero-content-width) !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-bottom: 0 !important;
	transform: none !important;
}

body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full .c-ip-slider__description,
body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full .c-ip-slider__text-above {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Crop from the bottom as the hero gets shorter; never move the image upward. */
body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full .c-ip-slider__image {
	z-index: 0 !important;
	object-position: var(--vermelle-hero-image-x) var(--vermelle-hero-image-y) !important;
}

/* Keep navigation in a separate edge lane from the content. */
body.home .elementor-element.elementor-element-4f0dba8 .h-carousel--inner .owl-prev,
body.home .elementor-element.elementor-element-4f0dba8 .h-carousel--inner .owl-next {
	top: var(--vermelle-hero-arrow-y) !important;
	bottom: auto !important;
	width: var(--vermelle-hero-arrow-width) !important;
	transform: translateY(-50%) !important;
}

body.home .elementor-element.elementor-element-4f0dba8 .owl-dots {
	top: auto !important;
	right: auto !important;
	bottom: 24px !important;
	left: var(--vermelle-hero-content-x) !important;
	transform: none !important;
	z-index: 5;
}

/* Tablet: fixed safe lanes prevent the arrows and CTA from colliding. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.home .elementor-element.elementor-element-4f0dba8 {
		--vermelle-hero-content-x: 96px;
		--vermelle-hero-content-width: 520px;
		--vermelle-hero-arrow-width: 64px;
		--vermelle-hero-cta-offset-y: 147px;
	}
}

/* Mobile has no carousel arrows, so a centred presentation is intentional. */
@media (max-width: 767px) {
	body.home .elementor-element.elementor-element-4f0dba8 {
		--vermelle-hero-content-x: 24px;
		--vermelle-hero-content-width: 330px;
	}

	body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full {
		height: clamp(600px, 76svh, 680px) !important;
		min-height: 600px !important;
		max-height: 680px !important;
		justify-content: center !important;
		text-align: center !important;
		padding-bottom: 0 !important;
	}

	body.home .elementor-element.elementor-element-4f0dba8 .c-ip-slider__item--full .c-ip-slider__wrap {
		margin-right: auto !important;
		margin-left: auto !important;
	}

	/* Product slides share the same left reading edge on narrow screens. */
	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21 .c-ip-slider__wrap,
	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21 .c-ip-slider__text-above,
	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21 .c-ip-slider__title,
	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21 .c-ip-slider__description {
		text-align: left !important;
	}

	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-7d760f1.c-ip-slider__item--full {
		background-image: url("/wp-content/uploads/2026/05/Vermelle_header_done-copy.avif");
	}

	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-b9f2c81.c-ip-slider__item--full::before {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 46%, rgba(255, 255, 255, 0.28) 70%, rgba(255, 255, 255, 0) 100%);
	}

	body.home .elementor-element.elementor-element-4f0dba8 .elementor-repeater-item-c7e4a21.c-ip-slider__item--full::before {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.56) 40%, rgba(255, 255, 255, 0.16) 70%, rgba(255, 255, 255, 0) 100%);
	}

	body.home .elementor-element.elementor-element-4f0dba8 .owl-dots {
		display: none !important;
	}
}