/**
 * ProductCard Height Fix
 * Ajusta la altura de las tarjetas de producto
 * 
 * @package FlyntChild
 * @version 1.0.1
 * 
 * Changelog:
 * v1.0.1 - Agregado aspect-ratio 1:1 para imágenes cuadradas
 * v1.0.0 - Versión inicial con altura optimizada
 */

/* ========================================================================
   PRODUCTCARD - Ajustes de altura
   ======================================================================== */

/* Contenedor de imagen - Altura optimizada */
.productCard-imageWrapper {
    align-items: center;
    /* aspect-ratio: 1 / 1; */
    background: #fff;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: auto !important;
    min-height: 100px !important;
}

/* Asegurar que la imagen se adapte correctamente */
.productCard-imageWrapper img,
.productCard-image,
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    /* max-height: 100%; */
    aspect-ratio: 1;
}

/* Link de la imagen también debe adaptarse */
.productCard-imageLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Picture element también debe ser flexible */
.productCard-imageWrapper picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ========================================================================
   BADGES - Ajustar posicionamiento con nueva altura
   ======================================================================== */

.productCard-saleBadge,
.productCard-discountBadge {
    position: absolute;
    top: 8px;
    z-index: 10;
    width: fit-content;
    max-width: fit-content;
}

.productCard-saleBadge {
    left: 8px;
}

.productCard-discountBadge {
    right: 8px;
}

/* ========================================================================
   CONTENIDO - Espaciado entre elementos
   ======================================================================== */

.productCard-content > * {
    /* margin-bottom: 0 !important; */
}

/* Prevenir borde negro y cambios de tamaño en hover/focus */
.productCard-content > *:hover,
.productCard-content > *:focus {
   
    outline: none !important;
    transform: none !important;
    scale: none !important;
}

/* Eliminar outline y border en elementos con focus */
.productCard textarea:focus,
.productCard textarea:focus-visible,
.productCard div:focus,
.productCard div:focus-visible,
.productCard img:focus,
.productCard img:focus-visible,
.productCard span:focus,
.productCard span:focus-visible {
    outline: none !important;
    border-style: none !important;
}

/* ========================================================================
   BOTONES - Padding y gap
   ======================================================================== */

.productCard-buttons {
    padding: 0 0.5rem 0.5rem !important;
    gap: 0;
}

/* ========================================================================
   RESPONSIVE - Mantener proporciones en diferentes pantallas
   ======================================================================== */

@media (max-width: 768px) {
    .productCard-imageWrapper {
        min-height: 80px !important;
    }
}

@media (min-width: 1024px) {
    .productCard-imageWrapper {
        min-height: 120px !important;
    }
}

/**
 * NOTAS TÉCNICAS:
 * 
 * - height: auto permite que la imagen determine la altura
 * - min-height: 100px asegura una altura mínima consistente
 * - display: flex con align-items y justify-content centra la imagen
 * - aspect-ratio: 1 / 1 hace que todas las imágenes sean cuadradas
 * - object-fit: contain REMOVIDO para permitir que aspect-ratio funcione
 * - Aplica a ProductCard y también a productos de WooCommerce estándar
 * - Badges posicionados absolutamente se mantienen en su lugar
 */