/*.................SHOPPING CART ...............*/

/* Style for the shopping cart */
.shopping-cart {
    width: 100%;
    padding: 3.0rem 0 3.0rem 0;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
	background-color: transparent;
}
	
/* Style for empty cart message */
.empty-cart-message {
	text-align: center;
	display: none;		
    justify-content: center;
    align-items: center;
	color: var(--redcolor);
	margin-bottom: 3.0rem;
}

/* Style for each item in the cart */
.shopping-cart .cart-item {
    width:100%;
	position: relative;
	display: flex;
    align-items: top; 
    border-bottom: 0.1rem solid var(--lightgreycolor);
    padding: 1.0rem;
}

/* Style for item details container */
.shopping-cart .item-image-container {
   	position:relative;	
	padding: 0rem;
}
	
/* Style for item image */
.shopping-cart .item-image {
    max-width:15rem;
	height: auto;						/* Maintain aspect ratio */
    padding: 0rem;
}

/* Style for item details container */
.shopping-cart .item-details-container {
   	margin-left: 1rem;
	padding: 0rem;
	position:relative;	
	flex-grow: 1;						/* Allow the container to grow and fill the available space */
}

/* Style for item header */
.shopping-cart .item-header {
    display: flex;
    justify-content: space-between;
	padding: 1.0rem 0 0 0; 
}
	
/* Style for item name */
.shopping-cart .item-description {
    padding-top: 0.5rem; 
}

/* Style for the delete button */
.shopping-cart .delete-button {
	float: right;
	font-size: clamp(1.2rem, 2vw, 1.4rem); /* matches .h4 style */
	font-family: Rubik-Light, sans-serif;
	font-weight: 300;
	background-color: transparent;
    display: flex;
    justify-content: center;
	align-items: center;
	width:2.3rem;
	height:2.3rem;
	border: 0.1rem solid var(--lightgreycolor);
	border-radius: 0.3rem;
	color: var(--darkgreycolor);
    cursor: pointer;
}

/* Style for the product ID */
.shopping-cart .product-id {
    align-items: center;   
    display: flex;                
	padding: 0.5rem 0 0 0; 
}

.item-details-container .unit-price-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem; /* space between label and value */
	margin-bottom: 0.6rem; /* spacing below the row */
}

.item-details-container .unit-price-row .price-label,
.item-details-container .unit-price-row .item-price {
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	font-family: Rubik-Light, sans-serif;
	color: var(--darkgreycolor);
	font-weight: 300;
}

/* Style for the quantity label*/
.shopping-cart .quantity-label {
    display: flex;
    align-items: center;
	padding: 1.0rem 0 0 0; 
}

/* Style for the quantity control */
.shopping-cart .quantity-control {
	display: flex;
    align-items: center;
	padding: 0.5rem 0 0 0; 
}

/* Style for the quantity display*/
.shopping-cart .quantity-display {
    padding: 0 1.5rem; 
}
	
/* Style for the quantity buttons */
.shopping-cart .quantity-button {
    display: flex;
   	font-size: clamp(1.2rem, 2vw, 1.4rem); /* matches .h4 style */
	font-family: Rubik-Light, sans-serif;
	font-weight: 300;
	justify-content: center;
	align-items: center;
	width:2.3rem;
	height:2.3rem;
	border: 0.1rem solid var(--lightgreycolor);
    border-radius: 0.3rem;
	background-color: transparent;
    cursor: pointer;
}

/* Style for the delete, quantity buttons */
.shopping-cart .quantity-button:hover,
.shopping-cart .delete-button:hover { 
	border: 0.1rem solid var(--lightbluecolor);
}

/* Subtotal row */	
.item-details-container .subtotal-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start; 
	gap: 0.5rem; /* optional space between label and value */
	margin-top: 1rem;
}

.item-details-container .subtotal-row .subtotal-label,
.item-details-container .subtotal-row .subtotal {
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	font-family: Rubik-Light, sans-serif;
	color: var(--darkgreycolor);
	font-weight: 300;
	margin: 0;           /* ensure no extra margin */
}

/* Style for the summary div */
.shopping-cart .summary {
    display: flex;
    align-items: center;
	flex-direction: column;
	padding: 1rem;
    border-bottom-left-radius: 0.5rem; 
	border-bottom-right-radius: 0.5rem; 
}
	
/* Style for the total price */
.shopping-cart .total-price {
    margin-top: 0.5rem;
}

/* Style for the checkout button */
.shopping-cart .summary .checkout-button {
	width: 100%;
	max-width: 40rem;
	margin-top: 1.5rem;
}

/* Style for the error message */
.shopping-cart .cart-error-message {
   	display:flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
}

/* Style for cart image, screen size dependent */
@media (max-width: 60rem) {
	.shopping-cart .item-image {
        max-width:6rem;
	}
}