/* =====================================================================
   Breadcrumb dropdowns (product pages + product-category archives).
   Each category crumb lists the other categories at its level.
   Markup: CU_Breadcrumb_Menus. Behaviour: breadcrumb-menus.js.
   Colours fall back to the product-page tokens when .cu-sp is absent.
   ===================================================================== */
.wd-breadcrumbs .cu-bc-item{ position:relative; display:inline-flex; align-items:center; }

.wd-breadcrumbs .cu-bc-toggle{
  display:inline-grid; place-items:center; width:18px; height:18px; min-width:0; min-height:0;
  margin:0 0 0 2px; padding:0; border:0; border-radius:4px; box-shadow:none;
  background:none !important; color:var(--wd-link-color, #767676); cursor:pointer; line-height:1;
}
.wd-breadcrumbs .cu-bc-toggle::before{
  content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-1px) rotate(45deg); transition:transform .15s ease;
}
.wd-breadcrumbs .cu-bc-toggle:hover,
.wd-breadcrumbs .cu-bc-item.is-open > .cu-bc-toggle{ color:var(--cu-red, #be1622); }
.wd-breadcrumbs .cu-bc-item.is-open > .cu-bc-toggle::before{ transform:translateY(1px) rotate(-135deg); }
.wd-breadcrumbs .cu-bc-toggle:focus-visible{ outline:2px solid var(--cu-red, #be1622); outline-offset:1px; }

/* closed = display:none: a merely invisible absolute list would still widen the page on phones */
.wd-breadcrumbs .cu-bc-menu{
  display:none; position:absolute; top:100%; left:-10px; z-index:60;
  min-width:210px; max-width:min(300px, calc(100vw - 24px)); margin:6px 0 0; padding:6px;
  list-style:none; text-align:start; white-space:normal;
  background:#fff; border:1px solid var(--cu-line, #e7e8ec); border-radius:var(--cu-radius, 7px);
  box-shadow:0 12px 32px rgba(28,29,32,.14); transform:translateX(var(--cu-bc-shift, 0px));
}
/* invisible bridge over the 6px gap, so the pointer can travel into the menu */
.wd-breadcrumbs .cu-bc-menu::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }
.wd-breadcrumbs .cu-bc-item.is-open > .cu-bc-menu{ display:block; animation:cu-bc-in .14s ease-out; }
@keyframes cu-bc-in{
  from{ opacity:0; transform:translateX(var(--cu-bc-shift, 0px)) translateY(-3px); }
  to{ opacity:1; transform:translateX(var(--cu-bc-shift, 0px)); }
}
.wd-breadcrumbs .cu-bc-menu li{ margin:0; padding:0; list-style:none; }
.wd-breadcrumbs .cu-bc-menu a{
  display:block; padding:7px 10px; border-radius:5px; font-size:14px; line-height:1.35;
  font-weight:500; color:var(--cu-ink, #1c1d20); text-decoration:none; white-space:normal;
}
.wd-breadcrumbs .cu-bc-menu a:hover,
.wd-breadcrumbs .cu-bc-menu a:focus-visible{ background:#f4f5f7; color:var(--cu-red, #be1622); outline:none; }

@media (pointer:coarse){
  .wd-breadcrumbs .cu-bc-toggle{ width:26px; height:26px; margin-left:0; }
  .wd-breadcrumbs .cu-bc-menu a{ padding:10px 12px; }
}
@media (max-width:1024px){
  /* product page only: the theme hides everything after a.wd-last-link on small
     screens; the link now sits inside .cu-bc-item, so repeat the rule one level up */
  .cu-sp-breadcrumb .cu-bc-last-link ~ span{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wd-breadcrumbs .cu-bc-item.is-open > .cu-bc-menu{ animation:none; }
  .wd-breadcrumbs .cu-bc-toggle::before{ transition:none; }
}