:root {
	--color-offwhite: #f4f4f4;
	--color-main-light: #E8F1E6;
	--color-main-medium: #4A7856;
	--color-main-dark: #264733;
}
body {
	background-color:var(--color-offwhite) ;
	padding-bottom: 10em;
}




.favorite label {
	transition: all 0.3s;
	display: inline-block;
	transform: scale(1,1);
	color: var(--color-neutral-medium);
}

.favorite input:checked + label {
	color:orangered;
	transform: scale(1.5, 1.5);

}









@media (max-width:800px) {
	.container {
		padding-left:1em;
		padding-right:1em;
	}
	.navbar h1 {
		padding-left:0.5em;
	}

	.product-filter-bar {
		flex-direction: column;      
		align-items: flex-start;
	}

	.product-filter-bar > .flex-stretch {
		width: 100%;
		margin-bottom: 0.5em;
	}

	.product-filter-bar >.flex-none {
		align-self: flex-start;
	}

}

.menu-button label { display: none; }
@media (max-width:400px) {
	.navbar .display-flex {
		flex-wrap: wrap;
	}
	.navbar .nav {
		width: 100%;
		display: none;
	}
	.navbar .nav-flex ul {
		display:block;
	}
	.navbar .nav li {
		line-height:2em;
	}
	.menu-button label {
		display: block;
		padding: 0.1em;
	}

	#menu:checked+.navbar .nav {
		display: block;
	}
}



.images-main img{
	width: 100%;
	height: 40vh;
	object-fit: contain;
}
.images-thumbs img {
	width: 8em;
	height: 6em;
	object-fit: contain;
}

span.badge:not(:empty)::after {
	content:')';
}
span.badge:not(:empty)::before {
	content:'(';
}


.figure.product {
	border-radius: 0.5em;
	box-shadow:0 2px 5px rgba(0,0,0,0.1);
	overflow:hidden;
	height: 100%;
	transition: all 0.3s;
}

.productlist .product figcaption {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* -------- Product Cards Align Qty + Add to Cart -------- */

.productlist .product {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
}

.productlist .product figcaption.flex-none {
    flex: 1 1 auto;              
    display: flex;
    flex-direction: column;
}


.productlist .product .product-text {
    margin-bottom: 0.5rem;
    min-height: 3.8rem;          
}


.product.figure img {
	height: 100%;
	object-fit: contain;
}


.productlist a {
	text-decoration:none;
	font-weight:initial;
}

.product-filter-bar .form-button {
	width: auto;
	padding: 0.4em 1.1em;
	border-radius: 2em;
	margin: 0 0.5em 0.5em 0;
	background-color: var(--color-neutral-medium);
	white-space: nowrap;
}

.productlist .product .form-button.inline {
	width:100%;
}

.product-filter-bar .form-select select{
	min-width: 9rem;
}

.product-filter-bar {
	gap: 0.5em;
}

.product.figure:hover {
	box-shadow:0 2px 15px rgba(0,0,0,0.2);
}

.product-overlay {
	position:relative;
	overflow: hidden;
}
.product-overlay figcaption {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	opacity: 0;
	transition: all 0.3s;
	display: flex;
	align-items:center;
	justify-content: center;
}

.product-overlay:hover figcaption {
	opacity: 1;
}

.product-overlay .caption-body {
	background-color: white;
	border-radius: 0.5em;
	padding: 1em;
	transform: translateY(2em);
	transition: all 0.3s;
}

.product-overlay:hover .caption-body{
	transform:translateY(0);
}


.product-overlay img {
	transform: scale(1,1);
	transition: all 0.3s;
}

.product-overlay:hover img{
	transform:scale(1.4,1.4);
}

/* Make Cart Not stacking */
.cart-section {
	align-items: flex-start;
	gap: 1rem;
}

@media (max-width:600px) {
	.product-overlay figcaption {
		position: relative;
		display: block;
		top: initial;
		left: initial;
		width: 100%;
		height: initial;
		opacity: 1;
		background-color: initial;
	}
	.product-overlay .caption-body{
		transform: none;
		padding: 0;
	}

	
       
    .cart-item > .flex-none,
    .cart-item > .flex-stretch {
        width: 100%;
    }
    
    .cart-item-info {
        min-height: auto;
        gap: 0.5em;
    }
    
    .cart-item-price {
        text-align: center;
        margin-top: 1em;
    }
    
    .cart-item img {
        max-width: 80px;
        height: 80px;
        margin: 0 auto;
        object-fit: cover;
        border-radius: 4px;
    }
}