.menu-main{
	padding:0;
	margin:0;
	display:flex;
	justify-content:center
}
.menu-main a,
.menu-main a:hover{
	position:relative;
	color:var(--text-body-01)
}
.menu-main a:after{
	content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background:var(--text-primary-default);
    transition: width .3s
}
.menu-main a:hover:after{
	width:100%
}
.menu-main > ul{
	display:flex;
	gap:var(--spacing-5)
}
.menu-main ul{
	list-style:none;
	margin:0;
	padding:0
}
.menu-main ul .item{
	font:var(--body-m-semibold);
	margin-bottom:var(--spacing-1)
}
.menu-main ul .item.root{
	position:relative;
	display:flex;
	align-items:center
}
.menu-main ul .item.root:after{
	content:"";
	background:url("/images/icons/chevron_icon.svg");
	width:var(--spacing-3);
	height:var(--spacing-3);
	background-size:var(--spacing-3) var(--spacing-3);
	margin-top:var(--spacing-1);
	margin-left:var(--spacing-2);
	display:block;
	float:right;
	transition:transform .4s
}
.menu-main ul .item.root > ul{
	display:none;
	position:absolute;
	top:var(--spacing-5);
	left:var(--spacing-neg-4);
	background:var(--surface-white);
	border-radius:0 0 var(--radius-s) var(--radius-s);
	padding:var(--spacing-4);
	min-width:300px
}

.menu-main ul .item.root > ul ul{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-1)
}

.menu-main ul .item.root ul .empty{
	margin-bottom:var(--spacing-5)
}
.menu-main ul .item.root ul .empty span{
	font-size:20px;
	font-weight:700;
	user-select:none;
	display:block;
	margin-bottom:var(--spacing-2)
}

@media(min-width:1200px) {
	.menu-main ul .item.root > ul{
		box-shadow:0px -2px 8px rgba(0, 0, 0, .08), 0px 4px 8px rgba(0, 0, 0, .08)
	}
	.menu-main ul .item.root.columns > ul{
		columns:3;
		left:-80px;
		padding-left:80px
	}
	.menu-main .columns > ul li{
		min-width:200px
	}
	.menu-main .columns .break{
		break-after:column
	}
	.menu-main .columns .margin{
		margin-top:var(--spacing-4)
	}
	.menu-main ul .item.root:hover > ul{
		display:inline
	}
}
.menu-main ul .item.root:hover:after{
	transform:rotate(180deg)
}
.menu-main ul .item.current > a{
	font-weight:var(--font-weight-bold)
}

.menu-main .promote a:before{
	content:"";
	width:var(--spacing-2);
	height:var(--spacing-2);
	background:var(--primary-default);
	border-radius:var(--radius-rounded);
	margin:var(--spacing-neg-1) 0 0 var(--spacing-neg-2);
	position:absolute;
	border:2px solid #fff;
	padding:var(--spacing-neg-1)
}
.menu-main .additional{
	display:none
}
.body-cover{
	background:rgba(0,0,0,.8);
	position:fixed;
	right:0;
	top:0;
	left:0;
	bottom:0;
	z-index:1;
	display:none
}
.menu-main .close{
	display:none
}
.overflow-hidden{
	overflow:hidden
}

@media(max-width:1400px){
	.menu-main ul .item{
		font-size:16px
	}
}
@media(max-width:1199px){
	.menu-main{
		display:none;
		top:0;
		bottom:0;
		right:0;
		left:0;
		background:var(--surface-white);
		padding:var(--spacing-4);
		width:100%;
		overflow-y:scroll;
		height:85vh;
		border-radius: var(--radius-m)
	}
	.menu-main.is-visible{
		display:block;
		z-index:1
	}
	.menu-main.is-visible .additional{
		display:block
	}
	.menu-main > ul{
		gap:var(--spacing-3)
	}
	.menu-main ul{
		flex-direction:column;
		gap:var(--spacing-2)
	}
	.menu-main ul .item{
		width:100%
	}
	.menu-main > ul > .item{
		font-weight:600
	}
	
	.menu-main ul .item.root{
		display:block
	}
	.menu-main ul .item.root ul{
		position:relative;
		background:transparent;
		top:unset;
		display:flex;
		flex-direction:column;
		gap:var(--spacing-2);
		min-width:unset;
		padding:0;
		left:0;
		align-items:flex-start
	}
	.menu-main ul .item.root ul li{
		margin:0
	}
	
	.menu-main ul .item.root:after{
		display:none
	}
	.menu-main ul .item.root > a{
		font-size:20px;
		font-weight:700;
		display:block;
		margin-bottom:var(--spacing-2)
	}
	.menu-main ul .item.root ul li.item.break{
		margin-bottom:var(--spacing-5)
	}
	.menu-main .close{
		display:flex;
		position:fixed;
		top:var(--spacing-4);
		right:var(--spacing-4)
	}
}