/* WEDO Product Gallery — layout driven by CSS custom properties that the
   widget's Elementor controls set per breakpoint. */

/* Fill the parent container by default (same fix as purchase-options —
   Elementor flex containers otherwise size widgets to content). */
.elementor-widget-wedo-product-gallery {
	width: 100%;
	max-width: 100%;
}

.wedo-gallery {
	display: flex;
	flex-direction: var(--wedo-dir, row);
	gap: var(--wedo-rail-gap, 18px);
	align-items: stretch;
	max-width: 100%;
}

/* Thumbnail rail (kept in the DOM even when hidden — it is the slide data source) */
.wedo-gallery__thumbs {
	display: var(--wedo-thumbs-display, flex);
	flex-direction: var(--wedo-rail-dir, column);
	gap: var(--wedo-thumbs-gap, 18px);
	flex: 0 0 auto;
	overflow-x: var(--wedo-rail-scroll-x, hidden);
	overflow-y: var(--wedo-rail-scroll-y, auto);
	scrollbar-width: thin;
	min-width: 0;
	min-height: 0;
}

.wedo-gallery__thumb {
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	flex: 0 0 auto;
	width: var(--wedo-thumb-size, 125px);
	aspect-ratio: var(--wedo-thumb-ratio, 1 / 1);
	transition: opacity var(--wedo-transition, 0.15s) ease,
		border-color var(--wedo-transition, 0.15s) ease;
	-webkit-tap-highlight-color: transparent;
}

.wedo-gallery__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Viewport column: stage + (optional) indicators below */
.wedo-gallery__viewport {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.wedo-gallery__stage {
	position: relative;
	min-width: 0;
}

/* Main image */
.wedo-gallery__main {
	overflow: hidden;
	aspect-ratio: var(--wedo-main-ratio, 1 / 1);
}

.wedo-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
}

.wedo-gallery__image {
	width: 100%;
	height: var(--wedo-img-h, 100%);
	object-fit: var(--wedo-main-fit, cover);
	display: block;
	transition: opacity var(--wedo-transition, 0.15s) ease;
}

.wedo-gallery__image.is-switching {
	opacity: 0.35;
}

/* Dots */
.wedo-gallery__dots {
	display: var(--wedo-dots-display, none);
	gap: var(--wedo-dot-gap, 8px);
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.wedo-gallery__dot {
	width: var(--wedo-dot-size, 8px);
	height: var(--wedo-dot-size, 8px);
	border-radius: 999px;
	background: var(--wedo-dot-color, rgba(65, 83, 80, 0.3));
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width var(--wedo-transition, 0.15s) ease,
		background-color var(--wedo-transition, 0.15s) ease;
	-webkit-tap-highlight-color: transparent;
}

.wedo-gallery__dot.is-active {
	width: var(--wedo-dot-active-w, 22px);
	background: var(--wedo-dot-active-color, #415350);
}

/* Fraction counter */
.wedo-gallery__fraction {
	display: var(--wedo-dots-display, none);
	justify-content: center;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	color: #415350;
}

/* Indicator placement */
.wedo-gallery__nav--below {
	margin-top: var(--wedo-dots-offset, 12px);
}

.wedo-gallery__nav--inside {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--wedo-dots-offset, 12px);
	z-index: 2;
	pointer-events: none;
}

.wedo-gallery__nav--inside .wedo-gallery__dot {
	pointer-events: auto;
}

/* Arrows */
.wedo-gallery__arrow {
	display: var(--wedo-arrows-display, none);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--wedo-arrow-size, 38px);
	height: var(--wedo-arrow-size, 38px);
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--wedo-arrow-bg, rgba(255, 255, 255, 0.85));
	color: var(--wedo-arrow-color, #415350);
	cursor: pointer;
	z-index: 2;
	padding: 0;
	transition: background-color var(--wedo-transition, 0.15s) ease,
		color var(--wedo-transition, 0.15s) ease;
	-webkit-tap-highlight-color: transparent;
}

.wedo-gallery__arrow--prev {
	left: var(--wedo-arrow-offset, 12px);
}

.wedo-gallery__arrow--next {
	right: var(--wedo-arrow-offset, 12px);
}

.wedo-gallery__arrow svg {
	width: 50%;
	height: 50%;
}

.wedo-gallery__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Swipe: avoid the browser hijacking horizontal pans on the stage */
.wedo-gallery--swipe .wedo-gallery__stage {
	touch-action: pan-y;
}

/* Desktop mouse drag on the main image */
.wedo-gallery__stage--draggable {
	cursor: grab;
}

.wedo-gallery__stage--draggable:active {
	cursor: grabbing;
}

.wedo-gallery__stage--draggable img {
	-webkit-user-drag: none;
	user-select: none;
}

/* -----------------------------------------------------------------
   Theme-reset hardening: Hello Elementor's reset.css paints ALL
   buttons with border:1px solid #c36 and a #c36 (red) background on
   :hover/:focus at higher specificity than our single-class rules.
   Pin our button states explicitly. Widget controls ({{WRAPPER}}
   selectors) still override all of this.
   ----------------------------------------------------------------- */
.wedo-gallery__thumb,
.wedo-gallery__thumb:hover,
.wedo-gallery__thumb:focus {
	background: none;
	color: inherit;
}

.wedo-gallery__dot,
.wedo-gallery__dot:hover,
.wedo-gallery__dot:focus {
	background: var(--wedo-dot-color, rgba(65, 83, 80, 0.3));
	border: 0;
}

.wedo-gallery__dot.is-active,
.wedo-gallery__dot.is-active:hover,
.wedo-gallery__dot.is-active:focus {
	background: var(--wedo-dot-active-color, #415350);
}

.wedo-gallery__arrow,
.wedo-gallery__arrow:hover,
.wedo-gallery__arrow:focus {
	background: var(--wedo-arrow-bg, rgba(255, 255, 255, 0.85));
	color: var(--wedo-arrow-color, #415350);
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Tablet landscape (769-1024): the product section stacks, so without
 * a cap the square main image would balloon to the full ~784px content
 * width. Keep it a comfortable size and centered — the mobile pattern
 * (dots, no rail) at a tablet-appropriate scale. ≤768 stays full-width
 * as audited; ≥1025 uses the rail layout in the 940-weight column.
 * ------------------------------------------------------------------ */
@media (min-width: 769px) and (max-width: 1024px) {
	.wedo-gallery {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
}