/**
 * nsr_lastunits — estilos del badge "Últimas Unidades"
 *
 * Los colores, tamaño de fuente y radio vienen como <style> inline inyectados
 * por hookDisplayHeader. Aquí definimos estructura, forma y posición.
 *
 * Estilo: franja diagonal que sale ligeramente a la izquierda de la portada.
 */

/* ── Ficha de producto ─────────────────────────────────────────────────── */

.product-leftside {
    position: relative;
}

ul.product-flags.js-product-flags {
    position: absolute;
    top: 20px;
    left: -6px;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
    transform: scale(1.12);
    transform-origin: left center;
}

/* ── Listados de categoría / búsqueda ──────────────────────────────────── */

.thumbnail-container {
    position: relative;
    overflow: visible !important;
}

/* Desactivamos overflow:hidden en los ancestros que puedan recortar el badge */
.js-product-miniature,
.js-product-miniature article,
.js-product-miniature .product-miniature,
.product-miniature {
    overflow: visible !important;
}

ul.nsr-lu-flags-list {
    position: absolute;
    top: 10px;
    left: -6px;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
    transform: scale(0.88);
    transform-origin: left center;
}

/* ── Badge — franja con corte diagonal ────────────────────────────────── */
/*
 * Sale -6px a la izquierda y 20px desde arriba: efecto etiqueta pegada.
 * El lado derecho se corta en diagonal con clip-path.
 * border-radius: 0 para que el tema no interfiera con la forma.
 */

.product-flags .product-flag.nsr-lastunits,
ul.nsr-lu-flags-list .product-flag.nsr-lastunits {
    display: inline-block;
    padding: 5px 22px 5px 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
    white-space: nowrap;
    cursor: default;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    position: relative;
    z-index: 10;
    animation: nsr-lu-fadein 0.25s ease;
}

@keyframes nsr-lu-fadein {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Override por si el tema fuerza padding o border-radius */
ul.product-flags .product-flag.nsr-lastunits {
    padding: 5px 22px 5px 10px !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
}

/* ── Móvil: el listado usa miniaturas grandes, mismo tamaño que ficha ── */
@media (max-width: 767px) {
    ul.nsr-lu-flags-list {
        transform: scale(1.12);
    }
}