/* =========================================================
   PELISANIME SMART PRODUCT IMAGES — v2.2.0
   El CSS DEFINE el formato. El JS lo detecta automáticamente.
========================================================= */

.ht-product[data-id] {
    position: relative;
}

.ht-product[data-id] .ht-product-image-wrap {
    width: 100% !important;
}

/* ESCRITORIO: FORMATO HORIZONTAL */
.ht-product[data-id] .ht-product-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.ht-product[data-id] .ht-product-image > a,
.ht-product[data-id] .ht-product-image a:first-child {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.ht-product[data-id] .ht-product-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: opacity .18s ease, transform .35s ease;
}

.ht-product[data-id] .ht-product-image img.pa-smart-image-changing {
    opacity: .72;
}

/* Neutraliza dimensiones HTML heredadas de thumbnails verticales */
.ht-product[data-id] .ht-product-image img[width],
.ht-product[data-id] .ht-product-image img[height] {
    width: 100% !important;
    height: 100% !important;
}

.ht-product[data-id]:hover .ht-product-image img.pa-smart-image-loaded {
    transform: scale(1.02);
}

/* TABLET */
@media (max-width: 1024px) {
    .ht-product[data-id] .ht-product-image {
        aspect-ratio: 16 / 9 !important;
    }
}

/* MÓVIL: cambia solo esta proporción si quieres otro formato.
   El plugin detectará automáticamente el cambio. */
@media (max-width: 767px) {
    .ht-product[data-id] .ht-product-image {
        aspect-ratio: 4 / 5 !important;
    }
}

/* =========================================================
   MODO GALERÍA FORZADA
   ACTIVADOR: agrega la clase .pa-gallery-horizontal al WIDGET
   de Woolentor (el contenedor, no a cada producto).
   El JS detecta esta clase y usa SIEMPRE la primera foto de
   galería en vez de la portada, sin comparar proporciones.
   Aquí solo controlamos que el formato se quede en 16:9 en
   TODOS los tamaños de pantalla, incluido móvil.
========================================================= */
.pa-gallery-horizontal .ht-product-image {
    aspect-ratio: 16 / 9 !important;
}

@media (max-width: 1024px) {
    .pa-gallery-horizontal .ht-product-image {
        aspect-ratio: 16 / 9 !important;
    }
}

@media (max-width: 767px) {
    .pa-gallery-horizontal .ht-product-image {
        aspect-ratio: 16 / 9 !important;
    }
}