/*
 * assets/css/gallery.css — galéria detailu produktu (v2, 2.9.2026).
 *
 * Markup si stavia assets/js/gallery.js (.lu-gal + .lu-galbox); pôvodný Woo
 * zoznam .woocommerce-product-gallery dostane [hidden] a slúži len ako zdroj
 * dát + fallback bez JS. Identický súbor v témach lucide-sk aj lucide-hu.
 */

/* Woo drží galériu na opacity:0, kým ju neinicializuje JEHO JS — ten vypíname,
   takže fallback zoznam odkrývame natvrdo. */
.woocommerce-product-gallery { opacity: 1 !important; }

/* Zdrojový markup po prevzatí galérie JS-om. */
.lu-gal-source[hidden] { display: none !important; }

/* ---- hlavná galéria ----------------------------------------------------- */

.lu-gal {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.lu-gal__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid #eceae6;
	border-radius: 14px;
	overflow: hidden;
	touch-action: pan-y;
}

.lu-gal__open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 18px;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.lu-gal__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity 0.16s ease;
}

.lu-gal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #e2dfd9;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1c1b18;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lu-gal__nav:hover,
.lu-gal__nav:focus-visible {
	background: #0e0e0e;
	border-color: #0e0e0e;
	color: #fff;
}

.lu-gal__nav--prev { left: 10px; }
.lu-gal__nav--next { right: 10px; }

.lu-gal__count {
	position: absolute;
	right: 12px;
	bottom: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(14, 14, 14, 0.72);
	color: #fff;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	pointer-events: none;
}

/* ---- pás miniatúr ------------------------------------------------------- */

.lu-gal__thumbs {
	display: flex;
	gap: 10px;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.lu-gal__thumb {
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
	padding: 5px;
	border: 2px solid #e6e3dd;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.lu-gal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lu-gal__thumb:hover,
.lu-gal__thumb:focus-visible { border-color: #b9b4aa; }

.lu-gal__thumb.is-active { border-color: #0e0e0e; }

/* ---- lightbox ----------------------------------------------------------- */

.lu-galbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overscroll-behavior: contain;
}

.lu-galbox::backdrop { background: rgba(10, 10, 10, 0.9); }

.lu-galbox-open { overflow: hidden; }

.lu-galbox__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.lu-galbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	padding: 56px 72px 12px;
	touch-action: pan-y;
}

.lu-galbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	background: #fff;
}

.lu-galbox__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lu-galbox__close:hover,
.lu-galbox__close:focus-visible { background: rgba(255, 255, 255, 0.24); }

.lu-galbox__count {
	position: absolute;
	top: 24px;
	left: 20px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
}

.lu-galbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lu-galbox__nav:hover,
.lu-galbox__nav:focus-visible { background: rgba(255, 255, 255, 0.24); }

.lu-galbox__nav--prev { left: 14px; }
.lu-galbox__nav--next { right: 14px; }

.lu-galbox__thumbs {
	display: flex;
	gap: 8px;
	max-width: min(92vw, 720px);
	padding: 10px 4px 16px;
	overflow-x: auto;
	scrollbar-width: thin;
	flex: 0 0 auto;
}

.lu-galbox__thumb {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	padding: 4px;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lu-galbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lu-galbox__thumb:hover { opacity: 1; }

.lu-galbox__thumb.is-active {
	border-color: #fff;
	opacity: 1;
}

/* ---- mobil -------------------------------------------------------------- */

@media (max-width: 640px) {
	.lu-gal__thumb { width: 64px; height: 64px; }
	.lu-gal__nav { width: 38px; height: 38px; }
	.lu-galbox__stage { padding: 52px 10px 8px; }
	.lu-galbox__nav { display: none; } /* na mobile sa listuje swipom a miniatúrami */
}

@media (prefers-reduced-motion: reduce) {
	.lu-gal__img,
	.lu-gal__nav,
	.lu-gal__thumb,
	.lu-galbox__thumb,
	.lu-galbox__close,
	.lu-galbox__nav { transition: none; }
}