/* Breadcrumb "Produkty › Growth Elixir" (desktop-product.jpg: 14px, tracked, at the logo's left edge). */
@layer components {
  .breadcrumbs {
    width: min(100%, var(--noria-page));
    margin-inline: auto;
    padding: 0.75rem var(--noria-edge) 0;
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--noria-text-small);
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .breadcrumbs__item + .breadcrumbs__item::before {
    content: "›" / "";
    margin-inline: 0.25rem 0.5rem;
  }

  .breadcrumbs__link {
    color: inherit;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  @media (max-width: 47.99rem) {
    .breadcrumbs__list { justify-content: center; }
  }
}