.mn-sticky-header {
	transition-property: transform, opacity, box-shadow, background-color, visibility;
	transition-timing-function: ease-in-out;
	will-change: transform, opacity;
}

.mn-sticky-header.mn-sticky-visible {
	visibility: visible !important;
	pointer-events: auto !important;
}

.mn-sticky-header.mn-sticky-hidden {
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

.mn-sticky-header.mn-sticky-active {
	position: fixed !important;
	width: 100% !important;
	max-width: 100vw !important;
	left: 0;
	right: 0;
}

/* Prevent sticky header from constraining fixed-position modals.
   When position:fixed + transform is used, it creates a new containing block,
   causing child fixed elements (modals) to be sized relative to the sticky container
   instead of the viewport. These rules force modals back to viewport dimensions. */
.mn-sticky-header .mna-modal-overlay,
.mn-sticky-header [class*="modal-overlay"] {
	position: fixed !important;
	width: 100vw !important;
	max-width: 100vw !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	transform: none !important;
}

.mn-sticky-header .mna-modal,
.mn-sticky-header [class*="modal-wrapper"] {
	max-width: min(420px, calc(100vw - 32px)) !important;
}

/* Fix dropdown positioning for mn-woocart inside sticky header.
   When sticky header is active with transform, absolute positioned dropdowns
   may overflow on mobile. Ensure they stay within viewport bounds. */
@media (max-width: 768px) {
	.mn-sticky-header .mn-woocart-dropdown {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		max-height: 70vh !important;
		border-radius: 16px 16px 0 0 !important;
		transform: none !important;
	}

	.mn-sticky-header .mn-woocart-wrapper.active .mn-woocart-dropdown {
		transform: none !important;
	}
}

/* Fix dropdown positioning for mna-bell (notification) inside sticky header */
@media (max-width: 768px) {
	.mn-sticky-header .mna-bell-dropdown {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		max-height: 70vh !important;
		border-radius: 16px 16px 0 0 !important;
		transform: none !important;
	}

	.mn-sticky-header .mna-bell-wrapper.open .mna-bell-dropdown {
		transform: none !important;
	}
}

/* Fix dropdown positioning for mna-dropdown-menu (user menu) inside sticky header */
@media (max-width: 768px) {
	.mn-sticky-header .mna-dropdown-menu {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		max-height: 70vh !important;
		border-radius: 16px 16px 0 0 !important;
		transform: none !important;
	}

	.mn-sticky-header .mna-user-dropdown.open .mna-dropdown-menu {
		transform: none !important;
	}
}

.mn-sticky-placeholder {
	width: 100%;
}

.mn-sticky-transition-fade.mn-sticky-visible {
	opacity: 1 !important;
}

.mn-sticky-transition-fade.mn-sticky-hidden {
	opacity: 0 !important;
}

.mn-sticky-transition-slide.mn-sticky-visible {
	transform: translateY(0);
	opacity: 1 !important;
}

.mn-sticky-transition-slide.mn-sticky-hidden {
	transform: translateY(-100%);
}

.mn-sticky-transition-slide_fade.mn-sticky-visible {
	transform: translateY(0);
	opacity: 1 !important;
}

.mn-sticky-transition-slide_fade.mn-sticky-hidden {
	transform: translateY(-100%);
	opacity: 0 !important;
}

.mn-sticky-transition-scale.mn-sticky-visible {
	transform: scale(1);
	opacity: 1 !important;
}

.mn-sticky-transition-scale.mn-sticky-hidden {
	transform: scale(0.95);
}

.mn-sticky-transition-scale_fade.mn-sticky-visible {
	transform: scale(1);
	opacity: 1 !important;
}

.mn-sticky-transition-scale_fade.mn-sticky-hidden {
	transform: scale(0.95);
	opacity: 0 !important;
}

@media (max-width: 1024px) {
	.mn-sticky-header.mn-sticky-active {
		position: fixed !important;
	}
}

@media (max-width: 768px) {
	.mn-sticky-header {
		transition-duration: 250ms !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-sticky-header {
		transition: none !important;
	}
}