/* Rupu Product Gallery — only the classic single-product gallery.
 * No changes to slide widths, transforms, zoomImg or lightbox images.
 */
:root {
	--rupu-primary: #16D4D0;
	--rupu-accent: #FF5A00;
	--rupu-dark: #101C28;
	--rupu-border: #E4E8EB;
	--rupu-white: #FFFFFF;
}

/* The stage is a flex item OUTSIDE the slider element. This keeps the
 * gallery's own width equal to the image area, including in Firefox,
 * where FlexSlider measures the gallery instead of its viewport.
 * JS adds one outer layout container; the native thumbnail list stays put.
 */
body.single-product .rupu-gallery-layout {
	--rupu-gallery-thumb: 70px;
	--rupu-gallery-height: 520px;
	--rupu-gallery-gap: 20px;
	display: flex;
	align-items: flex-start;
	gap: var(--rupu-gallery-gap);
	width: 100%;
	min-width: 0;
	position: relative;
}
body.single-product .rupu-gallery-layout > .woocommerce-product-gallery {
	float: none;
	width: auto;
	min-width: 0;
	flex: 1 1 0%;
	order: 2;
	margin: 0;
	position: relative;
}

/* Keep thumbnail list inside the gallery for native variation queries.
 * A reserved flex rail places it visually at the left without reparenting.
 */
body.single-product .rupu-gallery-layout::before {
	content: '';
	flex: 0 0 calc(var(--rupu-gallery-thumb) + 6px);
	order: 1;
}
body.single-product .rupu-gallery-layout:not(.rupu-gallery-has-thumbs)::before {
	display: none;
}
body.single-product .rupu-gallery-layout:not(.rupu-gallery-has-thumbs) {
	gap: 0;
}

/* Native thumbnail list: undo WooCommerce four-column floats and
 * Elementor's image spacing. Padding leaves room for the active ring.
 */
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs {
	position: absolute;
	top: 0;
	left: calc(-1 * (var(--rupu-gallery-thumb) + 6px + var(--rupu-gallery-gap)));
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: calc(var(--rupu-gallery-thumb) + 6px);
	max-height: var(--rupu-gallery-height);
	margin: 0;
	padding: 3px;
	list-style: none;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--rupu-border) transparent;
	overscroll-behavior: contain;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs > li {
	float: none;
	clear: none;
	width: var(--rupu-gallery-thumb);
	height: var(--rupu-gallery-thumb);
	flex: 0 0 var(--rupu-gallery-thumb);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs > li > img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 2px;
	object-fit: contain;
	border: 1px solid var(--rupu-border);
	border-radius: 8px;
	background: var(--rupu-white);
	opacity: 1;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs > li > img:hover {
	border-color: var(--rupu-primary);
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs > li > img.flex-active {
	border: 2px solid var(--rupu-primary);
	padding: 1px;
	box-shadow: 0 0 0 2px rgba(22, 212, 208, .10);
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs > li > img:focus-visible {
	outline: 2px solid var(--rupu-dark);
	outline-offset: 1px;
}

/* A fixed presentation height prevents layout shifts between aspect ratios.
 * !important is needed here only to override FlexSlider's inline height.
 * The slider continues managing its inline widths and translations.
 */
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > .flex-viewport {
	height: var(--rupu-gallery-height) !important;
	min-height: var(--rupu-gallery-height);
	border: 1px solid var(--rupu-border);
	border-radius: 12px;
	box-sizing: border-box;
	background: var(--rupu-white);
	overflow: hidden;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery__wrapper {
	margin: 0;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery__image {
	height: calc(var(--rupu-gallery-height) - 2px);
	background: var(--rupu-white);
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery__image > a > img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
/* Single image: WooCommerce does not create a FlexSlider viewport. */
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--rupu-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--rupu-white);
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	left: auto;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--rupu-white);
	color: var(--rupu-dark);
	box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
	z-index: 5;
}

@media (min-width: 1440px) {
	body.single-product .rupu-gallery-layout { --rupu-gallery-height: 580px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.single-product .rupu-gallery-layout {
		--rupu-gallery-thumb: 60px;
		--rupu-gallery-height: 450px;
		--rupu-gallery-gap: 14px;
	}
}
@media (max-width: 767px) {
	body.single-product .rupu-gallery-layout {
		--rupu-gallery-thumb: 60px;
		--rupu-gallery-height: clamp(300px, 105vw, 480px);
		display: block;
	}
	body.single-product .rupu-gallery-layout::before { display: none; }
	body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs {
		position: static;
		display: flex;
		flex-direction: row;
		width: 100%;
		max-height: none;
		margin-top: 14px;
		overflow-x: auto;
		overflow-y: hidden;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs > li > img { transition: none; }
}


/* 1.0.2: one native horizontal list below the image, at every breakpoint.
 * Side arrows scroll that list; no images or native events are duplicated.
 */
body.single-product .rupu-gallery-layout { display: block; }
body.single-product .rupu-gallery-layout::before { display: none; }
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs {
 position: static; direction: ltr; display: flex; flex-direction: row; flex-wrap: nowrap;
 width: calc(100% - 80px); max-height: none; margin: 16px 40px 0; padding: 3px;
 overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > ol.flex-control-thumbs::-webkit-scrollbar { display: none; }
/* Scoped priority is necessary against Elementor's global button rules. */
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-arrow {
 position: absolute; top: auto; bottom: calc((var(--rupu-gallery-thumb) - 32px) / 2 + 3px);
 display: flex !important; align-items: center; justify-content: center;
 width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important;
 margin: 0 !important; padding: 0 !important; border: 1px solid var(--rupu-border) !important;
 border-radius: 50% !important; background: var(--rupu-white) !important; color: var(--rupu-dark) !important;
 font: 26px/1 Arial, sans-serif !important; box-shadow: none !important; cursor: pointer;
 transform: none !important; z-index: 6;
}
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-prev { left: 0; right: auto; }
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-next { right: 0; left: auto; }
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-arrow:hover:not(:disabled) { border-color: var(--rupu-primary) !important; }
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-arrow:disabled { opacity: .3; cursor: default; }
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-arrow:focus-visible { outline: 2px solid var(--rupu-dark); outline-offset: 2px; }
body.single-product .rupu-gallery-layout .woocommerce-product-gallery > button.rupu-gallery-arrow[hidden] { display: none !important; }