/* =====================================================
   ВЕЛОАС.РФ — Стили блогового модуля (uni-seo-blog)
   OpenCart 3.0.3.8 (rs.2), тема base-ui
   Подключить: catalog/view/theme/base-ui/assets/css/
   СКОУП: все стили только внутри #blog-article и #blog-category
   ===================================================== */

:root {
  --vb-accent:   #045837;
  --vb-accent-h: #03432a;
  --vb-black:    #111;
  --vb-text:     #444;
  --vb-muted:    #888;
  --vb-border:   #e8e8e8;
  --vb-bg:       #f7f7f7;
  --vb-radius:   16px;
  --vb-sticky:   var(--sticky-top, 100px);
}

/* ==================================================
   1. ОБЩИЙ КОНТЕЙНЕР — убираем лишние отступы OC
   ================================================== */
#blog-article.container,
#blog-category.container {
  max-width: 1320px;
  padding-left: 15px;
  padding-right: 15px;
}

/* ==================================================
   2. LAYOUT
   ================================================== */
#blog-article .blog-layout,
#blog-category .blog-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 48px;
}

#blog-article .page-main,
#blog-category .page-main {
  flex: 1;
  min-width: 0;
}

#blog-article .blog-sidebar,
#blog-category .blog-sidebar {
  flex-shrink: 0;
  width: 260px;
}

/* ==================================================
   3. ХЛЕБНЫЕ КРОШКИ
   ================================================== */
#blog-article .uni-blog-breadcrumb,
#blog-category .uni-blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 12px 0;
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--vb-muted);
  gap: 0;
}
#blog-article .uni-blog-breadcrumb li,
#blog-category .uni-blog-breadcrumb li {
  display: flex;
  align-items: center;
}
#blog-article .uni-blog-breadcrumb li + li::before,
#blog-category .uni-blog-breadcrumb li + li::before {
  content: '›';
  margin: 0 6px;
  color: #ccc;
  font-size: 14px;
}
#blog-article .uni-blog-breadcrumb li a,
#blog-category .uni-blog-breadcrumb li a {
  color: var(--vb-muted);
  text-decoration: none;
  transition: color 0.15s;
}
#blog-article .uni-blog-breadcrumb li a:hover,
#blog-category .uni-blog-breadcrumb li a:hover {
  color: var(--vb-accent);
}
#blog-article .uni-blog-breadcrumb li:last-child,
#blog-category .uni-blog-breadcrumb li:last-child {
  color: #bbb;
}

/* ==================================================
   4. HERO — чёрная шапка статьи на всю ширину
   ================================================== */
#blog-article .us-blog-post-header {
  background: #0c231b;
  margin: 0 calc(-50vw + 50%) 0;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  overflow: hidden;
  padding: 52px 0 36px;
}

#blog-article .us-blog-post-header::before {
  content: 'СТАТЬЯ';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: clamp(70px, 14vw, 180px);
  font-weight: 900;
  color: rgba(255,255,255,0.04);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  letter-spacing: -2px;
  z-index: 0;
}

#blog-article .us-blog-post-title {
  position: relative;
  z-index: 1;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}

#blog-article .uni-blog-post-info {
  position: relative;
  z-index: 1;
  max-width: 1290px;
  margin: 0 auto;
  padding: 12px 24px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* H1 статьи */
#blog-article .uni-blog-title {
  font-size: clamp(24px, 4.5vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 4px;
  max-width: 860px;
  text-align: left;
}

/* Мета в hero */
#blog-article .uni-blog-post-info-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}
#blog-article .uni-blog-post-info-item svg {
  opacity: 0.6;
  flex-shrink: 0;
}
#blog-article .uni-blog-post-info-item a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
#blog-article .uni-blog-post-info-item a:hover { color: #fff; }
#blog-article .item-published,
#blog-article .item-viewed { color: rgba(255,255,255,0.55); }
#blog-article .item-updated { color: rgba(255,255,255,0.38); }
#blog-article .uni-blog-post-info-item-time-updated { color: rgba(255,255,255,0.38); }

/* Звёзды рейтинга */
#blog-article .uni-blog-rating-star {
  display: inline-block;
  width: 13px; height: 13px;
  background: rgba(255,255,255,0.2);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
#blog-article .uni-blog-rating-star.uni-blog-rating-star-is { background: #f5c518; }

/* ==================================================
   5. КОНТЕНТ СТАТЬИ
   ================================================== */
#blog-article .us-content-inform {
  background: #fff;
  border-radius: var(--vb-radius);
  border: 1px solid var(--vb-border);
  padding: 36px 40px;
  min-width: 0;
}

/* Короткое описание */
#blog-article .uni-blog-short-desc {
  background: #f4f8f5;
  border-left: 4px solid var(--vb-accent);
  border-radius: 0 10px 10px 0;
  padding: 14px 20px;
  margin: 0 0 28px;
}
#blog-article .uni-blog-short-desc p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: #333;
  margin: 0;
}

/* Обложка */
#blog-article .uni-blog-thumb { margin: 0 0 28px; }
#blog-article .uni-blog-thumb-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  margin: 0 0 8px;
}
#blog-article .uni-blog-thumb figcaption {
  font-size: 11px;
  color: var(--vb-muted);
  text-align: center;
}

/* ==================================================
   6. ОГЛАВЛЕНИЕ TOC — только внутри blog-article
   ================================================== */
#blog-article .article-toc {
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-radius: 12px;
  margin: 0 0 28px;
  overflow: hidden;
}
#blog-article .article-toc__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
#blog-article .article-toc__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vb-black);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#blog-article .article-toc__title svg { color: var(--vb-accent); flex-shrink: 0; }

#blog-article .article-toc__icon {
  width: 20px; height: 20px;
  position: relative; flex-shrink: 0;
}
#blog-article .article-toc__icon::before,
#blog-article .article-toc__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 2px;
  background: var(--vb-muted);
  transform: translate(-50%, -50%);
  transition: transform 0.25s;
}
#blog-article .article-toc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
#blog-article .article-toc:not(.is-collapsed) .article-toc__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

#blog-article .article-toc__content {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 1000px;
}
#blog-article .article-toc.is-collapsed .article-toc__content {
  max-height: 0;
}

#blog-article .article-toc__list {
  list-style: none !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
}
#blog-article .article-toc__list li {
  padding: 0 !important;
  border: none !important;
}
#blog-article .article-toc__list li::before {
  display: none !important;
}
#blog-article .article-toc__list li.level-1 > a {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  line-height: 1.4;
  border-bottom: none !important;
}
#blog-article .article-toc__list li.level-1 > a:hover,
#blog-article .article-toc__list li.level-1 > a.is-active {
  color: var(--vb-accent);
  border-left-color: var(--vb-accent);
  background: #edf3ef;
}

#blog-article .article-toc__list .level-2-list {
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
}
#blog-article .article-toc__list .level-2 > a {
  display: block;
  padding: 6px 20px 6px 36px;
  font-size: 12px;
  color: #777;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  border-bottom: none !important;
}
#blog-article .article-toc__list .level-2 > a:hover,
#blog-article .article-toc__list .level-2 > a.is-active {
  color: var(--vb-accent);
  border-left-color: var(--vb-accent);
  background: #edf3ef;
}

/* Мини TOC кнопка (мобильная) */
.article-toc-mini {
  display: none;
  position: fixed;
  bottom: 80px; right: 20px;
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid var(--vb-border);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 200;
  transition: background 0.15s;
}
.article-toc-mini svg { color: var(--vb-accent); }
.article-toc-mini:hover { background: #edf3ef; }

.article-toc-mini-content {
  display: none;
  position: fixed;
  bottom: 132px; right: 14px;
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--vb-border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 8px 0;
  z-index: 201;
}
.article-toc-mini-content.show { display: block; }
.article-toc-mini-content .article-toc__list { padding: 0 !important; }
.article-toc-mini-content .article-toc__list li { border: none !important; }
.article-toc-mini-content .article-toc__list li::before { display: none !important; }

/* ==================================================
   7. ТЕКСТ СТАТЬИ (.us-format-text) — скоуп article
   ================================================== */
#blog-article .us-format-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--vb-text);
}
#blog-article .us-format-text h2 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--vb-black);
  margin: 36px 0 14px;
  padding-top: 8px;
  border-top: 1px solid var(--vb-border);
  scroll-margin-top: calc(var(--vb-sticky) + 16px);
}
#blog-article .us-format-text h2:first-child { border-top: none; margin-top: 0; }
#blog-article .us-format-text h3 {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--vb-black);
  margin: 24px 0 10px;
  scroll-margin-top: calc(var(--vb-sticky) + 16px);
}
#blog-article .us-format-text h4,
#blog-article .us-format-text h5,
#blog-article .us-format-text h6 {
  font-size: 14px; font-weight: 700; color: #333;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: 20px 0 8px;
}
#blog-article .us-format-text p {
  font-size: 15px; line-height: 1.8;
  color: var(--vb-text); margin: 0 0 14px;
}
#blog-article .us-format-text p:last-child { margin-bottom: 0; }
#blog-article .us-format-text strong,
#blog-article .us-format-text b { color: var(--vb-black); font-weight: 700; }
#blog-article .us-format-text em,
#blog-article .us-format-text i { font-style: italic; }
#blog-article .us-format-text a { color: var(--vb-accent); text-decoration: none; }
#blog-article .us-format-text a:hover { text-decoration: underline; }

#blog-article .us-format-text ul,
#blog-article .us-format-text ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 14px;
}
#blog-article .us-format-text ul li,
#blog-article .us-format-text ol li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 15px; line-height: 1.7;
  color: var(--vb-text);
}
#blog-article .us-format-text ul li:last-child,
#blog-article .us-format-text ol li:last-child { border-bottom: none; }
#blog-article .us-format-text ul li::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0; top: 17px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vb-accent);
}
#blog-article .us-format-text ol { counter-reset: vb-ol; }
#blog-article .us-format-text ol li::before {
  content: counter(vb-ol) '.' !important;
  counter-increment: vb-ol;
  display: block !important;
  position: absolute;
  left: 0; top: 7px;
  color: var(--vb-accent);
  font-weight: 800; font-size: 13px;
}
#blog-article .us-format-text img {
  display: block; max-width: 100%; height: auto;
  border-radius: 12px;
  margin: 24px auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
#blog-article .us-format-text hr {
  border: none;
  border-top: 1px solid var(--vb-border);
  margin: 28px 0;
}
#blog-article .us-format-text table {
  width: 100%; border-collapse: collapse;
  margin: 16px 0; font-size: 14px;
}
#blog-article .us-format-text table th,
#blog-article .us-format-text table td {
  padding: 10px 12px;
  border: 1px solid var(--vb-border);
  text-align: left; vertical-align: top; line-height: 1.5;
}
#blog-article .us-format-text table th {
  background: var(--vb-bg); font-weight: 700; color: var(--vb-black);
}
#blog-article .us-format-text blockquote {
  border-left: 4px solid var(--vb-accent);
  margin: 20px 0; padding: 12px 20px;
  background: #f4f8f5;
  border-radius: 0 10px 10px 0;
  font-style: italic; color: #555;
}

/* ==================================================
   8. БЛОК АВТОРА
   ================================================== */
#blog-article .uni-blog-article-author-block {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--vb-border);
}
#blog-article .uni-blog-article-author-block h3 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--vb-accent) !important;
  margin: 0 0 14px !important;
  border: none !important; padding: 0 !important;
}
#blog-article .uni-blog-article-author-profile-grid {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--vb-bg);
  border-radius: 14px; padding: 20px;
  border: 1px solid var(--vb-border);
}
#blog-article .uni-blog-article-author-image-container { flex-shrink: 0; }
#blog-article .uni-blog-article-author-image { margin: 0; }
#blog-article .uni-blog-article-author-image img {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important; object-fit: cover !important;
  margin: 0 !important; box-shadow: none !important;
}
#blog-article .uni-blog-article-author-name {
  font-size: 15px; font-weight: 700;
  color: var(--vb-black); margin: 0 0 4px;
}
#blog-article .uni-blog-article-author-name a {
  color: var(--vb-black); text-decoration: none;
}
#blog-article .uni-blog-article-author-name a:hover { color: var(--vb-accent); }
#blog-article .uni-blog-article-author-position {
  font-size: 12px; color: var(--vb-accent);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 6px;
}
#blog-article .uni-blog-article-author-description {
  font-size: 13px; color: #666; line-height: 1.65;
}

/* ==================================================
   9. FAQ
   ================================================== */
#blog-article .uni-blog-faq {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--vb-border);
}
#blog-article .uni-blog-faq > h3 {
  font-size: clamp(18px, 2.5vw, 22px) !important;
  font-weight: 800 !important; color: var(--vb-black) !important;
  margin: 0 0 16px !important;
  border: none !important; padding: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
#blog-article .uni-article-faq__item {
  border-bottom: 1px solid var(--vb-border);
}
#blog-article .uni-article-faq__question {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 16px 36px 16px 0;
  font-size: 15px; font-weight: 600;
  color: var(--vb-black); cursor: pointer;
  position: relative; font-family: 'Inter', sans-serif;
  line-height: 1.4; transition: color 0.15s;
}
#blog-article .uni-article-faq__question::after {
  content: '+';
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; color: var(--vb-accent);
  font-weight: 300; transition: transform 0.25s;
}
#blog-article .uni-article-faq__item.active .uni-article-faq__question::after {
  transform: translateY(-50%) rotate(45deg);
}
#blog-article .uni-article-faq__question:hover { color: var(--vb-accent); }
#blog-article .uni-article-faq__answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
#blog-article .uni-article-faq__answer-text {
  padding: 0 0 18px;
  font-size: 14px; color: #555; line-height: 1.75;
}
#blog-article .uni-article-faq__answer-text p { margin: 0 0 10px; }
#blog-article .uni-article-faq__answer-text ul,
#blog-article .uni-article-faq__answer-text ol {
  list-style: none !important; padding: 0 !important; margin: 0 0 10px;
}
#blog-article .uni-article-faq__answer-text li {
  position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 4px;
}
#blog-article .uni-article-faq__answer-text ul li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%; background: var(--vb-accent);
}

/* ==================================================
   10. РЕКОМЕНДУЕМЫЕ СТАТЬИ / ТОВАРЫ (Splide)
   ================================================== */
#blog-article .uni-blog-articles,
#blog-article .uni-blog-products {
  margin-top: 40px; padding-top: 32px;
  border-top: 2px solid var(--vb-border);
}
#blog-article .uni-blog-articles > h3,
#blog-article .uni-blog-products > h3 {
  font-size: clamp(18px, 2.5vw, 24px) !important;
  font-weight: 800 !important; color: var(--vb-black) !important;
  margin: 0 0 18px !important;
  border: none !important; padding: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}

/* Стрелки Splide */
#blog-article .uni_module_splide__arrow {
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--vb-border);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}
#blog-article .uni_module_splide__arrow:hover {
  background: #edf3ef;
  box-shadow: 0 4px 16px rgba(4,88,55,0.15);
}
#blog-article .uni_module_splide__arrow svg { fill: #555; width: 14px; height: 14px; }
#blog-article .uni_module_splide__arrow:hover svg { fill: var(--vb-accent); }
#blog-article .splide__pagination__page.is-active { background: var(--vb-accent); }

/* ==================================================
   11. КАРТОЧКИ СТАТЕЙ (общие для article и category)
   ================================================== */
#blog-article .uni-blog-article-card,
#blog-category .uni-blog-article-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--vb-border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
  height: 100%;
}
#blog-article .uni-blog-article-card:hover,
#blog-category .uni-blog-article-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}
#blog-article .uni-blog-article-card a.align-items-center,
#blog-category .uni-blog-article-card a.align-items-center {
  display: block !important; overflow: hidden;
}
#blog-article .uni-blog-article-card a.align-items-center img,
#blog-category .uni-blog-article-card a.align-items-center img {
  display: block !important; width: 100%;
  aspect-ratio: 16/9; object-fit: cover;
  border-radius: 0 !important; margin: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s;
}
#blog-article .uni-blog-article-card:hover a.align-items-center img,
#blog-category .uni-blog-article-card:hover a.align-items-center img {
  transform: scale(1.04);
}
#blog-article .uni-blog-article-card__content,
#blog-category .uni-blog-article-card__content {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  gap: 8px; flex: 1;
}
#blog-article .uni-blog-article-card__name,
#blog-category .uni-blog-article-card__name {
  font-size: 14px; font-weight: 700;
  color: var(--vb-black); line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#blog-article .uni-blog-article-card__name a,
#blog-category .uni-blog-article-card__name a {
  color: var(--vb-black); text-decoration: none;
}
#blog-article .uni-blog-article-card__name a:hover,
#blog-category .uni-blog-article-card__name a:hover { color: var(--vb-accent); }
#blog-article .uni-blog-article-card__desc,
#blog-category .uni-blog-article-card__desc {
  font-size: 13px; color: var(--vb-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1;
}
#blog-article .uni-blog-article-card__meta,
#blog-category .uni-blog-article-card__meta {
  display: flex; flex-wrap: wrap;
  gap: 10px; margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}
#blog-article .meta-item,
#blog-category .meta-item {
  font-size: 11px; color: var(--vb-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
#blog-article .meta-item a,
#blog-category .meta-item a {
  color: var(--vb-muted); text-decoration: none;
}
#blog-article .meta-item a:hover,
#blog-category .meta-item a:hover { color: var(--vb-accent); }

/* ==================================================
   12. GRID И LIST — страница категории
   ================================================== */
#blog-category .uni-grid.uni-blog-view--grid {
  display: grid;
  grid-template-columns: repeat(var(--uni-cols-xxl, 4), 1fr);
  gap: 20px; margin: 20px 0;
}
#blog-category .uni-grid.uni-blog-view--list {
  display: flex; flex-direction: column;
  gap: 16px; margin: 20px 0;
}
#blog-category .uni-blog-view--list .uni-blog-article-card {
  flex-direction: row; height: auto; border-radius: 12px;
}
#blog-category .uni-blog-view--list .uni-blog-article-card a.align-items-center {
  flex-shrink: 0; width: 220px;
}
#blog-category .uni-blog-view--list .uni-blog-article-card a.align-items-center img {
  aspect-ratio: unset !important; height: 100% !important;
}
#blog-category .uni-blog-view--list .uni-blog-article-card__content {
  padding: 18px 22px;
}
#blog-category .uni-blog-view--list .uni-blog-article-card__name {
  font-size: 15px; -webkit-line-clamp: 2;
}
#blog-category .uni-blog-view--list .uni-blog-article-card__desc {
  -webkit-line-clamp: 3;
}

/* ==================================================
   13. ЗАГОЛОВОК КАТЕГОРИИ
   ================================================== */
#blog-category .page-header-wrapper { margin: 8px 0 16px; }
#blog-category .main-h1-title {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 900; color: var(--vb-black);
  line-height: 1.15; letter-spacing: -0.3px; margin: 0;
}

/* ==================================================
   14. ОПИСАНИЕ КАТЕГОРИИ
   ================================================== */
#blog-category .uni-blog-category-description { margin-bottom: 24px; }
#blog-category .uni-blog-category-description-text {
  font-size: 14px; line-height: 1.75; color: #555; overflow: hidden;
}
#blog-category .uni-blog-category-description-text p { margin: 0 0 10px; }
#blog-category .uni-blog-category-description-opacity {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, #fff);
  pointer-events: none; transition: opacity 0.3s;
}
#blog-category .uni-blog-category-description-opacity.hidden { opacity: 0; }
#blog-category .block-readmore,
#blog-category .uni-blog-block-readmore { margin: 10px 0 0; }
#blog-category .toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--vb-accent);
  background: none; border: none; padding: 0;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: opacity 0.2s;
}
#blog-category .toggle-btn:hover { opacity: 0.75; }

/* ==================================================
   15. ПОДКАТЕГОРИИ
   ================================================== */
#blog-category .sc-subcategories-tile { margin: 0 0 20px; }
#blog-category .sc-subcategories-tile-list {
  display: flex; flex-wrap: wrap;
  gap: 8px; list-style: none; padding: 0; margin: 0;
}
#blog-category .sc-subcategories-tile-list li a {
  display: inline-block;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  color: #555; background: #fff;
  border: 1px solid var(--vb-border);
  border-radius: 20px; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#blog-category .sc-subcategories-tile-list li a:hover {
  background: #edf3ef; color: var(--vb-accent);
  border-color: rgba(4,88,55,0.3);
}

/* ==================================================
   16. КОНТРОЛЫ СОРТИРОВКИ
   ================================================== */
#blog-category .uni-blog-controls {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
#blog-category .uni-blog-sort-controls { display: flex; gap: 10px; flex-wrap: wrap; }
#blog-category .uni-blog-select {
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--vb-border);
  border-radius: 8px; padding: 8px 28px 8px 12px;
  font-size: 13px; color: #444;
  font-family: 'Inter', sans-serif; cursor: pointer;
}
#blog-category .uni-blog-select:focus {
  outline: none; border-color: var(--vb-accent);
}
#blog-category .uni-blog-view-toggle { display: flex; gap: 4px; }
#blog-category .uni-blog-btn {
  width: 36px; height: 36px; background: #fff;
  border: 1px solid var(--vb-border); border-radius: 8px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.15s;
}
#blog-category .uni-blog-btn:hover,
#blog-category .uni-blog-btn.active {
  background: #edf3ef; border-color: rgba(4,88,55,0.3);
}

/* ==================================================
   17. ПАГИНАЦИЯ
   ================================================== */
#blog-category .uni-blog-pagination {
  margin: 32px 0 0; display: flex; justify-content: center;
}
#blog-category .uni-blog-pagination .links {
  display: flex; gap: 4px; align-items: center;
}
#blog-category .uni-blog-pagination .links a,
#blog-category .uni-blog-pagination .links span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--vb-border);
  background: #fff; color: #555;
  transition: background 0.15s, color 0.15s;
}
#blog-category .uni-blog-pagination .links a:hover {
  background: #edf3ef; color: var(--vb-accent);
}
#blog-category .uni-blog-pagination .links .active {
  background: var(--vb-accent); color: #fff;
  border-color: var(--vb-accent);
}

/* ==================================================
   18. ПУСТОЙ БЛОГ
   ================================================== */
#blog-category .uni-blog-empty {
  text-align: center; padding: 48px 24px; color: var(--vb-muted);
}
#blog-category .uni-blog-empty a {
  display: inline-block; padding: 10px 24px;
  background: var(--vb-accent); color: #fff;
  border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: 14px;
}
#blog-category .uni-blog-empty a:hover { background: var(--vb-accent-h); }

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 1200px) {
  #blog-category .uni-grid.uni-blog-view--grid {
    grid-template-columns: repeat(var(--uni-cols-xl, 3), 1fr);
  }
  #blog-article .us-content-inform { padding: 28px 28px; }
}
@media (max-width: 992px) {
  #blog-category .uni-grid.uni-blog-view--grid {
    grid-template-columns: repeat(var(--uni-cols-lg, 3), 1fr);
  }
}
@media (max-width: 768px) {
  #blog-article .blog-layout,
  #blog-category .blog-layout {
    flex-direction: column; padding-bottom: 32px;
  }
  #blog-article .blog-sidebar,
  #blog-category .blog-sidebar { width: 100%; }
  #blog-category .uni-grid.uni-blog-view--grid {
    grid-template-columns: repeat(var(--uni-cols-md, 2), 1fr); gap: 14px;
  }
  #blog-article .us-blog-post-header { padding: 32px 0 24px; }
  #blog-article .uni-blog-title { font-size: clamp(22px, 5vw, 34px); }
  #blog-article .us-content-inform { padding: 22px 18px; border-radius: 12px; }
  .article-toc-mini { display: flex !important; }
  #blog-category .uni-blog-view--list .uni-blog-article-card { flex-direction: column; }
  #blog-category .uni-blog-view--list .uni-blog-article-card a.align-items-center { width: 100%; }
}
@media (max-width: 576px) {
  #blog-category .uni-grid.uni-blog-view--grid {
    grid-template-columns: repeat(var(--uni-cols-sm, 2), 1fr); gap: 12px;
  }
  #blog-article .us-format-text p,
  #blog-article .us-format-text li { font-size: 14px; }
  #blog-article .uni-blog-article-author-profile-grid { flex-direction: column; }
}
@media (max-width: 480px) {
  #blog-category .uni-grid.uni-blog-view--grid {
    grid-template-columns: 1fr;
  }
  #blog-article .us-blog-post-header::before { display: none; }
}

/* ==================================================
   BLOG HERO — vb-hero для блоговых статей
   Вынесен за контейнер, идентичен vs-hero политики
   ================================================== */
#blog-article ~ .vb-full,
.vb-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

.vb-hero {
  background: #0c231b;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}

.vb-hero::before {
  content: attr(data-label);
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: clamp(70px, 14vw, 180px);
  font-weight: 900;
  color: rgba(255,255,255,0.04);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  letter-spacing: -2px;
  z-index: 0;
}

.vb-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 52px 24px 40px;
}

.vb-hero__h1 {
  font-size: clamp(26px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 20px;
  max-width: 860px;
  text-align: left;
}
.vb-hero__h1 span { color: #76bc71; }

.vb-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vb-hero__meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vb-hero__meta-item {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vb-hero__meta-item svg { opacity: 0.6; flex-shrink: 0; }
.vb-hero__meta-item a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.vb-hero__meta-item a:hover { color: #fff; }
.vb-hero__meta-item--updated { color: rgba(255,255,255,0.38); }
.vb-hero__meta-item--author {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.vb-hero__meta-label {
  color: rgba(255,255,255,0.35);
  font-weight: 400;
  font-size: 11px;
}

/* Хлебные крошки под hero — тёмная полоса */
.vs-breadcrumbs {
  background: #133227;
  border-bottom: 1px solid #2a2a2a;
}
.vs-breadcrumbs__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 24px;
}
.vs-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
  font-size: 12px;
}
.vs-breadcrumb-list li {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.4);
}
.vs-breadcrumb-list li + li::before {
  content: '›';
  margin: 0 6px;
  color: rgba(255,255,255,0.2);
  font-size: 14px;
}
.vs-breadcrumb-list li a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.vs-breadcrumb-list li a:hover { color: #fff; }
.vs-breadcrumb-list li:last-child { color: rgba(255,255,255,0.3); }

/* Убираем отступ сверху у main когда есть hero снаружи */
#blog-article.container {
  padding-top: 24px;
}

/* Скрываем старые крошки внутри page-main если остались */
#blog-article .breadcrumbs-wrapper {
  display: none;
}

/* Ширина контента статьи — ограничиваем как политика */
#blog-article .blog-layout {
  max-width: 1160px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .vb-hero { min-height: 200px; }
  .vb-hero__inner { padding: 36px 16px 28px; }
  .vb-hero__meta-row { gap: 12px; }
}
@media (max-width: 480px) {
  .vb-hero__h1 { font-size: clamp(22px, 6vw, 32px); }
  .vb-hero::before { display: none; }
}


/* ==================================================
   ИСПРАВЛЮНИЯ: горизонтальный скролй, выравнивание
   ================================================== */

/* Фикс горизонтального скролла от vb-full */
html, body {
  overflow-x: hidden;
}
.vb-full {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 0 !important;
}

/* Выравнивание hero по левому краю статьи */
.vb-hero__inner,
.vs-breadcrumbs__inner {
  max-width: 1630px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Точное совпадение с левым краем контента статьи */
#blog-article.container {
  max-width: 1630px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Ограничение ширины блога как у политики */
#blog-article .blog-layout {
  max-width: 100%;
}

/* Статья не шире чем нужно — как у политики */
#blog-article .page-main {
  max-width: 860px;
}

/* Содержание (TOC) — делаем плавающим сайдбаром */
#blog-article .article-toc-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: relative;
}


/* ==================================================
   ИСПРАВЛЕНИЕ выравнивания и ширины — v3
   ================================================== */

/* Убираем ограничение ширины page-main */
#blog-article .page-main {
  max-width: none !important;
}

/* vs-main--sidebar — flexbox как на политике */
#blog-article .vs-main--sidebar {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* Контент занимает всё доступное место */
#blog-article .vs-content {
  flex: 1;
  min-width: 0;
}

/* Сайдбар nav фиксированной ширины */
#blog-article .vb-nav {
  flex-shrink: 0;
  width: 260px;
}

/* Выравнивание hero по левому краю контента статьи —
   отступ совпадает с .sect-article-single__wrapper */
.vb-hero__inner,
.vs-breadcrumbs__inner {
  max-width: 1630px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}


/* Выравнивание hero точно по контейнеру */
.vb-hero__inner,
.vs-breadcrumbs__inner {
  max-width: 1630px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}


/* Выравнивание hero по контейнеру статьи (как .vs-main) */
.vb-hero__inner,
.vs-breadcrumbs__inner {
  max-width: 1160px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* blog-layout по тем же параметрам что и vs-main--sidebar */
#blog-article .vs-main--sidebar {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 48px 24px 72px !important;
  display: grid !important;
  grid-template-columns: 1fr 260px !important;
  gap: 28px !important;
  align-items: start !important;
}


/* ==================================================
   МОБИЛЬНЫЙ АДАПТИВ — содержание статично сверху
   ================================================== */
@media (max-width: 900px) {
  #blog-article .vs-main--sidebar {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 16px 48px !important;
  }
  #blog-article .vb-nav {
    width: 100% !important;
    order: -1;
    position: static !important;
    left: auto !important;
    top: auto !important;
  }
  #blog-article .vb-nav.is-sticky {
    position: static !important;
    width: 100% !important;
    left: auto !important;
  }
  #blog-article .vs-content {
    width: 100% !important;
  }
  /* Политика на мобильных */
  .vs-main--sidebar {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 16px 48px !important;
  }
  .vs-main--sidebar .vb-nav {
    width: 100% !important;
    order: -1;
    position: static !important;
  }
  .vs-main--sidebar .vb-nav.is-sticky {
    position: static !important;
    width: 100% !important;
  }
}


/* ==================================================
   КАРТИНКА СТАТЬИ — без белых полей, cover
   ================================================== */
#blog-article .uni-blog-thumb {
  margin: 0 0 24px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 16/7;
}
#blog-article .uni-blog-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: block !important;
}
#blog-article .uni-blog-thumb figcaption {
  padding: 6px 12px;
  font-size: 11px;
  color: #999;
  text-align: center;
  background: #f7f7f7;
}

/* ==================================================
   АННОТАЦИЯ В СТАТЬЕ — скрываем (только для карточек)
   ================================================== */
#blog-article .uni-blog-short-desc {
  display: none !important;
}

/* ==================================================
   КАРТИНКА В КАРТОЧКАХ КАТЕГОРИИ — cover без полей
   ================================================== */
#blog-category .uni-blog-article-card .card-img-top,
#blog-category .uni-blog-article-card img,
#blog-category .uni-blog-article-card a.align-items-center img {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: #f0f0f0 !important;
}


/* ==================================================
   ИСПРАВЛЕНИЕ КАРТИНОК В СТАТЬЕ
   ================================================== */

/* Убираем лишний отступ у картинок внутри текста */
#blog-article .us-format-text img {
  margin: 16px 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Главная картинка статьи — нормальное оформление */
#blog-article .uni-blog-thumb {
  margin: 0 0 28px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #0c231b !important;
  aspect-ratio: 16/7 !important;
  display: block !important;
}
#blog-article .uni-blog-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: block !important;
}
#blog-article figure.uni-blog-thumb {
  display: block !important;
}

/* ==================================================
   КАРТОЧКИ КАТЕГОРИИ — картинка cover без полей
   ================================================== */
#blog-category .uni-blog-article-card {
  overflow: hidden !important;
  border-radius: 12px !important;
}
#blog-category .uni-blog-article-card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#blog-category .uni-blog-article-card .card-img-top {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}


/* ==================================================
   ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ КАРТИНОК
   ================================================== */

/* Главная картинка — без фиксированного aspect-ratio */
#blog-article .uni-blog-thumb {
  margin: 0 0 28px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  aspect-ratio: unset !important;
  display: block !important;
}
#blog-article .uni-blog-thumb-img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
  margin: 0 0 6px !important;
  display: block !important;
}

/* Картинки внутри текста статьи — убираем чёрный фон */
#blog-article .us-format-text img {
  margin: 20px auto !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  background: transparent !important;
  height: auto !important;
  object-fit: unset !important;
}


/* ==================================================
   ФИНАЛЬНЫЙ ФИКС КАРТИНОК — перебиваем все конфликты
   ================================================== */
#blog-article figure.uni-blog-thumb {
  display: block !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
}
#blog-article figure.uni-blog-thumb img.uni-blog-thumb-img,
#blog-article .uni-blog-thumb .uni-blog-thumb-img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#blog-article figure.uni-blog-thumb figcaption {
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
  background: #f7f7f7 !important;
  margin: 0 !important;
  border-top: 1px solid #eee !important;
}

/* Картинки внутри текста — убираем серый фон figcaption */
#blog-article .us-format-text figure {
  margin: 20px 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: transparent !important;
}
#blog-article .us-format-text figure img {
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
#blog-article .us-format-text figure figcaption {
  background: #f7f7f7 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
  margin: 0 !important;
}


/* Главная картинка — принудительно на всю ширину */
#blog-article .uni-blog-thumb-img.img-fluid {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ФИНАЛ — главная картинка без полей */
#blog-article .uni-blog-thumb {
  aspect-ratio: unset !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
}
#blog-article .uni-blog-thumb-img,
#blog-article .uni-blog-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  margin: 0 !important;
}
#blog-article .uni-blog-thumb figcaption {
  margin-top: 0 !important;
  background: #f7f7f7 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
}


/* Перебиваем стили модуля uni-seo-blog */
#blog-article .uni-blog-thumb img.uni-blog-thumb-img,
#blog-article .uni-blog-thumb > img {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ==================================================
   ТЕГИ-ПЛИТКА .vb-tags
   ================================================== */
#blog-article .vb-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 32px 0 8px !important;
  padding-top: 24px !important;
  border-top: 1px solid #e8e8e8 !important;
}
#blog-article .vb-tag {
  display: inline-block !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
#blog-article .vb-tag:hover {
  background: #edf3ef !important;
  color: #045837 !important;
  border-color: rgba(4,88,55,0.3) !important;
  text-decoration: none !important;
}

/* ==================================================
   CALLOUT — советы и предупреждения
   ================================================== */
#blog-article .vb-callout {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  background: #f4f8f5 !important;
  border-left: 4px solid #045837 !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
}
#blog-article .vb-callout p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #444 !important;
}
#blog-article .vb-callout strong {
  color: #045837 !important;
}
#blog-article .vb-callout--tip {
  background: #f0fdf4 !important;
  border-left-color: #16a34a !important;
}
#blog-article .vb-callout--tip strong {
  color: #16a34a !important;
}

/* ==================================================
   HIGHLIGHT — врезка-подсказка
   ================================================== */
#blog-article .vb-highlight {
  background: #f7f7f7 !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #444 !important;
  border: 1px solid #e8e8e8 !important;
}
#blog-article .vb-highlight strong {
  color: #111 !important;
}

/* ==================================================
   BLOCKQUOTE — улучшенные цитаты
   ================================================== */
#blog-article .us-format-text blockquote {
  position: relative !important;
  border-left: 4px solid #045837 !important;
  background: #f4f8f5 !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px 20px 28px !important;
  margin: 28px 0 !important;
  font-style: normal !important;
  color: #444 !important;
}
#blog-article .us-format-text blockquote::before {
  content: '"' !important;
  position: absolute !important;
  top: -10px !important;
  left: 16px !important;
  font-size: 60px !important;
  color: #045837 !important;
  opacity: 0.2 !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
}
#blog-article .us-format-text blockquote p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  font-style: italic !important;
}


/* Плитка тегов — скорректированные отступы и размер */
#blog-article .vb-tags {
  margin: 24px 0 !important;
  padding: 24px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
#blog-article .vb-tag {
  padding: 5px 14px !important;
  font-size: 12px !important;
  border-radius: 16px !important;
}


/* ==================================================
   FAQ — улучшенный дизайн
   ================================================== */

/* Секция FAQ */
#blog-article .uni-blog-faq {
  margin-top: 40px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Заголовок FAQ */
#blog-article .uni-blog-faq > h3 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--vb-accent) !important;
  margin: 0 0 6px !important;
}
#blog-article .uni-blog-faq > p {
  font-size: 13px !important;
  color: #888 !important;
  margin: 0 0 20px !important;
}

/* Обёртка аккордеона */
#blog-article .uni-article-faq {
  border: 1px solid var(--vb-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Элемент FAQ */
#blog-article .uni-article-faq__item {
  border-bottom: 1px solid var(--vb-border) !important;
  counter-increment: faq-counter !important;
}
#blog-article .uni-article-faq__item:last-child {
  border-bottom: none !important;
}
#blog-article .uni-article-faq {
  counter-reset: faq-counter !important;
}

/* Вопрос */
#blog-article .uni-article-faq__question {
  padding: 18px 52px 18px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vb-black) !important;
  background: #fff !important;
  transition: background 0.15s, color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#blog-article .uni-article-faq__question::before {
  content: counter(faq-counter) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  color: #888 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}
#blog-article .uni-article-faq__item.active .uni-article-faq__question::before {
  background: var(--vb-accent) !important;
  color: #fff !important;
}

/* Иконка +/× */
#blog-article .uni-article-faq__question::after {
  content: '+' !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--vb-accent) !important;
  transition: transform 0.25s !important;
  line-height: 1 !important;
}
#blog-article .uni-article-faq__item.active .uni-article-faq__question::after {
  transform: translateY(-50%) rotate(45deg) !important;
}
#blog-article .uni-article-faq__item.active .uni-article-faq__question {
  color: var(--vb-accent) !important;
  background: #edf3ef !important;
}
#blog-article .uni-article-faq__question:hover {
  background: #fafafa !important;
  color: var(--vb-accent) !important;
}

/* Ответ */
#blog-article .uni-article-faq__answer-text {
  padding: 16px 20px 20px 60px !important;
  background: #edf3ef !important;
  border-top: 1px solid #fde8e8 !important;
  font-size: 14px !important;
  color: #555 !important;
  line-height: 1.75 !important;
}


/* FAQ финальные правки */
#blog-article .uni-article-faq__answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
}
#blog-article .uni-article-faq__answer-text {
  padding: 20px 20px 20px 60px !important;
  background: #edf3ef !important;
  border-top: none !important;
  margin: 0 !important;
}
/* Убираем зазор — ответ вплотную к вопросу */
#blog-article .uni-article-faq__item.active {
  background: transparent !important;
}
/* Крестик вместо плюса при открытии */
#blog-article .uni-article-faq__item.active .uni-article-faq__question::after {
  content: '×' !important;
  transform: translateY(-50%) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
}
#blog-article .uni-article-faq__question::after {
  font-size: 22px !important;
  right: 20px !important;
}


/* FAQ — убираем конфликт с JS max-height */
#blog-article .uni-article-faq__answer {
  max-height: unset !important;
  overflow: unset !important;
  transition: unset !important;
}


/* FAQ — восстанавливаем анимацию, убираем unset */
#blog-article .uni-article-faq__answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease !important;
  padding: 0 !important;
}
#blog-article .uni-article-faq__item.active .uni-article-faq__answer {
  max-height: 2000px !important;
}


/* FAQ — анимация + через rotate вместо замены символа */
#blog-article .uni-article-faq__question::after {
  content: '+' !important;
  transition: transform 0.25s ease !important;
  transform: translateY(-50%) rotate(0deg) !important;
}
#blog-article .uni-article-faq__item.active .uni-article-faq__question::after {
  content: '+' !important;
  transform: translateY(-50%) rotate(45deg) !important;
}


/* FAQ заголовок h2 и описание */
#blog-article .uni-blog-faq > h2 {
  font-size: clamp(18px, 2.5vw, 22px) !important;
  font-weight: 800 !important;
  color: var(--vb-black) !important;
  margin: 0 0 8px !important;
  border: none !important;
  padding: 0 !important;
}
#blog-article .uni-blog-faq__desc {
  font-size: 13px !important;
  color: #888 !important;
  margin: 0 0 20px !important;
  line-height: 1.6 !important;
}

/* FAQ ответ — одинаковые отступы, меньший размер */
#blog-article .uni-article-faq__answer-text {
  padding: 16px 20px 16px 60px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}


/* FAQ вопрос как h3 */
#blog-article .uni-article-faq__question {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 18px 52px 18px 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  text-align: left !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: #fff !important;
  border: none !important;
  color: var(--vb-black) !important;
  transition: background 0.15s, color 0.15s !important;
  position: relative !important;
}

/* FAQ ответ — одинаковые отступы сверху и снизу */
#blog-article .uni-article-faq__answer-text {
  padding: 14px 20px 14px 60px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #555 !important;
}


/* FAQ — убираем лишние отступы у параграфов в ответе */
#blog-article .uni-article-faq__answer-text p:last-child {
  margin-bottom: 0 !important;
}
#blog-article .uni-article-faq__answer-text p {
  margin: 0 0 8px !important;
}
#blog-article .uni-article-faq__answer-text {
  padding: 14px 20px 14px 60px !important;
}


/* FAQ — убираем верхний отступ у answer */
#blog-article .uni-article-faq__answer {
  padding: 0 !important;
}


/* FAQ answer-text — финальный фикс отступов */
#blog-article .uni-article-faq__item.active .uni-article-faq__answer-text,
#blog-article .uni-article-faq .uni-article-faq__answer-text {
  padding: 14px 20px 14px 60px !important;
  margin: 0 !important;
}


/* FAQ h3 вопрос — убираем margin-bottom */
#blog-article h3.uni-article-faq__question {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}


/* Финальный фикс горизонтального скролла */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
.vb-full {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
}


/* Главная картинка — div вместо figure */
#blog-article div.uni-blog-thumb {
  margin: 0 0 28px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
}
#blog-article div.uni-blog-thumb img.uni-blog-thumb-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: unset !important;
}
#blog-article .uni-blog-thumb-caption {
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
  background: #f7f7f7 !important;
  margin: 0 !important;
}


/* Главная картинка — aspect-ratio + object-fit для любого экрана */
#blog-article div.uni-blog-thumb {
  aspect-ratio: 16/7 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  margin: 0 0 28px !important;
  background: #f0f0f0 !important;
}
#blog-article div.uni-blog-thumb img.uni-blog-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* Главная картинка — новый класс uni-blog-main-thumb */
#blog-article figure.uni-blog-main-thumb {
  margin: 0 0 28px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
}
#blog-article figure.uni-blog-main-thumb img.uni-blog-main-thumb-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#blog-article figure.uni-blog-main-thumb figcaption {
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
  background: #f7f7f7 !important;
  margin: 0 !important;
}


/* Главная картинка — выходит за padding контейнера */
#blog-article figure.uni-blog-main-thumb {
  margin-left: -40px !important;
  margin-right: -40px !important;
  margin-top: -36px !important;
  margin-bottom: 28px !important;
  border-radius: 12px 12px 0 0 !important;
}

@media (max-width: 1024px) {
  #blog-article figure.uni-blog-main-thumb {
    margin-left: -28px !important;
    margin-right: -28px !important;
    margin-top: -28px !important;
  }
}

@media (max-width: 600px) {
  #blog-article figure.uni-blog-main-thumb {
    margin-left: -18px !important;
    margin-right: -18px !important;
    margin-top: -22px !important;
  }
}


/* Убираем overflow hidden с контейнера — мешает картинке выходить за padding */
#blog-article .us-content-inform {
  overflow: visible !important;
}
#blog-article .vs-content {
  overflow: visible !important;
}


/* Главная картинка — финальный вид */
#blog-article figure.uni-blog-main-thumb {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
  border: 1px solid var(--vb-border) !important;
}
#blog-article figure.uni-blog-main-thumb img.uni-blog-main-thumb-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#blog-article figure.uni-blog-main-thumb figcaption {
  padding: 8px 16px !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
  background: #f7f7f7 !important;
  margin: 0 !important;
  border-top: 1px solid var(--vb-border) !important;
}


/* Главная картинка — ограничиваем высоту через CSS */
#blog-article figure.uni-blog-main-thumb {
  max-height: 520px !important;
}
#blog-article figure.uni-blog-main-thumb img.uni-blog-main-thumb-img {
  max-height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* Главная картинка — финальное решение */
#blog-article figure.uni-blog-main-thumb {
  max-height: unset !important;
  overflow: hidden !important;
}
#blog-article figure.uni-blog-main-thumb img.uni-blog-main-thumb-img {
  max-height: unset !important;
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  display: block !important;
}

/* Фикс главной картинки — растягиваем на всю ширину */
#blog-article figure.uni-blog-main-thumb {
  width: 100% !important;
  max-width: 100% !important;
}
#blog-article figure.uni-blog-main-thumb img.uni-blog-main-thumb-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: unset !important;
  display: block !important;
}

/* ---- слайдер "Похожие статьи": не даём растягиваться за экран (05.08.2026) ---- */
#blog-article #related-articles {
  max-width: 100%;
  overflow: hidden;
}
#blog-article #related-articles .splide__track {
  max-width: 100%;
  overflow: hidden;
}

/* ---- слайдер: жёсткое ограничение по ширине окна (05.08.2026) ---- */
@media (max-width: 768px) {
  #blog-article .uni-blog-articles {
    max-width: 100%;
    overflow: hidden;
  }
  #blog-article #related-articles {
    max-width: calc(100vw - 40px);
    overflow: hidden;
  }
  #blog-article #related-articles .splide__track,
  #blog-article #related-articles .splide__list {
    max-width: 100%;
  }
  #blog-article #related-articles .splide__slide {
    max-width: calc(100vw - 60px);
  }
}

/* ---- Похожие статьи: текст и стрелки (05.08.2026) ---- */

/* заголовок — место под 2 строки, описание — ровно 3 с многоточием */
#blog-article .uni-blog-article-card__name,
#blog-category .uni-blog-article-card__name { min-height: 2.8em; }

#blog-article .uni-blog-article-card__desc,
#blog-category .uni-blog-article-card__desc {
  -webkit-line-clamp: 3;
  max-height: 4.65em;
  flex: 0 0 auto;
}

#blog-article .uni-blog-article-card__meta,
#blog-category .uni-blog-article-card__meta { margin-top: auto; }

/* стрелки: у модуля битый относительный путь к иконке, задаём абсолютный */
#blog-article .uni_module_splide__arrow {
  width: 48px;
  height: 48px;
  content: none !important;
  background-image: url(/catalog/view/javascript/uni-seo-blog/24-chevron.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  background-color: #fff !important;
}


/* ---- описание карточки: 3 строки (полный набор свойств) ---- */
#blog-article .uni-blog-article-card .uni-blog-article-card__desc,
#blog-category .uni-blog-article-card .uni-blog-article-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: 4.65em;
  flex: 0 0 auto;
}
/* ---- стрелки: вынос за край слайдера, только десктоп ---- */
@media (min-width: 769px) {
  #blog-article .uni-blog-articles { overflow: visible; }
  #blog-article #related-articles { overflow: visible; }
  #blog-article #related-articles .splide__track { overflow: hidden; }
  #blog-article .uni_module_splide__arrow--prev { left: -20px; }
  #blog-article .uni_module_splide__arrow--next { right: -20px; }
}

/* ---- пагинация: на мобильном точек слишком много, скрываем ---- */
@media (max-width: 768px) {
  #blog-article .uni_module_splide__pagination { display: none; }
}


/* === BLOG-AUTHOR SCOPE (добавлено 18.08.2026) ================== */

/* Отступ между H1 и карточкой */
#blog-category .page-header-wrapper { margin-bottom: 20px; }

/* Карточка автора */
#blog-category .author-profile-grid {
  background: #fff; border-radius: 15px; padding: 24px;
  box-shadow: 0 7px 5px rgba(0,0,0,0.1); margin-bottom: 32px;
}
#blog-category .author-name {
  font-size: 24px; font-weight: 700; margin: 0 0 8px;
}
#blog-category .author-position {
  font-size: 15px; color: var(--vb-muted); font-style: normal; margin-bottom: 12px;
}
#blog-category .author-position strong { font-weight: 600; font-style: normal; }
#blog-category .author-short-description,
#blog-category .author-description-full { font-size: 15px; line-height: 1.65; }
#blog-category .author-description-full p { margin-bottom: 1em; }
#blog-category .author-description-full p:last-child { margin-bottom: 0; }
#blog-category .author-email a { color: var(--vb-accent); }
#blog-category .author-email a:hover { text-decoration: underline; }
#blog-category .page-main > h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; }

/* Кнопки вида — как в категориях блога */
#blog-category .uni-blog-view-toggle { display: flex; gap: 4px; }
#blog-category .uni-blog-btn {
  width: 36px; height: 36px; background: #fff;
  border: 1px solid var(--vb-border); border-radius: 8px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.15s;
}
#blog-category .uni-blog-btn:hover,
#blog-category .uni-blog-btn.active {
  background: #edf3ef; border-color: rgba(4,88,55,0.3);
}

/* Пагинация — по центру, фирменные цвета */
#blog-category .uni-blog-pagination,
#blog-category .uni-blog-pagination {
  margin: 32px 0 0; display: flex; justify-content: center;
}
#blog-category .uni-blog-pagination .links ul.pagination,
#blog-category .uni-blog-pagination .links ul.pagination {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px; margin: 0; padding: 0; list-style: none;
}
#blog-category .uni-blog-pagination .links ul.pagination li,
#blog-category .uni-blog-pagination .links ul.pagination li {
  margin: 0; padding: 0; list-style: none;
}
#blog-category .uni-blog-pagination .links ul.pagination li::before,
#blog-category .uni-blog-pagination .links ul.pagination li::before {
  content: none;
}
#blog-category .uni-blog-pagination .links a,
#blog-category .uni-blog-pagination .links span,
#blog-category .uni-blog-pagination .links a,
#blog-category .uni-blog-pagination .links span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--vb-border);
  background: #fff; color: #555;
  transition: background 0.15s, color 0.15s;
}
#blog-category .uni-blog-pagination .links a:hover,
#blog-category .uni-blog-pagination .links a:hover {
  background: var(--vb-accent); color: #fff; border-color: var(--vb-accent);
}
#blog-category .uni-blog-pagination .links li.active span,
#blog-category .uni-blog-pagination .links li.active span {
  background: var(--vb-accent); color: #fff; border-color: var(--vb-accent);
}

@media (max-width: 768px) {
  #blog-category .author-profile-grid { padding: 16px; }
  #blog-category .author-name { font-size: 20px; }
}

/* === BLOG-AUTHOR FIX-1 (18.08.2026) ============================ */
#blog-category .rme-breadcrumbs { margin-bottom: 24px; }
#blog-category .page-header-wrapper { margin-top: 0; }

/* === BLOG-VIEW-TOGGLE FIX (18.08.2026) ========================= */
/* Иконка — CSS-маска с background-color: currentColor,
   поэтому цвет задаётся через color кнопки */
#blog-category .uni-blog-btn,
#blog-category .uni-blog-btn,
#blog-article .uni-blog-btn {
  color: #555;
  background: #fff;
  border: 1px solid var(--vb-border);
}
#blog-category .uni-blog-btn:hover,
#blog-category .uni-blog-btn:hover,
#blog-article .uni-blog-btn:hover {
  color: var(--vb-accent);
  background: #edf3ef;
  border-color: rgba(4,88,55,0.3);
}
#blog-category .uni-blog-btn.active,
#blog-category .uni-blog-btn.active,
#blog-article .uni-blog-btn.active {
  color: #fff;
  background: var(--vb-accent);
  border-color: var(--vb-accent);
}


/* === AUTHOR EMAIL FIX (18.08.2026) ============================= */
#blog-category .author-email { font-size: 15px; margin-top: 12px; }
#blog-category .author-email strong { font-weight: 600; margin-right: 4px; }
#blog-category .author-email a { font-size: 15px; }

/* === BLOG FIX-2 (18.08.2026) =================================== */
/* li.active красился фоном без скругления — фон переносим на span */
#blog-category .uni-blog-pagination .links li.active,
#blog-article .uni-blog-pagination .links li.active {
  background: transparent;
  border: none;
  padding: 0;
}

/* Крошки на страницах авторов — размер и отступы как в блоге */
#blog-category .rme-breadcrumbs {
  font-size: 12px;
  color: var(--vb-muted);
  padding: 12px 0;
  margin: 0 0 8px;
  line-height: 1.4;
}
#blog-category .rme-breadcrumbs a { color: var(--vb-muted); }
#blog-category .rme-breadcrumbs a:hover { color: var(--vb-accent); }
#blog-category .rme-breadcrumbs [aria-current] { color: #bbb; }


/* === AUTHOR SOCIAL (18.08.2026) ================================ */
#blog-category .author-social { margin-top: 12px; font-size: 15px; }
#blog-category .author-social > strong {
  font-weight: 600; font-size: 15px; margin-right: 4px;
}
#blog-category .author-social .social-list {
  display: inline-flex; gap: 8px; list-style: none;
  margin: 0; padding: 0; vertical-align: middle;
}
#blog-category .author-social .social-list li { margin: 0; padding: 0; }
#blog-category .author-social .social-list li::before { content: none; }
#blog-category .author-social .social-list a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #f0f0f0; color: #555;
  transition: background 0.15s, color 0.15s;
}
#blog-category .author-social .social-list a:hover {
  background: var(--vb-accent); color: #fff;
}
#blog-category .author-social .social-list a .fa { font-size: 17px; line-height: 1; }
#blog-category .author-social .social-name {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==================================================
   ЭКО-ЕЛИ — правки поверх темы ВЕЛОАС (15.10.2026)
   ================================================== */
:root { --vb-accent: #045837; --vb-accent-h: #03432a; --vs-accent: #045837; }
/* Вторая часть H1 на тёмном фоне — золотой сайта #c6aa68 (как логотип в подвале) */
.vb-hero__h1 span, .vs-hero__h1 span { color: #c6aa68 !important; }
/* Крошки рубрик блога прятались под белой шапкой (header__center перекрывает ~30px) */
#blog-category .rme-breadcrumbs { position: relative; z-index: 12; padding-top: 40px; }
@media (max-width: 991px) { #blog-category .rme-breadcrumbs { padding-top: 12px; } }
/* Обложка и картинки в тексте: исходники 450–800 px и часто вертикальные —
   не растягиваем на всю ширину, ограничиваем высоту и центрируем.
   Горизонтальная обложка 16:9 по-прежнему встаёт на всю ширину. */
#blog-article figure.uni-blog-main-thumb,
#blog-article figure.uni-blog-thumb { background: #edf3ef !important; text-align: center !important; }
#blog-article figure.uni-blog-main-thumb img.uni-blog-main-thumb-img,
#blog-article figure.uni-blog-thumb img.uni-blog-images-img,
#blog-article .us-format-text img {
  width: auto !important; max-width: 100% !important; max-height: 560px !important; height: auto !important;
  object-fit: contain !important; margin-left: auto !important; margin-right: auto !important; display: block !important;
}
#blog-article figure.uni-blog-thumb img.uni-blog-images-img { box-shadow: none !important; margin-top: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; }
#blog-article figure.uni-blog-thumb { border-radius: 12px !important; overflow: hidden !important; margin: 20px 0 !important; }