/* Beautys global breadcrumb: quiet, airy, and connected to page content. */

.breadcrumb__wrapper {
  margin-bottom: 1.5rem;
  background-color: transparent;
}

.breadcrumb {
  --bs-breadcrumb-padding-y: 0.75rem;
  --bs-breadcrumb-divider-color: #c8aeb4;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
}

.breadcrumb-link {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
  color: var(--bs-link-hover-color);
}

.breadcrumb-link:focus-visible {
  border-radius: 0.25rem;
  outline: 3px solid var(--bs-focus-ring-color);
  outline-offset: 2px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-breadcrumb-divider-color);
}

.breadcrumb-item:last-child {
  color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
  .breadcrumb__wrapper {
    margin-bottom: 2rem;
  }

  .breadcrumb {
    --bs-breadcrumb-padding-y: 1rem;
  }
}