:root {
    --gallery-height: 80vh; 
    --thumb-width: 90px;
    --scrollbar-width: 10px;
}

.zh-gallery-wrapper {
    display: flex;
    gap: 12px;
    height: var(--gallery-height);
    position: relative;
    font-family: "Montserrat", Sans-serif;
}

/* --- SIDEBAR & THUMBS --- */
.zh-gallery-sidebar {
    flex: 0 0 var(--thumb-width);
    height: 100%;
    display: flex;
    gap: 10px;
}
.zh-gallery-thumbs {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding-right: 5px;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}
.zh-gallery-thumbs::-webkit-scrollbar { display: none; }

.zh-thumb-item {
    cursor: pointer;
    margin-bottom: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
}
.zh-thumb-item.active, .zh-thumb-item:hover {
    opacity: 1;
    border-color: #000;
}
.zh-thumb-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- CONTENEDOR PRINCIPAL (LA CLAVE) --- */
.zh-gallery-main-scroll-container, 
#zh-gallery-main-container {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    
    /* ELIMINAMOS 'scroll-behavior: smooth' AQUÍ PARA QUE NO CHOQUE CON JS */
    
    /* Configuración Snap (Móvil y Escritorio base) */
    scroll-snap-type: y mandatory;
    
    /* Permite salir del scroll naturalmente al llegar al borde */
    overscroll-behavior-y: auto; 
    
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.zh-gallery-main-scroll-container::-webkit-scrollbar { display: none; }

/* --- ITEMS DE IMAGEN --- */
.zh-main-image-item {
    width: 100%;
    height: 100%; /* Forzamos altura exacta del viewport del contenedor */
    
    /* Puntos de anclaje */
    scroll-snap-align: start;
    
    /* OBLIGA a frenar en cada foto (Crucial para móvil) */
    scroll-snap-stop: always; 
    
    position: relative;
    flex-shrink: 0;
    background-color: #fff; 
    display: flex;             /* Centrar imagen */
    align-items: center;       /* Centrar imagen */
    justify-content: center;   /* Centrar imagen */
}

.zh-main-image-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; 
}

/* --- BARRA DE PROGRESO --- */
.zh-scroll-indicator {
    flex: 0 0 var(--scrollbar-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.zh-scroll-text {
    font-size: 10px;
    font-weight: 600;
    color: #aaa;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.zh-scroll-progress-track {
    flex: 1;
    width: 1px;
    background-color: #e0e0e0;
    position: relative;
}
.zh-scroll-progress-bar {
    width: 2px; /* Un poco más gruesa para verse mejor */
    background-color: #000;
    height: 0%;
    position: absolute;
    top: 0;
    left: -0.5px;
    transition: height 0.1s linear;
}

/* --- MÓVIL --- */
@media (max-width: 767px) {
    .zh-gallery-wrapper {
        height: 55vh; /* Un poco más de altura para que quepa todo */
        min-height: 400px;
        gap: 0;
        position: relative; /* Necesario para posicionar los thumbs */
    }
    
    /* 1. Sidebar (Texto SCROLL vertical) */
    .zh-gallery-sidebar {
         flex: 0 0 20px; /* Mantenemos la barra lateral estrecha */
         z-index: 5;
    }
    /* Aseguramos que el texto scroll se vea */
    .zh-scroll-text { display: block; } 

    /* 2. Contenedor de Imágenes Principales */
    .zh-gallery-main-scroll-container {
        height: 100%;
        /* Agregamos relleno abajo para que los thumbs no tapen la última parte de la foto */
        padding-bottom: 60px; 
    }
    .zh-main-image-item img {
        object-fit: contain;
        /* Alineamos la imagen arriba para dejar espacio abajo a los thumbs */
        object-position: center 40%; 
    }

    /* 3. TIRA DE MINIATURAS (Ahora visible) */
    .zh-gallery-thumbs {
        display: flex !important; /* Forzamos que aparezca */
        position: absolute;
        bottom: 10px;       /* Pegado abajo */
        left: 25px;         /* Dejamos espacio a la izquierda para la barra "SCROLL" */
        right: 0;
        height: 50px;       /* Altura de la tira */
        
        flex-direction: row; /* Horizontal */
        justify-content: center; /* Centradas */
        align-items: center;
        gap: 8px;
        
        padding: 0 10px;
        overflow-x: auto; /* Permite deslizar si hay muchas fotos */
        z-index: 10;
        
        /* Opcional: Fondo sutil para que resalten sobre la foto */
        /* background: rgba(255,255,255,0.5); 
           backdrop-filter: blur(2px); 
           border-radius: 20px 0 0 20px; */
    }

    /* Estilo de cada Miniatura en Móvil */
    .zh-thumb-item {
        width: 40px;      /* Tamaño mini */
        height: 40px;
        flex: 0 0 40px;   /* Evita que se aplasten */
        margin-bottom: 0; /* Quitamos margen vertical de escritorio */
        border-radius: 4px;
        border: 1px solid #ddd;
        opacity: 0.5;
        background: #fff;
        transition: all 0.2s;
    }

    /* Miniatura Activa */
    .zh-thumb-item.active {
        opacity: 1;
        border-color: #000;
        transform: scale(1.1); /* Efecto pop */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Ocultar barra de scroll de los thumbs horizontales */
    .zh-gallery-thumbs::-webkit-scrollbar { display: none; }
}