/*
 * WooCommerce Product Initial Avatars v4.2
 * Structural styles only.
 * Appearance values are injected from plugin settings.
 */

.wcpia-avatar {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	overflow: hidden;
	box-sizing: border-box !important;
	vertical-align: middle;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	aspect-ratio: 1 / 1;
}

.wcpia-avatar__initials {
	display: inline-block;
	max-width: 100%;
	line-height: 1 !important;
	white-space: nowrap;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	pointer-events: auto;
}

.woocommerce ul.products li.product .wcpia-avatar--catalog,
.woocommerce-page ul.products li.product .wcpia-avatar--catalog,
.wc-block-grid__product .wcpia-avatar,
.wc-block-components-product-image .wcpia-avatar,
.wp-block-woocommerce-product-image .wcpia-avatar {
	display: flex !important;
	margin-left: auto;
	margin-right: auto;
}

.wc-block-components-product-image > a .wcpia-avatar,
.wp-block-woocommerce-product-image > a .wcpia-avatar {
	margin-left: auto;
	margin-right: auto;
}

.wcpia-avatar--cart {
	display: inline-flex !important;
	max-width: 100%;
}

.wcpia-single-product-avatar-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wcpia-size, 120px);
}

.wcpia-single-product-avatar-wrap .wcpia-avatar {
	margin: 0 auto;
}

/*
 * JS fallback marker.
 */
.wcpia-avatar--js-fallback {
	display: inline-flex !important;
}


/* ==========================================================
 * WoodMart compatibility - v4.3
 * ========================================================== */

/*
 * Keep WoodMart's placeholder image in the document so its grid/image
 * sizing remains intact, but do not show it visually.
 */
.wd-product .product-image-link .wcpia-hidden-placeholder {
	visibility: hidden !important;
	opacity: 0 !important;
}

/*
 * The existing WoodMart product-image link becomes the positioning
 * context for the avatar.
 */
.wd-product .product-image-link.wcpia-woodmart-image-link {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/*
 * Put the avatar in the centre of the same image area.
 * It stays 120x120 (or the configured size), rather than being stretched
 * to WoodMart's 430x430 source-image dimensions.
 */
.wd-product .product-image-link .wcpia-avatar--woodmart {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 2 !important;
	margin: 0 !important;
}

/*
 * Make sure WoodMart hover transforms do not make the avatar itself
 * disappear.
 */
.wd-product:hover .product-image-link .wcpia-avatar--woodmart,
.wd-product .product-image-link:hover .wcpia-avatar--woodmart {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Generic fallback keeps the original placeholder for layout too. */
.wcpia-generic-image-container {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wcpia-generic-image-container > .wcpia-avatar--generic-fallback {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 2 !important;
	margin: 0 !important;
}