.hero-breadcrumbs {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero-breadcrumbs a {
    color: var(--color-black);
    text-decoration: none;
    transition: color .3s;
}

.hero-breadcrumbs a:hover { color: var(--color-accent); }
.hero-breadcrumbs .separator { color: rgba(0, 0, 0, 0.3); }
.hero-breadcrumbs .current { color: var(--color-accent); pointer-events: none; }

@media (max-width: 768px) {
    .hero-breadcrumbs { font-size: 1.1rem; }
}