/*
  IONTMAX breadcrumbs – 01 text trail (slash)
  Global: category, product, CMS pages, search, …
*/

:root {
  --im-bc-pad: var(--im-pad, clamp(16px, 4vw, 32px));
  --im-bc-max: var(--im-max, 1800px);
  --im-bc-text: #111214;
  --im-bc-muted: #6b7280;
  --im-bc-faint: #9ca3af;
}

.breadcrumbs-wrapper.container {
  width: min(calc(100% - (var(--im-bc-pad) * 2)), var(--im-bc-max)) !important;
  max-width: var(--im-bc-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.breadcrumbs {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 18px !important;
  padding: 14px var(--im-bc-pad) 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--im-bc-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.breadcrumbs > span {
  display: inline-flex !important;
  align-items: center;
  align-self: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumbs > span > a,
.breadcrumbs > span > span {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: static !important;
}

.breadcrumbs > span > a::before,
.breadcrumbs > span > a::after {
  display: none !important;
  content: none !important;
}

.breadcrumbs > span > a.navigation-home-icon {
  position: static !important;
  min-height: 0 !important;
}

.breadcrumbs > span.navigation-home-icon-wrapper,
.breadcrumbs > .navigation-home-icon-wrapper {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.breadcrumbs .navigation-bullet {
  display: inline !important;
  margin: 0 8px !important;
  padding: 0 !important;
  color: var(--im-bc-faint) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  background: none !important;
}

.breadcrumbs a {
  color: var(--im-bc-muted) !important;
  text-decoration: none !important;
}

.breadcrumbs a:hover {
  color: var(--im-bc-text) !important;
}

.breadcrumbs > span:last-child > span[itemprop="name"],
.breadcrumbs > span[data-testid="breadcrumbsLastLevel"] > span[itemprop="name"] {
  color: var(--im-bc-text) !important;
  font-weight: 600 !important;
}

.navigation-home-icon-wrapper::before {
  display: none !important;
  content: none !important;
}

.navigation-home-icon-wrapper #navigation-first a {
  padding-left: 0 !important;
}

.breadcrumbs .navigation-home-icon {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.breadcrumbs .navigation-home-icon::before {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.breadcrumbs .navigation-home-icon::after {
  display: none !important;
  content: none !important;
}

.breadcrumbs .navigation-home-icon .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
}

.breadcrumbs .appendix {
  display: none !important;
}

@media (max-width: 768px) {
  .breadcrumbs {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .breadcrumbs-wrapper.container {
    width: min(calc(100% - 32px), var(--im-bc-max)) !important;
  }
}