/* Desktop Haibike navigation: keep nested levels in independent flyout panels
 * instead of expanding every child inside the narrow E-Bikes column. */
@media (min-width: 1025px) {
	#primary-nav #menu-item-20350,
	#primary-nav #menu-item-20352,
	#primary-nav #menu-item-20358 {
		position: relative !important;
	}

	#primary-nav #menu-item-20350 > a,
	#primary-nav #menu-item-20352 > a,
	#primary-nav #menu-item-20358 > a {
		position: relative;
		z-index: 2;
		display: block;
		padding-right: 46px !important;
	}

	#primary-nav #menu-item-20350 > .submenu-expander,
	#primary-nav #menu-item-20352 > .submenu-expander,
	#primary-nav #menu-item-20358 > .submenu-expander {
		top: 50% !important;
		right: 10px !important;
		left: auto !important;
		z-index: 4;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin: 0;
		padding: 0;
		transform: translateY(-50%) rotate(-90deg);
		border: 0 !important;
		border-radius: 50%;
		background: transparent !important;
		color: #555;
		cursor: pointer;
	}

	#primary-nav #menu-item-20350:hover > .submenu-expander,
	#primary-nav #menu-item-20350:focus-within > .submenu-expander,
	#primary-nav #menu-item-20352:hover > .submenu-expander,
	#primary-nav #menu-item-20352:focus-within > .submenu-expander,
	#primary-nav #menu-item-20358:hover > .submenu-expander,
	#primary-nav #menu-item-20358:focus-within > .submenu-expander {
		background: #f1f2f3 !important;
		color: #111;
	}

	#primary-nav #menu-item-20350 > .nav-item-children,
	#primary-nav #menu-item-20352 > .nav-item-children,
	#primary-nav #menu-item-20358 > .nav-item-children {
		position: absolute !important;
		top: -12px !important;
		left: calc(100% + 2px) !important;
		z-index: 9999 !important;
		display: block !important;
		min-width: 270px;
		margin: 0 !important;
		padding: 12px 0 !important;
		transform: translateX(8px);
		border: 1px solid #ececec;
		background: #fff;
		box-shadow: 0 12px 30px rgba(17, 17, 17, .12);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
	}

	#primary-nav #menu-item-20350:hover > .nav-item-children,
	#primary-nav #menu-item-20350:focus-within > .nav-item-children,
	#primary-nav #menu-item-20352:hover > .nav-item-children,
	#primary-nav #menu-item-20352:focus-within > .nav-item-children,
	#primary-nav #menu-item-20358:hover > .nav-item-children,
	#primary-nav #menu-item-20358:focus-within > .nav-item-children {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#primary-nav #menu-item-20350 > .nav-item-children > li,
	#primary-nav #menu-item-20352 > .nav-item-children > li,
	#primary-nav #menu-item-20358 > .nav-item-children > li {
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
	}

	#primary-nav #menu-item-20350 > .nav-item-children > li > a,
	#primary-nav #menu-item-20352 > .nav-item-children > li > a,
	#primary-nav #menu-item-20358 > .nav-item-children > li > a {
		display: block;
		padding: 10px 20px !important;
		color: #171717 !important;
		font-size: 15px;
		line-height: 1.35;
		white-space: nowrap;
	}

	#primary-nav #menu-item-20350 > .nav-item-children > li > a:hover,
	#primary-nav #menu-item-20350 > .nav-item-children > li > a:focus,
	#primary-nav #menu-item-20352 > .nav-item-children > li > a:hover,
	#primary-nav #menu-item-20352 > .nav-item-children > li > a:focus,
	#primary-nav #menu-item-20358 > .nav-item-children > li > a:hover,
	#primary-nav #menu-item-20358 > .nav-item-children > li > a:focus {
		background: #f5f5f5;
		color: #000 !important;
	}
}