/*
 * Breadcrumb — single owner of the storefront look (2026-10-08).
 *
 * Site owner: "登入的页面，还有这几个页面的面包屑统一做成像产品单页面的一模一样，还有这个
 * /brake-caliper-products/". The product page is the reference; every value below was
 * measured on the live product page (2026-10-08) instead of guessed:
 *   ol      15px / line-height 21px / gap 9px / padding 13px 0 / colour #49647f
 *   link    #0b59c7, weight 650, no underline
 *   current #112a43, weight 650
 *   bar     #fff with a 1px rgba(148,163,184,.22) bottom border  → 48px tall
 *   crumb   ">" separator in #94a3b8
 *
 * Before this file the same component was restyled page by page: the help-centre
 * pages turned it into 11.5px uppercase monospace with muted links
 * (info-pages-v2.css) and the account / brake-hub pages rendered a different
 * component entirely (the parent's `catalog-breadcrumb-bar`) — that is why the
 * bars looked different from each other. Those overrides and the second component
 * are gone; this file is the one place the look is declared.
 *
 * Two notes for the next maintainer:
 *   - product-single-unified.css keeps its own `.pdp-page--unified` copy of the same
 *     numbers; it is byte-identical in effect and left untouched because that file
 *     is in the pending site-polish upload.
 *   - article pages (`.slp-article-page--v2`) intentionally keep their heavier
 *     overrides in article-v2.css; those selectors are more specific, so nothing
 *     here changes the blog reading view.
 *
 * Container width stays with each page: the bar's content lines up with the content
 * column that page uses (1320px on product pages, 1710px on the content pages).
 */

.slp-article-breadcrumbs {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: #fff;
}

.slp-article-breadcrumbs .container {
  overflow-x: auto;
  scrollbar-width: thin;
}

.slp-article-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  margin: 0;
  padding: 13px 0;
  list-style: none;
  color: #49647f;
  font-size: 15px;
  line-height: 1.4;
}

.slp-article-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.slp-article-breadcrumbs li:not(:last-child)::after {
  color: #94a3b8;
  content: ">";
}

.slp-article-breadcrumbs a {
  color: #0b59c7;
  font-weight: 650;
}

.slp-article-breadcrumbs [aria-current="page"] {
  color: #112a43;
  font-weight: 650;
}

/*
 * Specificity guard. The content pages colour every link under
 * `#main-content.slp-help-center-page` (#0d4f86, red on hover) for body copy, and
 * that rule is ID-scoped, so the component selectors above can never outrank it.
 * These two declarations match its specificity and come later in the cascade; they
 * keep breadcrumb links the product-page blue on those pages and are inert
 * everywhere else. Measured before the guard: the crumbs rendered #0d4f86 while the
 * product page renders #0b59c7.
 */
#main-content .slp-article-breadcrumbs a,
#main-content .slp-article-breadcrumbs a:hover {
  color: #0b59c7;
  font-weight: 650;
}

#main-content .slp-article-breadcrumbs [aria-current="page"] {
  color: #112a43;
  font-weight: 650;
}

@media (max-width: 768px) {
  /*
   * Phones: the row used to be a horizontal scroller (156px of overflow at 390px on
   * the product page, where the trailing crumb was cut mid-word). Wrapping keeps
   * every crumb readable on every page that uses this component.
   */
  .slp-article-breadcrumbs .container {
    overflow-x: visible;
  }

  .slp-article-breadcrumbs ol {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}