/**
 * w5.9.4 — Badge de afinidad allá donde WooCommerce/WoodMart pinte un
 * producto, en CUALQUIER página del sitio (no solo tienda/producto/inicio).
 *
 * David: el badge (via woocommerce_after_shop_loop_item, o insertado a mano
 * con [mpa_affinity_badge] desde un Hook de WoodMart) puede aparecer en una
 * entrada de blog, en un carrusel de la home, en cualquier sitio donde se
 * muestren productos — pero MPA_Shortcodes::enqueue() (mpa-frontend.css
 * completo) solo se carga en producto/tienda/taxonomía/inicio/cuenta, o en
 * páginas cuyo post_content contenga literalmente uno de los shortcodes de
 * este plugin. Ninguna de esas dos condiciones detecta un badge que aparece
 * porque WooCommerce/WoodMart pintó un producto por su cuenta (un bloque de
 * Gutenberg "Productos", un elemento de WoodMart/Elementor, un widget) — el
 * badge SÍ se renderiza ahí (el hook de servidor no sabe de páginas, dispara
 * en cualquier loop de producto), pero antes de este fix el CSS no cargaba,
 * así que se veía como texto plano sin ninguna caja ni estilo.
 *
 * No hay forma fiable de detectar de antemano, antes de wp_head, si una
 * página concreta va a pintar un producto — un bloque nativo, un shortcode
 * de WooCommerce/WoodMart o un widget de Elementor no dejan necesariamente
 * ningún rastro localizable en post_content (Elementor, por ejemplo, guarda
 * su configuración en meta, no en el contenido). Por eso este archivo se
 * carga SIEMPRE (ver MPA_Shortcodes::enqueue_badge_loop_css(), enganchado a
 * wp_enqueue_scripts sin ningún gating de página) — a diferencia de
 * mpa-frontend.css, que sí sigue cargándose solo donde hace falta.
 *
 * Deliberadamente pequeño: son exactamente las mismas reglas que antes
 * vivían dentro de mpa-frontend.css (secciones "BADGE EN ARCHIVO DE
 * PRODUCTOS" y "BADGE EN EL LOOP") — se han movido aquí, no duplicado; ver
 * el comentario en mpa-frontend.css donde vivían antes. mpa-frontend.css
 * declara esta hoja como dependencia (wp_enqueue_style(..., ['mpa-badge-loop'], ...))
 * así que en las páginas donde ambas cargan, esta hoja se imprime una única
 * vez, nunca duplicada.
 *
 * Solo usa variables del propio tema (--wd-primary-color / --wd-primary-color-light),
 * ya globales en cualquier página de un sitio con WoodMart activo — no depende
 * de ninguna variable --mpa-* propia del plugin, así que es válido standalone.
 * Sin JS: el badge llega ya calculado en el HTML servido (ver el comentario
 * "BADGE EN EL LOOP" más abajo) — nada de mpa-frontend.js hace falta para
 * que se vea y funcione correctamente en una página fuera del plugin.
 */

/* ── BADGE DE AFINIDAD EN ARCHIVO ──────────────────────────── */

.mpa-badge-wrap {
    display: inline-flex;
    align-items: center;
}

.mpa-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: 'Goodly Light';
    font-weight: bold;
    background: var(--wd-primary-color-light);
    border: none;
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
    line-height: 1;
}

.mpa-badge__label {
    font-family: 'Goodly Light';
    font-weight: bold;
    text-transform: lowercase;
    font-size: .68rem;
    letter-spacing: -.01em;
    color: var(--wd-primary-color) !important;
}

.mpa-badge__score {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}

.mpa-badge__num {
    font-family: 'Goodly Light';
    font-size: .64rem;
    font-weight: bold;
    letter-spacing: -.01em;
    color: var(--wd-primary-color) !important;
}

.mpa-badge__sym {
    font-family: 'Goodly Light';
    font-size: .53rem;
    font-weight: bold;
    color: var(--wd-primary-color) !important;
}

.mpa-badge:hover { opacity: .75; }

/* ══ BADGE EN EL LOOP — posicionado por el hook del servidor ═════
 * Se renderiza ya resuelto vía woocommerce_after_shop_loop_item
 * (o [mpa_affinity_badge] insertado manualmente), en el flujo normal
 * tras el resto del contenido del producto. Sin JS: llega calculado
 * en el HTML.
 *
 * IMPORTANTE: .mpa-badge-wrap NO es hijo directo de .wd-product ni de
 * .wd-product-wrapper — WoodMart envuelve cada hook en un
 * <div class="wd-el-hook wd-XXXXXXXX"> intermedio (hash de clase que
 * varía y no es fiable como selector), así que se apunta a él vía :has()
 * en vez de por nombre.
 *
 * Dos pasos, verificados en el navegador contra la estructura real:
 * 1) margin-top:auto en el hook reserva el hueco vertical libre por
 *    encima de sí mismo (funciona: es hijo directo del flex-column).
 * 2) Pero el hook tiene display:block por defecto, así que el badge
 *    quedaba arriba DENTRO de ese hueco reservado, no pegado al fondo.
 *    display:flex + align-items:flex-end en el propio hook resuelve
 *    esto, alineando el badge al final del espacio que el margin-top
 *    auto ya reservó.
 * ═══════════════════════════════════════════════════════════════ */

.wd-product { position: relative; }

.wd-product-wrapper > *:has(> .mpa-badge-wrap) {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
}

.mpa-badge-wrap {
    z-index: 2;
}