.drawer-bg{
	position: fixed;
	width: 100%;
    height: 100%;
    z-index: 1090;
    top: 0;
    right: 0;
    background: rgba(17, 14, 25, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
}
body.drawer-open{
    overflow: hidden;
}
.mobile-drawer{
    position: fixed;
    height: 100%;
   	background-color: #FFF;
    color: #222;
    top: 0;
    z-index: 1100;
    width: 100%;
    max-width: 100%;
    left: -110%;
    transition: left 0.25s ease-in-out;
    overflow: auto;
    overscroll-behavior: contain;
    padding-top: 0;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}
/* tablet: partial-width panel (~45%) like mi.com */
@media (min-width: 768px) and (max-width: 991.9px){
	.mobile-drawer{
		width: 440px;
		max-width: 55%;
	}
}
/* flex children must not shrink, otherwise long menus get squashed instead
   of overflowing — which breaks scrolling inside the drawer */
.mobile-drawer > section,
.mobile-drawer .navigation,
.mobile-drawer .topinfo{
	flex-shrink: 0;
}
/* thin scrollbar so long menus are visibly scrollable */
.mobile-drawer::-webkit-scrollbar{
	width: 4px;
}
.mobile-drawer::-webkit-scrollbar-thumb{
	background: #D5D8DC;
	border-radius: 4px;
}
.mobile-drawer{
	scrollbar-width: thin;
	scrollbar-color: #D5D8DC transparent;
}
.mobile-drawer .drawer-head{
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: #FFF;
	border-bottom: 1px solid #F0F0F0;
	flex-shrink: 0;
}
.mobile-drawer .drawer-logo img{
	height: 34px;
	width: auto;
}
.mobile-drawer .close-drawer{
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: #F5F6F8;
	color: #222;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.mobile-drawer .close-drawer:active{
	background: #EAECEF;
}
.mobile-drawer .topinfo{
	padding: 16px 20px 0;
	margin-top: auto;
	border-top: 1px solid #F0F0F0;
}
.mobile-drawer .infobox.top-contact:last-child{padding-bottom: 5px;}
.mobile-drawer .infobox.top-contact .flexbox svg{margin-right: 10px;}
.mobile-drawer .infobox.top-contact .flexbox svg path{fill: var(--color-primary)}
.mobile-drawer .infobox.top-contact .flexbox .text{padding-right: 0; padding-bottom: 5px; padding-top: 5px;}
.mobile-drawer .infobox.top-contact .flexbox .text span {
    display: block;
    color: #888;
    letter-spacing: 1.3px;
    font-size: 12px;
}
.mobile-drawer .infobox.top-contact .flexbox .text span.number {
    font-weight: 600;
    letter-spacing: 0;
    color: #111;
    font-size: 14px;
}
@media (max-width: 991.9px){
	#primary-menu{display: none;}
	.header-outter-flexbox{height: 70px;}
	#primary-menu-trigger{opacity: 1; position: relative; top: auto; left: auto; margin-top: 0; pointer-events: all; text-align: left;}
    
    .mobile-drawer #top-search{
        margin: 15px auto;
        width: calc(100% - 40px);
    }
    .mobile-drawer #top-search form{width: 100%;}
    .mobile-drawer .searchbutton{width: 42px; background-color: #CC9739; border-radius: 0 8px 8px 0; height: 35px;}
    .mobile-drawer .searchbutton svg path{stroke: white;}
    .mobile-drawer #top-search form input{width: calc(100% - 42px); padding-right: 8px; padding-left: 8px;}
	.mobile-drawer.show{
	    transition: all 0.2s ease-in-out;
		left: 0px;
	}

	/* close button styling lives outside this media block (.drawer-head) */

	.mobile-drawer-content{
	    position: fixed;
	    height: 100%;
	    top: 0;
	    background: white;
	    /*left: -100%;*/
	    z-index: 1095;
	    transition: all 0.2s ease-in-out;
	    width: 60%;
	    display: none;
	    overflow: auto;
	}

	.mobile-drawer-content.show{
	    left: 40%;
	    transition: all 0.2s ease-in-out;
	    display: block;
	}

	.mobile-drawer-content .category-menu{
		border-bottom: 1px solid #EEE;
		border-top: 1px solid #EEE;
		list-style: none;
	}

	.mobile-drawer-content .category-menu a{
		height: 44px;
		line-height: 44px;
		vertical-align: middle;
	}

	.mobile-drawer-content .category-menu a > p{
		line-height: normal;
		margin-top: 20px;
	}

	.mobile-drawer-content .category-menu .category-name{
		display: inline-block;
		width: 80%;
		border-right: 1px solid #EEE;
	}

	.mobile-drawer-content .category-menu .category-name:hover{
		color: #b8304d;
	}

	.mobile-drawer-content .category-menu  ul{
		display: none;
	}

	.mobile-drawer-content .category-menu > ul > li{
		list-style: none;
		/*border-bottom: 1px solid #EEE;*/
		/*padding-top: 20px;*/
	}
	.mobile-drawer-content .category-menu  ul  li  a{
		text-align: center;
	}

	.menu-togggle{
		text-align: center;
		display: inline-block;
		width: 15%;
	}

	.menu-togggle  span  i:hover{
		color: #b8304d;
	}

	.mobile-drawer .visitor {
	    padding: 20px;
	    text-align: center;
	    border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	.mobile-drawer .visitor a{
		padding: 10px;
	   	color: #242422;
	   	display: inline-block;
	}

	.mobile-drawer .navigation{
		padding: 0px;
		/*margin-top: 45px;*/
	}

	.mobile-drawer .navigation > ul,
	.mobile-drawer .navigation > ul > li > ul,
	.mobile-drawer .navigation > ul > li > ul > li > ul{
		color: #242422;
		margin-bottom: 0px;
		/*border-top: 1px solid rgba(255,255,255,0.3);*/
		padding-left: 0px;
	}

	.mobile-drawer .navigation > ul > li > ul > li > ul > li:last-child,
	.mobile-drawer .navigation > ul > li > ul > li:last-child,
	.mobile-drawer .navigation > ul > li:last-child{
		border-bottom: 0px;
	}

	.mobile-drawer .navigation > ul > li,
	.mobile-drawer .navigation > ul > li > ul > li{
		display: block;
		/*padding-left: 15px;*/
	}

	.mobile-drawer .navigation > ul > li.submenu > ul,
	.mobile-drawer .navigation > ul > li.submenu > ul > li.submenu > ul{
		display: none;
	}

	/*.mobile-drawer .navigation > ul > li.submenu > a,
	.mobile-drawer .navigation > ul > li > ul > li.submenu > a{
		background-image: url("images/icons/submenu.png");
		background-position: right center;
		background-repeat: no-repeat;
	}*/

	.mobile-drawer .navigation > ul > li,
	.mobile-drawer .navigation > ul > li > ul > li,
	.mobile-drawer .navigation > ul > li > ul > li >ul > li{
		list-style: none;
		position: relative;
		line-height: 1.3;
		color: #242422;
		text-align: left;
	}
	.mobile-drawer .navigation > ul > li > ul > li >ul > li.current{
		text-decoration: underline;
	}
    
	.mobile-drawer .navigation > ul > li > a,
	.mobile-drawer .navigation > ul > li > ul > li > a,
	.mobile-drawer .navigation > ul > li > ul > li > ul > li > a{
		color: #000;
		font-size: 14px;
		font-weight: 400;
		vertical-align: middle;
		padding: 10px 20px 10px 0;
		display: block;
		position: relative;
		border-bottom: 1px solid #F0F0F0;
		width: calc(100% - 40px);
        margin-right: auto;
        margin-left: auto;
	}
	/* sub-level items: lighter weight */
	.mobile-drawer .navigation > ul > li > ul > li > a,
	.mobile-drawer .navigation > ul > li > ul > li > ul > li > a{
		font-size: 14px;
		font-weight: 400;
		color: #000;
		padding-top: 10px;
		padding-bottom: 10px;
		width: calc(100% - 56px);
	}
	/* toggle icons pinned to the right: parents use a chevron (rotates when
	   open), children use plus (becomes minus when open) */
	.mobile-drawer .navigation li > a > i.mm-toggle-icon{
		position: absolute;
		right: 2px;
		top: 50%;
		transform: translateY(-50%);
		transition: transform .2s ease;
		color: #000;
		font-size: 14px !important;
	}
	.mobile-drawer .navigation li.show > a > i.mm-toggle-icon{
		color: var(--color-primary, #CC9739);
	}
	.mobile-drawer .navigation li.show > a > i.icon-line-chevron-down{
		transform: translateY(-50%) rotate(180deg);
	}
	.mobile-drawer .navigation li.show > a > i.icon-line-plus:before{
		/* icon-line-minus glyph */
		content: "\e99f";
	}
	.mobile-drawer .navigation > ul > li.show > a,
	.mobile-drawer .navigation > ul > li > ul > li.show > a{
		color: var(--color-primary, #CC9739);
	}
	.mobile-drawer .navigation > ul > li:last-child a{border: none;}
	.mobile-drawer .navigation > ul > li > a:hover,
	.mobile-drawer .navigation > ul > li > ul > li > a:hover,
	.mobile-drawer .navigation > ul > li > ul > li > ul > li > a:hover{color: #CC9739;}
	
	.mobile-drawer .navigation > ul > li.current > a,
	.mobile-drawer .navigation > ul > li > ul > li.current > a,
	.mobile-drawer .navigation > ul > li > ul > li > ul > li.current > a{color: #CC9739;}

	.mobile-drawer .currencySection{
		padding: 20px;
	}

	.mobile-drawer .currencySection ul{
		text-align: center;
		padding-left: 0px;
	}

	.mobile-drawer .currencySection ul > li{
		list-style: none;
	}
	.mobile-drawer .currencySection ul > li > a{
		padding: 10px;
		color: #242422;
	}
	.mobile-drawer .currencySection ul > li > ul{
		display: none;
	}
	.mobile-drawer .currencySection ul > li > ul  > li{
		width: 60px;
		margin:auto;
		padding: 5px 0;
	}
	.mobile-drawer .currencySection ul > li > ul > li > a{
		color: #ad8e61;
	}
	.mobile-drawer .navigation > ul li a.disabled{
		opacity: 0.7;
	}
}
@media(min-width: 768px) and (max-width: 991px){
	.mobile-drawer{height: 100%}
}
/* ============================================================
   Mobile mega menu (mi.com-style): product/service card strips
   inside the drawer accordion
   ============================================================ */
@media (max-width: 991px) {

	/* the panel <ul> holds a single non-menu <li>; strip menu styling */
	.mobile-drawer .navigation > ul > li > ul.mm-panel > li,
	.mobile-drawer .navigation ul li ul.mm-panel > li {
		padding: 0;
		border: none;
	}

	.mm-prod-scroll {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 20px;
		scrollbar-width: none;
	}

	.mm-prod-scroll::-webkit-scrollbar {
		display: none;
	}

	.mobile-drawer .mm-prod-card {
		flex: 0 0 126px;
		display: flex;
		flex-direction: column;
		background: #F7F8FA;
		border-radius: 12px;
		padding: 10px 8px 12px;
		text-decoration: none;
	}

	.mm-prod-img {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 92px;
		background: #FFF;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 8px;
	}

	.mm-prod-img img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.mm-service-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mobile-drawer .mm-prod-name {
		color: #222;
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.35;
		text-align: center;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: auto;
	}

	.mobile-drawer .mm-viewall {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 2px 2px 14px;
		padding: 11px 14px;
		border-radius: 10px;
		background: #F5F6F8;
		color: #222;
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
	}

	.mobile-drawer .mm-viewall i {
		font-size: 11px;
		line-height: 1;
	}

	.mobile-drawer .mm-viewall:active {
		background: #EAECEF;
		color: var(--color-primary, #F5B301);
	}

	/* product cards get a hairline border so they read on the white drawer */
	.mobile-drawer .mm-prod-card {
		border: 1px solid #F0F0F0;
	}
}