/* ─── Breadcrumb ────────────────────────────────────────────────────── */
.hzo-breadcrumb {
    font-family: var(--font-body);
    font-size: var(--fs-75);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.hzo-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.hzo-breadcrumb a:hover { color: var(--brand-text); }
.hzo-breadcrumb a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hzo-breadcrumb__sep { color: var(--border); margin: 0 2px; }
.hzo-breadcrumb [aria-current="page"] { color: var(--text-body); font-weight: var(--fw-500, 500); }

/* Simple underline default (Track-2 design pass) — a restrained hover underline
   grows in from the left, matching the nav-link / card-link family. Token-driven
   color (var(--link-underline, currentColor)). A client with a richer treatment
   (e.g. Hozio's background-image highlight-wipe, which is NOT a pseudo) neutralizes
   this with `.hzo-breadcrumb a::after { display: none }` in custom.css so only the
   bespoke skin shows — byte-identical (a pseudo adds no DOM node). */
.hzo-breadcrumb a { position: relative; }
.hzo-breadcrumb a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--link-underline, currentColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
    pointer-events: none;
}
.hzo-breadcrumb a:hover::after,
.hzo-breadcrumb a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .hzo-breadcrumb a::after { transition: none; }
}