/* ============================================================
   Инфографика контентных страниц — общий набор блоков.

   Подключение на нужной странице:
   $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/pages.css", true);

   Используется на: /info/delivery/, /company/
   Единый префикс классов — .cmd
   Шрифт наследуется от темы (Manrope), ширина контента 1100px.

   Состав блоков:
     hero / hero-photo    — шапка страницы, фото справа с маской
     keys                 — тёмные карточки с ключевыми цифрами
     steps                — пронумерованные шаги
     card / grid          — универсальные белые карточки (2/3/4 колонки)
     carriers, rules      — карточки с иконкой сбоку и списком
     split                — текст + фото в две колонки
     tags                 — пилюли (семейства ароматов и т.п.)
     timeline             — нумерованный вертикальный список
     note / quote         — акцентные плашки на фирменном фоне
     cta / b2b            — финальный блок с контактами и кнопками
   ============================================================ */

.cmd {
	--cmd-bg: #FBF9F6;
	--cmd-dark: #1A191B;
	--cmd-accent: #802334;
	--cmd-support: #6B1D2F;
	--cmd-line: rgba(26, 25, 27, 0.10);
	--cmd-soft: rgba(128, 35, 52, 0.05);
	--cmd-muted: rgba(26, 25, 27, 0.68);

	--cmd-shadow: rgba(0, 30, 60, 0.035) 0px 0px 0px 1px, rgba(0, 20, 40, 0.04) 0px 4px 4px -1px;
	--cmd-shadow-hover: rgba(0, 30, 60, 0.06) 0px 0px 0px 1px, rgba(0, 20, 40, 0.10) 0px 12px 24px -6px;

	/* Ограничение ширины контента страницы */
	--cmd-max: 1100px;

	max-width: var(--cmd-max);
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cmd-dark);
}

.cmd * {
	box-sizing: border-box;
}

.cmd p {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* --- Типографика заголовков: крупно и жирно, шрифт темы --- */

.cmd__h2 {
	font-size: 44px;
	line-height: 1.12;
	font-weight: 900;
	color: var(--cmd-dark);
	margin: 0 0 16px;
}

.cmd__h3 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--cmd-dark);
	margin: 0 0 12px;
}

.cmd__lead {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(26, 25, 27, 0.72);
	margin: 0;
	max-width: 720px;
}

/* --- Секция --- */

.cmd__section {
	margin: 72px 0;
}

/* Блоки hero и keys уже несут свой нижний отступ — секция
   сразу после них не добавляет второй. */
.cmd > .cmd__section:first-child,
.cmd__hero + .cmd__section,
.cmd__keys + .cmd__section {
	margin-top: 0;
}

/* Соседние секции не складывают отступы (margin у них не коллапсирует
   внутри grid/flex-контекстов темы) */
.cmd__section + .cmd__section {
	margin-top: 0;
}

.cmd__section-head {
	margin: 0 0 32px;
}

.cmd__eyebrow {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cmd-accent);
	margin: 0 0 16px;
}

/* ===== HERO: текст слева, фото справа ===== */

.cmd__hero {
	display: flex;
	align-items: center;
	min-height: 360px;
	background: var(--cmd-dark);
	border-radius: 24px;
	padding: 52px 52px;
	margin: 0 0 24px;
	position: relative;
	overflow: hidden;
}

/* Текст поверх фото, ширина ограничена, чтобы не заезжать на кадр */
.cmd__hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 560px;
}

.cmd__hero-title {
	font-size: 54px;
	line-height: 1.05;
	font-weight: 900;
	color: #FBF9F6;
	margin: 0 0 18px;
}

.cmd__hero-title span {
	color: #D9A2AC;
}

.cmd__hero-text {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(251, 249, 246, 0.75);
	margin: 0;
}

.cmd__hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--cmd-accent);
	color: #FBF9F6;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	padding: 13px 22px;
	border-radius: 100px;
	margin: 0 0 24px;
	transition: transform 0.25s ease, background 0.25s ease;
}

.cmd__hero-badge svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.cmd__hero:hover .cmd__hero-badge {
	transform: translateY(-2px);
	background: #96293C;
}

/* Фото в hero. Прижато к правому, верхнему и нижнему краю блока —
   padding родителя его не отделяет, поэтому позиционируем абсолютно.
   Левый край кадра растворяется в фоне hero (маска-градиент). */
.cmd__hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 55%;
	z-index: 1;
	overflow: hidden;
	border-radius: 0 24px 24px 0;
}

.cmd__hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;

	/* Левая половина кадра растворяется в фоне hero.
	   Много промежуточных точек — иначе на градиенте видна граница:
	   глаз замечает излом кривой прозрачности, а не сам переход. */
	-webkit-mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 10%,
		rgba(0, 0, 0, 0.12) 20%,
		rgba(0, 0, 0, 0.26) 30%,
		rgba(0, 0, 0, 0.45) 40%,
		rgba(0, 0, 0, 0.65) 50%,
		rgba(0, 0, 0, 0.82) 60%,
		rgba(0, 0, 0, 0.93) 70%,
		rgba(0, 0, 0, 0.98) 80%,
		#000 90%);
	mask-image: linear-gradient(to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 10%,
		rgba(0, 0, 0, 0.12) 20%,
		rgba(0, 0, 0, 0.26) 30%,
		rgba(0, 0, 0, 0.45) 40%,
		rgba(0, 0, 0, 0.65) 50%,
		rgba(0, 0, 0, 0.82) 60%,
		rgba(0, 0, 0, 0.93) 70%,
		rgba(0, 0, 0, 0.98) 80%,
		#000 90%);
}

.cmd__hero:hover .cmd__hero-photo img {
	transform: scale(1.03);
}

.cmd__hero-deco {
	position: absolute;
	right: -100px;
	bottom: -140px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(128, 35, 52, 0.45), rgba(128, 35, 52, 0) 68%);
	z-index: 0;
	pointer-events: none;
}

/* ===== Общая карточка ===== */

.cmd__grid {
	display: grid;
	gap: 20px;
}

.cmd__grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.cmd__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.cmd__card {
	display: flex;
	flex-direction: column;
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	padding: 30px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cmd__card:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

/* Ритм внутри карточки: интервалы задаются один раз здесь,
   чтобы разметка не обрастала инлайновыми отступами. */
.cmd__card > * + * {
	margin-top: 14px;
}

/* Заголовок примыкает к иконке ближе, чем к тексту */
.cmd__card > .cmd__icon + .cmd__card-title {
	margin-top: 0;
}

/* Список за/против отделяется от абзаца линией — иначе он
   читается как продолжение предложения.
   Селектор с .cmd впереди: ниже идёт общее .cmd ul.cmd__pros,
   которое иначе обнуляет отступы. */
.cmd .cmd__card > ul.cmd__pros {
	margin-top: 18px;
	margin-bottom: 0;
	padding-top: 0;
	border-top: 0;
}

/* Линия нужна, только когда список идёт ПОСЛЕ абзаца — тогда она
   разделяет два блока. Если список сразу за заголовком, черта висит
   в пустоте: разделять нечего. */
.cmd .cmd__card > p + ul.cmd__pros,
.cmd .cmd__card > .cmd__card-text + ul.cmd__pros {
	padding-top: 18px;
	border-top: 1px solid var(--cmd-line);
}

/* Итоговая строка («Возврат денег: …») прижимается к низу
   карточки и отбивается — так соседние карточки выравниваются.
   Селектор усилен: иначе правило .cmd__card > * + * перебивает auto. */
.cmd__card > * + .cmd__card-total,
.cmd__card > .cmd__card-total {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--cmd-line);
	font-size: 16px;
	line-height: 1.45;
	color: var(--cmd-muted);
}

.cmd__card-total strong {
	color: var(--cmd-dark);
	font-weight: 800;
}

/* Крупное значение в итоговой строке */
.cmd__card-total b {
	display: block;
	margin-top: 2px;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--cmd-accent);
}

/* ===== Шаги обработки заказа ===== */

.cmd__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cmd__step {
	position: relative;
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	padding: 28px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cmd__step:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

.cmd__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cmd-soft);
	color: var(--cmd-accent);
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 20px;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cmd__step:hover .cmd__step-num,
.cmd__card:hover .cmd__step-num {
	background: var(--cmd-accent);
	color: #fff;
	transform: scale(1.06);
}

.cmd__step-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 8px;
}

.cmd__step-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cmd-muted);
	margin: 0;
}

/* ===== Ключевые условия (бывший cmd__facts) ===== */

.cmd__keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 40px;
}

/* Вариант на четыре плашки: значения короткие (5%, 150, ∞),
   поэтому в ряд помещаются все четыре без переноса. */
.cmd__keys--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Инверсия: тёмные карточки на светлом фоне страницы */
.cmd__key {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background-color: var(--cmd-dark);
	border-radius: 16px;
	padding: 26px 28px;
	transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.cmd__key:hover {
	background-color: #232225;
	box-shadow: rgba(26, 25, 27, 0.28) 0px 14px 28px -10px;
	transform: translateY(-3px);
}

.cmd__key-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: rgba(251, 249, 246, 0.10);
	flex: none;
	transition: background 0.25s ease;
}

.cmd__key-icon svg {
	width: 22px;
	height: 22px;
	stroke: #D9A2AC;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.25s ease;
}

.cmd__key:hover .cmd__key-icon {
	background: var(--cmd-accent);
}

.cmd__key:hover .cmd__key-icon svg {
	stroke: #fff;
}

.cmd__key-value {
	display: block;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.15;
	color: #FBF9F6;
	margin: 0 0 4px;
	white-space: nowrap;
}

.cmd__key-label {
	font-size: 16px;
	line-height: 1.4;
	color: rgba(251, 249, 246, 0.68);
	margin: 0;
}

/* ===== Иконка в карточке ===== */

.cmd__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	/* Заливка плотнее, чем cmd-soft: на белом фоне карточки
	   5%-ный тон почти не читался */
	background: rgba(128, 35, 52, 0.09);
	box-shadow: inset 0 0 0 1px rgba(128, 35, 52, 0.10);
	margin: 0 0 20px;
	flex: none;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cmd__icon svg {
	width: 28px;
	height: 28px;
	stroke: var(--cmd-accent);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.25s ease;
}

/* Иконки, нарисованные заливкой, а не контуром: правило выше
   даёт им fill:none + обводку, отчего мелкий силуэт «мохнатится».
   Возвращаем заливку и снимаем stroke. */
.cmd__icon--fill svg,
.cmd__icon--fill svg > path {
	fill: var(--cmd-accent);
	stroke: none;
	transition: fill 0.25s ease;
}

/* Белый силуэт уместен только внутри залитой акцентом плашки */
.cmd__card:hover .cmd__icon--fill:not(.cmd__icon--bare) svg {
	fill: #fff;
}

/* Часть исходных иконок нарисована «вырезанием»: сплошной путь плюс
   подложка-прямоугольник поверх, которая и формирует рисунок. Такой rect
   должен совпадать с фоном карточки, а не заливаться акцентом. */
.cmd__icon svg > rect {
	fill: #fff;
}

/* Иконка без плашки: крупный знак прямо на фоне карточки.
   Габариты контейнера снимаем — размер задаёт сама svg. */
.cmd__icon--bare {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	justify-content: flex-start;
	margin: 0 0 18px;
}

/* !important: тема задаёт svg свои габариты в мобильном брейкпоинте
   и без него иконка схлопывается до 25px. */
.cmd__icon--bare svg {
	width: 52px !important;
	height: 52px !important;
}

/* Плашки нет — гасим фон и тень контейнера */
.cmd__icon--bare,
.cmd__card:hover .cmd__icon--bare {
	background: none;
	box-shadow: none;
	transform: none;
}

@media (max-width: 767px) {
	.cmd__icon--bare svg {
		width: 44px !important;
		height: 44px !important;
	}
}

/* ===== Пункт самовывоза ===== */

.cmd__pickup {
	display: flex;
	flex-direction: column;
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cmd__pickup:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

.cmd__pickup-photo {
	background: #E6E3DF;
	border-radius: 12px;
	margin: 12px 12px 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.cmd__pickup-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

.cmd__pickup:hover .cmd__pickup-photo img {
	transform: scale(1.04);
}

.cmd__pickup-body {
	padding: 26px 28px 28px;
}

.cmd__pickup-city {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cmd-accent);
	margin: 0 0 10px;
}

.cmd__pickup-name {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 8px;
}

.cmd__pickup-addr {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cmd-muted);
	margin: 0 0 20px;
}

/* ===== Список параметров (ключ — значение) ===== */

.cmd ul.cmd__params {
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--cmd-line);
}

/* Гасим декоративный маркер темы (ul > li::before { content:"\2726" }) */
.cmd ul.cmd__params > li::before,
.cmd ul.cmd__params > li::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	width: auto !important;
}

.cmd ul.cmd__params > li {
	display: grid;
	grid-template-columns: auto minmax(0, auto);
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 20px;
	font-size: 16px;
	line-height: 1.5;
	padding: 10px 0 !important;
	margin: 0 !important;
	min-height: 0;
	position: static;
}

.cmd ul.cmd__params > li + li {
	border-top: 1px dashed var(--cmd-line);
}

.cmd__param-key {
	color: rgba(26, 25, 27, 0.60);
	min-width: 0;
}

.cmd__param-val {
	font-weight: 700;
	text-align: right;
	color: var(--cmd-dark);
	min-width: 0;
}

/* ===== Транспортные компании ===== */

.cmd__carriers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cmd__carrier {
	display: flex;
	gap: 18px;
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	padding: 26px 28px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cmd__carrier:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

.cmd__carrier .cmd__icon {
	margin: 0;
}

.cmd__carrier:hover .cmd__icon {
	background: var(--cmd-accent);
	transform: scale(1.05);
}

.cmd__carrier:hover .cmd__icon svg {
	stroke: #fff;
}

.cmd__carrier-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.cmd__carrier-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cmd-muted);
	margin: 0;
}

.cmd__tag {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 100px;
	background: var(--cmd-soft);
	color: var(--cmd-accent);
	white-space: nowrap;
}

.cmd__tag--muted {
	background: rgba(26, 25, 27, 0.06);
	color: rgba(26, 25, 27, 0.55);
}

/* Приглушённые карточки (недоступно / справка) */
.cmd__carrier--muted {
	background-color: transparent;
	box-shadow: rgba(0, 30, 60, 0.06) 0px 0px 0px 1px;
}

.cmd__carrier--muted:hover {
	transform: none;
	box-shadow: rgba(0, 30, 60, 0.09) 0px 0px 0px 1px;
}

.cmd__carrier--muted .cmd__icon {
	background: rgba(26, 25, 27, 0.05);
}

.cmd__carrier--muted .cmd__icon svg {
	stroke: rgba(26, 25, 27, 0.45);
}

.cmd__carrier--muted:hover .cmd__icon {
	background: rgba(26, 25, 27, 0.09);
	transform: none;
}

.cmd__carrier--muted:hover .cmd__icon svg {
	stroke: rgba(26, 25, 27, 0.55);
}

.cmd__carrier--muted .cmd__carrier-title {
	color: rgba(26, 25, 27, 0.55);
}

/* ===== Правила получения ===== */

.cmd ul.cmd__rules {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Вариант на четыре правила: сетка 2×2, иначе четвёртая
   карточка висит одна в ряду. */
.cmd ul.cmd__rules--2 {
	grid-template-columns: repeat(2, 1fr);
}

.cmd ul.cmd__rules > li.cmd__rule {
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	padding: 28px !important;
	margin: 0 !important;
	position: relative;
	min-height: 0;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Гасим декоративный ромб темы (ul > li::before { content:"\2726" }) */
.cmd ul.cmd__rules > li::before,
.cmd ul.cmd__rules > li::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	width: auto !important;
}

.cmd__rule:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

.cmd__rule:hover .cmd__icon {
	background: var(--cmd-accent);
	transform: scale(1.05);
}

.cmd__rule:hover .cmd__icon svg {
	stroke: #fff;
}

.cmd__rule-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 8px;
}

.cmd__rule-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cmd-muted);
	margin: 0;
}

/* ===== Плашка-предупреждение ===== */

.cmd__note {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--cmd-support);
	color: #FBF9F6;
	border-radius: 16px;
	padding: 28px 32px;
	margin: 20px 0 0;
}

.cmd__note svg {
	width: 24px;
	height: 24px;
	flex: none;
	stroke: #FBF9F6;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-top: 2px;
}

.cmd__note p {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(251, 249, 246, 0.88);
	margin: 0;
}

.cmd__note strong {
	color: #fff;
	font-weight: 700;
}

/* ===== Оплата ===== */

.cmd__pay {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 20px;
	align-items: start;
}

/* :not(--bare) — у бесплашечных иконок подсвечивать нечего:
   заливка фона дала бы бордовый прямоугольник вокруг знака,
   а белая обводка растворила бы его на светлой карточке. */
.cmd__card:hover .cmd__icon:not(.cmd__icon--bare) {
	background: var(--cmd-accent);
	box-shadow: inset 0 0 0 1px var(--cmd-accent);
	transform: scale(1.04);
}

.cmd__card:hover .cmd__icon:not(.cmd__icon--bare) svg {
	stroke: #fff;
}

/* Таймлайн оплаты. Селекторы усилены: тема задаёт свой счётчик
   в ol > li:before и padding-left, их нужно перебить. */
.cmd ol.cmd__timeline {
	list-style: none;
	counter-reset: cmdpay;
	margin: 26px 0 0;
	padding: 0;
	position: relative;
}

.cmd ol.cmd__timeline > li {
	position: relative;
	counter-increment: cmdpay;
	padding: 0 0 30px 60px !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0 !important;
	min-height: 0;
	color: var(--cmd-muted);
}

.cmd ol.cmd__timeline > li:last-child {
	padding-bottom: 0 !important;
}

/* Кружок с номером */
.cmd ol.cmd__timeline > li::before {
	content: counter(cmdpay) !important;
	counter-increment: none;
	position: absolute;
	left: 0;
	top: -1px;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	background: #fff !important;
	box-shadow: inset 0 0 0 2px var(--cmd-accent);
	color: var(--cmd-accent) !important;
	font-size: 16px;
	font-weight: 800;
	line-height: 40px;
	text-align: center;
	display: block !important;
	z-index: 2;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Соединительная линия */
.cmd ol.cmd__timeline > li::after {
	content: '' !important;
	display: block !important;
	position: absolute;
	left: 19px;
	top: 42px;
	bottom: 4px;
	width: 2px;
	height: auto;
	background: linear-gradient(to bottom, rgba(128, 35, 52, 0.35), rgba(128, 35, 52, 0.10));
	z-index: 1;
}

.cmd ol.cmd__timeline > li:last-child::after {
	display: none !important;
}

.cmd ol.cmd__timeline > li:hover::before {
	background: var(--cmd-accent) !important;
	color: #fff !important;
	transform: scale(1.08);
}

.cmd__timeline-title {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--cmd-dark);
	line-height: 1.3;
	margin: 0 0 4px;
}

.cmd__secure {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--cmd-muted);
	background: var(--cmd-soft);
	border-radius: 14px;
	padding: 16px 20px;
	margin: 26px 0 0;
}

.cmd__secure svg {
	width: 22px;
	height: 22px;
	flex: none;
	stroke: var(--cmd-accent);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===== Блок для юрлиц ===== */

.cmd__b2b {
	display: flex;
	gap: 36px;
	align-items: center;
	background: var(--cmd-dark);
	border-radius: 24px;
	padding: 44px;
}

.cmd__b2b-body {
	flex: 1 1 auto;
}

.cmd__b2b-title {
	font-size: 38px;
	font-weight: 900;
	line-height: 1.1;
	color: #FBF9F6;
	margin: 0 0 12px;
}

.cmd__b2b-text {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(251, 249, 246, 0.72);
	margin: 0;
	max-width: 560px;
}

.cmd__b2b-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 20px 0 0;
}

.cmd__b2b-contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: #FBF9F6 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.cmd__b2b-contact svg {
	width: 20px;
	height: 20px;
	flex: none;
	stroke: #D9A2AC;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.2s ease;
}

.cmd__b2b-contact:hover {
	color: #D9A2AC !important;
}

.cmd__b2b-contact:hover svg {
	stroke: #fff;
}

.cmd__b2b-note {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(251, 249, 246, 0.5);
	margin: 12px 0 0;
}

.cmd__b2b-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: none;
	min-width: 230px;
}

/* Кнопки */
.cmd__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	padding: 19px 32px;
	border-radius: 100px;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.cmd__btn--primary {
	background: var(--cmd-accent);
	color: #FBF9F6 !important;
}

.cmd__btn--primary:hover {
	background: #96293C;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(128, 35, 52, 0.65);
}

.cmd__btn--ghost {
	background: transparent;
	color: #FBF9F6 !important;
	box-shadow: inset 0 0 0 1px rgba(251, 249, 246, 0.30);
}

.cmd__btn--ghost:hover {
	background: rgba(251, 249, 246, 0.10);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px rgba(251, 249, 246, 0.55);
}

.cmd__btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===== Место под фото ===== */

.cmd__photo {
	background: #E6E3DF;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	width: 100%;
	box-shadow: var(--cmd-shadow);
	transition: box-shadow 0.25s ease;
}

.cmd__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

.cmd__photo:hover {
	box-shadow: var(--cmd-shadow-hover);
}

.cmd__photo:hover img {
	transform: scale(1.03);
}

.cmd__photo--square {
	aspect-ratio: 1 / 1;
}

/* ===== Планшет ===== */

@media (max-width: 991px) {
	/* Ниже 1100px ограничение не нужно — тянемся по ширине родителя */
	.cmd {
		max-width: none;
	}

	/* Узкий экран: фото возвращается в поток, под текст */
	.cmd__hero {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		min-height: 0;
		padding: 44px 36px;
	}

	.cmd__hero-inner {
		max-width: none;
	}

	.cmd__hero-photo {
		position: static;
		width: 100%;
		aspect-ratio: 900 / 314;
		border-radius: 16px;
	}

	.cmd__hero-photo img {
		border-radius: 16px;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.cmd__hero-title {
		font-size: 46px;
	}

	.cmd__h2 {
		font-size: 38px;
	}

	.cmd__h3 {
		font-size: 26px;
	}

	.cmd__b2b-title {
		font-size: 34px;
	}

	.cmd__steps,
	.cmd__rules,
	.cmd__keys,
	.cmd__keys--4,
	.cmd__grid--3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.cmd__carriers,
	.cmd__pay {
		grid-template-columns: 1fr;
	}

	.cmd__b2b {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.cmd__b2b-actions {
		width: 100%;
		flex-direction: row;
	}

	.cmd__btn {
		flex: 1 1 auto;
	}
}

/* ===== Мобильные ===== */

@media (max-width: 767px) {
	.cmd {
		font-size: 15px;
	}

	.cmd p,
	.cmd__step-text,
	.cmd__rule-text,
	.cmd__carrier-text,
	.cmd__key-label,
	.cmd__pickup-addr,
	.cmd ul.cmd__params > li,
	.cmd ol.cmd__timeline > li,
	.cmd__note p,
	.cmd__b2b-text,
	.cmd__b2b-note,
	.cmd__secure,
	.cmd__tag,
	.cmd__btn {
		font-size: 15px;
	}

	.cmd__section {
		margin-bottom: 48px;
	}

	.cmd__hero {
		padding: 32px 24px;
		border-radius: 20px;
		margin-bottom: 44px;
		gap: 26px;
	}

	.cmd__hero-title {
		font-size: 36px;
	}

	.cmd__hero-text,
	.cmd__lead {
		font-size: 16px;
	}

	.cmd__hero-badge,
	.cmd__eyebrow,
	.cmd__pickup-city {
		font-size: 15px;
	}

	.cmd__hero-deco {
		right: -140px;
		bottom: -160px;
		width: 280px;
		height: 280px;
	}

	.cmd__h2 {
		font-size: 32px;
	}

	.cmd__h3 {
		font-size: 25px;
	}

	.cmd__eyebrow {
		margin-bottom: 12px;
	}

	.cmd__steps,
	.cmd__rules,
	.cmd__keys,
	.cmd__keys--4,
	.cmd__grid--2,
	.cmd__grid--3 {
		grid-template-columns: 1fr !important;
	}

	/* Селектор усилен: .cmd ul.cmd__rules--2 специфичнее правила выше */
	.cmd ul.cmd__rules--2 {
		grid-template-columns: 1fr;
	}

	.cmd__card,
	.cmd__step,
	.cmd__pickup-body {
		padding: 24px;
	}

	/* Секции на мобильных отбиваются меньше */
	.cmd__section {
		margin: 48px 0;
	}

	/* Иконка чуть компактнее, но остаётся заметной */
	.cmd__icon {
		width: 50px;
		height: 50px;
		border-radius: 14px;
		margin-bottom: 16px;
	}

	.cmd__icon svg {
		width: 25px;
		height: 25px;
	}

	.cmd__card > .cmd__card-total {
		font-size: 15px;
	}

	.cmd__card-total b {
		font-size: 20px;
	}

	.cmd__key,
	.cmd__carrier {
		padding: 22px 24px;
		gap: 16px;
	}

	.cmd__key-value {
		font-size: 26px;
		white-space: normal;
	}

	.cmd__step-title,
	.cmd__rule-title,
	.cmd__carrier-title {
		font-size: 21px;
	}

	.cmd__timeline-title {
		font-size: 18px;
	}

	.cmd__pickup-name {
		font-size: 26px;
	}

	.cmd__b2b-title {
		font-size: 30px;
	}

	.cmd__b2b-contact {
		font-size: 18px;
	}

	/* На мобильных ключ и значение — в столбик */
	.cmd ul.cmd__params > li {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.cmd__param-val {
		text-align: left;
	}

	.cmd ul.cmd__rules > li.cmd__rule {
		padding: 24px !important;
	}

	.cmd ol.cmd__timeline > li {
		padding: 0 0 24px 48px !important;
	}

	.cmd ol.cmd__timeline > li:last-child {
		padding-bottom: 0 !important;
	}

	.cmd ol.cmd__timeline > li::before {
		width: 32px !important;
		height: 32px !important;
		line-height: 32px;
	}

	.cmd ol.cmd__timeline > li::after {
		left: 15px;
		top: 34px;
	}

	.cmd__note {
		flex-direction: column;
		gap: 12px;
		padding: 24px;
	}

	.cmd__b2b {
		padding: 32px 24px;
		border-radius: 20px;
	}

	.cmd__b2b-title {
		font-size: 26px;
	}

	.cmd__b2b-contacts {
		flex-direction: column;
		gap: 12px;
	}

	.cmd__b2b-actions {
		width: 100%;
		flex-direction: column;
	}

	.cmd__photo,
	.cmd__photo--square {
		aspect-ratio: 4 / 3;
	}

	/* Панорамный кадр на телефоне слишком низкий — подрезаем по высоте */
	.cmd__hero-photo {
		aspect-ratio: 16 / 9;
		border-radius: 14px;
	}

	/* То же и для широких фото в контенте: на 305px ширины пропорция
	   вроде 1100/420 даёт полоску ~116px. Перебиваем инлайновый
	   aspect-ratio, поэтому !important. */
	.cmd__photo--wide {
		aspect-ratio: 3 / 2 !important;
	}

	.cmd__hero-photo img {
		border-radius: 14px;
	}

	/* Тач-устройства: подъём карточек при наведении не нужен */
	.cmd__card:hover,
	.cmd__step:hover,
	.cmd__rule:hover,
	.cmd__carrier:hover,
	.cmd__key:hover,
	.cmd__pickup:hover {
		transform: none;
	}

	.cmd__hero:hover .cmd__hero-photo img,
	.cmd__pickup:hover .cmd__pickup-photo img,
	.cmd__photo:hover img {
		transform: none;
	}
}


/* ============================================================
   Дополнительные блоки (добавлены для /company/)
   ============================================================ */

/* ===== Текст + фото в две колонки ===== */

.cmd__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.cmd__split-body p + p {
	margin-top: 14px;
}

.cmd__split--reverse .cmd__split-media {
	order: -1;
}

/* ===== Универсальная белая карточка ===== */

.cmd__card-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 8px;
}

.cmd__card-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--cmd-muted);
	margin: 0;
}

.cmd__grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ===== Нумерованные карточки ===== */

.cmd__num {
	position: relative;
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	padding: 28px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cmd__num:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

.cmd__num-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cmd-soft);
	color: var(--cmd-accent);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 18px;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cmd__num:hover .cmd__num-badge {
	background: var(--cmd-accent);
	color: #fff;
	transform: scale(1.06);
}

/* ===== Теги-пилюли ===== */

.cmd ul.cmd__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cmd ul.cmd__tags > li {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0;
	position: static;
}

.cmd ul.cmd__tags > li::before,
.cmd ul.cmd__tags > li::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	width: auto !important;
}

.cmd__tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #fff;
	box-shadow: var(--cmd-shadow);
	border-radius: 100px;
	padding: 13px 22px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cmd-dark);
	transition: box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.cmd__tag-pill::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cmd-accent);
	flex: none;
	transition: background 0.22s ease;
}

.cmd__tag-pill:hover {
	background: var(--cmd-accent);
	color: #FBF9F6;
	transform: translateY(-2px);
	box-shadow: var(--cmd-shadow-hover);
}

.cmd__tag-pill:hover::before {
	background: #D9A2AC;
}

/* ===== Цитата-манифест ===== */

.cmd__quote {
	background: var(--cmd-support);
	border-radius: 20px;
	padding: 44px 48px;
	color: #FBF9F6;
}

.cmd__quote-text {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 800;
	margin: 0 0 12px;
	color: #FBF9F6;
}

.cmd__quote-sub {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(251, 249, 246, 0.75);
	margin: 0;
	max-width: 720px;
}

/* ===== Нумерация таймлайна с ведущим нулём =====
   decimal-leading-zero сам добавляет ноль только однозначным:
   01…09, затем 10, 11 — без лишнего нуля у двузначных. */

.cmd ol.cmd__timeline--zero > li::before {
	content: counter(cmdpay, decimal-leading-zero) !important;
}

/* ===== Планшет ===== */

@media (max-width: 991px) {
	.cmd__grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.cmd__split {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cmd__split--reverse .cmd__split-media {
		order: 0;
	}

	.cmd__quote {
		padding: 36px;
	}

	.cmd__quote-text {
		font-size: 25px;
	}
}

/* ===== Мобильные ===== */

@media (max-width: 767px) {
	.cmd__grid--4 {
		grid-template-columns: 1fr;
	}

	.cmd__card-text,
	.cmd__quote-sub,
	.cmd__tag-pill {
		font-size: 15px;
	}

	.cmd__card-title {
		font-size: 21px;
	}

	.cmd__num {
		padding: 24px;
	}

	.cmd__quote {
		padding: 28px 24px;
		border-radius: 16px;
	}

	.cmd__quote-text {
		font-size: 22px;
	}

	.cmd__tag-pill {
		padding: 11px 18px;
	}

	.cmd__num:hover,
	.cmd__tag-pill:hover {
		transform: none;
	}
}


/* ============================================================
   Блоки статей блога (добавлены для /blog/)
   ============================================================ */

/* В статье блога заголовок страницы уже выведен шаблоном,
   поэтому верхний отступ не нужен. */
.cmd--article {
	margin-top: 8px;

	/* Фон статьи белый, поэтому белая карточка с мягкой тенью не читается.
	   Заменяем тень на видимую обводку — граница держит форму карточки
	   даже без перепада фона. */
	--cmd-shadow: inset 0 0 0 1px rgba(26, 25, 27, 0.14);
	--cmd-shadow-hover: inset 0 0 0 1px rgba(128, 35, 52, 0.45);
}

/* Карточки внутри статьи: обводка вместо тени, при наведении — акцентная рамка */
.cmd--article .cmd__card,
.cmd--article .cmd__trend {
	box-shadow: var(--cmd-shadow);
	transition: box-shadow 0.25s ease;
}

.cmd--article .cmd__card:hover,
.cmd--article .cmd__trend:hover {
	box-shadow: var(--cmd-shadow-hover);
	transform: none;
}

/* ===== Блок тренда ===== */

.cmd__trend {
	background-color: rgb(255, 255, 255);
	box-shadow: var(--cmd-shadow);
	border-radius: 16px;
	padding: 30px;
	transition: box-shadow 0.25s ease;
}

.cmd__trend:hover {
	box-shadow: var(--cmd-shadow-hover);
}

.cmd__trend-head {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0 0 24px;
}

.pagebase-projects-business-opt-i-distributsiya .cmd__trend-head {
	align-items: center;
}

.cmd__trend-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cmd-accent);
	color: #FBF9F6;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
	flex: none;
	transition: transform 0.25s ease, background 0.25s ease;
}

.cmd__trend:hover .cmd__trend-num {
	transform: scale(1.06);
	background: #96293C;
}

.cmd__trend .cmd__h3 {
	margin-bottom: 8px;
}

/* Подзаголовок «Наши отдушки» внутри тренда */
.cmd__eyebrow--sm {
	font-size: 15px;
	margin: 0 0 14px;
	padding-top: 20px;
	border-top: 1px solid var(--cmd-line);
	display: block;
}

/* ===== Карточка товара-отдушки ===== */

.cmd a.cmd__product {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	background: var(--cmd-soft);
	border-radius: 14px;
	padding: 14px 18px 14px 14px;
	text-decoration: none !important;
	color: var(--cmd-dark) !important;
	transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.cmd a.cmd__product:hover {
	background: var(--cmd-accent);
	color: #FBF9F6 !important;
	transform: translateY(-3px);
	box-shadow: 0 10px 22px -8px rgba(128, 35, 52, 0.5);
}

/* Фото товара слева */
.cmd__product-img {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.cmd__product-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.35s ease;
}

.cmd a.cmd__product:hover .cmd__product-img img {
	transform: scale(1.06);
}

/* Текстовая часть карточки */
.cmd__product-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cmd__product-name {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: inherit;
}

.cmd__product-desc {
	font-size: 15px;
	line-height: 1.45;
	color: var(--cmd-muted);
	transition: color 0.22s ease;
}

.cmd a.cmd__product:hover .cmd__product-desc {
	color: rgba(251, 249, 246, 0.85);
}

/* ===== Планшет ===== */

@media (max-width: 991px) {
	.cmd__trend {
		padding: 26px;
	}
}

/* ===== Мобильные ===== */

@media (max-width: 767px) {
	.cmd__trend {
		padding: 22px;
	}

	.cmd__trend-head {
		gap: 16px;
		margin-bottom: 20px;
	}

	.cmd__trend-num {
		width: 46px;
		height: 46px;
		font-size: 17px;
	}

	.cmd__product-name {
		font-size: 16px;
	}

	.cmd__product-desc {
		font-size: 15px;
	}

	.cmd a.cmd__product {
		padding: 12px 16px 12px 12px;
		gap: 14px;
	}

	.cmd__product-img {
		width: 64px;
		height: 64px;
	}

	.cmd a.cmd__product:hover {
		transform: none;
	}

	.cmd a.cmd__product:hover .cmd__product-img img {
		transform: none;
	}
}


/* ===== Карточка материала: фото слева, описание справа ===== */

.cmd__material {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.cmd__material-img {
	flex: none;
	width: 104px;
	height: 104px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(26, 25, 27, 0.10);
}

.cmd__material-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.35s ease;
}

.cmd__card:hover .cmd__material-img img {
	transform: scale(1.05);
}

.cmd__material-body {
	min-width: 0;
}

/* Надзаголовок-категория без верхней линии (внутри карточки) */
.cmd__eyebrow--plain {
	padding-top: 0;
	border-top: 0;
	margin-bottom: 6px;
}

.cmd__material-body .cmd__card-title {
	margin-bottom: 8px;
}

/* ===== Текстовая ссылка со стрелкой ===== */

.cmd a.cmd__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cmd-accent) !important;
	text-decoration: none !important;
	transition: gap 0.22s ease, color 0.22s ease;
}

.cmd a.cmd__link svg {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform 0.22s ease;
}

.cmd a.cmd__link:hover {
	color: var(--cmd-support) !important;
}

.cmd a.cmd__link:hover svg {
	transform: translateX(4px);
}

/* Внутри статьи таймлайн лежит в карточке-обводке — убираем двойной отступ */
.cmd--article .cmd__trend > .cmd__timeline {
	margin: 0;
}

@media (max-width: 767px) {
	.cmd__material {
		gap: 16px;
	}

	.cmd__material-img {
		width: 84px;
		height: 84px;
	}

	.cmd a.cmd__link {
		font-size: 15px;
	}

	.cmd__card:hover .cmd__material-img img {
		transform: none;
	}
}


/* ===== Таблица подбора ===== */

.cmd__table-wrap {
	width: 100%;
	overflow-x: auto;
	border-radius: 16px;
	box-shadow: var(--cmd-shadow);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.cmd table.cmd__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	min-width: 720px;
}

.cmd table.cmd__table th {
	background: var(--cmd-dark);
	color: #FBF9F6;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	padding: 16px 20px;
	white-space: nowrap;
	border: 0;
}

.cmd table.cmd__table td {
	padding: 16px 20px;
	border: 0;
	border-top: 1px solid var(--cmd-line);
	color: var(--cmd-muted);
	vertical-align: top;
	background: transparent;
}

.cmd table.cmd__table td:first-child {
	color: var(--cmd-dark);
	white-space: nowrap;
}

.cmd table.cmd__table tbody tr {
	transition: background 0.2s ease;
}

.cmd table.cmd__table tbody tr:hover {
	background: var(--cmd-soft);
}

/* Подсказка о прокрутке — только когда таблица шире экрана */
.cmd__table-hint {
	display: none;
	font-size: 15px;
	color: var(--cmd-muted);
	margin: 10px 0 0;
}

/* ===== Планшет ===== */

@media (max-width: 991px) {
	.cmd table.cmd__table th,
	.cmd table.cmd__table td {
		padding: 14px 16px;
	}
}

/* ===== Мобильные: таблица превращается в карточки ===== */

@media (max-width: 767px) {
	.cmd__table-wrap {
		overflow-x: visible;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}

	.cmd table.cmd__table {
		min-width: 0;
		display: block;
	}

	.cmd table.cmd__table thead {
		display: none;
	}

	.cmd table.cmd__table tbody,
	.cmd table.cmd__table tr,
	.cmd table.cmd__table td {
		display: block;
		width: 100%;
	}

	.cmd table.cmd__table tr {
		background: #fff;
		box-shadow: var(--cmd-shadow);
		border-radius: 14px;
		padding: 8px 0;
		margin: 0 0 12px;
	}

	.cmd table.cmd__table tr:hover {
		background: #fff;
	}

	.cmd table.cmd__table td {
		border-top: 0;
		padding: 8px 18px;
		font-size: 15px;
	}

	/* Первая ячейка — заголовок карточки */
	.cmd table.cmd__table td:first-child {
		font-size: 17px;
		font-weight: 800;
		color: var(--cmd-dark);
		white-space: normal;
		padding-bottom: 10px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--cmd-line);
	}

	/* Остальные — с подписью колонки из data-th */
	.cmd table.cmd__table td:not(:first-child)::before {
		content: attr(data-th);
		display: block;
		font-size: 15px;
		font-weight: 700;
		color: var(--cmd-accent);
		margin-bottom: 2px;
	}
}


/* ===== Список плюсов и минусов ===== */

.cmd ul.cmd__pros {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cmd ul.cmd__pros > li {
	position: relative;
	margin: 0 !important;
	padding: 0 0 0 28px !important;
	min-height: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--cmd-muted);
}

/* Гасим маркер темы и рисуем свой значок */
.cmd ul.cmd__pros > li::after {
	content: none !important;
	display: none !important;
}

.cmd ul.cmd__pros > li::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px !important;
	height: 20px;
	margin: 0 !important;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
	background: none;
	display: block !important;
}

.cmd ul.cmd__pros > li.cmd__pro::before {
	content: '✓' !important;
	background: rgba(46, 125, 74, 0.10);
	color: #2E7D4A;
}

.cmd ul.cmd__pros > li.cmd__con::before {
	content: '✗' !important;
	background: var(--cmd-soft);
	color: var(--cmd-accent);
}

@media (max-width: 767px) {
	.cmd ul.cmd__pros > li {
		font-size: 15px;
	}
}


/* ===== Калькулятор ===== */

.cmd__calc {
	background: var(--cmd-dark);
	border-radius: 20px;
	padding: 32px;
	color: #FBF9F6;
}

.cmd__calc-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cmd__calc-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.cmd__calc-label {
	font-size: 16px;
	font-weight: 700;
	color: rgba(251, 249, 246, 0.72);
}

.cmd input.cmd__calc-input {
	width: 100%;
	height: auto;
	background: rgba(251, 249, 246, 0.08);
	border: 1px solid rgba(251, 249, 246, 0.18);
	border-radius: 12px;
	padding: 15px 18px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: #FBF9F6;
	box-shadow: none;
	transition: border-color 0.2s ease, background 0.2s ease;
	appearance: textfield;
	-moz-appearance: textfield;
}

.cmd input.cmd__calc-input:focus {
	outline: none;
	border-color: #D9A2AC;
	background: rgba(251, 249, 246, 0.12);
}

.cmd input.cmd__calc-input::-webkit-outer-spin-button,
.cmd input.cmd__calc-input::-webkit-inner-spin-button {
	opacity: 1;
	height: 28px;
}

/* Результаты */
.cmd__calc-results {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(251, 249, 246, 0.16);
}

.cmd__calc-result {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cmd__calc-result-label {
	font-size: 16px;
	color: rgba(251, 249, 246, 0.6);
}

.cmd__calc-result-value {
	font-size: 34px;
	font-weight: 900;
	line-height: 1.1;
	color: #D9A2AC;
}

.cmd__calc-result--muted .cmd__calc-result-value {
	color: #FBF9F6;
}

/* Предупреждение о превышении процента */
.cmd__calc-warning {
	display: none;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--cmd-accent);
	font-size: 16px;
	line-height: 1.45;
	color: #FBF9F6;
}

.cmd__calc-warning.is-visible {
	display: block;
}

@media (max-width: 767px) {
	.cmd__calc {
		padding: 24px;
		border-radius: 16px;
	}

	.cmd__calc-fields,
	.cmd__calc-results {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.cmd__calc-label,
	.cmd__calc-result-label,
	.cmd__calc-warning {
		font-size: 15px;
	}

	.cmd input.cmd__calc-input {
		font-size: 18px;
		padding: 14px 16px;
	}

	.cmd__calc-result-value {
		font-size: 28px;
	}
}


/* ============================================================
   Заглавная картинка статьи блога
   Ограничиваем высоту: кадр обрезается по центру, пропорции
   сохраняются. Без этого вертикальные фото занимают весь экран.
   ============================================================ */

.page-blog .detail-image--wide,
.detail.blog .detail-image--wide {
	max-height: 480px;
	overflow: hidden;
	border-radius: 16px;
}

.page-blog .detail-image--wide > a,
.page-blog .detail-image--wide > picture,
.detail.blog .detail-image--wide > a,
.detail.blog .detail-image--wide > picture {
	display: block;
	width: 100%;
	max-height: 480px;
	overflow: hidden;
}

.page-blog .detail-image--wide img,
.detail.blog .detail-image--wide img {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 767px) {
	.page-blog .detail-image--wide,
	.page-blog .detail-image--wide > a,
	.page-blog .detail-image--wide > picture,
	.page-blog .detail-image--wide img,
	.detail.blog .detail-image--wide,
	.detail.blog .detail-image--wide > a,
	.detail.blog .detail-image--wide > picture,
	.detail.blog .detail-image--wide img {
		max-height: 280px;
	}

	.page-blog .detail-image--wide,
	.detail.blog .detail-image--wide {
		border-radius: 14px;
	}
}


/* ===== Подводка на странице FAQ =====
   Компонент Аспро центрирует контент вокруг себя — возвращаем
   выравнивание по левому краю и убираем ограничение ширины .cmd. */

.cmd--faq {
	max-width: none;
	margin: 0 0 24px;
	text-align: left;
}

.cmd--faq .cmd__lead {
	margin: 0;
	max-width: 760px;
	text-align: left;
}


/* ============================================================
   Страница FAQ — фирменное оформление штатного аккордеона Аспро.
   Разметка компонента не меняется, только цвета и геометрия:
   .faq-accordion__wrapper — карточка вопроса
   .accordion-head        — кликабельный заголовок
   .switcher-title        — текст вопроса
   .accordion-body        — ответ
   ============================================================ */

/* --- Общая ширина контента страницы --- */

.cmd--faq,
.pagebase-company-faq .faq-accordion__list,
.pagebase-company-faq .tabs,
.pagebase-company-faq .tab-content {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Вкладки категорий --- */

.pagebase-company-faq .tabs .nav-tabs {
	border: 0;
	gap: 10px;
}

.pagebase-company-faq .tabs .nav-tabs > li > a {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(26, 25, 27, 0.12);
	border: 0;
	border-radius: 100px;
	padding: 12px 22px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cmd-dark, #1A191B);
	transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.pagebase-company-faq .tabs .nav-tabs > li > a:hover {
	box-shadow: inset 0 0 0 1px rgba(128, 35, 52, 0.45);
	color: #802334;
}

.pagebase-company-faq .tabs .nav-tabs > li.active > a,
.pagebase-company-faq .tabs .nav-tabs > li.active > a:hover,
.pagebase-company-faq .tabs .nav-tabs > li.active > a:focus {
	background: #802334;
	box-shadow: inset 0 0 0 1px #802334;
	color: #FBF9F6;
}

/* --- Карточка вопроса --- */

.pagebase-company-faq .faq-accordion__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pagebase-company-faq .faq-accordion__wrapper {
	background: #fff;
	/* Обводка вместо тени: фон страницы белый, мягкая тень не читается */
	box-shadow: inset 0 0 0 1px rgba(26, 25, 27, 0.12);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.25s ease;
}

.pagebase-company-faq .faq-accordion__wrapper:hover {
	box-shadow: inset 0 0 0 1px rgba(128, 35, 52, 0.45);
}

/* Раскрытый вопрос выделен акцентной рамкой и мягкой подложкой */
.pagebase-company-faq .faq-accordion__wrapper:has(.accordion-head:not(.collapsed)) {
	box-shadow: inset 0 0 0 2px #802334;
}

/* --- Заголовок вопроса --- */

.pagebase-company-faq .accordion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	text-decoration: none !important;
	transition: background 0.22s ease;
}

.pagebase-company-faq .accordion-head:hover {
	background: rgba(128, 35, 52, 0.04);
}

.pagebase-company-faq .accordion-head .switcher-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cmd-dark, #1A191B);
	transition: color 0.22s ease;
}

.pagebase-company-faq .accordion-head:hover .switcher-title {
	color: #802334;
}

.pagebase-company-faq .accordion-head:not(.collapsed) .switcher-title {
	color: #802334;
}

/* --- Иконка «плюс» → фирменный цвет, поворот при раскрытии --- */

.pagebase-company-faq .accordion-head .svg-inline-right-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(128, 35, 52, 0.08);
	transition: background 0.25s ease, transform 0.25s ease;
}

.pagebase-company-faq .accordion-head .svg-inline-right-arrow svg path {
	stroke: #802334;
	transition: stroke 0.25s ease;
}

.pagebase-company-faq .accordion-head:hover .svg-inline-right-arrow {
	background: #802334;
}

.pagebase-company-faq .accordion-head:hover .svg-inline-right-arrow svg path {
	stroke: #fff;
}

/* Раскрыто: плюс превращается в минус поворотом на 45° */
.pagebase-company-faq .accordion-head:not(.collapsed) .svg-inline-right-arrow {
	background: #802334;
	transform: rotate(45deg);
}

.pagebase-company-faq .accordion-head:not(.collapsed) .svg-inline-right-arrow svg path {
	stroke: #fff;
}

/* --- Тело ответа --- */

.pagebase-company-faq .accordion-body {
	padding: 0 26px 24px;
}

.pagebase-company-faq .faq-accordion__preview-text,
.pagebase-company-faq .accordion-preview {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(26, 25, 27, 0.72);
}

.pagebase-company-faq .accordion-body p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.6;
}

.pagebase-company-faq .accordion-body p:last-child {
	margin-bottom: 0;
}

.pagebase-company-faq .accordion-body strong {
	color: var(--cmd-dark, #1A191B);
	font-weight: 700;
}

/* Ссылки внутри ответов — фирменным цветом с подчёркиванием */
.pagebase-company-faq .accordion-body a {
	color: #802334;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.pagebase-company-faq .accordion-body a:hover {
	color: #6B1D2F;
}

/* --- Блок «Задать вопрос» --- */

.pagebase-company-faq .faq-question,
.pagebase-company-faq [class*="ask-question"] {
	max-width: 1200px;
	margin: 32px auto 0;
	background: var(--cmd-dark, #1A191B);
	border-radius: 20px;
	padding: 36px 40px;
	color: #FBF9F6;
}

.pagebase-company-faq .faq-question .title,
.pagebase-company-faq .faq-question h2,
.pagebase-company-faq [class*="ask-question"] h2 {
	color: #FBF9F6;
	font-size: 30px;
	font-weight: 900;
	line-height: 1.15;
	margin: 0 0 10px;
}

.pagebase-company-faq .faq-question p,
.pagebase-company-faq [class*="ask-question"] p {
	color: rgba(251, 249, 246, 0.72);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
}

/* Кнопка внутри блока — фирменная */
.pagebase-company-faq .faq-question .btn,
.pagebase-company-faq [class*="ask-question"] .btn {
	background: #802334;
	border-color: #802334;
	color: #FBF9F6;
	border-radius: 100px;
	font-weight: 700;
	transition: background 0.22s ease, transform 0.22s ease;
}

.pagebase-company-faq .faq-question .btn:hover,
.pagebase-company-faq [class*="ask-question"] .btn:hover {
	background: #96293C;
	border-color: #96293C;
	color: #fff;
	transform: translateY(-2px);
}

/* --- Мобильные --- */

@media (max-width: 767px) {
	.pagebase-company-faq .accordion-head {
		padding: 18px 60px 18px 20px;
		gap: 14px;
	}

	.pagebase-company-faq .accordion-head .switcher-title {
		font-size: 17px;
	}

	.pagebase-company-faq .accordion-head .svg-inline-right-arrow {
		width: 30px;
		height: 30px;
	}

	.pagebase-company-faq .accordion-body {
		padding: 0 20px 20px;
	}

	.pagebase-company-faq .faq-accordion__preview-text,
	.pagebase-company-faq .accordion-preview,
	.pagebase-company-faq .accordion-body p {
		font-size: 15px;
	}

	.pagebase-company-faq .faq-question,
	.pagebase-company-faq [class*="ask-question"] {
		padding: 26px 22px;
		border-radius: 16px;
	}

	.pagebase-company-faq .faq-question .title,
	.pagebase-company-faq .faq-question h2,
	.pagebase-company-faq [class*="ask-question"] h2 {
		font-size: 24px;
	}

	.pagebase-company-faq .tabs .nav-tabs > li > a {
		font-size: 15px;
		padding: 11px 18px;
	}
}




/* ============================================================
   Таблица реквизитов — вертикальная: ключ слева, значение справа.
   Отличается от cmd__table (там шапка сверху), поэтому свой
   модификатор --req.
   ============================================================ */

/* Страница без hero: контейнер не центрируется и не ограничен —
   ширину задаёт колонка контента рядом с сайдбаром. */
.cmd--plain {
	max-width: none;
	margin: 0;
}

.cmd--plain > .cmd__lead {
	max-width: 860px;
	margin: 0 0 28px;
}

.cmd__table-wrap--req {
	overflow-x: visible;
	border-radius: 16px;
	overflow: hidden;
}

.cmd table.cmd__table--req {
	min-width: 0;
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

/* Ключ — приглушённый, значение — акцентное */
.cmd table.cmd__table--req th {
	width: 280px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cmd-line);
	padding: 18px 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--cmd-muted);
	text-align: left;
	vertical-align: top;
	white-space: normal;
	border-radius: 0;
}

.cmd table.cmd__table--req td {
	border: 0;
	border-bottom: 1px solid var(--cmd-line);
	padding: 18px 24px 18px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--cmd-dark);
	vertical-align: top;
	background: transparent;
	white-space: normal;
}

/* Последняя строка без линии */
.cmd table.cmd__table--req tr:last-child th,
.cmd table.cmd__table--req tr:last-child td {
	border-bottom: 0;
}

.cmd table.cmd__table--req tbody tr {
	transition: background 0.2s ease;
}

.cmd table.cmd__table--req tbody tr:hover {
	background: var(--cmd-soft);
}

/* Цифровые значения — крупнее и с ровными разрядами */
.cmd__num-val {
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* Ссылки в таблице — фирменным цветом */
.cmd table.cmd__table--req a {
	color: var(--cmd-accent);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.cmd table.cmd__table--req a:hover {
	color: var(--cmd-support);
}

/* Блок контактов под таблицей */
.cmd--plain > .cmd__b2b {
	margin-top: 28px;
}

/* ===== Планшет ===== */

@media (max-width: 991px) {
	.cmd table.cmd__table--req th {
		width: 220px;
		padding: 16px 18px;
	}

	.cmd table.cmd__table--req td {
		padding: 16px 18px 16px 0;
	}
}

/* ===== Мобильные: ключ над значением ===== */

@media (max-width: 767px) {
	.cmd table.cmd__table--req,
	.cmd table.cmd__table--req tbody,
	.cmd table.cmd__table--req tr,
	.cmd table.cmd__table--req th,
	.cmd table.cmd__table--req td {
		display: block;
		width: 100%;
	}

	.cmd table.cmd__table--req tr {
		padding: 14px 18px;
		border-bottom: 1px solid var(--cmd-line);
	}

	.cmd table.cmd__table--req tr:last-child {
		border-bottom: 0;
	}

	.cmd table.cmd__table--req tr:hover {
		background: transparent;
	}

	.cmd table.cmd__table--req th {
		padding: 0 0 3px;
		border-bottom: 0;
		font-size: 15px;
	}

	.cmd table.cmd__table--req td {
		padding: 0;
		border-bottom: 0;
		font-size: 15px;
	}

	.cmd__num-val {
		font-size: 17px;
	}

	.cmd--plain > .cmd__lead {
		font-size: 16px;
		margin-bottom: 22px;
	}
}


/* ===== Карточка с фото в шапке =====
   Кадр во всю ширину карточки, под ним заголовок и содержимое.
   Используется на странице мастер-классов. */

.cmd__card--photo {
	padding: 0;
	overflow: hidden;
}

.cmd__card-media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #E6E3DF;
	margin: 0;
}

.cmd__card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

.cmd__card--photo:hover .cmd__card-media img {
	transform: scale(1.04);
}

/* Содержимое под фото получает обычные отступы карточки */
.cmd__card--photo .cmd__card-body {
	padding: 26px 28px 28px;
}

/* Внутри тела ритм задаётся так же, как в обычной карточке */
.cmd__card--photo .cmd__card-body > * + * {
	margin-top: 12px;
}

.cmd .cmd__card--photo .cmd__card-body > ul.cmd__pros {
	margin-top: 14px;
	padding-top: 0;
	border-top: 0;
}

.cmd .cmd__card--photo .cmd__card-body > p + ul.cmd__pros,
.cmd .cmd__card--photo .cmd__card-body > .cmd__card-text + ul.cmd__pros {
	padding-top: 16px;
	border-top: 1px solid var(--cmd-line);
}

/* Заголовок с ценой: название слева, тег с ценой справа */
.cmd__card--photo .cmd__card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

@media (max-width: 767px) {
	.cmd__card--photo .cmd__card-body {
		padding: 22px 24px 24px;
	}

	.cmd__card--photo:hover .cmd__card-media img {
		transform: none;
	}
}

/* ===== Партнёры и школы =====
   Сетка карточек-ссылок с буквенной монограммой вместо логотипа.
   Вся карточка — ссылка, поэтому селекторы усилены до .cmd a.cmd__partner:
   тема задаёт свои цвет и подчёркивание для ссылок в контенте. */

.cmd__partners {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Фон страницы под карточками белый (его даёт тема, не --cmd-bg),
   поэтому белая карточка сливается и от неё остаётся только контур.
   Заливаем карточку фирменным бежевым — она читается пятном, а не
   обводкой. box-shadow гасим в none: тема задаёт свой inset-контур
   в 1px, из-за которого и возникала «сложная обводка». */
.cmd a.cmd__partner {
	display: flex;
	align-items: center;
	gap: 18px;
	background-color: #FBF9F6;
	box-shadow: none;
	border: 1px solid var(--cmd-line);
	border-radius: 16px;
	padding: 22px 24px;
	text-decoration: none !important;
	color: var(--cmd-dark) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cmd a.cmd__partner:hover {
	background-color: #F4EFE9;
	border-color: rgba(128, 35, 52, 0.28);
	box-shadow: var(--cmd-shadow-hover);
	transform: translateY(-3px);
}

/* Монограмма: 2-3 буквы названия плотной фирменной плашкой.
   Заливка сплошная — на бежевом фоне полупрозрачный вариант
   (розовый на розовом) читался слабо. */
.cmd__partner-mono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--cmd-accent);
	color: #FBF9F6;
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.02em;
	flex: none;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cmd a.cmd__partner:hover .cmd__partner-mono {
	background: var(--cmd-support);
	transform: scale(1.06);
}

.cmd__partner-body {
	min-width: 0;
}

.cmd__partner-name {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 4px;
}

/* Тип проекта + стрелка, которая уезжает вправо при наведении */
.cmd__partner-type {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--cmd-muted);
	margin: 0;
}

.cmd__partner-type svg {
	width: 15px;
	height: 15px;
	flex: none;
	stroke: var(--cmd-accent);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.22s ease;
}

.cmd a.cmd__partner:hover .cmd__partner-type svg {
	transform: translateX(3px);
}

@media (max-width: 991px) {
	.cmd__partners {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.cmd__partners {
		grid-template-columns: 1fr;
	}

	.cmd a.cmd__partner {
		padding: 20px;
	}

	/* Тач-устройства: подъём карточки не нужен */
	.cmd a.cmd__partner:hover {
		transform: none;
	}

	.cmd a.cmd__partner:hover .cmd__partner-mono {
		transform: none;
	}
}

/* ===== «Нам доверяют»: плитка логотипов =====
   Сетка с автоматическими рядами фиксированной высоты: часть ячеек
   растянута на 2×2 (класс --xl) и 2×1 (--wide) — так плитка не читается
   монотонной решёткой. Логотипы вписываются через object-fit: contain,
   поэтому разные пропорции не «плывут» и не искажаются. */

.cmd__trust {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 108px;
	gap: 12px;
	/* dense: браузер подтягивает мелкие плитки в пропуски, которые
	   иначе оставляют после себя ячейки 2x2 и 2x1 */
	grid-auto-flow: row dense;
}

.cmd__trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Фон именно белый: у части исходных логотипов подложка непрозрачная
	   белая, и на бежевом она проступала бы отдельным прямоугольником. */
	background-color: #fff;
	border: 1px solid var(--cmd-line);
	border-radius: 14px;
	/* Внутренний отступ обязателен: у части исходных логотипов рисунок
	   идёт вплотную к краям файла и без него упирается в рамку. */
	padding: 16px;
	overflow: hidden;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cmd__trust-item:hover {
	background-color: #FBF9F6;
	border-color: rgba(128, 35, 52, 0.28);
	transform: translateY(-2px);
}

/* Крупная ячейка 2×2 и широкая 2×1 */
.cmd__trust-item--xl {
	grid-column: span 2;
	grid-row: span 2;
	padding: 26px;
}

.cmd__trust-item--wide {
	grid-column: span 2;
	padding: 18px 24px;
}

.cmd__trust-item img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain — логотип вписывается целиком, пропорции не искажаются */
	object-fit: contain;
	object-position: center;
	/* Приглушаем пестроту разноцветных логотипов, при наведении — цвет */
	/* filter: grayscale(100%); */
	opacity: 0.72;
	transition: filter 0.3s ease, opacity 0.3s ease;
	mix-blend-mode: darken;
}

.cmd__trust-item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ===== Планшет ===== */

@media (max-width: 991px) {
	.cmd__trust {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 96px;
		gap: 10px;
	}

	.cmd__trust-item {
		padding: 14px;
	}

	.cmd__trust-item--xl {
		padding: 20px;
	}
}

/* ===== Телефон ===== */

@media (max-width: 767px) {
	.cmd__trust {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 84px;
		gap: 8px;
	}

	.cmd__trust-item {
		padding: 12px;
		border-radius: 12px;
	}

	.cmd__trust-item--xl {
		padding: 16px;
	}

	.cmd__trust-item--wide {
		padding: 12px 16px;
	}

	/* Тач-устройства: подъём и перекраска не нужны, логотипы сразу в цвете */
	.cmd__trust-item:hover {
		transform: none;
	}

	.cmd__trust-item img {
		filter: grayscale(0);
		opacity: 1;
	}
}