/* H4B Lazy Load — layout-shift prevention for lazily loaded images.
 * Version: 1.1.1 | Updated: 2026-07-05
 *
 * v1.1.0 hid img[loading="lazy"] at opacity 0 and tried to reveal with
 * img:not(:empty), which never matches (img elements are always :empty),
 * so every lazily loaded image stayed invisible. Native loading="lazy"
 * needs no opacity handling at all; these rules now only manage layout.
 */

/* Preserve aspect ratio during lazy loading with aspect-ratio CSS */
img[style*="--h4b-image-aspect-ratio"] {
	aspect-ratio: var(--h4b-image-aspect-ratio);
}

/* Alternative for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
	img[style*="--h4b-image-width"] {
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

/* Ensure product gallery images do not get a grey background */
.product-gallery img,
.woocommerce-product-gallery img,
.elementor-image img,
.wp-post-image {
	background-color: transparent !important;
	background: none !important;
}