#abz-announcement-bar {
	position: sticky;
	top: 0;
	z-index: 9999; /* must sit above the existing sticky header */
	background: var(--abz-bar-bg, #0b8746);
	color: var(--abz-bar-color, #fff);
	overflow: hidden;
	height: 32px;
	line-height: 32px;
	font-size: 12px;
	text-align: center;
}

#abz-announcement-bar .abz-bar-track {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#abz-announcement-bar .abz-bar-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}

#abz-announcement-bar .abz-bar-item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#abz-announcement-bar .abz-bar-item a {
	display: block;
	color: inherit;
	text-decoration: none;
	padding: 0 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#abz-announcement-bar .abz-bar-item a:hover {
	text-decoration: underline;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	#abz-announcement-bar .abz-bar-item {
		transition: none;
	}
}

/* Slightly larger on desktop */
@media (min-width: 1024px) {
	#abz-announcement-bar {
		height: 36px;
		line-height: 36px;
		font-size: 13px;
	}
}

/* ---------------------------------------------------------
 * Header stacking: keep the existing Elementor sticky header
 * (#abz-sticky-header) glued directly under the announcement
 * bar instead of overlapping it. Elementor's sticky script sets
 * an inline "top: 0px" style via JS, so !important is required
 * to win over it.
 * ------------------------------------------------------- */
#abz-sticky-header.elementor-sticky--active {
	top: var(--abz-bar-height, 32px) !important;
}

/* Mobile: the theme sets a body padding-top to reserve space for its
 * fixed header. Since that padding pushes ANY normal-flow content down
 * (including our bar, if it were "sticky"), the bar must be truly
 * position:fixed on mobile to sit above that reserved space instead of
 * being pushed below it. */
@media (max-width: 1024px) {
	#abz-announcement-bar {
		position: fixed;
		left: 0;
		right: 0;
		width: auto;
	}
}

/* Mobile: the theme's own native script removes the "position_top"
 * class on scroll-down, which drops position:fixed entirely and lets
 * the whole header scroll away with the page. We force it to always
 * stay fixed regardless of that class, so only OUR toolbar-hide
 * feature below controls what disappears. */
@media (max-width: 1024px) {
	header.head_mobile {
		position: fixed !important;
		top: var(--abz-bar-height, 32px) !important;
		left: 0 !important;
		right: 0 !important;
	}
}

/* Mobile: hide the icon toolbar (hamburger, login, logo, cart) on
 * scroll-down, keep the search box visible - mirrors the desktop
 * #abz-menu-row behavior. JS toggles .abz-hide-toolbar on the header. */
@media (max-width: 1024px) {
	header.head_mobile .container > *:not(.search_wrap_mobile) {
		transition: opacity 0.3s ease, max-height 0.3s ease;
		max-height: 300px; /* generous buffer, see abz-menu-row note above */
		overflow: hidden;
	}
	header.head_mobile.abz-hide-toolbar .container > *:not(.search_wrap_mobile) {
		opacity: 0;
		max-height: 0;
		pointer-events: none;
	}
}
@media (min-width: 1025px) {
	#abz-menu-row {
		transition: opacity 0.3s ease, max-height 0.3s ease;
		max-height: 160px; /* buffer: covers a transient 2-line wrap when the header briefly loses its fixed pixel width at scroll-top */
		overflow: visible;
	}
	#abz-menu-row.abz-hide {
		opacity: 0;
		max-height: 0;
		overflow: hidden;
	}
}

/* Fix: search blur mask was covering search results too - lower its z-index */
.search_mask .mweb-site-mask {
	z-index: 50 !important;
}