/**
 * Nav Tree
 */

/**
 * Inilial states
 */
.nav-tree,
.nav-tree * {
	box-sizing: border-box;
	font-family: var(--nav-font);
}
.nav-tree ul,
nav ul {
	display: block;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/**
 * Flat nav like footer blocks
 */
.nav-flat {
	display: block;
	margin: 0;
	padding: 0;
}
.nav-flat a, .nav-flat a:hover, .nav-flat a:focus {
	display: block;
	padding: .25rem 1rem;
	text-decoration: none;
}
/**
 * Inline nav like subcategories' buttons
 */
.nav-inline {
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
}
.nav-inline > a {
	margin: .25rem;
}
/*
.nav-inline > .flex-1 {
	flex: 0 0 10%;
}
.nav-inline > .flex-2 {
	flex: 0 0 20%;
}
*/


@media (max-width:991px) {

	.nav-tree {
		position: fixed;
		top: 0; bottom: 0;
		left: 0; right: 0;
		z-index: 9900;
		width: 100vw;
		transition: all var(--speed);
	}

	/** Fade in - out */
	.nav-tree:not(.slide-left):not(.slide-right):not(.flip-left) {
		opacity: 0;
		height: 0;
		overflow: hidden;
	}
	.nav-tree.open:not(.slide-left):not(.slide-right):not(.flip-left) {
		opacity: 1;
		height: 100vh;
		overflow: auto;
		transition: opacity var(--speed);
	}

	/** Slide from left */
	.nav-tree.slide-left {
		opacity: 1;
		height: 100vh;
		transform: translateX(-100%);
	}
	.nav-tree.slide-left.open {
		transform: translateX(0);
	}

	/** Slide from right */
	.slide-right {
		position: fixed;
		top: 0;
		bottom: 0;
		left: auto;
		right: 0;
		z-index: 9900;
		width: 100vw;
		transition: all var(--speed);
	}
	.nav-tree.slide-right,
	.slide-right {
		opacity: 1;
		height: 100vh;
		transform: translateX(100%);
	}
	.nav-tree.slide-right.open,
	.slide-right.open {
		transform: translateX(0);
	}

	/** Flip from left */
	.nav-tree.flip-left {
		-webkit-transform: perspective(300px) rotateY(90deg);
		transform: perspective(300px) rotateY(90deg);
		-webkit-transform-origin: left;
		transform-origin: left;
		opacity: .3;
		will-change: transform, opacity;
	}
	.nav-tree.flip-left.open {
		-webkit-transform: perspective(300px) rotateY(0deg);
		transform: perspective(300px) rotateY(0deg);
		opacity: 1;
	}

	/** Structure */
	.toggle.close, .toggle.close:hover, .toggle.close:focus {
		display: inline-block;
		float: none!important;
		width: var(--toggle-width,46px);
		height: var(--toggle-height,46px);
		margin-left: auto;
		padding: 0;
		text-align: center;
	}
	.toggle.close [class^="bi-"]::before, .toggle.close [class*=" bi-"]::before,
	.toggle.close [class^="si-"]::before, .toggle.close [class*=" si-"]::before {
		font-size: 42px;
		line-height: var(--toggle-height,46px);
	}

	.nav-tree ul li.parent > a {
		flex: 0 0 calc(100% - var(--toggle-width,46px));
	/*
		width: calc(100% - var(--toggle-width,46px));
	*/
	}
	.nav-tree ul li.parent span {
		display: inline-block;
		flex: 0 0 var(--toggle-width,46px);
		width: var(--toggle-width,46px);
		height: var(--toggle-height,46px);
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E")
			50% 50% / 12px 12px no-repeat;
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform .3s;
	}
	.nav-tree ul li.parent.open > a > span {
		transform: rotate(-90deg);
	}


	.nav-body {
		position: absolute;
		top: var(--toggle-height,46px);
		left: 0; right: 0;
		bottom: 0;
		overflow: auto;
		padding: 1rem;
	}
	.nav-flat .nav-body {
		position: static;
	}
	.nav-tree li {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}
	.nav-tree a {
		display: flex;
		flex-wrap: wrap;
		padding: .5rem 1rem;
	}

	.nav-root ul {
		display: none;
	}
	.nav-root li.open > ul {
		display: block;
	}

	.nav-tree.flip-left .nav-root ul {
		display: block;
		-webkit-transform: perspective(300px) rotateX(-90deg);
		transform: perspective(300px) rotateX(-90deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: .3;
		max-height: 0;
		will-change: transform, opacity, max-height;
		transition: all var(--speed);
	}
	.nav-tree.flip-left .nav-root li.open > ul {
		-webkit-transform: perspective(300px) rotateX(0deg);
		transform: perspective(300px) rotateX(0deg);
		max-height: 100vh;
		opacity: 1;
	}

	.nav-root ul a {
		padding-left: 2rem;
	}
	.nav-root ul ul a {
		padding-left: 4rem;
	}
	.nav-root ul ul ul a {
		padding-left: 6rem;
	}

	/** Colors - text */
	.nav-tree, .nav-tree a, .nav-tree a:hover, .nav-tree a:focus {
		color: var(--nav-color,#ffffff);
		text-decoration: none;
	}
	.nav-tree {
		background: var(--nav-background,#333333);
	}
	.nav-tree ul ul {
		background-color: rgba(0,0,0,.2);
	}

}

/************************************************************************************************/

@media (min-width:576px and max-width:991px) {
	.nav-tree {
		width: 50vw;
	}
}

/************************************************************************************************/

@media (min-width:992px) {
	.nav-tree {
		flex: 1 0 100%;
		display: block;
	}
	.nav-head {
		display: none;
	}
	.cart-summary .nav-head {
		display: flex;
	}
	.nav-tree .nav-body {
		background: var(--nav-lg-root-bg-color,#333333);
	}
	.nav-tree .nav-root {
		display: inline-flex;
		justify-content: start;
	}
	.nav-tree .nav-root ul {
		background: var(--nav-lg-child-bg-color,#ffffff);
		border: var(--nav-lg-border);
	}
	.nav-tree, .nav-tree a, .nav-tree :hover a {
		color: var(--nav-lg-color,#000000);
		text-decoration: none;
		transition: all .3s;
	}
	.nav-tree li {
		transition: all .3s;
	}
	.nav-tree li:hover {
		background: var(--nav-inverse-bg,#000000);
	}
	.nav-tree li:hover > a {
		color: var(--nav-inverse-color,#ffffff);
	}
	
	.nav-tree ul li.parent span {
		position: absolute;
		right: .25rem;
		top: 50%;
		display: inline-block;
		width: 16px;
		height: 16px;
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E")
			50% 50% / 12px 12px no-repeat;
		cursor: pointer;
		transform: rotate(90deg) translateX(-50%);
		transition: transform .3s;
	}
	.nav-tree ul li.parent:hover > span {
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E")
			50% 50% / 12px 12px no-repeat;
	}
	.nav-tree ul ul li.parent span {
		transform: rotate(0) translateY(-50%);
	}
	.nav-tree ul li.parent.open > a > span {
		transform: rotate(-90deg);
	}
/*
	.nav-tree:not(.enable-hover) ul li.parent span {
		position: absolute;
		bottom: 0; left: calc(50% - 12px);
		z-index: 1;
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E")
			50% 50% / 12px 12px no-repeat;
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform var(--speed);
	}
	.nav-tree:not(.enable-hover) ul li.parent.open > span {
		transform: rotate(-90deg);
	}
	.nav-tree:not(.enable-hover) ul li.parent:hover > span {
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E")
			50% 50% / 12px 12px no-repeat;
	}
	.nav-tree:not(.enable-hover) ul ul li.parent span {
		top: 0; right: 0;
		left: auto;
		bottom: 0;
		height: 100%;
		width: var(--toggle-width,46px);
		transform: rotate(0);
	}
	.nav-tree:not(.enable-hover) ul ul li.parent.open > span {
		transform: rotate(-180deg);
	}
*/
	.nav-tree .nav-root li:not(.nav-mega) {
		position: relative;
	}
	.nav-tree .nav-root ul {
		position: absolute;
		top: 100%;
		display: inline-block;
		visibility: hidden;
		opacity: 0;
		min-width: 280px;
		box-shadow: 5px 5px 10px rgba(0,0,0,.2);
		transition: all .3s;
	}
	.nav-tree .nav-root ul ul {
		top: 0;
		left: 100%;
	}
	.nav-tree .nav-root li.open > ul {
		visibility: visible;
		opacity: 1;
	}

	/** root nav */
	.nav-tree .nav-root > li {
		position: relative;
		display: block;
	}
	.nav-tree .nav-root > li > a {
		display: block;
		padding: .5rem;
		font-size: .75rem;
		font-weight: 700;
	}
	/** child nav */
	.nav-tree .nav-root li li a {
		display: block;
		padding: 1rem;
		font-size: .85rem;
		line-height: 1;
		transition: all .3s;
		transform: translate(0,0);
	}
	.nav-tree .nav-root li li:hover > a {
		transform: translate(1rem,0);
	}
	.nav-tree:not(.enable-hover) .nav-root li li a,
	.nav-tree:not(.enable-hover) .nav-root li li:hover > a {
		padding-right: calc(1rem + var(--toggle-width,46px));
	}

	/** Flip */
	/* all uls except 1st level */
	.nav-tree[class^="flip-"] .nav-root ul,
	.nav-tree[class*=" flip-"] .nav-root ul {
		display: block;
		-webkit-transform: perspective(300px) rotateY(90deg);
		transform: perspective(300px) rotateY(90deg);
		-webkit-transform-origin: left;
		transform-origin: left;
		opacity: .3;
		max-height: 0;
		will-change: transform, opacity, max-height;
		transition: all var(--speed);
	}
	.nav-tree[class^="flip-"] .nav-root li.open > ul,
	.nav-tree[class*=" flip-"] .nav-root li.open > ul {
		-webkit-transform: perspective(300px) rotateY(0deg);
		transform: perspective(300px) rotateY(0deg);
		max-height: none;
		opacity: 1;
	}
	/* 1st level uls */
	.nav-tree[class^="flip-"] .nav-root > li > ul,
	.nav-tree[class*=" flip-"] .nav-root > li > ul {
		display: block;
		-webkit-transform: perspective(300px) rotateX(-90deg);
		transform: perspective(300px) rotateX(-90deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: .3;
		max-height: 0;
		will-change: transform, opacity, max-height;
		transition: all var(--speed);
	}
	.nav-tree[class^="flip-"] .nav-root > li.open > ul,
	.nav-tree[class*=" flip-"] .nav-root > li.open > ul {
		-webkit-transform: perspective(300px) rotateX(0deg);
		transform: perspective(300px) rotateX(0deg);
		max-height: none;
		opacity: 1;
	}

	/** Slide */
	.nav-tree[class^="slide-"] .nav-root ul,
	.nav-tree[class*=" slide-"] .nav-root ul {
		position: absolute;
		display: none;
	}
	.nav-tree[class^="slide-"] .nav-root > li.open > ul,
	.nav-tree[class*=" slide-"] .nav-root > li.open > ul {
		display: inline-block;
		padding: 0;
	}
	.nav-tree[class^="slide-"] .nav-root ul li.open > ul,
	.nav-tree[class*=" slide-"] .nav-root ul li.open > ul {
		display: inline-flex;
	}
	.nav-tree[class^="slide-"] .nav-root ul li,
	.nav-tree[class*=" slide-"] .nav-root ul li {
		/***
		position: static;
		***/
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.nav-tree[class^="slide-"] .nav-root ul li > a,
	.nav-tree[class*=" slide-"] .nav-root ul li > a,
	.nav-tree[class^="slide-"] .nav-root ul li:hover > a,
	.nav-tree[class*=" slide-"] .nav-root ul li:hover > a {
		padding-right: 1rem;
		display: block;
		width: 100%;
	}
/***
	.nav-tree[class^="slide-"] .nav-root ul li > span,
	.nav-tree[class*=" slide-"] .nav-root ul li > span {
		position: static;
		height: 1rem !important;
	}
***/
	.nav-tree[class^="slide-"] .nav-root ul ul,
	.nav-tree[class*=" slide-"] .nav-root ul ul {
		top: -1px;
		flex-wrap: wrap;
		align-content: flex-start;
		/*
		writing-mode: vertical-lr;
		*/
		width: auto;
	}
	.nav-tree[class^="slide-"] .nav-root ul ul > li,
	.nav-tree[class*=" slide-"] .nav-root ul ul > li {
		/*
		writing-mode: horizontal-tb;
		*/
		width: 100%;
	}
	
	/* nav-mega mega-menu */
	.nav-tree .nav-root > li.nav-mega,
	.nav-tree .nav-root > li.nav-mega:hover {
		position: static;
		background: none;
	}
	.nav-tree .nav-root > li.nav-mega a,
	.nav-tree .nav-root > li.nav-mega a:hover {
		display: inline-block;
		color: var(--nav-lg-color)!important;
		width: 100%!important;
		transform: none!important;
	}
	.nav-tree .nav-root > li.nav-mega > ul > li > a,
	.nav-tree .nav-root > li.nav-mega > ul > li > a:hover {
		padding-top: 2rem;
		font-weight: 900;
	}
	.nav-tree .nav-root > li.nav-mega li li a,
	.nav-tree .nav-root > li.nav-mega li li a:hover {
		padding: .25rem 0;
	}
	.nav-tree .nav-root > li.nav-mega li,
	.nav-tree .nav-root > li.nav-mega:hover li {
		background: none;
	}
	.nav-tree .nav-root > li.nav-mega a:hover {
		color: var(--primary-color)!important;
	}
	.nav-tree .nav-root > li.nav-mega:hover > a {
		color: #ffffff!important;
		background: var(--nav-inverse-bg);
	}
	.nav-mega > ul {
		--gutter: .75rem;
		position: absolute;
		top:100%;
		left: var(--gutter);
		display: flex;
		flex-flow: column wrap;
		width: calc(960px - 2 * var(--gutter));
		height: calc(100vh - 240px);
	}
	.nav-tree[class^="slide-"] .nav-root > li.nav-mega.open > ul,
	.nav-tree[class*=" slide-"] .nav-root > li.nav-mega.open > ul {
		position: absolute;
		display: block;
		padding: 0;
		column-count: 4;
	}
	.nav-tree[class^="slide-"] .nav-root > li.nav-mega.open > ul > li,
	.nav-tree[class*=" slide-"] .nav-root > li.nav-mega.open > ul > li {
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}
	.nav-tree[class*=" slide-"] .nav-root ul li {
		flex-flow: column nowrap;
	}
	.nav-tree[class^="slide-"] .nav-root > li.nav-mega.open span,
	.nav-tree[class*=" slide-"] .nav-root > li.nav-mega.open span {
		display: none;
	}
	.nav-tree[class^="slide-"] .nav-root > li.nav-mega.open > ul ul,
	.nav-tree[class*=" slide-"] .nav-root > li.nav-mega.open > ul ul {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		min-width: 0;
		min-height: 0;
		padding-left: 2rem;
		opacity: 1;
		visibility: visible;
		writing-mode: initial;
		box-shadow: 0 0 0 transparent;
	}
	.nav-tree[class^="slide-"] .nav-root > li.nav-mega.open > ul ul > li,
	.nav-tree[class*=" slide-"] .nav-root > li.nav-mega.open > ul ul > li {
		width: 100%;
	}
}
@media (min-width:1200px) {
	.nav-mega > ul {
		width: calc(1140px - 2 * var(--gutter));
	}
	.nav-mega > ul.cat-0101 {
		height: 520px;
	}
	.nav-mega > ul.cat-0201 {
		height: 340px;
	}
}
@media (min-width:1400px) {
	.nav-tree .nav-root > li > a {
		padding: 1rem 1.5rem;
		font-size: 1rem;
	}

	.nav-mega > ul {
		width: calc(1320px - 2 * var(--gutter));
	}
}

/**
 * Backdrop
 */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: block;
	width: 100vw;
	height: 100vh;
	transition: all var(--speed);
	background: var(--primary-alpha20-color);
	backdrop-filter: blur(.125rem);
	opacity: .8;
	pointer-events: none;
}
body.has-backdrop { overflow: hidden; }
body.has-backdrop .backdrop { pointer-events: auto; }