/*
 * KARMA BREADCRUMBS UI V1.0.9
 * Header is not modified.
 */


/* =========================================================
   CATALOG / COLLECTION BREADCRUMBS
   ========================================================= */

html body nav.karma-seo-breadcrumbs {
  display: block !important;

  box-sizing: border-box;

  width: min(1180px, calc(100% - 40px));

  margin: 0 auto !important;

  padding: 13px 0 12px !important;

  background: transparent !important;

  border: 0 !important;

  color: #777;

  font-size: 13px;

  line-height: 1.4;
}


/* Kill browser OL numbering completely */

html body nav.karma-seo-breadcrumbs > ol {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 0 !important;

  list-style: none !important;

  list-style-type: none !important;

  margin: 0 !important;

  padding: 0 !important;

  counter-reset: none !important;
}


html body nav.karma-seo-breadcrumbs > ol > li {
  display: inline-flex !important;

  align-items: center !important;

  flex: 0 0 auto;

  list-style: none !important;

  list-style-type: none !important;

  margin: 0 !important;

  padding: 0 !important;
}


html body nav.karma-seo-breadcrumbs > ol > li::marker {
  content: "" !important;

  font-size: 0 !important;
}


html body nav.karma-seo-breadcrumbs > ol > li::before {
  content: none !important;

  display: none !important;
}


html body nav.karma-seo-breadcrumbs > ol > li[aria-hidden="true"] {
  display: inline-flex !important;

  margin: 0 9px !important;

  color: #aaa !important;

  font-size: 15px;
}


html body nav.karma-seo-breadcrumbs a {
  color: #747474 !important;

  text-decoration: none !important;

  transition: color .18s ease;
}


html body nav.karma-seo-breadcrumbs a:hover {
  color: #111 !important;

  text-decoration: none !important;
}


html body nav.karma-seo-breadcrumbs [aria-current="page"] {
  color: #1d1d1d !important;

  font-weight: 500;
}


/* =========================================================
   ANDROID / IPHONE MODEL BREADCRUMBS
   ========================================================= */

html body nav.breadcrumbs,
html body nav[aria-label="Навігаційний ланцюжок"] {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

  box-sizing: border-box;

  padding: 13px 0 12px !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  color: #777;

  font-size: 13px;

  line-height: 1.4;
}


html body nav.breadcrumbs a,
html body nav[aria-label="Навігаційний ланцюжок"] a {

  color: #747474 !important;

  text-decoration: none !important;

}


html body nav.breadcrumbs a:hover,
html body nav[aria-label="Навігаційний ланцюжок"] a {

  color: #111 !important;

}


html body nav.breadcrumbs [aria-current="page"],
html body nav[aria-label="Навігаційний ланцюжок"] [aria-current="page"] {

  color: #1d1d1d !important;

  font-weight: 500;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 840px) {

  html body nav.karma-seo-breadcrumbs {

    width: calc(100% - 28px);

    padding: 10px 0 9px !important;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

  }


  html body nav.karma-seo-breadcrumbs::-webkit-scrollbar {
    display: none;
  }


  html body nav.karma-seo-breadcrumbs > ol {

    flex-wrap: nowrap !important;

    width: max-content !important;

    min-width: 0 !important;

  }


  html body nav.karma-seo-breadcrumbs > ol > li {

    white-space: nowrap;

  }


  html body nav.breadcrumbs,
  html body nav[aria-label="Навігаційний ланцюжок"] {

    flex-wrap: nowrap !important;

    overflow-x: auto;

    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

  }


  html body nav.breadcrumbs::-webkit-scrollbar,
  html body nav[aria-label="Навігаційний ланцюжок"]::-webkit-scrollbar {

    display: none;

  }

}