.ht-single .ht-breadcrumb{
  margin:0 0 20px;
}

.ht-single .ht-breadcrumb ol{
  display:flex;
  align-items:center;
  gap:0;
  list-style:none;
  margin:0;
  padding:10px 18px;
  border-radius:var(--radius);
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
}

.ht-single .ht-breadcrumb ol::-webkit-scrollbar{
  display:none;
}

.ht-single .ht-crumb{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  min-width:0;
}

.ht-single .ht-crumb+.ht-crumb::before{
  content:"›";
  margin-inline:10px;
  color:var(--muted);
}

.ht-single .ht-crumb__link{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  text-decoration:none;
  color:var(--brand-700);
  font-weight:500;
}

.ht-single .ht-crumb__link:hover{
  text-decoration:underline;
}

.ht-single .ht-crumb__current{
  color:var(--fg);
  font-weight:400;
}

html[data-theme="dark"] .ht-single .ht-breadcrumb ol{
  background:var(--surface-2);
  border-color:var(--border);
}

html[data-theme="dark"] .ht-single .ht-crumb__link{
  color:var(--brand-300);
}

html[data-theme="dark"] .ht-single .ht-crumb__link:hover{
  color:var(--brand-200);
}