/* ============================================================
   article-page.less — обвязка страницы статьи и виджеты.
   Pixel-перфект под Figma r52vB2MAsV15DAfsM8TzdC.
   ============================================================ */
/* ---------- Reset: нейтрализация глобальных site.less правил
   (body h1 → text-align:center, ::after подчёркивание; .content p
   → text-indent + text-align justify). Только в шапке, контенте
   и комментариях — НЕ в правом сайдбаре (там собственные стили
   виджетов с белым/зелёным цветом заголовков). ---------- */
.article-page__header h1,
.article-page__main .article-content h1,
.article-page__main .comments-block h1,
.article-page__header h2,
.article-page__main .article-content h2,
.article-page__main .comments-block h2,
.article-page__header h3,
.article-page__main .article-content h3,
.article-page__main .comments-block h3,
.article-page__header h4,
.article-page__main .article-content h4,
.article-page__main .comments-block h4,
.article-page__header h5,
.article-page__main .article-content h5,
.article-page__main .comments-block h5,
.article-page__header h6,
.article-page__main .article-content h6,
.article-page__main .comments-block h6 {
  text-align: left;
  text-transform: none;
  color: #1d1d1d;
  margin-top: 0;
}
.article-page__header h1::after,
.article-page__main .article-content h1::after,
.article-page__main .comments-block h1::after,
.article-page__header h2::after,
.article-page__main .article-content h2::after,
.article-page__main .comments-block h2::after,
.article-page__header h3::after,
.article-page__main .article-content h3::after,
.article-page__main .comments-block h3::after,
.article-page__header h4::after,
.article-page__main .article-content h4::after,
.article-page__main .comments-block h4::after,
.article-page__header h5::after,
.article-page__main .article-content h5::after,
.article-page__main .comments-block h5::after,
.article-page__header h6::after,
.article-page__main .article-content h6::after,
.article-page__main .comments-block h6::after {
  display: none !important;
  content: none !important;
}
.article-page__header p,
.article-page__main .article-content p,
.article-page__main .comments-block p {
  text-indent: 0;
  text-align: left;
}
/* Заголовок формы коммента: Figma 1:131 — Roboto 400 24 lh 1.5 #2e5b35.
   Перебиваем reset выше — оба родителя те же, но цвет должен остаться зелёным. */
.article-page__main .comments-block h3.comments-block__form-title,
.article-page__main .comments-block .comments-block__form-title {
  color: #2e5b35;
}
/* Шапка H1 — Figma 1:46 (Montserrat Medium 40 UPPERCASE) */
.article-page__header h1 {
  text-transform: uppercase;
}
/* Сайдбар: нейтрализация только ::after и центрирования (цвет/transform — на виджетах) */
.article-page__aside h1,
.article-page__aside h2,
.article-page__aside h3,
.article-page__aside h4,
.article-page__aside h5,
.article-page__aside h6 {
  text-align: left;
  text-transform: none;
  margin-top: 0;
}
.article-page__aside h1::after,
.article-page__aside h2::after,
.article-page__aside h3::after,
.article-page__aside h4::after,
.article-page__aside h5::after,
.article-page__aside h6::after {
  display: none !important;
  content: none !important;
}
.article-page__aside p {
  text-indent: 0;
  text-align: left;
}
/* ---------- Каркас страницы: 847 + 269 две колонки (Figma frame 1156) ---------- */
.article-page {
  max-width: 1156px;
  margin: 0 auto;
  padding: 24px 10px 64px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 847fr 269fr;
  gap: 20px;
  font-family: 'Roboto', Arial, sans-serif;
  color: #1d1d1d;
  /* ---------- Шапка: meta-строка + H1 + тэг ---------- */
  /* Reading time: в Figma — обычный meta-элемент без pill-фона (1:44) */
  /* H1: Figma H2 token = Montserrat Medium 40 lh 1.5 (1:46) UPPERCASE */
  /* Тэг тематики (Figma 1:48): pill, лаймовый бордер 50% opacity, лаймовый текст #87C300.
       Маленький шрифт 10px с трекингом 0.4px, padding 28px горизонтально. */
  /* Анонс / лид-параграф */
}
.article-page__main {
  min-width: 0;
}
.article-page__aside {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 20px;
}
.article-page__header {
  margin-bottom: 24px;
}
.article-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 16px 0;
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  font-size: 12px;
  color: rgba(29, 29, 29, 0.6);
  line-height: 1;
}
.article-page__meta > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border-right: 1px solid #d7d7d7;
  min-height: 40px;
}
.article-page__meta > *:first-child {
  padding-left: 0;
}
.article-page__meta > *:last-child {
  border-right: none;
}
.article-page__meta i {
  color: rgba(29, 29, 29, 0.6);
  font-size: 18px;
}
.article-page__meta .ap-ico {
  width: 18px;
  height: 18px;
  color: rgba(29, 29, 29, 0.6);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.article-page__author-mini {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Перебиваем глобальное .wrap .content #content img { height:250px } */
}
.article-page__author-mini img,
.article-page__author-mini-ph {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  padding: 0 !important;
}
.article-page__author-mini-ph {
  background: #f5f7f8;
  color: #868692;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.article-page__author-mini-ph .ap-ico--avatar {
  width: 24px;
  height: 24px;
  color: #868692;
}
.article-page__author-mini-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.article-page__author-mini .name {
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1d;
  line-height: 1;
  margin-bottom: 4px;
}
.article-page__author-mini .spec {
  font-size: 12px;
  color: rgba(29, 29, 29, 0.6);
  line-height: 1;
}
.article-page__date,
.article-page__views,
.article-page__comments-count {
  color: #1d1d1d;
  text-decoration: none;
}
.article-page__reading {
  color: #1d1d1d;
}
h1.article-page__title,
.article-page__title {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.5;
  margin: 0 0 24px;
  color: #1d1d1d;
  text-transform: uppercase;
  text-align: left;
}
h1.article-page__title::after,
.article-page__title::after {
  display: none !important;
  content: none !important;
}
.article-page__topic-wrap {
  margin-bottom: 16px;
}
.article-page__topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 28px;
  border: 1px solid rgba(135, 195, 0, 0.5);
  border-radius: 28px;
  color: #87c300;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4px;
  background: transparent;
  text-decoration: none;
  line-height: 1;
}
.article-page__topic i {
  color: #87c300;
}
.article-page__topic:hover {
  background: rgba(135, 195, 0, 0.06);
  color: #87c300;
  text-decoration: none;
}
/* width/height с !important — глобальный селектор `#content img`
   в site.less ставит height: 250px и без !important побеждает по
   специфичности (1,0,1 против нашей 0,1,0). object-fit:contain —
   чтобы SVG-иконка с любыми пропорциями влезла в 12×12 квадрат.
   padding: 0 !important перебивает `#content img { padding-bottom: 10px }`. */
.article-page__topic-ico {
  width: 12px !important;
  height: 12px !important;
  max-width: 12px;
  max-height: 12px;
  color: #87c300;
  flex-shrink: 0;
  object-fit: contain;
  padding: 0 !important;
  display: inline-block;
  vertical-align: middle;
}
.article-page__lead {
  font-size: 14px;
  line-height: 1.55;
  color: #1d1d1d;
  margin: 0 0 32px;
}
/* ============================================================
   Author block (если рендерится как отдельный блок под лидом)
   В Figma автор показан только в meta-строке; этот блок —
   опциональный (виджет AuthorBlock).
   ============================================================ */
.author-block {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f5f7f8;
  border-radius: 12px;
  margin: 24px 0;
}
.author-block__photo img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.author-block__label {
  font-size: 12px;
  color: #868692;
  line-height: 1;
  margin-bottom: 4px;
}
.author-block__name {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1d;
  line-height: 1.2;
}
.author-block__specialty {
  font-size: 12px;
  color: #868692;
  margin-top: 4px;
}
/* ============================================================
   Price preset — правая колонка (Figma 1:181).
   Тёмно-зелёный блок с белой типографикой и жёлтой CTA.
   ============================================================ */
.price-preset-block {
  background: #2e5b35;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 24px;
  color: #fff;
  /* Figma 1:184 — Roboto Bold 18 lh 1.3 #fff */
}
.price-preset-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.price-preset-block__title {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}
.price-preset-block__icon {
  color: #fff;
  font-size: 14px;
  width: 16px;
  height: 22px;
  flex-shrink: 0;
}
.price-preset-block__list {
  margin: 0;
  padding: 8px 0;
}
.price-preset-block__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.price-preset-block__row:last-child {
  border-bottom: none;
}
.price-preset-block__left {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}
.price-preset-block__right {
  margin: 0;
  color: #fff;
  font-weight: 700;
  text-align: right;
}
.price-preset-block__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 22px;
  background: #ffdd2d;
  color: #1d1d1d;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  transition: background 0.15s;
}
.price-preset-block__cta:hover {
  background: #ffd80e;
  color: #1d1d1d;
  text-decoration: none;
}
.price-preset-block__cta i {
  font-size: 12px;
}
.price-preset-block__cta > span {
  flex: 1 1 auto;
  text-align: left;
}
.price-preset-block__cta-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #1d1d1d;
}
/* ============================================================
   Trust reviews — правая колонка (Figma 1:197).
   Белая карточка, лёгкий зелёный бордер, цитата.
   ============================================================ */
.trust-reviews-block {
  background: #fff;
  /* Figma 1:197 — border 3px solid #2f9d36, radius 16px, pt 16 pb 24 px 16 */
  border: 3px solid #2f9d36;
  border-radius: 16px;
  padding: 16px 16px 24px;
  margin-bottom: 24px;
  /* Шапка: иконка inline с заголовком, нижний разделитель 0.5px (Figma 1:198) */
  /* H4 token Bold: Figma 1:200 — Roboto Bold 18 lh 1.3 #1d1d1d */
  /* Рейтинг — flex-row: yandex+value | stars+meta (column) (Figma 1:201) */
  /* Figma 1:206 — Helvetica Bold 24 lh 1.5, black */
  /* "на основании N отзывов" — Figma 1:214: Roboto 12 lh 1 rgba(29,29,29,0.6) */
  /* Правая колонка рейтинга: stars сверху, meta снизу (gap 3px) */
  /* Text regular token = Roboto 14 lh 1.5 #1d1d1d, без декоративных кавычек */
}
.trust-reviews-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d7d7d7;
}
.trust-reviews-block__title {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #1d1d1d;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trust-reviews-block__title i {
  color: #1d1d1d;
  margin-right: 4px;
}
.trust-reviews-block__title-ico {
  width: 19px;
  height: 18px;
  color: #1d1d1d;
  flex-shrink: 0;
  vertical-align: middle;
}
.trust-reviews-block__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.trust-reviews-block__yandex {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.trust-reviews-block__yandex .ya-pin {
  color: #ff3d00;
  font-size: 14px;
}
.trust-reviews-block__ya-pin {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.trust-reviews-block__rating-value {
  font-family: Helvetica, 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #000;
}
.trust-reviews-block__rating-stars {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.trust-reviews-block__stars {
  width: 112px;
  height: 16.5px;
  flex-shrink: 0;
}
.trust-reviews-block__rating-meta {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: rgba(29, 29, 29, 0.6);
  margin-top: 0;
}
.trust-reviews-block__rating > div.trust-reviews-block__rating-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
}
.trust-reviews-block__carousel {
  position: relative;
}
.trust-reviews-block__item {
  padding: 4px 0;
}
.trust-reviews-block__text {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #1d1d1d;
  margin: 0 0 12px;
}
.trust-reviews-block__author {
  font-size: 14px;
  color: #2e5b35;
  line-height: 1.5;
}
.trust-reviews-block__fio {
  color: #2e5b35;
  font-weight: 400;
}
.trust-reviews-block__city {
  color: #2e5b35;
  font-weight: 400;
}
.trust-reviews-block .owl-dots {
  text-align: center;
  margin-top: 10px;
}
.trust-reviews-block .owl-dots .owl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 50%;
  background: #d7d7d7;
  transition: background 0.15s;
}
.trust-reviews-block .owl-dots .owl-dot.active {
  background: #2e5b35;
}
/* ============================================================
   Related articles — правая колонка (Figma 1:217).
   Светло-серый блок, вертикальные карточки с разделителями.
   ============================================================ */
.related-articles {
  background: #f5f7f8;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 24px;
  /* Заголовок: Figma 1:219 — Roboto Bold 24/1.5 #2e5b35 */
  /* Figma 1:223 — Montserrat SemiBold 16/1.5 #1d1d1d */
  /* Figma 1:225 — Roboto Regular 14/1.5 #545454 underline */
  /* Figma показывает только meta-строку, не дату/анонс */
}
.related-articles__title {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #2e5b35;
  margin: 0;
  padding: 16px 16px 0;
}
.related-articles__grid {
  display: block;
  padding: 8px 0;
}
.related-articles__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid #d7d7d7;
  border-radius: 0;
  padding: 16px;
}
.related-articles__item:last-child {
  border-bottom: none;
}
.related-articles__item:hover {
  box-shadow: none;
}
.related-articles__link {
  display: block;
  color: #1d1d1d;
  text-decoration: none;
  padding: 0;
}
.related-articles__link:hover {
  color: #1d1d1d;
  text-decoration: none;
}
.related-articles__item-title {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
  font-weight: 600;
  color: #1d1d1d;
}
.related-articles__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: #545454 !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none !important;
}
.related-articles__more i {
  font-size: 12px;
}
.related-articles__more .ap-ico--arrow-r {
  width: 28px;
  height: 28px;
  color: #545454;
  flex-shrink: 0;
  stroke-width: 1.5;
}
.related-articles__more:hover {
  color: #545454 !important;
  text-decoration: none !important;
}
.related-articles__meta {
  display: flex;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1;
  color: rgba(29, 29, 29, 0.6);
}
.related-articles__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-right: 1px solid #d7d7d7;
  min-height: 24px;
  line-height: 1;
}
.related-articles__meta > span:first-child {
  padding-left: 0;
}
.related-articles__meta > span:last-child {
  border-right: none;
  padding-right: 0;
}
.related-articles__meta i {
  color: rgba(29, 29, 29, 0.6);
  font-size: 12px;
}
.related-articles__meta .ap-ico--sm {
  width: 14px;
  height: 14px;
  color: rgba(29, 29, 29, 0.6);
  flex-shrink: 0;
}
.related-articles__date,
.related-articles__anons {
  display: none;
}
.related-articles__footer {
  padding: 0 16px 16px;
}
.related-articles__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2e5b35;
  font-size: 14px;
  text-decoration: underline;
}
.related-articles__all .ap-ico--arrow-r {
  width: 20px;
  height: 20px;
  color: #2e5b35;
  flex-shrink: 0;
}
.related-articles__all:hover {
  color: #2e5b35;
  text-decoration: none;
}
/* ============================================================
   Comments block (Figma 1:128).
   Большой H2, серая форма pill-стиля, жёлтая CTA.
   ============================================================ */
.comments-block {
  margin: 48px 0 32px;
  /* Figma 1:129 — Montserrat Bold 40 lh 1.5 #000.
       Specificity boost: reset выше задаёт color на .comments-block h2. */
  /* Форма */
  /* H3 token = Roboto Regular 24 lh 1.5 (Figma 1:131) */
  /* Bootstrap label.form-control = font-weight 700; нейтрализуем для consent */
  /* Список комментариев */
  /* Figma 1:154 — аватар зелёный #2e5b35 40px, силуэт #F5F7F8 крупный,
       обрезается по нижней границе круга (Figma 1:155: w=36.16 h=38.63
       внутри 40×40, left=1.92, top=4.69, overflow-clip). */
  /* Figma 1:157 — flex column, gap 4px (имя сверху, должность снизу) */
}
.comments-block__title,
.article-page__main h2.comments-block__title {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  color: #000;
  margin: 0 0 24px;
}
.comments-block__count {
  color: #868692;
  font-weight: 400;
  margin-left: 12px;
  font-size: 24px;
}
.comments-block__form {
  padding: 24px 16px;
  background: #f5f7f8;
  border-radius: 16px;
  margin-bottom: 32px;
}
.comments-block__form-title {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #2e5b35;
  text-transform: none;
  margin: 0 0 16px;
}
.comments-block__field {
  margin-bottom: 12px;
}
.comments-block__field label {
  display: none;
  /* плейсхолдеры внутри инпутов */
}
.comments-block__field .required {
  color: #d32f2f;
}
.comments-block__field .form-control,
.comments-block__field input.form-control,
.comments-block__field textarea.form-control {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  border-radius: 16px;
  height: 48px;
  padding: 13.5px 13px;
  font-size: 14px;
  font-family: 'Roboto', Arial, sans-serif;
  color: #1d1d1d;
  box-shadow: none;
  box-sizing: border-box;
}
.comments-block__field .form-control::placeholder,
.comments-block__field input.form-control::placeholder,
.comments-block__field textarea.form-control::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.comments-block__field .form-control:focus,
.comments-block__field input.form-control:focus,
.comments-block__field textarea.form-control:focus {
  border-color: #2e5b35;
  outline: none;
  background: rgba(0, 0, 0, 0.04);
}
.comments-block__field textarea.form-control {
  border-radius: 16px;
  height: auto;
  min-height: 165px;
  resize: vertical;
}
.comments-block__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 575px) {
  .comments-block__row {
    grid-template-columns: 1fr;
  }
}
.comments-block__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0 12px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #1d1d1d;
  /* Figma 1:145 — квадрат 20x20, bg #f5f7f8, border 1px #2e5b35, radius 2px */
}
.comments-block__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 3px 0 0;
  width: 20px;
  height: 20px;
  background: #f5f7f8;
  border: 1px solid #2e5b35;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.comments-block__consent input[type="checkbox"]:checked {
  background: #2e5b35;
  border-color: #2e5b35;
}
.comments-block__consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.comments-block__consent input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(46, 91, 53, 0.25);
}
.comments-block__consent a {
  color: #2e5b35;
}
.comments-block__form label.comments-block__consent,
.comments-block__form .comments-block__consent label,
.comments-block__form .comments-block__consent {
  font-weight: 400;
}
.comments-block__submit-row {
  display: block;
  margin-top: 8px;
}
.comments-block__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  background: #ffdd2d;
  color: #1d1d1d;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.comments-block__submit:hover {
  background: #ffd80e;
}
.comments-block__hint {
  font-size: 12px;
  color: #868692;
  margin-top: 8px;
}
.comments-block__message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
}
.comments-block__message.is-success {
  background: #e3f1e6;
  color: #2e5b35;
  border: 1px solid rgba(46, 91, 53, 0.3);
}
.comments-block__message.is-error {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.3);
}
.comments-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comments-block__item {
  padding: 24px 0;
  border-bottom: 1px solid #d7d7d7;
}
.comments-block__item:last-child {
  border-bottom: none;
}
.comments-block__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.comments-block__avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2e5b35;
  display: inline-block;
  color: #f5f7f8;
  flex-shrink: 0;
  overflow: hidden;
}
.comments-block__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comments-block__avatar .ap-ico--avatar {
  position: absolute;
  left: 1.9px;
  top: 4.7px;
  width: 36.2px;
  height: 38.6px;
  color: #f5f7f8;
  display: block;
}
.comments-block__author-info {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
  flex: 0 0 auto;
}
.comments-block__author {
  display: block;
  font-weight: 400;
  color: #1d1d1d;
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
.comments-block__author-spec {
  display: block;
  font-size: 12px;
  color: rgba(29, 29, 29, 0.6);
  line-height: 1;
  margin: 0;
}
.comments-block__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #868692;
  margin-left: 16px;
}
.comments-block__date i {
  color: #868692;
}
.comments-block__date .ap-ico--sm {
  width: 14px;
  height: 14px;
  color: #868692;
  flex-shrink: 0;
}
.comments-block__text {
  color: #1d1d1d;
  line-height: 1.55;
  font-size: 14px;
  margin: 0;
}
.comments-block__empty {
  color: #868692;
}
/* ============================================================
   Mobile-адаптация Desktop layout — планшет 992-768.
   Просто сворачиваем сетку в 1 колонку без других изменений.
   ============================================================ */
@media (max-width: 991px) {
  .article-page {
    grid-template-columns: 1fr;
  }
  .article-page__aside {
    position: static;
  }
  h1.article-page__title,
  .article-page__title {
    font-size: 32px;
  }
  .comments-block__title {
    font-size: 32px;
  }
}
/* ============================================================
   Mobile (≤ 767px) — точная вёрстка по Figma «СТАТЬИ-MOBILE».
   Контейнер 430px по макету; всё, что меньше 430 — резиновое.
   Базовый шрифт — Roboto. Поля от 16px вертикальные / 10px
   горизонтальные. Все цифры (font-size/line-height/padding)
   взяты из mobile-HTML дампа в Задача/HTML mobil version.txt.
   ============================================================ */
@media (max-width: 767px) {
  .article-page {
    padding: 0 10px 32px;
    gap: 20px;
    max-width: 100%;
  }
  .article-page__main {
    gap: 20px;
  }
  /* ---- Шапка статьи (meta + title + topic) ---- */
  .article-page__header {
    padding: 0;
    gap: 10px;
    display: flex;
    flex-direction: column;
  }
  .article-page__title {
    margin-bottom: 14px;
  }
  .article-page__topic-wrap {
    margin-top: 0;
  }
  /* Figma 1:35 — две строки: 1) автор (по центру), 2) дата|просмотры|коммент.|чтения */
  .article-page__meta {
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 0;
    border-bottom: 1px solid #D7D7D7;
    gap: 0;
    justify-content: center;
  }
  .article-page__meta > * {
    min-height: 0;
    padding: 0;
    border-right: 0;
    font-size: 12px;
    color: rgba(29, 29, 29, 0.6);
  }
  /* Строка автора (полная ширина) — без правой палочки и нижнего бордера */
  .article-page__author-mini {
    gap: 8px;
    flex-basis: 100%;
    justify-content: center;
    padding: 0 0 16px;
    border: 0;
  }
  .article-page__author-mini-text {
    gap: 4px;
    line-height: 1;
  }
  .article-page__author-mini .name {
    font-size: 12px;
    line-height: 12px;
  }
  .article-page__author-mini .spec {
    font-size: 12px;
    line-height: 12px;
    color: rgba(29, 29, 29, 0.6);
  }
  /* Иконки и поля в строке статистики (Figma 1:41) */
  .article-page__date,
  .article-page__views,
  .article-page__comments-count,
  .article-page__reading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 12px;
    color: rgba(29, 29, 29, 0.6);
  }
  .article-page__date .ap-ico,
  .article-page__views .ap-ico,
  .article-page__comments-count .ap-ico,
  .article-page__reading .ap-ico {
    width: 14px;
    height: 14px;
  }
  /* Единственные вертикальные разделители — полная высота между 4-мя стат-полями (Figma Line 14/15/17) */
  .article-page__date + .article-page__views,
  .article-page__views + .article-page__comments-count,
  .article-page__comments-count + .article-page__reading {
    border-left: 1px solid #D7D7D7;
  }
  h1.article-page__title,
  .article-page__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    line-height: 42px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
  }
  .article-page__topic-wrap {
    margin: 0;
  }
  .article-page__topic {
    padding: 0 28px;
    border-radius: 28px;
    border: 1px solid rgba(135, 195, 0, 0.5);
    color: #87C300;
    font-size: 10px;
    line-height: 30px;
    letter-spacing: 0.4px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
  }
  .article-page__topic-ico {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px;
    max-height: 12px;
    color: #87C300;
    object-fit: contain;
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
  }
  /* ---- Контент статьи: типографика по Figma ---- */
  .article-content {
    /* Лид-параграф (.lead) — 18/23.4, цвет 60% */
    /* Таблица — горизонтальный скролл на мобильных (требование ТЗ) */
  }
  .article-content h1 {
    font-size: 28px;
    line-height: 42px;
    font-family: 'Montserrat', sans-serif;
  }
  .article-content h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
  }
  .article-content h3 {
    font-size: 18px;
    line-height: 23.4px;
    font-weight: 400;
  }
  .article-content h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
  }
  .article-content p {
    font-size: 14px;
    line-height: 21px;
  }
  .article-content p.lead,
  .article-content .article-content__lead {
    font-size: 18px;
    line-height: 23.4px;
    color: rgba(29, 29, 29, 0.6);
    padding: 8px 0;
  }
  .article-content ul,
  .article-content ol {
    font-size: 14px;
    line-height: 21px;
  }
  .article-content figure,
  .article-content img.article-figure {
    border-radius: 16px;
    margin: 12px 0;
  }
  .article-content figcaption,
  .article-content p.table-caption,
  .article-content .table-caption {
    font-size: 12px;
    line-height: 12px;
    font-style: italic;
    color: #545454;
  }
  .article-content blockquote.article-quote {
    padding: 24px 16px 24px 48px;
    font-size: 14px;
    line-height: 21px;
    color: #1d1d1d;
  }
  .article-content blockquote.article-quote p {
    font-size: 14px;
    line-height: 21px;
    color: #1d1d1d;
  }
  .article-content p.table-caption,
  .article-content .table-caption {
    border: 0 !important;
    background: transparent !important;
    padding: 0;
    margin: 1em 0 6px;
    color: #545454;
    font-style: italic;
    font-size: 12px;
    line-height: 1;
  }
  .article-content__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    margin: 12px 0;
  }
  .article-content table {
    display: table;
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    table-layout: auto;
    border-radius: 8px;
  }
  .article-content table th,
  .article-content table td {
    font-size: 14px;
    line-height: 21px;
    padding: 6px 8px;
    white-space: nowrap;
  }
  .article-content table th {
    font-size: 16px;
    line-height: 23.4px;
  }
  .article-content table thead th:first-child {
    border-top-left-radius: 8px;
  }
  .article-content table thead th:last-child {
    border-top-right-radius: 8px;
  }
  /* ---- Блок комментариев ---- */
  .comments-block {
    padding-top: 24px;
    border-top: 1px solid #D7D7D7;
    gap: 14px;
  }
  .comments-block__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    line-height: 42px;
    font-weight: 700;
    margin: 0;
  }
  .comments-block__form {
    padding: 16px;
    background: #F5F7F8;
    border-radius: 8px;
  }
  .comments-block__form-title {
    font-size: 24px;
    line-height: 36px;
    color: #2e5b35;
    font-weight: 400;
    margin: 0 0 12px;
  }
  .comments-block__form .form-control,
  .comments-block__form input[type="text"],
  .comments-block__form input[type="email"],
  .comments-block__form textarea {
    background: rgba(0, 0, 0, 0.04);
    border: 0;
    border-radius: 16px;
    padding: 13.5px 13px;
    font-size: 14px;
    line-height: 21px;
    color: #1d1d1d;
    box-shadow: none;
  }
  .comments-block__form .form-control::placeholder,
  .comments-block__form input[type="text"]::placeholder,
  .comments-block__form input[type="email"]::placeholder,
  .comments-block__form textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
  }
  .comments-block__form .btn-submit,
  .comments-block__form button[type="submit"] {
    background: #FFDD2D;
    color: #333;
    border-radius: 48px;
    height: 50px;
    padding: 14.5px 16px;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    border: 0;
    width: 100%;
  }
  .comments-block__item {
    padding: 24px 0;
    gap: 20px;
  }
  .comments-block__item-head {
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
  }
  .comments-block__item-body {
    font-size: 14px;
    line-height: 21px;
    color: #000;
  }
  /* ---- Aside: переезжает ПОД контент ---- */
  .article-page__aside {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .article-page__aside > * {
    margin: 0 0 24px;
  }
  .article-page__aside > *:last-child {
    margin-bottom: 0;
  }
  /* Pricing block */
  .price-preset-block {
    padding: 12px;
    border-radius: 16px;
    background: #2e5b35;
  }
  .price-preset-block__title {
    font-size: 18px;
    line-height: 23.4px;
    color: #fff;
    font-weight: 700;
  }
  .price-preset-block__list {
    gap: 0;
  }
  .price-preset-block__row {
    padding: 6px 0;
  }
  .price-preset-block__left,
  .price-preset-block__right {
    font-size: 14px;
    line-height: 21px;
    color: #fff;
  }
  .price-preset-block__right {
    font-weight: 700;
  }
  .price-preset-block__cta {
    background: #FFE500;
    color: #333;
    border-radius: 24px;
    padding: 12px 22px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 700;
  }
  /* Trust reviews block */
  .trust-reviews-block {
    padding: 16px;
    border-radius: 16px;
    border: 3px solid #2F9D36;
    outline: none;
  }
  .trust-reviews-block__title {
    font-size: 18px;
    line-height: 23.4px;
    font-weight: 700;
  }
  .trust-reviews-block__rating-value {
    font-size: 24px;
    line-height: 36px;
  }
  .trust-reviews-block__rating-count {
    font-size: 12px;
    line-height: 12px;
  }
  .trust-reviews-block__review-text {
    font-size: 14px;
    line-height: 21px;
    color: #333;
  }
  .trust-reviews-block__review-author {
    font-size: 14px;
    line-height: 21px;
    color: #2e5b35;
  }
  /* Related articles */
  .related-articles {
    padding: 16px 0;
    background: #F5F7F8;
    border-radius: 16px;
  }
  .related-articles__title {
    padding: 0 16px;
    font-size: 24px;
    line-height: 36px;
    color: #2e5b35;
    font-weight: 700;
  }
  .related-articles__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .related-articles__card {
    padding: 16px;
    border-top: 1px solid rgba(217, 217, 217, 0.5);
  }
  .related-articles__card:first-child {
    border-top: 0;
  }
  .related-articles__card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
  }
  .related-articles__more {
    padding: 0 16px;
    color: #545454 !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 21px;
  }
}
/* ≤ 360px — узкие телефоны (iPhone SE и т.п.) */
@media (max-width: 360px) {
  h1.article-page__title,
  .article-page__title {
    font-size: 24px;
    line-height: 36px;
  }
  .comments-block__title {
    font-size: 24px;
    line-height: 36px;
  }
  .article-page {
    padding: 0 8px 24px;
  }
}