/* ---------------------------------------------------------------------------
   Заход 3 «блог продаёт», 24.09.2026, агент 02.
   Подборка товаров и блок помощи внутри статей блога.
   Замер до правки: статья про номера краски — 367 визитов за месяц,
   глубина просмотра 1,4, одна покупка. Ссылок на каталог в тексте была одна.
   Откат: убрать подключение mp-blog.css из footer.php и блоки из текста статьи.
   --------------------------------------------------------------------------- */

.mp-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	margin: 24px 0 8px;
	padding: 0;
	list-style: none;
}

.mp-picks__item {
	display: flex;
	flex-direction: column;
	border: 1px solid #e7e9ee;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
}

.mp-picks__item:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.mp-picks__pic {
	display: block;
	height: 130px;
	margin-bottom: 10px;
	object-fit: contain;
	align-self: center;
}

.mp-picks__tone {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
}

.mp-picks__name {
	flex: 1 1 auto;
	margin: 4px 0 10px;
	font-size: 13px;
	line-height: 1.35;
	color: #5a6070;
}

.mp-picks__price {
	font-weight: 700;
	margin-bottom: 8px;
}

.mp-picks__link {
	display: block;
	text-align: center;
	padding: 8px 10px;
	border-radius: 6px;
	background: #2f2f9e;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px;
}

.mp-picks__link:hover {
	background: #25257d;
}

.mp-picks-note {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 24px;
}

/* блок «подберём номер» */
.mp-help {
	margin: 28px 0;
	padding: 18px 20px;
	border-radius: 10px;
	background: #f4f5fb;
	border: 1px solid #e2e4f0;
}

.mp-help__title {
	font-weight: 700;
	margin-bottom: 6px;
}

.mp-help__actions {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mp-help__phone,
.mp-help__link {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 6px;
	text-decoration: none !important;
}

.mp-help__phone {
	background: #2f2f9e;
	color: #fff !important;
	font-weight: 600;
}

.mp-help__link {
	border: 1px solid #c9ccdd;
	color: #2f2f9e !important;
	background: #fff;
}

@media (max-width: 575.98px) {
	.mp-picks {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.mp-picks__pic {
		height: 100px;
	}
}

/* Таблицы в статьях на телефоне обрезались по правому краю: колонки не влезают
   в 390 px, а прокрутки у блока не было (замер 24.09.2026). Даём таблице
   горизонтальную прокрутку внутри её блока. */
@media (max-width: 767.98px) {
	.b-article-detail-content__detail-text table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.b-article-detail-content__detail-text table tbody {
		display: table;
		width: max-content;
		min-width: 100%;
	}
}