/*!
 * WooKit — Product Gallery.
 * Modern single-product image gallery: main stage + thumb strip (side /
 * below / dots), hover-zoom, swipe-on-touch, full-screen lightbox. All
 * driven by design tokens (--wookit-accent / surface / radius / border /
 * overlay / text / muted / font) so the gallery picks up the theme.
 */

.wookit-product-gallery {
	font-family: var( --wookit-font, inherit ) !important;
	color: var( --wookit-text, inherit ) !important;
	display: grid;
	gap: clamp( 0.75rem, 1.6vw, 1.25rem );
	/* NOTE: `container-type: inline-size` was previously set here but caused
	   the element's height to collapse to 0 inside some Elementor wrappers
	   on mobile (layout/style containment side-effect). Responsive behaviour
	   is now driven by media queries + cqi-with-vw-fallback. */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: auto;
}

.wookit-product-gallery * {
	box-sizing: border-box !important;
}

.wookit-product-gallery--empty {
	padding: 1rem !important;
	border: 1px dashed var( --wookit-border, #e5e7eb ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	color: var( --wookit-muted, #6b7280 ) !important;
	font-size: 0.875rem !important;
	text-align: center !important;
}

/* ── Layout: side (default) — thumbs column left, stage right ─────── */
.wookit-product-gallery[ data-layout="side" ] {
	/* Fluid thumb column — scales with container, never wider than 96px nor
	   narrower than 56px. Combined with minmax(0, 1fr) for main, the grid
	   always fits any parent width without overflow. */
	grid-template-columns: clamp( 56px, 11vw, 96px ) minmax( 0, 1fr );
	grid-template-areas: "thumbs main";
	align-items: start;
}
.wookit-product-gallery[ data-layout="side" ] .wookit-product-gallery__main   { grid-area: main; }
.wookit-product-gallery[ data-layout="side" ] .wookit-product-gallery__thumbs { grid-area: thumbs; }

/* ── Layout: below — thumbs row beneath stage ─────────────────────── */
.wookit-product-gallery[ data-layout="below" ] {
	/* Flex column instead of grid — sidesteps the aspect-ratio-in-grid
	   height-collapse bug we hit with "side" layout. Main stage takes its
	   natural square height, thumbs row sits below it. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	grid-template-columns: unset;
	grid-template-areas: unset;
}

/* ── Layout: dots — minimal, dots beneath stage ───────────────────── */
.wookit-product-gallery[ data-layout="dots" ] {
	grid-template-columns: minmax( 0, 1fr );
}

/* ── Side collapses to below on narrow viewports ──────────────────── */
/* 1024px catches all tablets (portrait + landscape) and phones — the side
   layout needs a wide viewport to give the main stage enough room. On
   mobile/tablet we switch the gallery itself from `display: grid` to
   `display: flex` (column). Reason: grid items with aspect-ratio + auto row
   sizing + `align-items: start` have a known browser quirk where the row's
   computed height collapses to min-content (0 for aspect-ratio items),
   while the item still paints at its full square — producing visual overlap
   on what follows in the document. Flex column sidesteps this entirely:
   each child takes its natural content height, parent reports the sum.  */
@media ( max-width: 1024px ) {
	.wookit-product-gallery[ data-layout="side" ] {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		grid-template-columns: unset;
		grid-template-areas: unset;
	}
	.wookit-product-gallery[ data-layout="side" ] .wookit-product-gallery__thumbs {
		flex-direction: row;
		flex-wrap: wrap;
		max-height: none;
	}
	.wookit-product-gallery[ data-layout="side" ] .wookit-product-gallery__thumb {
		width: clamp( 56px, 16vw, 80px ) !important;
	}
}

/* ── Main stage ───────────────────────────────────────────────────── */
.wookit-product-gallery__main {
	position: relative;
	background: var( --wookit-surface, #fff ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	overflow: hidden;
}

.wookit-product-gallery__stage {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	/* Classic padding-bottom trick: height:0 + padding-bottom:100% forces a
	   1:1 square box independent of any flex/grid sizing context. We don't
	   use `aspect-ratio` because it can conflict with padding-bottom on the
	   same element and silently collapse to 0 in some layouts. */
	padding-bottom: 100% !important;
	overflow: hidden;
	background: var( --wookit-surface-alt, #f5f5f5 ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	cursor: zoom-in !important;
}

.wookit-product-gallery__image {
	display: block;
	/* Stage uses padding-bottom for height → image needs to be absolutely
	   positioned to fill the padded box (otherwise it stacks below padding). */
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	max-width: 100% !important;
	transition: transform 350ms ease, opacity 200ms ease;
	transform-origin: 50% 50%;
	opacity: 1;
}

.wookit-product-gallery__image.is-loading {
	opacity: 0;
}

/* Hover-zoom only on real pointer devices (touch sticks to :hover → bad UX) */
@media ( hover: hover ) and ( pointer: fine ) {
	.wookit-product-gallery[ data-zoom="1" ] .wookit-product-gallery__stage:hover .wookit-product-gallery__image {
		transform: scale( 1.25 );
	}
}

/* Zoom button (top-right) */
.wookit-product-gallery__zoom-btn {
	position: absolute !important;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var( --wookit-surface, #fff ) !important;
	color: var( --wookit-text, #1f2937 ) !important;
	border: 1px solid var( --wookit-border, rgba( 0, 0, 0, 0.08 ) ) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 ) !important;
	cursor: pointer !important;
	transition: transform 150ms ease, background-color 150ms ease !important;
	-webkit-tap-highlight-color: transparent !important;
}
.wookit-product-gallery__zoom-btn:hover {
	background: var( --wookit-accent, #1f2937 ) !important;
	color: var( --wookit-accent-fg, #fff ) !important;
	transform: scale( 1.05 ) !important;
}

/* Prev / next arrows on the stage — minimalist: just a circled icon, no
   solid fill. White-translucent background gives the icon contrast on any
   image background without being heavy. */
.wookit-product-gallery__nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY( -50% ) !important;
	z-index: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: rgba( 255, 255, 255, 0.45 ) !important;
	color: var( --wookit-text, #1f2937 ) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	opacity: 0;
	transition: opacity 180ms ease, background-color 150ms ease, transform 150ms ease !important;
	-webkit-tap-highlight-color: transparent !important;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}
.wookit-product-gallery__prev { left: 12px !important; }
.wookit-product-gallery__next { right: 12px !important; }

.wookit-product-gallery__main:hover .wookit-product-gallery__nav,
.wookit-product-gallery__nav:focus-visible {
	opacity: 1;
}

/* Always show arrows on touch (hover state never fires) */
@media ( hover: none ) {
	.wookit-product-gallery__nav { opacity: 0.9; }
}

.wookit-product-gallery__nav:hover {
	background: rgba( 255, 255, 255, 0.7 ) !important;
	color: var( --wookit-text, #1f2937 ) !important;
	transform: translateY( -50% ) scale( 1.05 ) !important;
}

/* ── Thumbs ───────────────────────────────────────────────────────── */
.wookit-product-gallery__thumbs {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	gap: 8px;
}
.wookit-product-gallery__thumbs > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.wookit-product-gallery__thumbs > li::before { content: none !important; }

.wookit-product-gallery[ data-layout="side" ] .wookit-product-gallery__thumbs {
	flex-direction: column;
	max-height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
}
.wookit-product-gallery[ data-layout="below" ] .wookit-product-gallery__thumbs {
	/* Horizontal slider — single row, scroll-snap on each thumb. Touch
	   drag works natively; pointer drag handled by JS (see init()). */
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;             /* Firefox */
	-ms-overflow-style: none;          /* old Edge */
	-webkit-overflow-scrolling: touch; /* iOS momentum */
	gap: 8px;
	padding-bottom: 2px !important; /* leave breathing room for focus outlines */
	cursor: grab !important;
}

.wookit-product-gallery[ data-layout="below" ] .wookit-product-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.wookit-product-gallery[ data-layout="below" ] .wookit-product-gallery__thumbs.is-dragging {
	cursor: grabbing !important;
	scroll-snap-type: none;            /* don't fight the user mid-drag */
	scroll-behavior: auto;
}

.wookit-product-gallery[ data-layout="below" ] .wookit-product-gallery__thumbs > li {
	flex: 0 0 auto;                    /* fixed width per thumb-button */
	scroll-snap-align: start;
}

/* Side-collapses-to-row layout for thumbs is handled in the @media
   (max-width: 768px) block above. */

.wookit-product-gallery__thumb {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var( --wookit-surface-alt, #f5f5f5 ) !important;
	border: 0 !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	overflow: hidden;
	cursor: pointer !important;
	aspect-ratio: 1 / 1;
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
	transition: outline-color 150ms ease, transform 150ms ease !important;
	-webkit-tap-highlight-color: transparent !important;
	box-shadow: none !important;
}
.wookit-product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wookit-product-gallery__thumb.is-active {
	outline-color: var( --wookit-accent, #1f2937 ) !important;
}
.wookit-product-gallery__thumb:hover {
	transform: scale( 1.03 );
}

/* Side layout: thumbs are 100% of the (already-fluid) grid column. */
.wookit-product-gallery[ data-layout="side" ] .wookit-product-gallery__thumb {
	width: 100% !important;
}

/* Below layout: thumbs take a calculated portion so several fit per row */
.wookit-product-gallery[ data-layout="below" ] .wookit-product-gallery__thumb {
	width: clamp( 60px, 12vw, 84px ) !important;
}

/* Thumb width narrows on mobile (handled in the @media block above). */

/* ── Dots ─────────────────────────────────────────────────────────── */
.wookit-product-gallery__dots {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.wookit-product-gallery__dots > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.wookit-product-gallery__dots > li::before { content: none !important; }

.wookit-product-gallery__dot {
	display: block !important;
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var( --wookit-border, #d1d5db ) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: background-color 150ms ease, transform 150ms ease !important;
	-webkit-tap-highlight-color: transparent !important;
	box-shadow: none !important;
}
.wookit-product-gallery__dot.is-active {
	background: var( --wookit-accent, #1f2937 ) !important;
	transform: scale( 1.3 );
}

/* ── Lightbox ─────────────────────────────────────────────────────── */
.wookit-product-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wookit-font, inherit ) !important;
	animation: wookit-gallery-fade 220ms ease;
}

.wookit-product-gallery-lightbox[ hidden ] { display: none !important; }

.wookit-product-gallery-lightbox__overlay {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var( --wookit-overlay, rgba( 0, 0, 0, 0.85 ) ) !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: zoom-out !important;
	-webkit-tap-highlight-color: transparent !important;
}

.wookit-product-gallery-lightbox__figure {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	max-width: min( 92vw, 1400px );
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.wookit-product-gallery-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 ) !important;
	pointer-events: auto;
	animation: wookit-gallery-pop 220ms ease;
}

.wookit-product-gallery-lightbox__caption {
	margin-top: 0.75rem !important;
	color: rgba( 255, 255, 255, 0.85 ) !important;
	font-size: 0.875rem !important;
	text-align: center !important;
	pointer-events: none;
}
.wookit-product-gallery-lightbox__caption:empty { display: none; }

.wookit-product-gallery-lightbox__close,
.wookit-product-gallery-lightbox__prev,
.wookit-product-gallery-lightbox__next {
	position: absolute !important;
	z-index: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: rgba( 255, 255, 255, 0.12 ) !important;
	color: #fff !important;
	border: 1px solid rgba( 255, 255, 255, 0.2 ) !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: background-color 150ms ease, transform 150ms ease !important;
	-webkit-tap-highlight-color: transparent !important;
	backdrop-filter: blur( 6px );
}

.wookit-product-gallery-lightbox__close:hover,
.wookit-product-gallery-lightbox__prev:hover,
.wookit-product-gallery-lightbox__next:hover {
	background: rgba( 255, 255, 255, 0.22 ) !important;
	transform: scale( 1.05 ) !important;
}

.wookit-product-gallery-lightbox__close { top: 20px; right: 20px; }
.wookit-product-gallery-lightbox__prev  { top: 50%; left: 20px;  transform: translateY( -50% ) !important; }
.wookit-product-gallery-lightbox__next  { top: 50%; right: 20px; transform: translateY( -50% ) !important; }

.wookit-product-gallery-lightbox__prev:hover {
	transform: translateY( -50% ) scale( 1.05 ) !important;
}
.wookit-product-gallery-lightbox__next:hover {
	transform: translateY( -50% ) scale( 1.05 ) !important;
}

@media ( max-width: 540px ) {
	.wookit-product-gallery-lightbox__close { top: 12px; right: 12px; width: 40px !important; height: 40px !important; }
	.wookit-product-gallery-lightbox__prev  { left: 8px;  width: 40px !important; height: 40px !important; }
	.wookit-product-gallery-lightbox__next  { right: 8px; width: 40px !important; height: 40px !important; }
	.wookit-product-gallery-lightbox__figure { max-width: 96vw; }
}

/* Body scroll lock while lightbox is open */
body.wookit-product-gallery-locked {
	overflow: hidden !important;
}

@keyframes wookit-gallery-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes wookit-gallery-pop {
	from { opacity: 0; transform: scale( 0.96 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wookit-product-gallery__image,
	.wookit-product-gallery__thumb,
	.wookit-product-gallery__dot,
	.wookit-product-gallery__nav,
	.wookit-product-gallery__zoom-btn,
	.wookit-product-gallery-lightbox,
	.wookit-product-gallery-lightbox__image {
		transition: none !important;
		animation: none !important;
	}
}