/* BREADCRUMB_RAIL_V1 (Julien 2026-10-08) — the breadcrumb on one line. Too long for its width, it scrolls (swipe or
   the small arrows); the side that still has text shows an arrow over a halo of the page background, so the text slides
   under it. Script: assets/js/breadcrumb-rail.js (sets is-start / is-end and --bc-halo). */
.cms-breadcrumb[data-breadcrumb-rail] { position: relative; min-width: 0; max-width: 100%; }
.cms-breadcrumb[data-breadcrumb-rail] .cms-breadcrumb__list {
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.cms-breadcrumb[data-breadcrumb-rail] .cms-breadcrumb__list::-webkit-scrollbar { display: none; }
.cms-breadcrumb[data-breadcrumb-rail] .cms-breadcrumb__item { flex: 0 0 auto; white-space: nowrap; }
.cms-breadcrumb[data-breadcrumb-rail] .cms-breadcrumb__current { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; display: inline !important; -webkit-line-clamp: unset !important; }
.cms-breadcrumb__arrow {
  position: absolute; top: 50%; z-index: 2; display: none; place-items: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  color: var(--color-text-muted, #5d6675); background: transparent; transform: translateY(-50%); cursor: pointer;
}
.cms-breadcrumb__arrow svg { position: relative; z-index: 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* The halo: the page background fading out behind the arrow, wide enough for the text to slide under. */
.cms-breadcrumb__arrow::before { content: ""; position: absolute; top: -8px; bottom: -8px; width: 46px; pointer-events: none; }
.cms-breadcrumb__arrow--prev { left: -2px; }
.cms-breadcrumb__arrow--prev::before { left: -4px; background: linear-gradient(to right, var(--bc-halo, #fff) 55%, transparent); }
.cms-breadcrumb__arrow--next { right: -2px; }
.cms-breadcrumb__arrow--next::before { right: -4px; background: linear-gradient(to left, var(--bc-halo, #fff) 55%, transparent); }
.cms-breadcrumb.is-overflowing:not(.is-start) .cms-breadcrumb__arrow--prev,
.cms-breadcrumb.is-overflowing:not(.is-end) .cms-breadcrumb__arrow--next { display: grid; }
.cms-breadcrumb__arrow:hover { color: var(--color-text, #1d2433); }