/* notification-dot — @tokens: --radius-full, --error, --border-2, --card-bg, --space-2xs, --fs-50, --fw-600, --brand, --text-on-brand, --accent, --text-on-accent */
/* Generic count / activity indicator (cart count, unread) — distinct from the inventory-bound
   stock-status dot. Bare dot, or a numbered pill via --count; the --corner modifier overlays
   an icon on a position:relative host. Not animated → no reduced-motion block needed. */
.hzo-notification-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--notification-dot-size, 8px);
    height: var(--notification-dot-size, 8px);
    border-radius: var(--radius-full);
    background: var(--error);
    box-shadow: 0 0 0 var(--border-2, 2px) var(--card-bg, #fff); /* ring so it reads over an icon */
}

/* Numbered pill variant. */
.hzo-notification-dot--count {
    min-width: var(--notification-dot-count-size, 18px);
    height: var(--notification-dot-count-size, 18px);
    padding: 0 var(--space-2xs);
    font-size: var(--fs-50);
    font-weight: var(--fw-600);
    line-height: 1;
    color: #fff; /* white on the coloured badge — the badge.css convention */
}

/* Colour modifiers — default stays --error. */
.hzo-notification-dot--brand  { background: var(--brand);  color: var(--text-on-brand); }
.hzo-notification-dot--accent { background: var(--accent); color: var(--text-on-accent); }

/* Overlay an icon — host MUST be position:relative. */
.hzo-notification-dot--corner {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}