.pk-breadcrumb {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin-bottom: max(1rem, calc(1 * var(--su)));
}

.pk-breadcrumb nav {
    font-size: var(--desktop-body-xs);
    color: var(--avoord-blue);
    background: hsla(210, 50%, 98%, 1);
    border-radius: max(3.25rem, calc(3.25 * var(--su)));
    padding: max(0.5rem, calc(0.5 * var(--su))) max(0.75rem, calc(0.75 * var(--su)));
    max-width: 100%;
}

.pk-breadcrumb nav .breadcrumb {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

/* leading crumbs never shrink; only the last (current page) truncates with … */
.pk-breadcrumb nav .breadcrumb .breadcrumb-item {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pk-breadcrumb nav .breadcrumb .breadcrumb-item:last-child {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-breadcrumb nav .breadcrumb li::after {
    margin-inline: max(0.5rem, calc(0.5 * var(--su)));
}

.pk-breadcrumb nav .breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}

.pk-breadcrumb nav .breadcrumb .breadcrumb-item > a svg path {
    transition: fill var(--duration) var(--style-snappy);
}

.pk-breadcrumb nav .breadcrumb .breadcrumb-item > a:hover svg path {
    fill: var(--avoord-orange);
}

.pk-breadcrumb nav a {
    color: inherit;
    text-decoration: none;
}

.pk-breadcrumb nav a:hover {
    text-decoration: underline;
}

.pk-breadcrumb-home {
    display: flex;
    align-items: center;
    line-height: 0;
}

.pk-breadcrumb-home svg {
    display: block;
    width: auto;
    height: max(1rem, calc(1 * var(--su)));
}