/* Gastrokuchyňa – Hover sekundárny obrázok
 * Sekundárny obrázok prekrýva hlavný a plynulo sa zobrazí po pridaní triedy
 * `gk-hover-active` (pridáva JS po uplynutí oneskorenia), no až keď je obrázok
 * naozaj stiahnutý (`gk-hover-loaded`). Kým sa sťahuje, zobrazí sa loader.
 */

:root {
	--gk-hover-fade: 350ms;
}

/* Vlastný pozičný kontajner OKOLO hlavného obrázka (vytvára JS).
   Obaľuje iba obrázok, takže sa nedotkne umiestnenia štítkov témy. */
.gk-hover-img-context {
	position: relative;
	display: block;
}

/* Obal sekundárneho obrázka – leží presne nad hlavným obrázkom (kryje celý kontajner). */
.gk-hover-secondary-image-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	pointer-events: none;
	z-index: 1;
	line-height: 0;
}

.gk-hover-secondary-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--gk-hover-fade) ease-in-out;
}

/* Zľavový/akčný badge musí zostať NAD sekundárnym obrázkom (overlay má z-index:1). */
.gk-hover-enabled .onsale,
.gk-hover-enabled .product-loop-header .onsale {
	z-index: 2;
}

/* will-change zapneme LEN počas aktívneho hoveru, nie natrvalo – inak by si
   každý sekundárny obrázok na stránke dopredu držal vlastnú GPU vrstvu. */
.product.gk-hover-active .gk-hover-secondary-image,
li.product.gk-hover-active .gk-hover-secondary-image {
	will-change: opacity;
}

/* Aktívny stav – obrázok ukážeme až keď je hover aktívny A obrázok je načítaný. */
.product.gk-hover-active.gk-hover-loaded .gk-hover-secondary-image,
li.product.gk-hover-active.gk-hover-loaded .gk-hover-secondary-image {
	opacity: 1;
}

/* Hlavný obrázok plynulo skryjeme, keď je sekundárny aktívny a načítaný.
   Ostáva v toku (len opacity:0), takže kontajner si udrží rozmer – a pod užším
   sekundárnym obrázkom už nepresvitá pôvodný. */
.gk-hover-img-context > img {
	transition: opacity var(--gk-hover-fade) ease-in-out;
}
.product.gk-hover-active.gk-hover-loaded .gk-hover-img-context > img,
li.product.gk-hover-active.gk-hover-loaded .gk-hover-img-context > img {
	opacity: 0;
}

/* Nenápadný loader – objaví sa len ak používateľ podržal kurzor (active)
   a sekundárny obrázok sa ešte sťahuje (loading). */
.gk-hover-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid rgba( 0, 0, 0, 0.15 );
	border-top-color: rgba( 0, 0, 0, 0.55 );
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	transition: opacity 150ms ease-in-out;
}

.product.gk-hover-active.gk-hover-loading .gk-hover-loader,
li.product.gk-hover-active.gk-hover-loading .gk-hover-loader {
	opacity: 1;
	animation: gk-hover-spin 0.7s linear infinite;
}

@keyframes gk-hover-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Rešpektuj preferenciu obmedzeného pohybu. */
@media (prefers-reduced-motion: reduce) {
	.gk-hover-secondary-image {
		transition-duration: 1ms;
	}
	.gk-hover-loader {
		animation: none;
	}
}