/**
 * MB Badge Vendido (Piezas Únicas) — Maderas Barber / Tonewood
 * Posiciona el badge sobre la imagen del producto. Las clases `.mb-badge`
 * y `.mb-badge--{position}` son compartidas con `mbfreeshipping` sin
 * colisionar gracias al modificador --{type} (sold-out vs free-shipping).
 *
 * El tamaño efectivo se sobreescribe inline desde el JS con el % que
 * configures en BO.
 */

/* El contenedor padre debe ser position:relative; lo forzamos aquí por si
   el tema base no lo aplica. El JS también lo asegura runtime. */
.thumbnail-container,
.thumbnail-container .thumbnail-top,
.product-cover,
.product-thumb-container,
.cover-image-ecommzoom,
.products .product-miniature .thumbnail-container {
    position: relative;
}

.mb-badge {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    max-width: 35%;
    height: auto;
    line-height: 0;
}

.mb-badge img {
    width: 100%;
    height: auto;
    display: block;
}

/* Posiciones */
.mb-badge--top-left    { top: 8px;    left: 8px; }
.mb-badge--top-right   { top: 8px;    right: 8px; }
.mb-badge--bottom-left { bottom: 8px; left: 8px; }
.mb-badge--bottom-right{ bottom: 8px; right: 8px; }
.mb-badge--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
}

/* En ficha de producto la imagen principal puede ser mayor — el JS aplica
   el % configurado inline, así que esta regla es solo fallback. */
.product-cover .mb-badge,
.product-thumb-container .mb-badge,
.cover-image-ecommzoom .mb-badge {
    max-width: 25%;
}
.cover-image-ecommzoom .mb-badge--center,
.product-cover .mb-badge--center {
    max-width: 40%;
}

/* === Ocultar el badge dentro de zooms/flyouts ============================
 * El cover de Ecommbase B2B usa easyzoom (adjacent), que clona el contenido
 * del `.cover-image-ecommzoom` dentro de un `.easyzoom-flyout` adyacente
 * para mostrar la región ampliada. Si el badge está sobre la imagen, la
 * librería lo arrastra a la copia y aparece duplicado en el panel del zoom.
 * Lo escondemos en cualquier contenedor de zoom/lightbox conocido.
 */
.easyzoom-flyout .mb-badge,
.easyzoom-notice .mb-badge,
.container_ecommzoom .mb-badge,
.content_zoom .mb-badge,
.zoo-item .mb-badge,
.fancybox-container .mb-badge,
.lg-outer .mb-badge,
.mfp-content .mb-badge,
.swiper-zoom-container .mb-badge {
    display: none !important;
}

/* Móvil — reducir un poco para no tapar imagen */
@media (max-width: 575px) {
    .mb-badge {
        max-width: 28%;
    }
    .mb-badge--top-left,
    .mb-badge--top-right    { top: 4px; }
    .mb-badge--top-left,
    .mb-badge--bottom-left  { left: 4px; }
    .mb-badge--top-right,
    .mb-badge--bottom-right { right: 4px; }
    .mb-badge--bottom-left,
    .mb-badge--bottom-right { bottom: 4px; }
}