.cart-grid-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 20px;

	@include mobile {
		padding: 0 16px;
	}

	@include desktop {
		align-self: center;
		gap: 40px;
		grid-template-columns: 1fr 297px;
		align-items: flex-start;
		margin-top: 30px;
		width: calc(100% - 32px);
		max-width: $width-desktop;
	}
}

.cart-grid-section__list {
	display: flex;
	flex-flow: column;
}

.cart-grid-section__item {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	gap: 10px 20px;
	grid-template-areas:
		'name name name name cover cover'
		'inf inf inf inf cover cover'
		'price price price price cover cover'
		'swap swap swap control control control';

	@include desktop {
		grid-template-columns: 188px 1fr 1fr 1fr 1fr 1fr 194px;
		gap: 12px 20px;
		grid-template-areas:
			'cover name name name name price control'
			'cover inf inf inf inf price control'
			'cover swap swap swap swap price control';
	}

	&:not(:last-child) {
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid $color-border;

		@include desktop {
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
	}
}

.cart-grid-section__item-cover {
	grid-area: cover;
	align-self: center;
	width: 100%;
	aspect-ratio: 19 / 16;
	margin-left: auto;
	border-radius: 18px;
	background-color: $color-surface;

	@include desktop {
		aspect-ratio: 94 / 71;
	}

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

.cart-grid-section__item-name {
	grid-area: name;
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;

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

.cart-grid-section__item-inf {
	grid-area: inf;
	font-size: 12px;
	line-height: 14px;
	color: $color-gray-md;

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

.cart-grid-section__item-price {
	grid-area: price;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	@include desktop {
		flex-flow: column;
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
	}

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

		@include desktop {
			font-size: 20px;
		}
	}

	&-discount {
		position: relative;
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background-position: center;
			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.113009' y1='13.487' x2='56.113' y2='0.487042' stroke='%23ED0A34'/%3E%3C/svg%3E");
		}

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

.cart-grid-section__item-swap {
	grid-area: swap;
	display: flex;
	align-items: center;

	.input-tumbler {
		gap: 6px;

		@include desktop {
			gap: 10px;
		}
	}

	.input-tumbler__text {
		font-size: 14px;
		line-height: 16px;

		@include desktop {
			font-weight: 500;
			font-size: 16px;
			line-height: 18px;
		}
	}
}

.cart-grid-section__item-control {
	grid-area: control;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	@include desktop {
		gap: 10px;
	}
}

.cart-grid-section__item-control-count {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	height: 48px;
	border-radius: 14px;
	background-color: $color-surface;
	box-sizing: border-box;

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

.cart-grid-section__item-control-count__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: $color-gray-low;
	padding: 0 14px;

	@include desktop {
		padding: 0 20px;
	}

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

.cart-grid-section__item-control-count__value {
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;

	@include desktop {
		margin: 0 -4px;
		font-size: 16px;
		line-height: 18px;
	}
}

.cart-grid-section__item-control-delete-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background-color: $color-surface;

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

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

.cart-grid-section__block {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding: 18px;
	border-radius: 28px;
	background-color: $color-surface;

	@include desktop {
		position: sticky;
		top: 100px;
		padding: 24px;
		border-radius: 32px;
	}
}

.cart-grid-section__block__sum {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		gap: 16px;
	}

	span {
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

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

	b {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 28px;
		}
	}
}

.cart-grid-section__block__total {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		gap: 12px;
	}

	li {
		display: flex;
		flex-flow: row nowrap;
		gap: 6px;
		font-size: 14px;
		line-height: 16px;

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

		&::before {
			content: '';
			order: -1;
			flex: 1;
			height: 16px;
			border-bottom: 1px dashed $color-border;

			@include desktop {
				height: 18px;
			}
		}

		span:nth-child(1) {
			order: -2;
			color: $color-gray-md;
		}
	}
}

.cart-grid-section__block__input {
	position: relative;

	input {
		width: 100%;
		height: 48px;
		padding: 0px 14px;
		border-radius: 14px;
		background-color: $color-white;
		font-size: 14px;
		box-sizing: border-box;

		&::placeholder {
			color: $color-gray-md;
		}

		@include desktop {
			height: 54px;
			padding: 0px 16px;
			border-radius: 16px;
			font-size: 16px;
		}
	}

	&.applied {
		input {
			padding-left: calc(14px + 24px + 10px);
			background-position: left 14px center;
			background-size: 24px;
			background-repeat: no-repeat;
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75ZM16.48 9.37756C16.9645 9.11257 17.1425 8.50493 16.8775 8.02038C16.6125 7.53582 16.0049 7.35782 15.5204 7.62282C13.6917 8.62286 12.1796 10.5529 11.1629 12.1096C10.7872 12.685 10.4662 13.2297 10.2094 13.6911C9.96984 13.4587 9.73258 13.257 9.52038 13.0892C9.2427 12.8697 8.99282 12.6965 8.81063 12.5772L8.49559 12.3815C8.01585 12.1079 7.40513 12.275 7.13152 12.7548C6.85797 13.2344 7.02493 13.8449 7.50442 14.1187L7.71471 14.2502C7.85752 14.3437 8.05764 14.4823 8.27997 14.6581C8.73753 15.0198 9.23126 15.494 9.54198 16.0135C9.73267 16.3323 10.0844 16.5191 10.4553 16.4987C10.8261 16.4782 11.1551 16.2536 11.3096 15.9159L11.4079 15.7105C11.4756 15.5721 11.577 15.3697 11.709 15.1204C11.9735 14.6207 12.3581 13.9372 12.8374 13.2032C13.8208 11.6975 15.1086 10.1275 16.48 9.37756Z' fill='%231F895B'/%3E%3C/svg%3E");

			@include desktop {
				padding-left: calc(16px + 24px + 10px);
			}
		}
	}
	&.error {
		input {
			color: $color-error-primary;
		}
	}

	&:not(.error) {
		.cart-grid-section__block__input-error {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.cart-grid-section__block__input-apply-btn {
	position: absolute;
	top: 50%;
	right: 14px;
	font-size: 14px;
	font-weight: 500;
	color: $color-green;
	transform: translateY(-50%);

	@include desktop {
		right: 16px;
		font-size: 16px;
	}
}

.cart-grid-section__block__input-clear-btn {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 24px;
	height: 24px;
	color: $color-gray-low;
	transform: translateY(-50%);

	@include desktop {
		right: 16px;
	}

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

.cart-grid-section__block__input-error {
	position: absolute;
	top: -100%;
	left: 50%;
	padding: 6px 10px;
	border-radius: calc(28px / 2);
	background-color: $color-error-primary;
	transform: translateX(-50%) translateY(100%);
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	color: $color-white;
	white-space: nowrap;
	z-index: 2;
	transition:
		visibility 0.3s ease,
		opacity 0.3s ease;

	&::before {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		width: 16px;
		height: 11px;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg width='16' height='11' viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.79443 10.5L0.000203097 4.3915e-07L15.5887 1.80194e-06L7.79443 10.5Z' fill='%23ED0A34'/%3E%3C/svg%3E");
		transform: translateX(-50%);
	}
}

.cart-grid-section__block__submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 18px;
	min-height: 54px;
	border-radius: 14px;
	background-color: $color-green;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 18px;
	color: $color-white;
	font-weight: 500;

	&:disabled {
		opacity: 30%;
		pointer-events: none;
	}

	@include desktop {
		min-height: 64px;
		padding: 0px 24px;
		border-radius: 16px;
		font-size: 18px;
		line-height: 21px;

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

.cart-grid-section__list-empty {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	border-radius: 28px;
	border: 1px solid $color-border;
	box-sizing: border-box;

	@include desktop {
		gap: 16px;
		padding: 50px;
		border-radius: 32px;
		align-self: stretch;
	}
}

.cart-grid-section__list-empty__icon {
	width: 42px;
	height: 42px;
	color: $color-green;
}

.cart-grid-section__list-empty__main {
	display: flex;
	flex-flow: column;
	gap: 4px;

	@include desktop {
		gap: 6px;
	}
}

.cart-grid-section__list-empty__title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 32px;
	}
}

.cart-grid-section__list-empty__desc {
	font-size: 14px;
	line-height: 150%;
	text-align: center;

	@include desktop {
		font-size: 16px;
	}
}

.cart-grid-section__list-empty__link-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0px 18px;
	border-radius: 14px;
	background-color: $color-green;
	font-weight: 500;
	font-size: 16px;
	line-height: 18px;
	color: $color-white;

	@include desktop {
		min-height: 64px;
		padding: 0px 24px;
		border-radius: 16px;
		font-size: 18px;
		line-height: 21px;

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