.ws-bc-wrap{
  --ws-bc-wrap-width:1440px;
  --ws-bc-top-offset:calc(3.375rem + 1.25rem + 34px);
  --ws-bc-bottom-offset:24px;
  --ws-bc-row-h:2rem;
  --ws-bc-gap:.5rem;
  --ws-bc-text:rgba(17,18,22,.72);
  --ws-bc-text-strong:#111216;
  --ws-bc-line:rgba(17,18,22,.16);
  --ws-bc-pill:rgba(17,18,22,.08);
  --ws-bc-arrow:rgba(17,18,22,.34);
  box-sizing:border-box;
  position:relative;
  z-index:6;
  width:100%;
  max-width:var(--ws-bc-wrap-width);
  margin:var(--ws-bc-top-offset) auto var(--ws-bc-bottom-offset);
  padding:0 20px;
}

.ws-bc,
.ws-bc *{
  box-sizing:border-box;
}

.ws-bc{
  width:max-content;
  max-width:100%;
}

.ws-bc__list{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:var(--ws-bc-gap);
  margin:0;
  padding:0;
  list-style:none;
}

/* typography-figma.css: li + li { margin-top } ломает одну линию */
.ws-bc__list > .ws-bc__item{
  margin:0;
  padding:0;
}

.ws-bc__list > .ws-bc__item + .ws-bc__item{
  margin-top:0;
}

.ws-bc__item{
  display:flex;
  align-items:center;
  align-self:center;
  flex:0 0 auto;
  min-width:0;
  height:var(--ws-bc-row-h);
  max-height:var(--ws-bc-row-h);
  color:var(--ws-bc-text);
}

.ws-bc__item--home{
  justify-content:center;
}

.ws-bc__item + .ws-bc__item{
  display:flex;
  align-items:center;
  padding-left:0;
  gap:var(--ws-bc-gap);
}

.ws-bc__link,
.ws-bc__current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex:0 0 auto;
  box-sizing:border-box;
  height:var(--ws-bc-row-h);
  min-height:var(--ws-bc-row-h);
  max-height:var(--ws-bc-row-h);
  max-width:min(100%, 40ch);
  margin:0;
  padding:0 .75rem;
  color:var(--ws-bc-text);
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:.875rem;
  line-height:1;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .2s ease, opacity .2s ease, background-color .2s ease;
}

.ws-bc__link{
  border:1px solid transparent;
}

.ws-bc__current{
  border-radius:999px;
  border:1px solid var(--ws-bc-line);
  background:rgba(255,255,255,.08);
  color:var(--ws-bc-text-strong);
  font-weight:800;
}

.ws-bc__home{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex-shrink:0;
  box-sizing:border-box;
  width:var(--ws-bc-row-h);
  height:var(--ws-bc-row-h);
  min-width:var(--ws-bc-row-h);
  min-height:var(--ws-bc-row-h);
  max-width:var(--ws-bc-row-h);
  max-height:var(--ws-bc-row-h);
  flex:0 0 var(--ws-bc-row-h);
  margin:0;
  padding:0;
  line-height:0;
  font-size:0;
  border:1px solid rgba(17,18,22,.16);
  border-radius:50%;
  background:rgba(17,18,22,.05);
  transition:background-color .2s ease, border-color .2s ease;
}

.ws-bc__home img{
  display:block;
  width:.9375rem !important;
  height:.9375rem !important;
  max-width:.9375rem;
  max-height:.9375rem;
  margin:0;
  padding:0;
  border:0;
  object-fit:contain;
  object-position:center;
}

.ws-bc__item + .ws-bc__item::before{
  content:"";
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  align-self:center;
  width:.625rem;
  height:var(--ws-bc-row-h);
  margin:0;
  background:var(--ws-bc-arrow);
  -webkit-mask-size:.3125rem .5625rem;
          mask-size:.3125rem .5625rem;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path fill="%23000" d="M0 1.6 1.6 0 8 6.4 1.6 12.8 0 11.2l4.8-4.8z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path fill="%23000" d="M0 1.6 1.6 0 8 6.4 1.6 12.8 0 11.2l4.8-4.8z"/></svg>') center/contain no-repeat;
}

.ws-bc__home:hover,
.ws-bc__home:focus-visible{
  background:rgba(17,18,22,.12);
  border-color:rgba(17,18,22,.26);
}

.ws-bc__link:hover,
.ws-bc__link:focus-visible{
  color:#111216;
}

.ws-bc__home:focus-visible,
.ws-bc__link:focus-visible{
  outline:2px solid rgba(17,18,22,.28);
  outline-offset:2px;
}

body.page-template-template-tech-blog .ws-bc-wrap,
body.page-template-template-tech-blog-php .ws-bc-wrap,
body.page-template-template-cases .ws-bc-wrap,
body.page-template-template-cases-php .ws-bc-wrap,
body.post-type-archive-blogger .ws-bc-wrap,
body.single-post .ws-bc-wrap,
body.single-blogger .ws-bc-wrap{
  --ws-bc-text:rgba(255,255,255,.78);
  --ws-bc-text-strong:#ffffff;
  --ws-bc-line:rgba(255,255,255,.12);
  --ws-bc-pill:rgba(255,255,255,.12);
  --ws-bc-arrow:rgba(255,255,255,.78);
}

/* Домик в breadcrumbs на тёмном фоне — более светлое кольцо */
body.page-template-template-tech-blog .ws-bc__home,
body.page-template-template-tech-blog-php .ws-bc__home,
body.page-template-template-cases .ws-bc__home,
body.page-template-template-cases-php .ws-bc__home,
body.post-type-archive-blogger .ws-bc__home,
body.single-post .ws-bc__home,
body.single-blogger .ws-bc__home{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.16);
}

body.page-template-template-tech-blog .ws-bc__home:hover,
body.page-template-template-tech-blog-php .ws-bc__home:hover,
body.page-template-template-cases .ws-bc__home:hover,
body.page-template-template-cases-php .ws-bc__home:hover,
body.post-type-archive-blogger .ws-bc__home:hover,
body.single-post .ws-bc__home:hover,
body.single-blogger .ws-bc__home:hover,
body.page-template-template-tech-blog .ws-bc__home:focus-visible,
body.page-template-template-tech-blog-php .ws-bc__home:focus-visible,
body.page-template-template-cases .ws-bc__home:focus-visible,
body.page-template-template-cases-php .ws-bc__home:focus-visible,
body.post-type-archive-blogger .ws-bc__home:focus-visible,
body.single-post .ws-bc__home:focus-visible,
body.single-blogger .ws-bc__home:focus-visible{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.40);
}

@media (max-width:56.25rem){
  .ws-bc-wrap{
    --ws-bc-bottom-offset:18px;
    padding:0 16px;
  }

  .ws-bc__link,
  .ws-bc__current{
    max-width:min(100%, 34ch);
    font-size:.8125rem;
  }
}

@media (max-width:37.5rem), (max-height:31.25rem) and (orientation:landscape){
  .ws-bc-wrap{
    --ws-bc-top-offset:calc(2.5rem + .75rem + 24px);
    --ws-bc-bottom-offset:16px;
    padding:0 12px;
  }

  .ws-bc{
    width:100%;
  }

  .ws-bc-wrap{
    --ws-bc-row-h:1.875rem;
    --ws-bc-gap:.4375rem;
  }

  .ws-bc__item.is-current{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    max-height:var(--ws-bc-row-h);
  }

  .ws-bc__link,
  .ws-bc__current{
    max-width:min(100%, 30ch);
    font-size:.75rem;
  }

  .ws-bc__current{
    width:auto;
    max-width:min(100%, 30ch);
  }
}