.xtool-tb-sticky--top {
	position: sticky;
	top: 0;
	z-index: 999;
}

.xtool-tb-sticky--bottom {
	position: sticky;
	bottom: 0;
	z-index: 999;
}

.xtool-tb-sticky--top.is-scrolled {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.25s ease;
}

.xtool-tb-transparent:not(.is-scrolled) {
	background: transparent !important;
	box-shadow: none !important;
}

.xtool-tb-location--boxed {
	box-sizing: border-box;
}

/* Removes this wrapper as a containing block so any position:sticky
   element inside it (e.g. Motion Effects' Sticky control on a header's
   own Container) gets real room to stick, instead of being trapped by a
   wrapper whose auto height always exactly equals its one child's height.
   See includes/theme-builder/class-module.php do_location(). */
.xtool-tb-location--transparent-box {
	display: contents;
}

/* Elementor's own document renderer additionally wraps every template's
   content in its own `.elementor.elementor-{id}` div (get_builder_content_
   for_display() — standard Elementor markup, not something Xtool's PHP
   controls or can omit). That div has the exact same shape as the one
   above — auto height, hugging whatever rows/containers the header/footer
   template author placed inside it — so it re-introduces the identical
   "not enough room to stick" limit one level deeper, e.g. a header built
   as two stacked sibling rows (a top bar + a nav row) where only the nav
   row is sticky: without this rule, the nav can only stick for the height
   of the top bar row (its ONLY spare room inside Elementor's own wrapper),
   not the whole page, and un-sticks the moment that's scrolled past — a
   different symptom (briefly sticky, not "not sticky at all") from the
   single-child case fixed above, but the identical root cause. CSS child
   combinators still match actual DOM structure regardless of the parent's
   own display:contents, so this reaches Elementor's wrapper correctly. */
.xtool-tb-location--transparent-box > .elementor {
	display: contents;
}