/*
 * Наши правки поверх перенесённых стилей.
 *
 * Отдельный файл намеренно: chrome.css и home.css собираются скриптом переноса
 * из исходников старого сайта и переписываются при каждой сборке. Всё, что
 * дописано руками, должно лежать здесь, иначе оно молча пропадёт.
 */

/*
 * Страховка на случай сбоя в скрипте.
 *
 * Разделы страницы скрыты (opacity: 0) и проявляются, когда скрипт замечает их
 * при прокрутке. Пока скрипт цел, это работает. Но если он споткнётся раньше —
 * а один раз так и вышло, он обращался к меню, которого уже не было, — то
 * проявлять становится некому, и половина страницы остаётся пустой навсегда.
 * Снаружи это выглядит как полосы пустоты, а причина совершенно не очевидна.
 *
 * Поэтому: любая ошибка в любом скрипте страницы — и всё содержимое
 * показывается без анимации. Лучше без анимации, чем без содержимого.
 */
html.js-broken #leimu-test-root .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/*
 * Вопросы и ответы — без рамок.
 *
 * Каждый вопрос был карточкой в рамке со скруглением. Рамку убираем, но она
 * держала на себе ещё две вещи, и без них список рассыпается:
 *
 *   Отступы. Внутри карточки было 28 пикселей слева, и без рамки вопросы
 *   оказывались сдвинуты вправо относительно заголовка раздела — как будто
 *   съехали. Поэтому боковые отступы снимаем тоже.
 *
 *   Разделение. Карточки отделялись друг от друга просветом в 12 пикселей,
 *   и без рамок список слипся бы в сплошной текст. Вместо просвета — тонкая
 *   линия между вопросами: она разделяет, но коробок не рисует.
 */
#leimu-test-root .faq-list {
  gap: 0;
}

#leimu-test-root .faq-item,
#leimu-test-root .faq-item:hover {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

#leimu-test-root .faq-item summary,
#leimu-test-root .faq-item .answer {
  padding-left: 0;
  padding-right: 0;
}

/*
 * Подвал — без разделительных линий.
 *
 * Их было две, и обе рисовались на каждой странице сайта: одна отделяла
 * подвал от содержимого, вторая внутри подвала — ссылки от копирайта.
 * Правила общие, поэтому снимаются один раз и сразу везде.
 */
body.leimu-test-page .leimu-foot {
  border-top: 0;
}

body.leimu-test-page .leimu-foot-links {
  border-bottom: 0;
}

/*
 * Каталог Казахстана: отступ от блока контактов до подвала — как везде.
 *
 * У России и главной снизу clamp(40px, 5vw, 64px), у Казахстана стояло
 * clamp(100px, 12vw, 160px) — почти втрое больше, отчего подвал там заметно
 * отваливался от страницы. Верхний отступ и так одинаковый, трогаем только
 * нижний.
 */
#leimu-kz-root .contacts {
  padding-bottom: clamp(40px, 5vw, 64px);
}

/*
 * В блоке контактов линии между пунктами остаются — они разделяют строки.
 * А вот последняя, под «Регионами», ничего не разделяет: под ней сразу подвал.
 */
#leimu-test-root .contacts .item:last-child,
#leimu-syryo-root .contacts .item:last-child,
#leimu-kz-root .contacts .item:last-child {
  border-bottom: 0;
}

/*
 * Место под капчу в форме обратного звонка.
 *
 * У контейнера капчи задан только столбец сетки, высоты нет. Пока виджет
 * не загрузился — а грузится он со стороннего сервера и не мгновенно, — строка
 * сетки остаётся нулевой, и кнопка «Заказать звонок» встаёт ровно туда, где
 * капча вот-вот появится. Дальше виджет отрисовывается поверх кнопки.
 *
 * Резервируем высоту заранее: строка больше не схлопывается, и ничто никуда
 * не прыгает. Запас небольшой — если виджет окажется ниже, снизу останется
 * обычный отступ, а не наложение.
 */
#leimu-kont-root #leimu-cb-captcha {
  min-height: 130px;
}

/*
 * Список статей — без разделительных полос внизу.
 *
 * Их было две, и обе видны как серые линии поперёк страницы: одна над
 * блоком с номерами страниц, вторая над блоком соцсетей. Разделять там нечего,
 * а глазами они читаются как обрыв страницы.
 */
#leimu-articles-root .pagination,
#leimu-articles-root .socials-block {
  border-top: 0;
}

/*
 * Отступы там же — по образцу страницы новостей.
 *
 * Блоки на обеих страницах одни и те же, но на новостях расстояния подобраны
 * заново, а на статьях остались прежние: они рассчитаны на разделительные
 * линии, которых больше нет. Без линии отступ сверху и снизу превращается
 * в пустоту почти в пол-экрана — между карточками, номерами страниц
 * и блоком соцсетей.
 */
#leimu-articles-root .feed {
  padding-bottom: clamp(24px, 3.5vw, 44px);
}

#leimu-articles-root .pagination {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 0;
}

#leimu-articles-root .socials-block {
  padding-top: clamp(36px, 4.5vw, 56px);
}

/*
 * Снимок цеха на странице контрактного производства.
 *
 * Своих фотографий у страницы не было. Кадр стоит перед оранжевой карточкой
 * про собственную площадку и читается с ней как одно целое — поэтому отступ
 * между ними убран, а не удвоен.
 */
#leimu-uslugi-root .production-shot {
  margin: clamp(56px, 7vw, 96px) 0 0;
  border-radius: clamp(20px, 3vw, 40px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--line-2);
}

#leimu-uslugi-root .production-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#leimu-uslugi-root .production-shot + .production-trust {
  margin-top: clamp(16px, 2vw, 24px);
}

/*
 * Второй снимок производства на главной — сдвиг кадра вправо.
 *
 * Рамка вертикальная (4:5), а снимок горизонтальный: по центру от него
 * остаётся середина цеха, а рабочий у фасовочной станции — то, ради чего
 * кадр и снят — обрезается по краю.
 */
#leimu-test-root .production-photo:nth-child(2) img {
  object-position: 80% center;
}

/*
 * Сноска под карточкой товара.
 *
 * Одна на весь сайт: под «Лейту Маковая Люкс» объясняет звёздочку в свойствах.
 * В вёрстке была задана стилями прямо в разметке — а карточки теперь собирает
 * кабинет из полей базы, и место для куска стилей там взяться неоткуда.
 * Значения те же, что стояли внутри.
 */
.product-note {
  margin-top: auto;
  margin-bottom: 16px;
  font-size: var(--t4);
  color: var(--ink-soft);
}

/*
 * Посадочная страница товара.
 *
 * Оболочку даёт product-shell.css — те же первый экран, ширина и карточки,
 * что на странице категории. Здесь только то, чего у категории не было:
 * разворот «фото слева, суть справа».
 *
 * Фото крупное намеренно. Товар выбирают глазами: мешок, цвет смеси, вид
 * мякиша на снимке говорят технологу больше, чем строчка описания.
 */
#leimu-tovar-root .tovar-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 56px);
}

#leimu-tovar-root .tovar-photo {
  position: relative;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  background: var(--line-2);
  aspect-ratio: 4 / 3;
}

#leimu-tovar-root .tovar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#leimu-tovar-root .tovar-photo .product-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

#leimu-tovar-root .tovar-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#leimu-tovar-root .tovar-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#leimu-tovar-root .tovar-features li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--ink);
}

#leimu-tovar-root .tovar-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/*
 * Дозировка — короткой плашкой по содержимому, а не полосой во всю ширину.
 *
 * На карточке это узкая пилюля внутри колонки. Растянутая на ширину страницы,
 * она читается как серая разделительная полоса — то есть как элемент,
 * которого в этом дизайне нет.
 */
#leimu-tovar-root .tovar-dose {
  align-self: flex-start;
  background: var(--line-2);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: var(--t4);
  font-weight: 600;
  color: var(--ink);
}

#leimu-tovar-root .tovar-dose strong {
  font-weight: 700;
}

#leimu-tovar-root .tovar-note {
  font-size: var(--t4);
  color: var(--ink-soft);
  margin: 0;
}

/*
 * Кнопка — та же, что на карточке товара: мелкая прописная надпись
 * и оранжевый фон. Отличие одно: по содержимому, а не во всю ширину —
 * на широкой странице кнопка во всю колонку выглядит великаном.
 */
#leimu-tovar-root .tovar-order {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: var(--t4);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .25s var(--ease);
}

#leimu-tovar-root .tovar-order:hover {
  background: #D86B22;
}

#leimu-tovar-root .tovar-order .arr {
  width: 16px;
  height: 1px;
  background: #fff;
  transition: width .3s var(--ease);
}

#leimu-tovar-root .tovar-order:hover .arr {
  width: 26px;
}

@media (max-width: 860px) {
  #leimu-tovar-root .tovar-main {
    grid-template-columns: 1fr;
  }
}

/*
 * Разделы посадочной страницы: «Состав», «Фасовка», «Срок хранения».
 *
 * Названия придумывает админ, и их может быть сколько угодно — поэтому
 * простой список, а не сетка под заранее известные поля. Ширина текста
 * та же, что у описаний на других страницах: длинная строка не читается.
 */
#leimu-tovar-root .tovar-sections {
  margin-top: clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
  max-width: 74ch;
}

#leimu-tovar-root .tovar-section h2 {
  font-size: var(--t2);
  line-height: 1.25;
  margin: 0 0 10px;
}

#leimu-tovar-root .tovar-section p {
  font-size: var(--t3);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  white-space: pre-line;
}

/*
 * Серые полосы между блоками — убрать со всего сайта.
 *
 * Наследие старого сайта: каждый крупный блок отчёркивался тонкой линией
 * сверху или снизу. На странице подряд их выходит пять-шесть, и читаются они
 * не как разделение, а как обрывы страницы. Блоки и так разделены воздухом.
 *
 * Линии ВНУТРИ списков остаются: между вопросами и ответами, между строками
 * контактов, между ссылками на соцсети. Там линия разделяет строки — без неё
 * список слипается в сплошной текст. Это разные вещи, и путать их нельзя.
 *
 * `!important` здесь по делу: правила заданы от обёрток страниц
 * (`#leimu-smesi-root .related`), обёрток три десятка, и перебить их
 * иначе — значит перечислить все и не забыть дописывать новые.
 */
body.leimu-test-page .lineup-head,
body.leimu-test-page .related,
body.leimu-test-page .iso-section,
body.leimu-test-page .faq,
body.leimu-test-page .contacts,
body.leimu-test-page .group,
body.leimu-test-page .production-section,
body.leimu-test-page .socials-block,
body.leimu-test-page .pagination {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/*
 * Выделения в статьях.
 *
 * Оформление перенесённых статей написано от `<b>`, но семь статей из прежней
 * админки WordPress набраны `<strong>` — там так вышло само, и выделения в них
 * с переноса стоят без фирменного цвета. Редактор в кабинете отдаёт `<b>`,
 * и всё же оба тега должны выглядеть одинаково: иначе оформление статьи
 * зависит от того, каким редактором её когда-то писали.
 */
#leimu-article-root .a-body li strong,
#leimu-article-root .a-body p strong {
  color: var(--ink);
  font-weight: 700;
}

#leimu-article-root h2 strong,
#leimu-article-root h3 strong {
  color: var(--orange);
  font-weight: 600;
}

/*
 * Выделения в правовых документах — то же, что и в статьях.
 *
 * Оформление документов написано от `<b>`, а тексты политик и согласий
 * перенесены из прежней админки набранными `<strong>`. Редактор в кабинете
 * отдаёт `<b>`, и всё же оба тега обязаны выглядеть одинаково: иначе
 * оформление зависит от того, каким редактором документ когда-то правили.
 */
#leimu-doc-root .a-body li strong,
#leimu-doc-root .a-body p strong {
  color: var(--ink);
  font-weight: 700;
}

#leimu-doc-root h2 strong,
#leimu-doc-root h3 strong {
  color: var(--orange);
  font-weight: 600;
}

/*
 * Форма сообщения о нарушении на антикоррупционной странице.
 *
 * Раньше её рисовал плагин WordPress своими стилями; на новом сайте плагина
 * нет, и поля остались браузерными — серые прямоугольники посреди документа.
 * Оформление то же, что у остальных форм сайта.
 */
#leimu-doc-root .report-form {
  margin: 32px 0 8px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line-2);
}

#leimu-doc-root .report-form p { margin: 0 0 18px; }
#leimu-doc-root .report-form p:last-child { margin-bottom: 0; }

#leimu-doc-root .report-form label {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

#leimu-doc-root .report-form input[type="text"],
#leimu-doc-root .report-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  line-height: 1.6;
}

#leimu-doc-root .report-form textarea { resize: vertical; min-height: 180px; }

#leimu-doc-root .report-form input[type="text"]:focus,
#leimu-doc-root .report-form textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: -1px;
  border-color: transparent;
}

#leimu-doc-root .report-form input[type="submit"] {
  width: auto;
  padding: 14px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}

#leimu-doc-root .report-form input[type="submit"]:hover { opacity: 0.88; }

#leimu-doc-root .report-form em { font-size: 14px; color: var(--muted); }

/* Ответ после отправки: подтверждение вместо формы или объяснение над ней. */
#leimu-doc-root .report-done h3 { margin: 0 0 10px; }
#leimu-doc-root .report-done p { margin: 0; }

#leimu-doc-root .report-error {
  margin: 32px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(240, 130, 54, 0.12);
  color: var(--ink);
  font-weight: 600;
}

/*
 * Стык оранжевого первого экрана и белого текста на страницах документов.
 *
 * Переход сделан так: белый блок текста поднят на 5vh вверх и заходит
 * на оранжевый скруглёнными углами. У первого экрана при этом не должно быть
 * нижнего отступа — он гасит этот подъём, и вместо перехода получается
 * белая полоса, а под ней отдельный блок со скруглением.
 *
 * Отступ приехал из файлов документов, где он стоит у каждого. Раньше его
 * случайно обнулял сброс `#leimu-doc-root *` — вместе с отступами сверху,
 * из-за чего заголовок наезжал на меню. Теперь отступы сверху на месте,
 * а нижний убран здесь, прицельно.
 */
#leimu-doc-root #leimu-hybrid-hero { margin-bottom: 0; }


/* Ползунок прокрутки.
   Системный серый брусок — единственное на сайте, что не из его палитры,
   и на оранжевой шапке он виден особенно. Цвета записаны числами, не
   переменными: внутри ::-webkit-scrollbar-* переменные не раскрываются
   (проверено на кабинете — бегунок оставался без цвета). Firefox читает
   scrollbar-color и ширину отдельно. */
html { scrollbar-width: thin; scrollbar-color: #F08236 #F5F1EA; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F5F1EA; }
::-webkit-scrollbar-thumb { background: #F08236; border-radius: 999px; border: 2px solid #F5F1EA; }
::-webkit-scrollbar-thumb:hover { background: #D96F25; }