/* ======================================================
   ODOO 19 FIX: SNIPPET PRODUCTOS DINÁMICOS
   Forzar imagen 16:9 anulando estilos en línea de JS
   ====================================================== */

/* 1. EL CONTENEDOR DE LA IMAGEN
   Apuntamos a la caja exacta dentro del carrusel.
   Usamos !important en 'height' para romper el cálculo de JS de Odoo.
*/
section[data-snippet="s_dynamic_snippet_products"] .oe_product_image {
    /* Fuerza la proporción 16:9 */
    aspect-ratio: 16 / 9 !important;
    
    /* CRÍTICO: Odoo pone 'height: 200px' (aprox) vía JS. 
       Debemos poner 'auto' para que respete el aspect-ratio. */
    height: auto !important;
    min-height: 0 !important;
    
    /* Asegura que ocupe todo el ancho de su columna */
    width: 100% !important;
    
    /* Flex y posición para contener la imagen de fondo */
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 2. LA IMAGEN INTERNA (EL FONDO)
   Aseguramos que el span con el background-image llene
   el espacio 16:9 que acabamos de crear arriba.
*/
section[data-snippet="s_dynamic_snippet_products"] .oe_product_image .oe_product_image_img {
    /* Absoluto para llenar el padre sin empujar contenido */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Escala la imagen correctamente */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* 3. AJUSTES DE ESTRUCTURA (PADRES)
   Aseguramos que las columnas flexibles no colapsen.
*/
section[data-snippet="s_dynamic_snippet_products"] .o_carousel_product_card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Opcional: Si el título queda muy pegado a la imagen 16:9 */
section[data-snippet="s_dynamic_snippet_products"] .o_wsale_product_information {
    padding-top: 10px !important;
}


.oe_product_cart .oe_product_image {
aspect-ratio: 16 / 9 !important;
}





.o_wsale_product_page .o_wsale_product_images .o_product_detail_img_wrapper, .o_wsale_product_page .o_carousel_product_outer {
aspect-ratio: 16 / 9 !important;
height: auto  !important;
}


#o-carousel-product .carousel-inner img{
aspect-ratio: 16 / 9 !important;


}


#o_wsale_container #products_grid {
    overflow:visible;

}

@media (min-width: 1000px) {
#o-carousel-product .o_carousel_product_indicators .carousel-indicators li {
 
   width: 180px !important;
 aspect-ratio: 16 / 9 !important;
 height: auto  !important;
}
}




@media (max-width: 899px) {
  #o-carousel-product{
    margin: 18px;
    border-radius: 10px;
  }
  
  
  
  .o_wsale_product_page_opt_image_radius_medium {
    --o-wsale-product-image-radius: var(--border-radius);
}
  
  
  
  
}















/* Detecta móviles y cambia a 9:16 */



.video-responsive {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Detecta móviles y cambia a 9:16 */
@media (max-width: 768px) {
    .video-responsive {
      /*  aspect-ratio: 9 / 16;*/
    }
}


/* ocultar boton carrito de compra de lista */
.o_wsale_product_btn_primary{
    display: none !important;
}


#product_full_description H2{
    font-size: 21px;
} 

#product_full_description H3, #product_full_description H4{
    font-size: 18px;
} 

.js_blog .navbar .container  {
    margin-bottom: 20px;
}




.whatsapp-share {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #fff;
    font-size: 30px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-share a:hover {
    background-color: #1DA851;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.o_brand_promotion {
    display: none;
}

 footer {
     border-top: 5px dotted map-get($theme-colors, 'primary');
}

