.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-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:wrap;
  gap:.25rem;
  margin:0;
  padding:0;
  list-style:none;
}

.ws-bc__item{
  display:inline-flex;
  align-items:center;
  min-width:0;
  color:var(--ws-bc-text);
}

.ws-bc__item + .ws-bc__item{
  padding-left:.625rem;
}

.ws-bc__link,
.ws-bc__current{
  display:inline-flex;
  align-items:center;
  min-height:1.75rem;
  max-width:min(100%, 40ch);
  padding:.125rem 0;
  color:var(--ws-bc-text);
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:.875rem;
  line-height:1.15;
  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__current{
  padding:.3125rem .6875rem;
  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:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.875rem;
  height:1.875rem;
  flex:0 0 1.875rem;
  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;
  height:.9375rem;
}

.ws-bc__item + .ws-bc__item::before{
  content:"";
  display:inline-block;
  width:.3125rem;
  height:.5rem;
  margin-right:.375rem;
  background:var(--ws-bc-arrow);
  -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__list{
    gap:.25rem;
  }

  .ws-bc__item.is-current{
    flex:1 1 auto;
  }

  .ws-bc__item + .ws-bc__item{
    padding-left:.5rem;
  }

  .ws-bc__item + .ws-bc__item::before{
    width:.25rem;
    height:.4375rem;
    margin-right:.3125rem;
  }

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

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

@media (max-width:32.5rem){
  .ws-bc__home{
    width:1.875rem;
    height:1.875rem;
    flex-basis:1.875rem;
  }
}