/* CART ITEM */
/* prefix cart-item */

/* FOR MOBILE */
@media only screen and (max-width: 800px) {
	.cart-item-layout {
		padding-top: 3.5rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.cart-item-list-wrapper {
		gap: 0.5rem;
	}

	.cart-item-list {
		height: 10rem;
		font-size: 10px;
	}

	.cart-item-remove-button > i {
		font-size: 1rem;
		padding-bottom: 0.1rem;
	}
}

/* FOR TABLETS */
@media only screen and (min-width: 800px) {
	.cart-item-layout {
		padding-top: 4rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.cart-item-list-wrapper {
		gap: 1rem;
	}

	.cart-item-list {
		height: 10rem;
		font-size: 10px;
	}

	.cart-item-remove-button > i {
		font-size: 1rem;
		padding-bottom: 0.1rem;
	}
}

/* FOR DESKTOP */
@media only screen and (min-width: 1500px) {
	.cart-item-layout {
		padding-top: 5rem;
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.cart-item-list-wrapper {
		gap: 2rem;
	}

	.cart-item-list {
		height: 12rem;
		font-size: 1.25rem;
	}

	.cart-item-remove-button > i {
		font-size: 1.25rem;
		padding-bottom: 0.1rem;
	}
}

.cart-item-layout {
	width: 100%;
	display: block;
}

.cart-item-list-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.cart-item-left {
	height: 100%;
	display: flex;
	gap: 1rem;
}

.cart-item-list {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background-color: var(--color-secondary);
	color: var(--color-primary);
	border-radius: 0.5rem;
	padding: 0.5rem;
	overflow: hidden;
	box-shadow:
		0px 1.7px 2.2px rgba(0, 0, 0, 0.02),
		0px 4px 5.3px rgba(0, 0, 0, 0.028),
		0px 7.5px 10px rgba(0, 0, 0, 0.035),
		0px 13.4px 17.9px rgba(0, 0, 0, 0.042),
		0px 25.1px 33.4px rgba(0, 0, 0, 0.05),
		0px 60px 80px rgba(0, 0, 0, 0.07);
}

.cart-item-image-wrapper {
	position: relative;
	height: 100%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 0.5rem;
}

.cart-item-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cart-item-details-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-transform: uppercase;
}

.cart-item-details-wrapper > :first-child {
	background-color: var(--color-primary);
	color: var(--color-secondary);
	font-size: 1.25rem;
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	font-weight: bold;
}

.cart-item-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: end;
}

.cart-item-remove-button {
	color: var(--color-primary);
	display: flex;
	gap: 0.25rem;
	align-items: center;
	text-transform: uppercase;
	opacity: 0.5;
	transition: opacity 1s;
}

.cart-item-remove-button:hover {
	opacity: 1;
}

.cart-item-quantity-input-wrapper {
	display: flex;
	flex-direction: column;
	align-items: end;
	text-transform: uppercase;
	gap: 0.25rem;
}

.cart-item-quantity-input {
	background-color: var(--color-primary);
	width: 8rem;
	border-radius: 0.25rem;
	padding-left: 0.5rem;
}

.cart-item-price {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--color-primary);
	color: var(--color-secondary);
	padding: 0.2rem 0.15rem 0.15rem 0.15rem;
	text-align: center;
	font-weight: bold;
	border-top: solid 0.25rem var(--color-secondary);
}