/* ==========================================================================
   HIMPEL overlap — the two classes himpel-overlap.js adds
   --------------------------------------------------------------------------
   Both class names belong to this plugin and are put on elements by the script
   itself. Nothing here targets the theme.
   ========================================================================== */

.himpel-overlap-wrap {
	position: relative;
}

/*
 * The section being covered. It pins to the top of the window and stays there
 * while the next section climbs over it, then releases at the wrapper's bottom
 * edge — which is what stops it showing through everything further down.
 *
 * z-index 0 keeps it under the covering section, which carries z-index 2.
 */
.himpel-sticky-host {
	position: sticky;
	top: var(--himpel-sticky-top, 0px);
	z-index: 0;
}

/*
 * himpel-overlap.js re-parents both branches into the wrapper as a plain
 * block, which becomes a direct child of Elementor's flex container. A flex
 * item's default min-width is its content's own minimum, not 0 — Elementor
 * gives its own .elementor-widget children min-width: 0 to prevent exactly
 * this, but a script-inserted wrapper carries no such class. Left alone, the
 * wrapper stayed at its intrinsic desktop width and sat off screen to the
 * right on any viewport narrower than that, which is what broke this on
 * phones and tablets.
 *
 * .himpel-sticky-host deliberately carries none of this. On an Elementor page
 * it is a normal-flow child of the now-fixed wrapper and needs nothing more.
 * On a WooCommerce/WPBakery product page it IS the bleeding section itself —
 * himpel-bleed.js pulls it past its container with negative margins on an
 * auto width, and a width or max-width set here would cap that growth right
 * back down, undoing the bleed and leaving a gap down one side.
 */
.himpel-overlap-wrap {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/*
 * Inside the Elementor editor the pin only gets in the way of dragging things
 * around, and the editor's own scroll container breaks it anyway.
 */
.elementor-editor-active .himpel-sticky-host {
	position: relative;
}