body.exopite-no-scroll { overflow: hidden !important; }

.exopite-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.95);
    z-index: 999999; display: none; user-select: none;
}
.exopite-stage {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 80px 60px; box-sizing: border-box;
}
.exopite-box {
    position: relative; cursor: grab;
}
.exopite-box.is-grabbing { cursor: grabbing; }

.exopite-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    transform-origin: center center;
    transition: transform 0.15s ease;
    will-change: transform;
    display: block;
}
.exopite-box.is-grabbing .exopite-img { transition: none; }
.exopite-box.is-zoomed { cursor: zoom-out; }

/* Close + external: box-on belül, felül */
.exopite-btn {
    background: rgba(255,255,255,0.1); border: none;
    color: #fff; font-size: 20px; cursor: pointer;
    padding: 10px; border-radius: 5px;
    line-height: 1;
}
.exopite-close {
	position: absolute;
	top: -50px;
	right: 0;
	font-size: 30px;
	line-height: 16px;
	padding-bottom: 14px;
}
.exopite-external { position: absolute; top: -50px; right: 50px; text-decoration: none; display: flex; align-items: center; }

/* Nav: overlay-en belül, absolute — az overlay már fixed, ez elég */
.exopite-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    font-size: 28px; padding: 14px 16px;
    z-index: 10;
}
.exopite-prev { left: 16px; }
.exopite-next { right: 16px; }

/* Counter: overlay tetején középen */
.exopite-counter {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 14px; background: rgba(0,0,0,0.5);
    padding: 4px 14px; border-radius: 20px; z-index: 10;
    white-space: nowrap;
}

/* Caption: box alatt */
.exopite-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center; color: rgba(255,255,255,0.8);
    font-size: 14px; padding: 0 20px;
}

/* Thumbs: overlay alján */
.exopite-thumb-wrap {
	position: absolute;
	bottom: 2px;
	width: 100%;
	max-width: 100vw;
	overflow-x: auto;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	z-index: 10;
	display: flex;
	align-content: center;
	justify-content: center;
}
.exopite-thumb-wrap::-webkit-scrollbar { display: none; }
.exopite-thumb-track {
    display: flex; gap: 8px; justify-content: flex-start;
    padding: 4px 0;
}
.exopite-thumb {
    width: 72px; height: 48px; flex-shrink: 0;
    cursor: pointer; opacity: 0.45;
    border: 2px solid transparent; border-radius: 3px;
    overflow: hidden; transition: opacity 0.2s, border-color 0.2s;
}
.exopite-thumb:hover  { opacity: 0.75; }
.exopite-thumb.is-active { opacity: 1; border-color: #009688; }
.exopite-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exopite-zoom-out { position: absolute; top: -50px; right: 150px; }
.exopite-zoom-in  { position: absolute; top: -50px; right: 100px; }
.exopite-zoom-reset  { position: absolute; top: -50px; right: 200px; }
@media only screen and (max-width:767px) {
    .exopite-stage {
        padding: 60px 5px;
    }
    .exopite-prev {
        left: 0;
    }
    .exopite-next {
        right: 0;
    }
}