h1.title {
	gap: 10px;
	padding-left: 0 !important;
	max-width: 352px;
	margin-bottom: 40px;
}
.empty-basket {
	border-radius: 30px;
	background: url(../images/basket.webp) center top -26px/ auto no-repeat, var(--ff-2-f-00);
	max-width: 474px;
	min-height: 524px;
	padding: 40px 62px;
	margin-bottom: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	.head,
	p {
		color: var(--white);
		text-align: center;
	}
	.head {
		font-size: 24px;
		font-weight: 700;
		margin: auto 0 8px;
	}
	p {
		line-height: 125%;
		margin-bottom: 40px;
	}
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--ff-2-f-00);
		background-color: var(--white);
		width: min(312px, 100%);
		height: 50px;
		font-size: 16px;
		transition: box-shadow .2s linear;
	}
}
.basket-card {
	border-radius: 30px;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 6px 20px 6px 6px;
	.remove-head {
		display: none;
		color: var(--grey-x);
		letter-spacing: 0.16px;
	}
	.img {
		width: 118px;
		aspect-ratio: 1;
		height: auto;
		margin: 0;
		border-radius: 24px;
	}
	.info {
		margin-right: auto;
		display: flex;
		flex-direction: column;
		gap: 8px;
		max-width: 450px;
		> * {
			position: relative;
			z-index: 1;
			width: fit-content;
		}
		.product-head {
			color: var(--black-grey);
			font-weight: 600;
			line-height: 125%;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			z-index: 0;
		}
		> span {
			display: flex;
			color: var(--black-grey);
			width: fit-content;
			font-size: 14px;
			font-weight: 400;
			line-height: 125%;
		}
		> span.size {
			display: flex;
			gap: 5px;
			align-items: center;
			&::before {
				content: '\e90f';
				font: 400 16px/1 'icon';
				display: flex;
				width: 20px;
				height: 20px;
				justify-content: center;
				align-items: center;
				border-radius: 4px;
				background: var(--white-grey);
			}
		}
		.style {
			color: var(--grey-x);
			font-size: 14px;
			letter-spacing: 0.14px;
			span {
				font-size: inherit;
				letter-spacing: inherit;
				display: inline-block;
				margin-left: 6px;
			}
		}
	}
	.basket-form {
		height: auto;
		overflow: visible;
		margin: 0;
	}
	.price {
		justify-content: end;
		min-width: 160px;
		margin: 0 0 0 8px;
		span {
			white-space: nowrap;
		}
	}
	.remove-from-basket {
		width: 40px;
		aspect-ratio: 1;
		border-radius: 50%;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--white-grey);
		transition: background-color .2s linear, color .2s linear;
		border: none;
		margin-left: 18px;
		&::before {
			content: '\e917';
			font: 400 20px / 1 'icon';
		}
	}
	.basket-form,
	.price,
	.add-back,
	.remove-from-basket {
		position: relative;
		z-index: 1;
	}
	.add-back {
		display: none;
		font-size: 16px;
		line-height: 1;
	}
	&.remove {
		padding: 20px;
		.basket-form,
		.price,
		.img {
			display: none;
		}
		.info {
			flex-direction: row;
			gap: 20px;
			max-width: initial;
			.style,
			> span {
				display: none;
			}
		}
		.remove-head,
		.add-back {
			display: flex;
		}
		.remove-from-basket {
			background-color: inherit;
			margin-left: 0;
			&::before {
				content: '\e907';
				position: relative;
				transform: rotate(45deg);
			}
		}
	}
}
.promo {
	display: flex;
	flex-direction: column;
	column-gap: 10px;
	margin-bottom: 150px;
	.basket {
		display: grid;
		grid-template-columns: 1fr 352px;
		gap: 10px;
	}
	.basket > .tab {
		display: none;
		flex-direction: column;
		width: 100%;
		&.active {
			display: flex;
		}
	}
	.product-list .items {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.clear-basket {
		border-radius: 10px;
		background-color: var(--white);
		height: 30px;
		width: 230px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--grey-x, );
		font-size: 14px;
		letter-spacing: 0.14px;
		margin-top: 20px;
		transition: box-shadow .2s linear, color .2s linear;
	}
	.order {
		width: 100%;
		input:-webkit-autofill {
			box-shadow: inset 0 0 0 50px var(--white) !important;
			background: transparent;
		}
		.box {
			padding: 30px;
			border-radius: 30px;
			border: 10px solid var(--white);
			background: var(--white-grey);
			&:not(:last-child) {
				margin-bottom: 10px;
			}
			.tab-box {
				display: flex;
				align-items: center;
				gap: 6px;
				margin-bottom: 20px;
				span {
					font-size: 20px;
					font-weight: 700;
					margin-right: 10px;
				}
				label {
					border-radius: 10px;
					background-color: var(--white);
					letter-spacing: 0.16px;
					line-height: 1;
					padding: 7px 10px;
					cursor: pointer;
					&:has(input:checked) {
						background-color: var(--ff-2-f-00);
						color: var(--white);
					}
					input {
						display: none;
					}
				}
				~ .tab .input-box {
					margin-top: 20px;
				}
			}
			.tab {
				flex-direction: column;
				&.fiz {
					display: flex;
				}
				&.yur {
					display: none;
				}
				&.active {
					display: flex;
				}
				.entity {
					padding: 20px;
					border-radius: 14px;
					border: 1px solid var(--grey-4);
					.info-wrapper {
						display: flex;
						flex-direction: column;
						gap: 8px;
						*:not(.name) {
							line-height: 1.25;
						}
						.name {
							font-weight: 700;
						}
					}
				}
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: start;
				button {
					color: var(--ff-2-f-00);
					font-size: 14px;
					font-weight: 700;
					letter-spacing: 0.14px;
					padding: 11px 30px 12px 30px;
					border-radius: 10px;
					background-color: var(--white);
				}
				.info-wrapper {
					display: flex;
					flex-direction: column;
					gap: 10px;
					div {
						line-height: 1.25;
						&:has(span) {
							display: grid;
							grid-template-columns: 132px auto;
							gap: 20px;
							overflow: hidden;
							color: var(--grey-x);
							font-size: 14px;
							span {
								line-height: inherit;
								font-size: inherit;
							}
						}
						&:has(span:empty) {
							display: none;
						}
						&.delivery {
							margin: 10px 0;
						}
					}
				}
				.head {
					font-size: 20px;
					font-weight: 700;
				}
			}
			.input-box {
				display: none;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px 10px;
				&.payment-method {
					gap: 10px;
					.head {
						margin-bottom: 10px;
					}
					> button {
						margin-top: 30px;
					}
				}
				&.delivery-info {
					.label {
						grid-column: 1/-1;
					}
					.radio-box {
						justify-content: start;
						span {
							color: var(--grey-x);
							font-size: 14px;
							line-height: 125%;
							+ input {
								margin-bottom: auto;
							}
							&:has(input) {
								margin-bottom: 10px;
								color: var(--grey-dark);
								font-size: 16px;
								+ span {
									color: var(--grey-dark);
									font-size: 16px;
									+ span {
										margin-bottom: 10px;
									}
								}
							}
						}
					}
					fieldset {
						border: none;
						grid-column: 1/-1;
						display: none;
						grid-template-columns: repeat(2, 1fr);
						gap: 10px;
						legend {
							font-size: 14px;
							margin-bottom: 10px;
						}
						.table {
							width: 100%;
							display: grid;
							grid-template-columns: auto 130px;
							justify-content: space-between;
							gap: 10px 30px;
							i {
								color: var(--grey-x);
								font-size: 14px;
								line-height: 125%;
								font-style: normal;
							}
							b {
								line-height: 125%;
							}
						}
					}
				}
				.head {
					grid-column: 1/-1;
					font-size: 20px;
					font-weight: 700;
				}
				> button {
					margin-top: 20px;
					grid-column: 1/-1;
					width: fit-content;
					font-weight: 700;
					letter-spacing: 0.14px;
					padding: 11px 30px;
					border-radius: 10px;
				}
			}
			&.edit {
				.info {
					display: none;
				}
				.input-box {
					display: grid;
				}
			}
			&:has(input.yur:checked) .tab {
				&.fiz {
					display: none;
				}
				&.yur {
					display: flex;
				}
			}
			&:has(input.field-open:checked) {
				.info .info-wrapper > div:has(.delivery-coast, .delivery-time) {
					display: none;
				}
				.input-box {
					fieldset {
						display: grid;
					}
					.field-close {
						display: none;
					}
				}
			}
			.label {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 6px;
				&:has(input[required]) {
					position: relative;
					span::after {
						content: '*';
						color: var(--ff-2-f-00);
					}
					&::after {
						content: 'Обязательно для заполнения';
						position: absolute;
						left: 0;
						top: calc(100% + 2px);
						color: var(--ff-2-f-00);
						font-size: 12px;
						pointer-events: none;
						opacity: 0;
						transition: opacity .2s linear;
					}
					&:has(input.error)::after {
						opacity: 1;
					}
				}
				span {
					font-size: 12px;
				}
				input {
					padding: 8px 12px 9px;
					border-radius: 10px;
					background-color: var(--white);
					border: 1px solid var(--white);
					transition: border-color .2s linear;
					&.error {
						border-color: var(--ff-2-f-00)
					}
					&::placeholder {
						color: var(--grey-4);
					}
				}
			}
			.radio-box {
				border-radius: 10px;
				background: var(--white);
				border: 1px solid var(--white);
				padding: 12px;
				min-height: 50px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				cursor: pointer;
				&:has(input:checked) {
					border-color: var(--grey-4);
				}
				span {
					&:has(input) {
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 10px;
						line-height: 1.25;
					}
					input {
						display: inline-block;
						width: 20px;
						aspect-ratio: 1;
						accent-color: var(--ff-2-f-00);
					}
				}
			}
		}
	}
	.result-box {
		grid-column: 2/3;
		position: sticky;
		top: 20px;
		display: flex;
		flex-direction: column;
		border-radius: 30px;
		background: var(--white);
		min-height: 165px;
		padding: 20px 30px;
		align-self: start;
		margin-bottom: 65px;
		box-shadow: 0px 48px 29px 0px rgba(0, 0, 0, 0.05), 0px 22px 22px 0px rgba(0, 0, 0, 0.09), 0px 5px 12px 0px rgba(0, 0, 0, 0.1);
		.sum {
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			color: var(--black-grey);
			font-size: 28px;
			font-weight: 600;
			line-height: 125%;
			span {
				font-size: 28px;
				font-weight: 600;
				line-height: 125%;
				b {
					font-size: inherit;
					line-height: inherit;
					font-weight: inherit;
				}
			}
		}
		.btn {
			margin: auto -10px 0;
			border-radius: 14px;
			height: 50px;
			font-size: 16px;
			&:disabled {
				pointer-events: none;
				opacity: .7;
			}
		}
		.info {
			display: none;
			margin: 8px 0 20px;
			:where(.price, .delivery-pay) {
				display: grid;
				grid-template-columns: auto 1fr auto;
				&::after {
					content: '';
					grid-area: 1 / 2/ 2 / 3;
					width: 100%;
					height: 100%;
					border-bottom: 1px solid var(--grey-1)
				}
				span {
					color: var(--grey-x);
					font-size: 14px;
					line-height: 1.25;
					+ span {
						color: var(--grey-x);
						font-size: 14px;
						text-decoration: none;
					}
				}
			}
			.delivery-pay {
				margin-top: 6px;
				.delivery-price {
					font-weight: 700;
					color: var(--grey-dark);
				}
			}
			hr {
				margin: 30px 0;
				background-color: var(--grey-x);
			}
			:where(.delivery-type, .pay) {
				display: flex;
				gap: 8px;
				span {
					font-size: 14px;
					font-weight: 700;
					line-height: 125%;
				}
			}
			.delivery-type {
				margin-bottom: 4px;
			}
			.delivery-date {
				color: var(--grey-x);
				font-size: 14px;
				line-height: 125%;
				&.hide {
					visibility: hidden;
				}
			}
			.pay {
				margin-top: 6px;
			}
		}
		&.order :is(.info, .agree) {
			display: block;
		}
		.agree {
			display: none;
			position: absolute;
			left: 0;
			top: calc(100% + 10px);
			width: 100%;
			padding: 10px;
			color: #8D8D8D;
			text-align: center;
			font-variant-numeric: lining-nums proportional-nums;
			text-overflow: ellipsis;
			font-family: "Petrov Sans-Trial";
			font-size: 14px;
			line-height: 125%;
			a {
				color: var(--ff-2-f-00);
				font-size: inherit;
				line-height: inherit;
			}
		}
	}
}
.done {
	h1 {
		display: none;
		+ h2 {
			gap: 10px;
			padding-left: 0;
			max-width: 352px;
			margin-bottom: 40px;
		}
	}
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 150px;
		border-radius: 30px;
		gap: 10px;
		background: url(../images/order-done.webp) top center/ auto no-repeat, var(--black-grey);
		padding: 227px 0 113px;
		> * {
			max-width: 392px;
		}
		.head {
			color: var(--white);
			text-align: center;
			font-size: 28px;
			font-weight: 700;
		}
		div {
			color: var(--white);
			text-align: center;
			font-size: 20px;
			span {
				color: var(--ff-2-f-00);
				font-size: inherit;
			}
		}
		p {
			color: var(--grey-x);
			text-align: center;
			margin-top: 20px;
		}
	}
}
@media screen and (max-width: 1152px) {
	.promo {
		margin-bottom: 100px;
		.basket {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.product-list {
			display: contents;
			.items {
				width: 100%;
			}
		}
		.result-box {
			position: relative;
			top: 0;
			width: min(740px, 100%);
			align-self: center;
		}
		.clear-basket {
			order: 1;
			margin-bottom: 40px;
		}
	}
}
@media screen and (max-width: 768px) {
	.done h1 + h2,
	h1.title {
		width: fit-content;
		min-width: 190px;
		margin-bottom: 30px;
		padding: 8px 10px;
	}
	.empty-basket {
		background: url(../images/basket.webp) center top -36px/ auto no-repeat, var(--ff-2-f-00);
		max-width: 370px;
		min-height: 504px;
		padding: 20px 10px;
		margin-bottom: 100px;
		.btn {
			width: min(330px, 100%);
		}
	}
	.basket-card {
		display: grid;
		grid-template-columns: 100px 1fr 1fr 40px;
		gap: 20px 6px;
		padding: 6px;
		border-radius: 20px;
		.img {
			width: 100%;
		}
		.info {
			margin-right: 0;
			max-width: initial;
			grid-column: 2/4;
			.product-head {
				font-size: 14px;
			}
		}
		.basket-form {
			grid-column: 1/3;
			grid-row: 2/3;
			justify-self: start;
		}
		.price {
			margin: 0;
			grid-row: 2/3;
			grid-column: 3/5;
			justify-self: end;
			padding: 10px;
			span {
				font-size: 20px;
			}
		}
		.img {
			border-radius: 14px;
		}
		.remove-from-basket {
			width: 100%;
			margin-left: 0;
			align-self: start;
		}
		&.remove {
			.info {
				grid-column: 1/-1;
				display: grid;
				grid-template-columns: auto 1fr;
				gap: 8px;
				.product-head {
					font-size: 16px;
					+ .remove-head {
						grid-column: 2/3;
					}
				}
			}
			.add-back {
				grid-column: 1/ -2;
				justify-content: center;
			}
		}
	}
	.promo .order .box .input-box {
		grid-template-columns: 1fr;
		width: 100%;
		&.delivery-info fieldset {
			grid-template-columns: 1fr;
		}
		&.delivery-info .radio-box {
			min-height: initial;
		}
	}
	.done .box {
		margin-bottom: 100px;
		padding: 227px 18px 123px;
		div {
			font-size: 16px;
		}
	}
}
@media screen and (max-width: 640px) {
	.promo .order .box {
		padding: 10px;
		.tab-box {
			flex-direction: column;
			align-items: start;
			gap: 6px;
			width: 100%;
			span {
				margin-bottom: 4px;
			}
			label {
				display: flex;
				justify-content: center;
				width: 100%;
			}
		}
		.info {
			flex-direction: column;
			gap: 20px;
			> button {
				align-self: end;
			}
		}
		.input-box.delivery-info fieldset .table {
			display: flex;
			flex-direction: column;
			i + i {
				order: 1;
			}
			b + b {
				order: 2;
			}
		}
	}
}
@media (hover: hover) {
	.empty-basket .btn:hover {
		box-shadow: 0 0 30px var(--white);
	}
	.basket-card.card:hover {
		box-shadow: none;
		.remove-from-basket:hover {
			background-color: var(--ff-2-f-00);
			&::before {
				color: var(--white);
			}
		}
	}
	.promo .clear-basket:hover {
		color: var(--ff-2-f-00);
		box-shadow: 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
	}
	.result-box .agree a:hover {
		color: var(--grey-dark);
	}
}