/* Essential Addons Product Grid Fixes - Compact & Aligned */

/* 1. Reset card sizes - let content dictate height */
.eael-product-grid .eael-product-wrap {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important; 
	min-height: auto !important;
	padding-bottom: 15px !important; /* 12-15px bottom space */
	margin-bottom: 0 !important;
}

/* 2. Fixed Image Area with object-fit */
.eael-product-grid .eael-product-wrap .image-wrap {
	height: 220px !important; /* Slightly smaller fixed height for image area to be more compact */
	display: flex !important;
	align-items: center !important; 
	justify-content: center !important; 
	overflow: hidden !important;
	margin-bottom: 0 !important;
}

.eael-product-grid .eael-product-wrap .image-wrap img {
	max-height: 100% !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important; 
}

/* 3. Product Details Wrapper - Flex block that fills the bottom and aligns the button */
.eael-product-grid .eael-product-wrap .product-details-wrap {
	display: flex !important; 
	flex-direction: column !important;
	flex: 1 1 auto !important; /* Allow it to grow to fill space */
	padding-top: 15px !important; 
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* 4. Title adjustments - clamp to 3 lines but let it grow to fill empty space so button stays at bottom */
.eael-product-grid .eael-product-wrap .eael-product-title {
	margin-top: 0 !important;
	margin-bottom: 15px !important; /* Space under the title */
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	flex: 1 1 auto !important; /* This pushes the button down consistently across all cards */
}

/* 5. Button Placement - Fixed space */
.eael-product-grid .eael-product-wrap .eael-product-button,
.eael-product-grid .eael-product-wrap .button.add_to_cart_button,
.eael-product-grid .eael-product-wrap .added_to_cart {
	display: inline-block !important;
	width: 100% !important; 
	margin-top: 0 !important; /* Margin handled by title bottom margin or flex */
	margin-bottom: 0 !important;
	align-self: flex-end !important;
}