/**
 * Plugin-owned gallery (simple + variable, color/size/both).
 * Activated by body.emin-kara-cg-layer (set by Emin_Kara_Import_API_Frontend_Variation_Gallery::body_class).
 * Hides the native Woo gallery entirely.
 */

body.emin-kara-cg-layer .woocommerce-product-gallery,
body.emin-kara-cg-layer .woocommerce-product-gallery-wrapper,
body.emin-kara-cg-layer .wp-block-woocommerce-product-image-gallery,
body.emin-kara-cg-layer div.product > .woocommerce-product-gallery,
body.emin-kara-cg-layer div.product .images.woocommerce-product-gallery {
	display: none !important;
}

body.emin-kara-cg-layer.single-product #emin-color-gallery-root {
	width: 100%;
	max-width: 100%;
	/* Reserve space before JS hydrates — cuts F5 / late JSON layout jump. */
	min-height: clamp(260px, 78vw, 640px);
}

body.emin-kara-cg-layer.single-product #emin-color-gallery-root.emin-cg-empty {
	min-height: 0;
}

body.emin-kara-cg-layer.single-product .emin-color-gallery-root {
	background: transparent !important;
	border-radius: var(--emin-radius-lg, 14px);
	padding: clamp(0.75rem, 1.6vw, 1rem);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: none !important;
}

/* Defensive: kill any residual green inset/border bar that legacy theme/plugin styles
   may paint across the gallery main or its descendants. */
body.emin-kara-cg-layer.single-product .emin-color-gallery-root,
body.emin-kara-cg-layer.single-product .emin-color-gallery-root * {
	box-shadow: none !important;
}

body.emin-kara-cg-layer.single-product .emin-cg-main::before,
body.emin-kara-cg-layer.single-product .emin-cg-main::after,
body.emin-kara-cg-layer.single-product .emin-cg-main-link::before,
body.emin-kara-cg-layer.single-product .emin-cg-main-link::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	background: transparent !important;
}

body.emin-kara-cg-layer.single-product .emin-cg-main {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 760px;
	margin: 0 auto;
	background: transparent;
	border-radius: var(--emin-radius-md, 10px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.emin-kara-cg-layer.single-product .emin-cg-main-link {
	display: block;
	width: 100%;
	height: 100%;
}

body.emin-kara-cg-layer.single-product .emin-cg-main-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
	background: transparent;
	margin: auto;
	cursor: zoom-in;
	transition: none;
	transform: none !important;
}

body.emin-kara-cg-layer.single-product .emin-cg-main {
	cursor: zoom-in;
}

body.emin-kara-cg-layer.single-product .emin-cg-thumbs {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0.25rem 0 0.35rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	width: 100%;
	/* Center thumbs horizontally when they fit; fall back to flex-start so the
	   first thumb remains reachable on overflow. */
	justify-content: safe center;
}

body.emin-kara-cg-layer.single-product .emin-cg-thumb {
	width: 72px;
	height: 72px;
	min-width: 72px;
	max-width: 72px;
	flex: 0 0 72px;
	border-radius: var(--emin-radius-sm, 10px);
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	background: #ffffff;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.emin-kara-cg-layer.single-product .emin-cg-thumb img {
	pointer-events: none;
	user-select: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.emin-kara-cg-layer.single-product .emin-cg-thumb:hover {
	transform: translateY(-1px);
}

body.emin-kara-cg-layer.single-product .emin-cg-thumb--active {
	border-color: rgba(0, 119, 237, 0.55);
	box-shadow: 0 0 0 2px rgba(0, 119, 237, 0.18);
}

body.emin-kara-cg-layer.single-product .emin-color-gallery-hint {
	margin: 0.65rem 0 0;
	padding: 0.6rem 0.85rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--emin-fg-soft, #6e6e73);
	background: #f5f5f5;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--emin-radius-sm, 10px);
}

/* Two-column layout on desktop for variable + simple. */
@media (min-width: 992px) {
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-variable,
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-simple {
		display: grid !important;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		column-gap: clamp(28px, 3vw, 48px);
		align-items: start;
	}

	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-variable #emin-color-gallery-root,
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-simple #emin-color-gallery-root {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		top: auto;
		align-self: start;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		float: none !important;
		clear: none !important;
	}

	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-variable .summary.entry-summary,
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-simple .summary.entry-summary {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
		width: 100% !important;
		float: none !important;
		clear: none !important;
		padding-top: clamp(0.35rem, 1vw, 0.75rem);
	}

	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-variable .woocommerce-tabs,
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product.product-type-simple .woocommerce-tabs,
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product .related.products,
	body.emin-kara-product-ux.emin-kara-cg-layer.single-product div.product .upsells.products {
		grid-column: 1 / -1;
	}
}

/* Live variation price mount must stay visible (theme sometimes collapses empty-looking nodes). */
body.emin-kara-cg-layer.single-product .emin-live-price-section,
body.emin-kara-cg-layer.single-product #emin-live-variation-price,
body.emin-kara-cg-layer.single-product #emin-live-variation-price .price {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body.emin-kara-cg-layer.single-product .emin-live-price-section {
	min-height: 2.5rem;
}

/* "Pseudo-simple" variable product (1 variation, each attribute has 1 option).
   Kill the variations form chrome so the page never flashes empty Color/Size selects.
   The core WooCommerce price template renders (detach bypass in PHP), so price is
   visible immediately. Add-to-cart still posts to variations_form; JS pre-fills values. */
body.emin-kara-pseudo-simple.single-product form.variations_form table.variations,
body.emin-kara-pseudo-simple.single-product form.variations_form .reset_variations,
body.emin-kara-pseudo-simple.single-product form.variations_form .reset_variations_alert,
body.emin-kara-pseudo-simple.single-product form.variations_form .single_variation_wrap .woocommerce-variation,
body.emin-kara-pseudo-simple.single-product .emin-live-price-section,
body.emin-kara-pseudo-simple.single-product #emin-live-variation-price,
body.emin-kara-pseudo-simple.single-product .emin-variation-swatches {
	display: none !important;
}

body.emin-kara-pseudo-simple.single-product form.variations_form .single_variation_wrap {
	display: block !important;
	margin-top: 0.5rem;
}

/* ============================================================================
   Desktop magnifier lens — hover over main image shows a zoomed window.
   Hidden on touch / coarse pointers via JS.
   ============================================================================ */
body.emin-kara-cg-layer.single-product .emin-cg-zoom-lens {
	position: absolute;
	width: 180px;
	height: 180px;
	pointer-events: none;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.22),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	background-repeat: no-repeat;
	background-color: #fff;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 4;
}

body.emin-kara-cg-layer.single-product .emin-cg-zoom-lens.emin-cg-zoom-lens--on {
	opacity: 1;
	transform: scale(1);
}

@media (hover: none), (pointer: coarse) {
	body.emin-kara-cg-layer.single-product .emin-cg-zoom-lens {
		display: none !important;
	}
}

/* ============================================================================
   Lightbox (click main image) — full-viewport image with click-to-zoom + pan,
   keyboard navigation (← → Esc), touch swipe.
   ============================================================================ */
.emin-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.5rem, 2vw, 2rem);
	overscroll-behavior: contain;
	touch-action: none;
	animation: emin-lb-in 0.18s ease-out;
}

body.emin-lightbox-open {
	overflow: hidden !important;
}

@keyframes emin-lb-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.emin-lightbox__stage {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.emin-lightbox__img {
	max-width: 92vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	background: transparent;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: center center;
	transition: transform 0.2s ease;
	will-change: transform;
}

.emin-lightbox__img.emin-lightbox__img--zoomed {
	cursor: grab;
	transition: none;
}

.emin-lightbox__img.emin-lightbox__img--zoomed:active {
	cursor: grabbing;
}

.emin-lightbox__close,
.emin-lightbox__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.94);
	color: #111;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: background 0.15s ease, transform 0.12s ease;
	z-index: 2;
}

.emin-lightbox__close {
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	transform: none;
}

.emin-lightbox__prev {
	left: clamp(0.75rem, 2vw, 1.5rem);
}

.emin-lightbox__next {
	right: clamp(0.75rem, 2vw, 1.5rem);
}

.emin-lightbox__close:hover,
.emin-lightbox__nav:hover {
	background: #fff;
}

.emin-lightbox__nav:active {
	transform: translateY(-50%) scale(0.94);
}

.emin-lightbox__counter {
	position: fixed;
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	pointer-events: none;
}

@media (max-width: 520px) {
	.emin-lightbox__close,
	.emin-lightbox__nav {
		width: 42px;
		height: 42px;
	}
}