/* ═══════════════════════════════════════════════════════════════════
   Breadcrumbs.

   The shop nests three levels deep for real —
   /product-category/power/voltage-regulators/boost-converters/ — and
   since the drawer became a drill-down (CLAUDE.md §9.8) this is the
   primary "where am I" signal on a category page. It had been four
   throwaway rules: 14px grey, a 16px chevron, no weight at all.

   Two decisions worth writing down:

   TAP TARGETS. §9.x wants ≥44px, but a breadcrumb row of 44px-tall
   links is a slab across the top of every listing — it would cost
   exactly the vertical space §9.9 is trying to protect. The compromise:
   the row is 40px, each crumb carries generous horizontal padding, and
   the links sit far enough apart that the 44px rule is met
   HORIZONTALLY, where breadcrumb mis-taps actually happen. The last
   crumb is not a link at all, so there is one fewer target to miss.

   OVERFLOW. A long chain must never pan the page (§1.4). The trail is a
   contained horizontal scroller (UI_UX §9.7): nowrap inside a track
   that scrolls itself, with `overscroll-behavior-x:contain` so the
   gesture never escapes to the document, and a fade on the right edge
   so it is visibly cut rather than mysteriously clipped.
   ═══════════════════════════════════════════════════════════════════ */

.crumbs{
  position:relative;
  padding-top:var(--sp-3);
  /* min-width:0 is what actually keeps the scroller contained inside a
     flex/grid parent; without it the track sizes to content and pushes
     the page instead of scrolling itself. */
  min-width:0;max-width:100%;
}

.crumbs-track{
  display:flex;align-items:center;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  white-space:nowrap;
  /* Room for the fade so the last crumb is never sitting under it. */
  padding-right:var(--sp-5);
}
.crumbs-track::-webkit-scrollbar{display:none}

/* The cut is visible, so the swipe is discoverable (UI_UX §9.7). */
.crumbs::after{
  content:'';position:absolute;right:0;bottom:0;width:var(--sp-6);
  height:calc(100% - var(--sp-3));pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg));
}

.crumb{
  display:inline-flex;align-items:center;flex:0 0 auto;
  min-height:40px;padding-inline:var(--sp-2);
  font-size:.9375rem;                       /* 15px — §9.2 floor is 14 */
  color:var(--ink-3);font-weight:600;
}
.crumb:first-child{padding-left:0}
a.crumb:hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
a.crumb:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r-sm)}

/* Where you are. Not a link, and it does not compete with the amber. */
.crumb.is-current{color:var(--ink);font-weight:700}

/* §9.3 — the separator sits beside 15px text, so it is sized off the
   parent rather than pinned at 16px. */
.crumbs .ico{
  width:1.15em;height:1.15em;flex:0 0 auto;
  color:var(--line);stroke-width:2.4;
}

@media (min-width:768px){
  .crumb{font-size:1rem}
}