/* Start:/local/templates/main/components/bitrix/catalog.section.list/nav/style.css?179243625410722*/
/* Рубрики блога (шапка, header.php → catalog.section.list/nav). Перенесено из css/style.css 19.10.2026; ниже — лента на CSS без slick. */
.blog-nav {
  position: relative;
  z-index: 2;
  margin-bottom: 36px;
}
.blog-nav_prev,
.blog-nav_next {
  position: absolute;
  top: calc(50% - 13px);
  transition: opacity .2s ease, visibility .2s ease;
}
.blog-nav_prev.slick-disabled,
.blog-nav_next.slick-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}
.blog-nav_prev {
  left: -50px;
}
.blog-nav_next {
  right: -50px;
}
.blog-nav .sections {
  height: 192px;
}
.blog-nav .sections {
  margin: 0 -4.5px;
}
.blog-nav .item {
  border-radius: 9px;
  background: #E7E5E4;
  height: 192px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: .3s;
  position: relative;
  margin: 0 4.5px;
}
.blog-nav .item.active {
  background: #FFF;
}
.blog-nav .item:hover {
  cursor: pointer;
  background: #FFF;
}
.blog-nav .item:after {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.33203 6.66663L14.6654 12L9.33203 17.3333' stroke='%23847671' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-size: cover;
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.blog-nav .item span {
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  padding: 24px;
  max-width: 220px;
  position: relative;
  top: -6px;
  text-align: center;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-nav .item span:before,
.blog-nav .item span:after {
  content: '';
  width: 96px;
  height: 1px;
  display: block;
  background: #CFCBC9;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.blog-nav .item span:before {
  top: 0;
}
.blog-nav .item span:after {
  bottom: 0;
}
.blog-nav .item .count {
  position: absolute;
  bottom: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 110%;
}
.blog-nav .slick-init {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
}
/* Рубрик меньше, чем слотов slick: лента от левого края, как заголовок и карточки
   (slick.css ставит .slick-track margin: 0 auto) */
.blog-nav .slick-track {
  margin-left: 0;
}
.blog-nav {
  display: block;
}
.blog-nav .dots-wrapper {
  min-width: 100%;
}
@media (min-width: 992px) {
  .blog-nav {
      margin-bottom: 31px;
    }
}
@media (min-width: 992px) {
  .blog-nav_prev,
  .blog-nav_next {
      top: calc(50% - 11px);
    }
}
@media (min-width: 992px) {
  .blog-nav_prev {
      left: -42px;
    }
}
@media (min-width: 992px) {
  .blog-nav_next {
      right: -42px;
    }
}
@media (min-width: 992px) {
  .blog-nav .sections {
      height: 163px;
    }
}
@media (min-width: 992px) {
  .blog-nav .sections {
      margin: 0 -4px;
    }
}
@media (min-width: 992px) {
  .blog-nav .item {
      border-radius: 8px;
      height: 163px;
      margin: 0 4px;
    }
}
@media (min-width: 992px) {
  .blog-nav .item:after {
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.33203 6.66663L14.6654 12L9.33203 17.3333' stroke='%23847671' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
      right: 7px;
      bottom: 7px;
    }
}
@media (min-width: 992px) {
  .blog-nav .item span {
      font-size: 17px;
      padding: 20px;
      max-width: 187px;
      top: -5px;
      height: 82px;
    }
}
@media (min-width: 992px) {
  .blog-nav .item span:before,
  .blog-nav .item span:after {
      width: 82px;
    }
}
@media (min-width: 992px) {
  .blog-nav .item .count {
      bottom: 7px;
      font-size: 12px;
    }
}
@media (max-width: 1399.98px) {
  .blog-nav .sections {
        width: calc(100% - 72px);
        margin: auto;
    }
}
@media (max-width: 1399.98px) {
  .blog-nav_prev {
        left: -6px;
    }
}
@media (max-width: 1399.98px) {
  .blog-nav_next {
        right: -6px;
    }
}
@media (max-width: 1399.98px) {
  @media (min-width: 992px) {
    .blog-nav .sections {
          width: calc(100% - 61px);
        }
  }
}
@media (max-width: 1399.98px) {
  @media (min-width: 992px) {
    /* Рубрики помещаются без стрелок: края плиток совпадают с краями статей */
    .blog-nav.is-fit .sections {
          width: auto;
          margin: 0 -4px;
        }
  }
}
@media (max-width: 1399.98px) {
  @media (min-width: 992px) {
    .blog-nav_prev {
          left: -5px;
        }
  }
}
@media (max-width: 1399.98px) {
  @media (min-width: 992px) {
    .blog-nav_next {
          right: -5px;
        }
  }
}
@media (max-width: 991.98px) {
  .blog-nav .item {
    height: 126px;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .sections {
    height: auto;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .item span {
        height: 82px;
        font-size: 14px;
        line-height: 120%;
        position: relative;
        top: -6px;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .item .count {
        font-weight: 400;
        font-size: 10px;
        line-height: 120%;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .sections {
        width: 100%;
        margin: auto;
    }
}
@media (max-width: 991.98px) {
  .blog-nav_prev,
  .blog-nav_next {
        bottom: 0;
        top: auto;
        left: 0;
        width: 48px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 991.98px) {
  .blog-nav_prev svg,
  .blog-nav_next svg {
        width: 7px;
        height: 14px;
    }
}
@media (max-width: 991.98px) {
  .blog-nav_next {
        right: 0;
        left: auto;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .item:after {
        right: 4px;
        bottom: 8px;
        width: 16px;
        height: 16px;
    }
}
@media (max-width: 991.98px) {
  /* Телефон и планшет: разделы блога — своя горизонтальная лента с прилипанием, slick только на ПК
       (js/custom.js). Видно 5 карточек (от 576 px — 4, на телефоне — 3) и край следующей: 0,2 карточки,
       но не меньше 28 px. Стрелки и точки не нужны — край сам подсказывает, что ленту можно листать. */
  .blog-nav .slick-init:not(.slick-initialized) {
      --tm-rail-shown: 5;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .slick-init:not(.slick-initialized)::-webkit-scrollbar {
      display: none;
    }
}
@media (max-width: 991.98px) {
  .blog-nav .slick-init:not(.slick-initialized) .item {
      flex: 0 0 min(calc((100% - var(--tm-rail-shown) * 8px) / (var(--tm-rail-shown) + .2)), calc((100% - var(--tm-rail-shown) * 8px - 28px) / var(--tm-rail-shown)));
      min-width: 0;
      margin: 0;
      scroll-snap-align: start;
    }
}
@media (max-width: 991.98px) {
  .blog-nav_prev,
  .blog-nav_next,
  .blog-nav .dots-wrapper {
      display: none;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .blog-nav .slick-init:not(.slick-initialized):not(:has(> .item:nth-child(6))) .item {
      flex: 1 1 0;
    }
}
@media (max-width: 767.98px) {
  .blog-nav .slick-init:not(.slick-initialized) {
      --tm-rail-shown: 4;
    }
}
@media (max-width: 575.98px) {
  .blog-nav .slick-init:not(.slick-initialized) {
      --tm-rail-shown: 3;
    }
}

/* Рубрики: лента на CSS без slick (js/custom.js). Размер плиток задан до загрузки скриптов — шапка не прыгает.
   ПК: все рубрики в ряд поровну (до 6 видно целиком, дальше лента с прилипанием); ниже 992 — прежняя лента. */
.blog-nav_prev,
.blog-nav_next,
.blog-nav .dots-wrapper {
  display: none !important;
}
.blog-nav .sections {
  height: auto;
  margin: 0;
  width: 100%;
}
@media (min-width: 992px) {
  .blog-nav .sections,
  .blog-nav.is-fit .sections {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .blog-nav .slick-init {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .blog-nav .slick-init::-webkit-scrollbar {
    display: none;
  }
  .blog-nav .slick-init .item {
    flex: 1 0 calc((100% - 5 * 8px) / 6);
    min-width: 0;
    height: 140px;
    margin: 0;
    scroll-snap-align: start;
  }
}
.blog-nav .item {
  isolation: isolate;
  overflow: hidden;
  transition: background-color 300ms var(--tm-blog-ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 300ms var(--tm-blog-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Нижняя полоса-акцент: у текущей рубрики видна, у остальных выезжает при наведении */
.blog-nav .item::before {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: 50% 100%;
  transition: transform 300ms var(--tm-blog-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.blog-nav .item.active {
  background: #FFF;
  box-shadow: 0 6px 18px rgba(66, 59, 56, .08);
}
.blog-nav .item.active::before {
  transform: scaleX(1);
}
.blog-nav .item.active .count {
  color: var(--color-red);
}
@media (hover: hover) {
  .blog-nav .item:hover {
    box-shadow: 0 6px 18px rgba(66, 59, 56, .08);
  }
  .blog-nav .item:hover::before {
    transform: scaleX(.6);
  }
  .blog-nav .item.active:hover::before {
    transform: scaleX(1);
  }
}
.blog-nav .item:focus-visible {
  background: #FFF;
}

@keyframes tm-blog-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* Рубрики — мягкое появление при загрузке */
  .blog-nav .sections {
    animation: tm-blog-fade 400ms var(--tm-blog-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
  }
}

/* End */
/* /local/templates/main/components/bitrix/catalog.section.list/nav/style.css?179243625410722 */