/**
 * MB Envío Gratis Badge — Maderas Barber / Tonewood
 * Posiciona el badge sobre la imagen del producto en miniatura y en ficha.
 * Comparte clases con mbsoldoutbadge (mb-badge--*) sin colisionar gracias al
 * modificador --{type}, que diferencia free-shipping de sold-out.
 */

/* El contenedor padre debe ser position:relative para que el badge se ancle.
   Los temas estándar de PS 8 ya lo aplican, pero forzamos por si acaso. */
.thumbnail-container,
.thumbnail-container .thumbnail-top,
.product-cover,
.product-thumb-container,
.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 — permitir badge un poco más grande */
.product-cover .mb-badge,
.product-thumb-container .mb-badge {
    max-width: 25%;
}

/* En móvil reducir tamaño para no tapar la 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; }
}