/**
 * Happy Labels - estilos del frontend.
 * Las etiquetas se apilan por esquina dentro del contenedor del producto.
 */

.hl-badges {
    position: absolute;
    z-index: var(--hl-z, 9);
    display: flex;
    flex-direction: column;
    gap: var(--hl-gap, 4px);
    pointer-events: none;
    max-width: calc(100% - (var(--hl-offset, 8px) * 2));
}

.hl-badges--tl { top: var(--hl-offset, 8px); left: var(--hl-offset, 8px); align-items: flex-start; }
.hl-badges--tr { top: var(--hl-offset, 8px); right: var(--hl-offset, 8px); align-items: flex-end; }
.hl-badges--bl { bottom: var(--hl-offset, 8px); left: var(--hl-offset, 8px); align-items: flex-start; }
.hl-badges--br { bottom: var(--hl-offset, 8px); right: var(--hl-offset, 8px); align-items: flex-end; }

.hl-label {
    display: inline-block;
    padding: 3px 8px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

/* Con el shortcode va en flujo normal, no absoluto */
.hl-inline .hl-badges {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .hl-label { padding: 2px 6px; }
}