/* Initial state — transparent header on single product pages. */
.single-product .left-nav-menu {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.single-product .top-nav-menu-container {
	background-color: transparent !important;
	transition: background-color 0.3s ease-in-out;
}

.single-product [data-id="957c690"] {
	background-color: transparent !important;
	transition: background-color 0.3s ease-in-out;
}

/* White logo on initial load — desktop only. */
@media ( min-width: 1025px ) {
	.single-product .logo-wrapper img,
	.single-product [data-id="20e853f"] img {
		filter: brightness(0) invert(1);
		transition: filter 0.3s ease-in-out;
	}
}

/* Scrolled state — reveal header and left nav. */
.single-product.scrolled .left-nav-menu {
	opacity: 1;
}

.single-product.scrolled .top-nav-menu-container {
	background-color: #fefaf8 !important;
}

.single-product.scrolled [data-id="957c690"] {
	background-color: #fefaf8 !important;
}

/* Pass clicks through the transparent header at the top. */
.single-product:not(.scrolled) [data-id="957c690"] {
	pointer-events: none;
}

/* Re-enable clicks on interactive elements inside the header. */
.single-product:not(.scrolled) [data-id="957c690"] a,
.single-product:not(.scrolled) [data-id="957c690"] button,
.single-product:not(.scrolled) [data-id="957c690"] .elementor-nav-menu {
	pointer-events: auto;
}

/* Return logo to black when scrolled. */
.single-product.scrolled .logo-wrapper img,
.single-product.scrolled [data-id="20e853f"] img {
	filter: none;
}