/* Shared first-screen composition for the three product collection pages. */
body.page-id-2610 .elementor-element-25b6e24.pargatz-collection-hero,
body.page-id-2642 .elementor-element-25b6e24.pargatz-collection-hero,
body.page-id-2656 .elementor-element-25b6e24.pargatz-collection-hero {
	/* The hero is intentionally taller than the viewport. The first 100svh
	 * is the cover and the remaining 30% is the transition behind products. */
	--pargatz-collection-image-height: 130svh;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: none !important;
	min-height: var(--pargatz-collection-image-height) !important;
	margin-bottom: 0 !important;
	background: #fff !important;
	isolation: isolate;
	overflow: visible !important;
}

/* The image is a true hero canvas. Future cover artwork will keep the same
 * framing instead of inheriting the source image's intrinsic height. */
body.page-id-2610 .pargatz-collection-hero > .elementor-element-c46815f,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-c46815f,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-c46815f {
	position: relative !important;
	z-index: 0;
	flex: 0 0 auto !important;
	width: 100% !important;
	height: var(--pargatz-collection-image-height) !important;
	min-height: var(--pargatz-collection-image-height) !important;
	margin: 0 !important;
	overflow: hidden !important;
}

body.page-id-2610 .pargatz-collection-hero > .elementor-element-c46815f > .elementor-widget-container,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-c46815f > .elementor-widget-container,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-c46815f > .elementor-widget-container,
body.page-id-2610 .pargatz-collection-hero > .elementor-element-c46815f picture,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-c46815f picture,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-c46815f picture,
body.page-id-2610 .pargatz-collection-hero > .elementor-element-c46815f img,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-c46815f img,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-c46815f img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

body.page-id-2610 .pargatz-collection-hero > .elementor-element-c46815f img,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-c46815f img,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-c46815f img {
	object-fit: cover !important;
	object-position: center top !important;
}

/* Fade the artwork into the clean product area, like the supplied reference. */
body.page-id-2610 .pargatz-collection-hero::before,
body.page-id-2642 .pargatz-collection-hero::before,
body.page-id-2656 .pargatz-collection-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--pargatz-collection-image-height);
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, 0) 52%,
		rgba(255, 255, 255, .04) 66%,
		rgba(255, 255, 255, .72) 88%,
		#fff 100%
	);
	pointer-events: none;
}

/* The existing carousel keeps its content and controls. Only its overlap is
 * recalculated so the card row lands lower on the hero without being clipped. */
body.page-id-2610 .pargatz-collection-hero > .elementor-element-e906f69,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-e906f69,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-e906f69 {
	position: relative !important;
	z-index: 3;
	flex: 0 0 auto !important;
	width: 100% !important;
	margin: 0 !important;
}

body.page-id-2610 .pargatz-collection-hero > .elementor-element-e906f69 > .elementor-widget-container,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-e906f69 > .elementor-widget-container,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-e906f69 > .elementor-widget-container {
	/* Keep the full first viewport dedicated to the hero. The product row
	 * starts slightly below it and continues through the extra 30% canvas. */
	margin-top: calc(-25svh) !important;
}

body.page-id-2610 .pargatz-collection-hero > .elementor-element-3c598e6,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-3c598e6,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-3c598e6,
body.page-id-2610 .pargatz-collection-hero > .elementor-element-f5c9617,
body.page-id-2642 .pargatz-collection-hero > .elementor-element-f5c9617,
body.page-id-2656 .pargatz-collection-hero > .elementor-element-f5c9617 {
	position: relative;
	z-index: 4;
}

/* Reuse the same visual cue used by the watch and glasses heroes. */
body.page-id-2610 .pargatz-collection-scroll-cue,
body.page-id-2642 .pargatz-collection-scroll-cue,
body.page-id-2656 .pargatz-collection-scroll-cue {
	position: fixed;
	left: 50%;
	bottom: clamp(22px, 4vh, 46px);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: #111;
	text-shadow: 0 1px 8px rgba(255, 255, 255, .8);
	transform: translate3d(-50%, 0, 0);
	transition: opacity 260ms ease, transform 400ms ease;
	pointer-events: none;
}

body.page-id-2610 .pargatz-collection-scroll-cue__label,
body.page-id-2642 .pargatz-collection-scroll-cue__label,
body.page-id-2656 .pargatz-collection-scroll-cue__label {
	font-size: clamp(10px, .7vw, 12px);
	font-weight: 700;
	letter-spacing: .24em;
	line-height: 1;
	white-space: nowrap;
}

body.page-id-2610 .pargatz-collection-scroll-cue__arrow,
body.page-id-2642 .pargatz-collection-scroll-cue__arrow,
body.page-id-2656 .pargatz-collection-scroll-cue__arrow {
	width: 13px;
	height: 13px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	animation: pargatz-collection-scroll-cue-bounce 1.35s ease-in-out infinite;
}

body.page-id-2610 .pargatz-collection-hero.is-scrolled .pargatz-collection-scroll-cue,
body.page-id-2642 .pargatz-collection-hero.is-scrolled .pargatz-collection-scroll-cue,
body.page-id-2656 .pargatz-collection-hero.is-scrolled .pargatz-collection-scroll-cue {
	opacity: 0;
	transform: translate3d(-50%, 16px, 0);
}

@keyframes pargatz-collection-scroll-cue-bounce {
	0%, 100% { transform: translateY(0) rotate(45deg); }
	50% { transform: translateY(6px) rotate(45deg); }
}

@media (max-width: 767px) {
	body.page-id-2610 .elementor-element-25b6e24.pargatz-collection-hero,
	body.page-id-2642 .elementor-element-25b6e24.pargatz-collection-hero,
	body.page-id-2656 .elementor-element-25b6e24.pargatz-collection-hero {
		--pargatz-collection-image-height: 130svh;
	}

	body.page-id-2610 .pargatz-collection-hero::before,
	body.page-id-2642 .pargatz-collection-hero::before,
	body.page-id-2656 .pargatz-collection-hero::before {
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0,
			rgba(255, 255, 255, 0) 48%,
			rgba(255, 255, 255, .04) 64%,
			rgba(255, 255, 255, .72) 88%,
			#fff 100%
		);
	}

	body.page-id-2610 .pargatz-collection-hero > .elementor-element-e906f69 > .elementor-widget-container,
	body.page-id-2642 .pargatz-collection-hero > .elementor-element-e906f69 > .elementor-widget-container,
	body.page-id-2656 .pargatz-collection-hero > .elementor-element-e906f69 > .elementor-widget-container {
		margin-top: calc(-40svh) !important;
	}

	/* Mobile uses the same full-height canvas, with cover framing as requested. */
	body.page-id-2610 .pargatz-collection-hero > .elementor-element-c46815f img,
	body.page-id-2642 .pargatz-collection-hero > .elementor-element-c46815f img,
	body.page-id-2656 .pargatz-collection-hero > .elementor-element-c46815f img {
		object-fit: cover !important;
		object-position: center top !important;
	}

	body.page-id-2610 .pargatz-collection-scroll-cue,
	body.page-id-2642 .pargatz-collection-scroll-cue,
	body.page-id-2656 .pargatz-collection-scroll-cue {
		position: absolute;
		top: calc(100svh - 68px);
		bottom: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-2610 .pargatz-collection-scroll-cue,
	body.page-id-2642 .pargatz-collection-scroll-cue,
	body.page-id-2656 .pargatz-collection-scroll-cue {
		transition: none;
	}

	body.page-id-2610 .pargatz-collection-scroll-cue__arrow,
	body.page-id-2642 .pargatz-collection-scroll-cue__arrow,
	body.page-id-2656 .pargatz-collection-scroll-cue__arrow {
		animation: none;
	}
}