/* Healthera category morph hover overlay.
   Targets category cards from:
   - Woo Category Slider/Grid:  .sp-wcsp-cat-item
   - VC / WooCommerce product categories:  ul.products li.product-category
*/

.sp-wcsp-cat-item,
ul.products li.product-category {
	position: relative;
}

.hea-morph-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45%;
	max-width: 150px;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%) scale(0.96);
	transform-origin: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	pointer-events: none;
	z-index: 5;
}

/* WooCommerce category cards: match the slider's rendered SVG size (~144px).
   The image width equals the card width, so this % is effectively a % of the image.
   Vertical/horizontal centering on the image itself is handled in morph.js. */
ul.products li.product-category .hea-morph-wrap {
	width: 62%;
	max-width: 150px;
}

.hea-morph-wrap svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.hea-morph-shape {
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
}

.sp-wcsp-cat-item:hover .hea-morph-wrap,
ul.products li.product-category:hover .hea-morph-wrap {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.hea-morph-wrap {
		transition: none;
	}
}