@font-face {
	font-family: 'TT';
	src: url('../fonts/regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'TT';
	src: url('../fonts/demibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'TT';
	src: url('../fonts/medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

body {
	font-family: 'TT', sans-serif;
	--main-bg: #14151B;
	--color-one: #fff;
	--color-three: #898A8D;
	--color-six: #767F86;
	--color-five: #D9D9D9;
	--color-one-op: rgba(255, 255, 255, 0.5);
	--color-bg-op-two: rgba(20, 21, 27, 0.40);
	--bg-color-one: #F91155;
	--color-four: #D2FF93;
	--grey-border-op: rgba(200, 207, 212, 0.3);
	--header: 60px;
	--transition: 0.3s
}

/* ui */
.clip {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn1 {
	background: #202127;
	color: #fff;
	padding: 20px 32px;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	letter-spacing: -0.54px;
	transition: var(--transition) color, var(--transition) background;
	text-decoration: none;
}

.btn1:hover {
	color: rgba(255, 255, 255, 0.60);
}

.btn1:active {
	background: #fff;
	color: #14151B;
}

.btn2 {
	color: #14151B;
	font-size: 16px;
	font-weight: 400;
	background: #D2FF93;
	padding: 16px 32px;
	transition: var(--transition) background;
	text-decoration: none;
}

.btn2:hover {
	background: #C2FF6D;
}

.btn2:active {
	background: #FFF;
}

.btn3 {
	display: inline-block;
	text-decoration: none;
	padding: 20px 32px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(20, 21, 27, 0.40);
	color: #FFF;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.42px;
	transition: var(--transition) background, var(--transition) border-color, var(--transition) color;
}

.btn3:hover {
	background: #202127;
	border-color: transparent;
}

.btn3:active,
.btn3--active {
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #FFF;
	color: #14151B;
}

.marketplaces_wb,
.marketplaces_ozon {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	padding: 13px 10px;
	height: 60px;
	text-align: center;
	color: var(--color-one);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.48px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: var(--transition) border-color, var(--transition) background;
}

.marketplaces_wb {
	background: #401B40;
}

.marketplaces_wb:hover {
	border-color: #B848B8;
}

.marketplaces_wb:active {
	border-color: #B848B8;
	background: #2C0D2C;
}

.marketplaces_ozon {
	background: #0D3172;
}

.marketplaces_ozon:hover {
	border-color: #367EFF;
}

.marketplaces_ozon:active {
	border-color: #367EFF;
	background: #0A1B3A;
}


.products-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: 40px 20px;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	margin: 0 auto;
}

.pagination .btn3 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	min-width: 52px;
	min-height: 52px;
}

.pagination .btn3-more {
	padding-left: 24px;
	padding-right: 24px;
}

.breadcrumbs {
	margin: 20px 0;
	color: var(--color-one);
	font-size: 13px;

	.woocommerce-breadcrumb {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		grid-gap: 10px;
	}

	a {
		display: flex;
		align-items: center;
		grid-gap: 10px;
		color: var(--color-six);
		font-weight: 400;
		line-height: 100%;
		transition: var(--transition) color;
		text-decoration: none;

		:hover {
			color: var(--color-one);
		}

	}

	svg {
		color: var(--color-six);
	}

}



/* ui */




.wrapper {
	max-width: 1380px;
	width: 100%;
	padding: 0 30px;
	margin: 0 auto;
}

html,
body {
	min-height: 100vh;
	background-color: var(--main-bg);

}


/* header */

.header {
	display: flex;
	align-items: center;
	min-height: var(--header);
}

.header-content {
	display: flex;
	align-items: center;
	grid-gap: 60px;
}


.header-nav ul {
	display: flex;
	align-items: center;
	grid-gap: 20px;
}

.header-nav ul a {
	color: var(--color-one-op);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.28px;
	text-decoration: none;
	transition: var(--transition) color;
}

.header-nav ul a:hover,
.header-nav .active {
	color: var(--color-one);
}

.header-right {
	display: flex;
	align-items: center;
	grid-gap: 24px;
	margin-left: auto;
}

.header-right_item {
	color: var(--color-one-op);
	text-decoration: none;
	transition: var(--transition) color;
}

.header-right_item:hover,
.header-right_item--active {
	color: var(--color-one);
}

.burger {
	--size: 44px;
	--thickness: 4.5px;
	--gap: 8px;
	display: inline-grid;
	place-items: center;
	width: var(--size);
	height: var(--size);
	padding: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: transform .18s ease;
	margin-left: auto;

}

.burger__line {
	width: calc(var(--size) - 22px);
	height: var(--thickness);
	background: currentColor;
	display: block;
	border-radius: 2px;
	transition: transform .28s cubic-bezier(.2, .9, .2, 1), opacity .18s ease;
	transform-origin: center;
	background-color: var(--color-one);
}

.burger__line+.burger__line {
	margin-top: var(--gap);
}

/* Active state -> "X" */
.burger--active .burger__line:nth-child(1) {
	transform: translateY(calc(var(--gap) + var(--thickness))) rotate(45deg);
}

.burger--active .burger__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(.2);
}

.burger--active .burger__line:nth-child(3) {
	transform: translateY(calc(-1 * (var(--gap) + var(--thickness)))) rotate(-45deg);
}


.mob-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 1000;
	max-width: 320px;
	background-color: #202127;
	box-shadow: -5px 4px 33.5px 0 rgba(0, 0, 0, 0.08)
}

.mob-menu.active {
	opacity: 1;
	visibility: visible;
}

.mob-menu__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 0;
	height: 100%;
}

.mob-menu___logo {
	display: inline-block;
	margin-bottom: 40px;
}

.mob-menu__nav {
	width: 100%;
	margin-bottom: 40px;
}

.mob-menu__nav li {
	width: 100%;
	text-align: center;
}

.mob-menu__nav ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-gap: 15px;
	width: 100%;
}

.mob-menu__nav ul a {
	color: var(--color-one-op);
	font-size: 18px;
	font-weight: 400;
	width: 100%;
	letter-spacing: -0.28px;
	text-decoration: none;
	transition: var(--transition) color;
}

.mob-menu__mob {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: 15px;
	margin-top: auto;
}


.cart-aside {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	max-width: 420px;
	width: 100%;
	padding: 24px;
	z-index: 100;
	background: #202127;
	box-shadow: -5px 4px 33.5px 0 rgba(0, 0, 0, 0.08);
	opacity: 0;
	transform-origin: left;
	transform: translateX(100%);
	transition: var(--transition) transform, var(--transition) opacity;

}

.cart-aside-show {
	opacity: 1;
	transform: translateX(0);
}


.cart-aside_empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto 0;
}

.cart-aside_empty__icon {
	color: #D2FF93;
}

.cart-aside_empty__title {
	color: var(--color-one);
	text-align: center;
	font-size: clamp(18px, 7vw, 24px);
	font-weight: 500;
	line-height: 108%;
}

.cart-aside_login {
	display: inline-block;
	margin-top: 40px;
}

.show-cart-empty {
	display: flex;
	flex-direction: column;
}

.show-cart-content {
	display: grid;
	grid-template-rows: max-content 1fr max-content;
}

.card-aside_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 10px;
	margin-bottom: 20px;
}

.card-aside_title {
	color: var(--color-one);
	font-size: 26px;
	font-weight: 500;
}

.cart-aside_close {
	color: var(--color-one-op);
	transition: var(--transition) color;
}

.cart-aside_close:hover {
	color: var(--color-one);
}

.cart-aside_list {
	display: flex;
	flex-direction: column;
	grid-gap: 24px;
	overflow: auto;
	padding-right: 10px;
}


.cart-item {
	position: relative;
	display: flex;
	grid-gap: 14px;
}

.cart-item_link {
	position: absolute;
	inset: 0;
	z-index: 10;
}

.cart-item_img {
	flex-shrink: 0;
}

.cart-item_img img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.cart-item_info {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	grid-gap: 5px;
	width: 100%;
}

.cart-item_info__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 10px;
}

.cart-item_title {
	color: var(--color-one);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
}

.cart-item_price {
	color: var(--color-one);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
	flex-shrink: 0;
}

.cart-item_info__center {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 10px;
}

.cart-item_info__attr {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 5px 15px;
	color: var(--color-one);
	font-size: 14px;
	font-weight: 400;
}

.cart-item_info__attr span {
	position: relative;
}

.cart-item_info__attr span:not(:last-of-type):after {
	position: absolute;
	content: '';
	top: 50%;
	right: -8px;
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background: #898A8D;
	transform: translateY(-50%);
}

.cart-item_info__sale {
	position: relative;
	width: fit-content;
	color: var(--color-three);
	font-size: 13px;
	font-weight: 400;
	flex-shrink: 0;
}

.cart-item_info__sale::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-three);
	transform: translateY(-50%);
}

.cart-item_info__bot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 10px;
}

.cart-item_info__counter {
	display: grid;
	grid-template-columns: 24px 1fr 24px;
	align-items: center;
	grid-gap: 2px;
	max-width: 150px;
	position: relative;
	z-index: 20;
}

.cart-item_info__set {
	color: #898A8D;
	transition: var(--transition) color;
}

.cart-item_info__set:hover {
	color: var(--color-one);
}

.cart-item_info__input {
	color: var(--color-one);
	font-size: 14px;
	font-weight: 500;
	max-width: 30px;
	border: none;
	background: none;
	text-align: center;
}

.cart-item_info__remove {
	display: flex;
	align-items: center;
	color: var(--color-three);
	grid-gap: 4px;
	font-size: 13px;
	font-weight: 500;
	position: relative;
	z-index: 20;
	transition: var(--transition) color;
}

.cart-item_info__remove:hover {
	color: var(--color-one);
}


.cart-aside_footer {
	display: flex;
	flex-direction: column;
	grid-gap: 15px;
	margin-top: 20px;
}

.cart-aside_footer__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: 10px;
}

.cart-aside_footer__sale___title {
	color: #898A8D;
	font-size: 15px;
	font-weight: 400;
}

.cart-aside_footer__sale___number {
	color: #D2FF93;
	font-size: 15px;
	font-weight: 400;
}

.cart-aside_footer__price___title {
	color: #FFF;
	font-size: clamp(18px, 2.5vw, 20px);
	font-weight: 500;
}

.cart-aside_footer__price___number {
	color: #FFF;
	font-size: clamp(18px, 2.5vw, 20px);
	font-weight: 500;
	line-height: 24px;
}

.cart-aside_footer__bay {
	display: block;
	margin-top: 5px;
	width: 100%;
	text-align: center;
}


/* header */

/* footer */

.footer {
	background: #202127;
	padding: clamp(30px, 5vw, 60px) 0;
}

.footer-content {
	display: grid;
}

.footer-logo {
	max-width: 230px;
}

.footer-item {
	display: flex;
	flex-direction: column;
	grid-gap: 10px;
	position: relative;
}



.footer-item a {
	color: var(--color-one-op);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	letter-spacing: -0.32px;
	transform: var(--transition) color;
}

.footer-item a:hover {
	color: var(--color-one);
}

.footer-copy {
	color: var(--color-one-op);
	font-size: 13px;
	font-weight: 400;
	line-height: 90%;
	letter-spacing: -0.26px;
}



/* footer */


/* preview */

.preview {
	height: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	width: 100%;
}

.preview-content {
	width: 100%;
}

.preview .swiper-slide {
	background: var(--bg-color);
}

.preview-slide {
	position: relative;
	display: flex;
	align-items: flex-end;

}

.preview .swiper-pagination-bullet {
	background: var(--color-one)
}

.preview-slide_footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(20px, 5vw, 50px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: clamp(20px, 5vw, 60px);
}

.preview-slide_right {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
	max-width: 370px;
}

.preview-slide_title {
	color: var(--color-one);
	font-size: clamp(25px, 5vw, 50px);
	letter-spacing: -1.5px;
}

.preview-slide_subtitle {
	color: var(--color-one);
	font-size: clamp(14px, 3vw, 16px);
	letter-spacing: -0.32px;
}





/* preview */


/* product card */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;

	.product-card_marketplaces {
		margin-bottom: auto;
	}
}

.product-card__image {
	position: relative;
}

.product-card_link {
	position: absolute;
	inset: 0;
	z-index: 5;
}


.product-card__img,
.product-card__img img,
.product-card__img picture {
	display: block;
	min-height: 390px;
	width: 100%;
	object-fit: contain;
	background-color: #000;
	aspect-ratio: 3 / 4;
}

.product-card__heart {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	background: var(--color-bg-op-two);
	color: var(--color-one);
	transition: var(--transition) color;
	z-index: 10;
}

.product-card__heart:hover {
	color: var(--bg-color-one);
}

.product-card__heart--added {
	color: transparent;
	--fill: var(--color-one);
	background: var(--bg-color-one);
}

.product-card__heart_icon {
	transition: var(--transition) fill, var(--transition) stroke;
}

.product-card_marketplaces {
	position: relative;
	display: flex;
	width: 100%;
	z-index: 10;

	>* {
		width: 100%;
	}



}

.product-card__footer {
	margin-top: 20px;
	width: 100%;
}

.product-card__title {
	color: var(--color-one);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.48px;
	text-align: left;
	margin-bottom: 10px;
}

.product-card__center {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 15px;
	margin-bottom: 20px;

	.product-card__size:first-of-type {
		flex-shrink: 0;
	}

	.product-card__size:last-of-type {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.product-card__size {
	color: var(--color-one-op);
	text-align: right;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.28px;
}

.product-card__price {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-card__price_left {
	display: flex;
	grid-gap: 10px;
	align-items: center;
}

.product-card__price_one {
	color: var(--color-one);
	font-size: 20px;
	font-weight: 500;
}

.product-card__price_two {
	position: relative;
	width: fit-content;
	color: var(--color-three);
	font-size: 13px;
	font-weight: 400;
}

.product-card__price_two::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-three);
	transform: translateY(-50%);
}

.product-card__price_right {
	color: var(--color-four);
	text-align: right;
	font-size: 16px;
	font-weight: 500;
}

.product-card__cart {
	position: relative;
	width: 100%;
	margin-top: 20px;
	z-index: 10;
}


/* product card */

/* секция фаваритов */


.swiper-favorites_pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	margin-top: 20px;
}

.swiper-favorites_bullet {
	width: 100%;
	height: 3px;
	opacity: 0.4;
	background: var(--color-five);
	transition: var(--transition) opacity;
	cursor: pointer;
}

.swiper-favorites_bullet--active {
	opacity: 1;
}

.favorit-more {
	width: 100%;
	margin-top: 30px;
}

/* секция фаваритов */


/* home */

.home {
	margin-top: clamp(40px, 10vw, 80px);
}

.home-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
}

.home-items {
	display: flex;
	grid-gap: 20px;
}

.home-item {
	color: var(--color-one-op);
	font-size: clamp(16px, 5vw, 24px);
	font-weight: 400;
	letter-spacing: -0.72px;
	transition: var(--transition) color;
}

.home-item:hover,
.home-item--active {
	color: var(--color-one);
}

.home-search {
	color: var(--color-one);
}

.home-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	margin-bottom: 100px;
}

/* home */


/* product */
.product {
	display: grid;
	grid-template-columns: 700px 1fr;
	margin-bottom: clamp(60px, 6vw, 80px);
	grid-gap: 40px;

	@media (max-width: 1200px) {
		grid-template-columns: 1fr;
	}

	@media (max-width: 756px) {
		grid-gap: 20px;
	}

}

.product-slider {
	display: grid;
	grid-template-columns: 80px 1fr;
	grid-gap: 20px;
	height: 600px;

	@media (min-width: 1201px) {
		position: sticky;
		top: 0;
	}

	.product-slider_slide {
		width: 100%;
		height: 100%;
		object-fit: contain;
		background-color: #000;
		aspect-ratio: 3 / 4;
	}

	.product-slider_play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70px;
		height: 70px;
		border-radius: 100%;
		background: var(--color-one);
		color: var(--main-bg);
		pointer-events: none;

		@media (max-width: 700px) {
			height: 45px;
			width: 45px;

			svg {
				width: 20px;
				height: 20px;
			}
		}

	}

	@media (max-width: 700px) {
		display: flex;
		flex-direction: column-reverse;
		max-width: calc(100vw - 30px);
		height: auto;
	}

}

.product-slider_prev,
.product-slider_next {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 100%;
	background: var(--color-one);
	z-index: 10;
	color: var(--main-bg);
	transition: var(--transition) background, var(--transition) color;
	cursor: pointer;

	&:hover {
		background: var(--main-bg);
		color: var(--color-one);
	}

	svg {
		width: 24px;
		height: 24px;
		pointer-events: none;
	}

	&.swiper-button-disabled {
		opacity: 0.3;
		pointer-events: none;
	}

	@media (max-width: 700px) {
		height: 30px;
		width: 30px;

		svg {
			width: 12px;
			height: 12px;
		}
	}

}

.product-slider_main {

	.product-slider_prev,
	.product-slider_next {
		top: 50%;
		transform: translateY(-50%);
	}

	.product-slider_prev {

		@media (min-width: 701px) {
			left: 20px;
		}

		@media (max-width: 700px) {
			left: 10px;
		}


	}

	.product-slider_next {
		@media (min-width: 701px) {
			right: 20px;
		}

		@media (max-width: 700px) {
			right: 10px;
		}
	}

	.swiper-zoom {
		position: absolute;
		top: 0;
		right: 0;
		width: 45px;
		height: 45px;
		border-radius: 70px 0 0px 70px;
		background: var(--color-one);
		color: var(--main-bg);
		z-index: 100;
		opacity: 0.3;
		transition: var(--transition) opacity;

		&:hover {
			background: var(--main-bg);
			color: var(--color-one);
			opacity: 1;
		}

		svg {
			pointer-events: none;
		}
	}

}

.product-slider_thumbs {

	.product-slider_prev,
	.product-slider_next {
		@media (min-width: 701px) {
			transform: rotate(90deg) translateY(50%) scale(0.8);
			left: 50%;
		}

	}

	.product-slider_prev {
		@media (min-width: 701px) {
			top: 10px;
		}

		@media (max-width: 700px) {
			top: 50%;
			transform: translateY(-50%);
			left: 10px;
		}


	}

	.product-slider_next {
		@media (min-width: 701px) {
			bottom: 10px;
		}

		@media (max-width: 700px) {
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
		}


	}

	.swiper-slide {
		position: relative;
		cursor: pointer;

		&::before {
			position: absolute;
			inset: 0;
			content: '';
			background: var(--main-bg);
			opacity: 0.7;
			transition: var(--transition) opacity;
		}
	}

	.swiper-slide-thumb-active::before {
		opacity: 0;
	}

	@media (max-width: 700px) {
		width: calc(100vw - 30px);
	}

	img {
		max-height: 100%;
		width: 100%;
		object-fit: cover;
		aspect-ratio: 3 / 4;
	}

}

.product-slider_next {}

.product-slider_main {
	width: 100%;
}

.product-top {
	margin-bottom: 24px;
}

.product-brend {
	color: var(--color-one);
	font-size: 14px;
	font-weight: 500;
	line-height: 142.857%;
	opacity: 0.5;
}

.product-title {
	color: var(--color-one);
	font-size: clamp(16px, 5vw, 30px);
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.6px;
}

.product-article {
	color: var(--color-one);
	font-size: 13px;
	line-height: 153.846%;
	opacity: 0.5;
	margin-top: 10px;
}

.product-links {
	margin-bottom: 24px;
}


.product-description {
	color: var(--color-one);
	font-size: 15px;
	line-height: 120%;
	letter-spacing: -0.3px;
	margin-bottom: 14px;
}

.product-description_title {
	font-weight: 500;
}

.product-description_info {
	font-weight: 400;

	ol {
		list-style-position: outside;
		list-style-type: disc;
		margin-left: 0.5em;
	}

	ul {
		list-style-type: decimal;
		margin-left: 0.5em;
	}


}


.product-color_title {
	color: var(--color-one);
	font-size: 15px;
	font-weight: 500;
	line-height: 160%;
	margin-bottom: 10px;
}

.product-color_list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	grid-gap: 10px;
}

.product-color_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid transparent;
	transition: var(--transition) border-color;
}

.product-color_item:hover,
.product-color_item--active {
	border-color: var(--color-one);

	img {
		width: 44px;
		height: 44px;
		object-fit: cover;
	}
}

.product-size {
	margin-top: 15px;
}

.product-size_title {
	color: var(--color-one);
	font-size: 15px;
	font-weight: 500;
	line-height: 160%;
	margin-bottom: 10px;
}

.product-size_list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	grid-gap: 10px;
	margin-bottom: 15px;
}

.product-size_item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 52px;
	padding: 0 5px;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	line-height: 160%;
	cursor: pointer;
	text-decoration: none;
}

.product-size_item--active {

	.product-size_text {
		color: var(--main-bg);
	}

	.product-size_text::before {
		border: none;
		background-color: var(--color-one);
	}

}

.product-size_text {
	color: rgba(255, 255, 255, 0.7);

	span {
		position: relative;
	}
}

.product-size_text::before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid var(--grey-border-op);
	transition: var(--transition) background-color, var(--transition) border-color;
	cursor: pointer;
}

.product-size_item:hover {
	.product-size_text::before {
		border-color: var(--color-one);
	}

}

.product-size_table {
	display: flex;
	align-items: center;
	grid-gap: 15px;
	margin: 15px 0;

	@media (max-width: 480px) {
		flex-direction: column;
		align-items: flex-start;
		grid-gap: 10px;
		margin: 10px 0;
	}
}

.product-size_btn {
	position: relative;
	display: flex;
	align-items: center;
	grid-gap: 2px;
	color: var(--color-one);
	font-size: 14px;
	font-weight: 500;
	line-height: 171.429%;

	span {
		color: #767F86;
		pointer-events: none;
	}

	&:before {
		content: '';
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 100%;
		height: 1px;
		background-color: var(--color-one);
		transform-origin: center;
		transition: var(--transition) transform;

		@media (min-width: 992px) {
			transform: scaleX(0);
		}

	}

	&:hover:before {
		transform: scaleX(1);
	}
}

.product-composition {
	color: var(--color-one);
	font-size: 15px;

}

.product-composition_title {
	font-weight: 600;
	margin-bottom: 10px;
}

.product-composition_description {
	line-height: 160%
}

.product-price {
	display: flex;
	align-items: center;
	grid-gap: clamp(10px, 3.5vw, 20px);
	;
	margin: 24px 0;
}

.product-price_sale {
	color: var(--color-one);
	font-size: clamp(18px, 5vw, 30px);
	;
	font-weight: 500;
}

.product-price_real {
	position: relative;
	width: fit-content;
	color: var(--color-three);
	font-size: clamp(14px, 4vw, 24px);
	font-weight: 400;

	&:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--color-three);
		transform: translateY(-50%);
	}
}

.product-bay {
	display: grid;
	align-items: center;
	grid-gap: 10px;


	@media (min-width: 481px) {
		grid-template-columns: 1fr 154px;
	}
}

.product-bay_counter {
	display: grid;

	justify-content: center;
	grid-gap: 10px;
	background: #202127;
	height: 100%;

	@media (min-width: 481px) {
		grid-template-columns: 24px 70px 24px;
	}

	@media (max-width: 480px) {
		grid-template-columns: 1fr 150px 1fr;
		height: 48px;
	}



}

.product-bay_counter__btn {
	color: #767F86;
	transition: var(--transition) color;

	&:hover {
		color: #fff;
	}
}

.product-bay_counter__input {
	display: block;
	color: #FFF;
	font-size: 16px;
	font-weight: 500;
	outline: none;
	border: none;
	background: none;
	text-align: center;
}

.modal-product {
	position: relative;

	.product-slider_slide {
		position: relative;
		max-height: 90vh;
	}

	img,
	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-slider_play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70px;
		height: 70px;
		border-radius: 100%;
		background: var(--color-one);
		color: var(--main-bg);
		pointer-events: none;

		@media (max-width: 700px) {
			height: 30px;
			width: 30px;

			svg {
				width: 12px;
				height: 12px;
			}
		}

	}

}

.products-related {
	margin-bottom: clamp(40px, 4.5vw, 60px);
}

.products-related_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 15px;

	@media (min-width: 992px) {
		margin-bottom: 20px;
	}

	@media (max-width: 991px) {
		margin-bottom: 10px;
	}
}

.products-related_title {
	color: var(--color-one);
	font-size: clamp(18px, 4vw, 32px);
	font-weight: 400;
	letter-spacing: -0.64px;
}

.products-related_btns {
	display: flex;
	align-items: center;
	grid-gap: 24px;
}

.products-related_btn {
	width: 24px;
	height: 24px;
	color: var(--color-one);

	svg {
		width: 24px;
		height: 24px;
	}
}

/* product */




























/* modal */

.modal {
	position: relative;
	display: none;
	z-index: 1000;
}

.modal.is-open {
	display: block;
}


.modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal__container {
	background-color: #fff;
	padding: 30px;
	max-width: 90vw;
	max-height: 97vh;
	border-radius: 4px;
	overflow-y: auto;
	box-sizing: border-box;
}



/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes mmslideIn {
	from {
		transform: translateY(15%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes mmslideOut {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10%);
	}
}

.micromodal-slide {
	display: none;
}

.micromodal-slide.is-open {
	display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
	animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
	animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
	animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
	animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
	will-change: transform;
}

.modal__close {
	right: 0;
	top: 0;
	position: absolute;
	background: transparent;
	border: 0;
}

.modal__close:before {
	content: "\2715";
	font-size: 30px;
}


/* modal */


/* лодер */

/* показываем оверлей поверх элемента */
.element-preloader {
	position: absolute;
	/* относительно контейнера */
	inset: 0;
	/* top:0; right:0; bottom:0; left:0 */
	display: flex;
	justify-content: center;
	pointer-events: auto;
	background: rgba(20, 21, 27, 0.7);
	/* полупрозрачный */
	z-index: 250;
}

/* бегущий кружок */
.element-preloader::before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.12);
	border-top-color: rgba(255, 255, 255, 0.95);
	top: 70%;
	position: sticky;
	 animation: ep-spin 0.9s linear infinite;
}

@keyframes ep-spin {
	to {
		transform: rotate(360deg);
	}
}





/* лодер */