.product {
	h1.title {
		width: fit-content;
		margin-bottom: 40px;
		padding-left: 0;
		&::after {
			display: none;
		}
	}
	.product-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr auto;
		gap: 10px;
	}
	.slider {
		position: relative;
		border-radius: 30px;
		grid-row: 1/3;
		aspect-ratio: 1;
		overflow: hidden;
		&:not(:has(.img + .img)) {
			.arrow-l,
			.arrow-r,
			.bubbles {
				display: none;
			}
		}
		.slides {
			display: flex;
			gap: 10px;
			.img {
				flex-shrink: 0;
				border-radius: inherit;
				overflow: hidden;
				width: 100%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		.add-compare {
			position: absolute;
			top: 10px;
			right: 10px;
			opacity: 1;
			border-radius: 50%;
		}
		.arrow-l,
		.arrow-r {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			display: flex;
			width: 50px;
			height: 50px;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			border-radius: 12px;
			background: var(--grey-1);
			&::before {
				content: '\e903';
				font: 400 22px/1 'icon';
			}
		}
		.arrow-l {
			left: 10px;
			&::before {
				transform: rotate(180deg);
			}
		}
		.arrow-r {
			right: 10px;
		}
		.ws-arrow-disabled {
			background: var(--grey-2);
			cursor: default;
			&::before {
				opacity: .2;
			}
		}
		.bubbles {
			position: absolute;
			z-index: 2;
			right: 50%;
			bottom: 20px;
			transform: translateX(50%);
		}
	}
	.product-info {
		display: flex;
		flex-direction: column;
		border-radius: 30px;
		background: var(--white);
		padding: 20px;
		.code,
		.code + p {
			color: var(--black-grey);
			font-size: 14px;
			line-height: 125%;
			font-weight: 200;
		}
		h2 {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			color: var(--black-grey);
			font-size: 20px;
			font-weight: 600;
			line-height: 125%;
			margin-top: 10px;
			padding-bottom: 8px;
			border-bottom: 1px solid var(--grey-1);
			margin-bottom: auto;
			+ .label {
				margin-top: 14px;
			}
		}
		.price {
			margin: 8px 0;
			span {
				font-size: 28px;
				+ span {
					font-size: 14px;
				}
			}
		}
		.basket-form {
			fieldset {
				height: 50px;
				button {
					width: 40px;
				}
			}
			.btn {
				height: 50px;
				padding: 0 39px;
			}
		}
		.label {
			color: var(--grey-x);
			letter-spacing: 0.16px;
			margin-bottom: 8px;
		}
		.spoiler-box {
			position: relative;
			height: 40px;
			width: 100%;
			margin-bottom: 12px;
		}
		.spoiler.radio {
			position: absolute;
			background: var(--white-grey);
			width: 100%;
			border-radius: 10px;
			animation: spoiler-close .6s linear forwards;
			* {
				font-size: 16px;
			}
			button {
				padding: 10px;
				justify-content: space-between;
				background: none;
				align-items: center;
				line-height: 1;
			}
			.list-wrapper {
				padding: 0 10px;
				max-height: 100%;
			}
			&.open {
				animation: spoiler-open .6s linear forwards;
			}
		}
		.time {
			color: var(--black-grey);
			font-size: 20px;
			font-weight: 600;
			line-height: 125%;
			padding-top: 8px;
			border-top: 1px solid var(--grey-1);
			margin-top: 10px;
		}
		&.info-box {
			h3 {
				font-size: 20px;
				font-weight: 600;
				margin-bottom: 10px;
			}
			p {
				letter-spacing: 0.16px;
				&:not(:last-child) {
					margin-bottom: 8px;
				}
				a {
					font-size: inherit;
					letter-spacing: inherit;
					font-weight: 700;
				}
			}
		}
		.price {
			margin: 8px 0;
		}
	}
	.descriptions {
		margin: 40px 0 50px;
		grid-column: 1/-1;
		.tab-box {
			padding: 3px;
			border-radius: 12px;
			background: var(--white);
			display: flex;
			gap: 3px;
			margin-bottom: 2px;
			button {
				font-size: 14px;
				font-weight: 600;
				letter-spacing: 0.14px;
				text-transform: uppercase;
				padding: 14px;
				border-radius: 10px;
				background-color: var(--white);
				&.active {
					border-radius: 10px;
					background: var(--white-grey);
				}
			}
		}
		.bottom {
			display: grid;
			grid-template-columns: 1fr 350px;
			gap: 30px;
			background: var(--white);
			padding: 30px;
			border-radius: 12px;
			.parameters {
				display: grid;
				.tab {
					display: none;
					flex-direction: column;
					&.active {
						display: flex;
					}
					.content {
						color: var(--grey-dark);
						letter-spacing: 0.16px;
						strong {
							font-weight: 700;
						}
					}
					&.specification {
						flex-direction: column;
						gap: 20px;
						.table {
							width: 100%;
							* {
								letter-spacing: 0.16px;
							}
							.thead {
								font-weight: 700;
								text-align: left;
								display: flex;
								align-items: center;
								gap: 10px;
								margin-bottom: 10px;
								&::before {
									content: '\e915';
									font: 100 14px/1 'icon';
									width: 20px;
									display: flex;
									align-items: center;
									justify-content: center;
									aspect-ratio: 1;
									flex-shrink: 0;
									border-radius: 4px;
									background: var(--white-grey);
								}
								&.sizes::before {
									content: '\e90f';
								}
							}
							.tbody {
								> div {
									display: grid;
									grid-template-columns: repeat(2, 1fr);
									gap: 10px;
									padding: 8px 10px;
									&:nth-child(odd) {
										border-radius: 6px;
										background: var(--white-grey);
									}
									p + p {
										text-align: right;
										justify-self: end;
									}
								}
							}
						}
					}
				}
			}
			.consultation {
				position: sticky;
				top: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				align-self: start;
				padding: 20px 44px;
				border-radius: 12px;
				background: var(--white-grey);
				.heading {
					color: var(--black-grey);
					text-align: center;
					font-size: 20px;
					font-weight: 600;
					line-height: 125%;
					padding: 0 30px;
				}
				p {
					color: var(--black-grey);
					text-align: center;
					font-size: 14px;
					font-weight: 200;
					line-height: 125%;
					margin: 10px 0 30px;
				}
				button {
					height: 50px;
					border-radius: 14px;
					width: 100%;
					font-size: 16px;
				}
			}
		}
	}
	+ section {
		background: var(--grey-1);
	}
}
@keyframes spoiler-open {
	0% {
		z-index: 0;
	}
	0.001% {
		z-index: 1;
	}
	100% {
		z-index: 1;
	}
}
@keyframes spoiler-close {
	0% {
		z-index: 1;
	}
	99.999% {
		z-index: 1;
	}
	100% {
		z-index: 0;
	}
}
.sections {
	margin-bottom: 100px;
	.heading {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.14px;
		text-transform: uppercase;
		margin-bottom: 10px;
	}
	.items {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		> * {
			display: flex;
			align-items: center;
			gap: 4px;
			border-radius: 14px;
			background: var(--white);
			padding: 8px 14px;
			&::after {
				content: '\e903';
				font: 100 1cap/1 'icon';
				color: inherit;
			}
		}
	}
	+ .goods {
		background: var(--grey-1);
	}
}
footer {
	margin-top: 100px;
}
@media screen and (max-width: 1440px) {
	.product .product-info .payment {
		h3 {
			margin-bottom: 6px;
		}
		> p {
			font-size: 14px;
			letter-spacing: 0.14px;
		}
	}
}
@media screen and (max-width: 1152px) {
	.product {
		container: product-container / inline-size;
		h1.title {
			margin-bottom: 20px;
		}
		.product-box {
			grid-template-columns: .4fr .6fr;
			grid-template-rows: initial;
		}
		.slider {
			grid-row: 2/3;
			.arrow-l,
			.arrow-r {
				width: 38px;
				height: 38px;
				&::before,
				&::after {
					font-size: 18px;
				}
			}
		}
		.product-info:has(.price) {
			grid-column: 1/3;
			grid-row: 1/2;
		}
		.descriptions {
			margin: 10px 0 30px;
			.bottom {
				grid-template-columns: 1fr 300px;
				gap: 20px;
				padding: 10px;
				.consultation {
					padding: 20px;
				}
			}
		}
	}
}
@container product-container (width < 820px) {
	.product {
		.product-box,
		.descriptions .bottom {
			display: flex;
			flex-direction: column;
		}
		.slider {
			max-width: 600px;
		}
		.descriptions .bottom {
			gap: 40px;
		}
	}
}
@media screen and (max-width: 768px) {
	.product {
		h1.title {
			margin-bottom: 10px;
		}
		.slider {
			border-radius: 20px;
			.arrow-l,
			.arrow-r {
				display: none;
			}
		}
		.product-info {
			.spoiler.radio {
				* {
					font-size: 14px;
				}
				button {
					padding: 12px 10px;
				}
				.time {
					margin-top: 2px;
				}
			}
			.basket-form .btn {
				padding: 0;
				width: 50px;
				span {
					display: none;
				}
			}
		}
		.descriptions .bottom .consultation {
			padding: 20px 44px;
		}
	}
	footer {
		margin-top: 50px;
	}
}
@media (hover: hover) {
	.product .product-info.info-box p a:hover {
		color: var(--ff-2-f-00);
	}
}