/* stock-status — @tokens: --stock-status-dot-size

   An inline WooCommerce availability indicator: a small status dot + a text
   label. Non-interactive display atom — the MEANING is carried by the label
   text, never colour alone (the dot only reinforces it). Per the badge.css
   stock mapping, unavailability is a STATE not an error — red (--error) is
   reserved for genuine errors, so out-of-stock uses a neutral muted dot.

   Token-only: the dot diameter has no semantic token in the scale, so it's a
   component token with a literal fallback — the same dial pattern chip.css uses.
   Everything else reads a semantic/L1 token. */
.hzo-stock-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-body);
    font-size: var(--fs-50);
    line-height: var(--lh-none);
}

/* The status swatch — a small circle. Inherits currentColor by default; state
   modifiers below recolour it. */
.hzo-stock-status__dot {
    flex-shrink: 0;
    width: var(--stock-status-dot-size, 8px);
    height: var(--stock-status-dot-size, 8px);
    border-radius: var(--radius-full);
    background: currentColor;
}

/* The label — the load-bearing meaning. */
.hzo-stock-status__label {
    color: inherit;
}

/* State modifiers set the DOT colour only (per badge.css's stock mapping). */
.hzo-stock-status--in-stock     .hzo-stock-status__dot { background: var(--success); }
.hzo-stock-status--low-stock    .hzo-stock-status__dot { background: var(--warning); }
.hzo-stock-status--out-of-stock .hzo-stock-status__dot { background: var(--text-muted); }
.hzo-stock-status--backorder    .hzo-stock-status__dot { background: var(--info); }