/* Start:/local/templates/nl_telecomo/css/variables.css?17895622157490*/
/* ==========================================================================
   Дизайн-токены Telecomo
   --------------------------------------------------------------------------
   Единственное место, где заданы цвета, шрифты, отступы и типографика.
   Источник: _verstka/css/style.css (:root) и _verstka/docs/style_guide.md.

   По месту ничего из палитры не хардкодим — только через var(--...).
   Чтобы перекрасить проект целиком, достаточно поменять значения здесь.
   ========================================================================== */

:root {
    /* --- Цвета -------------------------------------------------------- */
    --color-text-primary:   #091e42;  /* основной текст */
    --color-text-secondary: #626f86;  /* вторичный текст */
    --color-accent:         #722ed1;  /* акцент */
    --color-accent-hover:   #531dab;  /* акцент при наведении */
    --color-accent-bg:      #f9f0ff;  /* подложка акцентных блоков */
    --color-bg-secondary:   #f8f8f9;  /* фон панелей и аккордеонов */
    --color-border:         #dcdfe4;  /* границы */
    --color-placeholder:    #b3b9c4;  /* плейсхолдеры форм */
    --color-error:          #f5222d;  /* ошибка */
    --color-error-bg:       #fff1f0;  /* подложка ошибки */
    --color-white:          #ffffff;

    /* --- Шрифты ------------------------------------------------------- */
    --font-headers: 'Unbounded', sans-serif;
    --font-body:    'Wix Madefor Display', sans-serif;

    /* --- Отступы ------------------------------------------------------ */
    --spacing-xs:  8px;
    --spacing-sm:  16px;
    --spacing-md:  24px;
    --spacing-lg:  32px;
    --spacing-xl:  48px;
    --spacing-xxl: 80px;

    /* --- Переходы ----------------------------------------------------- */
    --transition-default: 0.2s ease;
    --transition-slow:    0.35s ease;  /* кнопки, радио-карточки */

    /* --- Типографика: размеры и интерлиньяж --------------------------- */
    --font-size-h1: 56px;  --line-height-h1: 1.14;
    --font-size-h2: 48px;  --line-height-h2: 1.16;
    --font-size-h3: 28px;  --line-height-h3: 1.28;
    --font-size-h4: 24px;  --line-height-h4: 1.33;

    --font-size-h2-mobile: 28px;

    --font-size-subheading-s: 20px;
    --font-size-subheading-s-mobile: 18px;
    --line-height-subheading: 1.4;

    --font-size-text-l: 18px;  --line-height-text-l: 1.55;
    --font-size-text-m: 16px;  --line-height-text-m: 1.5;
    --font-size-text-s: 14px;  --line-height-text-s: 1.57;

    --font-size-text-l-mobile: 16px;

    /* --- Заголовки: рабочая шкала -------------------------------------
       Токены --font-size-h1…h4 выше взяты из первоначального макета и
       на боевых страницах не используются: там заголовок страницы был
       56 пикселей, а по сайту сложился размер 26. Оставляем их как
       справку по макету и вводим шкалу, по которой сайт живёт.

       Четыре уровня, все на Unbounded, все с одной жирностью — разница
       только в размере. Раньше заголовки блоков гуляли от 15 до 32
       пикселей и половина из них была набрана шрифтом основного текста.

         страница  26  — h1, один на страницу
         блок      22  — h2, крупный раздел внутри страницы
         подраздел 18  — h3 и заголовки в окнах
         карточка  16  — название плашки в сетке

       Название товара, новости и прочих карточек списка живёт отдельно:
       это не заголовок, а строка перечня, и набирается шрифтом текста
       (--font-size-card-name).
       ------------------------------------------------------------------ */
    --heading-weight: 600;

    --heading-page:      26px;  --heading-page-lh:    1.2;
    --heading-section:   22px;  --heading-section-lh: 1.25;
    --heading-sub:       18px;  --heading-sub-lh:     1.3;
    --heading-card:      16px;  --heading-card-lh:    1.35;

    /* На узких экранах шкала сжимается на ступень, пропорции сохраняются */
    --heading-page-mobile:    22px;
    --heading-section-mobile: 20px;
    --heading-sub-mobile:     17px;

    /* Названия карточек списка — шрифтом текста, не заголовочным */
    --font-size-card-name: 15px;  --line-height-card-name: 1.4;

    /* --- Формы и элементы управления ---------------------------------- */
    --input-border-width:    2px;
    --input-padding:         22px;
    --input-padding-mobile:  14px 18px;

    --button-padding:        16px 24px;
    --button-padding-l:      24px 32px;
    --button-icon-size:      24px;
    --button-icon-gap:       8px;

    --card-border-width:     1px;
    --card-padding:          32px;
    --card-padding-mobile:   16px;

    /* Прямые углы — осознанное решение дизайна.
       Единственное исключение — круглые иконочные кнопки в шапке. */
    --radius-base:  0;
    --radius-round: 50%;
    /* .viewed-card в исходной вёрстке ссылается на --radius-lg, но нигде её
       не определяет — свойство молча не применяется. Объявляем явно, значение
       соответствует принятым в дизайне прямым углам. */
    --radius-lg:    0;

    /* --- Сетка -------------------------------------------------------- */
    --container-max:      1736px;
    --container-padding:  16px;
    --grid-gap:           40px;
    --grid-gap-mobile:    16px;

    /* Несколько сторонних компонентов (arturgolubev:search.title — свои
       style.css в template1/ и modal/, трогать их не будем) до сих пор
       считают часть отступов через var(--width-multiplier) — как в
       /assets. Переменную нигде не переопределяли, поэтому она невалидна:
       calc() с ней обнуляет свойство целиком (padding инпута поиска,
       например). Задаём то же значение, что было в /assets, — те же
       calc(N*100vw/1920) fallback-строки рядом в тех же файлах и так
       считают руками, так что новых «резиновых» размеров это не добавляет,
       просто чинит уже написанные. */
    --width-multiplier: calc(100vw / 1920);
}

/* End */


/* Start:/local/templates/nl_telecomo/css/common.css?1790596996110146*/
/* ==========================================================================
   Общий слой стилей Telecomo
   --------------------------------------------------------------------------
   Источник: _verstka/css/style.css — файл, который в макетах подключается
   на всех 22 страницах.

   Что внутри: reset, шапка, подвал, базовые компоненты (кнопки, заголовки,
   карточки, контейнер, сетки) и блоки главной страницы.

   Блок :root вынесен в variables.css — здесь его нет намеренно.

   ЗАМЕТКА НА ЭПИК 1: блоки главной (BLOCK 2–8) стоило бы вынести в index.css,
   но медиазапросы в исходнике не разделены по блокам — резать вслепую
   рискованно. Разделим при вёрстке главной, когда будет видно фактическое
   использование.
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLES & DESIGN SYSTEM (Telecomo Colors & Wix Font)
   ========================================================================== */


/* ==========================================================================
   RESET & SYSTEM BASICS (Straight corners only)
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Circular elements — шапка: избранное, кабинет, корзина */
.header-action {
    border-radius: 50% !important;
}

/* Браузер по умолчанию красит выделение текста синим — на белом тексте
   фиолетовых кнопок (шапка, "Войти" и т.п.) это выглядит как поломка. */
::selection {
    background: var(--color-accent);
    color: var(--color-white);
}

html,
body {
    overflow-x: clip;
}

body {
    font-family: var(--font-body), Arial, Helvetica, sans-serif;
    background: var(--color-white);
    color: var(--color-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* :visited обёрнут в :where(), чтобы правило осталось со специфичностью
   голого a. Без обёртки a:visited (тип+класс) перебивает любой одиночный
   класс — .header-catalog-btn, .purple-btn и прочие кнопки теряли свой
   белый цвет, как только ссылку один раз открыли. */
a,
a:where(:visited) {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-default);
}

button, input, textarea {
    font-family: inherit;
    outline: none;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   BUTTON — общая кнопка сайта (.button/.button--*)
   --------------------------------------------------------------------------
   Классы использовались с самого начала редизайна (каталог, карточка
   товара, бренды — эпики 1–4) и до сих пор не были объявлены нигде в новых
   стилях: подложкой служил старый слой /assets/main.css, который снимется
   по ходу проекта (см. _epics/_INDEX.md, «Чего стоило больше всего»).
   Значения — те же отступы/размеры, что у старой кнопки, только через
   токены --button-*, а не calc(vw) старой вёрстки. Найдено и заполнено
   при работе над эпиком 6 (оформление заказа) — там же первый живой,
   некликуемый мимо тест.
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-icon-gap);
    padding: var(--button-padding);
    border: none;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: var(--transition-slow);
}

.button:hover { background: var(--color-accent-hover); }

/* После нажатия браузер оставляет на кнопке рамку фокуса, и на телефоне
   фиолетовая кнопка так и стоит обведённой чёрным — читается как поломка.
   Рамку убираем только там, где она появилась от мыши или касания: при
   переходе с клавиатуры (:focus-visible) она нужна и остаётся. */
.button:focus:not(:focus-visible) { outline: none; }

.button[disabled] {
    opacity: .5;
    pointer-events: none;
}

.button svg {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    flex-shrink: 0;
}

.button--l, .button--2l { padding: var(--button-padding-l); }

.button--m { padding: var(--button-padding); }

/* Вторичная («призрачная») кнопка — светлая подложка вместо заливки */
.button--2, .button--2l, .button--icon {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.button--2:hover, .button--2l:hover, .button--icon:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent-hover);
}

/* Кнопка-ссылка при наведении.
   На странице заказа подключён bootstrap 4 (Extension::load ui.bootstrap4),
   а у него есть a:hover со своим синим. Селектор a:hover — это тип плюс
   псевдокласс, то есть он перебивает одиночный класс .button, и текст
   кнопки-ссылки при наведении синел (видно было на «Оформить заказ»).
   Своя специфичность здесь выше за счёт того же тега a. Та же природа,
   что у истории с a:visited в начале файла. */
a.button:hover, a.button:focus { color: var(--color-white); }

a.button--2:hover, a.button--2:focus,
a.button--2l:hover, a.button--2l:focus,
a.button--icon:hover, a.button--icon:focus { color: var(--color-accent-hover); }

/* Кнопка-иконка — квадратная, без текста рядом */
.button--icon, .button--icon2 {
    padding: 0;
    width: 56px;
    height: 56px;
}

.button--icon2 { background: var(--color-accent); color: var(--color-white); }

/* Кнопка-иконка кругом, «призрачная» — переключатели вида списка и т.п. */
.button--icon3 {
    position: relative;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    background: transparent;
    color: currentColor;
    transition: var(--transition-slow);
}

.button--icon3:not([disabled]):hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

/* Кнопка-иконка с рамкой и подписью — фильтры, сортировка */
.button--icon4 {
    height: 48px;
    padding: 0 var(--spacing-xs);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
}

.button--icon4:not([disabled]):hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ==========================================================================
   INPUT — общая обёртка поля ввода (.input > input/textarea)
   --------------------------------------------------------------------------
   Тот же пробел, что и с .button выше: класс уже используется в фильтре
   каталога, корзине, личном кабинете, формах входа и теперь в оформлении
   заказа — везде молча подхватывался старый /assets/main.css. Найдено и
   заполнено при работе над эпиком 6.
   ========================================================================== */

.input input,
.input textarea {
    width: 100%;
    border: var(--input-border-width) solid var(--color-border);
    padding: 11px var(--spacing-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: var(--color-white);
    box-sizing: border-box;
    outline: none;
    transition: var(--transition-slow);
}

/* Старый /assets/main.css даёт textarea внутри .input свой min-height —
   calc(225 * 100vw/1920), на широких экранах больше 200px даже для
   короткого комментария. Фиксируем разумную высоту вместо вьюпорт-скейла. */
.input textarea { min-height: 96px; resize: vertical; }

.input input::placeholder,
.input textarea::placeholder { color: var(--color-placeholder); }

.input input:focus,
.input textarea:focus { border-color: var(--color-accent); }

.input input:disabled,
.input textarea:disabled { opacity: .6; }

/* ==========================================================================
   HEADER COMPONENT
   ========================================================================== */

.site-header {
    width: 100%;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 8px rgba(9, 30, 66, 0.06);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.header-top {
    min-height: 72px;
    display: grid;
    grid-template-columns: 190px auto 1fr auto;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid rgba(220, 223, 228, 0.5);
}

.header-logo {
    display: inline-flex;
    align-items: center;
    width: 176px;
    height: 44px;
}

.header-logo img {
    display: block;
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
}

.header-phone {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.header-phone:hover {
    color: var(--color-accent);
}

.header-contact {
    white-space: nowrap;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    min-width: 0;
}

.header-nav a {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.header-nav a:hover {
    color: var(--color-accent);
}

.header-bottom {
    min-height: 73px;
    display: grid;
    grid-template-columns: 194px 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 10px 0;
}

.header-catalog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 194px;
    height: 53px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition-default);
}

.header-catalog-btn:hover {
    background: var(--color-accent-hover);
}

.header-catalog-icon {
    width: 16px;
    height: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    flex: 0 0 auto;
}

.header-catalog-icon span {
    display: block;
    border: 2px solid var(--color-white);
}

.header-search {
    position: relative;
    width: 100%;
}

.header-search input {
    width: 100%;
    height: 53px;
    padding: 0 56px 0 20px;
    border: 2px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    font-size: 14px;
    transition: var(--transition-default);
}

.header-search input:focus {
    border-color: var(--color-accent);
}

.header-search input::placeholder {
    color: var(--color-placeholder);
}

.header-search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 53px;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-search button:hover {
    color: var(--color-accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
}

/* Круглые иконочные кнопки — ЕДИНСТВЕННОЕ исключение из правила radius: 0 */
.header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    position: relative;
    transition: var(--transition-default);
    flex: 0 0 44px;
}

.header-action:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.header-action .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-action svg,
.header-search svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Profile dropdown */
.header-profile-wrap {
    position: relative;
}

.header-profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(9,30,66,0.12);
    min-width: 220px;
    z-index: 500;
    flex-direction: column;
}

.header-profile-wrap.is-open .header-profile-dropdown {
    display: flex;
}

.header-profile-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-default);
    cursor: pointer;
}

.header-profile-dropdown__item:last-child {
    border-bottom: none;
}

.header-profile-dropdown__item:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.header-profile-dropdown__item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.header-profile-dropdown__label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

/* ↗ Сигнатурная кнопка-стрелка — фирменный элемент перехода */
.arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 48px;
    transition: background var(--transition-default), color var(--transition-default);
    text-decoration: none;
}

.arrow-btn:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

/* ==========================================================================
   MAIN SECTION & GENERAL WRAPPERS
   ========================================================================== */

.equipment-section {
    width: 100%;
    padding: var(--spacing-md) 0 0;
    background: var(--color-white);
}

.equipment-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Hero: большой слева + два малых справа */
.top-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: var(--spacing-md);
}

/* Если баннеры в админке не заведены, правая колонка пустует — тогда
   большой баннер занимает всю ширину, а не оставляет дыру рядом с собой.
   Пробелы от вывода компонентов :empty не ловит, поэтому :has. */
.top-grid:not(:has(.promo-card)) {
    grid-template-columns: 1fr;
}

.top-grid:not(:has(.promo-card)) .promo-column {
    display: none;
}

/* Правая колонка: два баннера вертикально */
.promo-column {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

/* ==========================================================================
   CARDS GENERAL STYLINGS
   ========================================================================== */

/* Баннеры героя — каждый равновеликий */
.banner-card,
.hero-card,
.promo-card,
.help-card {
    position: relative;
    overflow: hidden;
    background: var(--color-text-primary);
    color: var(--color-white);
}

/* Все баннеры hero одинаковой высоты */
.banner-card,
.hero-card {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
}

.hero-bg,
.banner-bg,
.promo-bg,
.help-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.banner-card:hover .banner-bg,
.hero-card:hover .hero-bg,
.promo-card:hover .promo-bg,
.help-card:hover .help-bg {
    transform: scale(1.03);
}

.hero-overlay,
.banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Градиент снизу вверх: текст + стрелка внизу читаемы */
    background: linear-gradient(to top, rgba(9, 30, 66, 0.90) 0%, rgba(9, 30, 66, 0.45) 50%, rgba(9, 30, 66, 0.10) 100%);
}

/* Первый баннер — фирменный фиолетово-космический градиент */
.banner-card.bn1 {
    background:
        radial-gradient(130% 130% at 70% 20%, rgba(216, 93, 224, .7), transparent 55%),
        linear-gradient(150deg, #4a1799, #7b2bcf);
}

.banner-card.bn2 {
    background: linear-gradient(150deg, #ff4d8d, #6a4bf2);
}

.banner-card.bn3 {
    background: linear-gradient(150deg, #2b2b33, #4a4a55);
}

.banner-card.bn4 {
    background: linear-gradient(150deg, #1c1c28, #3a2a55);
}

.banner-content,
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

.banner-title,
.hero-title {
    font-family: var(--font-headers);
    font-size: 21px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.banner-text,
.hero-text {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

/* Сигнатурная стрелка ↗ — в баннерах внизу */
.banner-arrow {
    position: absolute;
    left: 26px;
    bottom: 26px;
    z-index: 4;
}

/* Dots Carousel indicators */
.hero-dots {
    position: absolute;
    z-index: 4;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.hero-dots span {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: var(--transition-default);
}

.hero-dots span.active {
    background: var(--color-white);
    width: 18px;
}

.promo-card {
    min-height: 157px;
    padding: var(--spacing-md);
}

.promo-overlay,
.help-overlay,
.write-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(9, 30, 66, 0.95) 0%, rgba(9, 30, 66, 0.65) 56%, rgba(9, 30, 66, 0.2) 100%);
}

.promo-content,
.help-content,
.write-content {
    position: relative;
    z-index: 3;
}

.promo-content {
    max-width: 250px;
}

.promo-title {
    font-family: var(--font-headers);
    font-size: var(--heading-sub);
    line-height: var(--heading-sub-lh);
    font-weight: var(--heading-weight);
    margin-bottom: 6px;
}

.promo-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-sm);
}

/* General Buttons */
.purple-btn,
.promo-btn,
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
    transition: var(--transition-default);
}

.purple-btn:hover,
.promo-btn:hover,
.submit-btn:hover {
    background: var(--color-accent-hover);
}

.purple-btn {
    height: 42px;
    padding: 0 22px;
    font-size: 13px;
}

.purple-btn--outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
}

.purple-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.hero-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.promo-btn {
    height: 32px;
    padding: 0 15px;
    font-size: 11px;
}

/* Заголовки блоков — «Каталог», «Популярные товары», «Бренды»,
   «Часто задаваемые вопросы». На ступень мельче заголовка страницы:
   раньше они были с ним вровень (26), и на внутренних страницах блок
   спорил по весу с названием самой страницы. */
.catalog-title,
.section-title,
.brands-title,
.faq-title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
}

.catalog-title,
.brands-title,
.faq-title {
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   BLOCK 3: POPULAR PRODUCTS (Nag Style)
   ========================================================================== */

.products-section,
.brands-section,
.buy-section,
.news-section {
    margin-bottom: var(--spacing-xl);
}

.products-head,
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.products-left {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
}

.products-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    overflow-x: auto;
}

.popular-tab-panels {
    margin-top: 0;
}

.products-tab {
    position: relative;
    white-space: nowrap;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 700;
    padding: 4px 0;
    border-bottom: 3px solid transparent;
}

.products-tab.active,
.products-tab:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.show-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.show-all-mobile {
    display: none;
}

.show-all span {
    font-size: 18px;
    line-height: 1;
}

.show-all:hover {
    color: var(--color-accent-hover);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
    margin-top: 4px;
}

/* Standard Product Cards */
.product-card,
.viewed-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition-default);
}

.product-card:hover,
.viewed-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
}

.product-label,
.viewed-label {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    background: #e9f0ff;
    color: #3057d5;
}

/* Tag variants — единственное место с цветами меток; раньше product.css
   и .catalog-card__tag переопределяли new/hit/recommend своими цветами,
   из-за чего одна и та же метка красилась по-разному на разных страницах */
.product-tag--new {
    background: #e6f9f0;
    color: #1a7a45;
}

.product-tag--hit {
    background: #fff4e5;
    color: #c05c00;
}

.product-tag--sale {
    background: #fff0f0;
    color: #c0392b;
}

.product-tag--recommend {
    background: #e9f0ff;
    color: #3057d5;
}

.product-favorite,
.viewed-favorite {
    width: 52px;
    height: 52px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    transition: var(--transition-default);
}

.product-favorite:hover,
.viewed-favorite:hover,
.product-favorite.is-active,
.viewed-favorite.is-active {
    background: var(--color-accent);
    color: var(--color-white);
}

.product-img-wrap,
.viewed-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    margin-bottom: var(--spacing-md);
}

.product-img,
.viewed-img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    transition: transform var(--transition-default);
}

.product-card:hover .product-img,
.viewed-card:hover .viewed-img {
    transform: scale(1.05);
}

.product-price-row,
.viewed-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--spacing-sm);
}

.product-price,
.viewed-price {
    font-family: var(--font-headers);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.product-old-price,
.viewed-old-price {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

.product-discount,
.viewed-discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    background: var(--color-error);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 800;
}

.product-name,
.viewed-name {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-card-name);
    line-height: 1.5;
    font-weight: 600;
    color: var(--color-text-primary);
    word-break: break-word;
    overflow-wrap: break-word;
}

.product-name:hover,
.viewed-name:hover {
    color: var(--color-accent);
}

.product-rating,
.viewed-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-md);
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Бренд */
.product-brand,
.viewed-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    margin-top: auto;
}

.product-brand-name,
.viewed-brand-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Наличие и количество — вместо отзывов */
.product-stock,
.viewed-stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--spacing-md);
    font-size: 12px;
}

.stock-label {
    color: #27a65a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stock-label::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #27a65a;
    border-radius: 50%;
}

.stock-qty {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr 52px;
    gap: 12px;
    margin-top: auto;
    align-items: center;
}

.card-cart-btn {
    width: 100%;
    height: 52px;
    background: var(--color-accent);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    transition: var(--transition-default);
}

.card-cart-btn:hover {
    background: var(--color-accent-hover);
}

.card-cart-icon {
    font-size: 18px;
    display: none;
}

/* Артикул */
.product-article,
.viewed-article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.product-article-value,
.viewed-article-value {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    text-align: right;
    max-width: 60%;
}

/* Консультация менеджера */
.card-consult {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.card-consult:hover {
    background: var(--color-accent);
    color: #fff;
}

.card-cart-text {
    white-space: nowrap;
}

/* ==========================================================================
   BLOCK 4: BRANDS BLOCK
   ========================================================================== */

.brands-section {
    overflow: hidden;
}

.brands-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
    animation: brands-marquee 30s linear infinite;
}

.brands-grid:hover {
    animation-play-state: paused;
}

@keyframes brands-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 12px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    transition: var(--transition-default);
}

.brand-card:hover {
    border-color: var(--color-accent);
}

.brand-card img {
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition-default);
}

.brand-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.brand-card--text {
    font-family: var(--font-headers);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    min-width: 100px;
    white-space: nowrap;
}

.brand-card--text:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ==========================================================================
   BLOCK 5: HOW TO BUY & HELP BLOCK
   ========================================================================== */

.buy-grid {
    display: grid;
    grid-template-columns: 5fr 1.25fr;
    gap: 12px;
}

.buy-steps-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    z-index: 2;
}

.buy-steps-flow::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--color-border);
    z-index: 1;
}

.buy-steps-progress {
    position: absolute;
    top: 32px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--color-accent);
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease;
}

.buy-step {
    min-height: 150px;
    padding: 20px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    position: relative;
    z-index: 3;
    transition: border-color var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default);
}

.buy-step.active {
    border-color: var(--color-accent);
    box-shadow: 0 12px 30px rgba(114, 46, 209, 0.15);
    transform: scale(1.02);
}

.buy-step.active .step-number {
    background: var(--color-accent);
    color: var(--color-white);
}

.step-number {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 10px;
    margin-bottom: 20px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-family: var(--font-headers); /* Unbounded для цифр шагов */
    font-size: 13px;
    font-weight: 600;
    transition: background var(--transition-default), color var(--transition-default);
}

.step-title {
    margin-bottom: 8px;
    font-size: var(--font-size-card-name);
    font-weight: var(--heading-weight);
}

.step-text {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.help-card {
    min-height: 150px;
    padding: 22px;
}

.help-content {
    max-width: 250px;
}

.help-title {
    font-family: var(--font-headers);
    margin-bottom: 10px;
    font-size: var(--heading-sub);
    line-height: var(--heading-sub-lh);
    font-weight: var(--heading-weight);
}

.help-text {
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.4;
}

/* ==========================================================================
   BLOCK 6: NEWS GRID
   ========================================================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.news-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    min-height: 126px;
    overflow: hidden;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    transition: var(--transition-default);
}

.news-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
}

.news-img {
    width: 100%;
    height: 100%;
    min-height: 126px;
    object-fit: cover;
}

.news-body {
    position: relative;
    padding: 14px 14px 34px;
}

.news-date {
    margin-bottom: 7px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
}

/* Теперь это h3 — как названия товаров в карточках каталога. Начертание
   и размер прежние: сброс в начале файла снимает отступы у заголовков, а
   шрифт наследуется от body, как и у .product-name. */
.news-title {
    margin-bottom: 7px;
    font-size: var(--font-size-card-name);
    line-height: var(--line-height-card-name);
    font-weight: var(--heading-weight);
}

.news-text {
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.news-arrow {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: var(--color-accent);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    transition: var(--transition-default);
}

.news-card:hover .news-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   BLOCK 7: FAQ & CONTACT FORM CARD
   ========================================================================== */

.bottom-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 16px;
    margin-bottom: 42px;
}

/* Блок FAQ: убираем внешнюю рамку, делаем строки серыми */
.faq-list {
    background: var(--color-white);
    border: 1px solid var(--color-border);
}



.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 48px;
    padding: 18px 24px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition-default);
}

.faq-question:hover {
    color: var(--color-accent);
}

/* SVG-шеврон заменён CSS-треугольником */
.faq-question::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    flex: 0 0 10px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    transform: rotate(225deg);
    border-color: var(--color-accent-hover);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

.faq-item.active .faq-answer {
    padding: 0 24px 20px;
}

/* Блок обратного звонка — светло-фиолетовая плашка по гайду */
.write-card {
    min-height: 322px;
    padding: 40px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-bg); /* #F9F0FF */
    position: relative;
    overflow: visible;
}

/* Убираем тёмный фоновый overlay — теперь светлый фон */
.write-bg,
.write-overlay {
    display: none;
}

.write-content {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.write-title {
    font-family: var(--font-headers);
    margin-bottom: 8px;
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-accent); /* Фиолетовый заголовок */
    letter-spacing: -0.01em;
}

.write-text {
    max-width: 420px;
    margin-bottom: 22px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Белые поля ввода на светло-фиолетовом фоне */
.form-field {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: var(--font-body);
    transition: var(--transition-default);
}

.form-field:focus {
    border-color: var(--color-accent);
    outline: none;
}

.form-field::placeholder {
    color: var(--color-placeholder);
}

textarea.form-field {
    height: 90px;
    padding-top: 14px;
    resize: none;
}

/* Кнопка «Перезвоните мне» */
.submit-btn {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
}

.submit-btn:hover {
    background: var(--color-accent-hover);
}

/* ==========================================================================
   BLOCK 8: VIEWED ITEMS BLOCK
   ========================================================================== */

.viewed-section {
    margin-bottom: 56px;
}

.viewed-title {
    font-family: var(--font-headers);
    margin-bottom: 28px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-text-primary);
}

.viewed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
}

/* ==========================================================================
   BLOCK 9: FOOTER
   ========================================================================== */

.site-footer {
    margin-top: 10px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 48px 0;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr) 1.35fr;
    gap: 34px;
    align-items: start;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.footer-logo img {
    max-width: 150px;
    max-height: 42px;
    object-fit: contain;
}

.footer-phone {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.footer-phone:hover {
    color: var(--color-accent);
}

.footer-mail,
.footer-address {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.footer-mail:hover {
    color: var(--color-accent);
}

.footer-title {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-menu a {
    color: var(--color-text-secondary);
    font-size: 13px;
    transition: var(--transition-default);
}

.footer-menu a:hover {
    color: var(--color-accent);
}

/* Форма подписки на рассылку убрана вместе со скидкой 1,5% — её стили
   (.footer-subscribe-*) удалены. */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Квадратные кнопки соцсетей — border по гайду */
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: var(--transition-default);
}

.footer-socials a:hover {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* Раньше здесь стояли буквы «VK». Иконка есть в спрайте, цвет берёт от
   ссылки — значит и наведение работает тем же правилом выше. */
.footer-socials a svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Юридическая строка футера */
.footer-legal {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE LAYOUTS
   ========================================================================== */

@media (max-width: 1180px) {
    .top-grid {
        grid-template-columns: 1.5fr 1fr;
    }

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

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

    .buy-grid {
        grid-template-columns: 1fr;
    }

    .buy-steps-flow {
        grid-template-columns: repeat(5, 1fr);
    }

    .help-card {
        grid-column: auto;
    }

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

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

/* ---- Tablet header (769px–1250px) ---- */
@media (max-width: 1250px) {
    .header-top {
        display: flex;
        align-items: center;
        min-height: 64px;
        gap: 0;
        border-bottom: none;
    }

    .header-top .header-logo {
        flex: 0 0 auto;
        margin-right: 20px;
    }

    .header-top .header-phone {
        margin-left: auto;
        font-size: 14px;
    }

    .header-top .header-contact {
        margin-left: 16px;
        font-size: 13px;
    }

    .header-nav {
        display: none;
    }

    .header-bottom {
        display: none;
    }

    .header-burger {
        margin-left: 20px;
    }

    .top-grid {
        grid-template-columns: 1fr;
    }

    .promo-column {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
    }

    .bottom-info-grid {
        grid-template-columns: 1fr;
    }

    .hero-card {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .equipment-section {
        padding: 18px 0 0;
    }

    .equipment-container {
        padding: 0 16px;
    }

    .footer-container {
        padding: 0 16px;
    }

    .hero-content {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .hero-title {
        font-size: 23px;
    }

    .products-grid,
    .news-grid,
    .brands-grid,
    .viewed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .buy-grid {
        grid-template-columns: 1fr;
    }

    .buy-steps-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .buy-steps-flow::before,
    .buy-steps-progress {
        display: none !important;
    }

    .products-head .show-all {
        display: none;
    }

    .show-all-mobile {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--color-accent);
        font-size: 13px;
        font-weight: 700;
        margin-top: 18px;
    }

    .show-all-mobile:hover {
        color: var(--color-accent-hover);
    }

    .products-head,
    .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--spacing-xs);
        border-bottom: none;
    }

    .products-left {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .products-tabs {
        width: 100%;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 2px;
    }

    .help-card {
        grid-column: auto;
    }

    .news-card {
        grid-template-columns: 1fr;
    }

    .news-img {
        height: 150px;
    }

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

    .products-section,
    .viewed-section {
        margin-bottom: var(--spacing-lg);
    }

    .products-grid,
    .viewed-grid {
        gap: 24px 18px;
    }

    .product-card,
    .viewed-card {
        padding: 16px;
    }

    .product-img-wrap,
    .viewed-img-wrap {
        height: 170px;
        margin-bottom: 18px;
        padding-top: 18px;
    }

    .product-img,
    .viewed-img {
        max-height: 150px;
    }

    .product-label,
    .viewed-label {
        min-height: 26px;
        padding: 0 8px;
        font-size: 10px;
    }

    .product-price,
    .viewed-price {
        font-size: 17px;
    }

    .product-old-price,
    .viewed-old-price,
    .product-discount,
    .viewed-discount,
    .product-rating,
    .viewed-rating {
        font-size: 12px;
    }

    .product-name,
    .viewed-name {
        min-height: 88px;
        margin-bottom: 40px;
        font-size: 13px;
    }

    .product-favorite,
    .viewed-favorite {
        width: 42px;
        height: 42px;
        font-size: 20px;
        flex-basis: 42px;
    }

    .card-actions {
        grid-template-columns: 1fr 42px;
        gap: 10px;
    }

    .card-cart-btn {
        height: 42px;
        gap: 8px;
        font-size: 14px;
    }

}

@media (max-width: 480px) {
    .brands-grid,
    .buy-grid,
    .news-grid,
    .footer-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    .products-grid,
    .viewed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }

    .hero-card {
        min-height: 360px;
    }

    .help-card {
        grid-column: auto;
    }

    .products-head,
    .viewed-title {
        margin-bottom: 18px;
    }

    .section-title,
    .viewed-title {
        font-size: var(--heading-section-mobile);
    }

    .product-card,
    .viewed-card {
        min-width: 0;
        padding: 12px;
    }

    .product-img-wrap,
    .viewed-img-wrap {
        height: 132px;
        margin-bottom: 16px;
        padding: 18px 4px 0;
    }

    .product-img,
    .viewed-img {
        max-height: 116px;
    }

    .product-label,
    .viewed-label {
        min-height: 28px;
        padding: 0 8px;
        font-size: 11px;
    }

    .product-price,
    .viewed-price {
        font-size: 16px;
    }

    .product-name,
    .viewed-name {
        min-height: 0;
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 1.45;
    }

    .product-brand,
    .viewed-brand {
        font-size: 11px;
    }

    .product-stock,
    .viewed-stock {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .product-favorite,
    .viewed-favorite {
        width: 34px;
        height: 34px;
        font-size: 16px;
        flex-basis: 34px;
    }

    .card-actions {
        grid-template-columns: 1fr 34px;
        gap: 8px;
    }

    .card-cart-btn {
        height: 34px;
        font-size: 0;
        gap: 0;
    }

    .card-cart-icon {
        display: inline;
        font-size: 16px;
    }

    .card-cart-text {
        display: none;
    }

    .product-rating,
    .viewed-rating {
        font-size: 11px;
    }
}

/* ==========================================================================
   MOBILE SCROLLS (Brands & Banners matching user wireframe)
   ========================================================================== */

@media (max-width: 768px) {
    .brands-section {
        overflow: hidden;
    }

    .brands-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 10px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .brands-grid::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .brands-grid {
        scrollbar-width: none;
    }

    .brand-card {
        flex: 0 0 132px;
        min-width: 132px;
        min-height: 58px;
        scroll-snap-align: start;
    }
}

@media (max-width: 480px) {
    .brand-card {
        flex-basis: 124px;
        min-width: 124px;
    }
}

/* Mobile banners — горизонтальный скролл */
@media (max-width: 768px) {
    .top-grid {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 -8px var(--spacing-md);
        padding: 0 8px 8px;
        grid-template-columns: none;
    }

    .top-grid::-webkit-scrollbar {
        display: none;
    }

    .top-grid {
        scrollbar-width: none;
    }

    /* Большой баннер — ширина 85% экрана */
    .top-grid .hero-card {
        flex: 0 0 85%;
        min-width: 0;
        min-height: 280px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Правая колонка — развертывается в два отдельных слайда */
    .promo-column {
        display: contents;
    }

    .top-grid .promo-card {
        flex: 0 0 75%;
        min-width: 0;
        min-height: 200px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 20px 18px;
    }

    .hero-dots {
        display: none;
    }
}

@media (max-width: 480px) {
    .top-grid .hero-card,
    .top-grid .promo-card {
        flex-basis: 100%;
        min-height: 330px;
    }
}

/* Header mobile styles */
@media (max-width: 768px) {
    .site-header {
        border-bottom: 1px solid var(--color-border);
    }

    .header-container {
        min-height: 64px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .header-top,
    .header-bottom {
        display: contents;
    }

    .header-logo {
        order: 1;
        width: 154px;
        height: 40px;
        flex: 0 0 auto;
    }

    .header-logo img {
        max-height: 40px;
    }

    .header-phone,
    .header-contact,
    .header-nav {
        display: none !important;
    }

    .header-search {
        order: 3;
        margin-left: auto;
        width: 28px;
        height: 58px;
        flex: 0 0 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-search input {
        display: none;
    }

    .header-search button {
        position: static;
        width: 28px;
        height: 58px;
        color: var(--color-text-primary);
    }

    .header-search svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.2;
    }

    .header-actions {
        order: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        max-width: none;
        flex: 0 0 auto;
    }

    /* Скрываем избранное на мобилке */
    .header-actions > a[aria-label="Избранное"] {
        display: none;
    }

    /* Профиль: показываем только кнопку-иконку */
    .header-profile-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* Размер значков: 36px вместо прежних 28. По 28 пикселей попасть пальцем
       заметно тяжелее - это меньше любого разумного минимума для касания. */
    .header-profile-wrap .header-action {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Корзина */
    .header-actions a[aria-label="Корзина"] {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-actions svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.1;
    }

    .header-catalog-btn {
        display: none;
    }

    .header-burger {
        order: 5;
        display: inline-flex !important;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }
}

/* На очень маленьких экранах — только логотип, профиль, бургер */
@media (max-width: 400px) {
    .header-container {
        gap: 6px;
        padding: 0 10px;
    }

    .header-search {
        display: none !important;
    }

    .header-actions a[aria-label="Корзина"] {
        display: none;
    }

    .header-profile-wrap .header-action {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .header-burger {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .product-brand,
    .viewed-brand,
    .product-stock,
    .viewed-stock {
        display: none;
    }

    .header-logo {
        width: 130px;
    }
}

/* Нижняя граница — экраны уже 340 пикселей возвращаются к настройкам
   блока 400: с этими значениями логотип, значки и бургер в строку уже
   не помещаются и вылезают за правый край. */
@media (max-width: 380px) and (min-width: 340px) {
    .header-container {
        gap: 14px;
        padding-left: 18px;
    }

    .header-logo {
        width: 142px;
    }

    .header-catalog-btn {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }
}

/* ---- Logo variants ---- */
.header-logo .logo-mobile { display: none; }
.header-logo .logo-desktop { display: block; }

/* На телефоне вместо полного логотипа стоит одно слово - без плитки слева,
   она в узкой шапке съедала бы место у поиска и бургера. Раньше это слово
   было набрано шрифтом заголовков, а не нарисовано: начертание и насыщенность
   не совпадали с логотипом. Теперь это сам логотип в векторе, поэтому здесь
   только размер - остальное берётся из общего правила .header-logo img. */
.header-logo img.logo-mobile {
    width: auto;
    max-height: 26px;
}

@media (max-width: 768px) {
    .header-logo .logo-desktop { display: none; }
    .header-logo .logo-mobile  { display: block; }
}

/* ---- Header burger (tablet + mobile only) ---- */
.header-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
    transition: var(--transition-default);
}

.header-burger:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

@media (max-width: 1250px) {
    .header-burger { display: inline-flex; }
}

/* ---- Mobile menu drawer ---- */
/* ---- Mobile / Tablet drawer menu ---- */
.mobile-menu {
    display: none;
}

@media (max-width: 1250px) {
    .mobile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9999;
        pointer-events: none;
    }

    .mobile-menu.is-open {
        pointer-events: auto;
    }

    .mobile-menu__overlay {
        position: absolute;
        inset: 0;
        background: rgba(9, 30, 66, 0.45);
        opacity: 0;
        transition: opacity 0.28s ease;
    }

    .mobile-menu.is-open .mobile-menu__overlay {
        opacity: 1;
    }

    .mobile-menu__panel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82vw;
        max-width: 340px;
        background: var(--color-white);
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
    }

    .mobile-menu.is-open .mobile-menu__panel {
        transform: translateX(0);
    }

    .mobile-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 16px 14px;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__logo img {
        height: 36px;
        object-fit: contain;
    }

    .mobile-menu__close {
        width: 38px;
        height: 38px;
        background: var(--color-accent-bg);
        color: var(--color-accent);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .mobile-menu__catalog {
        display: flex;
        align-items: center;
        gap: 12px;
        width: calc(100% - 32px);
        margin: 16px;
        padding: 0 20px;
        height: 50px;
        background: var(--color-accent);
        color: var(--color-white);
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 700;
        border: none;
        cursor: pointer;
    }

    .mobile-menu__catalog .header-catalog-icon span {
        border-color: var(--color-white);
    }

    .mobile-menu__nav {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__nav a {
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text-primary);
        border-bottom: 1px solid var(--color-border);
        text-decoration: none;
    }

    .mobile-menu__nav a:last-child {
        border-bottom: none;
    }

    .mobile-menu__nav a:hover {
        color: var(--color-accent);
        background: var(--color-accent-bg);
    }

    .mobile-menu__account {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__bottom-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text-primary);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__bottom-link:last-child {
        border-bottom: none;
    }

    .mobile-menu__bottom-link svg {
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        flex: 0 0 auto;
    }

    .mobile-menu__bottom-link:hover {
        color: var(--color-accent);
    }

    .mobile-menu__contacts {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 18px 20px;
        border-top: 1px solid var(--color-border);
    }

    .mobile-menu__contacts-phone {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-accent);
        text-decoration: none;
    }

    .mobile-menu__contacts-email {
        font-size: 14px;
        color: var(--color-text-secondary);
        text-decoration: none;
    }

    .mobile-menu__contacts-hours {
        font-size: 13px;
        color: var(--color-text-secondary);
    }
}

/* Full-width mobile menu on phones */
@media (max-width: 600px) {
    .mobile-menu__panel {
        width: 100%;
        max-width: 100%;
    }

    .mobile-menu__overlay {
        display: none !important;
    }
}

/* ==========================================================================
   Хлебные крошки
   Перенесены из account.css: используются на всех внутренних страницах,
   а не только в личном кабинете.
   ========================================================================== */


/* Breadcrumbs */
.account-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Тонкий ползунок — всегда виден */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-bg-secondary);
    padding-bottom: 6px;
}

.account-breadcrumbs::-webkit-scrollbar {
    height: 3px;
}

.account-breadcrumbs::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

.account-breadcrumbs::-webkit-scrollbar-thumb {
    background: var(--color-accent);
}

.account-breadcrumbs a {
    color: var(--color-accent);
    transition: var(--transition-default);
}

.account-breadcrumbs a:hover { color: var(--color-accent-hover); }

.account-breadcrumbs__sep { color: var(--color-placeholder); }


/* ------------------------------------------------------------------
   Отличия от макета, вынужденные обвязкой Битрикса.

   1. Корзину компонент оборачивает в свой <div id="bx_basket...">, поэтому
      ссылка перестаёт быть прямым потомком .header-actions. Обёртку делаем
      прозрачной для флекса, иначе на мобильном ломаются размеры и отступы.
   2. Поиск компонент тоже оборачивает — в <div class="bx-searchtitle">.
      У этой обёртки нет order, а у логотипа order:1, поэтому на мобильном
      она уезжала ЛЕВЕЕ логотипа. На мобильном её прячем целиком.
   3. Вместо схлопнутого поля из макета на мобильном показываем свою кнопку:
      она открывает модальное окно поиска. Порядок тот же, что в макете —
      лупа перед профилем.
   ------------------------------------------------------------------ */

.header-actions > div[id^="bx_basket"] {
    display: contents;
}

/* На десктопе поле поиска открыто, своя кнопка не нужна:
   иначе рядом со значком внутри поля появляется второй такой же. */
.header-action.header-mobile-search {
    display: none;
}

@media (max-width: 768px) {
    .header-bottom .bx-searchtitle {
        display: none;
    }

    /* В макете мобильный поиск — простая лупа, без кружка и рамки,
       в отличие от профиля и корзины. Повторяем. */
    .header-action.header-mobile-search {
        display: inline-flex;
        order: -1;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 0 !important;
        background: transparent;
    }
}

/* Раньше на экранах до 400px лупу прятали вслед за макетом. Но 390px — это
   ширина большинства iPhone, и поиска на них не оставалось ни в шапке, ни в
   шторке под бургером: искать товар с телефона было нечем. Поиск показываем
   на всех ширинах. */

/* ------------------------------------------------------------------
   Контакты в мобильной шторке.

   В макете там свои классы (.mobile-menu__contacts-phone и т.д.), но телефон,
   почта и режим работы приходят из тех же включаемых областей, что и в шапке.
   Заводить второй источник ради классов не стали — вместо этого повторяем
   оформление макета для той разметки, которую отдают включаемые области:
   ссылка .header-contact — это почта, span .header-contact — режим работы.
   ------------------------------------------------------------------ */
@media (max-width: 1250px) {
    /* В шапке эти классы на мобильном скрыты через !important — правило
       макета. Внутри шторки они, наоборот, нужны, поэтому возвращаем. */
    .mobile-menu__contacts .header-phone,
    .mobile-menu__contacts .header-contact {
        display: block !important;
    }

    .mobile-menu__contacts .header-phone {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-accent);
        text-decoration: none;
    }

    .mobile-menu__contacts a.header-contact {
        font-size: 14px;
        color: var(--color-text-secondary);
        text-decoration: none;
    }

    .mobile-menu__contacts span.header-contact {
        font-size: 13px;
        color: var(--color-text-secondary);
    }
}

/* ------------------------------------------------------------------
   Отступ под шапку.

   Старый /assets задаёт .page { padding-top: calc(156 * var(--width-multiplier)) }
   — компенсация под прежнюю фиксированную шапку. Новая шапка в потоке,
   и этот отступ превращался в 117 пустых пикселей на десктопе.
   Снимаем; собственные отступы секций макета остаются.
   ------------------------------------------------------------------ */
.page {
    padding-top: 0;
}

/* ------------------------------------------------------------------
   Верхний блок главной на мобильном.

   Все баннеры — большой и два промо — складываются в одну горизонтальную
   ленту. Виден ровно один баннер во всю ширину блока, следующий листается
   пальцем; лента ещё и сама переключается по таймеру (см. js/main.js).

   Отличие от макета: там баннеры занимают 85% и 75% ширины, так что край
   следующего подглядывает. По решению от 01.09 показываем по одному целиком.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .top-grid {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
        margin: 0 -8px var(--spacing-md);
        padding: 0 0 4px;
    }

    .top-grid::-webkit-scrollbar {
        display: none;
    }

    /* Правая колонка исчезает как контейнер: карточки встают в общую ленту */
    .promo-column {
        display: contents;
    }

    .top-grid .hero-card,
    .top-grid .promo-card {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .top-grid .hero-card {
        min-height: 280px;
    }

    .top-grid .promo-card {
        min-height: 200px;
        padding: 20px 18px;
    }

    .hero-dots {
        display: none;
    }
}

@media (max-width: 480px) {
    .top-grid .hero-card {
        min-height: 330px;
    }

    .top-grid .promo-card {
        min-height: 220px;
    }
}

/* ------------------------------------------------------------------
   Блок «Каталог».

   Полной переверстки по макету здесь пока нет — блок остаётся на своей
   разметке, приведены только ширина, сетка и типографика, чтобы он стоял
   в одну линию с верхним блоком и набирался теми же шрифтами.

   Баннер «Как получить максимальную скидку?» из блока убран, поэтому
   обёртка перестаёт быть двухколоночной, а плашки разделов расходятся
   на всю ширину.
   ------------------------------------------------------------------ */
.catalogue-block {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.catalogue-block__wrapper {
    display: block;
}

/* Колонки — minmax(0, 1fr), а не просто 1fr: у «1fr» нижняя граница —
   ширина самого длинного слова в плашке, и на телефоне две колонки с
   «видеонаблюдения» и «оборудование» становились шире экрана — правая
   уезжала за край (17.09.2026). min-width: 0 у плашки — то же самое для
   самого грид-элемента. */
.catalogue-block__catalogue {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.catalogue-block__card {
    min-width: 0;
}

@media (max-width: 1180px) {
    .catalogue-block__catalogue {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .catalogue-block__catalogue {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .catalogue-block__catalogue {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}


/* ------------------------------------------------------------------
   Единая сетка страницы.

   До этого сеток было три: старый .container из /assets тянулся по ширине
   экрана (1302 пикселя при 1440), шапка жила по своей 1280, а блоки макета
   давали 1248 — ничего не совпадало ни на десктопе, ни на мобильном, где
   поля вдобавок складывались дважды: сначала .container, потом контейнер
   секции.

   Теперь поля задаются в одном месте — у шапки и у .container, — а вложенные
   контейнеры секций своих не добавляют. Шапка и блоки встают по одной линии.
   ------------------------------------------------------------------ */
.container,
.header-container {
    /* !important — потому что старый /assets задаёт .container ширину от
       экрана тоже через !important, и на широких мониторах она перебивала
       сетку макета: контент оказывался шире шапки. */
    max-width: 1280px !important;
    /* Ширина по родителю, а не по экрану. На экранах до 768 старый
       /assets задаёт .container ширину calc(360 * var(--width-multiplier)),
       что равно ровно 100vw — то есть вместе с полосой прокрутки.
       На страницах длиннее экрана контейнер получался на 15 пикселей
       шире видимой области и весь контент уезжал вправо от макета. */
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.equipment-container,
.catalogue-block {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Старый /assets делает .page флекс-контейнером — это осталось от
   раскладки с боковой колонкой. Контейнер внутри становился флекс-
   элементом и на страницах длиннее экрана растягивался по содержимому,
   вылезая за видимую область на ширину полосы прокрутки. В макете
   <main> обычный блок — возвращаем блочную раскладку. */
.page {
    display: block;
}

@media (max-width: 768px) {
    /* Поля по макету: у контента 16, у шапки 12. Раньше и там и там
       стояло 8 — вместе с обнулённым полем ленты баннеров это давало
       тот же отступ на главной, но на остальных страницах контент
       уезжал к краю на 8 пикселей ближе, чем в макете. */
    .header-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Лента баннеров выходит за поля контейнера и идёт ближе к краю
       экрана — так в макете */
    .top-grid {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ------------------------------------------------------------------
   Размеры значков и картинок.

   Старый /assets растягивает svg и img на всю ширину родителя. В макете
   этого нет, поэтому значки разъезжались: полосы бургера выходили толще,
   а иконки в шторке раздувались до размеров экрана. Задаём размеры явно.
   ------------------------------------------------------------------ */
/* Значки из макета несут собственные width и height в разметке, а старый
   /assets растягивает любой svg на всю ширину родителя — стрелка фильтра
   и плюс «Показать ещё» раздувались до 212 пикселей. Возвращаем таким
   значкам их собственный размер. Значков сайта правило не касается:
   они рисуются через <use> из спрайта и размеров в разметке не имеют. */
svg[width][height] {
    width: auto;
    height: auto;
    flex: 0 0 auto;
}

.header-burger svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

/* Старый /assets делает ссылки блочными, и обёртка логотипа растягивалась
   на всю ширину шторки, добавляя лишнюю высоту под картинкой. */
.mobile-menu__logo {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
}

.mobile-menu__logo img {
    width: auto;
    height: 36px;
    max-width: none;
    object-fit: contain;
}

.mobile-menu__close svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.mobile-menu__bottom-link svg,
.mobile-menu__catalog svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Иконки в мобильной шапке жмутся к бургеру, как в макете: там поиск
   стоит отдельным элементом с отступом влево, и группа значков
   оказывается вплотную к кнопке меню.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .header-actions {
        margin-left: auto;
    }

    .header-burger {
        margin-left: 28px;
    }
}

/* ------------------------------------------------------------------
   Зазор между лентой баннеров и блоком «Каталог» — как в макете.
   ------------------------------------------------------------------ */
.top-grid {
    margin-bottom: 24px;
}

.catalogue-block {
    margin-top: 0;
    padding-top: 0;
    /* старый /assets даёт 46,5 пикселя снизу; в макете переход к следующей
       секции 42 */
    padding-bottom: 42px;
}

/* ------------------------------------------------------------------
   Выравнивание карточек товара.

   В макете все четыре названия случайно уместились в три строки, поэтому
   артикул, наличие и кнопки там стоят на одной линии. С реальными
   названиями длина разная, и строки разъезжаются. Закрепляем название на
   три строки: лишнее прячем многоточием, короткое добирает высоту.
   ------------------------------------------------------------------ */
.product-name {
    min-height: 63px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name a {
    color: inherit;
}

/* Строки характеристик выводятся всегда, даже если значения нет: вместо
   пропуска ставится прочерк, иначе карточки снова разъедутся. */

/* ------------------------------------------------------------------
   Заголовки секций.

   Старый /assets задаёт всем h2 отступ снизу calc(56 * var(--width-multiplier))
   — 42 пикселя на 1440. У .catalog-title и родственных есть свой отступ, он
   старый перебивает, а у .section-title его не было: заголовок тянул шапку
   блока вниз, и вкладки со ссылкой «Смотреть все» переставали стоять на одной
   линии с ним. В макете такого отступа нет.
   ------------------------------------------------------------------ */
.section-title {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Иконки из спрайта сайта.

   Корзина и избранное берутся из /spritemap.svg — те же значки, что на
   боевом telecomo.ru, вместо нарисованных в макете. У символов спрайта нет
   собственных размеров, а старый /assets растягивает svg на всю ширину
   родителя, поэтому размеры задаём явно.
   ------------------------------------------------------------------ */
.product-favorite svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Избранное в мобильной шапке — убрано.

   Решением от 01.09 значок показывали на всех экранах, но на телефоне
   места в шапке мало, а поиск для магазина важнее избранного. По решению
   от 11.09 в мобильной шапке остаются поиск, профиль и корзина; избранное
   доступно из шторки под бургером.

   Своего правила здесь больше нет: значок скрывает базовое правило
   .header-actions > a[aria-label="Избранное"] в блоке до 768px выше.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Узкие экраны: корзина остаётся в шапке.

   Макет на ширинах до 400 пикселей оставляет только логотип, профиль и
   бургер. Но 390 — это ширина большинства iPhone, и на них из шапки
   магазина пропадала корзина. Возвращаем её.

   Избранное здесь больше не показываем: место отдано поиску, без которого
   с телефона нельзя найти товар. Избранное осталось в шторке под бургером.
   Ширина сходится: логотип 154, три значка по 36 и бургер 40 — это 302 при
   доступных 358.
   ------------------------------------------------------------------ */
@media (max-width: 400px) {
    .header-actions a[aria-label="Корзина"] {
        display: inline-flex;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
    }
}

/* Значок в кнопке «В корзину»: на узких экранах он заменяет текст.
   Размер задаём явно — у символа спрайта своего нет. */
.card-cart-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
}

/* Значок в слайде УТП: в макете у svg есть атрибуты 56 на 56, но старый
   /assets перебивает их правилом svg { width: 100% } — значок раздувался
   на всю ширину слайдера. */
.utp-slide__icon svg {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}

/* Карточка новости: держим одинаковую высоту, как в макете.
   Заголовок и анонс ограничены строками — иначе длинные новости
   вытягивают карточку, и ряд разъезжается. */
.news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Высота карточки новости зафиксирована по макету: иначе ряд скачет
   вслед за длиной анонсов, которые у нас свои. */
.news-card {
    min-height: 226px;
}

/* ------------------------------------------------------------------
   Низ подвала: платёжные системы, документы, реквизиты.

   Классы этого блока стилей не имели вовсе, поэтому колонки не
   раскладывались, ссылки шли сплошной строкой, а картинку платёжных
   систем старый /assets растягивал на всю ширину.
   ------------------------------------------------------------------ */
.footer-payments {
    margin-top: 16px;
}

.footer-payments img {
    width: auto;
    max-width: 100%;
    height: 28px;
    object-fit: contain;
}

.footer-legal .footer-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-legal__docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.footer-legal__docs a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.footer-legal__docs a:hover {
    color: var(--color-accent);
}

.footer-legal__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 768px) {
    .footer-legal__docs {
        flex-direction: column;
        gap: 8px;
    }
}

/* ------------------------------------------------------------------
   Верхний ряд шапки: текст по нижнему краю логотипа.

   Ряд был выровнен по центру, из-за чего телефон, почта, режим работы и
   меню висели на 11 пикселей выше низа логотипа и казались оторванными
   от него. Прижимаем к нижнему краю.
   ------------------------------------------------------------------ */
.header-top {
    align-items: end;
    padding-bottom: 12px;
}

@media (max-width: 1250px) {
    /* На планшете и мобильном ряд снова становится флексом по центру */
    .header-top {
        align-items: center;
        padding-bottom: 0;
    }
}

/* ------------------------------------------------------------------
   Единый стиль блоков и обводок.

   Было вразнобой: у карточки товара рамка 1 пиксель, у брендов, шагов
   покупки и новостей — 2, у плашек каталога рамки не было вовсе.
   При наведении подсветка тоже отличалась: где-то только рамка, где-то
   рамка с подъёмом и тенью, у шагов покупки ничего.

   Приводим к одному: рамка 2 пикселя, при наведении акцентная рамка,
   лёгкий подъём и тень.
   ------------------------------------------------------------------ */
.product-card,
.viewed-card,
.catalogue-block__card {
    border: 2px solid var(--color-border);
}

.catalogue-block__card,
.brand-card,
.buy-step {
    transition: var(--transition-default);
}

.catalogue-block__card:hover,
.brand-card:hover,
.buy-step:hover,
.product-card:hover,
.viewed-card:hover,
.news-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
}

/* ------------------------------------------------------------------
   Совсем узкие экраны: всё содержимое шапки должно помещаться.

   На 336 пикселях ряд не влезал: логотип 142, три значка, бургер 44 и
   отступы по 14 давали 334 при доступных 310 — бургер уезжал за правый
   край экрана. Ужимаем отступы и поля.

   Профиль держим того же размера, что поиск и корзина, — 36 пикселей.
   Раньше здесь его ужимали до 28 ради ряда из четырёх значков; теперь в
   шапке их три (избранное переехало в шторку), и место есть.
   ------------------------------------------------------------------ */
@media (max-width: 400px) {
    .header-profile-wrap .header-action {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
}

@media (max-width: 380px) {
    .header-container {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-actions {
        gap: 4px;
    }

    .header-burger {
        margin-left: 8px;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }
}

/* ------------------------------------------------------------------
   Базовый вид плашки каталога на главной (фон, поля, картинка,
   типографика названия) — раньше держался только на старом /assets и
   нигде не был перенесён в новый слой; из точечных правок здесь были
   только рамка, hover и разрешение переноса текста ниже. Пока /assets
   был подключён, это было незаметно — теперь переносим полностью.
   ------------------------------------------------------------------ */
.catalogue-block__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 24px 20px;
    background: var(--color-bg-secondary);
}

.catalogue-block__card-image {
    width: 100%;
    height: 110px;
    object-fit: contain;
}

/* Название раздела на плашке — заголовочным шрифтом, как и такие же
   плашки на странице каталога (.catpage-card__name): это имя раздела,
   а не строка перечня. Раньше здесь был шрифт основного текста
   обычного начертания, и две сетки разделов выглядели по-разному. */
.catalogue-block__card-name {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    font-family: var(--font-headers);
    font-size: var(--heading-card);
    line-height: var(--heading-card-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .catalogue-block__card-image {
        height: 80px;
    }

    .catalogue-block__card-name {
        font-size: var(--font-size-text-s);
        line-height: var(--line-height-text-s);
    }
}

/* Телефон, две колонки: у плашки шириной 160–175 пикселей на текст
   остаётся 150, а «видеонаблюдения» в заголовочном шрифте 14px — 170.
   Уменьшаем боковые поля и кегль, чтобы слово помещалось на большинстве
   экранов; где всё же не помещается — браузер переносит по слогам
   (hyphens, html lang="ru"; Safari и Chrome на телефонах русский знают),
   а без словаря — рвёт слово, но не вылезает за плашку (break-word). */
@media (max-width: 640px) {
    .catalogue-block__card {
        padding: 12px 10px 14px;
    }

    .catalogue-block__card-name {
        font-size: 13px;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 400px) {
    .catalogue-block__card-name {
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------
   Названия разделов каталога не обрезаем.

   Старый /assets ограничивает подпись двумя строками и прячет остаток,
   поэтому «Системы безопасности и видеонаблюдения» обрывалось на полуслове.
   Взамен — запас высоты на 2 строки у всех плашек сразу (min-height),
   иначе ряд с длинным названием («Серверное оборудование и системы
   хранения») выше остальных, и рамки по сетке визуально не совпадают.
   ------------------------------------------------------------------ */
.catalogue-block__card-name {
    -webkit-line-clamp: none;
    overflow: visible;
    display: block;
    /* 3 строки, не 2: «Серверное оборудование и системы хранения» —
       самое длинное название из реальных разделов — реально
       переносится в 3 строки при текущей ширине плашки. */
    min-height: calc(1.5em * 3);
}

@media (max-width: 768px) {
    .catalogue-block__card-name {
        /* На узких экранах то же название переносится в 4 строки —
           карточки в 2 колонки уже, чем в 3-5 на десктопе. */
        min-height: calc(var(--line-height-text-s) * 1em * 4);
    }
}

/* Высоту плашки старый /assets задаёт жёстко, от ширины экрана. Длинные
   названия в неё не помещались и вылезали наружу. Отпускаем высоту по
   содержимому: с запасом на 2 строки названия (выше) все плашки и так
   получаются одной высоты. */
.catalogue-block__card {
    height: auto;
}

/* ------------------------------------------------------------------
   Хлебные крошки и верхний отступ страницы.

   Разметку крошек печатает bitrix:breadcrumb — её не трогаем, там
   микроразметка schema.org. Оформление берём из макета
   (.account-breadcrumbs): 13 пикселей, серый, разделитель «›».
   Старый /assets давал списку 46 пикселей отступа сверху и своё поле
   снизу — из-за этого между крошками и заголовком зияла дыра.

   В макете крошки лежат внутри страницы и верхний отступ (32) задаёт
   она сама. У нас их печатает header.php над контентом, поэтому этот
   отступ переносим на них, а расстояние до заголовка каждая страница
   задаёт сама.
   ------------------------------------------------------------------ */
.page-breadcrumbs {
    padding-top: var(--spacing-lg);
    margin: 0;
}

.page-breadcrumbs .breadcrumbs {
    display: flex;
    /* Одной строкой, как в макете: на узких экранах крошки не
       переносятся, а прокручиваются вбок. */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.page-breadcrumbs .breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.page-breadcrumbs .breadcrumbs li + li::before {
    content: '›';
    color: var(--color-text-secondary);
}

.page-breadcrumbs .breadcrumbs a,
.page-breadcrumbs .breadcrumbs span {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
}

.page-breadcrumbs .breadcrumbs a:hover {
    color: var(--color-accent);
}

/* Старый /assets задаёт секциям крупные вертикальные поля, посчитанные
   от ширины экрана. На переверстанных страницах отступы задают сами
   блоки, поэтому у обёртки их снимаем. Выбираем секцию по содержимому,
   чтобы не задеть страницы, которые ещё не переверстаны. */
.section:has(> .catpage),
.section:has(.catalog-layout) {
    padding-top: 0;
    padding-bottom: 0;
}

/* До заголовка разделов — 20 пикселей, как в макете */
.catpage {
    padding-top: 20px;
}

/* ------------------------------------------------------------------
   Хлебные крошки на узких экранах.

   Старый /assets держит список в одну строку: max-height 38 и
   overflow auto. Когда крошки не помещаются и переносятся, вторая
   строка обрезалась пополам. Разрешаем расти по содержимому.
   ------------------------------------------------------------------ */
.page-breadcrumbs .breadcrumbs {
    max-height: none;
    overflow-y: visible;
}

/* ------------------------------------------------------------------
   Кнопка карточки без значка.

   На узких экранах у кнопки «В корзину» прячется текст и остаётся
   значок. Но у товаров без цены вместо неё стоит «Подробнее», значка
   там нет — и кнопка оказывалась пустой. Такой кнопке текст оставляем.
   ------------------------------------------------------------------ */
.card-cart-btn:not(:has(.card-cart-icon)) {
    font-size: 13px;
}

.card-cart-btn:not(:has(.card-cart-icon)) .card-cart-text {
    display: inline;
}

/* ------------------------------------------------------------------
   Текстовые блоки под контентом: описание раздела и текст каталога.

   Оба приходят из админки готовой разметкой. Рамки у них нет — это
   обычный текст в потоке страницы, по той же сетке, что и остальные
   блоки. Размеры задаём явно каждому элементу: старый /assets считает
   их от ширины экрана, и списки шли то 12 пикселей на десктопе, то 19
   на мобильной, а межстрочный интервал заголовка доходил до 43.
   ------------------------------------------------------------------ */
.catalog-seo,
.product-list__description {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 var(--spacing-lg);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.catalog-seo__title,
.product-list__description h2 {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm);
    /* В этих заголовках попадаются слова, которые на телефоне не влезают
       в строку целиком — «телекоммуникационного», «видеонаблюдения».
       Разрешаем перенос внутри слова, иначе хвост торчит за край блока. */
    overflow-wrap: break-word;
}

/* Заголовки внутри текста раздела — их пишет контент-менеджер из
   админки. Ставим ступень подраздела: крупнее абзацев, но мельче
   заголовка самого блока над ними. */
.catalog-seo__text h2,
.catalog-seo__text h3,
.product-list__description h3 {
    font-family: var(--font-headers);
    font-size: var(--heading-sub);
    line-height: var(--heading-sub-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0 8px;
}

.catalog-seo__text,
.catalog-seo__text p,
.catalog-seo__text ul li,
.catalog-seo__text ol li,
.product-list__description p,
.product-list__description ul li,
.product-list__description ol li {
    /* Селектор с ul/ol намеренно: старый /assets задаёт размер
       правилом .product-list__description ul li, и без такой же
       вложенности он побеждает. */
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.catalog-seo__text p,
.product-list__description p {
    margin: 0 0 12px;
}

.catalog-seo__text ul,
.catalog-seo__text ol,
.product-list__description ul,
.product-list__description ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.catalog-seo__text ul li,
.catalog-seo__text ol li,
.product-list__description ul li,
.product-list__description ol li {
    margin-bottom: 4px;
}

.catalog-seo__text p:last-child,
.catalog-seo__text ul li:last-child,
.product-list__description p:last-child,
.product-list__description ul li:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Кнопка «В корзину» на узких экранах — во всех карточках сайта.

   Раньше подпись сменялась значком только ниже 480, и то лишь у
   карточек главной. Порог единый — 768, как у остальной мобильной
   вёрстки: и на главной, и в каталоге, и в «Вы смотрели ранее».
   Кнопки без значка это правило не трогает: у них подпись остаётся,
   иначе кнопка «Подробнее» была бы пустой.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .card-cart-btn {
        gap: 0;
    }

    .card-cart-text {
        display: none;
    }

    .card-cart-icon {
        display: inline-flex;
        align-items: center;
    }
}

/* ------------------------------------------------------------------
   Кнопка корзины в карточке товара: служебная обёртка компонента.

   Компонент оборачивает кнопку в div — через него он подменяет её на
   ссылку «В корзине» после добавления товара. Обёртка не растягивалась
   на свою колонку, и в блоке похожих товаров кнопка сжималась до
   ширины значка — 18 пикселей вместо 80.
   ------------------------------------------------------------------ */
.card-actions > div {
    width: 100%;
    min-width: 0;
}

/* Экраны уже 320 пикселей: логотип, значки и бургер перестают помещаться
   в строку — сжимаем логотип и возвращаем бургеру уменьшенный размер. */
@media (max-width: 319px) {
    .header-container {
        gap: 6px;
        padding: 0 8px;
    }

    .header-logo {
        width: 112px;
    }

    .header-burger {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }
}

/* ------------------------------------------------------------------
   Универсальный переключатель вкладок (main.js: .tab__trigger клик
   ставит .is-active и на кнопке, и на соответствующей .tab-панели).
   Используется на регистрации/авторизации (Физическое/Юридическое
   лицо) и в табах карточки товара. Видимость и позиционирование самих
   .tab-панелей никогда не переносились из /assets — без /assets все
   вкладки показывались одновременно, друг под другом.
   ------------------------------------------------------------------ */
.tab {
    z-index: -1;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 0.2em, 0);
    transition: 0.35s;
}

.tab__container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.tab:not(:first-child) {
    position: absolute;
    left: 0;
    top: 0;
}

.tab.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------------
   ЛЕНТА БАННЕРОВ НА ТЕЛЕФОНЕ — СТОЛБИКОМ ПОД АНИМАЦИЕЙ.

   На широком экране раскладка макета не меняется: анимация слева,
   колонка из двух статичных промо справа.

   На узких экранах по макету все три баннера лежали горизонтальной
   лентой со скролл-снапом — их листали пальцем. С играющим баннером так
   не работает: статичные предложения остаются спрятаны за свайпом и их
   просто не видят. Поэтому здесь лента разворачивается в столбик.

   С 17.09.2026 анимация на телефоне скрыта совсем (решение Аделины):
   в столбике остаются только две статичные карточки. Сам ролик на таких
   экранах и не грузится — см. inc/home_hero.php.

   Правило идёт последним и перебивает карусельные блоки выше
   (768px и 480px).
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .top-grid {
        display: flex;
        flex-direction: column;
        /* Промежуток больше, чем у карусели: статичные карточки не должны
           начинаться сразу под играющим кадром, иначе они лезут в него
           и анимацию не рассматривают. */
        gap: var(--spacing-md);
        overflow: visible;
        scroll-snap-type: none;
        /* карусель уходила под края экрана отрицательными полями — столбику
           они не нужны */
        margin: 0 0 var(--spacing-md);
        padding: 0;
    }

    /* колонка промо остаётся «прозрачной», карточки — прямые элементы ленты */
    .promo-column { display: contents; }

    .top-grid .hero-card,
    .top-grid .promo-card {
        flex: 0 0 auto;
        min-width: 0;
        scroll-snap-align: none;
    }

    /* анимированный баннер на телефоне не показываем */
    .top-grid .hero-card { display: none; }

    .top-grid .promo-card { min-height: 170px; }
}

/* End */


/* Start:/local/templates/nl_telecomo/css/animations.css?17895622157206*/
/* ==========================================================================
   ANIMATIONS & DYNAMIC ENHANCEMENTS
   ========================================================================== */

/* ===== SCROLL FADE-UP ===== */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Stagger delays for grid children */
.stagger-children > .fade-up:nth-child(1)  { transition-delay: 0s; }
.stagger-children > .fade-up:nth-child(2)  { transition-delay: 0.07s; }
.stagger-children > .fade-up:nth-child(3)  { transition-delay: 0.14s; }
.stagger-children > .fade-up:nth-child(4)  { transition-delay: 0.21s; }
.stagger-children > .fade-up:nth-child(5)  { transition-delay: 0.28s; }
.stagger-children > .fade-up:nth-child(6)  { transition-delay: 0.35s; }
.stagger-children > .fade-up:nth-child(7)  { transition-delay: 0.42s; }
.stagger-children > .fade-up:nth-child(8)  { transition-delay: 0.49s; }
.stagger-children > .fade-up:nth-child(9)  { transition-delay: 0.56s; }
.stagger-children > .fade-up:nth-child(10) { transition-delay: 0.63s; }

/* ===== STATS COUNTER BAR ===== */
/* ===== УТП-СЛАЙДЕР ===== */
.utp-slider {
    margin: var(--spacing-lg) 0 var(--spacing-xl);
    background: linear-gradient(135deg, #3b0f82 0%, #722ed1 55%, #2a4ec4 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.utp-slides {
    position: relative;
    min-height: 200px;
}

.utp-slide {
    display: none;
    align-items: center;
    gap: 40px;
    padding: 48px 48px 40px;
    animation: utp-in 0.5s ease;
}

.utp-slide.is-active {
    display: flex;
}

@keyframes utp-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.utp-slide__icon {
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
}

.utp-slide__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.utp-slide__kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.utp-slide__headline {
    font-family: var(--font-headers);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.utp-slide__headline span {
    color: #c9a0ff;
}

.utp-slide__text {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    max-width: 560px;
}

.utp-slide__stat {
    flex-shrink: 0;
    text-align: right;
    padding-left: 40px;
    border-left: 1px solid rgba(255,255,255,0.15);
}

.utp-slide__num {
    font-family: var(--font-headers);
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

.utp-slide__num span {
    font-size: 36px;
    color: #c9a0ff;
}

.utp-slide__num-label {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-top: 6px;
}

.utp-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 48px 20px;
}

.utp-dots {
    display: flex;
    gap: 8px;
}

.utp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.utp-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

.utp-progress {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.utp-progress__bar {
    height: 100%;
    width: 0%;
    background: rgba(255,255,255,0.7);
    border-radius: 2px;
    transition: width linear;
}

/* ===== HERO SLIDER FADE ===== */
.hero-slide {
    transition: opacity 0.65s ease;
}

/* ===== SCROLL-TO-TOP BUTTON ===== */
/* ===== CHAT BUTTON ===== */
.chat-btn {
    position: fixed;
    bottom: 92px;
    right: 32px;
    width: 54px;
    height: 54px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    box-shadow: 0 4px 16px rgba(114, 46, 209, 0.4);
    transition: background 0.2s, transform 0.2s;
    position: fixed;
}

.chat-btn:hover {
    background: var(--color-accent-hover);
    transform: scale(1.08);
}

.chat-btn__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.4;
    animation: chat-pulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes chat-pulse {
    0%   { transform: scale(1); opacity: 0.4; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ===== SCROLL TOP ===== */
.scroll-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 46px;
    height: 46px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s, transform 0.3s, background 0.2s;
    pointer-events: none;
}
.scroll-top-btn.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.scroll-top-btn:hover { background: var(--color-accent-hover); }

/* ===== CATALOG CARD HOVER IMAGE ZOOM ===== */
.catalog-img-wrap {
    overflow: hidden;
}
.catalog-img {
    transition: transform 0.35s ease;
}
.catalog-card:hover .catalog-img {
    transform: scale(1.06);
}

/* ===== PRODUCT CARD HOVER LIFT ===== */
.product-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(114, 46, 209, 0.10);
}

/* ===== NEWS CARD HOVER ===== */
.news-card {
    transition: box-shadow 0.25s ease;
}
.news-card:hover {
    box-shadow: 0 6px 20px rgba(9, 30, 66, 0.10);
}
.news-img {
    transition: transform 0.35s ease;
    overflow: hidden;
}
.news-card:hover .news-img {
    transform: scale(1.03);
}

/* brands marquee moved to style.css */

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .stats-bar {
        grid-template-columns: 1fr 1fr;
    }
    .utp-slide {
        flex-direction: column;
        gap: 20px;
        padding: 32px 24px 24px;
        align-items: flex-start;
    }
    .utp-slide__stat {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-left: 0;
        padding-top: 16px;
        text-align: left;
        width: 100%;
    }
    .utp-slide__num { font-size: 44px; }
    .utp-slide__headline { font-size: 20px; }
    .utp-controls { padding: 0 24px 16px; }

    .scroll-top-btn {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    /* disable on mobile — elements visible immediately */
    .fade-up {
        opacity: 1;
        transform: none;
    }
}

/* End */


/* Start:/local/templates/nl_telecomo/css/auth.css?178956221523684*/
/* ==========================================================================
   AUTH — login drawer + registration page
   Follows site design system: no border-radius, Unbounded headers,
   Wix Madefor Display body, CSS vars from style.css
   ========================================================================== */

/* ===== TOP TABS ===== */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
}

.auth-tab {
    padding: 12px var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-default), border-color var(--transition-default);
    white-space: nowrap;
}
.auth-tab:hover { color: var(--color-text-primary); }
.auth-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
/* Full-width content (no sidebar) */
.auth-layout--full {
    display: block;
}

/* ===== SECTION LABEL ===== */
.auth-section-label {
    font-family: var(--font-headers);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}
.auth-register-form > .auth-section-label:first-child {
    margin-top: 0;
}

/* ===== FORM GRID ===== */
.auth-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.auth-field--span2 {
    grid-column: 1 / -1;
}

/* ===== FIELD ===== */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.auth-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ===== INPUT WRAP ===== */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* ===== INPUT ===== */
.auth-input {
    width: 100%;
    height: 46px;
    border: var(--input-border-width) solid var(--color-border);
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-default);
    /* inherit global border-radius: 0 */
}
.auth-input:focus {
    border-color: var(--color-accent);
}
.auth-input::placeholder {
    color: var(--color-placeholder);
    font-weight: 400;
}
.auth-input--disabled,
.auth-input[disabled] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}
/* Password inputs get right padding for eye button */
.auth-input--password {
    padding-right: 46px;
}
/* Inputs with action button */
.auth-input-wrap--action .auth-input {
    padding-right: 118px;
}
/* Inputs with check icon */
.auth-input-wrap--check .auth-input {
    padding-right: 38px;
}

/* ===== EYE BUTTON =====
   Раньше размер и переключение (открытый/закрытый глаз) держались
   только на старом /assets — своих правил под .input__view-on/-off не
   было вообще, после снятия /assets иконки разъезжались во весь блок
   (наследовали общий img,svg{max-width:100%;height:auto} из
   common.css) и показывались обе сразу. */
.auth-eye-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0;
    line-height: 1;
    transition: color var(--transition-default);
}
.auth-eye-btn:hover { color: var(--color-accent); }

.auth-eye-btn svg {
    width: 18px;
    height: 18px;
}

.input__view-on {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.is-view .input__view-off {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.is-view .input__view-on {
    opacity: 1;
    visibility: visible;
    position: static;
}

/* ===== INLINE ACTION BUTTON (Верификация) ===== */
.auth-input-action-btn {
    position: absolute;
    right: 6px;
    height: 34px;
    padding: 0 14px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-default);
}
.auth-input-action-btn:hover { background: var(--color-accent-hover); }

/* ===== CHECK ICON (INN) ===== */
.auth-input-check {
    position: absolute;
    right: 12px;
    display: none;
    align-items: center;
    pointer-events: none;
}
.auth-input-check.is-visible { display: flex; }

/* ===== CONSENTS ===== */
.auth-consents {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: var(--spacing-sm) 0;
}

.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}
.auth-checkbox-label a {
    color: var(--color-accent);
    text-decoration: none;
}
.auth-checkbox-label a:hover { text-decoration: underline; }

.auth-checkbox {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ===== ACTION BUTTONS ===== */
.auth-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: 4px;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--spacing-lg);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-default), color var(--transition-default);
    /* inherit border-radius: 0 */
}

.auth-btn--primary {
    background: var(--color-accent);
    color: #fff;
}
.auth-btn--primary:hover { background: var(--color-accent-hover); }

.auth-btn--ghost {
    background: none;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
}
.auth-btn--ghost:hover {
    background: var(--color-accent-bg);
}

/* ===== REGISTER FORMS ===== */
.auth-register-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.auth-register-form--hidden {
    display: none;
}

/* ===== LOGIN DRAWER ===== */
.login-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}
.login-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.login-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 30, 66, 0.5);
    opacity: 0;
    transition: opacity 0.25s;
}
.login-drawer.is-open .login-drawer__overlay {
    opacity: 1;
}

.login-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -2px 0 24px rgba(9, 30, 66, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    box-sizing: border-box;
    overflow-y: auto;
}
.login-drawer.is-open .login-drawer__panel {
    transform: translateX(0);
}

.login-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.login-drawer__title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0;
}

.login-drawer__close {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 4px;
    line-height: 1;
    transition: color var(--transition-default);
}
.login-drawer__close:hover { color: var(--color-text-primary); }

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.login-form__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.login-form__forgot {
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}
.login-form__forgot:hover { text-decoration: underline; }

.login-form__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--spacing-xs);
}
.login-form__actions .auth-btn {
    width: 100%;
}

.login-form__test-links {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form__test-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.login-form__test-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 6px 10px;
    background: var(--color-bg-secondary);
    transition: color var(--transition-default), background var(--transition-default);
}
.login-form__test-link:hover {
    color: var(--color-accent);
    background: var(--color-accent-bg);
}
.login-form__test-link svg { flex-shrink: 0; }

/* ===== MOBILE ===== */
@media (max-width: 767px) {

    /* Tabs scroll on small screens */
    .auth-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    /* Single column form */
    .auth-form-grid {
        grid-template-columns: 1fr;
    }
    .auth-field--span2 {
        grid-column: 1;
    }

    /* Verification button: full width below input */
    .auth-input-wrap--action {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .auth-input-wrap--action .auth-input {
        padding-right: 14px;
    }
    .auth-input-action-btn {
        position: static;
        height: 44px;
        width: 100%;
        font-size: 14px;
    }

    /* Actions stacked */
    .auth-actions {
        flex-direction: column;
    }
    .auth-actions .auth-btn {
        width: 100%;
        text-align: center;
    }

    /* Login drawer full width on mobile */
    .login-drawer__panel {
        width: 100%;
        padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    }
}

/* ==========================================================================
   ДОПОЛНЕНИЯ К МАКЕТУ — эпик 9
   Формы обслуживает старый слой /assets, поэтому к классам макета
   добавляются перебивки его правил и оформление узлов, которых в макете
   нет: поле города, служебная подсказка о шифровании пароля, сообщения
   об ошибках проверки. Снимаются вместе со слоем /assets.
   ========================================================================== */

/* Заголовок страницы — в общей стилистике сайта. */
.auth-page__title {
    font-family: var(--font-headers);
    font-size: var(--heading-page);
    font-weight: var(--heading-weight);
    line-height: var(--heading-page-lh);
    /* Отступ от хлебных крошек, как на остальных страницах (24px) —
       был не задан, заголовок лип прямо к крошкам. */
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0;
}

@media (max-width: 600px) {
    .auth-page__title { font-size: var(--heading-page-mobile); }
}

/* Экран "вы авторизованы" (auth/index.php) — раньше был голым <p> без
   единого класса, единственная страница входа, которую не переносили
   в новый дизайн вообще. */
.auth-page__text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text-m);
    line-height: var(--line-height-text-m);
    margin-bottom: var(--spacing-md);
}

/* Активную вкладку движок /assets помечает классом is-active. */
.auth-tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.auth-tab span {
    font: inherit;
    color: inherit;
}

/* /assets красит кнопку запроса кода в цвет фона — подпись пропадает. */
.auth-input-action-btn.verification {
    color: #fff;
}

/* Поле города рисует компонент Битрикса: рамка у него на обёртке,
   а ввод лежит внутри — приводим обёртку к виду поля из макета. */
.auth-field--city .bx-ui-sls-input-block {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px 0 36px;
    border: var(--input-border-width) solid var(--color-border);
    background: #fff;
    transition: border-color var(--transition-default);
}

.auth-field--city .bx-sls .dropdown-icon {
    left: 12px;
    margin: 0;
}

/* Ошибка города. Справочник рисует поле сам, обёртки .input__wrapper внутри
   нет - подпись кладём в саму ячейку, поэтому ячейке нужна точка отсчёта.
   Рамку красим у видимого блока: у самого ввода её нет. */
.auth-field--city {
    position: relative;
}

.auth-field--city:has(.just-validate-error-field) .bx-ui-sls-input-block {
    border-color: var(--color-error);
}

.auth-field--city .bx-ui-sls-container {
    width: 100%;
    height: 100%;
}

.auth-field--city .bx-ui-sls-fake,
.auth-field--city .bx-ui-sls-route {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    background: transparent;
    outline: none;
}

.auth-field--city .dropdown-fade2white {
    display: none;
}

/* Служебная подсказка Битрикса про шифрование пароля. */
.auth-secure-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Сообщения проверки полей: движок кладёт их внутрь обёртки поля. */
.auth-input-wrap {
    padding-bottom: 0;
}

.auth-field .just-validate-error-label {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-error);
}

.auth-field .just-validate-error-field,
.auth-input.just-validate-error-field {
    border-color: var(--color-error);
}

.auth-form-grid {
    row-gap: var(--spacing-md);
}

/* Согласия: ошибка встаёт под строкой, а не поверх соседней. */
.auth-consents {
    position: relative;
}

.auth-checkbox-label {
    position: relative;
}

.auth-checkbox-label .just-validate-error-label {
    position: absolute;
    top: 100%;
    left: 26px;
    font-size: 12px;
    color: var(--color-error);
}

/* Ответ сервера о регистрации. */
.auth-alert {
    padding: 12px 16px;
    margin-bottom: var(--spacing-md);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--color-border);
}

.auth-alert--ok {
    background: #f6ffed;
    border-color: #b7eb8f;
    color: #3a7a1e;
}

.auth-alert--error {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-text-primary);
}

/* Значок проверки ИНН: показывает и красит его обработчик /assets.

   Раньше здесь не было вертикальной привязки: при position: absolute без
   top браузер оставляет элемент там, где он стоял бы в потоке, — то есть
   сразу под полем. Значок из-за этого висел под рамкой, а не внутри неё.
   Прижимаем к середине поля. */
.auth-input-wrap--check .input__decor {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.auth-input-wrap--check .input__decor svg {
    width: 16px;
    height: 16px;
}

/* Шторка входа лежит в модалке старого слоя (.modal--right), своей
   «шапки» у неё нет — заголовок и отступы задаём по месту. */
.login-form .login-drawer__title {
    margin-bottom: var(--spacing-md);
}

.login-form__forgot {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    cursor: pointer;
}

.login-form__description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

.auth-captcha {
    display: block;
    margin-bottom: 8px;
}

/* Пояснение под полем — например требования к паролю на странице его
   смены (их отдаёт групповая политика Битрикса). */
.auth-hint {
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

/* Вкладки лежат на движке .tag из /assets, а он считает размеры от ширины
   экрана: на планшете подпись вырастала до 38 пикселей. Возвращаем макет. */
.auth-tabs .auth-tab,
.auth-tabs .auth-tab span {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.auth-tabs .auth-tab span {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit;
}

.auth-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
}

@media (max-width: 600px) {
    .auth-tabs .auth-tab {
        padding: 10px var(--spacing-sm);
    }
}

/* Активная вкладка от /assets приходит залитой плашкой — в макете это
   подчёркивание. Заодно убираем вертикальную полосу прокрутки, которую
   лента получает из-за собственной высоты плашек. */
.auth-tabs {
    overflow-y: hidden;
}

.auth-tabs .auth-tab,
.auth-tabs .auth-tab.is-active {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
}

.auth-tabs .auth-tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Отдельная страница входа и восстановления пароля: макета для них нет —
   в нём это шторка. Даём форме ту же ширину, что у шторки, иначе поля
   растягиваются на всю страницу. */
.auth-page .login-form {
    max-width: 420px;
}

/* --- Подтверждение почты при регистрации ---
   Тот же вид, что в оформлении заказа (.checkout-confirm в style.css
   компонента sale.order.ajax): акцентная полоса слева и светлая подложка,
   когда от клиента ждут действия; спокойная белая, когда всё готово.
   Различаются заливкой, а не цветом рамки, — чтобы «готово» не тянуло
   на себя внимание. */
.auth-confirm {
    margin-top: 8px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-text-primary);
    font-size: var(--font-size-text-s);
    line-height: 1.5;
}

.auth-confirm--ok {
    background: var(--color-white);
    color: var(--color-text-secondary);
}

.auth-confirm--ok b { color: var(--color-accent); }

.auth-confirm--warn {
    border-left-color: var(--color-error);
    background: var(--color-error-bg);
}

.auth-confirm--warn b { color: var(--color-error); }

/* Ссылка внутри плашки — как .checkout-confirm__btn: не кнопка, а
   подчёркнутое действие в строке текста. */
.auth-confirm__btn {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.auth-confirm__btn:hover { color: var(--color-accent-hover); }

/* Поле ИНН на регистрации юрлица размечено как .auth-field.input — лишний
   класс достался от старого движка. Из-за него на подпись ложится правило
   .input label из modals.css (16px), и «ИНН» выглядит крупнее соседних
   подписей. Специфичности .auth-label не хватает, поэтому уточняем
   селектор родителем. */
.auth-field .auth-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* --- Подсказки ФИО ---
   Тот же вид, что в оформлении заказа (.checkout-suggest): список под полем,
   белый, с тенью, вариант подсвечивается акцентом. */
.auth-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-top: none;
    background: var(--color-white);
    box-shadow: 0 6px 16px rgba(9, 30, 66, .12);
}

.auth-suggest__item {
    display: block;
    width: 100%;
    padding: 10px 13px;
    border: none;
    background: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.auth-suggest__item:hover,
.auth-suggest__item:focus {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

/* End */


/* Start:/local/templates/nl_telecomo/css/modals.css?178956221518187*/
/* ==========================================================================
   MODAL SYSTEM — общий для всех попапов сайта (эпик 12)
   --------------------------------------------------------------------------
   Вход, регистрация, восстановление пароля, поиск, «купить в 1 клик»,
   запрос цены/заказа, обратная связь, подтверждение почты. Раньше вся эта
   вёрстка жила только в старом /assets/main.css — макета под неё не было
   ни у одной из 22 страниц редизайна, поэтому она не переехала вместе с
   остальным сайтом. Логику (JS) не трогаем: assets/main.js как открывал
   попап добавлением класса is-active на .modal (и is-lock-scroll/
   a-modal-is-opened на <html>), так и продолжает — здесь только вёрстка
   под тот же контракт классов.
   ========================================================================== */

.screen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    /* rgba(9,30,66) — то же самое, что --color-text-primary */
    background: rgba(9, 30, 66, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-slow);
}

.a-modal-is-opened .screen {
    opacity: 1;
    visibility: visible;
}

html.is-lock-scroll,
html.is-lock-scroll body {
    overflow: hidden;
}

/* --- Оболочка модалки: справа выезжающая панель (по умолчанию) --------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    transition: var(--transition-slow);
    pointer-events: none;
}

.modal.is-active {
    opacity: 1;
}

.modal__content {
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
    background: var(--color-white);
    width: 480px;
    max-width: 100%;
    height: 100%;
    padding: var(--spacing-xl);
    transform: translate3d(80px, 0, 0);
    transition: var(--transition-slow);
    pointer-events: none;
}

.modal.is-active .modal__content {
    transform: translate3d(0, 0, 0);
    pointer-events: all;
}

/* --- Вариант: диалог по центру (согласие/подтверждение/статья) -------- */

.modal--center {
    justify-content: center;
}

.modal--center .modal__content {
    width: 636px;
    height: auto;
    max-height: calc(100vh - var(--spacing-lg));
    padding: 42px;
    transform: scale(0.85);
}

.modal--center.modal.is-active .modal__content {
    transform: scale(1);
}

@media (max-width: 768px) {
    .modal__content,
    .modal--center .modal__content {
        width: 100%;
        max-width: 360px;
        max-height: 100%;
        padding: var(--spacing-md) var(--spacing-sm);
        transform: translate3d(0, 32px, 0);
    }

    .modal--form .modal__content {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }
}

/* --- Кнопка закрытия ---------------------------------------------------
   .button--icon3 (common.css) задаёт position:relative и перебивает
   абсолютное позиционирование — крестик до этой правки стоял не на месте
   на каждой модалке сайта. */
.modal .modal__x {
    position: absolute !important;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .modal .modal__x {
        top: var(--spacing-md);
        right: var(--spacing-sm);
    }
}

.modal--search .modal__x {
    display: none;
}

/* .login-drawer__title (auth.css, эпик 9) используется как заголовок формы
   входа/восстановления пароля внутри модалки — не имел своего запаса под
   крестик закрытия, текст упирался в кнопку. */
.modal .login-drawer__title {
    padding-right: var(--spacing-xxl);
}

/* --- Заголовок формы внутри модалки (buy1click/order-request/price-request) */

/* Заголовки окон — по общей шкале сайта, вровень с заголовком блока.
   Раньше здесь стоял токен --font-size-h3 из первоначального макета
   (28 пикселей): в узкой шторке это было крупнее, чем название самой
   страницы за ней. */
.modal .form__title {
    margin: 0;
    font-family: var(--font-headers);
    font-weight: var(--heading-weight);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    color: var(--color-text-primary);
}

.modal .form__title + .form__items {
    margin-top: var(--spacing-lg);
}

@media (max-width: 768px) {
    .modal .form__title {
        font-size: var(--heading-section-mobile);
    }

    .modal .form__title + .form__items {
        margin-top: var(--spacing-md);
    }
}

.form__description {
    margin-top: var(--spacing-lg);
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .form__description {
        margin-top: var(--spacing-md);
    }
}

.form__items {
    display: grid;
}

@media (min-width: 769px) {
    .form__items {
        margin: var(--spacing-lg) 0;
        row-gap: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .form__items {
        row-gap: var(--spacing-lg);
    }
}

/* --- Диалог согласия/подтверждения: заголовок, текст, успех/ошибка ---- */

.modal__heading {
    font-family: var(--font-headers);
    font-weight: var(--heading-weight);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    padding-right: var(--spacing-xxl);
    color: var(--color-text-primary);
}

.modal__heading + .modal__text {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-text-l);
    line-height: var(--line-height-text-l);
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .modal__heading {
        font-size: var(--heading-section-mobile);
        padding-right: 56px;
    }
}

.modal.failed .modal__success {
    display: none;
}

.modal__failure {
    display: none;
}

.modal.failed .modal__failure {
    display: block;
}

.modal__buttons-wrapper .button {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

@media (min-width: 769px) {
    .modal__buttons-wrapper .button:not(:first-child) {
        margin-top: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    .modal__buttons-wrapper {
        display: flex;
        gap: var(--spacing-xs);
        padding-top: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border);
    }
}

/* --- Поле формы с иконкой: buy1click/order-request/price-request ------
   Отдельная от .contacts-form__*/.auth-input систем — те уже были
   переверстаны раньше под свои страницы, эта обслуживает всплывающие
   формы и переиспользует контракт классов, который уже был в разметке
   (.input/.input__wrapper/.input--with-icon), просто без стилей. */

.input {
    position: relative;
}

.input label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-text-m);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.input input,
.input textarea {
    width: 100%;
    box-sizing: border-box;
    border: var(--input-border-width) solid var(--color-border);
    padding: var(--input-padding);
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: var(--color-white);
    outline: none;
    transition: var(--transition-slow);
}

@media (max-width: 768px) {
    .input input,
    .input textarea {
        padding: var(--input-padding-mobile);
    }
}

.input input::placeholder,
.input textarea::placeholder {
    color: var(--color-placeholder);
}

.input input:focus,
.input textarea:focus {
    border-color: var(--color-accent);
}

.input textarea {
    min-height: 120px;
    resize: vertical;
}

.input__wrapper {
    position: relative;
    display: block;
}

.input--with-icon .input__wrapper svg {
    position: absolute;
    right: var(--input-padding);
    top: 24px;
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

@media (max-width: 768px) {
    .input--with-icon .input__wrapper svg {
        top: 16px;
    }
}

.input__error-message {
    display: none;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-text-s);
    line-height: 1.3;
    color: var(--color-error);
}

.input input.just-validate-error-field,
.input textarea.just-validate-error-field {
    border-color: var(--color-error);
}

.input .just-validate-error-field ~ .input__error-message,
.input .just-validate-error-field + .input__error-message {
    display: block;
}

/* JustValidate кладёт текст ошибки в свой .just-validate-error-label —
   на всплывающих формах он не используется (эти поля без data-rules),
   но на всякий случай не даём ему остаться неоформленным */
.just-validate-error-label {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-text-s);
    color: var(--color-error);
}

/* --- Чекбокс согласия --------------------------------------------------- */

.input--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: 0;
    font-size: var(--font-size-text-s);
    line-height: 1.4;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.input--checkbox input[type="checkbox"] {
    position: absolute;
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.input__icon {
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border: var(--input-border-width) solid var(--color-border);
    transition: border-color var(--transition-default);
}

.input__icon::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity var(--transition-default);
}

.input--checkbox input:checked + .input__icon {
    border-color: var(--color-accent);
}

.input--checkbox input:checked + .input__icon::after {
    opacity: 1;
}

.input__text {
    line-height: 1.4;
}

/* --- Модалка поиска: только оболочка, без вёрстки самой выдачи --------
   Выдача умного поиска (bx_smart_searche/.bx_item_block*) до сих пор
   висит на старом /assets — это отдельная задача, не входит в эпик 12
   (см. _epics/SCOPE-modals-and-orphan-pages.md). */

/* Поле-приманка для роботов: человеку его не видно и клавишей до него не
   дойти (tabindex=-1 в разметке), а робот, заполняющий подряд всё, что
   нашёл, его заполнит — и заявка до CRM не доедет. display:none не
   годится: его умеют пропускать. См. local/components/nl/form.lead/fields.php. */
.form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.modal--search .modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modal__search-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.modal__search-wrapper .button {
    flex-shrink: 0;
}

.modal__search-wrapper .input {
    flex: 1;
}

/* --- Подтверждение почты (message-verification) ------------------------
   Контент (иконка + подсказка) переехал с уже готового, но нигде не
   подключённого .verify-popup (см. отчёт эпика) на реальные, рабочие
   классы модалки. */

.modal--message-verification .modal__content {
    text-align: center;
}

.modal--message-verification .modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-sm);
    width: 72px;
    height: 72px;
    border-radius: var(--radius-round);
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.modal--message-verification .modal__hint {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    text-align: left;
}

.modal--message-verification .modal__hint-label {
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal--message-verification .modal__hint-steps {
    margin: var(--spacing-xs) 0 0;
    padding-left: 20px;
    color: var(--color-text-secondary);
}

.modal--message-verification .modal__hint-steps li {
    margin-bottom: 4px;
}

/* Окно «Товар в корзине».

   Его рисует не наша разметка, а BX.PopupWindow из скрипта карточки
   товара — своей вёрстки у него нет, поэтому приводим к общему виду
   здесь. Кнопки внутри — наши обычные .button, их скрипт карточки
   создаёт сам. */
.popup-window {
    border: none;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 12px 40px rgba(20, 20, 40, .18);
    font-family: inherit;
}

.popup-window .popup-window-titlebar {
    padding: 18px 24px 0;
    border: none;
    background: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.popup-window .popup-window-content {
    padding: 16px 24px 8px;
}

.popup-window .popup-window-buttons {
    display: flex;
    gap: 12px;
    padding: 8px 24px 22px;
    background: none;
    border: none;
}

/* ==========================================================================
   ОКНО «КОНСУЛЬТАЦИЯ МЕНЕДЖЕРА»

   Форма собрана на общих классах .input, поэтому здесь только три вещи,
   которых в общем слое нет: поле товара (его не редактируют), поле
   комментария пониже обычного и плашка согласия.
   ========================================================================== */

/* Товар подставляется из кнопки и не редактируется. Поэтому не поле
   ввода, а плашка: длинные названия вроде «Межсетевой экран Cisco
   FPR4225-ASA-K9» в строку не влезают, а в плашке переносятся целиком.
   Рамка и поля — как у обычного поля формы, чтобы блок читался частью
   формы, а не выпадал из неё. */
.consult-product__label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-text-m);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.consult-product__value {
    border: var(--input-border-width) solid var(--color-border);
    padding: var(--input-padding);
    background: var(--color-bg-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    line-height: 1.4;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .consult-product__value {
        padding: var(--input-padding-mobile);
    }
}

/* Комментарий необязательный — не занимаем им пол-окна. */
.consult-comment textarea {
    min-height: 96px;
}

/* Плашка согласия — тот же компонент и то же соглашение, что в оформлении
   заказа, поэтому и вид повторяем оттуда
   (sale.order.ajax/telecomo/style.css, блок [data-bx-user-consent]):
   строка в две колонки, мелкий вторичный текст, акцентная галочка.

   Привязка к [data-lead-form], а не к классу окна: форма заявки одна и та
   же и в окнах каталога, и в блоках на главной, в вопросах и на контактах
   (компонент nl:form.lead). */
[data-lead-form] [data-bx-user-consent] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

[data-lead-form] [data-bx-user-consent] input[type="checkbox"] {
    width: auto;
    margin: 2px 0 0;
    padding: 0;
    border: none;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

[data-lead-form] [data-bx-user-consent] a {
    color: var(--color-accent);
}

/* Ошибку по согласию общий обработчик форм вешает на сам чекбокс, а он
   тут мелкий и её не видно. Подсвечиваем плашку целиком. */
[data-lead-form] [data-bx-user-consent]:has(.just-validate-error-field) {
    color: var(--color-error);
}

[data-lead-form] [data-bx-user-consent] input.just-validate-error-field {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

/* End */


/* Start:/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/style.css?178956221517862*/
 div#smart-title-search {
	width: 100%;
	position: relative;
}

.bx_smart_searche, .bx_smart_searche * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	font-size: 16px;
}
.bx-searchtitle-history {
	margin-top: 5px;
}
	.bx-searchtitle-history a {
		color: #222;
		text-decoration: underline;
	}
	.bx-searchtitle-history a:hover {
		text-decoration: none;
	}
.bx-searchtitle-popup-history {
	padding: 0 8px 8px 8px;
}
	.bx-searchtitle-popup-history-title {
		margin-top:10px;
		margin-left:10px;
		font-size: 18px;
		font-weight:600;
	}
	.bx-searchtitle-popup-history-item {
		padding:8px 0;
	}
		.bx-searchtitle-popup-history-item::before {
			content: "";
			width:24px;
			height:24px;
			background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/search-icon3.svg) center center no-repeat;
			background-size:24px auto;
			display: inline-block;
			vertical-align: middle;
			margin-right: 5px;
		}
		.bx-searchtitle-popup-history a {
			color: #222;
			text-decoration: underline;
			vertical-align: middle;
			padding-left:10px;
		}
		.bx-searchtitle-popup-history a:hover {
			text-decoration: none;
		}

.bx-searchtitle .bx-block-title {

}
.bx-searchtitle .bx-input-group .bx-form-control {
	border: 2px solid #dcdfe4;
	width: 100%;
	font-size: calc(16 * 100vw / 1920);
	font-size: calc(16 * var(--width-multiplier));
	line-height: calc(24 * 100vw / 1920);
	line-height: calc(24 * var(--width-multiplier));
	transition: .35s;
	background-color: #fff;
}
@media (min-width: 769px) {
	.bx-searchtitle .bx-input-group .bx-form-control {
		padding-right: calc(72 * 100vw / 1920);
		padding-right: calc(72 * var(--width-multiplier));
	}
}
@media (min-width: 769px) {
	.bx-searchtitle .bx-input-group .bx-form-control {
		padding: calc(22 * 100vw / 1920);
		padding: calc(22 * var(--width-multiplier));
	}
}

.bx-searchtitle .bx-input-group .bx-form-control:focus {
	background-color: #fff;
}
.bx-ios .bx-searchtitle .bx-input-group .bx-form-control {
	/* Fix of input shadow for IOS browsers. */
	background-image: -webkit-linear-gradient(#f8fafc 0%, #f8fafc 100%);
	background-image: linear-gradient(#f8fafc 0%, #f8fafc 100%);
}
.bx-searchtitle .bx-input-group-btn {
	position: relative;
	font-size: 0;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
	display: table-cell;
	line-height: normal;
}
.bx-searchtitle .bx-input-group-btn button {
	position: relative;
	border: none;
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/search-icon3.svg) center center no-repeat #95a1a8;
	display: inline-block;
	margin-bottom: 0;
	cursor: pointer;
	padding:0;
	border-radius: 0 1px 1px 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.42857143;
	height:24px;
	width:24px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.bx-searchtitle .bx-input-group-btn button:hover {
	background-color: #722ed1;
}
@media (min-width: 769px) {
	div.title-search-result {
		align-items: center;
		justify-content: flex-end;
	}
}

div.title-search-result {
	border:0 none !important;
	border-top: 0 none;
	display:none;
	overflow:hidden;
	z-index:9999999;
	min-width: 200px;
	margin-top: 3px;
	background-color: #FFF;
	/* border-top: 0 none; */
	border-radius: 2px;
	box-shadow: 0px 0px 7px -2px #d6d6d6;
	padding-bottom:15px;

	/* display: block !important; */
}
@media (min-width: 769px) {
	.search__screen {
		pointer-events: none;
	}
}
div.title-search-fader {
	display:none;
	background-image: url('/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/fader.png');
	background-position: right top;
	background-repeat: repeat-y;
	position:absolute;
}

p.title-search-preview {
	font-size:12px;
}
div.title-search-result td.title-search-price span {
	font-size: 26px;
}

/*========================*/
.bx_smart_searche {
	padding-top:8px;
	
	border-top: 0 none;
	border-radius: 0 0 3px 3px;
}
.bx_smart_searche .bx_info_wrap{
	margin-left: 85px;
}
.bx_smart_searche .bx_img_element{
	float: left;
	padding: 5px;
	width: 75px;
	text-align: center;
}
.bx_smart_searche .bx_item_block{
	min-height: 65px;
	position: relative;
}
.bx_smart_searche .bx_image{
	/* width: 45px;
	height: 45px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #e8e8e8; */
	display: inline-block;
	max-width: 100%;
}
.bx_smart_searche .bx_image.empty_image{
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/image/noimg.png);
}
.bx_smart_searche .bx_item_element{
	padding: 8px 0;
}
.bx_smart_searche .bx_item_element_all_result {
	text-align: center;
}
.bx_smart_searche .bx_item_element hr{
	margin: 0;
	border: none;
	border-bottom: 1px solid #e5e5e5;
}
.bx_smart_searche .bx_item_element a{
	margin-top: 5px;
	display: inline-block;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
}
.bx_smart_searche .bx_item_element a b{
	font-weight: bold;
}
.bx_smart_searche .bx_item_element a b{color: #000;}
.bx_smart_searche .bx_item_element a:hover,
.bx_smart_searche .bx_item_element a:hover b{text-decoration: underline;}
.bx_smart_searche .bx_item_preview_text{
	font-size:13px;
	padding: 5px 10px 5px 0;
}
.bx_smart_searche .bx_price{
	font-weight:bold;
	font-size:15px;
	margin-top: 5px;
}
.bx_smart_searche .bx_price .old{
	font-weight: normal;
	text-decoration: line-through;
	color: #636363;
	font-size: 12px;
	vertical-align: middle;
}
.bx_smart_searche .bx_item_block.all_result{min-height:0}
.bx_smart_searche .bx_item_block.others_result{
	min-height: 0;
	line-height: 12px;
	padding: 0;
}
.bx_smart_searche .bx_item_block.all_result .all_result_button{
	display: inline-block;
	font-size: 14px;
	background-color: #722ed1;
	border: 1px solid;
	border-color: #722ed1;
	color: #FFF;
	padding: 0 22px;
	height: 34px;
	text-decoration: none;
	border-radius: 2px;
	margin: 0 0 8px;
	
	line-height: 34px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .5px;
}
.bx_smart_searche .bx_item_block_title {
	font-weight: bold;
	font-size: 16px;
	margin: 4px 8px;
}
.bx_smart_searche .bx_item_block_href {
	display: block;
	text-decoration: none;
	margin-bottom: 5px;
	padding:10px;
}
.bx_smart_searche .bx_item_block_href:hover {
	background-color: #feeed2;
}
.bx_smart_searche .bx_item_block_hrline {

	margin: 0 8px 5px;
}
.bx_item_block_item_clear {
	display: block;
	clear:both;
}
.bx_smart_searche .bx_item_block_item_info_wrap {
	display: block;
}
.bx_smart_searche .bx_item_block_item_info_wrap.wpic {
	padding-left: 39px;
}
.bx_smart_searche .bx_item_block_item_info {
	display: block;
}
.bx_smart_searche .bx_item_block_href_category_title {
	color: #a2a2a2;
	/* font-weight: bold; */
}
.bx_smart_searche .bx_item_block_href_category_name {

	font-weight: bold;
	text-transform: uppercase;
}
.bx_smart_searche .bx_item_block_item_image {
	width: 34px;
	height: 34px;
	float:left;
	margin-right: 5px;
	position: relative;
	color: #333;
}
	.bx_smart_searche .bx_item_block_item_image img {
		position: absolute;
		top: 0;
		left:0;
		right:0;
		bottom:0;
		margin: auto;
		max-width: 100%;
		max-height: 100%;
	}
	.bx_item_block_item_image svg {

	}
.bx_smart_searche .bx_item_block_item_name {
	color: #333;
	overflow: hidden;
	height: 34px;
	display: block;
	line-height: 17px;
	display: flex;
}
.bx_smart_searche .bx_item_block_item_name_flex_align {
	margin: auto 0 auto 10px;
}
.bx_smart_searche .bx_item_block_item_simple_name {
	color: #333;
	display: block;
	line-height: 17px;
}

.bx_smart_searche .bx_item_block_item_price {
	float:right;
	text-align: right;
	color: #333;
	line-height: 17px;
	padding-left: 5px;
}
.bx_smart_searche .bx_item_block_item_price.bx_item_block_item_price_only_one {
	line-height: 34px;
}
.bx_smart_searche .bx_item_block_item_price .bx_price_new {
	white-space: nowrap;
	font-weight: bold;
	display: block;
}
.bx_smart_searche .bx_item_block_item_price .bx_price_old {
	white-space: nowrap;
	text-decoration: line-through;
}
.bx_smart_searche .bx_item_block_item_text {
	color: #9b9b9b;
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 15px;
}
.bx_smart_searche .bx_item_block_item_props {
	color: #9b9b9b;
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 15px;
}
.bx_smart_searche .bx_item_block_item_text.wpic, .bx_smart_searche .bx_item_block_item_props.wpic {
	/* padding-left: 39px; */
}
.bx_item_block_item_prop_item {
	display: block;
}
.bx_smart_no_result_find {
	padding: 0 8px 8px;
}


/* clear cross */
.bx-searchtitle .bx-searchtitle-clear {
	position: absolute;
	top: 4px;
	right: 110%;
	width: 28px;
	height: 28px;
	z-index: 4;
	display: none;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	color: #666;
}
.bx-searchtitle .bx-searchtitle-clear:after{
	display: inline-block;
	content: "\00d7";
}

/* voice input */
.bx-searchtitle .bx-searchtitle-voice {
	position: absolute;
	top: 3px;
	right: 110%;
	width: 28px;
	height: 28px;
	z-index: 4;
	display: none;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	color: #666;
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/voice.svg?v=3) center center no-repeat;
	background-size: 22px auto;
}
	.bx-searchtitle .bx-searchtitle-voice.voice-show {
		display: block;
	}

	.bx-searchtitle .bx-searchtitle-voice.active::after, .bx-searchtitle .bx-searchtitle-voice.active::before {
		content: '';
		position: absolute;
		border: 3px solid #3D64FF;
		left: -20px;
		opacity: 0;
		right: -20px;
		top: -20px;
		bottom: -20px;
		border-radius: 50%;
		animation: searchpulse 2.5s linear infinite;
	}

	.bx-searchtitle .bx-searchtitle-voice.active::after {
		animation-delay: 1.25s;
	}

	@keyframes searchpulse {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: scale(1.2);
			opacity: 0;
		}
	}



/* preloader base */
.bx-searchtitle .bx-searchtitle-preloader {
	position: absolute;
	top: 2px;
	right: 110%;
	width: 30px;
	height: 30px;
	z-index: 5;
	display: none;
	/* display: block; */
}
.bx-searchtitle .bx-searchtitle-preloader.view {
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/loader_orange.gif) center center no-repeat #fff;
}



/* blue */
.bx_smart_searche.theme-blue .bx_item_block_item_image {
	color:#0083d1;
}
.bx-searchtitle.theme-blue .bx-input-group .bx-form-control {
	border-color:#0083d1;
}
.bx-searchtitle.theme-blue .bx-searchtitle-preloader.view {
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/loader_blue.gif);
}
.bx_smart_searche.theme-blue .bx_item_block.all_result .all_result_button{
	background-color: #0083d1;
	border-color: #0083d1;
}
.bx-searchtitle.theme-blue .bx-input-group-btn button {
	background-color: #0083d1;
	border-color: #0083d1;
	color: #FFF;
}
.bx-searchtitle.theme-blue .bx-input-group-btn button:hover, .bx_smart_searche.theme-blue .bx_item_block.all_result .all_result_button:hover {
	background-color: #5ca6e4;
	border-color: #5ca6e4;
	text-decoration: none;
}
.bx_smart_searche.theme-blue .bx_item_element a b{
	color: #5ca6e4;
}
.bx_smart_searche.theme-blue .bx_item_block_href:hover {
	background-color: #b2d9f1;
}
.bx_smart_searche.theme-blue .bx_item_block_href_category_name {
	color:#722ed1;
}

.bx_smart_searche.theme-blue .bx_item_block_hrline {
	border-color: #0083d1;
}
/* black */
.bx_smart_searche.theme-black .bx_item_block_item_image {
	color:#333;
}
.bx-searchtitle.theme-black .bx-input-group .bx-form-control {
	border-color:#333;
}
.bx-searchtitle.theme-black .bx-searchtitle-preloader.view {
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/loader_black.gif);
}
.bx_smart_searche.theme-black .bx_item_block.all_result .all_result_button{
	background-color: #333;
	border-color: #333;
}
.bx-searchtitle.theme-black .bx-input-group-btn button {
	background-color: #333;
	border-color: #333;
	color: #FFF;
}
.bx-searchtitle.theme-black .bx-input-group-btn button:hover, .bx_smart_searche.theme-black .bx_item_block.all_result .all_result_button:hover {
	background-color: #5c5c5c;
	border-color: #5c5c5c;
	text-decoration: none;
}
.bx_smart_searche.theme-black .bx_item_element a b{
	color: #5c5c5c;
}
.bx_smart_searche.theme-black {
	/* border:1px solid #333; */
	border-top: 0 none;
	border-radius: 0 0 3px 3px;
}
.bx_smart_searche.theme-black .bx_item_block_href:hover {
	background-color: #eaeaea;
}
.bx_smart_searche.theme-black .bx_item_block_href_category_name {
	color:#333;
}
.bx_smart_searche.theme-black .bx_item_block_item_name b, .bx_smart_searche.theme-black .bx_item_block_item_simple_name b {
	color:#333;
}
.bx_smart_searche.theme-black .bx_item_block_hrline {
	border-color: #333;
}
/* green */
.bx_smart_searche.theme-green .bx_item_block_item_image {
	color:#159ebb;
}
.bx-searchtitle.theme-green .bx-input-group .bx-form-control {
	border-color:#159ebb;
}
.bx-searchtitle.theme-green .bx-searchtitle-preloader.view {
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/loader_green.gif);
}
.bx_smart_searche.theme-green .bx_item_block.all_result .all_result_button{
	background-color: #159ebb;
	border-color: #159ebb;
}
.bx-searchtitle.theme-green .bx-input-group-btn button {
	background-color: #159ebb;
	border-color: #159ebb;
	color: #FFF;
}
.bx-searchtitle.theme-green .bx-input-group-btn button:hover, .bx_smart_searche.theme-green .bx_item_block.all_result .all_result_button:hover {
	background-color: #44b1c9;
	border-color: #44b1c9;
	text-decoration: none;
}
.bx_smart_searche.theme-green .bx_item_element a b{
	color: #44b1c9;
}
.bx_smart_searche.theme-green .bx_item_block_href:hover {
	background-color: #d0ebf1;
}
.bx_smart_searche.theme-green .bx_item_block_href_category_name {
	color:#159ebb;
}
.bx_smart_searche.theme-green .bx_item_block_item_name b, .bx_smart_searche.theme-green .bx_item_block_item_simple_name b {
	color:#159ebb;
}
.bx_smart_searche.theme-green .bx_item_block_hrline {
	border-color: #159ebb;
}
/* red */
.bx_smart_searche.theme-red .bx_item_block_item_image {
	color:#E22B2B;
}
.bx-searchtitle.theme-red .bx-input-group .bx-form-control {
	border-color:#E22B2B;
}
.bx-searchtitle.theme-red .bx-searchtitle-preloader.view {
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/loader_red.gif);
}
.bx_smart_searche.theme-red .bx_item_block.all_result .all_result_button{
	background-color: #E22B2B;
	border-color: #E22B2B;
}
.bx-searchtitle.theme-red .bx-input-group-btn button {
	background-color: #E22B2B;
	border-color: #E22B2B;
	color: #FFF;
}
.bx-searchtitle.theme-red .bx-input-group-btn button:hover, .bx_smart_searche.theme-red .bx_item_block.all_result .all_result_button:hover {
	background-color: #e95c5c;
	border-color: #e95c5c;
	text-decoration: none;
}
.bx_smart_searche.theme-red .bx_item_element a b{
	color: #e95c5c;
}
.bx_smart_searche.theme-green .bx_item_block_href:hover {
	background-color: #f9d4d4;
}
.bx_smart_searche.theme-red .bx_item_block_href_category_name {
	color:#E22B2B;
}
.bx_smart_searche.theme-red .bx_item_block_item_name b, .bx_smart_searche.theme-red .bx_item_block_item_simple_name b {
	color:#E22B2B;
}
.bx_smart_searche.theme-red .bx_item_block_hrline {
	border-color: #E22B2B;
}
/* yellow */
.bx_smart_searche.theme-yellow .bx_item_block_item_image {
	color:#F9A91D;
}
.bx-searchtitle.theme-yellow .bx-input-group .bx-form-control {
	border-color:#F9A91D;
}
.bx-searchtitle.theme-yellow .bx-searchtitle-preloader.view {
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/template1/images/loader_yellow.gif);
}
.bx_smart_searche.theme-yellow .bx_item_block.all_result .all_result_button{
	background-color: #F9A91D;
	border-color: #F9A91D;
}
.bx-searchtitle.theme-yellow .bx-input-group-btn button {
	background-color: #F9A91D;
	border-color: #F9A91D;
	color: #FFF;
}
.bx-searchtitle.theme-yellow .bx-input-group-btn button:hover, .bx_smart_searche.theme-yellow .bx_item_block.all_result .all_result_button:hover {
	background-color: #faba4a;
	border-color: #faba4a;
	text-decoration: none;
}
.bx_smart_searche.theme-yellow .bx_item_element a b{
	color: #faba4a;
}
.bx_smart_searche.theme-yellow .bx_item_block_href_category_name {
	color:#F9A91D;
}
.bx_smart_searche.theme-yellow .bx_item_block_item_name b, .bx_smart_searche.theme-yellow .bx_item_block_item_simple_name b {
	color:#F9A91D;
}
.bx_smart_searche.theme-yellow .bx_item_block_hrline {
	border-color: #F9A91D;
}
/* ------------------------------------------------------------------
   Шапка: возврат к геометрии макета.

   Этот файл Битрикс подключает ПОСЛЕ common.css, а собственная сборка
   компонента размечает поле как таблицу (.bx-input-group-btn — table-cell)
   и задаёт размеры от ширины экрана — calc(22 * 100vw / 1920). Из-за этого
   поле в шапке разъезжалось и рядом со значком поиска появлялся второй.

   Ниже — только то, что относится к поиску внутри .header-search.
   Стили выпадающей подсказки не трогаем: они ниже по файлу и работают.
   ------------------------------------------------------------------ */

.header-search.bx-input-group {
    display: block;
    position: relative;
    width: 100%;
}

.header-search .bx-form-control,
.bx-searchtitle .header-search .bx-input-group .bx-form-control,
.header-search .bx-input-group .bx-form-control {
    width: 100%;
    height: 53px;
    padding: 0 56px 0 20px;
    border: 2px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: normal;
    transition: var(--transition-default);
}

/* Прелоадер компонента — поверх поля справа, а не отдельной ячейкой таблицы */
.header-search .bx-input-group-btn {
    position: absolute;
    top: 0;
    right: 56px;
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
}

/* End */


/* Start:/local/components/nl/favorites/templates/.default/style.css?178160530479*/
button.fav-toggle.is-active {
    color: #fff;
    background-color: #531dab;
}
/* End */


/* Start:/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/style.css?178160532011011*/
div#smart-title-search {
	width: 100%;
	position: relative;
}

.bx_smart_searche, .bx_smart_searche * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	font-size: 16px;
}
.bx-searchtitle-history {
	margin-top: 5px;
}
.bx-searchtitle-history a {
	color: #222;
	text-decoration: underline;
}
.bx-searchtitle-history a:hover {
	text-decoration: none;
}
.bx-searchtitle-popup-history {
	padding: 0 8px 8px 8px;
}
.bx-searchtitle-popup-history-title {
	margin-top:10px;
	margin-left:10px;
	font-size: 18px;
	font-weight:600;
}
.bx-searchtitle-popup-history-item {
	padding:8px 0;
}
.bx-searchtitle-popup-history-item::before {
	content: "";
	width:24px;
	height:24px;
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/images/search-icon3.svg) center center no-repeat;
	background-size:24px auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
.bx-searchtitle-popup-history a {
	color: #222;
	text-decoration: underline;
	vertical-align: middle;
	padding-left:10px;
}
.bx-searchtitle-popup-history a:hover {
	text-decoration: none;
}

.bx-searchtitle .bx-block-title {

}
.bx-searchtitle .bx-input-group .bx-form-control {
	border: 2px solid #dcdfe4;
	width: 100%;
	font-size: calc(16 * 100vw / 1920);
	font-size: calc(16 * var(--width-multiplier));
	line-height: calc(24 * 100vw / 1920);
	line-height: calc(24 * var(--width-multiplier));
	transition: .35s;
	background-color: #fff;
}
@media (min-width: 769px) {
	.bx-searchtitle .bx-input-group .bx-form-control {
		padding-right: calc(72 * 100vw / 1920);
		padding-right: calc(72 * var(--width-multiplier));
	}
}
@media (min-width: 769px) {
	.bx-searchtitle .bx-input-group .bx-form-control {
		padding: calc(22 * 100vw / 1920);
		padding: calc(22 * var(--width-multiplier));
	}
}

.bx-searchtitle .bx-input-group .bx-form-control:focus {
	background-color: #fff;
}
.bx-ios .bx-searchtitle .bx-input-group .bx-form-control {
	/* Fix of input shadow for IOS browsers. */
	background-image: -webkit-linear-gradient(#f8fafc 0%, #f8fafc 100%);
	background-image: linear-gradient(#f8fafc 0%, #f8fafc 100%);
}
.bx-searchtitle .bx-input-group-btn {
	position: relative;
	font-size: 0;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
	display: table-cell;
	line-height: normal;
}
.bx-searchtitle .bx-input-group-btn button {
	position: relative;
	border: none;
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/images/search-icon3.svg) center center no-repeat #95a1a8;
	display: inline-block;
	margin-bottom: 0;
	cursor: pointer;
	padding:0;
	border-radius: 0 1px 1px 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.42857143;
	height:24px;
	width:24px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.bx-searchtitle .bx-input-group-btn button:hover {
	background-color: #722ed1;
}
@media (min-width: 769px) {
	div.title-search-result {
		align-items: center;
		justify-content: flex-end;
	}
}

div.title-search-result {
	border:0 none !important;
	border-top: 0 none;
	display:none;
	overflow:hidden;
	z-index:9999999;
	min-width: 200px;
	margin-top: 3px;
	background-color: #FFF;
	/* border-top: 0 none; */
	border-radius: 2px;
	box-shadow: 0px 0px 7px -2px #d6d6d6;
	padding-bottom:15px;

	/* display: block !important; */
}
@media (min-width: 769px) {
	.search__screen {
		pointer-events: none;
	}
}
@media (max-width: 769px) {
	div.title-search-result {box-shadow:none}
}
div.title-search-fader {
	display:none;
	background-image: url('/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/images/fader.png');
	background-position: right top;
	background-repeat: repeat-y;
	position:absolute;
}

p.title-search-preview {
	font-size:12px;
}
div.title-search-result td.title-search-price span {
	font-size: 26px;
}

/*========================*/
.bx_smart_searche {
	padding-top:8px;

	border-top: 0 none;
	border-radius: 0 0 3px 3px;
}
.bx_smart_searche .bx_info_wrap{
	margin-left: 85px;
}
.bx_smart_searche .bx_img_element{
	float: left;
	padding: 5px;
	width: 75px;
	text-align: center;
}
.bx_smart_searche .bx_item_block{
	min-height: 65px;
	position: relative;
}
.bx_smart_searche .bx_image{
	display: inline-block;
	max-width: 100%;
}
.bx_smart_searche .bx_image.empty_image{
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/image/noimg.png);
}
.bx_smart_searche .bx_item_element{
	padding: 8px 0;
}
.bx_smart_searche .bx_item_element_all_result {
	text-align: center;
}
.bx_smart_searche .bx_item_element hr{
	margin: 0;
	border: none;
	border-bottom: 1px solid #e5e5e5;
}
.bx_smart_searche .bx_item_element a{
	margin-top: 5px;
	display: inline-block;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
}
.bx_smart_searche .bx_item_element a b{
	font-weight: bold;
}
.bx_smart_searche .bx_item_element a b{color: #000;}
.bx_smart_searche .bx_item_element a:hover,
.bx_smart_searche .bx_item_element a:hover b{text-decoration: underline;}
.bx_smart_searche .bx_item_preview_text{
	font-size:13px;
	padding: 5px 10px 5px 0;
}
.bx_smart_searche .bx_price{
	font-weight:bold;
	font-size:15px;
	margin-top: 5px;
}
.bx_smart_searche .bx_price .old{
	font-weight: normal;
	text-decoration: line-through;
	color: #636363;
	font-size: 12px;
	vertical-align: middle;
}
.bx_smart_searche .bx_item_block.all_result{min-height:0}
.bx_smart_searche .bx_item_block.others_result{
	min-height: 0;
	line-height: 12px;
	padding: 0;
}
.bx_smart_searche .bx_item_block.all_result .all_result_button{
	display: inline-block;
	font-size: 14px;
	background-color: #722ed1;
	border: 1px solid;
	border-color: #722ed1;
	color: #FFF;
	padding: 0 22px;
	height: 34px;
	text-decoration: none;
	border-radius: 2px;
	margin: 0 0 8px;

	line-height: 34px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .5px;
}
.bx_smart_searche .bx_item_block_title {
	font-weight: bold;
	font-size: 16px;
	margin: 4px 8px;
}
.bx_smart_searche .bx_item_block_href {
	display: block;
	text-decoration: none;
	margin-bottom: 5px;
	padding:10px;
}
.bx_smart_searche .bx_item_block_href:hover {
	background-color: #feeed2;
}
.bx_smart_searche .bx_item_block_hrline {

	margin: 0 8px 5px;
}
.bx_item_block_item_clear {
	display: block;
	clear:both;
}
.bx_smart_searche .bx_item_block_item_info_wrap {
	display: block;
}
.bx_smart_searche .bx_item_block_item_info_wrap.wpic {
	padding-left: 39px;
}
.bx_smart_searche .bx_item_block_item_info {
	display: block;
}
.bx_smart_searche .bx_item_block_href_category_title {
	color: #a2a2a2;
	/* font-weight: bold; */
}
.bx_smart_searche .bx_item_block_href_category_name {

	font-weight: bold;
	text-transform: uppercase;
}
.bx_smart_searche .bx_item_block_item_image {
	width: 34px;
	height: 34px;
	float:left;
	margin-right: 5px;
	position: relative;
	color: #333;
}
.bx_smart_searche .bx_item_block_item_image img {
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}
.bx_item_block_item_image svg {

}
.bx_smart_searche .bx_item_block_item_name {
	color: #333;
	overflow: hidden;
	height: 34px;
	display: block;
	line-height: 17px;
	display: flex;
}
.bx_smart_searche .bx_item_block_item_name_flex_align {
	margin: auto 0;
}
.bx_smart_searche .bx_item_block_item_simple_name {
	color: #333;
	display: block;
	line-height: 17px;
}

.bx_smart_searche .bx_item_block_item_price {
	float:right;
	text-align: right;
	color: #333;
	line-height: 17px;
	padding-left: 5px;
}
.bx_smart_searche .bx_item_block_item_price.bx_item_block_item_price_only_one {
	line-height: 34px;
}
.bx_smart_searche .bx_item_block_item_price .bx_price_new {
	white-space: nowrap;
	font-weight: bold;
	display: block;
}
.bx_smart_searche .bx_item_block_item_price .bx_price_old {
	white-space: nowrap;
	text-decoration: line-through;
}
.bx_smart_searche .bx_item_block_item_text {
	color: #9b9b9b;
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 15px;
}
.bx_smart_searche .bx_item_block_item_props {
	color: #9b9b9b;
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 15px;
}
.bx_smart_searche .bx_item_block_item_text.wpic, .bx_smart_searche .bx_item_block_item_props.wpic {
	/* padding-left: 39px; */
}
.bx_item_block_item_prop_item {
	display: block;
}
.bx_smart_no_result_find {
	padding: 0 8px 8px;
}


/* clear cross */
.bx-searchtitle .bx-searchtitle-clear {
	position: absolute;
	top: 4px;
	right: 110%;
	width: 28px;
	height: 28px;
	z-index: 4;
	display: none;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	color: #666;
}
.bx-searchtitle .bx-searchtitle-clear:after{
	display: inline-block;
	content: "\00d7";
}

/* voice input */
.bx-searchtitle .bx-searchtitle-voice {
	position: absolute;
	top: 3px;
	right: 110%;
	width: 28px;
	height: 28px;
	z-index: 4;
	display: none;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	color: #666;
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/images/voice.svg?v=3) center center no-repeat;
	background-size: 22px auto;
}
.bx-searchtitle .bx-searchtitle-voice.voice-show {
	display: block;
}

.bx-searchtitle .bx-searchtitle-voice.active::after, .bx-searchtitle .bx-searchtitle-voice.active::before {
	content: '';
	position: absolute;
	border: 3px solid #3D64FF;
	left: -20px;
	opacity: 0;
	right: -20px;
	top: -20px;
	bottom: -20px;
	border-radius: 50%;
	animation: searchpulse 2.5s linear infinite;
}

.bx-searchtitle .bx-searchtitle-voice.active::after {
	animation-delay: 1.25s;
}

@keyframes searchpulse {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: scale(1.2);
		opacity: 0;
	}
}



/* preloader base */
.bx-searchtitle .bx-searchtitle-preloader {
	position: absolute;
	top: 2px;
	right: 110%;
	width: 30px;
	height: 30px;
	z-index: 5;
	display: none;
	/* display: block; */
}
.bx-searchtitle .bx-searchtitle-preloader.view {
	background: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/images/loader_orange.gif) center center no-repeat #fff;
}



/* blue */
.bx_smart_searche.theme-blue .bx_item_block_item_image {
	color:#0083d1;
}
.bx-searchtitle.theme-blue .bx-input-group .bx-form-control {
	border-color:#0083d1;
}
.bx-searchtitle.theme-blue .bx-searchtitle-preloader.view {
	background-image: url(/local/templates/nl_telecomo/components/arturgolubev/search.title/modal/images/loader_blue.gif);
}
.bx_smart_searche.theme-blue .bx_item_block.all_result .all_result_button{
	background-color: #0083d1;
	border-color: #0083d1;
}
.bx-searchtitle.theme-blue .bx-input-group-btn button {
	background-color: #0083d1;
	border-color: #0083d1;
	color: #FFF;
}
.bx-searchtitle.theme-blue .bx-input-group-btn button:hover, .bx_smart_searche.theme-blue .bx_item_block.all_result .all_result_button:hover {
	background-color: #5ca6e4;
	border-color: #5ca6e4;
	text-decoration: none;
}
.bx_smart_searche.theme-blue .bx_item_element a b{
	color: #5ca6e4;
}
.bx_smart_searche.theme-blue .bx_item_block_href:hover {
	background-color: #b2d9f1;
}
.bx_smart_searche.theme-blue .bx_item_block_href_category_name {
	color:#722ed1;
}

.bx_smart_searche.theme-blue .bx_item_block_hrline {
	border-color: #0083d1;
}
/* End */


/* Start:/local/templates/nl_telecomo/css/search.css?17895622158775*/
/* ==========================================================================
   ВЫДАЧА УМНОГО ПОИСКА (arturgolubev:search.title) — реstyling под общую
   дизайн-систему сайта.
   --------------------------------------------------------------------------
   Компонент подключает собственный style.css (в обоих шаблонах — template1
   в шапке и modal в попапе поиска, эпик 12) автоматически, не через наш
   header.php — трогать эти файлы не нужно и не будем. Разметку и логику
   выдачи компонент рисует сам (result_modifier.php/ajax.php), поэтому здесь
   только визуальные переопределения поверх готовых классов
   .bx_smart_searche/.bx_item_block_*, без правки шаблонов.
   ========================================================================== */

.title-search-result {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.12);
}

.bx_smart_searche,
.bx_smart_searche * {
    font-family: var(--font-body);
}

/* --- Совпадения по категориям ------------------------------------------ */

.bx_smart_searche .bx_item_block_href {
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: background var(--transition-default);
}

.bx_smart_searche .bx_item_block_href:hover {
    background: var(--color-accent-bg);
}

.bx_smart_searche .bx_item_block_href_category_title {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text-s);
}

.bx_smart_searche .bx_item_block_href_category_name {
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--font-size-text-m);
    text-transform: none;
}

.bx_smart_searche .bx_item_block_hrline {
    border-color: var(--color-border);
}

/* --- Товары -------------------------------------------------------------- */

.bx_smart_searche .bx_item_block_item_image {
    width: 48px;
    height: 48px;
}

.bx_smart_searche .bx_item_block_item_info_wrap.wpic {
    padding-left: 58px;
}

.bx_smart_searche .bx_item_block_item_name,
.bx_smart_searche .bx_item_block_item_simple_name {
    color: var(--color-text-primary);
    font-size: var(--font-size-text-s);
    line-height: 1.4;
}

.bx_smart_searche .bx_item_block_item_text,
.bx_smart_searche .bx_item_block_item_props {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.bx_smart_searche .bx_item_block_item_price .bx_price_new {
    color: var(--color-text-primary);
    font-weight: 700;
}

.bx_smart_searche .bx_item_block_item_price .bx_price_old {
    color: var(--color-placeholder);
}

/* --- Кнопка «Показать все результаты» ------------------------------------ */

.bx_smart_searche .bx_item_block.all_result .all_result_button {
    background: var(--color-accent);
    border-color: var(--color-accent);
    border-radius: var(--radius-base);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.bx_smart_searche .bx_item_block.all_result .all_result_button:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* --- История поиска ------------------------------------------------------ */

.bx-searchtitle-history a,
.bx-searchtitle-popup-history a {
    color: var(--color-accent);
}

.bx-searchtitle-popup-history-title {
    font-family: var(--font-headers);
    color: var(--color-text-primary);
}

/* --- Пусто ---------------------------------------------------------------- */

.bx_smart_no_result_find {
    padding: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

/* --- Страница «Результаты поиска» (/catalog/?q=...) ----------------------
   Заголовок и описание держались на утилитных .h2/.search__description
   из /assets — без него текст просто дефолтный. Даём странице такое же
   оформление, как у остальных заголовков раздела (26px, отступ от крошек
   24px, как у auth/catalog/company). */

.search__title {
    font-family: var(--font-headers);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

@media (max-width: 600px) {
    .search__title { font-size: 22px; }
}

.search__description {
    font-family: var(--font-body);
    font-size: var(--font-size-text-s);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Модалка поиска на телефоне
   --------------------------------------------------------------------------
   Стили стороннего компонента arturgolubev:search.title задают размер поля
   формулой от ширины экрана: calc(16 * var(--width-multiplier)), где
   множитель равен 100vw/1920. Формула рассчитана на монитор 1920 — там
   выходит 16px. На телефоне 390px она даёт 3.25px: подпись в поле поиска
   становится нечитаемой, а лупа рядом с ней кажется огромной. На ноутбуке
   1280px тот же расчёт даёт 10.6px — мелко и там.

   Поэтому задаём размер явно, без формулы, на всех ширинах.
   ========================================================================== */
.bx-searchtitle .bx-input-group .bx-form-control {
    font-size: var(--font-size-text-m);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .bx-searchtitle .bx-input-group .bx-form-control {
        /* Ровно 16px: при меньшем размере Safari на iPhone приближает
           страницу, как только клиент ставит курсор в поле. */
        font-size: 16px;
        padding: 12px 48px 12px 14px;
        height: auto;
    }

    /* Лупу ставим по центру поля: фиксированный отступ сверху был рассчитан
       на прежнюю высоту поля и после правки шрифта уезжал вниз. */
    .modal__search-wrapper .input--with-icon .input__wrapper svg {
        top: 50%;
        transform: translateY(-50%);
        right: 14px;
    }

    /* Название товара в подсказках было заперто в две строки жёсткой высотой
       34px с overflow: hidden — длинные названия вроде «Трансивер Cisco
       SFP-10G-T-X» обрезались на полуслове. Отпускаем высоту. */
    .bx_smart_searche .bx_item_block_item_name {
        height: auto;
        overflow: visible;
        display: block;
        line-height: 1.4;
    }

    .bx_smart_searche .bx_item_block_item_name,
    .bx_smart_searche .bx_item_block_item_simple_name {
        font-size: var(--font-size-text-s);
    }
}


/* Лупа в окне поиска — кнопка отправки, а не картинка. Размер площадки
   44px: меньшую на телефоне трудно попасть пальцем. Позиционируем саму
   кнопку, а лупе внутри снимаем абсолютное положение от общего правила
   .input--with-icon — иначе она уехала бы из кнопки в угол поля. */
.modal__search-wrapper .search__submit {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.modal__search-wrapper .search__submit:hover,
.modal__search-wrapper .search__submit:focus-visible {
    color: var(--color-accent);
}

.modal__search-wrapper .input--with-icon .input__wrapper .search__submit svg {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 24px;
    height: 24px;
    color: inherit;
    pointer-events: none;
}

/* End */
/* /local/templates/nl_telecomo/css/variables.css?17895622157490 */
/* /local/templates/nl_telecomo/css/common.css?1790596996110146 */
/* /local/templates/nl_telecomo/css/animations.css?17895622157206 */
/* /local/templates/nl_telecomo/css/auth.css?178956221523684 */
/* /local/templates/nl_telecomo/css/modals.css?178956221518187 */
/* /local/templates/nl_telecomo/components/arturgolubev/search.title/template1/style.css?178956221517862 */
/* /local/components/nl/favorites/templates/.default/style.css?178160530479 */
/* /local/templates/nl_telecomo/components/arturgolubev/search.title/modal/style.css?178160532011011 */
/* /local/templates/nl_telecomo/css/search.css?17895622158775 */