/********************
  Style général du breadcrumb
********************/
.breadcrumb__wrapper {
  margin     : 0;
  background : transparent;
}

.breadcrumb {
  border-radius : 0;
  padding       : 0;
  background    : transparent;
}

.breadcrumb[data-depth="1"] {
  display : none;
}

.breadcrumb ol {
  padding-left    : 0;
  margin-bottom   : 0;
  display         : flex;
  align-items     : center;
  gap             : 0.5rem;
  list-style      : none;
  justify-content : center;
}

#product .breadcrumb ol {
  justify-content : initial;
}

.breadcrumb li {
  display     : inline-flex;
  align-items : center;
  color       : rgba(255, 255, 255, 0.8);
  font-size   : 0.875rem;
}

.breadcrumb li:not(:first-child):before {
  content : "/";
  color   : rgba(255, 255, 255, 0.5);
  margin  : 0 0.25rem;
}

.breadcrumb li a {
  text-decoration : none;
  color           : rgba(255, 255, 255, 0.8);
  transition      : color 0.2s ease;
  display         : inline-flex;
  align-items     : center;
  gap             : 0.375rem;
}

.breadcrumb li a:hover {
  color : #fff;
}

.breadcrumb li a svg,
.breadcrumb li a img {
  width  : 16px;
  height : 16px;
}

#product .breadcrumb li.breadcrumb__item--is-active a {
  color         : var(--color-secondary) !important;
  padding-right : 10px;
}

.breadcrumb li.breadcrumb__item--is-active a {
  color       : var(--color-white-default) !important;
  font-weight : 500;
}

li.breadcrumb__item.breadcrumb__item--is-active.swiper-slide {
  padding-right : 35px;
}

.breadcrumb li.breadcrumb__item--is-active span {
  pointer-events : none;
}

/* Home icon style */
.breadcrumb li:not(:last-child) a {
  color : rgba(255, 255, 255, 0.8);
}

.breadcrumb li:not(:last-child) a:hover {
  color : #fff;
}

.breadcrumb {
  border-radius : 0;
  background    : transparent;
}

.breadcrumb[data-depth="1"] {
  display : none;
}

.breadcrumb ol {
  padding-left  : 0;
  margin-bottom : 0;
}

.breadcrumb li {
  display : inline;
  color   : var(--color-white-default);
  width   : fit-content;
}

.breadcrumb li:not(:first-child):before {
  content : "/";
  color   : currentColor;
  margin  : .3125rem;
}

.breadcrumb li a {
  text-decoration : none;
  color           : currentColor;
  transition      : all 0.3s;
}

.breadcrumb li a:hover {
  color : var(--color-white-default);
}

#product .breadcrumb li a, #product .breadcrumb li {
  width : fit-content;
  color : var(--color-grey-font-default);
}