/* =====================================================================
   ЛЕНДИНГ КОРПОРАТИВНЫХ ПОДАРКОВ — mangal-v.ru
   ---------------------------------------------------------------------
   Все селекторы обязаны начинаться с .lp или .lp-. Голых h2 {}, .btn {},
   .card {} быть не должно: на странице живут Bootstrap 4.5 и styles.css
   шаблона, любой общий селектор сломает шапку или подвал.

   Обратная сторона тоже есть: стили шаблона протекают внутрь лендинга.
   У сайта прописаны a { color:#fff; font-size:16px }, h1 { font-size:55px },
   h2 { font-size:20px } голыми селекторами по тегам. Поэтому ниже идёт
   локальный сброс — специфичность .lp h1 выше голого h1, обходимся
   без !important.

   СОДЕРЖАНИЕ
     1. Переменные
     2. Сброс внутри .lp
     3. Контейнер и секции
     4. Типографика
     5. Кнопки
     6. Плейсхолдеры незаполненного контента
     7. Формы
     8. БЛОК 1. Первый экран
     9. БЛОК 2. Сроки производства
    10. БЛОК 3. Почему напрямую с производства
    11. БЛОК 4. Каталог наборов
    12. БЛОК 6. Брендирование
    13. БЛОК 5. Расчёт бюджета
    14. БЛОК 7. Портфолио брендирования
    15. БЛОК 8. Отзывы юрлиц
    16. БЛОК 9. Как проходит заказ
    17. БЛОК 10. Условия для юрлиц
    18. БЛОК 11. Финальный
    99. Доступность
   ===================================================================== */


/* =====================================================================
   1. ПЕРЕМЕННЫЕ
   ---------------------------------------------------------------------
   Объявлены в .lp, а не в :root — чтобы не подсунуть свои значения
   шапке и подвалу. Палитра целиком взята из styles.css шаблона.
   ===================================================================== */

.lp {
    /* Цвета */
    --lp-bg:            #232323;  /* фон страницы, как body сайта       */
    --lp-surface:       #2D2D2D;  /* плитки и светлые полосы            */
    --lp-sunken:        #212529;  /* утопленные зоны: таблицы, поля     */
    --lp-accent:        #FF6C19;  /* главный акцент сайта               */
    --lp-accent-hover:  #DF130F;  /* акцент при наведении               */
    --lp-text:          #FFFFFF;
    /* Вторичный текст. Был #858585, но на утопленном фоне #212529 он
       давал контраст 4.18 при норме 4.5 — на телефоне в солнечный день
       такие подписи не читаются. #949494 тоже из палитры сайта и даёт
       от 4.54 до 5.18 на всех трёх фонах страницы. */
    --lp-text-dim:      #949494;  /* вторичный текст, подписи           */
    --lp-line:          #4D4D4D;  /* границы и разделители              */

    /* Белые карточки — как в каталоге боевого сайта. Цвета текста
       оттуда же: заголовок и цена #3F3F3F, подписи #6C757D,
       значения характеристик #343A40. */
    --lp-white:         #FFFFFF;
    --lp-on-white:      #3F3F3F;
    --lp-on-white-dim:  #6C757D;
    --lp-on-white-val:  #343A40;
    --lp-white-line:    #E9ECEF;

    /* Отступы. Ритм кратен 8px. */
    --lp-gap-xs:  8px;
    --lp-gap-sm: 16px;
    --lp-gap-md: 24px;
    --lp-gap-lg: 40px;
    --lp-gap-xl: 48px;            /* от шапки блока до его содержимого  */
    --lp-section: 96px;           /* между блоками, на мобильных 56px   */

    /* Геометрия.
       Скруглений нет нигде: на боевом сайте их нет ни у кнопок
       (.btn-primary — border-radius: 0), ни у карточек товаров,
       ни у полей форм. Переменная оставлена, чтобы не искать
       по файлу, если решение когда-нибудь поменяется. */
    --lp-radius: 0;
    --lp-radius-field: 0;
    --lp-container: 1180px;
    --lp-pad: 20px;
}

@media (max-width: 767.98px) {
    .lp {
        --lp-section: 56px;
        --lp-pad: 16px;
    }
}


/* =====================================================================
   2. СБРОС ВНУТРИ .lp
   ===================================================================== */

.lp {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-text);
    background: var(--lp-bg);
    /* Ничто изнутри не должно вылезать за пределы контейнера */
    overflow-x: hidden;
}

.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}

/* Сброс завёрнут в :where() намеренно.
   Без него `.lp p { margin: 0 }` имеет специфичность (0,1,1) и молча
   бьёт `.lp-hero__lead { margin-top: 24px }` — это (0,1,0). Отступы
   обнулялись, и блоки слипались.

   `.lp :where(p)` весит (0,1,0): этого хватает, чтобы перебить голые
   `p {}` Bootstrap и шаблона, и ровно столько же, сколько у классов
   лендинга. Ничья решается порядком в файле, а компоненты идут ниже
   сброса — поэтому выигрывают они. Не переставляйте секции местами. */
.lp :where(h1, h2, h3, h4) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    line-height: 1.2;
}

.lp :where(p) {
    margin: 0;
}

.lp :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp :where(dl, dd) {
    margin: 0;
}

.lp :where(a) {
    color: var(--lp-accent);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp :where(a):hover {
    color: var(--lp-accent-hover);
}

.lp img,
.lp svg {
    max-width: 100%;
}

.lp img {
    display: block;
    height: auto;
}


/* ---------------------------------------------------------------------
   2.1. НЕЙТРАЛИЗАЦИЯ СТИЛЕЙ ШАБЛОНА
   ---------------------------------------------------------------------
   Правила ниже не оформляют лендинг, а откатывают то, что шаблон
   навязывает голыми селекторами. Каждое — по конкретному найденному
   случаю, не «на всякий случай».
   --------------------------------------------------------------------- */

/* В styles.css (строка 1547) есть глобальное:

       input[type="checkbox"]:checked,
       input[type="checkbox"]:not(:checked) { position: absolute; left: -9999px; }

   Сайт так прячет настоящий чекбокс и рисует свой через label::before.
   У нас чекбокс лежит внутри label, поэтому их оформление не подхватится,
   а вот -9999px сработает — и галочка согласия на обработку персональных
   данных просто исчезнет с экрана. Без неё форма незаконна.

   Повторяем форму их селектора, чтобы специфичности хватило: у них
   (0,2,1), у нас (0,3,1). Обходимся без !important. */
.lp input[type="checkbox"]:checked,
.lp input[type="checkbox"]:not(:checked) {
    position: static;
    left: auto;
}

/* styles.css, строка 2339: form { margin-bottom: 15px } на мобильных.
   Отступы внутри лендинга считаем сами. */
.lp form {
    margin-bottom: 0;
}

/* styles.css, строка 16: a:hover { text-decoration: none !important }.
   Единственный случай во всём файле, где приходится отвечать тем же:
   перебить !important можно только !important. Подчёркивание при
   наведении должно оставаться — по цвету ссылку отличают не все.
   Кнопки исключены: они ссылки только по разметке, не по смыслу. */
.lp a:not(.lp-btn):hover {
    text-decoration: underline !important;
}


/* =====================================================================
   3. КОНТЕЙНЕР И СЕКЦИИ
   ---------------------------------------------------------------------
   Свой контейнер, а не бутстраповский .container: у Bootstrap на этом
   сайте свои переопределения, лезть туда незачем.
   ===================================================================== */

.lp-container {
    width: 100%;
    max-width: var(--lp-container);
    margin: 0 auto;
    padding-left: var(--lp-pad);
    padding-right: var(--lp-pad);
}

/* Отступ симметричный, по половине сверху и снизу: между содержимым
   соседних секций получается ровно --lp-section, и при этом цветная
   полоса не липнет к своему содержимому. */
.lp-section {
    padding-top: calc(var(--lp-section) / 2);
    padding-bottom: calc(var(--lp-section) / 2);
}

/* ---------------------------------------------------------------------
   ЧЕРЕДОВАНИЕ ФОНОВ
   ---------------------------------------------------------------------
   Тринадцать блоков подряд на одном тёмном фоне сливаются в сплошное
   полотно: глазу не за что зацепиться, и человек не понимает, где
   кончается одна мысль и начинается другая. Полосы дают ритм и
   заодно показывают длину страницы.

   Цвета только те, что есть на боевом сайте: #232323 (фон body),
   #2D2D2D и #212529. Ничего нового не придумано.

   Полоса на всю ширину окна — секция уже блочная, содержимое
   ограничивает .lp-container внутри.
   --------------------------------------------------------------------- */

.lp-section--panel {
    padding-top: calc(var(--lp-section) * 0.66);
    padding-bottom: calc(var(--lp-section) * 0.66);
    background: var(--lp-surface);
}

/* Финальный блок — самый тёмный. Это конец страницы и место, где
   принимают решение: смена фона отделяет его от всего остального. */
.lp-section--closing {
    padding-top: calc(var(--lp-section) * 0.66);
    padding-bottom: calc(var(--lp-section) * 0.66);
    background: var(--lp-sunken);
}

/* Плитки и карточки внутри полосы уходят на тон вниз: их обычный фон
   совпадает с фоном полосы, и без этого они бы просто исчезли. */
.lp-section--panel .lp-tile,
.lp-section--panel .lp-method,
.lp-section--panel .lp-review,
.lp-section--panel .lp-calc__controls,
.lp-section--panel .lp-terms__item {
    background: var(--lp-sunken);
}

/* В финальном блоке наоборот — карточка менеджера светлее фона */
.lp-section--closing .lp-manager {
    background: var(--lp-surface);
}


/* =====================================================================
   4. ТИПОГРАФИКА
   ---------------------------------------------------------------------
   Размеры через clamp(), а не vw. Чистый vw у шаблона как раз и дал
   проблему с меню: размер жёстко привязан к ширине окна и на
   промежуточных экранах уезжает.
   ===================================================================== */

.lp h1,
.lp-h1 {
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 900;
    line-height: 1.15;
}

.lp h2,
.lp-h2 {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.2;
}

.lp h3,
.lp-h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* Подзаголовок секции — идёт сразу под h2 и относится к нему.
   Поэтому сверху отступ небольшой, а воздух уходит вниз, к содержимому:
   так видно, что подзаголовок принадлежит заголовку, а не контенту. */
.lp-section__lead {
    margin-top: var(--lp-gap-sm);
    max-width: 70ch;
    color: var(--lp-text-dim);
}

/* Крупные цифры: показатели, цены */
.lp-num {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    /* Цифры одной ширины — колонки цен не пляшут */
    font-variant-numeric: tabular-nums;
}

.lp-small {
    font-size: 13px;
    line-height: 1.5;
    color: var(--lp-text-dim);
}

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


/* =====================================================================
   5. КНОПКИ
   ---------------------------------------------------------------------
   Главная повторяет .btn-warning шаблона: заливка #FF6C19, радиус 15px,
   hover #DF130F. Своим классом, чтобы не трогать бутстраповские.
   ===================================================================== */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-gap-xs);
    padding: 16px 28px;
    border: 1px solid transparent;
    border-radius: var(--lp-radius);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lp-btn--main {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

.lp-btn--main:hover {
    background: var(--lp-accent-hover);
    border-color: var(--lp-accent-hover);
    color: #fff;
    text-decoration: none;
}

.lp-btn--ghost {
    background: transparent;
    border-color: var(--lp-accent);
    color: var(--lp-accent);
}

.lp-btn--ghost:hover {
    background: var(--lp-accent);
    color: #fff;
    text-decoration: none;
}

/* Внутри оранжевого блока «Сроки» кнопка инвертируется */
.lp-btn--onaccent {
    background: var(--lp-bg);
    border-color: var(--lp-bg);
    color: #fff;
}

.lp-btn--onaccent:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 575.98px) {
    /* На узких экранах кнопки на всю ширину — попасть пальцем проще */
    .lp-btn {
        width: 100%;
    }
}


/* =====================================================================
   6. ПЛЕЙСХОЛДЕРЫ НЕЗАПОЛНЕННОГО КОНТЕНТА
   ---------------------------------------------------------------------
   Намеренно кричащие. Задача — чтобы такой блок было невозможно
   не заметить и случайно выложить в прод.
   ===================================================================== */

.lp-ph {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed var(--lp-accent);
    background: rgba(255, 108, 25, .12);
    color: var(--lp-accent);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    white-space: normal;
}

/* Вариант на оранжевом фоне — там оранжевая рамка не читается */
.lp-ph--onaccent {
    border-color: var(--lp-bg);
    background: rgba(35, 35, 35, .14);
    color: var(--lp-bg);
}

/* Плейсхолдер на целый блок.
   Нужен там, где не хватает не одного значения, а таблицы данных:
   вешать по плашке на каждое из 50 полей каталога — значит сделать
   блок нечитаемым и бессмысленным для приёмки. */
.lp-ph-block {
    padding: var(--lp-gap-md);
    border: 2px dashed var(--lp-accent);
    border-radius: var(--lp-radius);
    background: rgba(255, 108, 25, .1);
    color: var(--lp-accent);
    font-size: 14px;
    line-height: 1.6;
}

.lp-ph-block__title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lp-ph-block__list {
    margin-top: var(--lp-gap-xs);
}

.lp-ph-block__list li::before {
    content: '— ';
}

.lp-ph-block--spaced {
    margin-top: var(--lp-gap-lg);
}

/* Незаполненное значение внутри карточки: короткий прочерк
   с пунктиром, чтобы пустоту было видно, но она не кричала */
.lp-empty {
    color: var(--lp-accent);
    border-bottom: 1px dashed var(--lp-accent);
}


/* =====================================================================
   7. ФОРМЫ
   ---------------------------------------------------------------------
   Разметка максимально простая: на следующем этапе её подключат
   к существующему AJAX-обработчику сайта.
   ===================================================================== */

.lp-form {
    display: grid;
    gap: var(--lp-gap-md);
}

.lp-form__grid {
    display: grid;
    gap: var(--lp-gap-sm);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lp-field {
    display: grid;
    gap: 6px;
}

/* Комментарий занимает всю ширину сетки */
.lp-field--wide {
    grid-column: 1 / -1;
}

.lp-field__label {
    font-size: 13px;
    color: var(--lp-text-dim);
}

.lp-field__req {
    color: var(--lp-accent);
}

.lp-field__input,
.lp-field__area {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-field);
    background: var(--lp-sunken);
    color: var(--lp-text);
    font-family: inherit;
    /* Ровно 16px и не меньше: на iOS поле мельче зумит всю страницу
       при фокусе. На форме заявки это стоит заявок. */
    font-size: 16px;
    line-height: 1.4;
}

.lp-field__area {
    min-height: 96px;
    resize: vertical;
}

.lp-field__input::placeholder,
.lp-field__area::placeholder {
    color: #646464;
}

.lp-field__input:focus,
.lp-field__area:focus {
    border-color: var(--lp-accent);
    outline: none;
}

/* Переключатель «что прислать» */
.lp-intent {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-gap-sm);
    margin: 0;
    padding: 0;
    border: 0;
}

.lp-intent__legend {
    padding: 0;
    margin-bottom: var(--lp-gap-xs);
    font-size: 13px;
    color: var(--lp-text-dim);
    float: left;   /* иначе legend ломает flex-раскладку fieldset */
    width: 100%;
}

.lp-intent__option {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-gap-xs);
    padding: 10px 16px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    cursor: pointer;
}

.lp-intent__option:hover {
    border-color: var(--lp-accent);
}

.lp-intent__radio {
    width: 16px;
    height: 16px;
    accent-color: var(--lp-accent);
    cursor: pointer;
}

/* Выбранный вариант подсвечивается — :has поддержан во всех
   актуальных браузерах, а где нет, останется обычная рамка */
.lp-intent__option:has(.lp-intent__radio:checked) {
    border-color: var(--lp-accent);
    background: rgba(255, 108, 25, .1);
}

/* Согласие на обработку персональных данных */
.lp-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-gap-xs);
    cursor: pointer;
}

.lp-consent__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--lp-accent);
    cursor: pointer;
}

.lp-consent__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--lp-text-dim);
}

.lp-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lp-gap-md);
}

/* Сообщение об ошибке и заглушка успеха */
.lp-form__error {
    color: var(--lp-accent);
    font-size: 13px;
}

.lp-form__error:empty {
    display: none;
}

.lp-form__done {
    padding: var(--lp-gap-md);
    border: 1px solid var(--lp-accent);
    border-radius: var(--lp-radius);
    background: rgba(255, 108, 25, .1);
}

.lp-form__done[hidden] {
    display: none;
}

.lp-form__done-title {
    font-weight: 700;
    color: var(--lp-accent);
}


/* =====================================================================
   8. БЛОК 1. ПЕРВЫЙ ЭКРАН
   ===================================================================== */

.lp-hero {
    padding-top: var(--lp-gap-lg);
}

.lp-hero__grid {
    display: grid;
    gap: var(--lp-gap-lg);
    align-items: center;
    grid-template-columns: 7fr 5fr;
}

.lp-hero__lead {
    margin-top: var(--lp-gap-md);
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--lp-text-dim);
}

/* Плашка про минимальный заказ */
.lp-hero__note {
    display: inline-block;
    margin-top: var(--lp-gap-md);
    padding: 10px 16px;
    border-left: 3px solid var(--lp-accent);
    background: var(--lp-surface);
    font-size: 15px;
}

/* Три показателя */
/* minmax(0, 1fr), а не 1fr: у 1fr минимум — min-content, и подпись
   «гравировка, тиснение, DTF-печать» раздвигала свою колонку за счёт
   соседних. Разделители слева при этом стояли на разном расстоянии. */
.lp-facts {
    display: grid;
    gap: var(--lp-gap-sm);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--lp-gap-xl);
}

.lp-fact {
    padding-left: var(--lp-gap-sm);
    border-left: 1px solid var(--lp-line);
}

/* Свой кегль, меньше общего .lp-num: показатели давно перестали быть
   числами — «3 способа», «2–3 недели», «от 684 ₽». В сороковом кегле
   такая строка не влезает в свою треть первого экрана и обрезается.
   overflow-wrap — страховка: значения задаются в админке.

   Второе уменьшение, 19 августа. Колонка показателя шире 187 px
   не становится ни на каком экране, а «2–3 недели» в тридцатом кегле
   просит 189 px — и разваливалось на две строки на 1440 и шире,
   впритык проходило на 992. Замерено на девяти ширинах от 320 до 1920:
   в 28 кегле самое длинное значение просит 176 px, запас 11 px.
   Нижнюю границу не трогаем — на телефоне места вдвое больше нужного. */
.lp-fact__value {
    display: block;
    color: var(--lp-accent);
    font-size: clamp(22px, 2.1vw, 28px);
    overflow-wrap: anywhere;
}

/* Плейсхолдер вместо цифры не должен раздувать строку */
.lp-fact__value .lp-ph {
    font-size: 13px;
    font-weight: 700;
}

.lp-fact__label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--lp-text-dim);
}

.lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-gap-sm);
    margin-top: var(--lp-gap-lg);
}

.lp-hero__media img {
    width: 100%;
    border-radius: var(--lp-radius);
}

/* --- Форма первого экрана --- */

.lp-lead-form {
    margin-top: var(--lp-section);
    padding: var(--lp-gap-lg);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

.lp-lead-form__title {
    margin-bottom: var(--lp-gap-lg);
}

@media (max-width: 991.98px) {
    .lp-hero__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .lp-facts {
        grid-template-columns: 1fr;
    }

    .lp-lead-form {
        padding: var(--lp-gap-md) var(--lp-gap-sm);
    }
}


/* =====================================================================
   9. БЛОК 2. СРОКИ ПРОИЗВОДСТВА
   ---------------------------------------------------------------------
   Единственный цветной блок на всей странице. Снабженец, открыв
   страницу, первым делом ищет «успею ли» — пусть глаз находит это сам.
   Если раскрасить пять блоков, не выделится ни один.

   Оранжевый работает подложкой, а сроки лежат на нём тёмными
   карточками: появляется передний и задний план. Сплошное оранжевое
   пятно с тёмным текстом читалось хуже.
   ===================================================================== */

.lp-deadline__inner {
    padding: var(--lp-gap-lg);
    border-radius: var(--lp-radius);
    background: var(--lp-accent);
    color: var(--lp-bg);
}

.lp-deadline__title {
    color: var(--lp-bg);
}

.lp-deadline__lead {
    max-width: 70ch;
    margin-top: var(--lp-gap-xs);
    font-size: 15px;
}

.lp-schedule {
    display: grid;
    gap: var(--lp-gap-sm);
    /* Пять сроков в ряд не помещаются даже на широком экране: пусть
       раскладываются сами, по месту, а не ломаются по контрольным точкам */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: var(--lp-gap-xl);
    list-style: none;
}

.lp-schedule__item {
    display: flex;
    flex-direction: column;
    padding: var(--lp-gap-md);
    border-radius: var(--lp-radius);
    background: var(--lp-bg);
    color: var(--lp-text);
}

/* Срок крупно: это ответ на вопрос «успею ли», за ним и пришли.
   clamp меньше, чем у .lp-num по умолчанию: «2–3 недели» — не число,
   и в 40 пикселей строка не укладывается в узкую карточку.

   overflow-wrap здесь не про красоту: срок задаётся в админке, и одно
   длинное слово без пробелов иначе вылезает за карточку молча. */
.lp-schedule__value {
    font-size: clamp(20px, 2.2vw, 26px);
    color: var(--lp-accent);
    overflow-wrap: anywhere;
}

.lp-schedule__name {
    margin-top: var(--lp-gap-xs);
    font-size: 15px;
    font-weight: 700;
}

.lp-schedule__note {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lp-text-dim);
}

.lp-deadline__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lp-gap-md);
    margin-top: var(--lp-gap-xl);
}

.lp-deadline__foot-text {
    flex: 1 1 320px;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .lp-deadline__inner {
        padding: var(--lp-gap-md) var(--lp-gap-sm);
    }
}


/* =====================================================================
   10. БЛОК 3. ПОЧЕМУ НАПРЯМУЮ С ПРОИЗВОДСТВА
   ===================================================================== */

.lp-tiles {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--lp-gap-xl);
}

.lp-tile {
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

.lp-tile__icon {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: var(--lp-gap-md);
    color: var(--lp-accent);
}

.lp-tile__text {
    margin-top: 12px;
    font-size: 15px;
    color: var(--lp-text-dim);
}

/* Плейсхолдер внутри плитки — отдельной строкой, не в потоке текста */
.lp-tile__text .lp-ph {
    margin-top: 12px;
}

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

@media (max-width: 559.98px) {
    .lp-tiles {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   11. БЛОК 4. КАТАЛОГ НАБОРОВ
   ---------------------------------------------------------------------
   Карточки одинаковые до последнего пикселя: на следующем этапе этот
   список отдаст bitrix:catalog.section, и уникальные стили у отдельных
   карточек пришлось бы выпиливать. Ничего вроде .lp-card:first-child
   или .lp-card--big здесь быть не должно.
   ===================================================================== */

.lp-cards {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--lp-gap-xl);
}

/* Белая карточка на тёмной странице — ровно как в каталоге боевого
   сайта: .product-item там #FFFFFF, текст #3F3F3F, подписи
   характеристик #6C757D, значения #343A40, всё по центру, кроме
   таблицы характеристик. Скруглений нет.

   Заодно это единственное светлое пятно на странице: каталог —
   блок, ради которого сюда и приходят, и белое на тёмном
   притягивает взгляд сильнее любой рамки. */
.lp-card {
    display: flex;
    flex-direction: column;
    padding: 15px 15px 20px;
    background: var(--lp-white);
    color: var(--lp-on-white);
    text-align: center;
}

.lp-card__art {
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-on-white-dim);
}

.lp-card__media {
    margin-top: var(--lp-gap-xs);
}

.lp-card__media img {
    width: 100%;
    height: 160px;
    /* contain, а не cover: фото товара нельзя обрезать по краям,
       на сайте тоже background-size: contain */
    object-fit: contain;
    object-position: center;
}

.lp-card__title {
    margin-top: var(--lp-gap-sm);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--lp-on-white);
}

.lp-card__price {
    display: block;
    margin-top: var(--lp-gap-xs);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--lp-on-white);
    font-variant-numeric: tabular-nums;
}

.lp-card__specs {
    margin-top: var(--lp-gap-sm);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}

.lp-card__spec {
    display: flex;
    justify-content: space-between;
    gap: var(--lp-gap-xs);
    padding: 5px 0;
    border-top: 1px solid var(--lp-white-line);
}

.lp-card__spec dt {
    flex: 1 1 auto;
    font-weight: 400;
    color: var(--lp-on-white-dim);
}

.lp-card__spec dd {
    flex: 0 0 auto;
    text-align: right;
    color: var(--lp-on-white-val);
    font-variant-numeric: tabular-nums;
}

/* Прижимаем кнопку к низу — карточки в ряду разной высоты,
   а низ у них должен быть общим */
.lp-card__foot {
    margin-top: auto;
    padding-top: var(--lp-gap-md);
}

.lp-card__btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
}

/* На белом фоне прозрачная кнопка с оранжевой рамкой читается плохо:
   заливаем сразу — это главное действие в карточке. */
.lp-card__btn.lp-btn--ghost {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

.lp-card__btn.lp-btn--ghost:hover {
    background: var(--lp-accent-hover);
    border-color: var(--lp-accent-hover);
}

/* Состояние «в расчёте»: набор выбран, кнопка ведёт к расчёту. */
.lp-card__btn.lp-card__btn--on.lp-btn--ghost {
    background: transparent;
    border-color: var(--lp-on-white-dim);
    color: var(--lp-on-white-dim);
}

.lp-catalog__foot {
    margin-top: var(--lp-gap-lg);
}

@media (max-width: 1199.98px) {
    .lp-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* На телефоне каталог остаётся в две колонки, а не в одну.
   В одну десять карточек с полным списком характеристик давали
   семь экранов подряд — снабженец до таблицы цен и заявки просто
   не доезжал. Две колонки на телефоне — то, как сейчас устроены
   Ozon, Wildberries и Яндекс Маркет: к этому люди привыкли.
   Название при этом обрезаем тремя строками, иначе длинные
   наименования растягивают карточку сильнее фотографии. */
@media (max-width: 559.98px) {
    .lp-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lp-gap-sm);
    }

    .lp-card {
        padding: 12px 10px 16px;
    }

    .lp-card__art {
        font-size: 12px;
    }

    .lp-card__media img {
        height: 120px;
    }

    .lp-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lp-card__specs {
        font-size: 11px;
    }

    /* Не меньше 44px по высоте: это минимальный размер цели,
       по которой уверенно попадают пальцем */
    .lp-card__btn {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 13px;
    }
}


/* ---------------------------------------------------------------------
   11.1. ТАБЛИЦА ХАРАКТЕРИСТИК ВСЕХ НАБОРОВ
   ---------------------------------------------------------------------
   Свёрнутый <details> под сеткой карточек. Восемь колонок помещаются
   в контейнер 1180px, на планшете и телефоне — нет. Поэтому таблица
   едет вбок внутри своего контейнера: страница вбок ехать не должна,
   иначе весь лендинг начинает болтаться под пальцем.

   Первая колонка залипает. Без неё, доехав до «Размера шампура»,
   уже не понять, чья это строка: артикулы отличаются двумя буквами.

   border-collapse: separate — намеренно. При collapse границы общие,
   и у залипающих ячеек они остаются на месте при прокрутке: давняя
   особенность браузеров, лечится только раздельными границами.
   --------------------------------------------------------------------- */

.lp-specs {
    margin-top: var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    background: var(--lp-surface);
}

/* display: list-item возвращает треугольник раскрытия: normalize.css,
   который тянет Битрикс, ставит summary { display: block }, и маркер
   пропадает — остаётся строка, по которой непонятно, что можно нажать.
   Класс, а не голый summary: специфичности (0,1,0) хватает, чтобы
   перебить его, не заводя !important.
   Сам маркер оставляем браузеру: он сам переключает его на «открыто»
   и рисует так, как принято в этой системе. */
.lp-specs__summary {
    display: list-item;
    padding: 16px var(--lp-gap-md);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.lp-specs__summary:hover {
    color: var(--lp-accent);
}

.lp-specs__count {
    font-weight: 400;
    color: var(--lp-text-dim);
}

/* Показывается только там, где таблица действительно не помещается */
.lp-specs__hint {
    display: none;
    padding: 0 var(--lp-gap-md) var(--lp-gap-xs);
}

.lp-specs__scroll {
    overflow-x: auto;
    /* Инерционная прокрутка внутри блока на iOS */
    -webkit-overflow-scrolling: touch;
}

.lp-specs-table {
    /* Ниже этой ширины колонки начинают слипаться — включается прокрутка */
    min-width: 900px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    /* Цифры одной ширины — колонки размеров и цен не пляшут */
    font-variant-numeric: tabular-nums;
}

.lp-specs-table th,
.lp-specs-table td {
    padding: 10px var(--lp-gap-sm);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--lp-line);
    /* Значения не переносим: «650 × 110 × 70 мм» в три строки нечитаемо */
    white-space: nowrap;
}

.lp-specs-table thead th {
    font-size: 13px;
    font-weight: 400;
    color: var(--lp-text-dim);
    background: var(--lp-sunken);
    /* А заголовки переносим: иначе «Рабочая часть шампура» одной строкой
       раздувает колонку вдвое шире её значений */
    white-space: normal;
}

/* Артикул залипает у левого края — и в шапке, и в строках: первая
   ячейка строки всегда th. Фон непрозрачный, иначе под колонкой будут
   просвечивать уезжающие ячейки. Отделяем её тенью, а не границей:
   тень не занимает места в раскладке и не сдвигает остальные колонки. */
.lp-specs-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--lp-surface);
    box-shadow: 1px 0 0 var(--lp-line);
}

/* Селектор длиннее соседнего намеренно: правило выше весит (0,2,1)
   и без этого перебило бы фон шапки */
.lp-specs-table thead th:first-child {
    background: var(--lp-sunken);
}

/* Название набора — единственная колонка, где перенос нужен: полные
   названия длинные, и без переноса таблица уезжает на два экрана.
   Селектор с тегом: у правила с nowrap выше специфичность (0,1,1),
   голого класса не хватило бы. */
.lp-specs-table td.lp-specs-table__name {
    width: 260px;
    white-space: normal;
}

.lp-specs-table__price {
    font-weight: 700;
}

/* Розница приглушена: главная цифра в этой таблице — оптовая цена */
.lp-specs-table__retail {
    color: var(--lp-text-dim);
}

/* У последней строки границы нет: её роль играет рамка блока */
.lp-specs-table tbody tr:last-child th,
.lp-specs-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 991.98px) {
    .lp-specs__hint {
        display: block;
    }
}

@media (max-width: 559.98px) {
    .lp-specs__summary {
        padding: 14px var(--lp-gap-sm);
        font-size: 15px;
    }

    .lp-specs__hint {
        padding-left: var(--lp-gap-sm);
        padding-right: var(--lp-gap-sm);
    }

    .lp-specs-table {
        font-size: 13px;
    }

    .lp-specs-table th,
    .lp-specs-table td {
        padding: 8px 10px;
    }
}


/* Полоса «в расчёте N наборов»: ответ на нажатие кнопки на карточке.
   Без неё нажатие выглядит так, будто ничего не произошло. */
.lp-catalog__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-gap-sm);
    margin-top: var(--lp-gap-md);
    padding: var(--lp-gap-sm) var(--lp-gap-md);
    border-left: 3px solid var(--lp-accent);
    background: var(--lp-surface);
}

.lp-catalog__chosen[hidden] {
    display: none;
}

.lp-catalog__chosen-text {
    font-size: 15px;
    font-weight: 700;
}

/* Карточка, уже попавшая в расчёт: кнопка залита акцентом, чтобы
   в сетке из восемнадцати карточек отмеченные были видны сразу */
.lp-card__btn--on {
    border-color: var(--lp-accent);
    background: var(--lp-accent);
    color: var(--lp-bg);
}


/* =====================================================================
   12. БЛОК 6. БРЕНДИРОВАНИЕ
   ---------------------------------------------------------------------
   Ключевой блок: ради него страница и существует, на текущем сайте
   такого нет.
   ===================================================================== */

/* --- Способы нанесения --- */

/* Колонок столько, сколько способов нанесения: их было четыре, стало три,
   а редактор может добавить и убрать. Жёсткое repeat(4, 1fr) оставляло
   в ряду пустую клетку. */
.lp-methods {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: var(--lp-gap-xl);
}

.lp-method {
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

.lp-method__icon {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: var(--lp-gap-md);
    color: var(--lp-accent);
}

.lp-method__where {
    margin-top: 6px;
    font-size: 13px;
    color: var(--lp-accent);
}

.lp-method__text {
    margin-top: 12px;
    font-size: 15px;
    color: var(--lp-text-dim);
}

/* --- Что нужно от вас / что делаем мы --- */

.lp-swap {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--lp-gap-lg);
}

.lp-swap__col {
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border-radius: var(--lp-radius);
    background: var(--lp-sunken);
}

/* Колонка исполнителя выделена рамкой: это то, что клиент получает
   бесплатно, и об этом стоит споткнуться взглядом */
.lp-swap__col--ours {
    border: 1px solid var(--lp-accent);
}

.lp-swap__title {
    font-size: 16px;
    font-weight: 700;
}

.lp-swap__list {
    margin-top: var(--lp-gap-sm);
    font-size: 15px;
}

.lp-swap__list li {
    position: relative;
    padding-left: 22px;
    margin-top: 10px;
}

.lp-swap__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--lp-accent);
}

.lp-swap__note {
    margin-top: var(--lp-gap-sm);
}

.lp-formats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-gap-xs);
    margin-top: var(--lp-gap-sm);
}

.lp-format {
    padding: 4px 10px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* --- Тираж и стоимость --- */

.lp-brand__terms {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--lp-gap-md);
}

.lp-term {
    padding: var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
}

.lp-term__label {
    display: block;
    font-size: 13px;
    color: var(--lp-text-dim);
}

.lp-term__value {
    display: block;
    margin-top: var(--lp-gap-xs);
}

/* --- Галерея работ ---
   Колонка от 300 px, а не от 240: на широком макете это даёт три плитки
   в ряд вместо четырёх. Фотографий в галерее шесть, четвёрка ломала их
   на 4 + 2, а в тесной плитке оттиск на коже уже не разглядеть — ради
   него блок и существует. */

.lp-gallery {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: var(--lp-gap-lg);
}

.lp-gallery__item {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
}

.lp-gallery__zoom {
    display: block;
    cursor: zoom-in;
}

.lp-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Просмотр фотографии во весь экран ---
   Оверлей создаёт скрипт и кладёт внутрь .lp — иначе до переменных
   с цветами он бы не дотянулся. z-index выше плашки cookie шаблона
   (у неё 1000) и выше шапки: перекрывать просмотр нечему.

   Разметку в шаблоне не держим: без скрипта её нечем открыть, а снимок
   и так доступен — плитка обёрнута ссылкой на полноразмерный файл. */

.lp-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* Фон непрозрачный, а не полупрозрачный, и это важно: у шаблона сайта
       поверх страницы висят светлая плашка cookie и оранжевая полоса
       «Минимальный заказ». Через фон с прозрачностью 8 % они просвечивали
       яркими прямоугольниками, хотя лежат ниже — z-index у оверлея выше. */
    background: #000000;
}

.lp-lightbox[hidden] {
    display: none;
}

.lp-lightbox__stage {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;              /* иначе картинка распирает флекс-колонку */
    padding: 56px 64px 8px;
}

.lp-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lp-lightbox__bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 64px 24px;
    text-align: center;
}

.lp-lightbox__caption {
    font-size: 15px;
    color: var(--lp-text);
}

.lp-lightbox__count {
    font-size: 13px;
    color: var(--lp-text-dim);
}

/* Кнопки. Прозрачные, но с ощутимой площадью нажатия: 44 px — минимум,
   при котором в них попадают пальцем. */
.lp-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--lp-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--lp-text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.lp-lightbox__btn:hover {
    background: var(--lp-accent);
}

.lp-lightbox__btn:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 2px;
}

.lp-lightbox__btn--close {
    top: 12px;
    right: 12px;
    font-size: 22px;
}

.lp-lightbox__btn--prev { top: 50%; left: 12px; transform: translateY(-50%); }
.lp-lightbox__btn--next { top: 50%; right: 12px; transform: translateY(-50%); }

/* Стрелки рисуем символами, а не картинками: одна лишняя загрузка
   на странице под рекламу лишняя. */
.lp-lightbox__btn--prev::before { content: '‹'; }
.lp-lightbox__btn--next::before { content: '›'; }
.lp-lightbox__btn--close::before { content: '✕'; }

@media (max-width: 575.98px) {
    .lp-lightbox__stage {
        padding: 56px 12px 8px;
    }

    /* Отступы по бокам — под стрелки, которые ниже уехали в эту же
       строку: без них длинная подпись заезжает под кнопки. */
    .lp-lightbox__bar {
        padding: 12px 72px 20px;
    }

    /* На телефоне стрелки уводим вниз, к подписи: посреди экрана они
       лежат прямо на фотографии и закрывают её углы. Листать можно
       и пальцем — свайп работает. */
    .lp-lightbox__btn--prev,
    .lp-lightbox__btn--next {
        top: auto;
        bottom: 12px;
        transform: none;
    }
}

.lp-gallery__caption {
    padding: 12px var(--lp-gap-sm);
    font-size: 13px;
    color: var(--lp-text-dim);
}

.lp-brand__sub {
    margin-top: var(--lp-section);
}

.lp-brand__sub-title {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
}

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

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

@media (max-width: 767.98px) {
    .lp-swap,
    .lp-brand__terms {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 559.98px) {
    .lp-methods,
    .lp-gallery {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   13. БЛОК 5. РАСЧЁТ БЮДЖЕТА
   ---------------------------------------------------------------------
   Слева состав заказа строками, справа итог. Считается на клиенте,
   цены приходят из тех же карточек каталога, что выше на странице.

   Строки рисует скрипт, поэтому здесь только их оформление: название
   позиции сверху во всю ширину, под ним количество, цена и сумма.
   ===================================================================== */

.lp-calc {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: 1fr 1fr;
    margin-top: var(--lp-gap-xl);
}

.lp-calc__controls,
.lp-calc__result {
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border-radius: var(--lp-radius);
}

.lp-calc__controls {
    border: 1px solid var(--lp-line);
    background: var(--lp-surface);
}

.lp-calc__result {
    border: 1px solid var(--lp-accent);
    background: var(--lp-sunken);
}

.lp-calc__title {
    font-size: 16px;
    font-weight: 700;
}

/* --- Состав заказа --- */

.lp-calc-lines {
    margin-top: var(--lp-gap-md);
    list-style: none;
}

/* Две строки на позицию: название сверху во всю ширину, цифры под ним.
   В одну строку не ставим ни на каком экране — названия наборов длинные,
   и колонка с ними либо съедает поле количества, либо рвётся по буквам.
   Ширины цифровых колонок фиксированные: столбик сумм читается сверху
   вниз, а не пляшет от длины чисел. */
.lp-calc-line {
    display: grid;
    align-items: center;
    gap: var(--lp-gap-xs) var(--lp-gap-sm);
    grid-template-columns: 92px minmax(96px, 1fr) 44px;
    padding: 10px 0;
    border-top: 1px solid var(--lp-line);
}

.lp-calc-line__name {
    grid-column: 1 / -1;
    /* Длинные названия наборов рвём по буквам: иначе одно слово
       «шампуров» растягивает колонку и ломает сетку */
    overflow-wrap: anywhere;
}

.lp-calc-line__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.lp-calc-line__qty .lp-field__input {
    padding: 8px 10px;
    text-align: center;
}

.lp-calc-line__sum {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lp-calc-line__price {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--lp-text-dim);
    font-variant-numeric: tabular-nums;
}

.lp-calc-line__sum {
    font-size: 16px;
    font-weight: 900;
}

/* Крестик убирает позицию из расчёта. 44 × 44 — не для красоты:
   при box-sizing: border-box внутренние отступы область нажатия
   не увеличивают, поэтому размер задан самой кнопке. */
.lp-calc-line__del {
    width: 44px;
    height: 44px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: transparent;
    color: var(--lp-text-dim);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lp-calc-line__del:hover {
    border-color: var(--lp-accent);
    color: var(--lp-accent);
}

.lp-calc__empty {
    margin-top: var(--lp-gap-md);
    padding: 12px var(--lp-gap-sm);
    border: 1px dashed var(--lp-line);
    font-size: 14px;
    color: var(--lp-text-dim);
}

.lp-calc__empty[hidden] {
    display: none;
}

/* --- Добавить набор из списка --- */

.lp-calc__pick {
    display: flex;
    align-items: flex-end;
    gap: var(--lp-gap-sm);
    margin-top: var(--lp-gap-md);
    padding-top: var(--lp-gap-md);
    border-top: 1px solid var(--lp-line);
}

.lp-calc__pick-field {
    flex: 1 1 auto;
    /* Без этого длинные названия в <select> растягивают флекс-строку
       и кнопка «Добавить» уезжает за край блока */
    min-width: 0;
}

.lp-calc__pick-btn {
    flex: 0 0 auto;
}

.lp-field__select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-field);
    background: var(--lp-sunken);
    color: var(--lp-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
}

.lp-calc__hint {
    margin-top: var(--lp-gap-sm);
}

/* Итоговая сумма — самое крупное число в блоке */
.lp-calc__total {
    display: block;
    margin-top: var(--lp-gap-md);
    color: var(--lp-accent);
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.lp-calc__rows {
    margin-top: var(--lp-gap-md);
    font-size: 15px;
}

.lp-calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lp-gap-sm);
    padding: 10px 0;
    border-top: 1px solid var(--lp-line);
}

.lp-calc__row dt {
    color: var(--lp-text-dim);
}

.lp-calc__row dd {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lp-calc__btn {
    width: 100%;
    margin-top: var(--lp-gap-md);
}

/* Предупреждение: тираж меньше минимального заказа или меньше тиража,
   с которого делаем нанесение */
.lp-calc__warn {
    margin-top: var(--lp-gap-sm);
    padding: 12px var(--lp-gap-sm);
    border-left: 3px solid var(--lp-accent);
    background: rgba(255, 108, 25, .1);
    font-size: 14px;
}

.lp-calc__warn[hidden] {
    display: none;
}

/* Форма расчёта раскрывается по кнопке — не занимает место зря */
.lp-calc-form {
    margin-top: var(--lp-gap-md);
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

.lp-calc-form[hidden] {
    display: none;
}

.lp-calc-form__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--lp-gap-md);
}

/* Сводка того, что уйдёт менеджеру вместе с заявкой */
.lp-calc-form__summary {
    padding: 12px var(--lp-gap-sm);
    border-radius: var(--lp-radius);
    background: var(--lp-sunken);
    font-size: 14px;
    margin-bottom: var(--lp-gap-md);
}

/* На планшете расчёт в одну колонку. В две обе половины становятся
   слишком узкими: в списке позиций сумма сжимается до нечитаемого,
   а в выпадающем списке наборов от названия остаётся «НЧУ-ШД-101 —
   Набор шам…». */
@media (max-width: 991.98px) {
    .lp-calc {
        grid-template-columns: 1fr;
    }
}

/* На телефоне у строки расчёта четыре колонки, и три из них
   фиксированной ширины. На 375 пикселях они вместе с боковыми
   отступами блока перестают влезать: сетка не ломается, а раздвигает
   сам блок — 1fr не может стать меньше min-content. Поэтому здесь
   и отступы блока, и колонки, и промежутки уменьшены разом. */
@media (max-width: 575.98px) {
    .lp-calc__controls,
    .lp-calc__result {
        padding: var(--lp-gap-md) var(--lp-gap-sm);
    }

    .lp-calc-line {
        gap: var(--lp-gap-xs);
        grid-template-columns: 76px minmax(84px, 1fr) 44px;
    }
}

@media (max-width: 479.98px) {
    /* Кнопка «Добавить» встаёт под список: рядом с ним ей остаётся
       меньше 100 пикселей, и подпись переносится по слогам */
    .lp-calc__pick {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =====================================================================
   14. БЛОК 7. ПОРТФОЛИО БРЕНДИРОВАНИЯ
   ---------------------------------------------------------------------
   Структура карточек одинаковая, как и в каталоге: если портфолио
   когда-нибудь переедет в инфоблок, вёрстку менять не придётся.
   ===================================================================== */

.lp-works {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--lp-gap-xl);
}

.lp-work {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
    overflow: hidden;
}

.lp-work__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lp-work__body {
    padding: var(--lp-gap-md);
}

.lp-work__client {
    font-size: 16px;
    font-weight: 700;
}

.lp-work__specs {
    margin-top: var(--lp-gap-sm);
    font-size: 14px;
}

.lp-work__spec {
    display: flex;
    justify-content: space-between;
    gap: var(--lp-gap-xs);
    padding: 6px 0;
    border-top: 1px solid var(--lp-line);
}

.lp-work__spec dt {
    color: var(--lp-text-dim);
}

.lp-work__spec dd {
    text-align: right;
}


/* =====================================================================
   15. БЛОК 8. ОТЗЫВЫ ЮРЛИЦ
   ---------------------------------------------------------------------
   Розничные отзывы с главной сюда не тащим: снабженцу нужен отзыв
   от организации, а не от частного покупателя.
   ===================================================================== */

.lp-letters {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--lp-gap-xl);
}

/* Письмо — белый документ, поэтому и карточка белая. Скан
   благодарственного письма на тёмной подложке выглядит вырезанным
   из чужого макета. */
.lp-letter {
    background: var(--lp-white);
    color: var(--lp-on-white);
}

.lp-letter img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

.lp-letter__caption {
    padding: 12px var(--lp-gap-sm);
    font-size: 13px;
    color: var(--lp-on-white-dim);
    border-top: 1px solid var(--lp-white-line);
}

.lp-reviews {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--lp-gap-md);
}

.lp-review {
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

.lp-review__text {
    font-size: 15px;
}

.lp-review__author {
    margin-top: var(--lp-gap-md);
    padding-top: var(--lp-gap-md);
    border-top: 1px solid var(--lp-line);
}

.lp-review__name {
    font-weight: 700;
}

.lp-review__post {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lp-text-dim);
}


/* =====================================================================
   16. БЛОК 9. КАК ПРОХОДИТ ЗАКАЗ
   ---------------------------------------------------------------------
   Вертикальный таймлайн с рельсой слева. Горизонтальный на шесть
   шагов не влезает без мелкого шрифта, а вертикальный одинаково
   читается на телефоне и на десктопе. Нумерация здесь оправдана:
   это реальная последовательность, а не украшение.
   ===================================================================== */

.lp-steps {
    position: relative;
    margin-top: var(--lp-gap-xl);
    padding-left: 56px;
}

/* Рельса: тянется от первого номера до последнего */
.lp-steps::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--lp-line);
}

.lp-step {
    position: relative;
    padding-bottom: var(--lp-gap-lg);
}

.lp-step:last-child {
    padding-bottom: 0;
}

.lp-step__num {
    position: absolute;
    left: -56px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--lp-accent);
    color: #fff;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.lp-step__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lp-gap-sm);
    min-height: 40px;
}

.lp-step__title {
    font-size: 18px;
    font-weight: 700;
}

.lp-step__term {
    padding: 3px 10px;
    border: 1px solid var(--lp-accent);
    border-radius: var(--lp-radius);
    color: var(--lp-accent);
    font-size: 13px;
    white-space: nowrap;
}

.lp-step__text {
    margin-top: var(--lp-gap-xs);
    font-size: 15px;
    color: var(--lp-text-dim);
}


/* =====================================================================
   17. БЛОК 10. УСЛОВИЯ ДЛЯ ЮРЛИЦ
   ===================================================================== */

.lp-terms {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--lp-gap-xl);
}

.lp-terms__item {
    padding: var(--lp-gap-md);
    border-left: 3px solid var(--lp-accent);
    background: var(--lp-surface);
}

.lp-terms__title {
    font-size: 16px;
    font-weight: 700;
}

.lp-terms__text {
    margin-top: var(--lp-gap-xs);
    font-size: 15px;
    color: var(--lp-text-dim);
}

/* --- Документы на скачивание --- */

.lp-docs {
    margin-top: var(--lp-gap-lg);
    padding: var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    background: var(--lp-surface);
}

.lp-docs__title {
    font-size: 16px;
    font-weight: 700;
}

.lp-docs__list {
    display: grid;
    gap: var(--lp-gap-xs) var(--lp-gap-md);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--lp-gap-sm);
    list-style: none;
}

/* 44 пикселя по высоте: на мобильном по ссылке попадают пальцем */
.lp-docs__link {
    display: flex;
    align-items: center;
    gap: var(--lp-gap-xs);
    min-height: 44px;
    font-size: 15px;
}

.lp-docs__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--lp-accent);
}

.lp-docs__kind {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--lp-text-dim);
    text-decoration: none;
}


/* =====================================================================
   18. БЛОК 11. ФИНАЛЬНЫЙ
   ===================================================================== */

/* Без align-items: start — тогда обе карточки тянутся на высоту строки
   и низом встают вровень. Пустоту под контактами забирает строка
   про часы работы: она прижата к низу карточки. */
.lp-final__grid {
    display: grid;
    gap: var(--lp-gap-md);
    grid-template-columns: 3fr 2fr;
    margin-top: var(--lp-gap-xl);
}

.lp-final__form {
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

.lp-final__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--lp-gap-lg);
}

/* --- Карточка менеджера --- */

.lp-manager {
    display: flex;
    flex-direction: column;
    padding: var(--lp-gap-lg) var(--lp-gap-md);
    border: 1px solid var(--lp-accent);
    border-radius: var(--lp-radius);
    background: var(--lp-sunken);
}

.lp-manager__photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.lp-manager__name {
    margin-top: var(--lp-gap-md);
    font-size: 18px;
    font-weight: 700;
}

.lp-manager__post {
    margin-top: 4px;
    font-size: 14px;
    color: var(--lp-text-dim);
}

.lp-manager__contacts {
    margin-top: var(--lp-gap-md);
    padding-top: var(--lp-gap-md);
    border-top: 1px solid var(--lp-line);
}

.lp-manager__row {
    display: flex;
    align-items: center;
    gap: var(--lp-gap-xs);
    margin-top: var(--lp-gap-xs);
}

.lp-manager__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--lp-accent);
}

/* Телефон и почта менеджера — на мобильном это главные цели: по ним
   звонят и пишут прямо со страницы. Поднимаем до 44px по высоте,
   иначе пальцем в них попадают не с первого раза. */
.lp-manager__row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.lp-manager__phone {
    font-size: 20px;
    font-weight: 900;
    color: var(--lp-text);
    text-decoration: none;
}

.lp-manager__phone:hover {
    color: var(--lp-accent);
}

/* Счётчик Метрики (tag_phone.js) разбирает каждую ссылку tel: посимвольно
   и оборачивает знаки во вложенные <small>, проставляя им инлайновую
   непрозрачность по убыванию: 0.9375, 0.875 и так до нуля. У ссылок
   самого сайта до нуля не доходит, а у нашей доходит — последняя цифра
   номера пропадает совсем. Отличие между ссылками только в том, что
   у сайтовых есть onclick, но подстраиваться под это гадание не стоит:
   проще не зависеть от поведения счётчика.

   !important здесь обязателен: Метрика пишет стиль прямо в атрибут.
   Правило намеренно шире карточки менеджера — под любую ссылку tel:
   внутри лендинга, если такая появится. */
.lp a[href^="tel:"] small {
    opacity: 1 !important;
}

/* margin-top: auto прижимает строку к низу карточки: карточка тянется
   до высоты формы, и без этого под контактами висела бы пустота. */
.lp-manager__hours {
    margin-top: auto;
    padding-top: var(--lp-gap-md);
    font-size: 13px;
    color: var(--lp-text-dim);
}

/* Иконка MAX — растровая, из подвала сайта: рисовать её svg-путём
   не стали, знак чужой и узнаваемый именно в цвете. */
.lp-manager__max-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* =====================================================================
   АДАПТИВ БЛОКОВ 7–11
   ===================================================================== */

@media (max-width: 991.98px) {
    .lp-works,
    .lp-letters,
    .lp-terms,
    .lp-docs__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-final__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .lp-reviews {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 559.98px) {
    .lp-works,
    .lp-letters,
    .lp-terms,
    .lp-docs__list {
        grid-template-columns: 1fr;
    }

    /* Таймлайн: номера уменьшаем, рельсу подтягиваем ближе к тексту */
    .lp-steps {
        padding-left: 44px;
    }

    .lp-steps::before {
        left: 15px;
    }

    .lp-step__num {
        left: -44px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .lp-step__head {
        min-height: 32px;
    }
}


/* =====================================================================
   19. ОКНО «СКАЧАТЬ ПРАЙС»
   ---------------------------------------------------------------------
   Открывают кнопки прайса на первом экране: имя и телефон — и файл
   скачивается. Разметка в конце template.php, поведение — script.js,
   раздел 10.

   z-index тот же, что у просмотра фотографий: выше плашки cookie
   шаблона (у неё 1000) и выше шапки. Фон полупрозрачный — в отличие
   от просмотра фото, здесь это не мешает: окно само непрозрачное,
   а страница за ним должна угадываться, чтобы было ясно, что человек
   никуда не ушёл.
   ===================================================================== */

.lp-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    padding: var(--lp-pad);
    overflow-y: auto;            /* на низком экране окно прокручивается */
    background: rgba(0, 0, 0, .8);
}

.lp-modal[hidden] {
    display: none;
}

.lp-modal__box {
    position: relative;
    display: grid;
    gap: var(--lp-gap-sm);
    width: 100%;
    max-width: 440px;
    margin: auto;                /* по центру, но без обрезки сверху */
    padding: var(--lp-gap-lg) 32px 32px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}

/* Через .lp: правило .lp h2 из типографики весит (0,1,1) и иначе
   раздувает заголовок окна до размера заголовка блока */
.lp .lp-modal__title {
    padding-right: 40px;         /* под крестик */
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.lp-modal__lead {
    font-size: 15px;
    line-height: 1.5;
    color: var(--lp-text-dim);
}

/* Крестик: 44 px — минимум, в который попадают пальцем */
.lp-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--lp-radius);
    background: transparent;
    color: var(--lp-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lp-modal__close::before {
    content: '✕';
}

.lp-modal__close:hover {
    color: var(--lp-accent);
}

/* Кнопка отправки во всю ширину: в узком окне так проще попасть */
.lp-modal .lp-btn--main {
    width: 100%;
}

/* Запасные ссылки после отправки — на случай, если браузер не начал
   загрузку сам. Цвет задаём явно: шаблон красит все ссылки в белый. */
.lp-modal__files {
    display: grid;
    gap: 6px;
    margin: var(--lp-gap-xs) 0 0;
    padding: 0;
    list-style: none;
}

.lp-modal__files a {
    color: var(--lp-accent);
}

@media (max-width: 575.98px) {
    .lp-modal__box {
        padding: 32px 20px 24px;
    }
}


/* =====================================================================
   99. ДОСТУПНОСТЬ
   ===================================================================== */

/* Видимый фокус. Белая обводка, а не оранжевая: на тёмном фоне видно
   заметно лучше, а оранжевый на оранжевой кнопке просто исчезнет. */
.lp :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Только для тех, кто ходит мышью — клавиатурный фокус остаётся */
.lp :focus:not(:focus-visible) {
    outline: none;
}

/* Скрыто визуально, но доступно скринридеру */
.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lp *,
    .lp *::before,
    .lp *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   КАТАЛОГ НАБОРОВ — стыковка карточки сайта с сеткой лендинга
   ---------------------------------------------------------------------
   Карточку рисует штатный шаблон каталога, менять его нельзя: она
   должна выглядеть так же, как в /buyers/. Но контейнер лендинга уже
   (1180px против всей ширины экрана в каталоге), и в колонке остаётся
   около 285px вместо 359px. Заголовок товара в шаблоне сайта идёт
   с white-space: nowrap и в такой колонке вылезал за карточку.
   ===================================================================== */

.lp .product-item-title,
.lp .product-item-title a {
    white-space: normal;
}

/* Кнопка «Добавить в расчёт» — единственное, что добавлено к карточке */
.lp .lp-card-action {
    padding: 0 15px 15px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.lp .lp-card-action .lp-card__btn {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 12px 16px;
    font-size: 14px;
}

/* На белой карточке прозрачная кнопка с оранжевой рамкой читается плохо:
   заливаем сразу — это главное действие в карточке */
.lp .lp-card-action .lp-btn--ghost {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

.lp .lp-card-action .lp-btn--ghost:hover {
    background: var(--lp-accent-hover);
    border-color: var(--lp-accent-hover);
}

/* Набор уже в расчёте: кнопка стала «Перейти к расчёту». Оставляем её
   заметно кликабельной — контур акцентом, — но не залитой, чтобы
   отмеченные карточки отличались от неотмеченных с одного взгляда. */
.lp .lp-card-action .lp-btn--ghost.lp-card__btn--on {
    background: transparent;
    border-color: var(--lp-accent);
    color: var(--lp-accent);
}

.lp .lp-card-action .lp-btn--ghost.lp-card__btn--on:hover {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

/* Крестик — второстепенное действие, поэтому серый и без заливки.
   display: none нужен явно: у флекс-родителя атрибут hidden сам
   по себе не прячет элемент. */
.lp .lp-card-action .lp-card__remove[hidden] {
    display: none;
}

.lp .lp-card-action .lp-card__remove {
    flex: 0 0 auto;
    width: 44px;
    padding: 0;
    border: 1px solid var(--lp-on-white-dim);
    border-radius: var(--lp-radius);
    background: transparent;
    color: var(--lp-on-white-dim);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.lp .lp-card-action .lp-card__remove:hover,
.lp .lp-card-action .lp-card__remove:focus-visible {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
}

/* Характеристики упирались в края карточки. Равняем по заголовку
   товара — у него padding: 0 10px, и текст карточки должен идти
   одной колонкой. */
.lp .lp-catalog-grid [data-entity="props-block"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Кнопка «Добавить» в расчёте бюджета была 53 px против 45 px
   у соседнего выпадающего списка. Общий .lp-btn задаёт padding
   16px 28px — здесь сжимаем по вертикали до отступов поля. */
.lp .lp-calc__pick-btn {
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (max-width: 559.98px) {
    .lp .lp-card-action .lp-card__btn {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* Кнопка «Добавить в расчёт» прижата к низу карточки.
   Ряд Bootstrap растягивает все колонки до высоты самой высокой
   карточки, а содержимое идёт обычным потоком. Поэтому у набора
   с коротким названием кнопка вставала выше соседних, а под ней
   оставалась пустота: во втором ряду разбег доходил до 116 px.
   Делаем карточку флекс-колонкой и прижимаем действие вниз
   автоматическим отступом.

   Только внутри .lp — в каталоге /buyers/ своя раскладка,
   её не трогаем. */
.lp .lp-catalog-grid .product-item {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.lp .lp-catalog-grid .lp-card-action {
    margin-top: auto;
}

/* В styles.css сайта есть @media (max-width: 375px) { .product-item-container
   { width: 130px } }. В собственной раскладке каталога это работает,
   но в колонке лендинга карточка выходит втрое уже колонки и выглядит
   сломанной. Внутри .lp растягиваем по месту — на каталог /buyers/
   это не влияет. */
@media (max-width: 375px) {
    .lp .product-item-container {
        width: 100%;
    }
}

/* Ряды карточек каталога слипались: низ одного ряда совпадал с верхом
   следующего. В каталоге /buyers/ у колонок стоит margin-bottom: 30px
   инлайном — повторяем то же самое, только стилями.
   max-width нужен там же: без него длинные названия растягивают
   колонку шире её доли в ряду. */
.lp .lp-catalog-grid .product-item-small-card {
    margin-bottom: 30px;
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   «ПОКАЗАТЬ ВСЕ НАБОРЫ»
   ---------------------------------------------------------------------
   Наборов восемнадцать: пять рядов на десктопе и очень длинная лента
   на телефоне. Скрипт оставляет видимыми восемь, остальные показывает
   по кнопке.

   Скрывается колонка целиком, а не карточка внутри неё: у элемента
   с display: none браузер не запрашивает фоновую картинку, а фотографии
   товаров здесь весят мегабайты — ради этого всё и сделано.

   Селектор из трёх частей не для красоты: у колонки уже висят классы
   Bootstrap, и правило должно их перевесить наверняка.
   --------------------------------------------------------------------- */
.lp .lp-catalog-grid .lp-col-hidden {
    display: none;
}

/* Кнопку создаёт скрипт. Без JavaScript её нет и видны все карточки —
   страница остаётся рабочей, просто длинной. */
.lp-catalog-more {
    display: flex;
    justify-content: center;
}