/*
 * Reverie product gallery trigger fix — V1.0.0 (2026-10-14)
 *
 * Defect: Atelier Lumina renders the single product as <article class="product
 * rv-product-layout">, while WooCommerce 11.1.2 core CSS scopes the gallery
 * trigger button to ".woocommerce div.product div.images" (DIV elements only).
 * The selector never matches, so the JS-inserted trigger
 * (.woocommerce-product-gallery__trigger, containing the 🔍 emoji that
 * WordPress wp-emoji swaps for an <img>) renders unstyled: a static inline
 * element stretched to gallery width (~631px), pushing the main product image
 * below the fold.
 *
 * Fix: re-apply the WooCommerce core trigger rules verbatim, mirrored onto the
 * theme's actual markup (article.rv-product-layout instead of div.product),
 * plus position:relative on the gallery container (the theme provides no
 * positioned ancestor; core themes get one from ".woocommerce div.product").
 * Zoom / PhotoSwipe click behaviour is JS-bound and untouched.
 *
 * Source of truth for the four mirrored rule bodies:
 * wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=11.1.2
 */

.woocommerce article.rv-product-layout div.images.woocommerce-product-gallery {
	position: relative;
}

.woocommerce article.rv-product-layout div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	background: #fff;
	border: none;
	box-sizing: content-box;
	border-radius: 100%;
	cursor: pointer;
	font-size: 2em;
	height: 36px;
	padding: 0;
	position: absolute;
	right: .5em;
	text-indent: -9999px;
	top: .5em;
	width: 36px;
	z-index: 99;
}

.woocommerce article.rv-product-layout div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	border: 2px solid #000;
	border-radius: 100%;
	box-sizing: content-box;
	content: "";
	display: block;
	height: 10px;
	left: 9px;
	top: 9px;
	position: absolute;
	width: 10px;
}

.woocommerce article.rv-product-layout div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
	background: #000;
	border-radius: 6px;
	box-sizing: content-box;
	content: "";
	display: block;
	height: 8px;
	left: 22px;
	position: absolute;
	top: 19px;
	transform: rotate(-45deg);
	width: 2px;
}

.woocommerce article.rv-product-layout div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger span[aria-hidden=true] {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	left: 50%;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 1px;
}