.theme-breadcrumb {
  --breadcrumb-font-height: calc(
    var(--sort-title-line-height) * var(--sort-title-size) + 5px
  );

  position: relative;
  display: block;
}

.theme-breadcrumb .block-breadcrumb {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--breadcrumb-row-gap) 0;
  align-items: center;
  justify-content: flex-start !important;
  min-height: var(--breadcrumb-font-height);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.theme-breadcrumb .block-breadcrumb::-webkit-scrollbar {
  display: none;
}

.theme-breadcrumb li {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
}

.theme-breadcrumb li > div {
  display: flex;
  min-width: 0;
}

.theme-breadcrumb li a,
.theme-breadcrumb li span {
  color: rgb(var(--color-text));
  white-space: nowrap;
}

.theme-breadcrumb li a {
  min-width: 0;
}

.theme-breadcrumb li a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.theme-breadcrumb .block-breadcrumb li:not(:last-of-type)::after {
  flex-shrink: 0;
  margin-inline: var(--breadcrumb-column-gap);
  content: "/";
  opacity: 0.5;
}

.theme-breadcrumb .block-breadcrumb li:last-of-type {
  flex: 0 1 auto;
}

.theme-breadcrumb .block-breadcrumb li:last-of-type span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

@media (max-width: 959px) {
  .theme-breadcrumb {
    --breadcrumb-font-height: calc(
      var(--sort-title-line-height-mobile, var(--sort-title-line-height)) *
        var(--sort-title-size-mobile, var(--sort-title-size)) + 5px
    );
  }

  .theme-breadcrumb .block-breadcrumb {
    display: block;
    overflow: visible;
    margin-top: 1rem;
  }

  .theme-breadcrumb .block-breadcrumb li,
  .theme-breadcrumb .block-breadcrumb li > div,
  .theme-breadcrumb .block-breadcrumb li a,
  .theme-breadcrumb .block-breadcrumb li span {
    display: inline;
    white-space: normal;
  }

  .theme-breadcrumb .block-breadcrumb li a,
  .theme-breadcrumb .block-breadcrumb li span {
    overflow-wrap: anywhere;
  }

  .theme-breadcrumb .block-breadcrumb li:not(:last-of-type)::after {
    margin-inline: 0.35em;
  }
}