.product-item {
	position: relative;
	display: flex;
	flex-flow: column;
	gap: 20px;

	@include mobile {
		gap: 10px;
	}
}

.product-item__photo-wrapper {
	position: relative;
	width: 100%;
	height: 224px;
	border-radius: 32px;
	background-color: $color-surface;

	@include desktop {
		&:hover {
			.product-item__preview-btn {
				opacity: 1;
				visibility: visible;
				transform: translate(-50%, -50%);
			}
		}
	}

	@include mobile {
		height: 120px;
		border-radius: 18px;
	}
}

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

.product-item__guarantee-label {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px;
	border-radius: calc(32px / 2);
	background-color: $color-white;
	box-sizing: border-box;

	@include mobile {
		top: 6px;
		left: 6px;
		height: 20px;
		padding: 0 5px;
	}

	svg {
		width: 20px;
		height: 20px;
		color: $color-green;

		@include mobile {
			width: 16px;
			height: 16px;
		}
	}

	span {
		font-size: 14px;
		font-weight: 500;

		@include mobile {
			font-size: 10px;
		}
	}
}

.product-item__control-labels {
	position: absolute;
	top: 16px;
	right: 18px;
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include mobile {
		top: 10px;
		right: 10px;
		gap: 2px;
	}
}

.product-item__control-label {
	width: 20px;
	height: 20px;
	color: $color-gray-low;

	svg {
		width: 100%;
		height: 100%;
	}

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

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

.product-item__ntf-label {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: 28px;
	border-radius: calc(28px / 2);
	background: linear-gradient(81.79deg, #eb4747 16.36%, #f57c00 100%), #ffffff;
	font-size: 14px;
	font-weight: 500;
	color: $color-white;

	@include mobile {
		display: none;
	}
}

.product-item__preview-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0px 20px;
	border-radius: 16px;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(#000, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%) scale(0.7);
	transition:
		transform 0.3s ease,
		opacity 0.3s ease,
		visibility 0.3s ease;
	z-index: 1;

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

	span {
		font-weight: 500;
		line-height: 18px;
		white-space: nowrap;
	}
}

.product-item__content {
	flex: 1;
	display: flex;
	flex-flow: column;
	gap: 20px;

	@include mobile {
		gap: 10px;
	}
}

.product-item__main {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include mobile {
		gap: 6px;
	}
}

.product-item__stat {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	line-height: 18px;

	@include mobile {
		line-height: 14px;
	}
}

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

	@include mobile {
		gap: 2px;
	}

	&__icon {
		width: 24px;
		height: 24px;
		color: $color-warning-primary;

		@include mobile {
			width: 20px;
			height: 20px;
		}
	}

	&__num {
		font-weight: 500;

		@include mobile {
			font-size: 14px;
		}
	}
}

.product-item__stat__status {
	margin-left: 10px;
	font-weight: 500;

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

		@include mobile {
			position: absolute;
			left: 12px;
			top: calc(120px - 10px - 12px);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 10px;
			height: 10px;
			margin-left: 0;
			border-radius: 50%;
			background-color: rgba($color-green, 0.2);

			&::before {
				content: '';
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: $color-green;
			}

			span {
				display: none;
			}
		}
	}

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

		@include mobile {
			display: none;
		}
	}

	&--gray {
		color: $color-gray-low;

		@include mobile {
			display: none;
		}
	}
}

.product-item__stat__pr {
	margin-left: 24px;
	color: $color-gray-low;

	@include mobile {
		font-size: 12px;
		margin-left: 10px;
	}
}

.product-item__name {
	display: -webkit-box;
	font-size: 18px;
	font-weight: 500;
	line-height: 21px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	@include mobile {
		font-size: 14px;
		line-height: 16px;
	}
}

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

	@include mobile {
		font-size: 12px;
		line-height: 14px;
	}

	@include desktop {
		gap: 10px 16px;
	}
}

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

	@include mobile {
		order: -1;
	}

	&__icon {
		width: 20px;
		height: 20px;
		color: $color-gray-md;

		@include desktop {
			width: 24px;
			height: 24px;
		}
	}

	&__text {
		flex: 1;
	}
}

.product-item__param-text {
	color: $color-gray-md;

	&--fill {
		@include desktop {
			flex: 0 0 100%;
		}
	}
}

.product-item__add-to-cart-btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 42px;
	border-radius: 14px;
	background-color: $color-green;
	color: $color-white;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;

	@include desktop {
		font-size: 18px;
		line-height: 21px;

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

	&--gray {
		color: $color-black;
		background-color: $color-surface;

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

	@include desktop {
		gap: 10px;
		height: 54px;
		border-radius: 16px;
	}

	&__icon {
		width: 24px;
		height: 24px;
	}

	&__text {
	}

	&__sale {
		position: relative;
		font-size: 16px;
		line-height: 18px;
		color: rgba($color-white, 0.7);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url("data:image/svg+xml,%3Csvg width='57' height='14' viewBox='0 0 57 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.113498' y1='13.4871' x2='56.1135' y2='0.487073' stroke='white'/%3E%3C/svg%3E");
		}

		@include mobile {
			display: none;
		}
	}
}