/* =================== hc-crumbs.css =================== */
.hc-crumbs {display: flex; align-items: center; flex-wrap: wrap; gap: var(--hc-sp-1); font-size: var(--hc-fs-sm); color: var(--hc-ink-mid); margin-bottom: var(--hc-sp-3)}
.hc-crumbs a {color: var(--hc-ink-soft)}
.hc-crumbs a:hover {color: var(--hc-accent)}
.hc-crumbs__sep {color: var(--hc-ink-muted); margin: 0 var(--hc-sp-1)}
.hc-crumbs__here {color: var(--hc-ink); font-weight: 500}
.hc-crumbs__here--truncate {max-width: 400px; display: inline-block; vertical-align: middle}
.hc-crumbs__node {position: relative; display: inline-flex; align-items: center; gap: 4px}
.hc-crumbs__toggle {width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--hc-ink-muted); font: inherit; line-height: 18px; cursor: pointer}
.hc-crumbs__toggle:hover, .hc-crumbs__node:focus-within .hc-crumbs__toggle {background: color-mix(in srgb, var(--hc-accent) 10%, transparent); color: var(--hc-accent)}
.hc-crumbs__menu {position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; display: grid; min-width: 240px; max-width: min(360px, calc(100vw - 32px)); max-height: 280px; overflow: auto; padding: 8px; border: 1px solid var(--hc-line); border-radius: 8px; background: var(--hc-surface, #fff); box-shadow: 0 18px 46px rgba(28, 24, 20, .14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease}
.hc-crumbs__menu a {display: block; padding: 8px 10px; border-radius: 6px; color: var(--hc-ink); line-height: 1.25; white-space: normal}
.hc-crumbs__menu a:hover, .hc-crumbs__menu a:focus {background: color-mix(in srgb, var(--hc-accent) 10%, transparent); color: var(--hc-accent)}
.hc-crumbs__node.is-open .hc-crumbs__menu {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0)}
@media (max-width: 640px) {
  .hc-crumbs__node {position: static}
  .hc-crumbs__menu {left: 0; right: 0; width: calc(100vw - 48px); min-width: 0}
}

/* page_hero breadcrumb (.bc) — the separator had no spacing, gluing crumbs
   ("Главная →Блог"). Flex + gap spaces them uniformly, matching .hc-crumbs. */
.bc {display: flex; align-items: center; flex-wrap: wrap; gap: var(--hc-sp-1); font-size: var(--hc-fs-sm); color: var(--hc-ink-mid)}
.bc a {color: var(--hc-ink-soft)}
.bc a:hover {color: var(--hc-accent)}
.bc__sep {color: var(--hc-ink-muted)}

.hc-cat-head .hc-crumbs {
  font: 500 12px/1 var(--hc-sans, 'Outfit', sans-serif);
  color: var(--hc-muted, #6b6660);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}