.mh-dra-ribbon {
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
}

.mh-dra-ribbon__text {
    display: block;
    white-space: nowrap;
    /* Resguardo: el JS (fitTextToOneLine(), assets/js/mh-dra-frontend.js)
       ya achica la letra para que el texto entre, hasta un mínimo de 8px.
       Si aun así no entra (texto muy largo en una columna muy angosta), que
       se corte prolijo con "…" en vez de quedar un texto cortado a la
       mitad de una letra o recortado feo por el overflow:hidden del
       cintillo. */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/*
 * Parpadeo opcional (por regla, ver "¿Parpadear?" en el editor de la
 * regla): 2 parpadeos durante el primer segundo, pausa de 4 segundos con el
 * cintillo fijo, y se repite el ciclo de 5s indefinidamente.
 *
 * A propósito animación CSS pura (@keyframes sobre opacity) y no JS: corre
 * en el compositor del navegador, no en el hilo principal, así que no tiene
 * costo perceptible ni con varias decenas de cintillos parpadeando a la vez
 * en una grilla de catálogo — a diferencia de un setInterval por cintillo,
 * que sí sumaría trabajo de JS por cada uno.
 */
@keyframes mh-dra-blink {
    0%, 20%, 100% { opacity: 1; }
    5%, 15% { opacity: 0.15; }
    10% { opacity: 1; }
}

.mh-dra-ribbon--blink {
    animation: mh-dra-blink 5s linear infinite;
}

/*
 * Variante de un solo pulso (no infinita) del mismo keyframe de arriba,
 * usada por el ciclo "texto adicional" (ver assets/js/mh-dra-frontend.js):
 * en la fase del texto de descuento (5s), el JS suma esta clase al entrar a
 * la fase y la saca al salir, forzando un reflow para poder repetirla en
 * cada vuelta del ciclo. Con 5s de duración y una sola vuelta, el resultado
 * es "2 parpadeos en el primer segundo, y se queda fijo el resto de la fase"
 * — el mismo timing que ya define el keyframe.
 */
.mh-dra-ribbon--blink-once {
    animation: mh-dra-blink 5s linear 1;
}

@media (prefers-reduced-motion: reduce) {
    .mh-dra-ribbon--blink,
    .mh-dra-ribbon--blink-once {
        animation: none;
    }
}

/* Catálogo: bloque normal a continuación del borde inferior de la foto (no
   la solapa). El ancho real lo fija JS (assets/js/mh-dra-frontend.js) igual
   al de la imagen de la tarjeta, para que funcione igual en grillas de 2, 3+
   columnas y en carruseles con fotos grandes; el alto lo da el propio texto.
   El width:100% de acá es solo el valor inicial antes de que corra el JS. */
.mh-dra-ribbon--catalog {
    margin-top: 4px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.25;
}

/* Producto individual: bloque debajo del título. Márgenes chicos a
   propósito (el gap visual grande venía del propio margen del título del
   tema, no de este bloque; JS también los puede reajustar si detecta algo
   superpuesto). */
.mh-dra-ribbon--single {
    display: inline-block;
    max-width: 100%;
    margin: 3px 0 7px;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.3;
}

/*
 * Ajuste específico de Woodmart: en el estilo de catálogo "reemplazar por
 * botón" (icono de carrito que reemplaza el título/precio, clase
 * `wd-add-btn-replace`), ese botón termina tapando el cintillo en grillas
 * angostas (3+ columnas) y en carruseles armados con Elementor. Se oculta
 * SOLO en las tarjetas donde se está mostrando cintillo (clase
 * `mh-dra-has-ribbon`), no en todo el catálogo.
 *
 * Sin calificar por etiqueta a propósito (nada de `li.product` delante):
 * el loop clásico de WooCommerce arma la tarjeta con `<li>`
 * (Mh_Dra_Frontend::maybe_add_ribbon_class(), vía `woocommerce_post_class`),
 * pero algunos bloques de Woodmart armados con Elementor (carruseles, por
 * ejemplo) arman la tarjeta entera con `<div>` y nunca pasan por esa
 * función — ahí es assets/js/mh-dra-frontend.js (markCard()) el que suma la
 * misma clase, apenas se inicializa el cintillo. Este selector le sirve a
 * cualquiera de los dos caminos.
 *
 * Si en una actualización de Woodmart cambia el nombre `wd-add-btn-replace`,
 * este selector deja de aplicar (no rompe nada, simplemente el botón vuelve
 * a aparecer) — para confirmar el nombre actual: clic derecho sobre el
 * botón → Inspeccionar.
 */
.mh-dra-has-ribbon .wd-add-btn-replace {
    display: none !important;
}

/*
 * Cintillo de volumen (ver assets/js/mh-dra-bulk-ribbon-frontend.js): la
 * transición de atenuación entre líneas es CSS puro (`transition`, no
 * `@keyframes` — acá sí hace falta que el JS controle el timing con
 * setTimeout, por eso una transición simple de opacidad y no una animación
 * con fases fijas como el parpadeo del cintillo con descuento).
 */
.mh-dra-bulk-ribbon__text {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.mh-dra-bulk-ribbon__text--hidden {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mh-dra-bulk-ribbon__text {
        transition: none;
    }
}