/* Plassimo child theme: quiet navigation, independent of brand/promotion colors. */
#wrapper > nav.breadcrumb__wrapper {
  margin: 0;
  padding: .5rem 0 .75rem;
  border: 0;
  background: #fff;
  box-shadow: none;
}
#wrapper > nav.breadcrumb__wrapper .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
  color: #626873;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.45;
}
#wrapper > nav.breadcrumb__wrapper .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  padding: 0;
  margin: 0;
}
#wrapper > nav.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item { margin-left: .65rem; }
#wrapper > nav.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before {
  content: '';
  display: block;
  flex: 0 0 .28rem;
  width: .28rem;
  height: .28rem;
  margin: 0 .1rem 0 0;
  padding: 0;
  border: solid #a0a5ae;
  border-width: 0 1px 1px 0;
  transform: rotate(-45deg);
}
#wrapper > nav.breadcrumb__wrapper .breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .2rem 0;
  color: #626873;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
#wrapper > nav.breadcrumb__wrapper .breadcrumb-link:visited { color: #626873; }
#wrapper > nav.breadcrumb__wrapper .breadcrumb-link:hover { color: #292d32; text-decoration: underline; }
#wrapper > nav.breadcrumb__wrapper .breadcrumb-link:focus-visible {
  outline: 2px solid var(--pv-main, var(--bs-primary, #292d32));
  outline-offset: 3px;
  border-radius: 2px;
}
#wrapper > nav.breadcrumb__wrapper [aria-current='page'] {
  display: inline-block;
  min-width: 0;
  padding: .2rem 0;
  color: #454b55;
  font-weight: 400;
  overflow-wrap: anywhere;
}
@media (min-width: 992px) {
  /* The vertical gallery's previous-thumbnail control extends 32px above it.
     Reserve that control's height in flow instead of letting it cover the route. */
  body#product #wrapper > nav.breadcrumb__wrapper:has(~ .container .ecvg--vertical) {
    margin-bottom: 2rem;
  }
}
@media (max-width: 767.98px) {
  #wrapper > nav.breadcrumb__wrapper { padding: .375rem 0 .75rem; }
  #wrapper > nav.breadcrumb__wrapper .breadcrumb {
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    font-size: .75rem;
    line-height: 1.4;
  }
  #wrapper > nav.breadcrumb__wrapper .breadcrumb-item { flex: 0 0 auto; gap: .5rem; white-space: nowrap; }
  #wrapper > nav.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item { margin-left: .5rem; }
  #wrapper > nav.breadcrumb__wrapper .breadcrumb-link { min-height: 30px; }
  #wrapper > nav.breadcrumb__wrapper [aria-current='page'] { white-space: nowrap; }
  #wrapper > nav.breadcrumb__wrapper .breadcrumb::after { content: ''; flex: 0 0 .8rem; }
  #wrapper > nav.breadcrumb__wrapper > .container { position: relative; }
  #wrapper > nav.breadcrumb__wrapper > .container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: .75rem;
    width: .75rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff);
  }
  #wrapper > nav.breadcrumb__wrapper .breadcrumb::-webkit-scrollbar { display: none; height: 0; }
}