.breadcrumbs {
  margin: 0 0 var(--sp-4);
  min-width: 0;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-muted, #64748b);
}

.breadcrumbs__link {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.breadcrumbs__link:hover {
  color: var(--color-text, #0f172a);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.breadcrumbs__current {
  color: var(--color-text, #0f172a);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(42ch, 70vw);
}

.breadcrumbs__sep {
  color: color-mix(in srgb, var(--color-muted, #64748b) 70%, transparent);
  user-select: none;
}

@media (max-width: 767px) {
  .breadcrumbs {
    margin-bottom: var(--sp-3);
    /* iOS Safari: горизонтальний скрол без «гумового» bounce на всю сторінку */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .breadcrumbs__list {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    padding-bottom: 0.1rem;
  }

  .breadcrumbs__current {
    white-space: nowrap;
    max-width: 48vw;
  }
}

@supports (-webkit-touch-callout: none) {
  .breadcrumbs__link,
  .breadcrumbs__current {
    -webkit-tap-highlight-color: transparent;
  }
}