/**
 * Product Cards Equal Height
 * 
 * Ensures all product cards in carousel and grid layouts have equal height
 * Works for both homepage carousel and shop/category archive pages
 * 
 * @package RinnoTools
 */

/* ============================================
   CAROUSEL LAYOUT (Homepage)
   ============================================ */

/* Carousel cell wrapper: Full height flex container */
.block-products-carousel__cell {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Product card: Fill parent cell and use flex column layout */
.block-products-carousel__cell > .product-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Product card info: Allow to grow and push actions to bottom */
.block-products-carousel__cell .product-card__info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Product card actions: Stay at bottom */
.block-products-carousel__cell .product-card__actions {
	margin-top: auto;
	flex-shrink: 0;
}

/* ============================================
   SHOP GRID LAYOUT (Category Archive)
   ============================================ */

/* Products list body: Flex container with stretch alignment for equal height rows */
/* Scoped to shop/category pages only to avoid affecting other carousels */
.products-list__body {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; /* Critical: Makes all items in a row have same height */
}

/* Products list item: Full height flex container that stretches to match row height */
.products-list__item {
	display: flex;
	align-items: stretch; /* Stretch to match tallest item in row */
	/* height: 100% not needed - flex stretch handles it */
}

/* Carousel column wrapper: Full height flex container */
.products-list__item .block-products-carousel__column {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%; /* Ensure it fills the item */
}

/* Block products carousel cell: Full height flex container */
.products-list__item .block-products-carousel__column .block-products-carousel__cell {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Product card in shop grid: Fill parent cell and use flex column layout */
.products-list__item .block-products-carousel__column .block-products-carousel__cell > .product-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Product card info in shop grid: Allow to grow and push actions to bottom */
.products-list__item .product-card__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0; /* Allow flex item to shrink if needed */
}

/* Product card actions in shop grid: Stay at bottom (sticky bottom) */
.products-list__item .product-card__actions {
	margin-top: auto;
	flex-shrink: 0;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

/* Ensure no overflow issues on mobile */
@media (max-width: 767px) {
	.block-products-carousel__cell,
	.products-list__item .block-products-carousel__column {
		min-height: 0; /* Allow flex items to shrink below content size */
	}
	
	/* Prevent horizontal overflow */
	.block-products-carousel__cell > .product-card,
	.products-list__item .block-products-carousel__column > .product-card {
		min-width: 0;
	}
}

/* ============================================
   OWL CAROUSEL SPECIFIC FIXES
   ============================================ */

/* Ensure owl carousel container allows height stretching */
.block-products-carousel .owl-carousel {
	display: flex;
	flex-direction: column;
}

/* Ensure owl-stage-outer allows height stretching */
.block-products-carousel .owl-carousel .owl-stage-outer {
	flex: 1;
	display: flex;
}

.block-products-carousel .owl-carousel .owl-stage {
	display: flex;
	align-items: stretch; /* Make all items same height */
}

/* Owl item: stretch to match tallest item */
.block-products-carousel .owl-carousel .owl-item {
	display: flex;
	align-items: stretch;
	height: auto; /* Let flex handle height */
}

/* ============================================
   COMPATIBILITY: Ensure existing layouts still work
   ============================================ */

/* Don't break horizontal layout */
.block-products-carousel[data-layout="horizontal"] .block-products-carousel__cell {
	height: auto; /* Horizontal layout doesn't need equal height */
}

/* Don't break list layout */
.products-list[data-layout="list"] .products-list__item .block-products-carousel__column {
	height: auto; /* List layout doesn't need equal height */
}