/* Loop overlay: bottom-right of the product image, stacked upward. */
.wc-pil-wrap {
	position: relative;
	display: block;
}

/* Elementor Image widget: shrink the wrapper to the image so "bottom-right" means the image, not the column. */
.wc-pil-wrap--inline {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	line-height: 0;
}

.wc-pil-badges {
	position: absolute;
	right: 4px;
	bottom: 4px;
	z-index: 2;
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
	width: var(--wc-pil-size, clamp(32px, 30%, 200px));
	pointer-events: none;
}

/* ponytail: !important because theme/WooCommerce loop rules (e.g. ".woocommerce ul.products li.product a img")
   also match badge images and would force them to 100% width with a bottom margin. */
.wc-pil-badges img,
.wc-pil-inline img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Inline row: shortcode + Elementor widget. */
.wc-pil-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	vertical-align: middle;
}

.wc-pil-inline img {
	width: var(--wc-pil-inline-size, 64px) !important;
}