/*
 * Etiqueta de imagen: la imagen superpuesta que crea
 * assets/js/mh-dra-image-badge-frontend.js como hermana de cada <img> real
 * (nunca envuelve ni reemplaza el <img> original, así no interfiere con
 * lightbox/zoom/carruseles del tema que esperan encontrar esa imagen tal
 * cual). El ancho lo fija el JS en píxeles (% del ancho real de la imagen);
 * el alto queda en "auto" para que el navegador mantenga la proporción
 * original de la imagen de la etiqueta sin ningún cálculo manual.
 */
.mh-dra-image-badge {
    position: absolute;
    height: auto;
    /* Que nunca tape clics en la imagen, el ícono de wishlist/comparar del
       tema, o el propio enlace al producto. */
    pointer-events: none;
    /* Por encima de la imagen, pero por debajo de cosas como menús o
       modales del tema (z-index bajo a propósito). */
    z-index: 2;
    max-width: none;
}

/*
 * Mismo ajuste de Woodmart que assets/css/mh-dra-frontend.css aplica para
 * el cintillo (ver el comentario largo ahí sobre `wd-add-btn-replace`):
 * ese botón, en el estilo de catálogo "reemplazar por botón", tapa
 * cualquier cosa superpuesta a la imagen en grillas angostas (3+
 * columnas) y carruseles de Elementor — acá tapaba la Etiqueta de imagen
 * en productos que no tenían ningún cintillo activo (así que nunca
 * llevaban `mh-dra-has-ribbon`). Mismo criterio: solo se oculta en
 * tarjetas donde SÍ se está mostrando etiqueta (`mh-dra-has-badge`), no en
 * todo el catálogo.
 */
.mh-dra-has-badge .wd-add-btn-replace {
    display: none !important;
}