/* ─── Ribbon — rotated corner label ───────────────────────────────────
   Diagonal badge across a card/tile corner ("Popular", "Sale"). The parent
   needs position:relative + overflow:hidden — .hzo-tile and .hzo-card__media
   already qualify. Meaningful text stays in the DOM (not aria-hidden). */
.hzo-ribbon {
    position: absolute;
    top: 18px;
    right: -34px;
    z-index: 2;
    transform: rotate(45deg);
    background: var(--ribbon-bg, var(--accent));
    color: var(--ribbon-color, var(--text-on-accent));
    font-family: var(--font-body);
    font-size: var(--fs-50);
    font-weight: var(--fw-700, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: var(--lh-none);
    text-align: center;
    padding: 6px 40px;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}
.hzo-ribbon--tl { right: auto; left: -34px; transform: rotate(-45deg); }