/* Exhibit RSGDX — custom-product-gallery.css — v6
   v6: image gallery rebuilt as a masonry layout (center image + up to 2
   thumbnails each side; anything beyond that renders in a row below the
   masonry, no popup/lightbox) with a separate swipeable one-image slider
   for mobile, replacing the side-by-side main+thumbnail-row layout from
   v2–v5. See product-gallery.php v5 for the matching markup.
   v5: header no longer uses margin-top to pop above the panel (margin
   collapse behaves oddly with the header's own children in some contexts)
   — switched to position:relative + top:-20px instead, same visual
   result. Added a stock-availability line style under the price.
   v4: rebuilt to match product-gallery.php v3's explicit structure —
   container (no background) > panel (#222222 background) > notch (absolute
   body-color strip along the left edge, the "image looks like it breaks
   out of the panel" detail) + header (title/price, popped above the panel
   via negative margin) + images (stays inside the panel this time — no
   break-out positioning on the images themselves). Images no longer carry
   a background color; they use a fixed height + object-fit: cover instead
   of aspect-ratio + object-fit: contain, per spec.
   Scoped to #exhibitrsgdx-product-gallery with an ID anchor — same
   specificity strategy as #exhibitrsgdx-store and #exhibitrsgdx-product-
   specs — so this wins over Astra/WooCommerce class-only selectors without
   needing !important, except in the legacy-float block below which
   targets WooCommerce's own classes outside our wrapper and needs it.
   v1–v3 history (colors/specificity/side-by-side/sizing fixes) — see
   version-logs.md, this file's structure has since moved on from those. */

/* ============================================================
   NEUTRALIZE LEGACY WOOCOMMERCE CLASSIC FLOAT LAYOUT
   div.images no longer exists (this gallery replaces it), so the classic
   theme rule that floats div.summary to 48% expecting a 48% div.images
   beside it needs to be turned off on product pages — otherwise
   div.summary floats and leaves a large blank gap where div.images used
   to be. Scoped to body.single-product so it can't affect anything else.
   ============================================================ */

body.single-product div.summary.entry-summary {
	float: none !important;
	width: auto !important;
	clear: both;
}

/* ============================================================
   RESET — scoped, same as #exhibitrsgdx-store
   ============================================================ */

#exhibitrsgdx-product-gallery,
#exhibitrsgdx-product-gallery *,
#exhibitrsgdx-product-gallery *::before,
#exhibitrsgdx-product-gallery *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ============================================================
   1. CONTAINER — max-width only, no background
   ============================================================ */

#exhibitrsgdx-product-gallery.exhibitrsgdx-product-gallery {
	position: relative;
	width: 100%;
	max-width: var(--exhibitrsgdx-content-max-width, 1600px);
	margin: 40px auto;
	padding: 0 24px;
	font-family: var(--exhibitrsgdx-font-sans, inherit);
}

/* ============================================================
   2. PANEL — carries the grey background
   ============================================================ */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__panel {
	position: relative;
	background: #222222;
	padding-bottom: 32px;
	overflow: visible;
}

/* ============================================================
   3. NOTCH — body-colored strip along the left edge, sits behind the
   image row so it reads as the image breaking out of the panel.
   ============================================================ */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__notch {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
	background: var(--exhibitrsgdx-color-bg, #111111);
	z-index: 1;
	pointer-events: none;
}

/* ============================================================
   4 + 5. HEADER — title popped above the panel, price underneath
   ============================================================ */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header {
	position: relative;
	top: -20px;
	z-index: 2;
	text-align: center;
	padding: 0 24px;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header .product_title {
	color: var(--exhibitrsgdx-color-text, #f5f5f5);
	font-family: var(--exhibitrsgdx-font-sans, inherit);
	margin: 0 0 8px;
}

/* Price — forced to the theme's primary color specifically (not the
   general accent token), and targeted deep enough to beat WooCommerce's
   own .woocommerce-Price-amount color rules from the active theme. */
#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header .price,
#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header .price ins,
#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header .price bdi,
#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header .price .woocommerce-Price-amount {
	color: var(--exhibitrsgdx-color-primary, #f26419);
	font-weight: 700;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__header .price del {
	color: var(--exhibitrsgdx-color-text-muted, #a8a8a8);
}

/* Stock availability line — under the price */
#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__stock {
	margin-top: 4px;
	font-size: var(--exhibitrsgdx-text-sm, 0.875rem);
	color: var(--exhibitrsgdx-color-text-muted, #a8a8a8);
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__stock--out {
	color: var(--exhibitrsgdx-color-error, #e5484d);
}

/* ============================================================
   6. IMAGE GALLERY — stays inside the panel. Left padding on the masonry
   is the base gutter plus the notch width, so the notch strip shows along
   the left edge instead of being covered by the side column.
   ============================================================ */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__images {
	position: relative;
	z-index: 2;
}

/* --- Desktop masonry: side column (up to 2) + center + side column (up to 2) --- */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__masonry {
	display: flex;
	gap: 16px;
	height: 380px;
	padding: 24px 24px 0 44px;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__side {
	flex: 1 1 20%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

/* ============================================================
   7. IMAGES — no background, fixed height (set by the row/column they're
   in), object-fit: cover instead of contain.
   ============================================================ */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__main {
	flex: 1 1 40%;
	height: 100%;
	border-radius: var(--exhibitrsgdx-radius-md, 0px);
	overflow: hidden;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__main-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__thumb {
	flex: 1 1 0;
	width: 100%;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	border-radius: var(--exhibitrsgdx-radius-md, 0px);
	overflow: hidden;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__side .exhibitrsgdx-product-gallery__thumb {
	height: 0; /* flex-basis 0 + flex-grow 1 = equal share of the column's height */
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: opacity var(--exhibitrsgdx-transition, 0.3s ease);
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__thumb:hover img {
	opacity: 0.8;
}

/* --- Desktop extra row: any gallery images beyond the 4 used in the masonry --- */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__extra-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 24px 24px 44px;
}

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__extra-row .exhibitrsgdx-product-gallery__thumb {
	flex: 0 1 140px;
	height: 100px;
}

/* --- Mobile slider: hidden on desktop --- */

#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slider {
	display: none;
}

/* ------------------------------------------------------------------
   Mobile — masonry and the extra row are hidden entirely; a swipeable
   one-image-at-a-time slider (custom-product-gallery.js) takes over.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__notch {
		width: 12px;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__masonry,
	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__extra-row {
		display: none;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slider {
		display: block;
		position: relative;
		overflow: hidden;
		margin: 20px 16px 0 28px;
		border-radius: var(--exhibitrsgdx-radius-md, 0px);
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slider-track {
		display: flex;
		touch-action: pan-y;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slide {
		flex: 0 0 100%;
		height: 320px;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slider-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		padding: 14px 0 24px;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slider-dot {
		width: 8px;
		height: 8px;
		border-radius: var(--exhibitrsgdx-radius-full, 999px);
		background: var(--exhibitrsgdx-color-border-light, #3d3d3d);
		border: none;
		padding: 0;
		cursor: pointer;
	}

	#exhibitrsgdx-product-gallery .exhibitrsgdx-product-gallery__slider-dot.is-active {
		background: var(--exhibitrsgdx-color-primary, #f26419);
	}
}