.cart {
	height: calc(100vh - 106px);
	display: none;
	background: var(--color-bg-secondary);
	overflow: auto;
	/* transition-property: opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s; */
}

.cart.opened {
	display: block;
}

.cart h2 {
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--color-text-primary);
}

.cart__content {
	border-bottom: 1px solid #e4e4e4;
	padding-top: 2rem;
	padding-bottom: 4rem;
}

.cart__heading {
	padding-bottom: 2rem;
	display: flex;
	justify-content: flex-end;
}

.cart__item {
	display: grid;
	grid-template-areas: "image title"
						"image price"
						"image total"
						"image ."
						"image ."
						"quantity remove";
    justify-content: flex-start;
    grid-template-columns: 94px 1fr;
	color: var(--color-text-primary);
	grid-column-gap: 12px;
	border-bottom: 1px solid rgb(228, 228, 228);
}

.cart__item-image {
	grid-area: image;
	aspect-ratio: 1 / 1;
    max-width: 120px;
}

.cart__item-title {
	grid-area: title;
	margin-bottom: .5rem;
	font-family: microbrew_oneregular, serif;
}

.cart__item-title a {
	font-size: 1.125rem;
}

.cart__item-variants {
	grid-area: variants;
}

.cart__item-quantity {
	grid-area: quantity;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.cart__item-quantity button {
	transition-property: all;
    transition-duration: .2s;
	font-family: gotham_roundedbook, serif;
	color: var(--color-text-primary);
	min-width: 50px;
}

.cart__item-quantity button:hover {
	color: var(--color-text-secondary);
}

.cart__item-quantity button,
.cart__close {
	cursor: pointer;
	height: 36px;
}

.cart__close {
	font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
	transition-property: all;
	transition-duration: .2s;
}

.cart__close:hover {
	color: var(--color-text-secondary);
}

.cart__item-remove {
	grid-area: remove;
	display: flex;
	justify-content: flex-end;
}

.cart__item-price {
	grid-area: price;
}

.cart__item-total {
	grid-area: total;
}

.cart__item-image img {
	width: 100%;
	height: 100%;
	border: 1px solid rgb(228,228,228);
	object-fit: contain;
}

.cart__subtotal {
	display: flex;
	justify-content: space-between;
	color: var(--color-text-primary);
	align-items: center;
	font-weight: 600;
	font-size: 19px;
}

.cart__subtotal p {
	font-size: 19px;
}

.button__proceed {
	margin-top: .75rem;
	color: var(--color-text-secondary);
}

.cart__to-checkout {
	margin-top: 2rem;
}

.cart__text {
	padding-bottom: 1.5rem;
	font-size: 12px;
}

.cart__item-end {
	padding-top: 1.5rem;
}

.cart__item-remove__logo {
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	border: 1px solid rgb(228,228,228);
	transition-property: all;
	transition-duration: .2s;
}

.cart__item-remove__logo svg {
	transition-property: all;
	transition-duration: .2s;
}

.cart__item-remove button {
	display: flex;
	align-items: center;
	gap: 13px;
	justify-content: flex-end;
	cursor: pointer;
}

.cart__subtotal--small {
	font-size: 17px;
	font-weight: 500;
}

.cart__item-remove button:hover .cart__item-remove__logo {
	border: 1px solid var(--color-text-secondary);
}

.cart__item-remove button:hover svg {
	fill: var(--color-text-secondary);
}

.field input.field__cartInput {
	border: 1px solid rgba(228, 228, 231);
	margin-top: 12px;
	height: 38px;
    padding: 0 10px;
	transition-property: all;
	transition-duration: .2s;
}

.field input.field__cartInput:hover,
.field input.field__cartInput:active,
.field input.field__cartInput:focus {
	border: 1px solid #000;
}

.cart .field {
	margin-bottom: 0;
}

@media(max-width: 1024px) {
	.cart__item {
		margin-bottom: 14px;
	}

	.cart__item-price,
	.cart__item-total {
		display: flex;
		gap: 6px
	}

	.cart__item-price .mobile,
	.cart__item-total .mobile {
		display: block;
	}
}

@media(min-width: 1024px) {
	.cart__heading {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.cart__footer {
		padding-top: 1.5rem;
		display: flex;
		flex-direction: column;
		width: 430px;
		margin-left: auto;
	}

	.cart__item {
		display: grid;
		grid-template-areas: "image title quantity price total remove";
		grid-template-columns: 128px 2fr 125px 175px 100px 100px;
		grid-gap: 30px;
		padding: 1rem 0;
	}

	.cart__item-remove {
		justify-content: center;
	}

	.cart__item-remove button {
		display: flex;
		align-items: center;
		height: fit-content;
	}

	.cart__item-price,
	.cart__item-total {
		text-align: end;
		margin-top: 7px;
	}

	.field input.field__cartInput {
		margin-top: 0;
	}

	.cart__item-quantity {
		flex-direction: row;
		gap: 13px;
		align-items: center;
		height: fit-content;
	}

	.field input.field__cartInput {
		height: 40px;
	}

	.cart__item-headings {
		display: grid;
		grid-template-areas: "image title quantity price total remove";
		grid-template-columns: 128px 2fr 125px 175px 100px 100px;
		grid-gap: 30px;
		border-bottom: 1px solid rgb(228, 228, 228);
		padding-bottom: 1rem;
	}

	.cart__item-headings__quantity {
		grid-area: quantity;
	}

	.cart__item-headings__price {
		grid-area: price;
		text-align: end;
	}

	.cart__item-headings__total {
		grid-area: total;
		text-align: end;
	}

	.cart__item-headings__remove {
		grid-area: remove;
		text-align: center;
	}
}