@charset "UTF-8";
.catalog-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: var(--input-bg);
		z-index: 90;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		backface-visibility: hidden;
		transform: translateZ(0);
}
@media only screen and (max-width: 767px) {
		html.open-menu {
				overflow: hidden;
		}
}
html:not(.open-menu) .catalog-menu {
		opacity: 0;
		pointer-events: none;
}
.catalog-menu-inner {
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		padding: 125px 0 120px 0;
}
.catalog-menu .container {
		padding: 0;
		position: static;
		height: 100%;
}
.catalog-menu .mainlink {
		cursor: pointer;
		user-select: none;
		font: 600 17px/20px var(--fontg);
		letter-spacing: -0.015em;
		color: var(--grey700);
		text-align: left;
		display: block;
		position: relative;
		text-decoration: none;
		transition-property: color, background, border;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		border-style: solid;
		border-color: transparent;
		border-width: 0 0 0 3px;
		padding: 16px 20px 16px 120px;
}
.catalog-menu .mainlink:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 100%;
		width: 50vw;
		pointer-events: none;
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		display: none;
}
.catalog-menu .hover .mainlink, .catalog-menu .hover .mainlink:before {
		color: var(--blue);
		background-color: var(--white);
		border-color: var(--yellow);
}
.catalog-menu .mainlink svg {
		width: 36px;
		height: 36px;
		position: absolute;
		margin: -18px;
		top: 50%;
		left: 60px;
		fill: var(--grey700);
}
.catalog-menu .sub {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		padding: 0 0 40px 0;
		background: var(--white);
		transform: translate3d(100%, 0, 0);
		z-index: 10;
		transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.catalog-menu .hover .mainlink + .sub {
		transform: translate3d(0, 0, 0);
}
.catalog-menu .sub-title {
		margin: 68px 0 0 0;
		position: sticky;
		top: 68px;
		z-index: 2;
		font: bold 24px/18px var(--fontg);
		color: var(--darker);
		text-decoration: none;
		padding: 33px 20px 25px 60px;
		background: var(--white) url(../img/icons/header/menu-left.svg) no-repeat 20px 36px;
}
@media only screen and (max-width: 767px) {
		.catalog-menu .sub-title {
				cursor: pointer;
				user-select: none;
		}
		.catalog-menu .sub-title-back + .sub-title {
				display: none;
		}
}
.catalog-menu .sub-list {
		display: flex;
		flex-wrap: wrap;
		gap: 15px 0;
		padding: 9px 0;	/*margin-bottom: 60px;/*220424*/
}
.catalog-menu .sub-list .el {
		flex: 0 0 auto;
/*020324		width: 100%;*/
		width: 240px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
}
.catalog-menu .sub .label {
		display: block;
		font: bold 18px/18px var(--fontg);
		letter-spacing: -0.02em;
		color: var(--body-muted);
		padding: 11px 20px 11px 60px;
		text-decoration: none;
		margin: 0 0 10px 0;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		position: relative;
}
@media (pointer:fine) {
		.catalog-menu .sub a.label:hover {
				color: #425466;
		}
}
.catalog-menu .sub .label:not(:first-child) {
		margin-top: 15px;
}
.catalog-menu .sub .label + .label {
		margin-top: -10px;
}
.catalog-menu .sub a.label:after {
		content: '';
		position: absolute;
		background: url(../img/icons/header/mob-menu-right.svg) no-repeat 50% 50%;
		background-size: contain;
		width: 15px;
		height: 14px;
		margin: 4px 15px;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.catalog-menu .sublink {
		display: block;
		text-decoration: none;
		font: 300 15px/18px var(--fonti);
		letter-spacing: -0.02em;
		color: var(--grey900);
		padding: 11px 20px 11px 60px;
		position: relative;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.catalog-menu .sublink:before {
		content: '—';
		position: absolute;
		top: 0;
		padding-top: inherit;
		left: 30px;
		color: var(--grey400);
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.catalog-menu a.sublink:hover, .catalog-menu a.sublink:hover:before {
				color: var(--blue);
		}
}
.catalog-menu-image {
	display: none;
	text-decoration: none;
	text-align: center;
	position: absolute;
	top: 0;
	left: calc(100vw - 406px);
	left: min(calc(100vw - 406px), 1354px);
	margin: 95px 40px;
	width: 299px;
	background: #f9feff;
	font: 900 20px/30px var(--fontg);
	letter-spacing: -0.02em;
	color: var(--deep-blue);
	padding: 37px 20px 32px 20px;
	box-shadow: 0px 34px 24px -20px rgba(156, 195, 210, 0.4);
	transition-property: opacity, color;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	pointer-events: none;
	opacity: 0;
}
.catalog-menu-image:before {
		content: '';
		position: absolute;
		top: 67px;
		left: 50%;
		width: 175px;
		height: 175px;
		border-radius: 50%;
		background: #71CCFF;
		opacity: 0.1;
		transform: translate3d(-50%, 0, 0);
		z-index: 2;
		pointer-events: none;
}
html.open-menu .catalog-menu .hover .mainlink + .sub + .catalog-menu-image {
		pointer-events: all;
		opacity: 1;
}
.catalog-menu-image > img {
		display: block;
		width: calc(100% + 40px);
		height: 235px;
		margin: 0 -20px 0 -20px;
		object-fit: contain;
		object-position: center;
		mix-blend-mode: darken;
}
.catalog-menu-image:after {
		content: '';
		position: absolute;
		pointer-events: none;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border: 8px solid #EFFBFC;
}
.catalog-menu-image .logo {
		position: absolute;
		top: 0;
		left: 0;
		width: 23px;
		height: 22px;
		margin: 22px;
		background: url(../img/logo_top_menu.png) no-repeat 50% 50%;
		background-size: contain;
}
/*mobile end*/
/*tablet start*/
@media only screen and (max-width: 768px) {
.catalog-menu .sub-list .el {
			flex: 1 0 auto;
			/*020324 max-width: 240px;*/
			width: 100%;
		}
}
@media only screen and (min-width: 768px) {
		.catalog-menu-wrap {
				height: 0;
				position: relative;
				z-index: 90;
		}
		.catalog-menu {
				overflow: hidden;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: auto;
				border-top: 0.5px solid #D1D4D5;
				box-shadow: 0px 1px 1px rgba(12, 26, 75, 0.15), 0px 45px 65px rgba(20, 37, 63, 0.08);
				background: var(--white);
				background-repeat: repeat-y;
				background-position: 0 0;
				padding: 0;
		}
				/*edited 24.01.24 start*/
		/*.catalog-menu:not(.wide) {
				width: 317px;
		}
		@media only screen and (min-width: 1280px) {
				.catalog-menu:not(.wide) {
						width: 362px;
				}
		}*/
	/*edited 24.01.24 end*/
		.catalog-menu .container {
				background: linear-gradient(to right, var(--input-bg) 0%, var(--input-bg) 316.5px, #D0D3D4 316.5px, #D0D3D4 317px, var(--white) 317px, var(--white) 100%);
				position: relative;
				height: auto;
		}
		.catalog-menu-inner {
				padding-top: 29px;
				padding-bottom: 29px;
				width: 317px;
				position: relative;
				height: auto;
				overflow: visible;
		}
		.page-product .catalog-menu-inner{padding-bottom: 90px;}
		html:not(.page-product) .catalog-menu-inner {
				min-height: calc(100vh - 90px);
		}
		.catalog-menu .mainlink {
				font-size: 16px;
				border-width: 0 3px 0 0;
				padding-left: 110px;
				padding-right: 10px;
		}
		.catalog-menu .mainlink:before {
				display: block;
		}
		.catalog-menu .mainlink svg {
				left: 59px;
		}
		.catalog-menu .sub {
				position: absolute;
				top: 0;
				left: 317px;
				bottom: 0;
				right: 0;
				width: calc(100vw - 317px);
				height: auto;
				padding: 0;
				overflow: hidden;
				overflow-x: auto;
				background: none;
				transform: none !important;
				transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
				opacity: 0;
				pointer-events: none;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
		}
		html.open-menu .catalog-menu .hover .mainlink + .sub {
				pointer-events: all;
				opacity: 1;
		}
		.catalog-menu .sub-title-back {
				display: none;
		}
		.catalog-menu .sub-title {
				margin: 0;
				position: sticky;
				top: auto;
				left: 0;
				padding: 40px 20px 0 60px;
				background: none;
				width: 100%;
				letter-spacing: -0.03em;
		}
		.catalog-menu .sub-list {
				padding: 38px 20px 38px 0;
				flex-wrap: nowrap;
				flex: 0 0 auto;
				min-width: 100%;
				gap: 25px 0;
		}
		.catalog-menu .sub-list .el {
			flex: 1 0 auto;
			/*020324 max-width: 240px;*/
			width: 100%;
		}

		.catalog-menu .sub .label {
				font-size: 15px;
				margin-bottom: 3px;
				letter-spacing: -0.015em;
		}
		.catalog-menu .sub .label:not(:first-child) {
				margin-top: 25px;
		}
		.catalog-menu .sub .label + .label {
				margin-top: -3px;
		}
		.catalog-menu .sub a.label:after {
				background-image: url(../img/icons/header/desktop-menu-right.svg);
				width: 10px;
				height: 10px;
				opacity: 0.5;
				margin: 6px 10px;
		}
		@media (pointer:fine) {
				.catalog-menu .sub a.label:hover:after {
						opacity: 1;
				}
		}
		.catalog-menu .sublink {
				font-size: 14px;
				padding-right: 0;
		}
		.catalog-menu .sublink:before {
				font-size: 15px;
		}
		@media only screen and (max-height: 900px) {
				.catalog-menu .mainlink {
						padding-top: 12px;
						padding-bottom: 12px;
				}
				.catalog-menu .mainlink svg {
						transform: scale(0.9);
				}
		}
		@media only screen and (max-height: 800px) {
				.catalog-menu .mainlink {
						padding-top: 10px;
						padding-bottom: 10px;
				}
				.catalog-menu .mainlink svg {
						transform: scale(0.8);
				}
				.catalog-menu .sub .label, .catalog-menu .sublink {
						padding-top: 9px;
						padding-bottom: 9px;
				}
		}
		@media only screen and (max-height: 740px) {
				.catalog-menu .mainlink {
						padding-top: 8px;
						padding-bottom: 8px;
				}
				.catalog-menu .mainlink svg {
						transform: scale(0.7);
				}
				.catalog-menu .sub .label, .catalog-menu .sublink {
						padding-top: 7px;
						padding-bottom: 7px;
				}
		}
}
/*tablet end*/
/*desktop start*/
@media only screen and (min-width: 1280px) {
		.catalog-menu {
				top: -10px;
		}
		.sticked-header:not(.page-product) .catalog-menu {
				top: -30px;
		}
		.catalog-menu .container {
				background: linear-gradient(to right, var(--input-bg) 0%, var(--input-bg) 361.5px, #D0D3D4 361.5px, #D0D3D4 362px, var(--white) 362px, var(--white) 100%);
		}
		.catalog-menu-inner {
				width: 362px;
		}
		html:not(.page-product) .catalog-menu-inner {
				min-height: calc(100vh - 100px);
		}
		.catalog-menu .mainlink {
				padding-left: 130px;
		}
		.catalog-menu .mainlink svg {
				left: 79px;
		}
		.catalog-menu .sub {
				left: 362px;
				width: calc(100vw - 362px);
				padding-left: 28px;
				overflow: hidden;
		}
		.catalog-menu .sub-list {
				width: 100%;
		}
		.catalog-menu .sub-list .el {
				flex: 1 1 auto;
/*020324				max-width: none;*/
		}
		.catalog-menu .sub-title {
				padding-top: 36px;
		}
		.catalog-menu .sub .label {
				font-size: 16px;
		}
}
/*desktop end*/
/*desktop-big start*/
@media only screen and (min-width: 1680px) {
		.catalog-menu-image {
				display: block;
		}
}
/*for .container max-width*/
@media only screen and (min-width: 1760px) {
		.catalog-menu:before {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: calc(50vw - 880px);
				pointer-events: none;
				background: var(--input-bg);
		}
		.catalog-menu .sub {
				left: 362px;
				width: calc(100vw - 362px - 406px);
				max-width: 992px;
		}
}

/*added 20.02.25 start*/
@media only screen and (max-width: 767px) {
		.catalog-menu {
				height: 100lvh;
		}
		.catalog-menu .sub {
				padding-bottom: 120px;
		}
		.catalog-menu:has(.hover) .catalog-menu-inner {
				overflow: hidden;
		}
}
/*added 20.02.25 end*/