/* =====================================================
   WC Miniaturas Horizontales con Navegación
   v1.1.0 – Claudio Díaz
   ===================================================== */

/* =====================================================
   IMAGEN PRINCIPAL: relación 1:1, centrada
   ── Estrategia ──────────────────────────────────────
   El problema de imágenes únicas:
   Si el producto tiene una sola imagen WooCommerce no
   siempre inicializa FlexSlider, por lo que el JS no
   puede inyectar altura. Si los estilos de centrado
   se aplican sin altura, la imagen colapsa a 0 y
   desaparece.

   Solución: los estilos de centrado SOLO se activan
   cuando JS añade la clase .wc-min-activo al elemento
   gallery (lo hace en fijarImagen1a1 al confirmar que
   el viewport existe y tiene dimensiones reales).
   Sin esa clase todo fluye como WooCommerce normal.
   ===================================================== */

/* El aspect-ratio del viewport es seguro aplicarlo
   siempre: solo afecta si .flex-viewport existe. */
.woocommerce-product-gallery .flex-viewport {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;    /* anula el height inline de FlexSlider */
    overflow: hidden !important;
    width: 485px !important;
    max-width: 100% !important; /* responsivo en pantallas pequeñas */
    margin: 0 auto !important;  /* centrado si el contenedor es más ancho */
    box-sizing: border-box !important;
}

/* ── Estilos activos SOLO tras la clase añadida por JS ── */

/* Lista de diapositivas: llena toda la altura del viewport */
.wc-min-activo.woocommerce-product-gallery .flex-viewport .slides {
    height: 100% !important;
}

/* Cada diapositiva (li floated): altura inyectada por JS */
.wc-min-activo.woocommerce-product-gallery .woocommerce-product-gallery__image {
    overflow: hidden !important;
}

/* El enlace centra la imagen con flexbox.
   Solo activo cuando JS ya fijó las alturas → nunca
   colapsa en productos de imagen única. */
.wc-min-activo.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* La imagen encaja sin distorsionar y queda centrada */
.wc-min-activo.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

/* =====================================================
   Contenedor principal del slider de miniaturas
   ===================================================== */

.wc-min-slider-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
}

/* Viewport: recorta y muestra solo las miniaturas visibles */
.wc-min-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* La lista original de FlexSlider dentro del viewport */
.wc-min-viewport .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Cada miniatura ocupa 1/5 del viewport (escritorio: 5 visibles) */
.wc-min-viewport .flex-control-thumbs li {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Miniaturas ocultas (fuera del rango visible) */
.wc-min-viewport .flex-control-thumbs li.wc-min-oculta {
    display: none !important;
}

/* Imagen de cada miniatura */
.wc-min-viewport .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    cursor: pointer !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 3px !important;
    transition: border-color 0.2s ease, opacity 0.2s ease !important;
    opacity: 0.75 !important;
}

/* Miniatura activa (imagen principal mostrada) */
.wc-min-viewport .flex-control-thumbs li img.flex-active,
.wc-min-viewport .flex-control-thumbs li img:hover {
    border-color: #333 !important;
    opacity: 1 !important;
}

/* =====================================================
   Botones de navegación Anterior / Siguiente
   ===================================================== */

.wc-min-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.2s ease, opacity 0.2s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wc-min-btn:hover {
    background: #555 !important;
}

.wc-min-btn:disabled,
.wc-min-btn.wc-min-btn--inactivo {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* Flecha izquierda */
.wc-min-btn-anterior::before {
    content: '\276E';
}

/* Flecha derecha */
.wc-min-btn-siguiente::before {
    content: '\276F';
}

/* =====================================================
   Responsive móvil (≤ 767px): 3 miniaturas visibles
   ===================================================== */

@media (max-width: 767px) {

    /* Cada miniatura ocupa 1/3 del viewport */
    .wc-min-viewport .flex-control-thumbs li {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }

    /* Botones algo más pequeños */
    .wc-min-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
    }
}