/**
 * Elementor compatibility layer.
 * The original design assumes each section is a direct child of the page body,
 * so these rules remove the padding and width limits Elementor adds around a widget.
 */

/* Let every Black Essence widget span the full column width */
.elementor-widget-be_header > .elementor-widget-container,
.elementor-widget-be_hero > .elementor-widget-container,
.elementor-widget-be_trust > .elementor-widget-container,
.elementor-widget-be_intro > .elementor-widget-container,
.elementor-widget-be_lab_report > .elementor-widget-container,
.elementor-widget-be_product > .elementor-widget-container,
.elementor-widget-be_offers > .elementor-widget-container,
.elementor-widget-be_ritual > .elementor-widget-container,
.elementor-widget-be_reviews > .elementor-widget-container,
.elementor-widget-be_faq > .elementor-widget-container,
.elementor-widget-be_closing > .elementor-widget-container,
.elementor-widget-be_checkout > .elementor-widget-container,
.elementor-widget-be_contact > .elementor-widget-container,
.elementor-widget-be_footer > .elementor-widget-container {
	margin: 0;
	padding: 0;
	max-width: none;
}

/* Elementor normalises img display; restore the original behaviour */
.elementor-widget-container .hero-slide,
.elementor-widget-container .offer-product-card img,
.elementor-widget-container .review-gallery img,
.elementor-widget-container .be-checkout__image {
	display: block;
}

/* Hello Elementor adds a default button reset that fights the design */
.elementor-widget-container .btn,
.elementor-widget-container .nav-cta,
.elementor-widget-container .be-checkout__submit {
	font-family: inherit;
}

/**
 * Mobile menu.
 * The original React build only rendered .mobile-menu while it was open, so the
 * design stylesheet shows it unconditionally below 767px. Here it is always in the
 * markup, so it stays hidden until the header carries the .menu-open class.
 */
@media (max-width: 767px) {
	.site-header .mobile-menu {
		display: none;
	}

	.site-header.menu-open .mobile-menu {
		display: grid;
	}
}

/**
 * Full-bleed sections.
 * In the original build every section is a direct child of the body, so its
 * background runs edge to edge while the inner .container keeps the 1240px width.
 * Inside Elementor a boxed container would clip those backgrounds, so each section
 * breaks out to the viewport width again. The inner .container is untouched.
 */
.announcement[data-be-header-part],
.site-header[data-be-header-part],
.elementor-widget-be_hero .hero,
.elementor-widget-be_trust .trust-strip,
.elementor-widget-be_intro .intro,
.elementor-widget-be_lab_report .lab-report-section,
.elementor-widget-be_product .product-section,
.elementor-widget-be_offers .offers,
.elementor-widget-be_ritual .ritual,
.elementor-widget-be_reviews .quote-section,
.elementor-widget-be_faq .faq-section,
.elementor-widget-be_closing .closing,
.elementor-widget-be_checkout .be-checkout,
.elementor-widget-be_contact .contact-strip,
.elementor-widget-be_footer .footer {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/**
 * Sticky behaviour.
 * The announcement bar is rendered as a sibling above .site-header, not inside it,
 * so it scrolls away normally while only the white nav bar pins to the top.
 */
.site-header[data-be-header-part] {
	position: sticky;
	top: 0;
	z-index: 40;
}

/**
 * 100vw includes the scrollbar, which would add a sliver of horizontal scroll.
 * overflow-x: clip removes it without breaking the sticky header, unlike
 * overflow-x: hidden.
 */
body:has(.elementor-widget-be_header),
body:has(.elementor-widget-be_hero),
body:has(.elementor-widget-be_footer) {
	overflow-x: clip;
}

/**
 * Theme class collision.
 * Hello Elementor styles its own header with the same .site-header class
 * (display:flex, padding-block 1rem, position:relative), which adds white space
 * above and below the Black Essence header and breaks the sticky behaviour.
 * These rules restore the original design values.
 */
.site-header[data-be-header-part] {
	display: block;
	flex-wrap: initial;
	justify-content: initial;
	padding: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	position: sticky;
	top: 0;
}

/**
 * Sticky needs a taller ancestor.
 * position: sticky only travels inside its parent's box, and Elementor wraps every
 * widget in .elementor-widget > .elementor-widget-container, which is exactly as tall
 * as the header itself — so the header would never actually stick.
 * Taking those two wrappers out of the layout promotes .announcement and .site-header
 * to direct children of the Elementor container, which spans the page, giving the
 * sticky header the room it needs.
 *
 * Front end only: inside the editor the wrappers stay so Elementor keeps its handles.
 */
body:not(.elementor-editor-active) .elementor-widget-be_header,
body:not(.elementor-editor-active) .elementor-widget-be_header > .elementor-widget-container {
	display: contents;
}