body { background-color: #f8f9fa; }
.hero { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://source.unsplash.com/1600x400/?store'); background-size: cover; color: white; padding: 60px 0; }
.card-product { transition: all 0.2s ease-in-out; border-radius: 10px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.card-product:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.product-img-container { height: 180px; display: flex; align-items: center; justify-content: center; background: #fff; }
.product-img-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* <-- ESTO ES CLAVE: Escala la imagen para que quepa sin deformarse */
}
.card-product .card-body { flex-grow: 1; }
.filtro-categoria.active { background-color: #007bff; color: white; font-weight: bold; }
#modalProductImage { max-height: 400px; }

/* --- ESTILOS PARA LA TARJETA DEL PRODUCTO EN LA CUADRÍCULA --- */

.card-product .product-img-container {
    /* Le damos una altura fija. Todas las cajas de imagen medirán lo mismo. */
    height: 180px; 
    
    /* Centramos la imagen por si es más pequeña que el contenedor */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Opcional: un fondo suave por si la imagen tiene transparencias */
    background-color: #f8f9fa;
    overflow: hidden; /* Esconde cualquier parte de la imagen que se desborde */
}

.card-product .card-img-top {
    /* La magia está aquí */
    width: 100%;
    height: 100%;
    
    /*
     * 'contain': La imagen se encoge hasta caber completa, manteniendo su proporción.
     * Puede dejar espacios en blanco a los lados si la imagen es muy vertical u horizontal.
     * Es la opción más segura para no cortar el producto.
    */
    object-fit: contain; 
    
    /*
     * 'cover' (Alternativa): La imagen se expande hasta llenar el contenedor,
     * manteniendo su proporción pero cortando lo que sobre.
     * Se ve más "lleno", pero puede cortar partes del producto.
     * Descomenta la siguiente línea y comenta la de arriba para probarla.
    */
    /* object-fit: cover; */
}


/* --- ESTILOS PARA LA PÁGINA DE DETALLE DEL PRODUCTO --- */

/* Imagen Principal Grande */
.product-image {
    max-height: 450px; /* Le ponemos una altura máxima */
    width: 100%;
    object-fit: contain; /* Asegura que la imagen principal no se deforme */
}

/* Miniaturas de la Galería */
#galleryThumbs .img-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover; /* Para las miniaturas, 'cover' suele verse mejor */
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

#galleryThumbs .img-thumbnail:hover {
    border-color: #007bff; /* Resaltar al pasar el mouse */
}

/* --- NUEVOS ESTILOS PARA CONTROLAR LA IMAGEN PRINCIPAL --- */

.main-image-container {
    /* 1. Definimos una relación de aspecto (ej: 4:3).
       Esto se logra con un truco de padding-bottom. */
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Para un aspecto 4:3. Usa 100% para 1:1 (cuadrado), 56.25% para 16:9. */
    
    /* 2. Un borde y fondo suave */
    border: 1px solid #eee;
    background-color: #f8f9fa;
    margin-bottom: 1rem; /* Espacio antes de las miniaturas */
}

.main-image-container .product-image {
    /* 1. Lo posicionamos de forma absoluta dentro del contenedor */
    position: absolute;
    
    /* 2. Movemos su punto de anclaje (la esquina superior izquierda) al centro del contenedor */
    top: 50%;
    left: 50%;
    
    /* 3. Usamos 'transform' para mover la imagen hacia atrás por la mitad de su PROPIO tamaño.
       Esto alinea el centro de la imagen con el centro del contenedor. ¡Esta es la magia! */
    transform: translate(-50%, -50%);
    
    /* 4. Le decimos que no puede ser más grande que el contenedor */
    max-width: 100%;
    max-height: 100%;
    
    /* 5. Y que se ajuste sin deformarse */
    object-fit: contain;
}