/**
 * Estilos del módulo productbadges.
 * El wrapper usa position:absolute para solaparse sobre la imagen del producto.
 * El contenedor padre del tema necesita position:relative (el tema Classic ya lo tiene).
 *
 * @author Asdin
 */

/* Contenedor de badges: anclado a la esquina superior del contenedor de imagen */
.productbadges-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none; /* no interfiere con los clicks sobre la imagen */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
}

/* Badge individual */
.productbadges-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: nowrap;
    /* Los colores de fondo y texto se aplican inline desde el template */
}

/* Posición superior izquierda: alineación por defecto (flex-start) */
.productbadges-top-left {
    align-self: flex-start;
}

/* Posición superior derecha */
.productbadges-top-right {
    align-self: flex-end;
}

/*
 * En el listado de productos el tema Classic envuelve la imagen en
 * .thumbnail-container que ya tiene position:relative, por lo que
 * el wrapper queda correctamente anclado sin sobreescrituras.
 */
.thumbnail-container {
    position: relative;
}

/* Ficha de producto: el hook se renderiza dentro de .product-cover */
.product-cover {
    position: relative;
}