/* ---------------------------------------------------------------------------
   breadcrumb.css - a ROUTE stylesheet, not part of the always-loaded core.

   One BEM block, .bd-breadcrumb, loaded by every page that renders a trail and
   no other: /sets/{SetNumber}, /minifigs/{FigNumber}, /parts/{PartNumber} and
   /themes/{ThemeId}.

   WHY IT IS NOT IN detail.css, WHERE IT STARTED. A theme page renders a trail
   and nothing else from that sheet - no price panel, no sparkline, no hero - so
   it was downloading all of detail.css for about 800 bytes of rules. With #846
   growing catalogue.css and #847 growing detail.css in the same week,
   core + cards + catalogue + detail reached 143,755 bytes against
   ShippedAssetWeightTests' 143,360 worst-page ceiling. That ceiling IS the
   claim that the split made the worst page lighter, so the fix is the one the
   guard's own message names - move the block to the family that renders it -
   and never the number.

   The seam is "which pages render a trail", which is a different set of pages
   from "which pages are detail pages"; a different audience is what makes it a
   different sheet rather than a small one. Linked from each page's own markup,
   so it arrives after tokens/reset/app/components. See
   docs/architecture/performance-budgets.md.
   --------------------------------------------------------------------------- */

/* =========================================================================
   Breadcrumb — where a sub-theme sits in the tree.

   An ordered list inside a <nav aria-label>, because the order is the
   information: "Star Wars › Ultimate Collector Series" read out of order is
   a different claim about the catalogue. The separator is a CSS ::before on
   every item but the first, so it is never in the accessible name.
   ========================================================================= */

.bd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bd-space-1) var(--bd-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--bd-font-body);
  font-size: var(--bd-type-body-sm-size);
  line-height: var(--bd-type-body-sm-line);
}

.bd-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--bd-space-2);
  color: var(--bd-color-muted);
}

.bd-breadcrumb__item + .bd-breadcrumb__item::before {
  content: "\203A";
  color: var(--bd-color-muted);
}