.cart-wrapper{
	--gap: 12px 16px;
	--image-width: 72px;
	--quantity-width: 110px;
	--price-width: 200px;
	--remove-width: 100px;
	--layout: var(--image-width) 1fr var(--quantity-width) var(--price-width) var(--remove-width);

	margin: 32px 0 40px;
	border-top: 1px solid var(--gray-400);

	@media (max-width: 991px){
		--layout: var(--image-width) 1fr auto;
	}

	@media (max-width: 575px){
		margin-top: 16px;
		--layout: var(--image-width) 1fr;
	}

	&.overview{
		border-bottom: 1px solid var(--gray-400);

		@media (min-width: 992px){
			--layout: var(--image-width) 1fr var(--quantity-width) var(--price-width);
		}
	}

	.cart-product{
		display: grid;
		grid-template-columns: var(--layout);
		align-items: center;
		gap: var(--gap);
		padding: 16px 0;
		border-bottom: 1px solid var(--gray-400);
	}

	.title{
		margin: 0 0 6px;
		font-weight: 500;
	}

	.metas{
		display: grid;
		grid-template-columns: 104px 1fr;
		font-size: 14px;
		line-height: 1.5714;

		.label{
			color: var(--gray-700);
		}
	}

	.price{
		color: var(--gray-900);
	}

	.cart-product-image{
		@media (max-width: 575px){
			grid-area: 1 / 1 / 2 / 2;
			align-self: center;
		}

		img{
			width: var(--image-width);
			aspect-ratio: 1;
			object-fit: contain;
			border: 1px solid var(--gray-400);
		}
	}
	.cart-product-quantity{
		display: flex;
		align-items: flex-start;

		@media (max-width: 991px){
			grid-row: 2;
			grid-column: 2 / 3;
		}
	}
	.cart-product-totals{
		text-align: right;

		@media (max-width: 991px){
			grid-row: 2;
			grid-column: 3 / 4;
		}

		@media (max-width: 575px){
			grid-area: 3 / 2 / 4 / 3;
			text-align: left;
		}

		.price{
			font-size: 16px;
		}
	}
	a.cart-product-remove{
		justify-self: end;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		aspect-ratio: 1;
		background: var(--gray-300);
		border-radius: 50%;

		@media (max-width: 575px){
			grid-area: 1 / 1 / 2 / 2;
			align-self: flex-start;
			justify-self: flex-start;
		}

		&::before{
			--icon: url(../images/trash.svg);
			content: '';
			width: 50%;
			aspect-ratio: 1;
			-webkit-mask: var(--icon) no-repeat center/contain;
			mask: var(--icon) no-repeat center/contain;
			background: currentColor;
		}

		&:hover{
			background-color: var(--red-500);
			color: #fff;
		}
	}
}

.cart-totals{
	display: grid;
	grid-template-columns: var(--layout);
	align-items: center;
	gap: var(--gap);
	padding: 24px 0;
	border-bottom: 1px solid var(--gray-400);

	@media (max-width: 575px){
		--layout: 1fr auto;
	}

	.cart-totals-label{
		grid-column: span 3;

		@media (max-width: 991px){
			grid-column: span 2;
		}

		@media (max-width: 575px){
			grid-column: span 1;
		}
	}

	.cart-totals-value{
		text-align: right;
	}
}

.cart-coupon{
	.coupon-form-trigger{
		padding: 24px 0;
		border-bottom: 1px solid var(--gray-400);
		color: var(--gray-700);

		a{
			color: var(--gray-900);

			&:not(:hover){
				text-decoration: none;
			}
		}
	}
}

.coupon-form-wrapper{
	position: relative;

	input{
		width: 100%;
		height: 64px;
		margin: -1px 0 0;
		padding: 2px 20px;
		background: none;
		border: 1px solid var(--gray-700);
		border-radius: 0;
	}

	button{
		position: absolute;
		z-index: 1;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);

		@media (max-width: 575px){
			position: static;
			transform: none;
			margin: 12px 0 0;
		}
	}
}

.checkout-inner{
	margin: 32px 0 40px;
	padding: 32px 0;
	border: 1px solid var(--gray-400);
	border-width: 1px 0;

	@media (max-width: 575px){
		margin-top: 16px;
		padding: 24px 0;
	}

	h3:not(:first-child){
		margin: 40px 0 12px;
	}

	.floating-label{
		margin-top: 12px;

		& + .floating-label{
			margin-top: 24px;
		}
	}
}

.radio-boxes{
	display: flex;
	flex-direction: column;
	gap: 16px;

	.text{
		margin: -1px 0 0;
	}

	label{
		cursor: pointer;
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
		background: var(--gray-200);
		border: 1px solid var(--gray-400);
		border-radius: 4px;

		&:has(input:checked){
			border-color: var(--gray-900);
		}
	}

	input{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		background: #fff;
		border: 1px solid var(--gray-700);
		border-radius: 2px;

		&:checked{
			border-color: var(--gray-900);
			background-color: var(--gray-900);
			background-image: url(../images/checked.svg);
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}