.elementor-widget-pp-woo-product-images {
	// The sale badge is absolutely positioned by WooCommerce, which anchors it
	// to `.woocommerce div.product`. That is the whole product layout, and it
	// does not exist at all outside a product page, so the badge has to be
	// anchored to the widget instead.
	position: relative;

	.woocommerce-product-gallery {
		opacity: 1 !important;
	}

	.woocommerce-product-gallery__trigger + .woocommerce-product-gallery__wrapper {
		overflow: hidden;
	}
}

// The selector list has to stay this specific to outweigh
// `body.woocommerce #content div.product div.images` in WooCommerce's own CSS.
body.woocommerce #content div.product .elementor-widget-pp-woo-product-images div.images,
body.woocommerce div.product .elementor-widget-pp-woo-product-images div.images,
body.woocommerce-page #content div.product .elementor-widget-pp-woo-product-images div.images,
body.woocommerce-page div.product .elementor-widget-pp-woo-product-images div.images,
.elementor-widget-pp-woo-product-images div.images {
	float: none;
	width: 100%;
	padding: 0;
}

.woocommerce .elementor-widget-pp-woo-product-images span.onsale,
.elementor-widget-pp-woo-product-images span.onsale {
	position: absolute;
	z-index: 9;
	top: -.5em;
	left: -.5em;
	min-width: 3.236em;
	min-height: 3.236em;
	margin: 0;
	padding: 0;
	border-radius: 100%;
	background-color: #77a464;
	color: #fff;
	font-size: .857em;
	font-weight: 700;
	line-height: 3.236;
	text-align: center;
}
