theme-breadcrumb {
  --breadcrumb-font-height: calc(
    var(--sort-body4-line-height) * var(--sort-body4-size) + 5px
  );
  --breadcrumb-font-weight-normal: var(--sort-body4-font-weight);

  position: relative;
  display: block;
}

theme-breadcrumb li {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  line-height: var(--breadcrumb-font-height) !important;
}

theme-breadcrumb li a,
theme-breadcrumb li span {
  color: rgb(var(--color-text));
  word-break: break-all;
}

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

theme-breadcrumb .block-breadcrumb {
  --color-scheme-background: var(--color-background);

  justify-content: normal !important;
  min-height: var(--breadcrumb-font-height);
  overflow: hidden;
}

theme-breadcrumb .block-breadcrumb-hoverable-parts-wrapper {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--breadcrumb-collapsed-offset-left);
  z-index: 10;
  display: none;
  padding-block-start: calc(var(--breadcrumb-collapsed-offset-top) + 7px);
}

theme-breadcrumb .block-breadcrumb-hoverable-parts-wrapper-content {
  padding: 6px 8px;
  background-color: rgb(var(--color-background));
  border: 1px solid rgb(187 187 187);
  border-radius: 0.6em;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
}

theme-breadcrumb .block-breadcrumb-hoverable-parts-wrapper-content > li span {
  font-weight: var(--breadcrumb-font-weight-normal) !important;
}

theme-breadcrumb .block-breadcrumb-hoverable-parts-wrapper:hover {
  display: block;
}

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

theme-breadcrumb .block-breadcrumb li:last-of-type {
  max-width: var(--breadcrumb-last-part-max-width);
}

theme-breadcrumb .block-breadcrumb li:last-of-type span {
  font-weight: 700;
  word-break: break-word;
  cursor: default;
}

theme-breadcrumb .block-breadcrumb li.collapsed {
  position: relative;
  max-width: var(--breadcrumb-part-max-width);
  max-height: var(--breadcrumb-font-height);
  overflow-y: hidden;
}

theme-breadcrumb .block-breadcrumb li.collapsed:last-of-type span {
  font-weight: var(--breadcrumb-font-weight-normal) !important;
}

theme-breadcrumb .block-breadcrumb li.collapsed > div {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  min-width: 1.4em;
  padding-inline: 4px;
  background-color: var(--color-scheme-background);
  border-radius: 0.2em;
}

theme-breadcrumb .block-breadcrumb li.collapsed > div::after {
  min-width: 1.4em;
  min-height: var(--breadcrumb-font-height);
  text-align: center;
  letter-spacing: 1px;
  content: "···";
}

theme-breadcrumb
  .block-breadcrumb
  li.collapsed:hover
  ~ .block-breadcrumb-hoverable-parts-wrapper {
  display: block;
}

theme-breadcrumb .block-breadcrumb li.collapsed-all {
  min-width: min-content;
}

theme-breadcrumb .block-breadcrumb li.collapsed-all > div {
  width: 1.4em;
  padding-inline: 0 !important;
}

theme-breadcrumb .block-breadcrumb li.collapsed-all > div::after {
  position: absolute;
}

theme-breadcrumb .block-breadcrumb li.collapsed-all a {
  opacity: 0;
}

theme-breadcrumb .block-breadcrumb li.collapsed-mini {
  display: none;
}

/* Submenu Styles - Mobile Only */
.block-breadcrumb-submenu {
  margin-top: 16px;
  padding: 0 16px;
}

.block-breadcrumb-submenu__title {
  margin-bottom: 12px;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.block-breadcrumb-submenu__list-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -16px;
  padding: 0 16px;
}

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

.block-breadcrumb-submenu__list {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
  justify-content: flex-start;
  width: 100%;
}

.block-breadcrumb-submenu__list > li:only-child,
.block-breadcrumb-submenu__list > li:first-child:nth-last-child(2),
.block-breadcrumb-submenu__list > li:first-child:nth-last-child(2) ~ li {
  flex-shrink: 0;
}

.block-breadcrumb-submenu__list-wrapper:has(> .block-breadcrumb-submenu__list > li:only-child),
.block-breadcrumb-submenu__list-wrapper:has(> .block-breadcrumb-submenu__list > li:first-child:nth-last-child(2)) {
  overflow-x: visible;
  display: flex;
  justify-content: center;
}

.block-breadcrumb-submenu__list-wrapper:has(> .block-breadcrumb-submenu__list > li:only-child) .block-breadcrumb-submenu__list,
.block-breadcrumb-submenu__list-wrapper:has(> .block-breadcrumb-submenu__list > li:first-child:nth-last-child(2)) .block-breadcrumb-submenu__list {
  justify-content: center;
  min-width: auto;
  width: auto;
}

.block-breadcrumb-submenu__item {
  flex-shrink: 0;
}

.block-breadcrumb-submenu__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: rgb(var(--color-text));
  width: 80px;
}

.block-breadcrumb-submenu__image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgb(243 243 243 / 100%);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.block-breadcrumb-submenu__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-breadcrumb-submenu__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-breadcrumb-submenu__image--placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.3;
}

.block-breadcrumb-submenu__name {
  text-align: center;
  word-break: break-word;
  line-height: 1.4;
  max-width: 80px;
}