/*
 * Rahath Product Gallery — a standalone Elementor widget with its own markup
 * (no WooCommerce flexslider, no `.flex-control-nav`/`.flex-viewport`), so
 * there is nothing else on the page styling these classes and nothing else
 * driving their behaviour with JS. See rahath-product-gallery-widget.php.
 */

.rahath-pg {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --rahath-pg-gap, 16px );
}

.rahath-pg__main {
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	order: 1;
	aspect-ratio: var( --rahath-pg-main-ratio, auto );
}

.rahath-pg__slide {
	display: none;
}

.rahath-pg__slide.is-active {
	display: block;
	height: 100%;
}

.rahath-pg__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var( --rahath-pg-main-fit, cover );
}

.rahath-pg__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex: 0 0 auto;
	order: 2;
	gap: var( --rahath-pg-thumb-gap, 8px );
}

.rahath-pg__thumb {
	cursor: pointer;
	flex: 0 0 auto;
	width: var( --rahath-pg-thumb-w, 64px );
	opacity: 0.6;
	transition: opacity 0.15s ease;
	border: none;
	background: none;
	padding: 0;
}

.rahath-pg__thumb.is-active,
.rahath-pg__thumb:hover {
	opacity: 1;
}

.rahath-pg__thumb img {
	display: block;
	width: 100%;
	height: var( --rahath-pg-thumb-h, 64px );
	object-fit: var( --rahath-pg-thumb-fit, cover );
	object-position: center;
}

/* --- Position: bottom (default) / top / left / right ---
 * `prefix_class` lands on the Elementor wrapper element — an ANCESTOR of
 * our own `.rahath-pg` render root, not the same node — so these must be
 * ancestor+descendant selectors, not compound (same-element) ones like
 * `.rahath-pg.rahath-pg-pos-left` (which never matches anything: those two
 * classes live on different elements in the actual DOM).
 *
 * DOM order is always main-then-thumbs; `order` moves them visually, so
 * there is no need to reverse flex-direction depending on position (the
 * mistake made when this was still fighting WooCommerce's own widget). */

.rahath-pg-pos-bottom .rahath-pg,
.rahath-pg-pos-top .rahath-pg {
	flex-direction: column;
}

.rahath-pg-pos-top .rahath-pg__thumbs {
	order: 0;
}

.rahath-pg-pos-left .rahath-pg,
.rahath-pg-pos-right .rahath-pg {
	flex-direction: row;
}

.rahath-pg-pos-left .rahath-pg__thumbs {
	order: 0;
}

.rahath-pg-pos-bottom .rahath-pg__thumbs,
.rahath-pg-pos-top .rahath-pg__thumbs {
	flex-direction: row;
	flex-wrap: wrap;
}

.rahath-pg-pos-left .rahath-pg__thumbs,
.rahath-pg-pos-right .rahath-pg__thumbs {
	flex-direction: column;
}

/* --- Scrollable thumbnails ---
 * Both prefix classes here (scroll + position) ARE on the same wrapper
 * element, so compounding them together is correct; only the additional
 * `.rahath-pg__thumbs` step is a descendant. */

.rahath-pg-scroll-yes.rahath-pg-pos-bottom .rahath-pg__thumbs,
.rahath-pg-scroll-yes.rahath-pg-pos-top .rahath-pg__thumbs {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: var( --rahath-pg-scroll, 100% );
	scrollbar-width: thin;
}

.rahath-pg-scroll-yes.rahath-pg-pos-left .rahath-pg__thumbs,
.rahath-pg-scroll-yes.rahath-pg-pos-right .rahath-pg__thumbs {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: var( --rahath-pg-scroll, 400px );
	scrollbar-width: thin;
}

.rahath-pg-scroll-yes .rahath-pg__thumb {
	flex-shrink: 0;
}