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

.mockup-box {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    margin: 0;
    width: 280px;
    cursor: zoom-in;
}

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

/* grid */
.ekomidia-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ===============================
   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 */
}

.mockup-box.is-zoom {
    position: fixed;

    width: 50vw;
    height: auto;
	
	max-width: 720px;
    min-width: 320px;

    top: 50%;
    left: 50%;

    /* 🚨 JS controla o scale aqui */
    transform: translate(-50%, -50%);

    background: #fff;
    z-index: 9999;

    cursor: grab;
    overflow: visible;
}

/* 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;
}