.navigation-primary {
	display: inline-block;
	vertical-align: center;
}
.submenu.level-2>li:last-child {
	border: none;
}
.navigation-primary a {
	font-size: 20px;
	line-height: 25px;  
}
.navigation-primary ul.level-1 > li a{
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.1px;
	padding: 10px 15px;
	position: relative;
}
.navigation-primary ul.level-1>li a:hover{
	opacity: 0.8;
}
.navigation-primary a.active-item{
	color: #7ba7f3 !important;
}
.navigation-primary a.active-branch{
	color: #7ba7f3 !important;
}

.navigation-primary .submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.navigation-primary .submenu a,
.navigation-primary .submenu p {
	text-decoration: none;
}
.submenu-toggle {
	display: none;
}
.submenu.level-1 {
	display: inline-block;
}
.custom-menu-primary ul.submenu li img{
	width: auto;
	height: auto;
}
.submenu.level-1 > li {
	display: inline-block;
	margin: 0px 12px;  
	vertical-align:middle;

}
/* .submenu.level-1 > li.has-submenu {
position: relative;
} */
.submenu.level-1>li>a, .submenu.level-2 .menu-item .menu-link{
	color: #fff;
}
.submenu.level-1>li.has-submenu>a:after {
	content: "\f078";
	cursor: pointer;
	display: inline-block;
	font-family: Font Awesome\ 5 Free;
	font-size: 12px;
	font-weight: 900;
	position: absolute;
	right: -5px;
	color: #fff;
}
.submenu.level-1>li {
	vertical-align: middle;
}
.submenu.level-2 {
	border-radius: 0;
	box-shadow: 0 2px 9px 0 rgba(0,0,0,0.2);
	font-weight: 500;
	left: -9999px;
	opacity: 0;
	position: absolute;
	text-transform: none;
	top: 100%;
	width: 6000px;
}
.submenu.level-2 > li {
	/*   border-bottom: 1px solid #D1D6DC; */
	padding: 0;
}
ul.submenu.level-2 {
	/*   padding: 5px 10px;
	background: #fff; */
	z-index:1;
}
.submenu.level-2 > li:first-child:hover:before,
.submenu.level-2 > li:first-child.focus:before {
	background-color: rgba(208, 210, 212, 1.0);
	transition: background-color 0.3s;
}
.submenu.level-2 .menu-item .menu-link {
	display: block;
	padding: 5px 15px;
	transition: background-color 0.3s;
}
.submenu.level-2 .menu-item .menu-link:hover,
.submenu.level-2 .menu-item .menu-link:focus {
	cursor: pointer;
	transition: background-color 0.3s;
}
/* .submenu.level-3 .menu-item .menu-link {
padding-left: 60px;
} */
.submenu.level-1 > li.has-submenu:hover .submenu.level-2,
.submenu.level-1 > li.has-submenu.focus .submenu.level-2 {
	/* 	left: 0; */
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	z-index: 1111;
	display: block;
/* 	max-width: 300px; */
	max-height: max(100vh - var(--content-start, 150px) - 70px, 60vh);
}
.submenu.level-2 .menu-item .menu-link{
	text-align: left;
}
.submenu.level-3 > li {
	list-style:none;
}
/* Hide navigation dropdown in the inline editor */
.hs-inline-edit .submenu.level-1 > li.has-submenu:hover .submenu.level-2,
.hs-inline-edit > li.has-submenu.focus .submenu.level-2 {
	visibility: hidden;
}
/* .custom-menu-primary .header-primary-menu{
text-align: right;
} */
.custom-menu-primary .header-primary-menu .submenu{
	text-align: left;
}
.custom-menu-primary .is-visible .submenu.level-3 {
	position:absolute;
	top:0;
	left: 330px;
}
/* Media Query */

@media(min-width: 1201px){
	header .header__column{
		display: flex;
		flex: 1 1 80%;
	}
	header .navigation-primary{
		display: flex;
	}
	header .header__row-1, header .header-menu{
		flex: 1 1 100%;
	}
	header .submenu.level-1{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
}

@media (min-width: 768px) and (max-width: 1150px) {
	.navigation-primary a {
		font-size: 15px;
	}
	.submenu.level-1 > li {
		display: inline-block;
	}
	.submenu.level-1 > .has-submenu > .menu-arrow {
		right: 0;
		top: 40px;
	}
	.submenu.level-2 .menu-item .menu-link{
		font-size:14px;
	}
	.submenu.level-2 {
		left: 0;
	}
}

@media(max-width: 767px){
	.custom-menu-primary .navigation-primary .submenu.level-3{
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.header-quote-btn a.button{
		margin-left: 0;
	}
	header .header__column{
		order: 4;
		width: 100%;
	}
	header .header__row-1{
		padding-top: 0;
	}

	.navigation-primary ul.level-1>li a, .header-top-section .contact-detail a, .header-top-section .contact-detail li, .banner-btn-section .header-btn{
		font-size: 16px;
	}
	.submenu.level-1 > li{
		padding: 0px 13px;
	}
}
@media(min-width: 1201px){
	.custom-menu-primary .submenu>.has-submenu>.level-3{
		padding: 3px;
		box-shadow: 0 2px 9px 0 rgb(0 0 0 / 20%);
		border: 2px solid #d1d6dc;
		border-radius: 0;
	}
}
@media (max-width: 767px) {
	header .header-column{
		width: 100%;
	}
	.custom-menu-primary .submenu.level-3 .menu-item .menu-link{
		padding-left: 20px;
		padding-right: 20px;
	}
	.header-menu .custom-menu-primary{
		text-align: left;
	}
	.navigation-primary ul.level-1>li a {
		color: #fff;
	}
	header .navigation-primary{
		background: #0b4591;
	}
	.submenu.level-1 > li{
		padding: 0 !important;
	}
	.navigation-primary a{
		line-height: 25px;
	}
	.submenu.level-1>li:not(:last-child){
		border-right: none;
	}
	.navigation-primary {
		display: block;
	}
	.submenu > li > a {
		display: block;
		width: 100%;
	}
	.submenu > .has-submenu {
		position: relative;
	}
	.submenu > .has-submenu > a {
		width: 70%;
	}
	.submenu {
		display: none;
	}
	.submenu.level-1 {
		width: 100%;
	}
	.submenu.level-1 > li {
		display: block;
		padding: 0;
		width: 100%;
	}
	.submenu.level-1 > li > a {
		font-weight: 600;
		padding: 7px 30px;
	}
	.submenu.level-1 > .has-submenu > .menu-arrow,
	.submenu > .has-submenu > .menu-arrow,
	.submenu .menu-arrow {
		background-position: center right 30px;
		background-repeat: no-repeat;
		background-size: 20px;
		border: none;
		cursor: pointer;
		height: 55px;
		padding: 15px 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 30%;
	}
	.submenu.level-1 > .has-submenu > .menu-arrow-bg,
	.submenu > .has-submenu > .menu-arrow-bg,
	.submenu .menu-arrow-bg {
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxOXB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAxOSAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5QbHVzPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxnIGlkPSJQbHVzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDAuMDAwMDAwKSIgc3Ryb2tlPSIjOTc5ODlGIiBzdHJva2Utd2lkdGg9IjIuNCI+ICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjIiIHk9IjkuNiIgd2lkdGg9IjE2LjgiIGhlaWdodD0iMSIgcng9IjAuNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOS42MDAwMDAsIDkuNjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTkuNjAwMDAwLCAtOS42MDAwMDApICIgeD0iMS4yIiB5PSI5LjYiIHdpZHRoPSIxNi44IiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
		background-repeat: no-repeat;
		display: block;
		height: 20px;
		margin-left: auto;
		margin-right: 30px;
		transition: transform 0.4s;
		width: 20px;
	}
	.submenu.level-1>li.has-submenu>a:after{
		display:none;
	}
	.arrow_mark-container.level-2 {
		display: none;
	}
	input[type="checkbox"]:checked ~ .submenu {
		display: block;
	}
	input[type="checkbox"]:checked ~ .menu-arrow .menu-arrow-bg {
		transform: rotate(45deg);
		transition: transform 0.4s;
	}
	.submenu>.has-submenu>a {
		width: 100%;
	}
	.submenu.level-2 {
		border: none;
		box-shadow: none;
		opacity: 1;
		position: static;
		transform: unset;
		visibility: visible;
		width: 100%;
		z-index: 2;
	}
	.submenu.level-2 .menu-item {
		border-bottom: none;
		border-top: 1px solid rgb(255 255 255 / 20%);
		padding: 0;
		background-color: transparent;
		padding: 0;
		position: relative;
	}

	.submenu.level-2 .menu-item .menu-link {
		padding: 7px 20px;
		transition: none;   
		background: transparent;    
	}

	.submenu.level-2 .menu-item .menu-link:hover,
	.submenu.level-2 .menu-item .menu-link:focus {
		transition: none;
	}

	.submenu.level-2 .menu-item .menu-link:hover {
		background-color: inherit;
	}

	.submenu.level-3 {
		background-color: inherit;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.submenu.level-3 > li {
		background-color: inherit;
		padding: 0;
	}

	.submenu.level-3 .menu-item .menu-link {
		padding: 7px 90px;
	}

	.child-menu-trigger {
		position: absolute;
		width: 40px;
		height: 40px;
		right: 15px;
		top: 0;
		line-height: 40px;
		cursor:pointer; 
		color:#333;
	}

	.submenu.level-2 .menu-item .menu-link{
		color: #fff !important;
	}
	.submenu.level-2 .menu-item:first-of-type, .submenu.level-2 .menu-item:first-of-type .menu-link{
		border-radius: 0;
	}

	.child-menu-trigger:after {
		content: '+';   
		top: 0;
		color: #fff;
		font-size: 30px;
	}

	ul.submenu.level-2 {
		padding: 0;
		background: transparent;
	} 
	.child-open > .child-menu-trigger:after {
		content: '-';
	}
}

/* Custom Header Menu */

@media(min-width: 1199px){
	.custom-menu-primary .submenu > .has-submenu > .level-3{
		display: none;
		border-radius: 0;
		padding: 10px;
		width:800px;
	}
	/*   .custom-menu-primary .submenu > .has-submenu{
	position: relative;
} */
	.custom-menu-primary .submenu > .has-submenu:hover > .level-3{
		display: block;
		position: absolute;
		left: 100%;       
		top: 0;
		width: 100%;
	}
	/* 	.custom-menu-primary .submenu  li:nth-last-child(2) .has-submenu:hover .level-3  {
	right:100% !important;
	left:unset !important;
} */
/* 	.custom-menu-primary .submenu.level-1>li:last-child:hover .submenu.level-2 {
		right:0 !important;
		left:unset !important;
	} */

	.custom-menu-primary .submenu.level-3 .menu-item .menu-link{
		padding-left: 10px;
	}  
	.submenu.level-2 .has-submenu > .menu-link::after{
		border: solid #002953;
		border-top-width: medium;
		border-right-width: medium;
		border-bottom-width: medium;
		border-left-width: medium;
		border-width: 0 1px 1px 0;
		display: inline-block;
		padding: 2.5px;
		transform: rotate( -45deg );
		-webkit-transform: rotate( -45deg );
		margin-left: 7px;
		position: relative;
		top: -2px;
		cursor: pointer;
		content: '';
	}
}

@media (max-width:767px){
	.custom-menu-primary .submenu > .has-submenu:hover > .level-3{
		position: static;
	}
	.header__container{
		padding: 1rem 0 0;
	}
	.header__row-1, .header__row-2{
		justify-content: center;
	}
	header .header__logo {
		max-width: 250px !important;
	}  
	header.header{
		position: static;    
	}
	.header__row-1 {
		padding-bottom: 0;
		display: block;
	}
	.custom-menu-primary .header-top-menu{
		margin-bottom: 0;
	}
	.header__logo{
		margin: 0 auto;
		max-width: 100%;
		justify-content: center;
	} 
	header.header .header-logo {
		display: block;
		width: auto;
		vertical-align: middle;
		padding-top: 0;
		margin: 0 auto;
		text-align: center;
	}  
	.header__container{
		flex-direction: column;
	}
	.custom-menu-primary {
		display: none;
	}
	.mobile-trigger {
		font-weight: 600;
		font-size: 1.25rem;
		letter-spacing: -.01375rem;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 36px;
		min-width: 36px;
		height: 13px;
		min-height: 13px;
		margin-top: 8px;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		padding: 30px 30px;
	}
	.mobile-trigger .btn-menu-inner {
		-webkit-transition-property: all;
		-o-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .3s;
		-o-transition-duration: .3s;
		transition-duration: .3s;
		width: 36px;
		min-width: 36px;
		position: absolute;
		height: 2px;
		background-color:#fff;
	}
	.mobile-trigger .btn-menu-inner:before,.mobile-trigger .btn-menu-inner:after {
		-webkit-transition-property: all;
		-o-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .3s;
		-o-transition-duration: .3s;
		transition-duration: .3s;
		width: 36px;
		min-width: 36px;
		height: 2px;
		content: "";
		overflow: hidden;
		position: absolute;
		right: 0;
		left: 0;
		background-color: #fff;
	}
	.mobile-trigger .btn-menu-inner:before {
		top: -6px
	}
	.mobile-trigger .btn-menu-inner:after {
		bottom: -6px
	}
	.mobile-trigger:hover {
		opacity: 0.7;
		transition: all ease 0.5s;
	}     
}





/* NEW MENU CSS LAYOUT */
/* ======================================================
LEVEL 3 MEGA MENU OVERRIDE
====================================================== */

@media (min-width:768px){
	.custom-menu-primary .submenu.level-2 {
		height: auto !important;
		min-height: 0;
		max-height: none;
		overflow: visible;
		max-height: 500px;
	}
	.custom-menu-primary .submenu.level-3 > li > a,
	.custom-menu-primary .submenu.level-3 .menu-link{
		font-size: 14px;
		font-weight: 400;
	}
	.submenu.level-1 > li:hover{
		box-shadow: inset 0 -2px 0 0 #fff;
	}
	.submenu.level-2 .content-wrapper > li{
		/* 		position: relative; */
		display: flex;

	}
	.submenu.level-2 > .content-wrapper > li > a{
		border-bottom: 1px solid rgb(255 255 255 / 20%);
		position: relative;
	}
	.submenu.level-2 > .content-wrapper > li.has-submenu > a{
		position: relative;
	}
	.submenu.level-2 > .content-wrapper > li.has-submenu > a::before{
		content: "\f078";
		cursor: pointer;
		display: inline-block;
		font-family: Font Awesome\ 5 Free;
		font-size: 12px;
		font-weight: 900;
		position: absolute;
		right: 12px;
		color: #fff;
	}
	.header-menu-section .level-2 .is-visible a{
		background: rgb(255 255 255 / 5%)
	}
	header .submenu.level-2 .content-wrapper > li > a.menu-link{
		padding: 20px 8px;
		width: 300px;
	}
	.submenu.level-2 > .menu-item > .menu-link{
		padding: 20px 8px;
	}
	header .submenu.level-1 > li:first-child > a{
		padding-left: 0;
	}
	header .header__row-3 {
		position: relative;
	}

	/* Level 2 acts as positioning context */
	.custom-menu-primary .submenu.level-2{
		position:absolute;
		border-top: 1px solid rgb(255 255 255 / 20%);
		width:100%;
		overflow:visible !important;
		background-color: #0b4591;
		box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
		z-index:100;
		z-index: -1;
		left: 0;
		top: 39px;
		transition: all 0.3s ease;
		transform: translateY(-10px);
		display: none;
		overflow: auto !important;
	}

	.custom-menu-primary .submenu.level-2 > .has-submenu{
		position:static !important;
	}
	.custom-menu-primary .submenu.level-2 > .content-wrapper{
		margin-top: 32px;
		padding-bottom: 32px;
	}
	.custom-menu-primary .submenu.level-3{
		flex: 1;
		padding-left: 30px;
		display: grid;
		row-gap: 16px;
		column-gap: 32px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 364px;
		padding-top: 16px;
	}
	.custom-menu-primary .submenu.level-2 .content-wrapper{
		position: relative;
	}
	.header-menu-section .level-2 .is-visible .submenu.level-3{
		visibility: visible;
		opacity: 1;
		width: calc(100% - 333px);
	}
	/* 	.submenu.level-2 .content-wrapper > .has-submenu:hover .submenu.level-3{
	visibility: visible;
	opacity: 1;
	display: grid;
} */

	/* Hide by default */
	.custom-menu-primary .submenu.level-3{
		/* 		display:none !important;

		position:absolute;
		left:270px;
		top:-7px;

		width:900px;
		min-height:100%;

		background:#0A4D9D;

		padding:30px;

		border:none !important;
		box-shadow:none !important;

		z-index:999;

		grid-template-columns:repeat(4,minmax(170px,1fr));
		gap:25px 40px;

		align-content:start; */
	}

	/* Show on hover */
	.custom-menu-primary .submenu.level-2 > .has-submenu:hover > .submenu.level-3{
		display:grid !important;
	}

	/* Remove inherited styles */
	.custom-menu-primary .submenu.level-3 > li{
		width:auto !important;
		padding:0 !important;
		margin:0 !important;
		border:none !important;
		float:none !important;
		list-style:none;
	}

	.custom-menu-primary .submenu.level-3 > li > a,
	.custom-menu-primary .submenu.level-3 .menu-link{
		display:block;
		padding-bottom:14px;
		margin:0 !important;
		background:transparent !important;      
		font-size:16px;
		font-weight: 700;
		line-height:1.5;

		text-transform:none;
		letter-spacing:0;

		white-space:normal;
	}

	.custom-menu-primary .submenu.level-3 > li > a:hover,
	.custom-menu-primary .submenu.level-3 .menu-link:hover{
		background:transparent !important;
		color:#d9e8ff !important;
	}

	/* Remove right arrow */
	.custom-menu-primary .submenu.level-2 .has-submenu > .menu-link::after{
		display:none;
	}

	/* Prevent clipping */
	.custom-menu-primary .submenu.level-2,
	.custom-menu-primary .submenu.level-2 > li{
		overflow:auto !important;
	}

}

@media(max-width: 767px){
	.header__row-3 .header-menu{
		position: relative;
	}
}

@media(max-width: 1281px){
	.custom-menu-primary .submenu.level-3{
		left: 300px;
	}
}

@media(max-width: 1280px) and (min-width: 768px){
	header .submenu.level-2 .content-wrapper > li > a.menu-link{
		width: 250px;
	}
	.custom-menu-primary .is-visible .submenu.level-3{
		left: 270px;
	}
	.header-menu-section .level-2 .is-visible .submenu.level-3{
		width: calc(100% - 275px);
	}
	.custom-menu-primary .submenu.level-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 10px;
		row-gap: 10px;
	}
}

@media(max-width: 575px){
	.custom-menu-primary .submenu.level-3 .menu-item .menu-link{
		font-size: 14px;
		font-weight: 400;
	}
	.custom-menu-primary .submenu.level-3 .menu-item .menu-link{
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ======================================================
CES DESKTOP MEGA MENU
NATURAL CONTENT HEIGHT + VIEWPORT SCROLL
Add at the VERY END of the CSS
====================================================== */

@media (min-width: 768px) {

	/*
	* JS still sets the natural height required by
	* Machinery / Hand Tools / etc.
	*
	* max-height only limits what can physically fit
	* in the viewport, after which this element scrolls.
	*/
	.custom-menu-primary .submenu.level-2.js-shop-mega-menu {
		min-height: 0 !important;

		/*
		* Menu starts approximately 39px below the nav row.
		* Keep it inside the viewport.
		*/
		max-height: calc(100vh - 120px) !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;

		overscroll-behavior: contain;

		/*
		* Helps Chrome reliably treat this as
		* its own scroll container.
		*/
		-webkit-overflow-scrolling: touch;
	}


	/*
	* Do NOT make this a second scroll container.
	*/
	.custom-menu-primary
	.submenu.level-2.js-shop-mega-menu
	> .content-wrapper {
		min-height: 0 !important;
		
	}


	/*
	* Inactive submenu panels.
	*/
	.custom-menu-primary
	.submenu.level-2.js-shop-mega-menu
	> .content-wrapper
	> li
	> .submenu.level-3 {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}


	/*
	* Active submenu panel.
	*/
	.custom-menu-primary
	.submenu.level-2.js-shop-mega-menu
	> .content-wrapper
	> li.is-visible
	> .submenu.level-3 {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.custom-menu-primary .submenu.level-2:not(.js-shop-mega-menu) {
		left: unset;
		width: auto;
		min-width: 170px;
	}
	.custom-menu-primary .submenu.level-2:not(.js-shop-mega-menu) > .content-wrapper{
		max-width: 100%;
		padding: 20px 12px;
		margin-top: 0;
	}
	header .submenu.level-2:not(.js-shop-mega-menu) > .content-wrapper>li>a.menu-link{
		padding: 8px 20px;
		border: none;
	}
	
	
}

/* ======================================================
   SUPPORT > DOWNLOADS CLICK SUBMENU ONLY
   Does NOT affect Shop mega menu
====================================================== */

@media (min-width: 768px) {

  /*
   * Only the Downloads item gets this behaviour.
   */
  .custom-menu-primary
  .downloads-click-menu {
    display: block !important;
  }


  /*
   * Override the normal right-side level-3 positioning
   * ONLY for Downloads.
   */
  .custom-menu-primary
  .downloads-click-menu
  > .submenu.level-3 {

    position: static !important;

    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    grid-template-columns: 1fr !important;

    border: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
  }


  /*
   * Open ONLY after click.
   */
  .custom-menu-primary
  .downloads-click-menu.downloads-open
  > .submenu.level-3 {

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
  }


  /*
   * Links inside Downloads submenu.
   */
  .custom-menu-primary
  .downloads-click-menu
  > .submenu.level-3
  > li
  > a {

    width: 100% !important;

    padding: 10px 20px 10px 30px !important;
  }

}

/* ======================================================
   FINAL MENU SEPARATION
   768px+ ONLY
====================================================== */

@media (min-width: 768px) {


  /* ====================================================
     A. SHOP MEGA MENU ONLY
  ==================================================== */

  .custom-menu-primary
  .submenu.level-2.js-shop-mega-menu {

    /*
     * Shop JS supplies its active content height.
     */
    min-height: 0 !important;

    /*
     * Retain your Shop viewport scrolling.
     */
    max-height: calc(100vh - 120px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }


  .custom-menu-primary
  .submenu.level-2.js-shop-mega-menu
  > .content-wrapper {

    position: relative;

    overflow: visible !important;
  }


  /* ======================================================
   SHOP MEGA MENU PANELS
   Only the ACTIVE panel may participate in rendering
====================================================== */

@media (min-width: 768px) {

    /*
     * All inactive Shop level-3 panels are completely
     * removed from rendering.
     *
     * This is the critical fix for Hand Tools affecting
     * Machinery's scrollable height.
     */
    .custom-menu-primary
    .submenu.level-2.js-shop-mega-menu
    > .content-wrapper
    > li
    > .submenu.level-3 {

        position: absolute !important;

        top: 0 !important;
        left: 364px !important;

        /*
         * CRITICAL:
         * visibility:hidden is not enough.
         */
        display: none !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        row-gap: 16px;
        column-gap: 32px;

        padding-left: 30px;
        padding-top: 16px;
    }


    /*
     * Only the current Shop category exists as a
     * rendered grid.
     */
    .custom-menu-primary
    .submenu.level-2.js-shop-mega-menu
    > .content-wrapper
    > li.is-visible
    > .submenu.level-3 {

        display: grid !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        width: calc(100% - 333px);
    }


    /*
     * Do not animate the JS-controlled height.
     *
     * Keep only the visual dropdown movement/fade.
     */
    .custom-menu-primary
    .submenu.level-2.js-shop-mega-menu {

        transition:
            opacity 0.3s ease,
            transform 0.3s ease !important;
    }

}


/*
 * Preserve your existing 3-column tablet/narrow-desktop
 * mega-menu arrangement.
 */
@media (min-width: 768px) and (max-width: 1280px) {

    .custom-menu-primary
    .submenu.level-2.js-shop-mega-menu
    > .content-wrapper
    > li.is-visible
    > .submenu.level-3 {

        left: 270px !important;

        width: calc(100% - 275px);

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 10px;
        row-gap: 10px;
    }

}


  /* ====================================================
     B. ALL NORMAL LEVEL-2 DROPDOWNS
     Support / Hire / About etc.
  ==================================================== */

  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu) {

    /*
     * Absolutely no Shop calculated height.
     */
    height: auto !important;

    min-height: 0 !important;
    

    /*
     * Normal dropdown fits content.
     */
    width: auto;

    min-width: 170px;

    left: unset;

    overflow: auto !important;
  }


  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu)
  > .content-wrapper {

    position: relative;

    max-width: 100%;

    margin-top: 0;

    padding: 20px 12px;

    overflow: visible !important;
  }


  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu)
  > .content-wrapper
  > li {

    /*
     * Normal menu rows, not mega-menu flex panels.
     */
    display: block;
    position: relative;
  }


  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu)
  > .content-wrapper
  > li
  > a.menu-link {

    width: auto;

    padding: 8px 20px;

    border: none;
  }



/* ======================================================
   NORMAL LEVEL-3 ACCORDION DROPDOWNS
   Support > Downloads
   About > Brands We Stock
   768px+
====================================================== */

@media (min-width: 768px) {

  /*
   * Normal dropdown container.
   */
  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu) {

    height: auto !important;

    min-height: 0 !important;
/*     max-height: none !important;

    overflow: visible !important; */
  }


  /*
   * Each normal row.
   */
  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu)
  > .content-wrapper
  > li {

    display: block !important;

    position: relative !important;
  }


  /*
   * Allow normal dropdown text to wrap.
   */
  .custom-menu-primary
  .submenu.level-2:not(.js-shop-mega-menu)
  > .content-wrapper
  > li
  > a.menu-link {

    display: block;

    width: 100% !important;

    white-space: normal !important;

    overflow-wrap: break-word;
    word-break: normal;

    line-height: 1.4;

    padding: 8px 20px;
  }


  /*
   * Parent rows that contain a nested submenu.
   */
  .custom-menu-primary
  .normal-click-dropdown {

    display: block !important;

    position: relative !important;
  }


  /*
   * NORMAL LEVEL-3 CLOSED STATE.
   *
   * Important:
   * position:static makes the submenu appear underneath
   * the parent and push following rows down.
   */
  .custom-menu-primary
  .normal-click-dropdown
  > .submenu.level-3 {

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    /*
     * Keep it in the DOM so max-height can animate.
     */
    display: block !important;

    /*
     * Closed animation state.
     */
    max-height: 0;

    overflow: hidden !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    opacity: 0;

    visibility: visible !important;

    pointer-events: none;

    /*
     * Smooth animation like the live site.
     */
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      padding 0.35s ease;

    grid-template-columns: 1fr !important;

    row-gap: 0 !important;
    column-gap: 0 !important;

    border: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
  }


  /*
   * OPEN STATE.
   *
   * Actual max-height comes from JS scrollHeight.
   */
  .custom-menu-primary
  .normal-click-dropdown.normal-submenu-open
  > .submenu.level-3 {

    opacity: 1;

    padding-top: 4px !important;
    padding-bottom: 6px !important;

    pointer-events: auto;
  }


  /*
   * Child rows.
   */
  .custom-menu-primary
  .normal-click-dropdown
  > .submenu.level-3
  > li {

    display: block !important;

    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * Child links.
   *
   * Allow wrapping.
   */
  .custom-menu-primary
  .normal-click-dropdown
  > .submenu.level-3
  > li
  > a {

    display: block !important;

    width: 100% !important;

    padding: 7px 20px 7px 15px !important;

    white-space: normal !important;

    overflow-wrap: break-word;
    word-break: normal;

    line-height: 1.35;
  }


  /*
   * Arrow animation.
   *
   * Your menu already uses the arrow pseudo-element.
   */
  .custom-menu-primary
  .normal-click-dropdown
  > a::before {

    transition: transform 0.3s ease;
  }


  /*
   * Rotate right-chevron into downward-chevron.
   */
  .custom-menu-primary
  .normal-click-dropdown.normal-submenu-open
  > a::before {

    transform: rotate(180deg);

  }
	.submenu.level-2:not(.js-shop-mega-menu) {
    width: auto;
    min-width: 170px;
    max-width: 300px;
}

.custom-menu-primary
    .submenu.level-2.js-shop-mega-menu {

        /*
         * Do not animate JS-controlled height.
         *
         * Keep the existing dropdown fade/movement.
         */
        transition:
            opacity 0.3s ease,
            transform 0.3s ease !important;
    }
}