header {
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: -20px;
		width: 100%;
		height: 100%;
		background: var(--White);
		z-index: 1;
		transition: opacity 0.1s 0.5s;
	}
	&.hide {
		background: transparent;
		padding-top: 42.5px;
		&::before {
			opacity: 0;
		}
		> .wrapper {
			height: initial;
			.catalog,
			> :is(.logo, .location) {
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				animation: hide 0.2s linear forwards;
			}
			.buttons.mob {
				visibility: hidden;
				pointer-events: none;
				opacity: 0;
			}
		}
	}
	&.active {
		.catalog,
		> .wrapper > .logo {
			opacity: 0;
		}
	}
	&.last {
		background: transparent;
		> .wrapper .catalog .ws-menu .item p::after {
			color: var(--White);
		}
		> .wrapper .location {
			color: var(--White);
			&::before {
				background: var(--White);
			}
		}
		&.open {
			&::before {
				opacity: 1;
			}
			.bottom-menu {
				* {
					color: var(--White);
				}
				.body .wrapper .box .ws-menu .item:has(.sub-menu) {
					p {
						color: var(--White);
					}
					> .sub-menu a {
						color: var(--White);
					}
				}
			}
		}
		&::before {
			opacity: 1;
			background: var(--footer-bg);
			height: calc(100% + 20px);
		}
		.bottom-menu {
			background: var(--footer-bg);
		}
		> .wrapper > .buttons svg {
			fill: var(--White);
		}
		.location,
		.catalog .ws-menu .item :is(p, a)::after,
		.catalog .ws-menu .item :is(p, a),
		.wrapper > .logo,
		.wrapper > .logo span {
			color: var(--White);
		}
		.wrapper > .logo,
		.wrapper > .logo::before {
			border-color: var(--White);
		}
		.location::before {
			background-color: var(--White);
		}
	}
	&.open {
		.bottom-menu {
			transform: translate3d(0, 0, 0);
		}
		> .wrapper .catalog .ws-menu .item p::after {
			transform: translateY(2px) rotate(90deg);
		}
	}
}
.title {
	max-width: 670px;
	display: grid;
	grid-template-columns: 70px auto 1fr;
	gap: 20px;
	align-items: center;
	color: var(--text-color);
	font-family: Lato;
	font-size: 30px;
	font-weight: 300;
	line-height: 100%;
	text-transform: uppercase;
	margin-bottom: 68px;
	&::before,
	&::after {
		content: '';
		height: 1px;
		width: 80%;
		background-color: var(--dark);
	}
}
.promo {
	margin: 115px 0 26px;
	.promo-slider {
		height: calc(100% - 235px);
		margin-bottom: 30px;
	}
}
:is(.promotions, .bestsellers-new, .new-products, .bestsellers, .brands, .catalog-box, .catalog-screen, .seo-section) {
	background: var(--White);
	padding: 40px 0 30px;
}
:is(.promotions, .new-products, .bestsellers, .brands, .catalog-box, .catalog-screen, .seo-section) .wrapper {
	display: flex;
	flex-direction: column;
}
:is(.promotions, .new-products, .bestsellers, .brands, .catalog-box, .catalog-screen, .seo-section) * {
	color: var(--text-color);
}
:is(.promotions .white, .new-products .white, .bestsellers .white, .brands .white, .catalog-box .white, .catalog-screen .white) .text-content * {
	color: #fff;
}
.bestsellers-new {
	.slider {
		/* left: 50px;
		top: 0;
		width: calc(100% - 100px);
		height: 40%;
		max-height: 420px;
		margin-top: 150px;
		position: absolute;
		opacity: 0;
		visibility: hidden;
		z-index: -3; */
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		width: calc(100% - 100px);
		height: 40%;
		max-height: 420px;
		margin-top: 150px;
		position: absolute;
		opacity: 0;
		visibility: hidden;
		z-index: -3;
		&::before {
			position: absolute;
			left: -100%;
			right: -100%;
			top: 0;
			bottom: 0;
			content: '';
		}
		.arrow-l,
		.arrow-r {
			width: 50px;
			aspect-ratio: 1/1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: transparent;
			transition: border-color 0.2s linear;
			position: absolute;
			z-index: 999;
			top: 50%;
			left: -20px;
			transform: translateY(-50%);
			cursor: pointer;
			&.disable {
				opacity: 0.16;
				pointer-events: none;
				cursor: not-allowed;
			}
			&::before {
				content: '\e90f';
				font-family: icon;
				line-height: 1;
				font-size: 24px;
				color: var(--text-color);
				transition: color 0.2s linear;
				display: flex;
			}
		}
		.arrow-r {
			&::before {
				transform: rotate(180deg);
			}
			left: auto;
			right: -20px;
		}
		.bubbles {
			display: none;
		}
		&.active {
			opacity: 1;
			visibility: visible;
			z-index: 0;
		}
		/* .slides {
			gap: 5px;
			display: flex;
			align-items: center;
			height: 100%;
			transform: translate(calc(50vw - 228px));
		}
		.slide {
			position: relative;
			height: 100%;
			min-width: 363px;
			aspect-ratio: 363/491;
			transform: translateX(90%) scale(0.2);
			transition: transform 0.4s linear;
			will-change: transform;
			opacity: 0;
			a {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			&:is(.active, .check, .last-slide) {
				opacity: 1;
			}
			&.last-slide {
				transform: translateX(49%) scale(0.4);
				~.slide:not(.active, .check, .last-slide) {
					transform: translateX(49%) scale(0.4);
				}
			}
			&.check {
				transform: translateX(10%) scale(0.65);
				+.slide.last-slide {
					transform: translateX(-50%) scale(0.4);
				}
			}
			&.active {
				transform: translateX(0px) scale(1);
				+.check {
					z-index: 1;
					transform: translateX(-10%) scale(0.65);
				}
			}
			h3, div.text {
				display: none;
			}
			img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				inset: 0px;
				border: 1px solid #ddd;
				border-radius: 3px;
				object-fit: cover;
			}
		} */
		.slides {
			display: flex;
			align-items: center;
			height: 100%;
			transform: translate(40%);
		}
		.slide {
			position: relative;
			height: 100%;
			transform: scale(0.2);
			flex: 0 0 calc(100% / 5);
			transition: .3s linear, transform .3s linear .2s;
			opacity: 0;
			a {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			&:is(.active, .check, .last-slide) {
				opacity: 1;
			}
			&.last-slide {
				transform: translateX(50%) scale(0.4);
				~ .slide:not(.active, .check, .last-slide) {
					transform: translateX(50%) scale(0.4);
				}
			}
			&.check {
				transform: translateX(10%) scale(0.65);
				+ .slide.last-slide {
					transform: translateX(-50%) scale(0.4);
				}
			}
			&.active {
				transform: translateX(0px) scale(1);
				+ .check {
					z-index: 1;
					transform: translateX(-10%) scale(0.65);
				}
			}
			h3,
			div.text {
				display: none;
			}
			img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				inset: 0px;
				border-radius: 3px;
				object-fit: cover;
			}
		}
	}
	.text-block {
		position: absolute;
		left: 50%;
		top: 60%;
		transform: translateX(-50%);
		max-width: 363px;
		width: 100%;
		display: flex;
		flex-direction: column;
		h3 {
			color: #2d2f2e;
			text-align: center;
			font-size: 28px;
			line-height: 36px;
			max-width: 420px;
			margin: 0 auto 10px;
		}
		h4 {
			color: #2d2f2e;
			font-size: 20px;
			line-height: 24px;
			max-width: 420px;
			text-align: center;
			margin: 0 auto 10px;
		}
		p {
			color: #2d2f2e;
			text-align: center;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 110%;
			overflow: hidden;
			* {
				display: contents;
				color: #2d2f2e;
				text-align: center;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%;
			}
		}
		a {
			border: 1px solid #2d2f2e;
			color: #2d2f2e;
			padding: 5px 15px;
			margin: 25px auto 0;
			transition: .3s linear;
		}
	}
}
.new-products {
	.box {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		height: calc(100dvh - 209px);
		margin: auto 0;
	}
	.left {
		position: relative;
		overflow: hidden;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		.item {
			grid-column: 1/2;
			grid-row: 1/2;
			display: flex;
			flex-direction: column;
			padding: 40px 40px 60px;
			background-image: var(--item-bg);
			background-position: center center;
			background-size: cover;
			opacity: 0;
			border-radius: 4px;
			pointer-events: none;
			animation: hide 0.5s linear forwards;
			.text {
				font-size: 18px;
				font-weight: 300;
				line-height: 1;
				align-self: start;
				:is(div, p) {
					margin: 10px 0;
				}
				& * {
					font-size: 18px;
					font-weight: 300;
					line-height: 1.1;
					align-self: start;
				}
			}
			&.active {
				pointer-events: all;
				animation: visible 0.5s linear forwards;
				&.white {
					color: #fff;
					> *,
					h3,
					p,
					div {
						color: #fff;
					}
					ul {
						margin-left: 17px;
						li {
							color: #fff;
						}
					}
					.transparent-btn {
						border-color: #fff;
					}
				}
				&.dark-bg::before {
					content: '';
					position: absolute;
					inset: 0;
					background: rgba(0, 0, 0, 0.3);
					z-index: -1;
				}
			}
			h3 {
				font-family: "Lato";
				font-size: 46px;
				margin-bottom: 20px;
			}
			p {
				font-family: Lato;
				font-size: 20px;
				margin-bottom: 10px;
				font-weight: 300;
			}
			.transparent-btn {
				margin: auto auto 0;
				border-color: var(--text-color);
			}
		}
	}
	.right {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 1fr;
		max-height: calc(100dvh - 190px);
		align-items: start;
		margin-bottom: auto;
		gap: 10px;
		height: 100%;
		.item {
			position: relative;
			display: grid;
			width: 100%;
			height: 100%;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			justify-content: center;
			align-items: center;
			border-radius: 4px;
			overflow: hidden;
			cursor: pointer;
			&.active {
				&::after,
				h4 {
					opacity: 1;
				}
			}
			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg, rgba(45, 47, 46, 0.8) 0%, rgba(28, 29, 28, 0.4) 100%);
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.3s linear;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			grid-column: 1/2;
			grid-row: 1/2;
		}
		h4 {
			position: relative;
			z-index: 1;
			text-align: center;
			color: var(--hover);
			font-family: Lato;
			font-size: 20px;
			font-weight: 700;
			text-transform: uppercase;
			opacity: 0;
			padding: 0 30px;
			transition: opacity 0.3s linear;
		}
	}
}
.accordion {
	display: flex;
	justify-content: end;
	gap: 10px;
	overflow-x: auto;
	.item {
		position: relative;
		width: 108px;
		height: calc(100dvh - 209px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: width 0.5s linear;
		will-change: width;
		cursor: pointer;
		border: 1px solid #666767;
		border-radius: 4px;
		&:not(.active) .content {
			transition: background-color 0.2s linear;
		}
		&.active {
			width: 100%;
			cursor: auto;
			&.white {
				> *,
				h3,
				h4,
				p,
				div {
					color: #fff;
				}
				ul li {
					color: #fff;
				}
				li::before {
					background: #fff;
				}
				.transparent-btn {
					color: #fff;
					border-color: #fff;
				}
			}
			.content {
				position: relative;
				z-index: 2;
				background: var(--bg) center center / cover no-repeat;
				h3 {
					position: static;
					transform: none;
					white-space: wrap;
					margin-bottom: 20px;
					font-size: 46px;
				}
				:is(p, li) {
					font-weight: 300;

				}
				.text-content,
				:is(p, li, .transparent-btn) {
					opacity: 1;
					pointer-events: all;
					position: relative;
					z-index: 2;
				}
			}
			&.dark-bg .content::before {
				content: '';
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, 0.2);
				z-index: -1;
				pointer-events: none;
			}
		}
		.content {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			flex-grow: 1;
			min-height: 100%;
			padding: 40px 30px 60px;
			background-color: var(--White);
			font-weight: 300;
			h3 {
				position: absolute;
				font-family: "Lato";
				bottom: 20px;
				transform-origin: 0 100%;
				left: calc(50% + 11px);
				transform: rotate(-90deg);
				white-space: nowrap;
				text-transform: none;
				font-size: 20px;
			}
			p {
				margin-bottom: 20px;
			}
			.text-content,
			:is(p, li) {
				font-size: 20px;
				overflow: hidden;
				max-width: 775px;
				font-weight: 300;
				opacity: 0;
			}
			.text-content * {
				font-size: inherit;
				font-weight: 300;
			}
			ul {
				list-style: none;
				li {
					display: flex;
					gap: 10px;
					&::before {
						content: '';
						width: 6px;
						height: 6px;
						flex-shrink: 0;
						background: var(--text-color);
						border-radius: 50%;
						margin-top: 8px;
					}
				}
			}
			.transparent-btn {
				margin: auto auto 0;
				border-color: var(--text-color);
				opacity: 0;
				pointer-events: none;
			}
		}
	}
}
:is(.bestsellers, .catalog-box) {
	.title {
		margin-bottom: 105px;
	}
	.items {
		height: calc(100dvh - 250px);
		position: relative;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 10px;
		> a {
			position: absolute;
			left: 0;
			top: -40px;
			display: flex;
			align-items: center;
			gap: 10px;
			font-family: Lato;
			font-size: 16px;
			text-transform: lowercase;
			&::after {
				content: '\e90e';
				font-family: icon;
				color: inherit;
				scale: -1;
				font-size: 14px;
				margin-top: 3px;
			}
		}
		.product-item {
			background: #f1f2ef;
			&:last-child {
				grid-row: 1/3;
				grid-column: 3/5;
			}
		}
	}
}
.brands {
	.items {
		position: relative;
		height: calc(100dvh - 209px);
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 10px;
		.button {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 10px);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px;
			z-index: 1;
			background: #fff;
			a {
				display: flex;
				align-items: start;
				gap: 10px;
				font-family: Helvetica;
				font-size: 14px;
				text-transform: uppercase;
				border-radius: 4px;
				background-color: #F6F6F6;
				padding: 27px 35px;
				transition: background-color 0.2s linear;
				&::after {
					content: '\e90e';
					font-family: icon;
					color: inherit;
					scale: -1;
					font-size: 17px;
				}
			}
		}
		.item {
			position: relative;
			grid-column: span 2;
			border-radius: 4px;
			overflow: hidden;
			img:first-child {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				object-fit: cover;
				transition: transform 0.3s linear;
			}
			&:last-of-type {
				margin-right: -60px;
			}
			&:nth-of-type(2) {
				margin-left: -60px;
			}
			img:nth-of-type(2) {
				position: absolute;
				width: 150px;
				height: 90px;
			}
			&:is(:nth-of-type(3), :nth-of-type(4)) {
				grid-column: span 1;
			}
			&:nth-of-type(2) img:nth-of-type(2) {
				bottom: 10px;
				right: 10px;
			}
			&:is(:nth-of-type(3), :nth-of-type(4)) img:nth-of-type(2) {
				bottom: 10px;
				left: 10px;
			}
			&:nth-of-type(5) img:nth-of-type(2) {
				top: 10px;
				right: 10px;
			}
			&:nth-of-type(6) img:nth-of-type(2) {
				top: 10px;
				left: 10px;
			}
			a {
				position: absolute;
				inset: 0px;
			}
		}
	}
}
.catalog-screen {
	padding: 40px 20px;
	background: var(--White);
	.title {
		margin-bottom: 65px;
	}
	.list {
		height: calc(100dvh - 170px);
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 1fr);
		.item-box {
			display: flex;
			flex-direction: column;
			gap: 10px;
			> a {
				display: flex;
				align-items: center;
				gap: 10px;
				font-family: Lato;
				font-size: 16px;
				text-transform: lowercase;
				transition: color .2s linear;
				&::after {
					content: '\e90e';
					font-family: icon;
					color: inherit;
					scale: -1;
					font-size: 14px;
				}
			}
			.items {
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				width: 100%;
				gap: 10px;
				overflow-x: auto;
				scrollbar-width: none;
				&::-webkit-scrollbar {
					display: none;
				}
				.product-item {
					background: #f1f2ef;
					flex-shrink: 0;
					width: min(440px, 50%);
					user-select: none;
					&:last-child {
						grid-column: span 2;
					}
					a,
					img {
						-webkit-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
					}
					.like {
						display: none;
					}
					.box {
						.bottom,
						.price {
							display: none;
						}
					}
				}
			}
		}
	}
}
.vertical {
	header.last .wrapper > .logo {
		border-color: var(--White);
	}
	.new-products {
		.box {
			grid-template-columns: 1fr;
			grid-template-rows: 1fr auto;
			gap: 10px;
			height: calc(100dvh - 150px);
			.right {
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: none;
				max-height: calc(100dvh - 190px);
				.item {
					aspect-ratio: 5/3;
				}
			}
		}
	}
	.accordion {
		flex-direction: column;
		justify-content: space-between;
		gap: 10px;
		min-height: calc(100dvh - 200px);
		flex-grow: 1;
		.item {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 80px;
			flex-grow: 0;
			transition: flex-grow 0.5s linear;
			&.active {
				flex-grow: 1;
				.content h3 {
					font-size: 32px;
				}
			}
			.content h3 {
				visibility: visible;
				opacity: 1;
				transform: none;
				left: 30px;
				top: 25px;
				font-size: 20px;
			}
		}
	}
	:is(.bestsellers, .catalog-box) {
		.title {
			margin-bottom: 65px;
		}
		.items {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			> a {
				position: static;
				grid-column: 3/4;
				grid-row: 3/4;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F6F6F6;
			}
			.product-item:last-child {
				grid-column: 2/4;
			}
		}
	}
	.brands .items {
		grid-template-columns: 0.3fr 0.2fr 0.2fr 0.3fr;
		grid-template-rows: repeat(3, 1fr);
		.button {
			position: static;
			grid-column: 1/2;
			grid-row: 3/4;
			transform: none;
			padding: 0;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
			}
		}
		.item {
			&:is(:nth-of-type(2), :nth-of-type(3)) {
				grid-column: span 2;
			}
			&:nth-of-type(5) {
				grid-column: 1/4;
				grid-row: 2/3;
				img:nth-of-type(2) {
					top: initial;
					bottom: 10px;
					right: 10px;
				}
			}
			&:nth-of-type(4) {
				grid-column: span 1;
			}
			&:nth-of-type(6) {
				grid-column: span 3;
				img:nth-of-type(2) {
					top: initial;
					bottom: 10px;
					left: 10px;
				}
			}
		}
	}
}
.seo-section {
	padding: 40px 20px;
	.wrapper {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 100px;
		.text {
			overflow: auto;
			max-height: calc(100dvh - 160px);
		}
		ul {
			margin-left: 20px;
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
		p,
		li {
			color: var(--text-color);
			font-size: 16px;
			line-height: 133%;
		}
		h2 {
			font-size: 18px;
			font-weight: 400;
			line-height: 133%;
			margin: 5px 0;
		}
		h3 {
			font-size: 18px;
		}
	}
}
@keyframes visible {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	75% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}
@media screen and (max-width: 1500px) {
	.title {
		margin-bottom: 65px;
		font-size: 32px;
	}
	.promo .promo-slider .controls {
		width: calc(100% - 80px);
	}
	.new-products {
		.box {
			gap: 8px;
			height: calc(100dvh - 207px);
		}
		.left .item {
			padding: 40px 30px 60px;
			h3 {
				font-size: 40px;
			}
		}
		.right {
			gap: 8px;
		}
	}
	.accordion .item {
		height: calc(100dvh - 207px);
	}
	.bestsellers-new {
		.slider {
			height: 45%;
			margin-top: 150px;
			width: 130%;
			.arrow-l,
			.arrow-r {
				top: 100%;
				/* background: none; */
			}
			.arrow-l {
				left: calc(10% + 40px);
			}
			.arrow-r {
				right: calc(10% + 40px);
			}
			/* .slides {
				transform: translate(calc(50vw - 228px));
			}
			.slide {
				min-width: 360px;
			} */
		}
		.text-block {
			top: 61%;
			max-width: 360px;
			h3 {
				font-size: 22px;
				line-height: 38px;
				margin: 0 auto 10px;
				max-width: 100%;
			}
		}
	}
	:is(.bestsellers, .catalog-box) .items {
		gap: 8px;
		.product-item {
			&:last-child {
				grid-column: 2/4;
			}
			.box {
				gap: 0;
				.top :is(span, h3) {
					font-size: 12px;
				}
				.bottom :is(p, span) {
					font-size: 12px;
				}
			}
		}
	}
	.brands .items .item {
		&:nth-of-type(2) {
			margin-left: -40px;
		}
		&:nth-of-type(6) {
			margin-right: -40px;
		}
	}
	.vertical {
		:is(.promotions, .new-products, .bestsellers, .brands, .catalog-box) {
			padding: 80px 0 30px;
		}
		.new-products .box {
			height: calc(100dvh - 200px);
		}
	}
	.catalog-screen .list .item-box .items {
		width: calc(100vw - 100px);
	}
	.seo-section .wrapper {
		gap: 5px;
		padding-top: 50px;
		ul {
			gap: 3px;
		}
		p,
		li {
			font-size: 14px;
		}
		h2 {
			font-size: 18px;
		}
		h3 {
			font-size: 16px;
		}
	}
}
@media (hover: none) and (pointer: coarse) {
	.new-products .right .item {
		align-items: end;
		&.active {
			align-items: center;
			h4 {
				margin: 0;
				width: 100%;
				padding: 15px;
				background: none;
				color: var(--hover);
				font-weight: 700;
				font-size: 16px;
			}
		}
		h4 {
			margin: 6px;
			width: calc(100% - 12px);
			padding: 15px;
			background: rgba(255, 255, 255, 0.8);
			opacity: 1;
			color: var(--text-color);
			text-align: center;
			font-family: Helvetica;
			font-weight: 400;
			font-size: 14px;
			text-transform: uppercase;
		}
	}
}
@media screen and (max-width: 1279px) {
	header {
		&::before {
			height: calc(100% + 20px);
		}
		&.hide {
			padding-top: 40px;
			> .wrapper {
				padding-bottom: 0 !important;
			}
			.wrapper .catalog {
				position: absolute;
			}
		}
		> .wrapper > .logo {
			position: relative;
			left: initial;
			top: initial;
			transform: none;
			margin: 0 auto;
			width: initial !important;
			min-height: initial !important;
			border: none !important;
			font-size: 26px !important;
			&::before {
				display: none;
			}
			span {
				display: none !important;
			}
		}
		.bottom-menu .body .wrapper {
			grid-template-columns: 300px 1fr;
			padding-left: 20px;
			.box {
				padding: 20px 20px 10px 0;
			}
			.items .item {
				padding: 20px;
			}
		}
	}
	.title {
		max-width: 440px;
		font-size: 24px;
		margin-left: -20px;
		margin-bottom: 30px;
	}
	.promo {
		margin: 100px 0 10px;
		.promo-slider {
			height: calc(100% - 172px);
			margin-bottom: 10px;
			.controls {
				width: calc(100% - 40px);
			}
		}
	}
	:is(.promotions, .new-products, .bestsellers, .brands, .catalog-box) {
		padding: 40px 0 20px;
	}
	.new-products {
		.box {
			height: calc(100dvh - 112px);
		}
		.left .item {
			padding: 30px 20px 50px;
			h3 {
				font-size: 30px;
			}
			p {
				font-size: 16px;
			}
		}
		.right {
			max-height: calc(100dvh - 112px);
		}
	}
	:is(.bestsellers, .catalog-box) {
		.title {
			margin-bottom: 60px;
		}
		.items {
			height: calc(100dvh - 146px);
		}
	}
	.bestsellers-new {
		.slider {
			margin-top: 100px;
			/* .slides {
				transform: translate(calc(50vw - 188px));
			}
			.slide {
				min-width: 280px;
			} */
		}
		.text-block {
			top: 58%;
			max-width: 280px;
			h3 {
				font-size: 20px;
				line-height: 24px;
				margin: 0 auto 5px;
			}
			h4 {
				font-size: 18px;
				margin: 0 auto 5px;
			}
			p {
				font-size: 12px;
				* {
					font-size: 12px;
				}
			}
			a {
				margin-top: 10px;
			}
		}
	}
	.accordion .item {
		height: calc(100dvh - 112px);
		.content {
			h3 {
				margin-bottom: 10px;
				/* left: calc(50% + 11px); */
			}
			:is(p, li) {
				font-size: 16px;
				width: initial;
			}
		}
	}
	.brands .items {
		height: calc(100dvh - 112px);
		.item {
			img:nth-of-type(2) {
				width: auto;
				height: 60px;
			}
			&:nth-of-type(2) img:nth-of-type(2) {
				bottom: 6px;
				right: 6px;
			}
			&:is(:nth-of-type(3), :nth-of-type(4)) img:nth-of-type(2) {
				bottom: 6px;
				left: 6px;
			}
			&:nth-of-type(5) img:nth-of-type(2) {
				top: 6px;
				right: 6px;
			}
			&:nth-of-type(6) img:nth-of-type(2) {
				top: 6px;
				left: 6px;
			}
		}
		.button a {
			padding: 11px 6px 11px 14px;
		}
	}
	.vertical {
		header .wrapper {
			height: initial;
			display: grid;
			row-gap: 20px;
			grid-template-columns: 1fr auto 1fr;
			justify-content: space-between;
			> .logo {
				position: relative;
				left: initial;
				top: initial;
				transform: none;
				margin: 0 auto;
				width: 230px !important;
				min-height: 110px !important;
				border: 2px solid var(--dark) !important;
				&::before {
					display: flex !important;
				}
				span {
					display: flex !important;
				}
			}
			.catalog {
				grid-column: span 3;
				grid-row: 2/3;
				transform: none;
				width: auto;
				.ws-menu .center {
					margin-right: 0;
				}
			}
			.burger {
				margin-left: auto;
			}
		}
		.promo {
			margin-top: 202px;
			.promo-slider {
				height: calc(100% - 325px);
				margin-bottom: 30px;
			}
		}
		:is(.bestsellers, .catalog-box) {
			.title {
				margin-bottom: 30px;
			}
			.items {
				height: calc(100dvh - 192px);
			}
		}
		.brands .items {
			height: calc(100dvh - 180px);
		}
	}
	.seo-section .wrapper {
		gap: 5px;
		padding-top: 90px;
		ul {
			gap: 3px;
		}
		p,
		li {
			font-size: 12px;
			line-height: 16px;
		}
		h2 {
			font-size: 16px;
		}
		h3 {
			font-size: 14px;
		}
	}
}
@media screen and (max-width: 767px) {
	.title {
		grid-template-columns: 30px auto 1fr;
		font-size: 20px;
		width: calc(100% - 60px);
		margin-left: -8px;
	}
	.accordion {
		gap: 10px;
		.item {
			height: calc(100dvh - 124px);
			.content {
				padding: 20px;
			}
			&.active .content {
				h3 {
					font-size: 32px;
					margin-bottom: 10px;
				}
				.text-content,
				:is(p, li) {
					margin-bottom: 10px;
					font-size: 12px;
				}
			}
		}
	}
	.vertical {
		header {
			padding: 10px 0 0;
			&.last > .wrapper > .logo {
				background: url(../images/logo2.svg) 0 0 / 100% 100% !important;
			}
			> .wrapper {
				> .logo {
					width: 112px !important;
					min-height: 56px !important;
					font-size: 12px !important;
					border: none !important;
					background: url(../images/logo.svg) 0 0 / 100% 100% !important;
					&::before {
						display: none !important;
					}
					span {
						font-size: 5px;
					}
				}
				.catalog {
					width: 100%;
					overflow-x: auto;
					scrollbar-width: none;
					&::-webkit-scrollbar {
						height: 0;
						width: 0;
						background: transparent;
						display: none;
					}
					.ws-menu :is(a, p) {
						white-space: nowrap;
					}
				}
			}
			&.hide .wrapper {
				row-gap: 0;
			}
			.bottom-menu {
				height: calc(100dvh - 127px);
				.body {
					height: 100%;
					margin-top: 10px;
					padding-bottom: 10px;
					.wrapper {
						grid-template-columns: 1fr;
						grid-template-rows: auto 1fr;
						gap: 0;
						height: 100%;
						padding-left: 0;
						.box {
							border-color: transparent;
							margin-right: auto;
							padding: 10px 10px 0 10px;
							gap: 0px;
							min-height: 250px;
							.ws-menu {
								gap: 5px 10px;
								.item:has(.sub-menu) {
									p {
										font-size: 14px;
									}
									> .sub-menu a {
										font-size: 12px;
									}
								}
							}
						}
						.items {
							height: 100%;
							width: 100%;
							.item {
								border-color: transparent;
								width: calc(100% - 40px);
								max-width: 390px;
								padding: 10px 0 20px 10px;
								&:last-child {
									padding-right: 10px;
								}
								.images {
									aspect-ratio: initial;
								}
							}
						}
					}
				}
			}
		}
		.promo {
			margin-top: 136px;
			.promo-slider {
				height: calc(100% - 230px);
			}
		}
		:is(.promotions, .new-products, .bestsellers, .brands, .catalog-box) {
			padding: 29px 0;
		}
		.new-products .box {
			height: calc(100dvh - 120px);
			.left .item h3 {
				margin-bottom: 10px;
			}
			.right {
				height: 30dvh;
				.item {
					&.active h4 {
						font-size: 12px;
					}
					h4 {
						padding: 12px 8px;
						font-size: 10px;
					}
				}
			}
		}
		.accordion {
			min-height: calc(100dvh - 115px);
			gap: 8px;
			.item {
				height: 54px;
				&.active .content h3 {
					font-size: 26px;
				}
				.content h3 {
					left: 20px;
					font-size: 14px;
					top: 18px;
					margin-bottom: 10px;
				}
			}
		}
		:is(.bestsellers, .catalog-box) .items {
			grid-template-columns: repeat(2, 1fr);
			height: calc(100dvh - 120px);
			> a {
				grid-column: 1/3;
				grid-row: 4/5;
				height: 54px;
				margin-top: 12px;
			}
			.product-item:last-of-type {
				display: none;
			}
		}
		.brands .items {
			grid-template-columns: repeat(2, 1fr);
			height: calc(100dvh - 120px);
			.button {
				grid-column: 1/3;
				grid-row: 4/5;
				height: 54px;
				margin-top: 12px;
			}
			.item {
				&:is(:nth-of-type(2), :nth-of-type(3)) {
					grid-column: span 1;
				}
				&:nth-of-type(4) {
					grid-column: 1/2;
					grid-row: 3/4;
				}
				&:nth-of-type(6) {
					grid-column: 2/3;
					grid-row: 3/4;
				}
				&:is(:nth-of-type(5), :nth-of-type(4)) img:nth-of-type(2) {
					bottom: 6px;
					left: initial;
					right: 6px;
				}
				&:nth-of-type(6) img:nth-of-type(2) {
					bottom: 6px;
					left: 6px;
				}
			}
		}
		.bestsellers .items {
			grid-template-rows: repeat(2, 1fr);
		}
	}
	header .wrapper > .logo {
		background: none !important;
	}
	header .bottom-menu {
		top: 100%;
	}
	.catalog-screen {
		padding: 29px 0;
		.title {
			margin-bottom: 20px;
		}
		.list {
			height: calc(100dvh - 85px);
			display: grid;
			grid-template-rows: repeat(3, 1fr);
			gap: 10px;
			.item-box {
				gap: 6px;
				.items {
					width: calc(100vw - 20px);
				}
			}
		}
	}
	.new-products .left .item .text,
	.new-products .left .item .text * {
		font-size: 12px;
	}
	.new-products .left .item .text ul {
		margin-left: 17px;
	}
	.bestsellers-new {
		.slider {
			height: 45%;
			margin-top: 100px;
			width: 180%;
			.arrow-l,
			.arrow-r {
				top: 100%;
				background: none;
			}
			.arrow-l {
				left: calc(20% + 40px);
			}
			.arrow-r {
				right: calc(20% + 40px);
			}
			.slide {
				/* min-width: 260px; */
				&.last-slide {
					transform: translateX(100%) scale(0.4);
				}
				&.check {
					transform: translateX(50%) scale(0.65);
					+ .slide.last-slide {
						transform: translateX(-100%) scale(0.4);
					}
				}
				&.active {
					z-index: 2;
					+ .check {
						transform: translateX(-50%) scale(0.65);
					}
				}
			}
		}
		.text-block {
			top: calc(45% + 120px);
			max-width: calc(100% - 20px);
			h3 {
				font-size: 18px;
				line-height: 22px;
				margin: 0 auto 10px;
			}
			p {
				font-size: 12px;
				* {
					font-size: 12px;
				}
			}
		}
	}
}
@media screen and (max-width: 390px) {
	header {
		padding-top: 10px;
		&.hide {
			padding-top: 10px;
		}
		> .wrapper {
			gap: 2px 10px;
			> .logo {
				font-size: 22px;
			}
			.catalog .item :is(a, p) {
				font-size: 14px;
			}
		}
		.bottom-menu {
			top: 100%;
			height: calc(100dvh - 63px);
			.body {
				margin-top: 5px;
				height: 100%;
				.wrapper {
					grid-template-columns: 260px 1fr;
					height: calc(100% - 5px);
					.box {
						min-height: initial;
						height: 100%;
						gap: 5px;
						padding: 5px 10px 10px 0;
						> a {
							/* font-size: 14px; */
						}
						.ws-menu .item:has(.sub-menu) {
							&.active p + .sub-menu {
								max-height: 200px !important;
							}
							p {
								font-size: 12px;
							}
							> .sub-menu {
								/* top: -20px; */
								gap: 3px;
								a {
									font-size: 12px;
								}
							}
						}
					}
					.items {
						width: 100%;
						.item {
							border-color: transparent;
							width: auto;
							height: 100%;
							padding: 5px 0 5px 5px;
							&:last-child {
								padding-right: 10px;
							}
						}
					}
				}
			}
		}
	}
	.vertical {
		.new-products .box {
			.left .item {
				padding: 20px;
				h3 {
					font-size: 26px;
					margin-bottom: 10px;
				}
				p {
					font-size: 12px;
				}
				.transparent-btn {
					padding: 10px 20px;
				}
			}
			.right .item h4 {
				padding: 5px;
			}
		}
		.accordion .item &.active .content {
			h4 {
				font-size: 20px;
			}
			h3 {
				font-size: 26px;
			}
			:is(p, li) {
				font-size: 12px;
				margin-bottom: 10px;
			}
		}
		:is(.bestsellers, .catalog-box) .items .product-item {
			padding: 0;
			.like {
				z-index: 1;
			}
			.box {
				transform: none;
				padding: 0 5px;
				.top {
					margin-top: 5px;
					:is(span, h3, b, .price) {
						font-size: 12px;
					}
				}
				.bottom {
					margin-bottom: 5px;
					:is(p, a) {
						font-size: 12px;
					}
					p {
						-webkit-line-clamp: 1;
						line-clamp: 1;
					}
					a::after {
						font-size: 10px;
					}
				}
			}
		}
		.brands .items {
			gap: 8px 0;
			.item:is(:nth-of-type(2), :nth-of-type(4)) {
				margin-right: 8px;
			}
		}
	}
}
@media screen and (max-width: 1024px) and (max-height:431px) {
	header {
		> .wrapper {
			> .logo {
				font-size: 22px !important;
			}
			.catalog .item {
				:is(a, p) {
					font-size: 14px !important;
				}
				p::after {
					font-size: 8px !important;
				}
			}
		}
		.bottom-menu {
			padding-bottom: 0 !important;
			.body {
				margin-top: 5px !important;
				height: 100% !important;
				padding-bottom: 5px !important;
				.wrapper {
					.box {
						min-height: initial !important;
						> a {
							font-size: 14px !important;
						}
						.ws-menu .item:has(.sub-menu) {
							p {
								font-size: 10px !important;
								gap: 3px !important;
								&::after {
									font-size: 8px !important;
									margin-bottom: 2px !important;
								}
							}
							> .sub-menu {
								top: -20px !important;
								gap: 3px !important;
								a {
									font-size: 10px !important;
								}
							}
						}
					}
					.items {
						margin-top: 0 !important;
						.item {
							border-color: transparent !important;
							width: auto !important;
							height: 100% !important;
							padding: 5px 0 5px 5px !important;
							&:last-child {
								padding-right: 10px !important;
							}
							p {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
	.promo {
		margin: 68px 0 10px;
		.promo-slider {
			height: calc(100% - 115px);
			margin-bottom: 5px;
		}
	}
	.title {
		margin-bottom: 12px;
	}
	:is(.promotions, .new-products, .services, .recommendations, .bestsellers-new, .catalog-box, .brands) {
		padding: 15px 0 10px;
	}
	.new-products {
		.box {
			gap: 5px;
			.left .item {
				padding: 10px;
				h3 {
					font-size: 24px;
					margin-bottom: 10px;
				}
				p {
					font-size: 12px;
					margin-bottom: 5px;
				}
				.transparent-btn {
					padding: 10px 20px;
				}
			}
			.right {
				gap: 5px;
			}
		}
		.right {
			max-height: calc(100dvh - 58px);
			.item.active h4 {
				font-size: 14px;
			}
			h4 {
				font-size: 12px;
				padding: 5px;
			}
		}
	}
	.accordion {
		gap: 5px;
		.item {
			width: 80px;
			.content {
				padding: 10px;
				h3 {
					font-size: 18px;
					bottom: 10px;
					/* left: calc(50% + 11px); */
					z-index: 1;
				}
				:is(p, li) {
					font-size: 12px;
				}
				.transparent-btn {
					padding: 10px 20px;
				}
			}
			&.active .content {
				h3 {
					font-size: 22px;
					margin-bottom: 5px;
				}
				:is(li, p) {
					font-size: 12px;
					margin-bottom: 5px;
				}
			}
		}
	}
	.accordion .item,
	.services .slides > div,
	.new-products .box {
		height: calc(100dvh - 58px);
	}
	:is(.bestsellers, .catalog-box) {
		.title {
			margin-bottom: 12px;
		}
		.items {
			height: calc(100dvh - 58px);
			gap: 5px;
			> a {
				position: static;
				grid-row: 2/3;
				grid-column: 4/5;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F6F6F6;
			}
			.product-item {
				padding: 0;
				&:first-of-type {
					grid-column: span 2;
				}
				&:last-of-type {
					grid-row: 2/3;
				}
			}
		}
	}
	.brands .items {
		height: calc(100dvh - 58px);
		gap: 5px;
		.button {
			padding: 6px;
			a {
				font-size: 12px;
			}
		}
		.item img:nth-of-type(2) {
			width: 60px;
			height: auto;
			aspect-ratio: 10/6;
		}
	}
	footer .main-menu {
		margin-bottom: 4dvh;
	}
	.bestsellers .items {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 1fr;
		height: calc(100dvh - 70px);
		> a {
			grid-column: span 4;
			grid-row: 2/3;
			height: 26px;
			&::after {
				margin-top: 2px;
				font-size: 12px;
			}
		}
		.product-item {
			&:first-of-type {
				grid-column: 1;
			}
			&:last-of-type {
				display: none;
			}
		}
	}
	.catalog-screen {
		padding: 15px 0 10px;
		.wrapper {
			.title {
				margin-bottom: 30px;
			}
			.list {
				display: grid;
				grid-template-columns: repeat(3, minmax(200px, 1fr));
				grid-template-rows: 1fr;
				column-gap: 10px;
				height: calc(100dvh - 85px);
				.items {
					width: 100%;
					column-gap: 5px;
					scroll-behavior: smooth;
					scroll-snap-type: x mandatory;
					> a {
						top: -25px;
					}
					.product-item {
						width: min(440px, 100%);
						scroll-snap-align: start;
					}
				}
			}
		}
	}
	.bestsellers-new {
		.slider {
			height: 43%;
			margin-top: 80px;
			/* .slides {
				transform: translate(calc(50vw - 80px));
			}
			.slide {
				min-width: 160px;
			} */
		}
		.text-block {
			top: calc(43% + 90px);
			max-width: calc(100% - 20px);
			h3 {
				font-size: 14px;
				line-height: 22px;
				margin: 0 auto 10px;
			}
			p {
				font-size: 12px;
			}
		}
	}
}
@media screen and (max-height: 860px) {
	.bestsellers-new {
		.slider {
			height: 43%;
			margin-top: 110px;
			/* .slides {
				transform: translate(calc(50vw - 170px));
			} */
			/* .slide {
				min-width: 240px;
			} */
		}
		.text-block {
			top: calc(43% + 140px);
			max-width: 240px;
			h3 {
				font-size: 14px;
				line-height: 22px;
				margin: 0 auto 10px;
			}
			p {
				font-size: 12px;
				line-height: 15px;
				max-height: 120px;
				overflow: hidden;
				* {
					font-size: 12px;
					line-height: 15px;
				}
			}
		}
	}
}
@media screen and (max-height: 700px) {
	.bestsellers-new {
		.slider {
			height: 43%;
			margin-top: 80px;
			/* .slides {
				transform: translate(calc(50vw - 170px));
			} */
		}
		.text-block {
			top: calc(43% + 90px);
			max-width: 240px;
			h3 {
				font-size: 14px;
				line-height: 22px;
				margin: 0 auto 10px;
			}
			p {
				font-size: 12px;
				line-height: 15px;
				max-height: 120px;
				overflow: hidden;
				* {
					font-size: 12px;
					line-height: 15px;
				}
			}
		}
	}
}
@media screen and (hover:hover) {
	.brands .items .item:hover img:first-child {
		transform: scale(1.15);
	}
	.accordion .item:not(.active):hover .content {
		background-color: #f2f2f2;
	}
	.new-products .right .item:hover {
		&::after {
			opacity: 1;
		}
		h4 {
			opacity: 1;
		}
	}
	.brands .items .button a:hover {
		background-color: rgba(255, 218, 212, 0.68);
	}
	.bestsellers .items a:hover,
	.catalog-screen .list .items a:hover {
		color: var(--hover);
	}
	.bestsellers-new .text-block a:hover {
		background-color: #2d2f2e;
		color: var(--White);
	}
	/* .bestsellers-new .slider .arrow-l:hover,
	.bestsellers-new .slider .arrow-r:hover {
		&::before {
			color: var(--hover);
		}
		border: 1px solid var(--hover);
	} */
}