.overlay-product-popup {
	position: fixed;
	inset: 0;
	display: flex;
	overflow: auto;
	padding: 64px;
	background-color: rgba(#000, 0.7);
	box-sizing: border-box;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	z-index: 999999;

	&:not(.visible) {
		opacity: 0;
		visibility: hidden;
	}
}

.product-popup {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 1066px;
	border-radius: 32px;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.08);
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.product-popup__close-btn {
	position: absolute;
	top: calc(-54px + 13px);
	right: calc(-54px + 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.08);
	color: $color-green;

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

	@include desktop {
		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

		svg {
			transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		&:hover {
			transform: scale(0.85);

			svg {
				transform: scale(1.15);
			}
		}
	}
}

.product-popup__container {
	display: grid;
	grid-template-columns: 485px 1fr;
	gap: 40px;
	padding: 32px;
}

.product-popup__side-left {
	display: flex;
	flex-flow: column;
	gap: 20px;
}

.product-popup__photo-wrapper {
	position: relative;
	aspect-ratio: 97 / 92;
	border-radius: 32px;
	background-color: $color-surface;
}

.product-popup__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

.product-popup__labels {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 6px;
}

.product-popup__label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 16px;
	border-radius: calc(30px / 2);
	background-color: $color-black;
	color: $color-white;
	font-weight: 500;
	font-size: 16px;
	line-height: 18px;
	box-sizing: border-box;

	&--primary {
		background: linear-gradient(81.79deg, #eb4747 16.36%, #f57c00 100%), #2c2d2e;
	}
}

.product-popup__controls {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 24px;
}

.product-popup__control-btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	svg {
		width: 24px;
		height: 24px;
		color: $color-gray-low;
	}

	span {
		font-size: 16px;
		line-height: 18px;
	}

	&.active-heart > svg {
		color: $color-error-primary;
	}

	&.active-compare > svg {
		color: $color-green;
	}

	@include desktop {
		&:hover {
			text-decoration: underline;
		}
	}
}

.product-popup__more-btn {
	height: 64px;
	padding: 0px 24px;
	border-radius: 16px;
	background-color: $color-surface;
	font-size: 18px;
	font-weight: 500;
	line-height: 21px;

	@include desktop {
		&:hover {
			color: $color-green;
		}
	}
}

.product-popup__side-right {
	display: flex;
	flex-flow: column;
	gap: 24px;
}

.product-popup__head {
	display: flex;
	flex-flow: column;
	gap: 16px;
}

.product-popup__head__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.product-popup__head__stat {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}

.product-popup__head__stat__default {
	font-size: 16px;
	line-height: 18px;
	color: $color-gray-md;

	&--status {
		font-weight: 500;

		&--green {
			color: $color-green;
		}

		&--red {
			color: $color-error-primary;
		}
	}
}

a.product-popup__head__stat__default {
	@include desktop {
		&:hover {
			text-decoration: underline;
		}
	}
}

.product-popup__head__stat__rating {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	span {
		font-size: 16px;
		font-weight: 500;
		line-height: 18px;
	}
}

.product-popup__summary {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding: 24px;
	border-radius: 32px;
	background-color: $color-surface;
}

.product-popup__price {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 16px;

	&-current {
		font-size: 28px;
		font-weight: 700;
		letter-spacing: -0.03em;
	}

	&-sale {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
		padding: 0 10px;
		border-radius: 12px;
		background: linear-gradient(81.79deg, #eb4747 16.36%, #f57c00 100%);
		font-weight: 500;
		font-size: 14px;
		line-height: 16px;
		color: $color-white;
	}

	&-old {
		font-size: 18px;
		line-height: 21px;
		color: $color-gray-md;
	}
}

.product-popup__buy {
	display: grid;
	grid-template-columns: 169px 1fr;
	gap: 10px;

	&-btn,
	&-click-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 64px;
		padding: 0 24px;
		border-radius: 16px;
		font-size: 18px;
		font-weight: 500;
		line-height: 21px;

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

	&-btn {
		color: $color-white;
		background-color: $color-green;

		@include desktop {
			&:hover {
				background-color: $color-green-hover;
			}
		}
	}

	&-click-btn {
		background-color: $color-white;

		@include desktop {
			&:hover {
				color: $color-green;
			}
		}
	}
}

.product-popup__list-wrapper {
	display: flex;
	flex-flow: column;
	gap: 16px;
}

.product-popup__list-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.product-popup__list {
	display: flex;
	flex-flow: column;
	gap: 12px;
}

.product-popup__list-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;

	span,
	b {
		font-size: 16px;
		line-height: 18px;
	}

	span {
		order: 1;
		color: $color-gray-md;
	}

	b {
		order: 3;
	}

	&::before {
		content: '';
		flex: 1;
		order: 2;
		display: block;
		height: 18px;
		border-bottom: 1px dashed $color-border;
	}
}