/* ============================================================================
   Б2БТАРА — ОДИНОЧНАЯ СТАТЬЯ (single.php). Только стили, разметку не трогаем.
   Все селекторы сверены по живому html (statya_live.html, страница
   /размеры-мешков-для-мусора-в-зависимос/): body.single-post (класс есть на
   <body>), article.post-single-page.post-32660, .article-inner, единственный
   <div> без класса внутри .article-inner (крошки), h1.wd-entities-title.title
   .post-title, .article-body-container, .entry-content.wd-entry-content,
   h2.wp-block-heading (1), h3.wp-block-heading (18), h4.wp-block-heading (10),
   ul.wp-block-list (29, из них 9 вложены в <li>), ol.wp-block-list (1),
   hr.wp-block-separator.has-alpha-channel-opacity (18),
   figure.wp-block-image.size-full > a > img (2 шт., 820x463 и 800x800),
   figure.wp-block-table > table.has-fixed-layout (4 шт., thead/tbody/th/td).
   ПРОВЕРЕНО И УЧТЕНО:
   - тело статьи НЕ обёрнуто в .bt-root (в .bt-root только кнопка прайса в шапке
     и колонки подвала), поэтому переменные комплекта здесь недоступны — цвета
     проставлены значениями палитры .bt-root из styles.css: --red #CF000D,
     --red-d #A80009, --red-050 #FBEAEA, --ink #16181D, --body #3C424B,
     --muted #6B7480, --base #FAFAF9, --line #E6E9EE, --r-lg 16px;
   - порядок <link> на живой странице: vnedrenie.css 14-й, части темы
     (bootstrap-light 17, base.min 18, blog-single-base 20, wp-gutenberg 22) —
     позже, поэтому специфичность намеренно выше темы; !important не нужен;
   - тема даёт .post-single-page{text-align:center} — заголовок и крошки были бы
     по центру, ниже это снято;
   - .title-design-disable{display:none} в page-title.min.css — чёрная плашка
     темы с дублем крошек скрыта, наши крошки в .article-inner единственные видимые.
   Всё ограничено body.single-post: шапка, подвал, каталог и карточка не задеты,
   корзина не возвращается, форм не добавляется, кнопка «Купить» не трогается.
   ============================================================================ */

/* Колонка чтения. В макете тело статьи 760px (.art-body{max-width:760px}), на
   живой странице текст растянут на всю ширину контейнера темы. Сужаем именно
   .article-inner, а не .site-content: колонка темы (col-lg-12) остаётся целой,
   блок похожих товаров/записей под статьёй и страницы с боковой колонкой
   не ломаются. Заодно снимаем .post-single-page{text-align:center} темы —
   иначе крошки и h1 остаются по центру, а тело идёт влево. */
body.single-post .article-inner {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Хлебные крошки — единственный <div> без класса внутри .article-inner
   («Главная / Статьи / …»). В макете (.crumbs) это мелкая приглушённая строка. */
body.single-post .article-inner > div:not([class]) {
	font-family: 'Golos', system-ui, Arial, sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: #6B7480;
	margin-bottom: 6px;
}

body.single-post .article-inner > div:not([class]) a {
	color: #6B7480;
	text-decoration: none;
}

body.single-post .article-inner > div:not([class]) a:hover {
	color: #CF000D;
	text-decoration: underline;
}

/* Заголовок статьи. Тема: .post-single-page .post-title{font-size:32px;
   line-height:1.2} + h1,h2,…{font-family:var(--wd-title-font);
   text-transform:var(--wd-title-transform)} — размер и регистр приходят из
   настроек темы. Макет (.art-hero h1): Onest 800, 38px, плотный интерлиньяж
   и отрицательный трекинг. Начертание Onest 800 в дочерней теме есть
   (bt/assets/fonts/onest-800.woff2). */
body.single-post .article-inner h1.post-title {
	font-family: 'Onest', system-ui, Arial, sans-serif;
	font-weight: 800;
	font-size: 38px;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: #16181D;
	text-transform: none;
	margin: 10px 0 16px;
	padding: 0;
}

/* Тело статьи: базовая типографика макета (.art-body). Тема задаёт
   .post-single-page .entry-content{font-size:110%;margin-bottom:60px}, а на
   ≤1024px сбрасывает в font-size:inherit — статья, дающая основной поисковый
   трафик, становится мелкой. Ставим фиксированный кегль макета. */
body.single-post .article-inner .entry-content {
	font-family: 'Golos', system-ui, Arial, sans-serif;
	font-size: 16.5px;
	line-height: 1.72;
	color: #3C424B;
	margin-bottom: 40px;
}

/* Первый абзац — вводный лид (.art-lead в макете): крупнее основного текста.
   Проверено: первый ребёнок .entry-content на живой странице — именно <p>. */
body.single-post .article-inner .entry-content > p:first-child {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
}

/* Абзацы: ритм макета вместо 20px темы (--wd-block-spacing). */
body.single-post .article-inner .entry-content p {
	margin: 0 0 18px;
}

/* Ссылки в тексте — фирменный красный с подчёркиванием (.art-body a).
   ВАЖНО: в самой статье текстовых ссылок нет, <a> внутри .entry-content всего
   два — обёртки картинок; для них подчёркивание снято отдельным правилом ниже,
   иначе под каждой картинкой рисуется красная черта. Начертание Golos 600 есть. */
body.single-post .article-inner .entry-content a {
	color: #CF000D;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.single-post .article-inner .entry-content a:hover {
	color: #A80009;
}

/* Подзаголовки. В живой статье 1 h2, 18 h3 и 10 h4 (блок FAQ). Шкала макета
   26/20 продлена на h4 — в макете h4 не встречается, размер выбран между
   h3 (20px) и текстом (16.5px). scroll-margin-top — чтобы липкая шапка темы
   не перекрывала цель якоря. */
body.single-post .article-inner .entry-content h2,
body.single-post .article-inner .entry-content h3,
body.single-post .article-inner .entry-content h4 {
	font-family: 'Onest', system-ui, Arial, sans-serif;
	color: #16181D;
	text-transform: none;
	scroll-margin-top: 80px;
}

body.single-post .article-inner .entry-content h2 {
	font-weight: 800;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 36px 0 14px;
}

body.single-post .article-inner .entry-content h3 {
	font-weight: 800;
	font-size: 20px;
	line-height: 1.28;
	letter-spacing: -.01em;
	margin: 28px 0 10px;
}

body.single-post .article-inner .entry-content h4 {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	margin: 24px 0 8px;
}

/* Списки: тема возвращает маркеры правилом ul{list-style:disc}/ol{list-style:
   decimal} и отступ --li-pl:17px. Ставим фирменные маркеры макета —
   красный квадратик у ul и красный номер-бейдж у ol. */
body.single-post .article-inner .entry-content ul,
body.single-post .article-inner .entry-content ol {
	list-style: none;
	margin: 0 0 18px;
	padding-left: 0;
}

body.single-post .article-inner .entry-content li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 9px;
}

/* Тема даёт li:last-child{margin-bottom:0}; наше правило выше по специфичности
   его перебивало и добавляло лишний отступ в конце каждого списка — вернули. */
body.single-post .article-inner .entry-content li:last-child {
	margin-bottom: 0;
}

body.single-post .article-inner .entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: #CF000D;
}

body.single-post .article-inner .entry-content ol {
	counter-reset: btol;
}

body.single-post .article-inner .entry-content ol > li::before {
	counter-increment: btol;
	content: counter(btol);
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: #FBEAEA;
	color: #CF000D;
	font: 700 12px/22px 'Onest', system-ui, Arial, sans-serif;
	text-align: center;
}

/* Вложенные списки: в статье 9 <ul> лежат внутри <li> (в том числе внутри
   единственного <ol>). Маркер мельче и бледнее, чтобы уровень читался. */
body.single-post .article-inner .entry-content li > ul,
body.single-post .article-inner .entry-content li > ol {
	margin: 8px 0 0;
}

body.single-post .article-inner .entry-content li li::before {
	width: 6px;
	height: 6px;
	top: 12px;
	background: rgba(207, 0, 13, .4);
}

/* Разделители: 18 штук <hr class="wp-block-separator has-alpha-channel-opacity">.
   Тема режет их до огрызка: hr{max-width:35px;border-bottom:1px solid
   currentColor;opacity:.2}, ядро WP центрирует их margin:auto. В макете
   разделителей нет — приводим к фирменной волосяной линии на ширину колонки. */
body.single-post .article-inner .entry-content hr.wp-block-separator {
	max-width: none;
	border: 0;
	border-top: 1px solid #E6E9EE;
	opacity: 1;
	margin: 30px 0;
}

/* Картинки в теле (.wp-block-image, обе обёрнуты в <a> на полноразмерный файл) —
   скругление и рамка макета (.art-fig img). Ограничение по высоте нужно потому,
   что вторая картинка квадратная 800x800: без него она разворачивается на всю
   колонку 760x760 и разрывает чтение. */
body.single-post .article-inner .entry-content figure.wp-block-image {
	margin: 24px 0;
}

/* Снимаем подчёркивание, которое иначе прилетает от правила ссылок выше и
   рисуется красной чертой под картинкой. */
body.single-post .article-inner .entry-content figure.wp-block-image a {
	display: block;
	text-decoration: none;
}

body.single-post .article-inner .entry-content figure.wp-block-image img {
	display: block;
	max-width: 100%;
	max-height: 560px;
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 16px;
	border: 1px solid #E6E9EE;
}

/* Таблицы (4 штуки: 6, 2, 4 и 3 колонки) — главный носитель пользы в статье.
   Сейчас это сетка из линий currentColor от ядра WP. В макете (.art-table):
   рамка со скруглением, шапка на подложке, только горизонтальные разделители,
   собственная горизонтальная прокрутка внутри рамки. */
body.single-post .article-inner .entry-content figure.wp-block-table {
	margin: 22px 0;
	border: 1px solid #E6E9EE;
	border-radius: 12px;
	overflow-x: auto;
	background: #fff;
}

body.single-post .article-inner .entry-content figure.wp-block-table table {
	table-layout: auto; /* ядро WP ставит has-fixed-layout — колонки делятся поровну */
	border-collapse: collapse;
	width: 100%;
	min-width: 460px; /* как в макете: на телефоне таблица едет внутри рамки */
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
}

body.single-post .article-inner .entry-content figure.wp-block-table thead {
	border-bottom: 0; /* ядро WP ставит 3px */
}

body.single-post .article-inner .entry-content figure.wp-block-table th {
	background: #FAFAF9;
	color: #16181D;
	font-family: 'Onest', system-ui, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-align: left;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid #E6E9EE;
}

body.single-post .article-inner .entry-content figure.wp-block-table td {
	color: #3C424B;
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid #E6E9EE;
}

body.single-post .article-inner .entry-content figure.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --- адаптив (макет: 900px и 560px) --------------------------------------- */

@media (max-width: 900px) {
	body.single-post .article-inner h1.post-title {
		font-size: 30px;
	}
}

/* Кегль подзаголовков на планшете и телефоне — по шкале макета. */
@media (max-width: 768px) {
	body.single-post .article-inner .entry-content h2 {
		font-size: 22px;
		margin: 30px 0 12px;
	}

	body.single-post .article-inner .entry-content h3 {
		font-size: 19px;
		margin: 24px 0 9px;
	}

	body.single-post .article-inner .entry-content h4 {
		font-size: 17px;
	}
}

@media (max-width: 560px) {
	body.single-post .article-inner h1.post-title {
		font-size: 25px;
	}

	body.single-post .article-inner .entry-content {
		font-size: 16px;
	}

	body.single-post .article-inner .entry-content > p:first-child {
		font-size: 16.5px;
	}

	body.single-post .article-inner .entry-content figure.wp-block-image img {
		max-height: 420px;
		border-radius: 12px;
	}

	body.single-post .article-inner .entry-content figure.wp-block-table table {
		font-size: 14px;
	}

	body.single-post .article-inner .entry-content figure.wp-block-table th,
	body.single-post .article-inner .entry-content figure.wp-block-table td {
		padding: 10px 12px;
	}
}