/* ===============================
   ESTADO NORMAL (miniaturas)
================================ */

/* grid */
.ekomidia-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 80%;
    margin: 10px auto 25px;
    position: relative;
	 z-index: 100000000;
}

.ekomidia-slider {
    display: contents; /* 🔥 importante */
}

.mockup-box {
    position: relative;
    width: 15%;
    cursor: zoom-in;
    transform: none;
}


/* 🔥 só reseta transform quando NÃO estiver em zoom */
.mockup-box:not(.is-zoom) {
    transform: none;
}



/* ===============================
   MOCKUP
================================ */

.mockup-stage {
    position: relative;
}

.mockup-stage img {
    width: 100%;
    display: block;
}

.imagem-recipiente,
.imagem-rotulo {
    position: absolute;
    inset: 0;
}

/* ===============================
   ZOOM
================================ */

body.ekomidia-zoom-open {
    overflow: hidden; /* 🔒 trava scroll do body */
}



.ekomidia-zoom-stage {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
}

.ekomidia-zoom-stage .ekomidia-gallery {
    width: 50vw;
    max-width: 1024px;
    min-width: 320px;
    pointer-events: auto;
}

/* overlay */
.mockup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 9998;
}

/* controles */
.mockup-controls {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10000;
}






.ekomidia-gallery.is-zoomed {
    overflow: hidden;
}

.ekomidia-gallery.is-zoomed .ekomidia-slider {
    display: flex;
    transition: transform .4s ease;
}

.ekomidia-gallery.is-zoomed .mockup-box {
    min-width: 100%;
    width: 100%;
}




.ekomidia-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	background: rgba(0,0,0,.6);
	color: #fff;
	border: none;
 border-radius: 100px;
	font-size: 32px;
	padding: 10px 14px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.ekomidia-nav.prev { left: 10px; }
.ekomidia-nav.next { right: 10px; }

/* 👉 só aparece quando está em zoom */
.ekomidia-gallery.is-zoomed .ekomidia-nav {
	opacity: 1;
	pointer-events: auto;
}







.export-mode .imagem-rotulo {
    will-change: transform;
    backface-visibility: hidden;
}






@media (max-width: 800px) {
	
	.mockup-box {
		width: 27%;
	}

}