.imgProduct{
	overflow: hidden;
}

.imgProduct img:hover{
	transition: .3s all ease;
	opacity:.8;
	transform: scale(1.1,1.1);
}

.badgeNew{
	background:#F0AD4E !important; 
	color:white !important;
}

/* --- CSS PARA IGUALAR LAS FOTOS DE PRODUCTOS --- */

/* 1. Seleccionamos el contenedor <figure> con la clase .imgProduct */
figure.imgProduct {
    display: block;
    position: relative; /* Fundamental para el truco */
    overflow: hidden;   /* Oculta lo que se desborde */
    width: 100%;
    
    /* ¡EL TRUCO! 
       padding-top: 100% crea un "espacio" que es 
       exactamente tan alto como ancho es el contenedor.
       Resultado: Un cuadrado perfecto.
    */
    padding-top: 100%; 
    
    background-color: #f4f4f4; /* Color mientras carga la imagen */
    margin-bottom: 1rem; /* Espacio antes del título del producto */
    
    /* Opcional: bordes redondeados suaves */
    border-radius: 8px; 
}

/* 2. Ahora seleccionamos la imagen <img> DENTRO de .imgProduct */
figure.imgProduct img.img-fluid {
    
    /* Hacemos que la imagen llene el contenedor cuadrado */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ¡LA MAGIA! 
       'cover' rellena el espacio, mantiene la proporción 
       y corta el exceso. No deforma la imagen.
    */
    object-fit: cover; 
    object-position: center; /* Centra la imagen antes de recortar */

    /* Opcional: una transición suave si tienes un zoom */
    transition: transform 0.3s ease;
}
/* --- ESTILOS CORREGIDOS PARA LA PÁGINA DE CHECKOUT (PAGAR) --- */

/* 1. Usamos '.card.bg-white' para ser más específicos que la tienda */
.card.bg-white figure.imgProduct {
    /* Anulamos los estilos de la tienda */
    padding-top: 0 !important; 
    background-color: transparent !important; /* Quitamos el fondo */
    border: none !important; /* Quitamos el borde */
    
    /* Establecemos el tamaño deseado (60px) */
    width: 60px !important; 
    height: 60px !important; 
    
    /* Estilos de posicionamiento */
    position: relative; 
    overflow: hidden;
    border-radius: 6px; 
    margin-bottom: 0 !important; /* Anulamos margen inferior */
    margin-right: 1rem; 
    vertical-align: middle; 
    display: inline-block; 
}

/* 2. Ajustamos la imagen <img> DENTRO de esa figura */
.card.bg-white figure.imgProduct img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 'zoom' para rellenar */
    object-position: center !important;
}

/* 3. Arreglamos la alineación vertical de la fila */
.card.bg-white .row[style*="position:relative"] {
    align-items: center !important; /* Centra verticalmente */
}

/* 4. Alinear el texto al lado de la imagen */
.card.bg-white .media-body { /* Esta es la clase de tu texto */
    vertical-align: middle;
    display: inline-block;
}