/* mp_web_qweb 18.0.1.27.0 (2026-10-26; mp26-foto de los ZIP del 26-10): la foto principal de la ficha de METALPROTEC, más
   chica y en un recuadro, como en el paquete del equipo externo (product-image-sizing.css y metal-products.css): 400 px en
   escritorio, 340 entre 761 y 1000 px y 308 hasta 760, con borde de 1 px #dce4e8, radio de 6 px y fondo blanco. La foto
   es la de Odoo (image_1024), entera (contain). Solo en el sitio de METALPROTEC: la clase `mp-ficha-foto` la pone
   views/foto_ficha_mp.xml. Va con `#o-carousel-product` para ganarle a las reglas de website_sale, que lo usan. */
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border: 1px solid #dce4e8;
  border-radius: 6px;
  background: #fff;
}
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer .carousel-inner,
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer .carousel-item,
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer .carousel-item > div,
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer div[name="o_img_with_max_suggested_width"] {
  width: 100%;
  height: 100%;
}
/* El carrusel de Odoo (_computeHeights, en website/static/src/js/content/snippets.animation.js) le escribe a cada foto un
   `min-height` en línea con la altura de la más alta: al cargar, cuando llega una foto y 250 ms después de que cambia el
   tamaño de la ventana. En el recuadro todas miden lo mismo, y un valor viejo saca la foto de él: con esta hoja puesta
   después de la carga, en escritorio quedaba en 547 px (medido en producción el 26-10). Solo `!important` le gana a lo
   escrito en línea. */
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer .carousel-item {
  min-height: 0 !important;
}
.mp-ficha-foto #o-carousel-product .o_carousel_product_outer img.product_detail_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 761px) and (max-width: 1000px) {
  .mp-ficha-foto #o-carousel-product .o_carousel_product_outer { max-width: 340px; }
}
@media (max-width: 760px) {
  .mp-ficha-foto #o-carousel-product .o_carousel_product_outer { max-width: 308px; }
}