/*
 * Plexiwebshop sticky mobile header for Enfold.
 * The site switches to the tablet burger menu below 990px, so the same
 * breakpoint is used for the complete mobile header treatment.
 */

.pws-mobile-action {
	display: none !important;
}

@media only screen and (max-width: 989px) {
	.pws-mobile-header-enabled {
		--pws-mobile-header-height: 76px;
		--pws-mobile-header-bg: #1d1e20;
		--pws-mobile-header-icon: #ffffff;
		--pws-mobile-header-accent: #f6a313;
		--pws-mobile-action-width: 44px;
	}

	.responsive #top.pws-mobile-header-enabled #wrap_all #header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		height: var(--pws-mobile-header-height) !important;
		min-height: var(--pws-mobile-header-height) !important;
		background: var(--pws-mobile-header-bg) !important;
		box-shadow: 0 4px 14px rgb(0 0 0 / 16%);
		z-index: 10000;
	}

	.responsive #top.pws-mobile-header-enabled #main {
		padding-top: var(--pws-mobile-header-height) !important;
	}

	.pws-mobile-header-enabled #header_meta {
		display: none !important;
	}

	.pws-mobile-header-enabled #header_main,
	.pws-mobile-header-enabled #header_main .container.av-logo-container,
	.pws-mobile-header-enabled #header_main .inner-container {
		height: var(--pws-mobile-header-height) !important;
		min-height: var(--pws-mobile-header-height) !important;
	}

	.pws-mobile-header-enabled #header_main {
		background: var(--pws-mobile-header-bg) !important;
		border: 0 !important;
	}

	.pws-mobile-header-enabled #header_main .container.av-logo-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 12px !important;
		box-sizing: border-box;
	}

	.pws-mobile-header-enabled #header_main .inner-container {
		position: relative;
		width: 100%;
	}

	.pws-mobile-header-enabled #header_main .logo {
		display: flex !important;
		align-items: center;
		width: calc(100% - (4 * var(--pws-mobile-action-width))) !important;
		max-width: 190px !important;
		height: var(--pws-mobile-header-height) !important;
		padding: 0 !important;
	}

	/* The child theme also declares a forced 80px mobile logo height. */
	.responsive #top.pws-mobile-header-enabled #wrap_all #header #header_main .logo {
		height: var(--pws-mobile-header-height) !important;
		min-height: var(--pws-mobile-header-height) !important;
		max-height: var(--pws-mobile-header-height) !important;
		line-height: var(--pws-mobile-header-height) !important;
	}

	.pws-mobile-header-enabled #header_main .logo a {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.pws-mobile-header-enabled #header_main .logo img,
	.pws-mobile-header-enabled #header_main .logo svg {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 34px !important;
	}

	/* This site's 300x48 logo has the MKI block in its first 50 pixels.
	 * Crop only that known image; desktop and other logo assets are untouched.
	 * The remaining 250px wordmark fills the existing mobile logo slot. */
	#top.pws-mobile-header-enabled #header #header_main .logo a {
		overflow: hidden;
	}

	#top.pws-mobile-header-enabled #header #header_main .logo img[src*="/logo-dark-300x48.jpg"] {
		flex: 0 0 120% !important;
		width: 120% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin-left: -20% !important;
	}

	.pws-mobile-header-enabled #header_main .main_menu {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		width: calc(4 * var(--pws-mobile-action-width)) !important;
		height: var(--pws-mobile-header-height) !important;
		z-index: 110;
	}

	.pws-mobile-header-enabled #header_main .avia-menu,
	.pws-mobile-header-enabled #header_main .av-main-nav-wrap,
	.pws-mobile-header-enabled #header_main #avia-menu {
		position: relative !important;
		width: 100% !important;
		height: var(--pws-mobile-header-height) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.pws-mobile-header-enabled #avia-menu > .pws-mobile-action,
	.pws-mobile-header-enabled #avia-menu > #menu-item-search,
	.pws-mobile-header-enabled #avia-menu > .av-burger-menu-main {
		position: absolute !important;
		top: 0 !important;
		display: block !important;
		float: none !important;
		width: var(--pws-mobile-action-width) !important;
		height: var(--pws-mobile-header-height) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.pws-mobile-header-enabled #avia-menu > .pws-mobile-account {
		right: calc(3 * var(--pws-mobile-action-width)) !important;
	}

	.pws-mobile-header-enabled #avia-menu > #menu-item-search {
		right: calc(2 * var(--pws-mobile-action-width)) !important;
	}

	.pws-mobile-header-enabled #avia-menu > .pws-mobile-cart {
		right: var(--pws-mobile-action-width) !important;
	}

	.pws-mobile-header-enabled #avia-menu > .av-burger-menu-main {
		right: 0 !important;
	}

	.pws-mobile-header-enabled #avia-menu > .pws-mobile-action > a,
	.pws-mobile-header-enabled #avia-menu > #menu-item-search > a,
	.pws-mobile-header-enabled #avia-menu > .av-burger-menu-main > a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: var(--pws-mobile-action-width) !important;
		height: var(--pws-mobile-header-height) !important;
		min-width: var(--pws-mobile-action-width);
		padding: 0 !important;
		border: 0 !important;
		line-height: 1 !important;
		color: var(--pws-mobile-header-icon) !important;
		background: transparent !important;
	}

	.pws-mobile-header-enabled .pws-mobile-icon,
	.pws-mobile-header-enabled #menu-item-search > a > svg {
		display: block;
		width: 25px;
		height: 25px;
	}

	.pws-mobile-header-enabled .pws-mobile-icon svg {
		display: block;
		width: 100%;
		height: 100%;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.pws-mobile-header-enabled #menu-item-search > a svg {
		position: static !important;
		flex: 0 0 25px !important;
		width: 25px !important;
		min-width: 25px !important;
		max-width: 25px !important;
		height: 25px !important;
		fill: currentColor;
	}

	/* Existing child-theme CSS adds the word "Keresés" using ::after. */
	.pws-mobile-header-enabled #menu-item-search > a::after {
		display: none !important;
		content: none !important;
	}

	.pws-mobile-header-enabled #avia-menu > .av-burger-menu-main .av-hamburger,
	.pws-mobile-header-enabled #avia-menu > .av-burger-menu-main .av-hamburger-box {
		display: block;
	}

	/* Existing child-theme CSS pushes the hamburger 50px outside its slot. */
	.pws-mobile-header-enabled #avia-menu > .av-burger-menu-main .av-hamburger {
		margin: 0 !important;
	}

	.pws-mobile-header-enabled .av-hamburger-inner,
	.pws-mobile-header-enabled .av-hamburger-inner::before,
	.pws-mobile-header-enabled .av-hamburger-inner::after {
		background-color: currentColor !important;
	}

	.pws-mobile-header-enabled .pws-mobile-cart-link {
		position: relative;
	}

	.pws-mobile-header-enabled .pws-mobile-cart-count {
		position: absolute;
		top: 12px;
		right: 1px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border: 2px solid var(--pws-mobile-header-bg);
		border-radius: 999px;
		background: currentColor;
		color: #111111;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		box-sizing: border-box;
	}

	/* The custom cart replaces Enfold's separate mobile cart dropdown. */
	.pws-mobile-header-enabled #header_main #menu-item-shop {
		display: none !important;
	}

	/* Touch can leave :hover / :focus behind. Only :active gets the accent.
	 * The IDs also outrank Enfold's current-page and open-overlay rules. */
	#top.pws-mobile-header-enabled #header #avia-menu > :is(.pws-mobile-action, #menu-item-search, .av-burger-menu-main) > a,
	#top.pws-mobile-header-enabled #header #avia-menu > :is(.pws-mobile-action, #menu-item-search, .av-burger-menu-main) > a:is(:link, :visited, :hover, :focus) {
		color: var(--pws-mobile-header-icon) !important;
		background: transparent !important;
		outline: none !important;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent;
		transition: none !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > :is(.pws-mobile-action, #menu-item-search, .av-burger-menu-main) > a:active {
		color: var(--pws-mobile-header-accent) !important;
	}

	/* A keyboard-only white focus cue does not leave an orange tap frame. */
	#top.pws-mobile-header-enabled #header #avia-menu > :is(.pws-mobile-action, #menu-item-search, .av-burger-menu-main) > a:focus-visible {
		outline: 2px dotted var(--pws-mobile-header-icon) !important;
		outline-offset: -5px;
	}

	/* The badge text must keep its own dark colour on the white background. */
	#top.pws-mobile-header-enabled #header #avia-menu > :is(.pws-mobile-action, #menu-item-search, .av-burger-menu-main) > a :is(span, svg, path, circle):not(.pws-mobile-cart-count) {
		color: inherit !important;
	}

	/* Enfold explicitly changes SVG fill/stroke on hover and focus. */
	#top.pws-mobile-header-enabled #header #avia-menu > .pws-mobile-action > a .pws-mobile-icon :is(svg, path, circle) {
		fill: none !important;
		stroke: currentColor !important;
		transition: none !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > #menu-item-search > a :is(svg, path) {
		fill: currentColor !important;
		stroke: none !important;
		transition: none !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > .av-burger-menu-main > a .av-hamburger-inner,
	#top.pws-mobile-header-enabled #header #avia-menu > .av-burger-menu-main > a .av-hamburger-inner::before,
	#top.pws-mobile-header-enabled #header #avia-menu > .av-burger-menu-main > a .av-hamburger-inner::after {
		background-color: currentColor !important;
		/* Keep Enfold's spin animation, but restore colour immediately. */
		transition-property: transform, top, bottom, opacity !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > .pws-mobile-cart > a .pws-mobile-cart-count {
		color: #111111 !important;
		background-color: var(--pws-mobile-header-icon) !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > .pws-mobile-cart > a:active .pws-mobile-cart-count {
		background-color: var(--pws-mobile-header-accent) !important;
	}

	/* Enfold should not duplicate the icon-only controls in the burger overlay. */
	.pws-mobile-header-enabled .av-burger-overlay .pws-mobile-action {
		display: none !important;
	}

	/* Enfold appends the overlay beside #avia-menu. The UL must not create
	 * a stacking context above that overlay: only the close control belongs
	 * above it. The cart (including any AJAX-replaced badge) stays behind. */
	#top.pws-mobile-header-enabled #header #avia-menu {
		z-index: auto !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > :is(.pws-mobile-action, #menu-item-search) {
		z-index: 20 !important;
	}

	#top.pws-mobile-header-enabled #header .av-burger-overlay {
		z-index: 100 !important;
	}

	#top.pws-mobile-header-enabled #header #avia-menu > .av-burger-menu-main {
		z-index: 200 !important;
	}

	html.av-burger-overlay-active #top.pws-mobile-header-enabled #header #header_main #avia-menu > .av-burger-menu-main > a {
		color: #000000 !important;
	}

	html.av-burger-overlay-active #top.pws-mobile-header-enabled #header #header_main #avia-menu > .av-burger-menu-main > a:focus-visible {
		outline-color: #000000 !important;
	}
}

@media only screen and (max-width: 782px) {
	body#top.admin-bar.pws-mobile-header-enabled #wrap_all #header {
		top: 46px;
	}
}

@media only screen and (min-width: 783px) and (max-width: 989px) {
	body#top.admin-bar.pws-mobile-header-enabled #wrap_all #header {
		top: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pws-mobile-header-enabled #header *,
	.pws-mobile-header-enabled #header *::before,
	.pws-mobile-header-enabled #header *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}