/**
 * Global Zone — Uniform WooCommerce product cards (archives / grids)
 *
 * Display-only layout normalization:
 * - Equal card height within rows
 * - Fixed image viewport + object-fit: contain (no crop / stretch / media edits)
 * - Stable title / price / action baselines
 *
 * Does NOT modify product data, prices, images, galleries, SEO, or AI OS.
 * Does NOT affect single-product gallery, datasheet modal, blog, or non-product cards.
 */

/* -------------------------------------------------------------------------
   Scope: shop grids + carousels only (not list views, not single gallery)
   ------------------------------------------------------------------------- */

ul.products[data-view="grid"] > li.product,
ul.products[data-view="grid-extended"] > li.product,
ul.products:not([data-view]) > li.product,
.owl-carousel .owl-item > .product,
ul.products > li.product-card {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: auto;
	min-height: 100%;
}

ul.products[data-view="grid"] > li.product > .product-outer,
ul.products[data-view="grid-extended"] > li.product > .product-outer,
ul.products:not([data-view]) > li.product > .product-outer,
.owl-carousel .owl-item > .product > .product-outer,
ul.products > li.product-card > .product-outer {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

ul.products[data-view="grid"] > li.product .product-inner,
ul.products[data-view="grid-extended"] > li.product .product-inner,
ul.products:not([data-view]) > li.product .product-inner,
.owl-carousel .owl-item > .product .product-inner,
ul.products > li.product-card .product-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	min-height: 100%;
	width: 100%;
}

/* Header grows naturally; footer pinned to bottom */
ul.products[data-view="grid"] > li.product .product-loop-header,
ul.products[data-view="grid-extended"] > li.product .product-loop-header,
ul.products:not([data-view]) > li.product .product-loop-header,
.owl-carousel .owl-item > .product .product-loop-header {
	flex: 0 0 auto;
	width: 100%;
}

ul.products[data-view="grid"] > li.product .product-loop-footer,
ul.products[data-view="grid-extended"] > li.product .product-loop-footer,
ul.products:not([data-view]) > li.product .product-loop-footer,
.owl-carousel .owl-item > .product .product-loop-footer,
ul.products > li.product-card .card-body,
ul.products > li.product-card .price-add-to-cart {
	margin-top: auto;
	width: 100%;
}

/* Product-card view (Electro alternate template) */
ul.products > li.product-card .card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

ul.products > li.product-card .card-body-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}

/* -------------------------------------------------------------------------
   Image viewport — identical frame; image fully visible (contain)
   ------------------------------------------------------------------------- */

ul.products[data-view="grid"] > li.product .product-thumbnail,
ul.products[data-view="grid-extended"] > li.product .product-thumbnail,
ul.products:not([data-view]) > li.product .product-thumbnail,
.owl-carousel .owl-item > .product .product-thumbnail,
ul.products > li.product-card .product-thumbnail,
ul.products > li.product-card .media-body,
ul.products > li.product-card .media > a {
	height: 200px;
	min-height: 200px;
	max-height: 200px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

ul.products[data-view="grid"] > li.product .product-thumbnail > img,
ul.products[data-view="grid"] > li.product .product-thumbnail .wp-post-image,
ul.products[data-view="grid-extended"] > li.product .product-thumbnail > img,
ul.products[data-view="grid-extended"] > li.product .product-thumbnail .wp-post-image,
ul.products:not([data-view]) > li.product .product-thumbnail > img,
ul.products:not([data-view]) > li.product .product-thumbnail .wp-post-image,
.owl-carousel .owl-item > .product .product-thumbnail > img,
.owl-carousel .owl-item > .product .product-thumbnail .wp-post-image,
ul.products > li.product-card .product-thumbnail > img,
ul.products > li.product-card .product-thumbnail .wp-post-image,
ul.products > li.product-card .media img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	margin: 0 auto !important;
	display: block;
}

/* Sale badge stays inside the fixed viewport without changing card height */
ul.products[data-view="grid"] > li.product .product-thumbnail .onsale,
ul.products[data-view="grid-extended"] > li.product .product-thumbnail .onsale,
ul.products:not([data-view]) > li.product .product-thumbnail .onsale,
.owl-carousel .owl-item > .product .product-thumbnail .onsale {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Title area — keep Electro 2-line height; add clamp for clean ellipsis
   ------------------------------------------------------------------------- */

ul.products[data-view="grid"] > li.product .product-loop-header .woocommerce-loop-product__title,
ul.products[data-view="grid"] > li.product .product-loop-header h2.woocommerce-loop-product__title,
ul.products[data-view="grid-extended"] > li.product .product-loop-body .woocommerce-loop-product__title,
ul.products:not([data-view]) > li.product .product-loop-header .woocommerce-loop-product__title,
.owl-carousel .owl-item > .product .product-loop-header .woocommerce-loop-product__title,
ul.products > li.product-card .woocommerce-loop-product__title,
ul.products > li.product-card .card-body .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Electro already sets height ≈ 2 lines; reinforce min-height for alignment */
	min-height: 2.57144em;
	max-height: 2.57144em;
	line-height: 1.28572em;
	box-sizing: content-box;
}

@media (max-width: 991.98px) {
	ul.products[data-view="grid"] > li.product .product-loop-header .woocommerce-loop-product__title,
	ul.products[data-view="grid"] > li.product .product-loop-header h2.woocommerce-loop-product__title,
	ul.products[data-view="grid-extended"] > li.product .product-loop-body .woocommerce-loop-product__title,
	ul.products:not([data-view]) > li.product .product-loop-header .woocommerce-loop-product__title,
	.owl-carousel .owl-item > .product .product-loop-header .woocommerce-loop-product__title,
	ul.products > li.product-card .woocommerce-loop-product__title {
		min-height: 2.334em;
		max-height: 2.334em;
		line-height: 1.167em;
	}
}

/* -------------------------------------------------------------------------
   Price / action baseline
   ------------------------------------------------------------------------- */

ul.products[data-view="grid"] > li.product .price-add-to-cart,
ul.products[data-view="grid-extended"] > li.product .price-add-to-cart,
ul.products:not([data-view]) > li.product .price-add-to-cart,
.owl-carousel .owl-item > .product .price-add-to-cart,
ul.products > li.product-card .price-add-to-cart {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 2.75em;
	height: auto;
	width: 100%;
	box-sizing: border-box;
}

ul.products[data-view="grid"] > li.product .price-add-to-cart .price,
ul.products[data-view="grid-extended"] > li.product .price-add-to-cart .price,
ul.products:not([data-view]) > li.product .price-add-to-cart .price,
.owl-carousel .owl-item > .product .price-add-to-cart .price,
ul.products > li.product-card .price-add-to-cart .price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 2.5em;
	margin: 0;
}

ul.products[data-view="grid"] > li.product .price-add-to-cart .electro-price,
ul.products[data-view="grid-extended"] > li.product .price-add-to-cart .electro-price,
ul.products:not([data-view]) > li.product .price-add-to-cart .electro-price,
.owl-carousel .owl-item > .product .price-add-to-cart .electro-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em 0.35em;
	min-height: 1.4em;
}

/* -------------------------------------------------------------------------
   Responsive viewport heights (avoid oversized empty space on mobile)
   ------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	ul.products[data-view="grid"] > li.product .product-thumbnail,
	ul.products[data-view="grid-extended"] > li.product .product-thumbnail,
	ul.products:not([data-view]) > li.product .product-thumbnail,
	.owl-carousel .owl-item > .product .product-thumbnail,
	ul.products > li.product-card .product-thumbnail,
	ul.products > li.product-card .media-body,
	ul.products > li.product-card .media > a {
		height: 150px;
		min-height: 150px;
		max-height: 150px;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	ul.products[data-view="grid"] > li.product .product-thumbnail,
	ul.products[data-view="grid-extended"] > li.product .product-thumbnail,
	ul.products:not([data-view]) > li.product .product-thumbnail,
	.owl-carousel .owl-item > .product .product-thumbnail,
	ul.products > li.product-card .product-thumbnail,
	ul.products > li.product-card .media-body,
	ul.products > li.product-card .media > a {
		height: 180px;
		min-height: 180px;
		max-height: 180px;
	}
}

/* List / list-small views keep Electro defaults (description-driven layout) */
ul.products[data-view="list-view"] > li.product .product-thumbnail,
ul.products[data-view="list-view-small"] > li.product .product-thumbnail {
	height: auto;
	min-height: 0;
	max-height: none;
	display: block;
}

ul.products[data-view="list-view"] > li.product .product-thumbnail > img,
ul.products[data-view="list-view-small"] > li.product .product-thumbnail > img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}