@font-face {
	font-family: 'Inter Tight';
	src: url(../fonts/InterTight-R.woff2);
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url(../fonts/InterTight-M.woff2);
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url(../fonts/InterTight-SB.woff2);
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url(../fonts/InterTight-B.woff2);
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url(../fonts/InterTight-EB.woff2);
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'icon';
	src: url(../fonts/icon.woff2);
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
:root {
	--white: #fff;
	--grey-white: #f1f3f3;
	--table-bg: #f7f9f9;
	--line: #e4e4e4;
	--brjyrb: #cacfd2;
	--grey-2: #eaecec;
	--grey-1: #a3a7a9;
	--t: #8e9fa6;
	--text: #6c777b;
	--grey: #464f53;
	--black: #181818;
	--no-color: rgba(0, 0, 0, 0);
	--blue: #016170;
	--blue2: #1a707e;
	--border: #5e9ba4;
	--dgd: #e36a3f;
	--orange: #e45c2b;
	--error: #e43a2b;
	--yellow: #f1d500;
	--shadow: 7px 54px 33px 0px rgba(0, 0, 0, 0.05), 3px 24px 24px 0px rgba(0, 0, 0, 0.09), 1px 6px 13px 0px rgba(0, 0, 0, 0.1);
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: 0;
	font-family: 'Inter Tight';
	-webkit-tap-highlight-color: transparent;
	font-size: 16px;
	color: var(--grey);
	font-weight: 400;
}
html {
	min-height: 100dvh;
	scroll-behavior: smooth;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	width: 100%;
	background: var(--grey-white);
	overflow-x: hidden;
	&:has(.window-modal.active) {
		overflow: hidden;
	}
	&.modal {
		padding-right: 8px;
	}
}
main {
	width: 100%;
}
a {
	text-decoration: none;
	transition: color 0.2s linear;
}
img {
	display: block;
	width: 100%;
}
button {
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s linear;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
textarea,
input[type="tel"],
select,
input[type="submit"] {
	appearance: none;
}
input[type="submit"] {
	border: none;
	cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
textarea {
	appearance: none;
	resize: none;
}
::-webkit-input-placeholder {
	font-weight: normal;
}
*::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}
*::-webkit-scrollbar-track {
	background: var(--white);
}
*::-webkit-scrollbar-thumb {
	border-radius: 4px;
	border: 2px solid var(--white);
	background-color: var(--blue);
}
.wrapper {
	width: calc(100% - 100px);
	max-width: 1820px;
	margin: 0 auto;
}
.green-btn {
	border-radius: 16px;
	background-color: var(--blue);
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--white);
	font-weight: 800;
	transition: background-color .2s linear;
	&::after {
		color: inherit;
		font: 100 18px/1 icon;
	}
	&[disabled] {
		opacity: .5;
		pointer-events: none;
	}
}
.header-search {
	border: 2px solid var(--blue);
	background-color: var(--blue);
	display: flex;
	align-items: stretch;
	border-radius: 12px;
	> input {
		border-radius: 10px 0 0 10px;
		color: var(--t);
		line-height: 1;
		letter-spacing: .48px;
		padding: 14px 8px;
		width: 100%;
		flex: 1 1 auto;
		border: none;
	}
	> button {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		&[type=submit] {
			border-radius: 0 11px 11px 0;
			width: 54px;
			background-color: var(--blue);
			transition: background-color .2s linear;
			&::after {
				content: '\e923';
				font: 100 30px/1 icon;
				color: var(--white);
			}
		}
		&.options {
			background: var(--white);
			padding: 0 8px;
			border-radius: 0 10px 10px 0;
			&::after {
				content: '\e927';
				font: 100 30px/1 icon;
				color: var(--blue);
				transition: color .2s linear;
			}
		}
	}
}
button[data-target="contacts-modal"] {
	display: flex;
	align-items: center;
	&::before {
		content: '\e916';
		font: 100 32px/1 icon;
		color: inherit;
		padding: 9px;
		flex-shrink: 0;
	}
	&::after {
		content: '\e922';
		font: 600 18px/1 icon;
		margin-left: 4px;
		color: inherit;
		flex-shrink: 0;
	}
	span {
		font-weight: 600;
	}
}
:is(a, button).user::before {
	content: '\e91f';
}
header {
	position: relative;
	z-index: 100;
	width: 100%;
	padding-top: 20px;
	.wrapper {
		position: relative;
		display: grid;
		grid-template-columns: 160px 1fr auto auto;
		align-items: center;
		.logo {
			transition: opacity .2s linear;
			width: 100%;
			aspect-ratio: 160/68;
			img {
				height: 100%;
			}
		}
		.header-search {
			margin: auto auto auto 30px;
			width: min(456px, 100%);
		}
		.additional-menu > .ws-menu {
			display: flex;
			align-items: center;
			gap: 30px;
			margin-left: 10px;
			> .item {
				> :is(a, p) {
					font-weight: 600;
					letter-spacing: 0.48px;
				}
				&:has(.sub-menu) {
					position: relative;
					> p {
						display: flex;
						gap: 4px;
						cursor: pointer;
						&::after {
							position: relative;
							content: '\e922';
							font: 600 18px/1 icon;
							color: inherit;
							transition: transform .2s linear;
						}
					}
					&.active {
						> p::after {
							transform: rotate(180deg);
						}
						.sub-menu {
							max-height: 200px;
							z-index: 2;
						}
					}
					.sub-menu {
						position: absolute;
						left: 0;
						top: calc(100% + 5px);
						border-radius: 20px;
						background: var(--white);
						max-height: 0;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						gap: 10px;
						padding: 0 30px;
						transition: max-height .3s linear;
						box-shadow: var(--shadow);
						> .item {
							&:first-child {
								margin-top: 20px;
							}
							&:last-child {
								margin-bottom: 20px;
							}
							a {
								letter-spacing: 0.48px;
							}
						}
					}
				}
			}
		}
		button[data-target="contacts-modal"] {
			margin-left: 50px;
		}
		.green-box {
			margin-top: 20px;
			grid-column: 1/-1;
			border-radius: 21px;
			background: var(--blue);
			padding: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;

		}
		.main-menu .ws-menu {
			display: flex;
			align-items: center;
			gap: 4px;
			* {
				color: var(--grey-white);
			}
			> .item {
				> :is(a, p) {
					font-weight: 600;
					letter-spacing: 0.48px;
					padding: 0 30px;
					min-height: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid var(--no-color);
					transition: background-color .2s linear, border-color .2s linear;
					border-radius: 16px;
				}
				&:has(.sub-menu) {
					position: relative;
					&:hover .sub-menu {
						max-height: 146px;
					}
					.sub-menu {
						position: absolute;
						left: 0;
						top: calc(100% + 9px);
						border-radius: 21px;
						background: var(--blue);
						max-height: 0;
						overflow: auto;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: 10px 20px;
						padding: 0 30px;
						transition: max-height .3s linear;
						&::-webkit-scrollbar {
							display: none;
						}
						> .item {
							&:first-child,
							&:first-child + .item {
								margin-top: 20px;
							}
							&:last-child {
								margin-bottom: 20px;
							}
							a {
								font-weight: 600;
								letter-spacing: 0.48px;
								white-space: nowrap;
								display: flex;
								align-items: center;
								gap: 4px;
								&::after {
									content: '\e922';
									font: 100 14px icon;
									color: inherit;
									transform: rotate(-90deg);
								}
							}
						}
					}
				}
				&:first-child > :is(a, p) {
					display: flex;
					gap: 4px;
					cursor: pointer;
					padding-left: 16px;
					border: 1px solid var(--blue2);
					background-color: var(--blue2);
					&::before {
						content: '\e928';
						font: 600 24px/1 icon;
						color: inherit;
					}
				}
			}
		}
		.buttons {
			display: flex;
			gap: 5px;
			a,
			button {
				border-radius: 16px;
				background: var(--grey-white);
				flex-shrink: 0;
				width: 50px;
				aspect-ratio: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--blue);
				&::before {
					font: 100 32px/1 icon;
					color: inherit;
				}
				&[href="/favorites"]::before {
					content: '\e91d';
				}
				&[href="/compare"]::before {
					content: '\e920';
				}
				&:where([href="/basket"], [href="/favorites"], [href="/compare"]) {
					position: relative;
					&:not(.empty) {
						&::after {
							position: absolute;
							display: flex;
							align-items: center;
							justify-content: center;
							top: 0;
							right: 0;
							color: var(--grey-white);
							font-size: 12px;
							width: 16px;
							aspect-ratio: 1;
							font-weight: 600;
							border-radius: 50%;
							background: var(--orange);
						}
						&.full::after {
							content: '' !important;
						}
					}
				}
				&[href="/basket"] {
					&::before {
						content: '\e921';
					}
					&:not(.empty)::after {
						content: attr(data-basket-count);
					}
				}
				&[href="/favorites"]:not(.empty)::after {
					content: attr(data-favorites-count);
				}
				&[href="/compare"]:not(.empty)::after {
					content: attr(data-compare-count);
				}
				&.burger {
					display: none;
					&::before {
						content: '\e900';
					}
				}
			}
		}
	}
}
.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 50px;
	margin-bottom: 30px;
	overflow-x: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	a,
	p {
		font-size: 12px;
		white-space: nowrap;
		color: var(--t);
		letter-spacing: 0.36px;
	}
	a {
		display: flex;
		align-items: center;
		gap: 6px;
		&::first-letter {
			text-transform: uppercase;
		}
		&::after {
			content: '/';
			color: var(--t);
			font-size: inherit;
		}
	}
	p {
		color: var(--blue);
	}
}
.title {
	font-size: 40px;
	font-weight: 700;
	color: var(--grey);
}
.window-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	&.active {
		opacity: 1;
		pointer-events: all;
		&:not(.burger-menu) .window-body {
			animation: show-modal 0.5s forwards;
		}
	}
	&:not(.burger-menu) .window-body {
		position: absolute;
		top: 50%;
		transform: translateY(-120vh);
	}
	.window-body {
		display: flex;
		border-radius: 20px;
		background: var(--white);
		box-shadow: var(--shadow);
		padding: 40px 60px;
		.close:not(.green-btn) {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 30px;
			aspect-ratio: 1;
			outline: none;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10px;
			transition: background-color .2s linear;
			&::before {
				content: '\e90e';
				color: var(--grey-dark);
				font: 100 12px/1 icon;
				transition: color .2s linear;
			}
		}
		.content {
			overflow-y: auto;
			scrollbar-width: none;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.heading {
			text-align: center;
			font-size: 24px;
			font-weight: 700;
			letter-spacing: 0.72px;
		}
		.label-box,
		label:not(.check) {
			display: flex;
			flex-direction: column;
			gap: 4px;
			color: var(--text);
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0.42px;
			margin-bottom: 10px;
			input,
			textarea {
				padding: 8px 10px 9px 12px;
				font-weight: 500;
				letter-spacing: 0.48px;
				background-color: var(--grey-white);
				border: 1px solid var(--grey-white);
				border-radius: 10px;
				color: var(--black);
				&::placeholder {
					color: var(--grey);
				}
				&:focus {
					border-color: var(--blue);
					&::placeholder {
						color: var(--black);
					}
				}
			}
		}
		.label-box div input {
			background: var(--white);
		}
		div:has(> .check) {
			display: grid;
			grid-template-columns: 16px 1fr;
			gap: 12px;
			p {
				color: var(--text);
				letter-spacing: 0.48px;
				a {
					color: var(--blue);
					letter-spacing: inherit;
				}
			}
		}
		.check {
			position: relative;
			width: 100%;
			aspect-ratio: 1;
			border-radius: 4px;
			background: var(--grey-white);
			cursor: pointer;
			input {
				display: none;
			}
			&::before {
				content: '\e918';
				font: 100 10px/1 icon;
				color: var(--grey-white);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			&:has(input:checked)::before {
				color: var(--blue);
			}
		}
		.green-btn {
			width: 100%;
			margin: 30px 0 10px;
		}
	}
	&.search-options .window-body {
		max-width: 474px;
		max-height: 100dvh;
		padding: 40px 30px;
		.content {
			overflow-y: visible;
		}
		form {
			border: none;
			max-height: 100%;
			display: grid;
			grid-template-rows: auto 1fr;
			.box {
				margin-right: -26px;
				padding-right: 20px;
				overflow-y: auto;
				height: 100%;
				display: flex;
				flex-direction: column;
				gap: 20px;
				.heading {
					color: var(--blue);
					text-align: left;
				}
			}
			.head {
				color: var(--blue);
				font-size: 24px;
				font-weight: 700;
				letter-spacing: 0.72px;
				margin-bottom: 20px;
				+ .box {
					display: flex;
					flex-direction: column;
					gap: 20px;
					height: 100%;
					overflow-y: auto;
				}
			}
		}
		.green-btn {
			margin: 30px 0 0;
		}
	}
}
.input {
	width: 100%;
	border: 1px solid var(--brjyrb);
	color: var(--grey);
	font-weight: 500;
	letter-spacing: 0.48px;
	border-radius: 10px;
	padding: 9px 16px 10px;
	transition: border-color .2s linear;
	&:focus {
		border-color: var(--grey);
	}
	&:-webkit-autofill {
		box-shadow: inset 0 0 0 50px var(--white) !important;
	}
}
@keyframes show-modal {
	0% {
		transform: translateY(-120vh);
	}
	100% {
		transform: translateY(-50%);
	}
}
.burger-menu {
	justify-content: start;
	align-items: start;
	transition: opacity .2s linear;
	&.active .window-body {
		transform: translateX(0);
	}
	.window-body {
		height: 100%;
		border-radius: 0;
		width: min(370px, calc(100vw - 10px));
		transform: translateX(-100%);
		display: grid;
		grid-template-rows: 70px 1fr;
		gap: 12px;
		padding: 0;
		transition-delay: .2s;
		transition: transform .5s;
		.close {
			position: static;
			margin-left: auto;
		}
		.top {
			display: flex;
			gap: 10px;
			padding: 10px;
			box-shadow: 0px 4px 10px 0px rgba(41, 45, 50, 0.1);
			> * {
				border-radius: 16px;
				background: var(--grey-white);
				flex-shrink: 0;
				width: 50px;
				aspect-ratio: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--blue);
				&::before {
					font: 100 32px/1 icon;
					color: inherit;
				}
				&[href="/favorites"]::before {
					content: '\e91d';
				}
				&.favorites {
					position: relative;
					&::before {
						content: '\e91d';
					}
					&:not(.empty) {
						&::after {
							content: attr(data-favorites-count);
							position: absolute;
							display: flex;
							align-items: center;
							justify-content: center;
							top: 0;
							right: 0;
							color: var(--grey-white);
							font-size: 12px;
							width: 16px;
							aspect-ratio: 1;
							font-weight: 600;
							border-radius: 50%;
							background: var(--orange);
						}
						&.full::after {
							content: '';
						}
					}
				}
				&[href="/compare"]::before {
					content: '\e920';
				}
			}
			button[data-target="contacts-modal"]::after {
				display: none;
			}
		}
		.content {
			overflow: initial;
			display: grid;
			grid-template-rows: auto 1fr;
			height: calc(100dvh - 90px);
			padding-left: 10px;
			.header-search {
				width: calc(100% - 10px);
				margin: 0 0 10px;
				input {
					padding: 11px 8px;
					line-height: 1.125;
				}
				button {
					&[type=submit] {
						width: 44px;
						&::after {
							font-size: 24px;
						}
					}
					&.options {
						padding: 0 6px;
						&::after {
							font-size: 24px;
						}
					}
				}
			}
			.main-menu {
				display: flex;
				flex-direction: column;
				gap: 10px;
				width: 100%;
				height: 100%;
				overflow-y: scroll;
				> .ws-menu {
					display: contents;
					&:first-child > .item:has(.sub-menu) {
						display: grid;
						grid-template-columns: repeat(2, auto);
						&.active {
							&::after {
								transform: rotate(-180deg);
							}
							> .sub-menu {
								max-height: 70dvh;
							}
						}
						> :is(a, p) {
							display: flex;
							gap: 10px;
							width: fit-content;
							align-items: center;
							&::before {
								content: '\e928';
								font: 100 24px / 1 icon;
								color: var(--blue);
							}
						}
						&::after {
							content: '\e922';
							grid-area: 1/2/2/3;
							width: 24px;
							aspect-ratio: 1;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							font: 100 18px / 1 icon;
							margin: 0 15px 0 auto;
							transform: rotate(-90deg);
							cursor: pointer;
							transition: transform .2s linear;
						}
						> .sub-menu {
							position: relative;
							grid-column: 1/-1;
							max-height: 0;
							padding-inline: 10px;
							overflow-y: auto;
							transition: max-height .5s;
							&::-webkit-scrollbar {
								display: none;
							}
							a {
								font-weight: 500;
								letter-spacing: 0.48px;
							}
							> .item:first-child {
								margin-top: 6px;
							}
						}
					}
					+ .ws-menu .item a,
					> .item > a {
						font-family: "Inter Tight";
						font-weight: 700;
						letter-spacing: 0.48px;
					}
					.item .sub-menu {
						display: flex;
						flex-direction: column;
						gap: 10px;
					}
					p {
						display: none;
					}
				}
			}
		}
	}
}
:is(.contacts-modal, .request-call) .window-body {
	width: min(438px, 100vw);
	max-height: 100dvh;
}
.contacts-modal .window-body {
	.heading {
		margin-bottom: 30px;
	}
	:where(.tel, .address, .email, .schedule) {
		display: grid;
		grid-template-columns: 50px 1fr;
		align-items: center;
		gap: 10px 20px;
		width: 100%;
		margin-bottom: 20px;
		&::before {
			border-radius: 16px;
			background: var(--grey-white);
			font: 100 32px/1 icon;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			grid-column: 1/2;
			aspect-ratio: 1;
		}
		&:has(> * + *)::before {
			grid-row: 1/3;
			align-self: start;
		}
		> * {
			grid-column: 2/3;
		}
	}
	.tel {
		a {
			color: var(--black);
			font-size: 20px;
			font-weight: 600;
			letter-spacing: 0.2px;
		}
		&::before {
			content: '\e916';
		}
	}
	.address {
		p {
			color: var(--text);
			letter-spacing: 0.48px;
			&::first-line {
				color: var(--black);
				font-weight: 600;
			}
		}
		&::before {
			content: '\e929';
		}
	}
	.email {
		a {
			font-size: 16px;
			font-weight: 600;
			text-decoration: underline;
		}
		&::before {
			content: '\e915';
		}
	}
	.schedule {
		> div {
			color: var(--black);
			font-weight: 700;
		}
		p {
			color: var(--text);
			letter-spacing: 0.16px;
			b {
				color: var(--grey);
				font-weight: 700;
				letter-spacing: inherit;
			}
		}
		&::before {
			content: '\e910';
		}
	}
	.green-btn {
		width: 100%;
		margin-top: 10px;
		&::after {
			content: '\e92a';
			font-size: 24px;
		}
	}
	.buttons {
		display: none;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 30px;
		&:has(a) {
			display: flex;
		}
		a::before {
			border-radius: 16px;
			background-color: var(--grey-white);
			font: 100 32px/1 icon;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			aspect-ratio: 1;
			transition: background-color .2s linear, color .2s linear;
		}
	}
}
.request-call .window-body {
	.heading {
		margin-bottom: 6px;
		+ p {
			color: var(--text);
			text-align: center;
			font-weight: 500;
			letter-spacing: 0.48px;
			margin-bottom: 2px;
		}
	}
	label:not(.check) input {
		background-color: var(--grey-white);
	}
}
.label-box.password > div {
	position: relative;
	&:has(input[type="text"]) button::before {
		content: '\e935';
	}
	input {
		width: 100%;
		padding-right: 45px !important;
	}
	button {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--blue);
		&::before {
			content: '\e924';
			font: 100 20px/1 icon;
			color: inherit;
		}
	}
}
:is(.login-modal, .registration-modal, .change-password-modal) .window-body {
	width: min(620px, calc(100vw - 20px));
	max-height: 100dvh;
	padding: 69px 60px 60px;
	.heading {
		display: flex;
		margin-bottom: 39px;
		&::before {
			font: 100 32px/1 icon;
			color: var(--blue);
		}
	}
	form {
		width: 100%;
		> p:last-child {
			color: var(--grey);
			text-align: center;
			font-weight: 500;
			letter-spacing: 0.48px;
			margin-top: 50px;
			button {
				color: var(--orange);
				text-align: inherit;
				font-size: inherit;
				font-weight: inherit;
				letter-spacing: 0.48px;
				text-decoration: underline;
				margin-left: 6px;
			}
		}
	}
	.label,
	.label-box,
	label:not(.check) {
		margin-bottom: 20px;
		input {
			background-color: var(--white);
			border-color: var(--line);
			&:-webkit-autofill {
				box-shadow: inset 0 0 0 50px var(--white) !important;
			}
		}
	}
	label.email {
		position: relative;
		.email-existing {
			position: absolute;
			color: var(--error);
			bottom: -20px;
			font-size: 14px;
			opacity: 0;
			transition: .3s linear;
		}
		&.error {
			.email-existing {
				opacity: 1;
			}
		}
	}
	.label-box.password {
		position: relative;
		.password-error {
			color: var(--error);
			font-size: 14px;
			opacity: 0;
			transition: .3s linear;
			margin-top: -20px;
			pointer-events: none;
		}
		&.error {
			.password-error {
				margin-top: 0;
				opacity: 1;
			}
		}
	}
	label.login {
		position: relative;
		.no-user {
			position: absolute;
			color: var(--error);
			bottom: -20px;
			font-size: 14px;
			opacity: 0;
			transition: .3s linear;
		}
		&.error .no-user {
			opacity: 1;
		}
	}
}
.login-modal .window-body {
	.heading {
		gap: 10px;
		&::before {
			content: '\e91f';
		}
	}
	.reset-password {
		margin: 10px 0 16px;
		color: var(--grey);
		text-align: center;
		font-weight: 500;
		letter-spacing: 0.48px;
		text-decoration: underline;
	}
	.green-btn {
		margin: 0;
	}
}
.info-modal .window-body {
	padding: 60px;
	max-width: 586px;
	.heading {
		color: var(--blue);
		text-align: center;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.72px;
		margin-bottom: 6px;
	}
	p {
		color: var(--text);
		text-align: center;
		font-weight: 500;
		letter-spacing: 0.48px;
		+ p {
			color: var(--grey);
			margin-top: 40px;
		}
	}
	a {
		color: var(--grey);
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.6px;
		margin-top: 6px;
	}
}
.registration-modal .window-body {
	.heading {
		gap: 10px;
		&::before {
			content: '\e934';
		}
	}
	.btn {
		margin: 50px 0 16px;
	}
	div:has(> .check) {
		grid-template-columns: 26px 1fr;
		align-items: center;
		max-width: 350px;
		.check {
			border-radius: 6px;
			background-color: var(--blue);
			&::before {
				color: var(--blue);
				font-size: 12px;
			}
			&:has(input:checked)::before {
				color: var(--white);
			}
		}
	}
}
.telegram {
	&::before {
		content: '\e914';
	}
	&:has(span) {
		&::before {
			display: none;
		}
		span:before {
			content: '\e914';
		}
	}
}
.facebook {
	&::before {
		content: '\e913';
	}
	&:has(span) {
		&::before {
			display: none;
		}
		span:before {
			content: '\e913';
		}
	}
}
.instagram {
	&::before {
		content: '\e912';
	}
	&:has(span) {
		&::before {
			display: none;
		}
		span:before {
			content: '\e912';
		}
	}
}
.vk {
	&::before {
		content: '\e930';
	}
	&:has(span) {
		&::before {
			display: none;
		}
		span:before {
			content: '\e930';
		}
	}
}
.subscribe {
	position: relative;
	border-radius: 16px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	overflow: hidden;
	margin-bottom: 120px;
	> a {
		position: absolute;
		left: 30px;
		top: 30px;
		max-width: 160px;
	}
	.img {
		overflow: hidden;
		position: relative;
		img {
			position: absolute;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.info {
		position: relative;
		background: var(--blue);
		padding: 80px 60px 79px 30px;
		margin-left: -30px;
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -124px;
			width: 125px;
			height: 100%;
			mask-image: url(../images/neckline.png);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: 100% 100%;
			background-color: inherit;
		}
		* {
			position: relative;
			z-index: 1;
		}
		h3 {
			color: var(--grey-white);
			font-size: 40px;
			font-weight: 700;
		}
		> p {
			color: var(--grey-white);
			font-size: 20px;
			margin-bottom: 30px;
		}
		form {
			display: grid;
			grid-template-columns: 16px 1fr;
			gap: 20px 12px;
			align-items: center;
			#checkbox {
				display: none;
				&:checked ~ label::before {
					opacity: 1;
					color: var(--blue);
				}
				&:checked ~ div #subscribe-send {
					pointer-events: all;
				}
			}
			div {
				grid-column: 1/-1;
				display: flex;
				max-width: 741px;
				width: 100%;
				height: 50px;
				padding: 2px;
				border-radius: 12px;
				background: var(--dgd);
				input {
					width: 100%;
					height: 100%;
					padding-inline: 16px;
					border-radius: 10px;
					border: none;
					background: var(--white);
					color: var(--black);
					font-weight: 600;
					letter-spacing: 0.48px;
					&:-webkit-autofill {
						-webkit-box-shadow: inset 0 0 0 50px var(--white) !important;
						box-shadow: inset 0 0 0 50px var(--white) !important;
					}
					&::placeholder {
						color: var(--t);
					}
				}
				button {
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					color: var(--white);
					padding: 11px 13px;
					span {
						font-size: 18px;
						font-weight: 700;
						max-width: 94px;
						margin-right: 10px;
						flex-shrink: 0;
						color: inherit;
						overflow: hidden;
						transition: max-width .2s linear, margin-right .2s linear;
					}
					&::before {
						content: '\e922';
						font: 100 20px/1 'icon';
						width: 100%;
						aspect-ratio: 1;
						display: grid;
						place-items: center;
						transform: rotate(-90deg);
						color: inherit;
					}
					&:disabled span {
						max-width: 0;
						padding-right: 0;
					}
				}
			}
			label {
				cursor: pointer;
				&::before {
					content: '\e918';
					font: 100 9px/1 'icon';
					width: 16px;
					height: 16px;
					border-radius: 4px;
					background-color: var(--white);
					display: grid;
					place-items: center;
					opacity: .5;
					color: var(--no-color);
				}
			}
			> p {
				color: var(--brjyrb, #cacfd2);
				letter-spacing: 0.48px;
				a {
					color: var(--border, #5e9ba4);
					font-size: inherit;
					letter-spacing: inherit;
					white-space: nowrap;
				}
			}
		}
	}
}
.arrow::before {
	content: '\e922';
	font: 100 20px/1 'icon';
	color: var(--white);
	border-radius: 16px;
	width: 50px;
	aspect-ratio: 1;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	transform: rotate(-90deg);
	cursor: pointer;
	transition: color .2s linear, background-color .2s linear;
}
.arrow-l::before {
	transform: rotate(90deg);
}
:where(.add-favorites, .add-compare) {
	position: relative;
	z-index: 1;
	&::before {
		content: '\e920';
		font: 100 32px/1 icon;
		color: var(--blue);
		padding: 9px;
		border-radius: 16px;
		transition: color .2s linear;
		background-color: var(--grey-white);
	}
	&::after {
		content: '\e92d';
		position: absolute;
		left: 25px;
		top: 18px;
		font: 100 13px/1 icon;
		color: var(--orange);
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: var(--grey-white);
		border: 2px solid transparent;
		transition: color .2s linear;
		opacity: 0;
	}
	&.checked::after {
		opacity: 1;
	}
}
.add-favorites::before {
	content: '\e91d';
}
.price {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: 10px;
	span {
		font-size: 24px;
		font-weight: 700;
	}
	span + span {
		font-size: 16px;
		text-decoration-line: line-through;
		text-decoration-color: var(--grey-1);
		color: var(--grey-1);
		font-weight: 400;
	}
	&:not(:has(span)) {
		margin: 5px 0;
	}
}
.basket-form {
	width: 100%;
	display: flex;
	gap: 4px;
	container: basket-form / inline-size;
	fieldset {
		border: none;
		display: flex;
		align-items: center;
		gap: 1px;
		border-radius: 16px;
		background: var(--grey-white);
		button {
			display: flex;
			position: relative;
			aspect-ratio: 1;
			flex-shrink: 0;
			background-color: var(--no-color);
			border: none;
			border-radius: inherit;
			padding: 9px;
			color: var(--blue);
			&::before {
				content: '\e92b';
				font: 100 32px/1 icon;
				color: inherit;
			}
			&.add-quantity::before {
				content: '\e92c';
			}
			&.disabled {
				pointer-events: none;
				color: var(--brjyrb);
			}
		}
		.add-quantity::after {
			transform: translate(-50%, -50%) rotate(90deg);
		}
		input {
			padding: 0;
			border: none;
			width: 3ch;
			background-color: inherit;
			text-align: center;
			font-size: 20px;
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}
	}
	> button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		flex: 1 1 auto;
		border-radius: 16px;
		background-color: var(--grey-white);
		border: none;
		font-weight: 800;
		flex-shrink: 0;
		transition: color .2s linear, background-color .2s linear;
		&::after {
			content: '\e921';
			font: 100 32px/1 'icon';
			color: var(--blue);
			transition: inherit;
		}
		span {
			color: inherit;
			font-size: inherit;
			font-weight: inherit;
		}
	}
}
@container basket-form (width < 268px) {
	.basket-form {
		fieldset button {
			padding: 6px;
			&::before {
				font-size: 28px;
			}
		}
		.add-cart {
			background-color: var(--orange);
			color: var(--white);
			gap: 0;
			&::before {
				content: '\e92e';
				color: inherit;
				font: 100 10px/1 icon;
			}
			&::after {
				color: inherit;
				font-size: 20px;
			}
			span {
				display: none;
			}
		}
	}
}
.advantages {
	border-radius: 20px;
	background: var(--white);
	padding: 49px 38px;
	display: flex;
	gap: 60px;
	> div {
		position: relative;
		flex: 1 1 auto;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 15px;
		&::before {
			content: '\e90d';
			font: 100 50px/1 icon;
			color: var(--blue);
			grid-row: 1/3;
			margin-top: 6px;
		}
		.head {
			font-size: 24px;
			font-weight: 700;
			letter-spacing: 0.72px;
		}
		p {
			color: var(--t);
			font-size: 14px;
			font-weight: 500;
		}
		&:not(:first-child)::after {
			content: '';
			position: absolute;
			top: 0;
			right: calc(100% + 30px);
			background: var(--brjyrb);
			width: 1px;
			height: 100%;
		}
		&:nth-child(2)::before {
			content: '\e905';
		}
		&:nth-child(3)::before {
			content: '\e90c';
		}
		&:nth-child(4)::before {
			content: '\e90b';
		}
	}
}
.snippet {
	container: snippet / inline-size;
	.snippet-wrapper {
		position: relative;
		border-radius: 16px;
		background: var(--white);
		overflow: hidden;
		/* > a {
			position: absolute;
			inset: 0;
		} */
	}
	.image-box {
		position: relative;
	}
	.tabs {
		--pos: 20px;
		position: absolute;
		left: var(--pos);
		top: var(--pos);
		display: flex;
		flex-wrap: wrap;
		gap: 5px 2px;
		z-index: 3;
		width: calc(100% - (var(--pos) * 2));
		> div {
			padding: 5px 12px 6px;
			border-radius: 6px;
			color: var(--white);
			font-size: 14px;
			font-weight: 700;
			&.new {
				background: var(--blue);
			}
			&.sail {
				background: var(--orange);
			}
		}
	}
	.add-compare,
	.add-favorites {
		position: absolute;
		right: 20px;
		bottom: 30px;
		z-index: 3;
		opacity: 0;
		transition: opacity .2s linear;
		pointer-events: none;
	}
	.add-compare {
		bottom: 85px;
	}
	.slides {
		position: relative;
		display: grid;
		gap: 0;
		grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
		aspect-ratio: 1;
		width: 100%;
		overflow: hidden;
		> div {
			height: 100%;
			z-index: 3;
		}
		img {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			object-fit: cover;
			object-position: top center;
			&.active {
				z-index: 1;
			}
		}
	}
	.dots {
		opacity: 0;
		transition: opacity .2s;
		margin: 4px 20px 0;
		display: flex;
		gap: 4px;
		> div {
			flex: 1 1 auto;
			height: 2px;
			background-color: var(--brjyrb);
			border-radius: 1px;
			&.active {
				background-color: var(--orange);
			}
		}
	}
	.title {
		font-size: 20px;
		margin: 14px 20px 6px;
		min-height: 2lh;
		max-height: 2lh;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.description {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		height: 2lh;
		margin: 0 20px 10px;
		color: var(--grey);
		> * {
			display: contents;
			font-size: inherit;
			color: inherit;
			line-height: inherit;
			font-weight: inherit;
		}
		> :is(h2, h3, h4, h5) {
			display: none;
		}
	}
	.size {
		margin: 0 20px 30px;
		border-radius: 11px;
		background: var(--blue);
		color: var(--grey-white);
		font-weight: 600;
		padding: 6px 10px 5px 10px;
	}
	.price {
		margin: 0 20px 12px;
	}
	.not-available,
	.basket-form {
		position: relative;
		z-index: 1;
		width: auto;
		margin: 0 20px 20px;
	}
	.not-available {
		height: 50px;
		display: flex;
		align-items: center;
		font-weight: 800;
	}
}
@container snippet (width > 520px) {
	.snippet .snippet-wrapper {
		display: grid;
		grid-template-columns: 300px 1fr minmax(200px, 300px);
		align-items: start;
		grid-auto-rows: auto;
		padding-right: 20px;
		.add-favorites,
		.add-compare {
			opacity: 1;
			pointer-events: all;
			bottom: initial;
			top: 20px;
		}
		.add-favorites {
			top: 73px;
		}
		.image-box {
			position: static;
			display: contents;
			.image-slider {
				position: relative;
				grid-area: 1/1/6/2;
			}
			.dots {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: calc(100% - 60px);
				bottom: 10px;
				margin: 0;
				z-index: 3;
			}
		}

		.tabs {
			position: static;
			grid-area: 1/2/2/3;
			margin: 20px 20px 0;
		}
		:is(.title, .description, .size, .tabs) {
			grid-column: 2/-1;
			width: min(400px, calc(100% - 80px));
		}
		.title {
			margin-top: 20px;
		}
		.description {
			-webkit-line-clamp: 3;
			line-clamp: 3;
			height: 3lh;
		}
		.size {
			margin-bottom: 11px;
		}
		.price {
			margin-bottom: 20px;
			align-self: end;
			flex-wrap: nowrap;
			span {
				white-space: nowrap;
			}
		}
		.not-available,
		.basket-form {
			margin-inline: 0;
		}
	}
}
@container snippet (width > 520px) and (width < 740px) {
	.snippet .snippet-wrapper {
		grid-template-columns: auto 1fr minmax(200px, 300px);
		padding-right: 10px;
		.slides {
			aspect-ratio: 3/4;
		}
		.image-box .image-slider {
			grid-row: 1/7;
			height: 100%;
			aspect-ratio: 3/4;

		}
		:is(.tabs, .title, .description, .size) {
			margin-left: 10px;
		}
		.price {
			grid-column: 2/-1;
			margin-inline: 10px;
			span {
				font-size: 20px;
				+ span {
					font-size: 16px;
				}
			}
		}
		.not-available,
		.basket-form {
			grid-area: 6/2/7/-1;
			margin-left: 10px;
		}
	}
}
@container snippet (width < 340px) {
	.snippet {
		:is(.not-available, .basket-form, .title, .price, .size, .description) {
			margin-inline: 5px;
		}
		.dots {
			margin: 2px 10px 0;
			> div {
				height: 1px;
			}
		}
		.title {
			margin-top: 9px;
			margin-bottom: 4px;
			font-size: 16px;
		}
		.tabs > div {
			padding: 2px 6px 3px;
			border-radius: 4px;
			font-size: 12px;
		}
		.size {
			margin-bottom: 20px;
		}
		.price span {
			font-size: 20px;
			+ span {
				font-size: 16px;
			}
		}
		.not-available,
		.basket-form {
			margin-bottom: 5px;
		}
		.not-available {
			height: 40px;
		}
		.table-box {
			padding: 5px !important;
		}
	}
}
@container snippet (width < 240px) {
	.snippet {
		.add-compare,
		.add-favorites {
			right: 5px;
			&::before {
				padding: 4px;
				font-size: 24px;
				border-radius: 10px;
			}
			&::after {
				left: 15px;
				top: 11px;
				font-size: 10px;
			}
		}
		.add-compare {
			bottom: 48px;
		}
		.add-favorites {
			bottom: 10px;
		}
	}
}
.snippet-slider {
	position: relative;
	margin-bottom: 60px;
	> h2 {
		margin-bottom: 50px;
	}
	.hidden-box {
		width: 100%;
		overflow: hidden;
		position: relative;
		> .slides {
			display: flex;
			gap: 30px;
			margin-bottom: 42px;
			.snippet {
				width: 340px;
				flex-shrink: 0;
			}
		}
	}
	.arrow {
		position: absolute;
		top: 238px;
		z-index: 4;
		opacity: 0;
		transition: opacity .2s;
		&.ws-arrow-disabled {
			pointer-events: none;
		}
		&::before {
			color: var(--blue);
			border: 1px solid var(--blue);
			background-color: var(--grey-white);
			font-size: 28px;
		}
		&.arrow-l {
			left: 0;
			transform: translateX(-50%);
		}
		&.arrow-r {
			right: 0;
			transform: translateX(50%);
		}
	}
}
.bubbles {
	width: fit-content;
	display: flex;
	gap: 16px;
	margin: 0 auto;
	padding: 12px 0;
	div {
		width: 6px;
		height: 6px;
		background-color: var(--brjyrb);
		border-radius: 50%;
		transition: background-color .2s linear;
		cursor: pointer;
	}
	.selected {
		background-color: var(--orange);
	}
}
.pagination {
	margin-top: 50px;
	grid-column: 1/-1;
	display: none;
	justify-content: end;
	align-self: end;
	gap: 30px;
	&:has(a:not(.prev) + a:not(.next)) {
		display: flex;
	}
	span {
		width: 32px;
		aspect-ratio: 1;
		background: url(../images/dots.svg) center center/ 100% auto no-repeat;
	}
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--grey);
		font-size: 24px;
		font-weight: 700;
		&:is(.start, .end, .prev, .next) {
			width: 50px;
			aspect-ratio: 1;
			border-radius: 16px;
			flex-shrink: 0;
			border: 1px solid var(--grey);
			&.disabled {
				pointer-events: none;
				opacity: 0.5;
			}
			&::before {
				font: 100 28px/1 icon;
			}
		}
		&:is(.start, .end)::before {
			content: '\e90a';
		}
		&:is(.prev, .next) {
			&::before {
				content: '\e922';
				transform: rotate(90deg);
			}
		}
		&.next::before {
			transform: rotate(-90deg);
		}
		&.start::before {
			transform: scaleX(-1);
		}
		&.selected {
			color: var(--orange);
		}
	}
}
.blue-checkbox {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	letter-spacing: 0.14px;
	label {
		position: relative;
		flex: 0 0 26px;
		display: inline-block;
		aspect-ratio: 1;
		border: 1px solid var(--grey);
		border-radius: 6px;
		margin: 3px !important;
		cursor: pointer;
		&::before {
			content: '\e918';
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font: 100 12px/1 icon;
			color: var(--white);
		}
		input {
			display: none;
		}
		&:has(input:checked) {
			background-color: var(--blue);
		}
	}
}
.spoiler-box {
	position: relative;
	width: 100%;
	.spoiler {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 1;
	}
}
.spoiler {
	position: relative;
	display: flex;
	flex-direction: column;
	*::-webkit-scrollbar {
		display: none;
	}
	.toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		color: var(--grey);
		font-weight: 700;
		letter-spacing: 0.48px;
		background: none;
		transition: color .2s linear;
		.mark {
			position: relative;
			flex: 0 0 26px;
			aspect-ratio: 1;
			border-radius: 7px;
			background-color: var(--brjyrb);
			transition: background-color .2s linear;
			&::before,
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: var(--white);
				border-radius: 2px;
				height: 3px;
				width: calc(100% - 8px);
				transition: transform linear;
			}
			&::before {
				transition-duration: .3s;
			}
			&::after {
				transition-duration: .4s;
			}
		}
	}
	.spoiler-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .3s linear;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--brjyrb);
		.list {
			display: grid;
			grid-template-columns: 1fr;
			overflow: hidden;
			width: 100%;
			&.double {
				grid-template-columns: repeat(2, 1fr);
				column-gap: 10px;
				> *:nth-child(2) {
					margin-top: 10px;
				}
			}
			> *:first-child {
				margin-top: 10px;
			}
		}
	}
	&.open {
		.toggle .mark {
			&::before {
				transform: translate(-50%, -50%) rotate(180deg);
			}
			&::after {
				transform: translate(-50%, -50%) rotate(270deg);
			}
		}
		.spoiler-body {
			grid-template-rows: 1fr;
		}
	}
	&.radio {
		transition: box-shadow .3s;
		background: var(--grey-white);
		&::before {
			content: '';
			position: absolute;
			left: -1px;
			top: -1px;
			width: calc(100% + 1px);
			height: calc(100% + 1px);
			z-index: -1;
			background: inherit;
			opacity: 0;
			transition: opacity .3s linear;
			border-radius: inherit;
			pointer-events: none;
		}
		* {
			color: var(--grey);
		}
		&.open {
			box-shadow: var(--shadow);
			&::before {
				opacity: 1;
			}
			.toggle::after {
				color: var(--orange);
			}
		}
		.toggle {
			font-weight: 500;
			letter-spacing: 0.48px;
			padding: 13px 30px;
			&::after {
				content: '\e937';
				font: 100 24px/1 icon;
				color: inherit;
				transition: color .2s linear;
			}
		}
		.list {
			padding: 0 30px;
			gap: 16px;
			> *:first-child {
				margin-top: 20px;
			}
			> *:last-child {
				margin-bottom: 10px;
			}
		}
	}
}
form:has(label.error) {
	border-color: var(--error);
}
*:has(> .validation-info) {
	> .validation-info {
		display: none;
		opacity: 0;
		transition: opacity .2s linear;
	}
	&:is(.valid, .error) > .validation-info {
		opacity: 1;
		display: block;
	}
	&.valid {
		> input {
			border-color: var(--border) !important;
		}
		> .validation-info {
			color: var(--border) !important;
		}
	}
	&.error {
		> input {
			border-color: var(--error) !important;
		}
		> .validation-info {
			color: var(--error) !important;
		}
	}
}
.card-modal {
	position: fixed;
	top: 40px;
	right: -100vw;
	z-index: 9999;
	width: min(440px, calc(80vw - 20px));
	display: grid;
	grid-template-columns: 100px 1fr;
	column-gap: 12px;
	padding: 6px;
	border-radius: 14px;
	background: var(--white);
	animation: hide .6s forwards;
	transform: translateX(0);
	box-shadow: var(--shadow);
	&.new {
		animation: show .6s forwards;
	}
	&.no-link > a {
		display: none;
	}
	> a {
		position: absolute;
		inset: 0;
	}
	img {
		width: 100%;
		aspect-ratio: 1;
		margin: 0;
		border-radius: 8px;
		object-fit: cover;
		object-position: top center;
	}
	.info {
		position: relative;
		padding-right: 30px;
		.head {
			width: fit-content;
			color: var(--black-grey);
			font-weight: 600;
			line-height: 125%;
			font-size: 20px;
			margin-bottom: 10px;
		}
		p {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			line-height: 125%;
			color: var(--grey-x);
		}
		button {
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			aspect-ratio: 1;
			outline: none;
			border: none;
			transition: color .2s linear;
			display: flex;
			align-items: center;
			justify-content: center;
			background: none;
			z-index: 1;
			color: var(--grey-dark);
			&::before {
				content: '\e90e';
				font: 100 16px/1 icon;
				color: inherit;
			}
		}
	}
}
.reset-password,
.confirm-email {
	&.error .invalid-code {
		opacity: 1;
	}
	.window-body {
		padding: 60px;
		max-width: 630px;
		width: 100%;
		.heading {
			margin-bottom: 20px;
		}
		p {
			color: var(--text);
			text-align: center;
			margin-top: 4px;
			&:last-of-type {
				margin-bottom: 30px;
			}
			span {
				color: var(--orange);
			}
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			position: relative;
			input {
				border-radius: 10px;
				border: 1px solid var(--line);
				background: var(--white);
				height: 40px;
				padding: 0 20px;
				font-weight: 500;
				letter-spacing: 0.48px;
				width: 186px;
				text-align: center;
				&::placeholder {
					color: var(--brjyrb, #cacfd2);
				}
			}
			.green-btn {
				margin: 40px 0px 20px;
				+ button {
					color: var(--blue);
					text-align: center;
					font-weight: 500;
					letter-spacing: 0.48px;
				}
			}
		}
	}
	.invalid-code {
		position: absolute;
		color: var(--error);
		top: 40px;
		font-size: 14px;
		opacity: 0;
		transition: .3s linear;
	}
}
@keyframes show {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-100vw - 50px));
	}
}
@keyframes hide {
	0% {
		transform: translateX(calc(-100vw - 50px));
	}
	100% {
		transform: translateX(0);
	}
}
footer {
	margin-top: auto;
	background-color: var(--white);
	padding: 60px 0 23px;
	.wrapper {
		display: grid;
		grid-template-columns: 740px auto;
		justify-content: space-between;
		column-gap: 60px;
		* {
			color: var(--grey);
		}
		.logo {
			width: 100%;
			transition: opacity .2s linear;
		}
		.box {
			display: grid;
			grid-template-columns: auto auto 382px;
			gap: 60px 121px;
			.heading {
				font-size: 20px;
				font-weight: 700;
				letter-spacing: 0.6px;
			}
			nav {
				display: flex;
				flex-direction: column;
				gap: 10px;
				.ws-menu {
					display: contents;
					.sub-menu {
						display: contents;
					}
					.item:has(.sub-menu) {
						display: flex;
						flex-direction: column;
						gap: 10px;
						p {
							display: none;
						}
					}
					a {
						color: var(--grey);
						letter-spacing: 0.48px;
					}
				}
			}
			.contact-info {
				display: flex;
				flex-direction: column;
				gap: 10px;
				margin-right: 85px;
				:is(.tel, .address, .email) {
					display: flex;
					align-items: center;
					gap: 12px;
					&::before {
						width: 50px;
						aspect-ratio: 1;
						flex-shrink: 0;
						border-radius: 16px;
						background: var(--grey-white);
						font: 100 32px/1 icon;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.tel {
					&::before {
						content: '\e916';
					}
					a {
						font-weight: 600;
						white-space: nowrap;
					}
				}
				.address {
					p:first-line {
						font-weight: 600;
					}
					&::before {
						content: '\e929';
					}
				}
				.email {
					&::before {
						content: '\e915';
					}
					a {
						font-weight: 600;
						text-decoration: underline;
						&::before {
							display: none;
						}
					}
				}
			}
			.social {
				grid-column: 1/-1;
				align-self: start;
				display: flex;
				gap: 30px;
				.heading {
					color: var(--blue);
					flex-shrink: 0;
					margin-top: 13px;
					letter-spacing: 0.6px;
				}
				.items {
					flex-grow: 1;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 10px;
				}
				a {
					width: min(198px, 100%);
					border-radius: 16px;
					background: var(--grey-white);
					padding: 9px 16px 9px 9px;
					transition: background-color .2s linear;
					span {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 10px;
						width: 100%;
						font-size: 20px;
						font-weight: 700;
						letter-spacing: 0.6px;
						color: inherit;
						transition: color .2s linear;
						&::before {
							color: inherit;
							font: 100 32px/1 icon;
						}
					}
				}
			}
		}
		.bottom {
			grid-column: 1/-1;
			margin-top: 29px;
			border-top: 1px solid var(--line);
			padding-top: 20px;
			display: flex;
			align-items: start;
			.requisites {
				padding-right: 10px;
				border-right: 1px solid var(--line);
				flex-grow: 1;
				* {
					font-size: 14px;
				}
			}
			.copyright {
				max-width: 217px;
				margin: 0 39px 0 30px;
				flex-grow: 1;
				* {
					font-size: 14px;
				}
				div {
					font-weight: 700;
				}
				p:first-child {
					font-weight: 700;
				}
			}
			.pay-systems {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 16px 10px;
				padding: 20px 30px;
				border-radius: 16px;
				background: var(--grey-white);
				img {
					width: auto;
				}
			}
		}
	}
}
@media screen and (max-width: 1860px) {
	footer .wrapper {
		grid-template-columns: 600px auto;
		.box {
			gap: 30px;
			.contact-info {
				margin-right: 0;
			}
		}
		.bottom {
			.copyright {
				max-width: initial;
				min-width: 180px;
				margin: 0 30px;
			}
			.pay-systems {
				padding: 20px;
				min-width: 625px;
			}
		}
	}
}
@media screen and (max-width: 1500px) {
	.wrapper {
		width: calc(100% - 80px);
	}
	header .wrapper {
		grid-template-columns: 140px 1fr auto auto;
		.header-search {
			margin-left: 20px;
			width: min(350px, 100%);
		}
		.additional-menu > .ws-menu {
			gap: 20px;
		}
		button[data-target="contacts-modal"] {
			margin-left: 15px;
		}
		.main-menu .ws-menu > .item > :is(a, p) {
			padding: 0 20px;
		}
	}
	.snippet-slider {
		h2 {
			margin-bottom: 30px;
		}
		.hidden-box > .slides {
			gap: 20px;
			margin-bottom: 32px;
		}
	}
	footer .wrapper {
		grid-template-columns: 450px auto;
		.box {
			grid-template-columns: auto auto auto;
			gap: 30px;
			.contact-info .address {
				max-width: 297px;
			}
		}
		.bottom {
			.copyright {
				min-width: initial;
				margin: 0 20px;
			}
			.pay-systems {
				max-width: 340px;
				padding: 20px;
				min-width: initial;
			}
		}
	}
}
@media screen and (max-width: 1280px) {
	.title {
		font-size: 30px;
	}
	.wrapper {
		width: calc(100% - 20px);
	}
	header .wrapper {
		button[data-target="contacts-modal"] {
			span,
			&::after {
				display: none;
			}
		}
		.additional-menu > .ws-menu {
			gap: 10px;
			> .item > :is(a, p) {
				font-size: 14px;
			}
		}
		.main-menu .ws-menu > .item {
			&:first-child > :is(a, p) {
				padding-left: 12px;
			}
			> :is(a, p) {
				padding: 0 12px;
				font-size: 14px;
			}
		}
	}
	.snippet-slider {
		h2 {
			margin-bottom: 20px;
		}
		.hidden-box > .slides {
			gap: 10px;
			.snippet {
				max-width: calc(50% - 5px);
				min-width: 180px;
			}
		}
		.arrow {
			width: 40px;
			&.arrow-l {
				transform: translateX(-5px);
			}
			&.arrow-r {
				transform: translateX(-5px);
			}
		}
	}
	.subscribe {
		margin-bottom: 100px;
	}
	footer .wrapper {
		grid-template-columns: 1fr;
		padding-inline: 10px;
		.logo {
			max-width: 700px;
			margin-bottom: 30px;
		}
		.box {
			grid-template-columns: auto auto 1fr;
			gap: 30px 120px;
		}
		.bottom {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 20px;
			.requisites {
				grid-column: 1/-1;
				padding-right: 0;
				border-right: none;
			}
			.copyright {
				margin: 0;
			}
			.pay-systems {
				justify-self: center;
				max-width: initial;
			}
		}
	}
}
@media screen and (max-width: 992px) {
	header {
		box-shadow: 0px 4px 10px 0px rgba(41, 45, 50, 0.1);
		padding-top: 0;
		.wrapper {
			margin-left: 0;
			width: calc(100% - 10px);
			padding: 10px 0;
			grid-template-columns: 185px 1fr auto;
			gap: 10px;
			.logo {
				position: relative;
				overflow: hidden;
				margin: -12px 0;
				aspect-ratio: 185/70;
				img {
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					position: absolute;
					width: 213px;
					height: auto;
				}
			}
			.header-search {
				margin-left: 0;
			}
			.main-menu,
			button[data-target="contacts-modal"],
			.additional-menu {
				display: none;
			}
			.green-box {
				display: contents;
			}
			.buttons :is(a, button) {
				background: var(--white);
				&.burger {
					display: flex;
				}
			}
		}
	}
	.breadcrumbs {
		margin: 20px 10px;
	}
	.subscribe .info form div button {
		&:disabled {
			opacity: 0;
			pointer-events: none;
		}
		span {
			display: none;
		}
	}
	.basket-form .add-cart {
		transition: none;
	}
	.pagination {
		justify-content: center;
	}
	footer {
		padding-top: 40px;
		padding-bottom: 20px;
		.wrapper {
			.logo {
				max-width: 600px;
			}
			.box {
				gap: 30px 85px;
				.social {
					gap: 10px;
					flex-direction: column;
				}
			}
			.bottom {
				.requisites {
					grid-column: 1/-1;
				}
				.copyright {
					margin: 0;
				}
				.pay-systems {
					justify-self: center;
					max-width: initial;
				}
			}

		}
	}
}
@media screen and (max-width: 768px) {
	.title {
		font-size: 24px;
	}
	header .wrapper {
		grid-template-columns: 185px auto;
		justify-content: space-between;
		.header-search {
			display: none;
		}
	}
	.bubbles {
		display: none;
	}
	.window-modal:not(.burger-menu) {
		.window-body {
			padding: 40px 36px;
		}
		&.search-options .window-body {
			padding: 40px 30px;
		}
	}
	:is(.login-modal, .registration-modal, .change-password-modal) .window-body {
		padding-inline: 20px !important;
		.heading {
			font-size: 20px;
			margin-bottom: 24px;
			gap: 4px;
			align-items: center;
		}
		label:not(.check) {
			margin-bottom: 10px;
		}
		.reset-password {
			margin-top: 0;
		}
		& form > p:last-child {
			margin-top: 20px;
		}
	}
	.info-modal .window-body {
		padding: 40px 20px !important;
		max-width: 370px;
		width: calc(100vw - 20px);
	}
	.registration-modal .window-body {
		.green-btn {
			margin: 40px 0 16px;
		}
	}
	.subscribe {
		grid-template-columns: 1fr;
		margin-bottom: 60px;
		gap: 0;
		.img {
			height: 390px;
		}
		.info {
			padding: 19px 20px 40px 20px;
			margin: 0;
			&::before {
				width: 111px;
				height: calc(100vw - 20px);
				top: 33px;
				left: auto;
				right: 0;
				transform: rotate(90deg);
				transform-origin: top right;
			}
		}
	}
	.pagination {
		width: 100%;
		gap: 14px;
		a {
			min-width: 20px;
			flex-shrink: 0;
			font-size: 16px;
			&:is(.start, .end, .prev, .next) {
				width: 40px;
				border-radius: 12px;
				&::before {
					font-size: 22px;
				}
			}
		}
		span {
			width: 20px;
			flex-shrink: 0;
		}
	}
	.window-modal:is(.confirm-email, .reset-password) > .window-body {
		padding: 40px 20px;
	}
	footer .wrapper {
		.logo {
			max-width: initial;
			width: min(500px, 100%);
		}
		.box {
			display: grid;
			grid-template-columns: auto 1fr;
			justify-content: space-between;
			gap: 20px 0;
			.social {
				.heading {
					margin-top: 0;
				}
				a {
					width: min(114px, 100%);
					border-radius: 10px;
					padding: 4px 9px;
					span {
						gap: 0;
						font-size: 14px;
					}
				}
			}
		}
		.bottom {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin-top: 20px;
			.requisites {
				border-top: 1px solid var(--line);
				padding-top: 20px;
			}
			.copyright {
				order: -1;
				align-self: start;
				br {
					display: none;
				}
			}
		}
	}
}
@media screen and (max-width: 490px) {
	header .wrapper .buttons {
		a[href="/favorites"],
		.user {
			display: none;
		}
	}
	footer .wrapper .box {
		grid-template-columns: auto 1fr auto;
		gap: 20px 0;
		nav + nav {
			grid-column: 3/4;
		}
		.contact-info {
			grid-column: 1/-1;
		}
		.social .items {
			gap: 10px 4px;
		}
	}
}
@media screen and (max-width: 380px) {
	.pagination {
		gap: 12px;
		a:is(.start, .end, .prev, .next) {
			width: 32px;
			border-radius: 10px;
			&::before {
				font-size: 20px;
			}
		}
	}
}
@media (hover: none) and (pointer: coarse) {
	body.modal {
		padding-right: 0;
	}
	.snippet-slider .arrow {
		display: none;
	}
	.snippet {
		.add-compare,
		.add-favorites {
			opacity: 1;
			pointer-events: all;
		}
		.slides {
			img {
				transform: translateX(-100%);
				transition: transform .2s linear;
				&.active {
					transform: translateX(0);
					~ img {
						transform: translate(100%);
					}
				}
			}
			> div {
				display: none;
			}
		}
		.dots {
			opacity: 1;
		}
	}
}
@media screen and (max-height: 500px) {
	&:not(.burger-menu) .window-body {
		padding-bottom: 20px !important;
	}
	.window-modal.search-options .window-body {
		form .head {
			margin-bottom: 15px;
		}
		.green-btn {
			margin-top: 20px;
		}
	}
}
@media screen and (hover:hover) {
	.logo:hover {
		opacity: .8;
	}
	header .wrapper {
		button[data-target="contacts-modal"]:hover,
		.additional-menu :is(a, p):hover {
			color: var(--black) !important;
		}
		.main-menu > .ws-menu > .item {
			> :is(a, p):hover {
				border-color: var(--border);
				background-color: var(--blue2);
			}
			.sub-menu a:hover {
				color: var(--orange);
			}
		}
		form button.options:hover::after,
		.buttons :is(a, .burger, button):hover {
			color: var(--border);
		}
	}
	.window-modal .window-body .close:not(.green-btn):hover {
		background-color: var(--grey-white);
	}
	.green-btn:hover {
		background-color: var(--orange);
	}
	.contacts-modal .window-body div {
		a:hover {
			color: var(--orange);
		}
		&.buttons a:hover::before {
			color: var(--white);
			background-color: var(--blue);
		}
	}
	.breadcrumbs a:hover,
	.request-call .window-body div:has(> .check) p a:hover {
		color: var(--orange);
	}
	.subscribe .info form > p a:hover,
	.card-modal .info button:hover {
		color: var(--orange);
	}
	footer .wrapper {
		.box {
			:is(nav, .contact-info) a:hover {
				color: var(--orange);
			}
			.social a:hover {
				background-color: var(--blue);
				span {
					color: var(--white);
				}
			}
		}
	}
	.basket-form {
		fieldset button:hover {
			color: var(--orange);
		}
		> button:hover {
			background-color: var(--orange);
			color: var(--white);
			&::after {
				color: var(--white);
			}
		}
	}
	.spoiler .toggle:hover .mark {
		background-color: var(--blue);
	}
	:where(.add-favorites, .add-compare) {
		&:hover::before {
			color: var(--orange);
		}
		.checked:hover::after {
			color: var(--blue);
		}
	}
	.snippet .image-box:hover {
		:where(.add-favorites, .add-compare) {
			opacity: 1;
			pointer-events: all;
		}
		.dots {
			opacity: 1;
		}
	}
	.snippet-slider:hover .arrow {
		opacity: 1;
		&.ws-arrow-disabled {
			opacity: .5;
		}
		&:hover::before {
			color: var(--white);
			background-color: var(--blue);
		}
	}
	label.password > div button:hover {
		color: var(--orange);
	}
	:is(.login-modal, .registration-modal, .change-password-modal) .window-body form p:last-child button:hover {
		color: var(--blue);
	}
	.info-modal .window-body a:hover {
		color: var(--orange);
	}
}