/* Главная lm74: первый экран (.lmh), витрина и сезонные карточки (.lmhs),
   блоки ниже (.lmha). Макет A, оформление переработано 22.09.2026.

   Что изменилось и почему: первый экран был набором бледных прямоугольников на белом.
   Теперь это один тёмный блок во всю ширину — подбор лежит на нём белой карточкой с тенью,
   магазины рядом стеклянными. Плитки разделов и витрина остались на светлом, поэтому
   граница «первый экран → каталог» видна без разделительных линий.

   Шрифты. Заголовки — "Sofia Sans Condensed": узкий гротеск того же характера, что Bebas Neue, но с
   кириллицей (у Bebas Neue её нет вовсе, русские заголовки откатывались бы на системный).
   Текст — Inter Tight, сжатая версия Inter: в строку влезает больше при том же кегле.

   Правило для правок: разметку и тексты не трогаем, всё оформление живёт здесь.
   Классы те же, что печатают block.php, sections.php и showcase.php. */

.lmh,
.lmha,
.lmhs {
	--lm-blue: var(--lm-navy);
	--lm-accent: var(--lm-acc);
	--lm-accent-ink: var(--lm-acc-ink);
	--lm-green: var(--lm-ok);
	/* --lm-r и --lm-r-lg здесь больше не переопределяем (16.10.2026): токен с одним именем значил 10 px на сайте
	   и 14 px внутри блока — кнопка «В корзину» в витрине из-за этого получала скругление карточки. Шкала — tokens.css. */
	--lm-sh-sm: 0 2px 10px -3px rgba(11, 27, 51, .14);
	--lm-sh-md: 0 18px 40px -26px rgba(11, 27, 51, .45);
	--lm-sh-lg: 0 44px 80px -44px rgba(7, 20, 40, .65);
	--lm-display: "Sofia Sans Condensed", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--lm-text: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	font-family: var(--lm-text);
	color: var(--lm-ink);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
.lmh *, .lmh *::before, .lmh *::after,
.lmha *, .lmha *::before, .lmha *::after,
.lmhs *, .lmhs *::before, .lmhs *::after { box-sizing: border-box; }

/* Боковое поле для всех трёх блоков главной, а не только для первого экрана:
   витрина, бренды, вопросы и текст лежат в том же полноширинном wrapper_inner
   и так же упирались в кромку окна — заголовок «Магазин моторных масел» начинался
   на x=0. Формула та же, что у .lmh: колонка 1408 по центру, но не уже 20px поля.

   Ширину блокам не задаём. .middle на главной — это flex-контейнер
   (container_inner flexbox flexbox--row-reverse), и max-width на его ребёнке
   превращает секцию в узкий столбец: 21.09.2026 так и вышло — бренды выстроились
   в одну колонку шириной 352px. Поле делаем только padding-ом. */
.lmh, .lmha, .lmhs {
	--lm-max: 1408px;
	--lm-pad: max(20px, calc((100vw - var(--lm-sb, 0px) - var(--lm-max)) / 2));
	padding-inline: var(--lm-pad);
}

.lmh {
	/* Поле берём из общего блока выше (--lm-pad): раньше оно было объявлено здесь,
	   а потом понадобилось витрине и блокам ниже — определение одно на всех.
	   --lm-sb в формуле — ширина полосы прокрутки, её измеряет script.js. */
	/* clip, а не hidden: тёмная полоса выходит за это поле отрицательными полями,
	   и без него на широких экранах появлялась горизонтальная прокрутка */
	overflow-x: clip;
	margin: 0 0 40px;
	padding-top: 0;
}
.lmh a { color: var(--lm-blue); }
.lmh a:hover { color: var(--lm-navy-3); }

/* ---------- полоса ориентиров над первым экраном ----------
   Полоса тёмная и стоит вплотную к первому экрану. Светлой она разрезала страницу:
   тёмный ряд меню сверху, тёмный первый экран снизу, а между ними белая щель в 40px.
   Теперь тёмное идёт сплошняком от меню до конца первого экрана, и белым остаётся
   только ряд с логотипом сверху и каталог снизу. */
.lmh__bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
	margin-inline: calc(-1 * var(--lm-pad));
	margin-bottom: 0;
	padding: 11px var(--lm-pad);
	background: var(--lm-navy-2);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font-size: 12.5px; color: rgba(255, 255, 255, .62);
}
.lmh__bar-city { position: relative; font-weight: 600; color: #fff; padding-right: 18px; }
.lmh__bar-city::after {
	content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 14px;
	transform: translateY(-50%); background: rgba(255, 255, 255, .22);
}
.lmh__bar-item b { color: var(--lm-ok-hi); font-weight: 600; }
.lmh .lmh__bar-link { color: rgba(255, 255, 255, .62); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.lmh .lmh__bar-link:hover { color: var(--lm-accent); border-bottom-color: var(--lm-accent); }

/* ---------- тёмный первый экран во всю ширину ---------- */
.lmh__top {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 30px;
	/* тёмная полоса — во всю ширину: растягиваем обратно на то поле, которое задал .lmh,
	   и возвращаем его же внутренним отступом, чтобы текст встал по общей линии сайта */
	margin-inline: calc(-1 * var(--lm-pad));
	padding: 34px var(--lm-pad) 44px;
	background:
		radial-gradient(1100px 420px at 12% -10%, rgba(255, 183, 3, .16), transparent 60%),
		linear-gradient(135deg, var(--lm-navy-2) 0%, var(--lm-navy-hi) 52%, var(--lm-navy-2) 100%);
	color: #fff;
}
.lmh__top::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--lm-accent), rgba(255, 183, 3, 0) 65%);
}
.lmh__intro { min-width: 0; }
/* Цвета текста: по умолчанию тёмные, светлые — только внутри .lmh__top.
   Блок .lmh подключают не только на главной: на /podbor-masla/ он идёт без тёмного
   первого экрана, и написанные «под тёмное» белые подсказки и чипы оказывались там
   белым по белому — их было видно только при наведении. */
.lmh__h1 {
	font-family: var(--lm-display);
	font-size: clamp(30px, 4vw, 50px); font-weight: 600; line-height: 1.04;
	letter-spacing: .005em; margin: 0 0 12px; color: var(--lm-ink);
}
.lmh__lead {
	margin: 0 0 20px; max-width: 64ch;
	font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: var(--lm-muted);
}
.lmh__top .lmh__h1 { color: #fff; }
.lmh__top .lmh__lead { color: rgba(255, 255, 255, .78); }

/* ---------- карточка подбора ---------- */
.lmh__picker {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px 14px; align-items: end;
	padding: 20px 20px 22px; border-radius: var(--lm-r-md);
	background: #fff; color: var(--lm-ink); box-shadow: var(--lm-sh-lg);
}
.lmh__picker-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.lmh__picker-head strong { font-family: var(--lm-display); font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.lmh__picker-head span { font-size: 12.5px; color: var(--lm-muted); }
.lmh__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lmh__label { font-family: var(--lm-display); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-muted); }
.lmh__label em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.lmh__select {
	width: 100%; min-height: 46px; padding: 9px 38px 9px 13px;
	border: 1.5px solid var(--lm-line); border-radius: var(--lm-r); background: #fff;
	font: inherit; font-size: 15px; color: var(--lm-ink); cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center;
	transition: border-color .15s, box-shadow .15s;
}
.lmh__select:hover:not(:disabled) { border-color: var(--lm-line-2); }
.lmh__select:focus-visible { outline: none; border-color: var(--lm-blue); box-shadow: 0 0 0 4px rgba(0, 51, 107, .14); }
.lmh__select:disabled { background-color: #f3f5f9; color: var(--lm-muted-2); cursor: not-allowed; }
.lmh__submit { min-width: 146px; }

.lmh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 11px 22px; border: 0; border-radius: var(--lm-r);
	font-family: var(--lm-display); font-size: 16px; font-weight: 500; letter-spacing: .04em;
	text-transform: uppercase; cursor: pointer; text-decoration: none;
	transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.lmh-btn--primary { background: var(--lm-accent); color: var(--lm-accent-ink); box-shadow: 0 12px 24px -14px rgba(255, 183, 3, .9); }
.lmh-btn--primary:hover { background: var(--lm-acc-hi); transform: translateY(-1px); }
.lmh-btn--primary:disabled { background: #e7ebf2; color: var(--lm-muted-2); box-shadow: none; transform: none; cursor: not-allowed; }
.lmh-btn--secondary { background: var(--lm-blue); color: #fff; }
.lmh-btn--secondary:hover { background: var(--lm-navy-2); transform: translateY(-1px); }
.lmh-btn--ghost {
	min-height: 0; padding: 0; background: none; color: var(--lm-blue); font-family: var(--lm-text);
	font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none;
	text-decoration: underline; text-underline-offset: 3px;
}
.lmh-btn--ghost:hover { color: var(--lm-accent-ink); }
.lmh__top .lmh-btn--ghost { color: #fff; }
.lmh__top .lmh-btn--ghost:hover { color: var(--lm-accent); }
.lmh-btn:active { transform: translateY(0); }
.lmh-btn:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }

.lmh__hint { margin: 11px 0 16px; font-size: 13px; color: var(--lm-muted); }
.lmh__top .lmh__hint { color: rgba(255, 255, 255, .72); }

/* ---------- быстрые ссылки: допуски и вязкости ---------- */
.lmh__links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 9px; }
.lmh__links-label { font-size: 12px; color: var(--lm-muted); margin-right: 2px; }
.lmh .lmh__links a {
	display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px;
	border: 1px solid var(--lm-line); border-radius: 999px;
	font-family: var(--lm-display); font-size: 13.5px; font-weight: 400; letter-spacing: .03em;
	color: var(--lm-blue); text-decoration: none; background: #fff;
	transition: background-color .15s, border-color .15s, color .15s;
}
.lmh__top .lmh__links-label { color: rgba(255, 255, 255, .6); }
.lmh .lmh__top .lmh__links a {
	border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .05); color: #fff;
}
.lmh .lmh__links a:hover { background: var(--lm-accent); border-color: var(--lm-accent); color: var(--lm-accent-ink); }
.lmh__links a:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }

/* ---------- магазины ---------- */
.lmh__stores { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.lmh__store {
	padding: 15px 17px; border-radius: var(--lm-r-md);
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.lmh__store-name { font-family: var(--lm-display); font-size: 16px; font-weight: 500; letter-spacing: .01em; color: #fff; }
.lmh__store-addr { margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.lmh__store-hours { margin-top: 5px; font-size: 12px; color: rgba(255, 255, 255, .58); }
.lmh__store-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin-top: 9px; }
.lmh__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.lmh__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.lmh__status--open { color: var(--lm-ok-hi); }
.lmh__status--open::before { background: var(--lm-ok-hi); box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
.lmh__status--soon { color: var(--lm-accent); }
.lmh__status--soon::before { background: var(--lm-accent); }
.lmh__status--closed { color: var(--lm-err-hi); }
.lmh__status--closed::before { background: var(--lm-err-hi); }
.lmh .lmh__phone {
	font-family: var(--lm-display); font-size: 16px; font-weight: 500; letter-spacing: .01em;
	color: #fff; text-decoration: none; white-space: nowrap;
}
.lmh .lmh__phone:hover { color: var(--lm-accent); }

.lmh__trust { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lmh__trust li { position: relative; padding-left: 25px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.lmh__trust li::before {
	/* content с !important: тема Aspro подставляет всем спискам в контенте
	   li::before { content: "—" }, и её правило специфичнее нашего. Фон и размер
	   от нас применялись, а содержимое оставалось темовым — рядом с кружком
	   вылезал серый дефис. */
	content: "" !important; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
	background: rgba(255, 183, 3, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffb703' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center;
}
.lmh__trust strong { color: #fff; font-weight: 600; }
.lmh__trust li:first-child { margin-top: 2px; }
.lmh__trust a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lmh__trust a:hover { color: var(--lm-accent); }

/* ---------- плитки разделов ---------- */
.lmh__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; margin-top: 24px; }
.lmh .lmh__tile {
	position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
	padding: 17px 15px 15px; border-radius: var(--lm-r-md);
	background: #fff; border: 1.5px solid var(--lm-line); color: var(--lm-ink); text-decoration: none;
	box-shadow: var(--lm-sh-sm);
	transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
}
.lmh .lmh__tile::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: var(--lm-accent); transform: scaleX(0); transform-origin: left;
	transition: transform .22s ease;
}
.lmh .lmh__tile:hover { transform: translateY(-3px); box-shadow: var(--lm-sh-md); border-color: var(--lm-line-2); }
.lmh .lmh__tile:hover::before { transform: scaleX(1); }
.lmh__tile-name { font-family: var(--lm-display); font-size: 17px; font-weight: 500; letter-spacing: .01em; line-height: 1.15; }
.lmh__tile-note { font-size: 12px; color: var(--lm-muted); line-height: 1.35; }
.lmh__tile-count { margin-top: auto; padding-top: 9px; font-size: 12px; font-weight: 600; color: var(--lm-blue); }
/* Значок раздела рисует lm74_tile_icon() из icons.php. Цвет берётся из currentColor,
   поэтому при наведении значок уходит в жёлтый вместе с полосой сверху плитки. */
.lmh__tile-icon { display: block; margin-bottom: 9px; color: var(--lm-blue); transition: color .18s ease; }
.lmh .lmh__tile:hover .lmh__tile-icon { color: var(--lm-accent); }

/* ---------- «В наличии сегодня» и «Сейчас актуально» ---------- */
.lmhs { margin: 0 0 36px; }
.lmhs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lmhs__h2,
.lmha__h2 {
	margin: 0; font-family: var(--lm-display);
	font-size: clamp(22px, 2.4vw, 31px); font-weight: 600; line-height: 1.1;
	letter-spacing: .01em; color: var(--lm-ink);
}
.lmhs__more, .lmha__more { font-size: 13.5px; font-weight: 600; color: var(--lm-blue); text-decoration: none; white-space: nowrap; }
.lmhs__more:hover, .lmha__more:hover { color: var(--lm-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.lmhs__note { margin: 6px 0 15px; font-size: 13px; color: var(--lm-muted); }

/* Плитки товаров рисует штатный компонент: на широком экране он сам ставит четыре
   колонки (col-lg-3). Здесь только подъём при наведении и лента на телефоне. */
.lmhs__grid .catalog_item_wrapp { border-radius: var(--lm-r-md); transition: transform .16s ease, box-shadow .2s ease; }
.lmhs__grid .catalog_item_wrapp:hover { transform: translateY(-3px); box-shadow: var(--lm-sh-md); }

.lmhs__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.lmhs__card {
	display: flex; flex-direction: column; gap: 8px; min-width: 0;
	padding: 24px; border-radius: var(--lm-r-md);
	background: #fff; border: 1.5px solid var(--lm-line); box-shadow: var(--lm-sh-sm);
	transition: transform .16s ease, box-shadow .2s ease;
}
.lmhs__card:hover { transform: translateY(-2px); box-shadow: var(--lm-sh-md); }
.lmhs__card--season {
	border-color: transparent; color: #fff;
	background:
		radial-gradient(700px 300px at 88% -30%, rgba(255, 183, 3, .22), transparent 62%),
		linear-gradient(135deg, var(--lm-navy-2) 0%, var(--lm-navy-hi) 100%);
}
.lmhs__kicker { font-family: var(--lm-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lm-muted); }
.lmhs__card--season .lmhs__kicker { color: var(--lm-accent); }
.lmhs__card-title { font-family: var(--lm-display); font-size: clamp(21px, 2vw, 27px); font-weight: 600; line-height: 1.12; letter-spacing: .01em; }
.lmhs__card-title a { color: var(--lm-ink); text-decoration: none; }
.lmhs__card--season .lmhs__card-title a { color: #fff; }
.lmhs__card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lmhs__card-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lm-muted); }
.lmhs__card--season .lmhs__card-text { color: rgba(255, 255, 255, .8); }
.lmhs__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.lmhs__chip {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
	border-radius: 10px; border: 1.5px solid var(--lm-line); background: #fff;
	font-family: var(--lm-display); font-size: 14.5px; font-weight: 500; letter-spacing: .03em;
	color: var(--lm-blue); text-decoration: none;
	transition: transform .12s ease, background-color .16s, border-color .16s, color .16s;
}
.lmhs__card--season .lmhs__chip { border-color: rgba(255, 255, 255, .34); background: transparent; color: #fff; }
.lmhs__chip--accent { background: var(--lm-accent); border-color: var(--lm-accent); color: var(--lm-accent-ink); }
.lmhs__card--season .lmhs__chip--accent { background: var(--lm-accent); border-color: var(--lm-accent); color: var(--lm-accent-ink); }
.lmhs__chip--dark { background: var(--lm-blue); border-color: var(--lm-blue); color: #fff; }
.lmhs__chip:hover { transform: translateY(-1px); }
.lmhs__card--season .lmhs__chip:not(.lmhs__chip--accent):hover { background: rgba(255, 255, 255, .12); }

/* Цвет при наведении задаём явно и обязательно с :hover в селекторе.
   В теме есть общее правило вида `a:hover, .link:hover, … { color: … }` со специфичностью
   (0,1,1). Наш `.lmhs__chip--dark` — это (0,1,0), он проигрывает, и белый текст на синей
   кнопке при наведении становился тёмным. `:hover` в нашем селекторе даёт (0,2,0)
   и выигрывает. Правило общее: если цвет ссылки задан одним классом без :hover — тема
   его перебьёт, как только на ссылку наведут. */
.lmh .lmh__tile:hover,
.lmh .lmh__tile:hover .lmh__tile-name { color: var(--lm-ink); }
.lmh .lmh__tile:hover .lmh__tile-count { color: var(--lm-blue); }
.lmhs__chip:hover { color: var(--lm-blue); }
.lmhs__chip--accent:hover { color: var(--lm-accent-ink); }
.lmhs__chip--dark:hover { color: #fff; }
.lmhs__card--season .lmhs__chip:hover { color: #fff; }
.lmhs__card--season .lmhs__chip--accent:hover { color: var(--lm-accent-ink); }
.lmhs__card-title a:hover { color: var(--lm-ink); }
.lmhs__card--season .lmhs__card-title a:hover { color: #fff; }

/* ---------- блоки ниже: бренды, доверие, вопросы, текст ---------- */
.lmha { margin: 0 0 36px; }
.lmha__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
/* Колонок ровно четыре, а не auto-fill: брендов восемь, и при автоподборе в ряд
   вставало семь, а восьмой висел один во второй строке. Четыре и два делят восемь
   нацело, поэтому ряды всегда полные. */
.lmha__brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lmha__brand {
	display: flex; flex-direction: column; gap: 2px; padding: 15px 17px;
	border-radius: var(--lm-r-md); background: #fff; border: 1.5px solid var(--lm-line);
	text-decoration: none; box-shadow: var(--lm-sh-sm);
	transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.lmha__brand:hover { transform: translateY(-3px); box-shadow: var(--lm-sh-md); border-color: var(--lm-line-2); }

/* Значок бренда: плитка со своим контурным знаком, рисует lm74_brand_icon().
   Цвет наследуется через currentColor, поэтому при наведении знак становится белым
   вместе с заливкой плитки — отдельной картинки для тёмного состояния не нужно. */
.lmha__brand-logo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; margin-bottom: 9px; flex: 0 0 auto;
	border-radius: var(--lm-r-md); background: #eef3fb; color: var(--lm-blue);
	transition: background-color .2s ease, color .2s ease;
}
.lmha__brand-svg { display: block; }
.lmha__brand:hover .lmha__brand-logo { background: var(--lm-blue); color: #fff; }
.lmha__brand-name { font-family: var(--lm-display); font-size: 18px; font-weight: 500; color: var(--lm-ink); letter-spacing: .01em; }
.lmha__brand-country { font-size: 12px; color: var(--lm-muted); }
.lmha__brand-count { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--lm-blue); }

.lmha__why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.lmha__card { padding: 21px; border-radius: var(--lm-r-md); background: #fff; border: 1.5px solid var(--lm-line); box-shadow: var(--lm-sh-sm); }
.lmha__card-title { font-family: var(--lm-display); font-size: 19px; font-weight: 500; margin-bottom: 6px; letter-spacing: .01em; }
.lmha__card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--lm-muted); }
.lmha__card p:last-child { margin-bottom: 0; }
.lmha__card a { color: var(--lm-blue); }
.lmha__card a:hover { color: var(--lm-accent-ink); }

.lmha__faq { border: 1.5px solid var(--lm-line); border-radius: var(--lm-r-md); background: #fff; padding: 0 17px; margin-bottom: 9px; box-shadow: var(--lm-sh-sm); }
.lmha__faq-q {
	padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--lm-ink);
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.lmha__faq-q::-webkit-details-marker { display: none; }
.lmha__faq-q::after { content: "+"; color: var(--lm-muted); font-weight: 400; font-size: 20px; line-height: 1; }
.lmha__faq[open] .lmha__faq-q::after { content: "−"; color: var(--lm-blue); }
.lmha__faq-a { padding: 0 0 15px; font-size: 14px; line-height: 1.65; color: var(--lm-muted); }
.lmha__faq-a p { margin: 0 0 8px; }
.lmha__faq-a p:last-child { margin-bottom: 0; }

/* Заголовок, стоящий прямо в секции, а не в обёртке .lmha__head. У .lmha__h2
   margin: 0, потому что обычно отступ даёт сама обёртка; в текстовом блоке её нет,
   и между «Магазин моторных масел в Челябинске» и первым абзацем было ровно 0 px —
   заголовок липнул к тексту. */
.lmha > .lmha__h2 { margin-bottom: 12px; }

/* Абзац от абзаца должен отделяться заметнее, чем строка от строки внутри абзаца.
   При line-height 1.7 строки внутри абзаца расходятся на ~7 px, а между абзацами
   было 9 px — разница неразличима, и текст читался одной простынёй. */
.lmha--seo p { margin: 0 0 15px; font-size: 14px; line-height: 1.7; color: var(--lm-muted); max-width: 92ch; }
.lmha--seo p:last-child { margin-bottom: 0; }
.lmha--seo a { color: var(--lm-blue); }
.lmha--seo a:hover { color: var(--lm-accent-ink); }

/* ---------- появление блоков при прокрутке ---------- */
.lm-reveal { opacity: 0; transform: translateY(14px); }
.lm-reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
	.lm-reveal, .lm-reveal.is-in { opacity: 1; transform: none; transition: none; }
	.lmh .lmh__tile:hover, .lmhs__card:hover, .lmha__brand:hover,
	.lmhs__grid .catalog_item_wrapp:hover, .lmh-btn--primary:hover { transform: none; }
}

/* ---------- адаптив ---------- */
@media (max-width: 1199px) {
	.lmh__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.lmha__brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lmh__top { grid-template-columns: 1fr; gap: 22px; padding-top: 30px; padding-bottom: 34px; }
	.lmh__picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lmh__submit { grid-column: 1 / -1; width: 100%; }
	.lmhs__cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.lmh { margin-bottom: 26px; }
	.lmh__picker { grid-template-columns: 1fr; padding: 17px; }
	.lmh__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
	.lmh__tile-note { display: none; }
	.lmh__tile-icon { margin-bottom: 7px; }
	.lmh__tile-icon .lm-icon { width: 21px; height: 21px; }
	.lmha { margin-bottom: 26px; }
	.lmha__brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lmha__brand-logo { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 7px; }
	.lmha__brand-svg { width: 21px; height: 21px; }
	/* витрина лентой: .catalog_block — это и есть строка сетки Aspro
	   (class="catalog_block items row flexbox"), отдельного .row внутри неё нет */
	/* Лента должна доходить до самой кромки экрана, иначе она читается как обрезанная
	   таблица, а не как то, что листается. Отрицательным полем это не делается: у строки
	   есть класс `margin0`, и тема гасит margin через !important — проверено, даже
	   инлайновый style.marginLeft остаётся нулевым. Padding при этом проходит.
	   Поэтому на телефоне снимаем поле у самой секции и раздаём его тем, кто внутри:
	   заголовок и подпись получают отступ, а прокручиваемая строка занимает всю ширину
	   окна и уезжает под кромку. */
	.lmhs--stock { padding-inline: 0; }
	.lmhs--stock .lmhs__head,
	.lmhs--stock .lmhs__note { padding-inline: var(--lm-pad); }
	.lmhs__grid .catalog_block.row {
		display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: none; gap: 12px;
		padding: 0 var(--lm-pad) 6px;
	}
	.lmhs__grid .catalog_block.row::-webkit-scrollbar { display: none; }
	.lmhs__grid .catalog_block.row > [class*="col-"] { flex: 0 0 74vw; width: 74vw; max-width: 74vw; padding: 0; }
	.lmhs__card { padding: 19px; }
}