/**
 * Temiz Wear Product Gallery
 *
 * Clean image slider for the custom WooCommerce single-product page.
 * Mobile-first, accessible, lightweight, and compatible with the existing
 * product-gallery.js controller.
 *
 * @package TemizWear
 * @since   1.2.0
 */

/* ============================================================
   1. Scope and Foundation
   ============================================================ */

.tw-product-gallery,
.tw-product-gallery *,
.tw-product-gallery *::before,
.tw-product-gallery *::after,
.tw-product-gallery-lightbox,
.tw-product-gallery-lightbox *,
.tw-product-gallery-lightbox *::before,
.tw-product-gallery-lightbox *::after {
	box-sizing: border-box;
}

.tw-product-gallery {
	--tw-gallery-primary: var(--tw-color-primary, #2e1a24);
	--tw-gallery-accent: var(--tw-color-accent, #a8823d);
	--tw-gallery-base: var(--tw-color-base, #f5efe3);
	--tw-gallery-text: var(--tw-color-text, #1c1c1a);
	--tw-gallery-border: var(--tw-color-border, #ded6ca);
	--tw-gallery-surface: #f8f4ed;

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--tw-gallery-text);
	background: transparent;
	isolation: isolate;
}

.tw-product-gallery__shell,
.tw-product-gallery__main {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Defensive cleanup if stale cached thumbnail markup remains. */
.tw-product-gallery__thumbnail-rail,
.tw-product-gallery__thumbnails {
	display: none !important;
}

/* ============================================================
   2. Viewport and Media Surface
   ============================================================ */

.tw-product-gallery__viewport {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	aspect-ratio: 4 / 5;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: 0;
	outline: none;
	touch-action: pan-y pinch-zoom;
	isolation: isolate;
}

.tw-product-gallery__viewport:focus-visible {
	outline: 0.125rem solid var(--tw-gallery-accent);
	outline-offset: 0.1875rem;
}

.tw-product-gallery__media {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.74),
			rgba(245, 239, 227, 0.42)
		),
		var(--tw-gallery-surface);
	border: 0.0625rem solid rgba(168, 130, 61, 0.18);
	border-radius: 0;
	box-shadow: none;
	isolation: isolate;
}

.tw-product-gallery__media::before {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.24),
			rgba(255, 255, 255, 0) 36%
		);
	content: "";
}

/* ============================================================
   3. Track and Slides
   ============================================================ */

.tw-product-gallery__track,
.tw-product-gallery .woocommerce-product-gallery__wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	float: none !important;
	clear: none !important;
	background: transparent !important;
}

.tw-product-gallery
	.woocommerce-product-gallery__image.tw-product-gallery__slide {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	float: none !important;
	clear: none !important;
	background: transparent !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: 0 !important;
	transform: translateZ(0);
	transition:
		opacity 220ms ease,
		visibility 220ms ease;
}

.tw-product-gallery
	.woocommerce-product-gallery__image.tw-product-gallery__slide.is-active,
.tw-product-gallery
	.woocommerce-product-gallery__image.tw-product-gallery__slide[aria-hidden="false"] {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 2 !important;
}

.tw-product-gallery
	.woocommerce-product-gallery__image.tw-product-gallery__slide[aria-hidden="true"] {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.tw-product-gallery:not([data-product-gallery-initialized="true"])
	.tw-product-gallery__slide:first-child {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 2 !important;
}

/* ============================================================
   4. Images
   ============================================================ */

.tw-product-gallery__image-link {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: inherit;
	background: transparent;
	border: 0;
	text-decoration: none;
	cursor: zoom-in;
}

.tw-product-gallery__slide [data-product-gallery-image] {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	object-position: center !important;
	background: var(--tw-gallery-surface);
	border: 0;
	opacity: 1 !important;
	visibility: visible !important;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin:
		var(--tw-gallery-zoom-x, 50%)
		var(--tw-gallery-zoom-y, 50%);
	transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.tw-product-gallery--placeholder [data-product-gallery-image] {
	opacity: 0.72 !important;
}

/* ============================================================
   5. Main Navigation
   ============================================================ */

.tw-product-gallery__control {
	position: absolute;
	top: 50% !important;
	bottom: auto !important;
	z-index: 12;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	margin: 0 !important;
	padding: 0;
	color: var(--tw-gallery-primary);
	background: rgba(255, 255, 255, 0.9);
	border: 0.0625rem solid rgba(168, 130, 61, 0.24);
	border-radius: 50%;
	box-shadow: 0 0.5rem 1.5rem rgba(46, 26, 36, 0.12);
	-webkit-backdrop-filter: blur(0.75rem);
	backdrop-filter: blur(0.75rem);
	cursor: pointer;
	appearance: none;
	transform: translateY(-50%) !important;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease,
		opacity 160ms ease,
		transform 160ms ease;
}

.tw-product-gallery__control--previous {
	inset-inline-start: 0.625rem;
}

.tw-product-gallery__control--next {
	inset-inline-end: 0.625rem;
}

.tw-product-gallery__control:not(:disabled):hover {
	color: #ffffff;
	background: var(--tw-gallery-primary);
	border-color: var(--tw-gallery-primary);
	transform: translateY(-50%) scale(1.04) !important;
}

.tw-product-gallery__control:focus-visible {
	outline: 0.125rem solid var(--tw-gallery-accent);
	outline-offset: 0.1875rem;
}

.tw-product-gallery__control:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.tw-product-gallery__control-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	pointer-events: none;
}

/* ============================================================
   6. Zoom
   ============================================================ */

.tw-product-gallery__zoom {
	position: absolute;
	inset-inline-end: 0.625rem;
	inset-block-end: 0.625rem;
	z-index: 13;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	margin: 0;
	padding: 0;
	color: var(--tw-gallery-primary);
	background: rgba(255, 255, 255, 0.9);
	border: 0.0625rem solid rgba(168, 130, 61, 0.24);
	border-radius: 50%;
	box-shadow: 0 0.5rem 1.5rem rgba(46, 26, 36, 0.1);
	-webkit-backdrop-filter: blur(0.75rem);
	backdrop-filter: blur(0.75rem);
	cursor: pointer;
	appearance: none;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.tw-product-gallery__zoom:hover {
	color: #ffffff;
	background: var(--tw-gallery-primary);
	transform: translateY(-0.0625rem);
}

.tw-product-gallery__zoom:focus-visible {
	outline: 0.125rem solid var(--tw-gallery-accent);
	outline-offset: 0.1875rem;
}

.tw-product-gallery--placeholder .tw-product-gallery__zoom {
	display: none;
}

/* ============================================================
   7. Counter and Progress
   ============================================================ */

.tw-product-gallery__meta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
	padding: 0.625rem 0.875rem 0;
}

.tw-product-gallery__counter {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	min-width: 2.5rem;
	margin: 0;
	padding: 0;
	color: var(--tw-gallery-text);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	opacity: 0.72;
}

.tw-product-gallery__progress {
	display: block;
	width: 100%;
	height: 0.1875rem;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: rgba(222, 214, 202, 0.82);
	appearance: none;
	-webkit-appearance: none;
}

.tw-product-gallery__progress::-webkit-progress-bar {
	background: rgba(222, 214, 202, 0.82);
	border-radius: 999px;
}

.tw-product-gallery__progress::-webkit-progress-value {
	background:
		linear-gradient(
			90deg,
			var(--tw-gallery-primary),
			var(--tw-gallery-accent)
		);
	border-radius: 999px;
	transition: width 220ms ease;
}

.tw-product-gallery__progress::-moz-progress-bar {
	background:
		linear-gradient(
			90deg,
			var(--tw-gallery-primary),
			var(--tw-gallery-accent)
		);
	border-radius: 999px;
}

.tw-product-gallery--single .tw-product-gallery__control,
.tw-product-gallery--single .tw-product-gallery__progress,
.tw-product-gallery--single .tw-product-gallery__counter {
	display: none !important;
}

.tw-product-gallery--single .tw-product-gallery__meta {
	display: none;
}

/* ============================================================
   8. Desktop Hover Zoom
   ============================================================ */

@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
	.tw-product-gallery__image-link[data-product-gallery-hover-zoom]:hover
		[data-product-gallery-image] {
		transform: scale(1.1);
	}
}

/* ============================================================
   9. Tablet and Desktop
   ============================================================ */

@media (min-width: 48rem) {
	.tw-product-gallery__media {
		border-radius: 0.875rem;
		box-shadow:
			0 0.0625rem 0 rgba(255, 255, 255, 0.88) inset,
			0 1.125rem 3rem rgba(46, 26, 36, 0.08);
	}

	.tw-product-gallery__viewport {
		padding: 0.625rem;
		border-radius: 0.875rem;
	}

	.tw-product-gallery__slide [data-product-gallery-image] {
		border-radius: 0.625rem;
	}

	.tw-product-gallery__control,
	.tw-product-gallery__zoom {
		width: 2.75rem;
		height: 2.75rem;
	}

	.tw-product-gallery__control--previous {
		inset-inline-start: 1rem;
	}

	.tw-product-gallery__control--next {
		inset-inline-end: 1rem;
	}

	.tw-product-gallery__zoom {
		inset-inline-end: 1rem;
		inset-block-end: 1rem;
	}

	.tw-product-gallery__meta {
		padding-top: 0.875rem;
	}
}

/* ============================================================
   10. Lightbox
   ============================================================ */

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

.tw-product-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0.875rem;
	overflow: hidden;
	isolation: isolate;
}

.tw-product-gallery-lightbox__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(16, 12, 14, 0.9);
	-webkit-backdrop-filter: blur(0.625rem);
	backdrop-filter: blur(0.625rem);
	cursor: zoom-out;
	transition: opacity 200ms ease;
}

.tw-product-gallery-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
	grid-template-areas:
		"previous stage next"
		"counter counter counter";
	align-items: center;
	gap: 0.625rem;
	width: min(73.75rem, 100%);
	height: min(90dvh, 56.25rem);
	margin: 0;
	padding: 0.875rem;
	overflow: hidden;
	background: rgba(250, 247, 241, 0.98);
	border: 0.0625rem solid rgba(255, 255, 255, 0.24);
	border-radius: 0.75rem;
	box-shadow: 0 2rem 5.625rem rgba(0, 0, 0, 0.36);
	transition:
		opacity 200ms ease,
		transform 200ms ease;
}

.tw-product-gallery-lightbox__stage {
	grid-area: stage;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--tw-gallery-surface);
	border-radius: 0.5rem;
	touch-action: pan-x pan-y pinch-zoom;
}

.tw-product-gallery-lightbox__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

.tw-product-gallery-lightbox__close,
.tw-product-gallery-lightbox__previous,
.tw-product-gallery-lightbox__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	color: #ffffff;
	background: rgba(17, 17, 17, 0.78);
	border: 0.0625rem solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
}

.tw-product-gallery-lightbox__close {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 4;
}

.tw-product-gallery-lightbox__previous {
	grid-area: previous;
}

.tw-product-gallery-lightbox__next {
	grid-area: next;
}

.tw-product-gallery-lightbox__previous:disabled,
.tw-product-gallery-lightbox__next:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.tw-product-gallery-lightbox__close:focus-visible,
.tw-product-gallery-lightbox__previous:focus-visible,
.tw-product-gallery-lightbox__next:focus-visible {
	outline: 0.125rem solid #ffffff;
	outline-offset: 0.1875rem;
}

.tw-product-gallery-lightbox__counter {
	grid-area: counter;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.1875rem;
	margin: 0;
	padding: 0.4375rem 0.75rem;
	color: #ffffff;
	background: rgba(17, 17, 17, 0.78);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tw-product-gallery-lightbox[data-state="opening"]
	.tw-product-gallery-lightbox__overlay,
.tw-product-gallery-lightbox[data-state="closing"]
	.tw-product-gallery-lightbox__overlay {
	opacity: 0;
}

.tw-product-gallery-lightbox[data-state="opening"]
	.tw-product-gallery-lightbox__dialog,
.tw-product-gallery-lightbox[data-state="closing"]
	.tw-product-gallery-lightbox__dialog {
	opacity: 0;
	transform: scale(0.985);
}

html.tw-gallery-lightbox-open,
html.tw-gallery-lightbox-open body {
	overflow: hidden;
	overscroll-behavior: none;
}

@media (max-width: 47.999rem) {
	.tw-product-gallery-lightbox {
		padding: 0;
	}

	.tw-product-gallery-lightbox__dialog {
		grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
		width: 100%;
		height: 100dvh;
		padding: 0.625rem;
		border: 0;
		border-radius: 0;
	}

	.tw-product-gallery-lightbox__stage {
		border-radius: 0;
	}

	.tw-product-gallery-lightbox__close {
		inset-block-start: max(0.625rem, env(safe-area-inset-top));
		inset-inline-end: 0.625rem;
	}
}

/* ============================================================
   11. Accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.tw-product-gallery__slide,
	.tw-product-gallery__control,
	.tw-product-gallery__zoom,
	.tw-product-gallery__progress::-webkit-progress-value,
	.tw-product-gallery-lightbox__overlay,
	.tw-product-gallery-lightbox__dialog {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.tw-product-gallery__media,
	.tw-product-gallery__control,
	.tw-product-gallery__zoom,
	.tw-product-gallery-lightbox__dialog {
		border-color: CanvasText;
	}

	.tw-product-gallery__control,
	.tw-product-gallery__zoom {
		color: CanvasText;
		background: Canvas;
	}
}