/* Eyal Medical — единый файл стилей системы (жёсткий канон §0 DESIGN_SYSTEM).
   Весь CSS панели, входа, инсталлятора и страниц ошибок — только здесь; в шаблонах — только классы.
   Токены фирменного цвета — в theme.css (генерируется системой из Настройки → עיצוב). */

/* ═══ Дизайн-токены — единственная точка правды (П.3 ТЗ, §0 канона) ═══ */
:root{
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --em-block-gap: 8px;       /* зазор между блоками страницы: карточки, ряды плиток, колонки */
    --em-gap-row: 6px;         /* зазор внутри ряда: кнопки, действия, элементы одной строки */
    --em-gap-row-lg: 10px;     /* крупный зазор ряда: шапки модалок, заголовок страницы, строки проверки */
    --em-card-pad: 1rem;       /* поле внутри карточки (на телефоне переопределяется) */
    --em-card-head-h: 2.25rem; /* высота шапки блока (название карточки) */
    --em-control-h: 34px;      /* единая высота полей, выпадашек и кнопок в одной строке */
    --em-tab-h: 30px;          /* высота вкладки раздела — свой смысл, отдельно от --em-control-h */
    --em-tab-pad: 5px;         /* внутреннее поле полосы-подложки вкладок */
    --em-tab-pad-x: 12px;      /* боковое поле вкладки */
    --em-tab-font: .82rem;     /* шрифт вкладки */
    --em-tab-badge-h: 18px;    /* счётчик на вкладке: помещается в 30 − 2×5 = 20px */
    --em-page-pad: 1rem;       /* поле контента страницы от краёв (на телефоне переопределяется) */
    --em-radius: 2px;

    /* ═══ Поля, зазоры и сдвиги внутри элементов (решение владельца 14.09.2026, Х5) ═══
       Долг геометрии сведён к нулю: каждое число файла объявлено ровно один раз.
       Один токен — одно значение — одна семья; два токена с одним значением у разных
       смыслов правятся врозь и сводить их нельзя (00_README, доработка 20). */
    --em-hair: 2px;            /* толщина декоративной линии: полоска гамбургера, штрих крестика, подчёркивание пункта витрины */
    --em-gap-tight: 2px;       /* микро-зазор внутри элемента: значок и подпись в ячейке, пункты меню, клетки календаря */
    --em-pad-y-sm: 6px;        /* малое внутреннее поле по вертикали: кнопка в строке, шапка строки-списка, пункт меню витрины */
    --em-pad-y: 8px;           /* внутреннее поле по вертикали: кнопка канона, строка-список, пункт выпадашки */
    --em-pad-y-lg: 10px;       /* крупное внутреннее поле по вертикали: поле ввода, оповещение, кнопка шага установки */
    --em-pad-x-sm: 8px;        /* малое внутреннее поле по горизонтали: малая кнопка, ссылка календаря */
    --em-pad-x: 10px;          /* внутреннее поле по горизонтали: пейджер, пункт выпадашки, имя файла */
    --em-pad: 8px;             /* равномерное поле блока: строка заказа, тело календаря, подложка логотипа */
    --em-pad-lg: 10px;         /* крупное равномерное поле блока: строка контакта, блок приёмки, миниатюра витрины */
    --em-cell-pad: 10px;       /* внутреннее поле ячейки таблицы */
    --em-cell-pad-sm: 6px;     /* плотная ячейка таблицы */
    --em-cell-pad-edge: 8px;   /* край ячейки у имени записи и у ряда действий */
    --em-pill-pad: 10px;       /* боковое поле пилюли состояния */
    --em-chip-pad: 8px;        /* боковое поле чипа серийного учёта */
    --em-inset: 8px;           /* прижим элемента к краю: крестик окна, тост, меню шапки, глаз пароля */
    --em-inset-sm: 6px;        /* прижим кнопки календаря внутри поля даты */
    --em-drop-gap: 8px;        /* отступ выпадашки подсказок от поля */
    --em-count-radius: 10px;   /* угол счётчика в выпадашке колокольчика */
    --em-shift-sm: 6px;        /* малый сдвиг блока витрины */
    --em-shift: 8px;           /* сдвиг блока витрины */
    --em-shift-lg: 10px;       /* крупный сдвиг блока витрины */
    --em-gap-inner: 8px;       /* зазор значка и подписи внутри кнопки витрины */
    --em-gap-inner-lg: 10px;   /* зазор элементов внутри строки витрины: фильтр, ссылки подвала, поиск категории */
    --em-gap-inner-xl: 34px;   /* зазор вкладок карточки товара витрины */
    --em-modal-pad-x: 34px;    /* боковое поле окна: окно загрузки панели и окно обращения витрины */
    --em-page-title-h: 68px;      /* высота полосы заголовка страницы (решение владельца 15.09.2026, было 85) */
    --em-page-title-mark: 48px;   /* знак раздела в полосе заголовка — тот же размер, что на телефоне */
    --em-thumb: 44px;          /* миниатюра товара: список каталога и строки документа (П.38) */
    --em-fg-short-w: 160px;    /* короткое поле сетки формы: дата, номер, телефон, ח.פ, количество, процент (§3.33) */
    --em-fg-num-w: 130px;      /* поле цифры в строке формы: количество, срок, процент (§3.38) */
    --em-fg-pick-w: 190px;     /* выпадающий список короткого выбора в строке формы (§3.38) */
    --em-side-tabs-w: 240px;   /* столбик вкладок сбоку: разделы настроек и сайта */
    --em-facts-min: 170px;     /* клетка сетки реквизитов «подпись сверху, значение снизу» (§3.35) */
    --em-tip-max: 280px;       /* предельная ширина плашки длинной подсказки (§3.22) */
    --em-mini-min: 130px;      /* плитка сведения карточки: с этой ширины она делит строку (§3.39) */
    --em-header-h: 60px;
    --em-sidebar-w: 340px;
    --em-sidebar-w-collapsed: 80px;
    --em-bell-w: 440px;          /* ширина выпадашки колокольчика (решение владельца 06.09.2026, Сборка 154; было 380) */
    --em-user-menu-w: 300px;     /* ширина меню пользователя */
    /* Боковое меню — графитовый нейтрал, от фирменного цвета намеренно не зависит (§1.5, §2.2) */
    /* Боковое меню на графите (решение владельца 13.09.2026). Фон меню от краски больше
       не считается: краска осталась в шапке, в активном пункте и на экране входа.
       Контраст на графите: пункты 9,48 · заголовки групп 5,29 · значки 7,84 · белый 14,98 */
    --em-menu-bg: #24272c;                         /* графит, почти чёрный — фон бокового меню */
    --em-menu-text: #c9ced6;                       /* серый светлый — пункты */
    --em-menu-text-full: #ffffff;                  /* белый — наведение и активный */
    --em-menu-heading: #949aa3;                    /* серый приглушённый — заголовки групп */
    --em-menu-icon: #b6bcc5;                       /* светло-серый — значки пунктов */
    --em-menu-line: rgba(255, 255, 255, .14);      /* линия-декор заголовка */
    --em-menu-hover-bg: rgba(255, 255, 255, .07);  /* подложка наведения: осветление серого, без синевы */

    /* Мята — вторая краска панели (решение владельца 02.09.2026): полоса активного пункта меню,
       значок пункта при наведении и у активного, кольцо раскрытой выпадашки шапки.
       От краски системы НЕ считается: при смене краски в Настройки → עיצוב мята остаётся прежней. */
    --em-brand-blue: #00457a;       /* синий бренда: витрина и экран входа. От краски настроек НЕ зависит */
    --em-brand-deep: #003760;        /* глубокий синий бренда: переход панели входа и кнопки входа */
    --em-accent: #39cabb;

    /* Знак раздела у заголовка страницы — свой тон каждому из тринадцати разделов
       (решение владельца 02.09.2026; отменяет снятие цветов от 20.08.2026).
       Тона подобраны под контраст: белый значок на середине плитки не ниже 4,5,
       на светлом крае не ниже 3,0. От краски системы не считаются. */
    --em-grad-sec-dashboard: linear-gradient(135deg, #0063ae 0%, #008bf6 100%);  /* לוח בקרה — белый 4.60 / 3.49 */
    --em-grad-sec-documents: linear-gradient(135deg, #6246d1 0%, #927fdf 100%);  /* מסמכים — белый 4.60 / 3.32 */
    --em-grad-sec-clients: linear-gradient(135deg, #3659ca 0%, #6f87d9 100%);  /* לקוחות — белый 4.56 / 3.42 */
    --em-grad-sec-leads: linear-gradient(135deg, #ac4121 0%, #da603b 100%);  /* לידים — белый 4.56 / 3.67 */
    --em-grad-sec-extradocs: linear-gradient(135deg, #9a3ea8 0%, #ba67c7 100%);  /* מסמכים נלווים — белый 4.57 / 3.59 */
    --em-grad-sec-catalog: linear-gradient(135deg, #146849 0%, #1fa473 100%);  /* קטלוג ומלאי — белый 4.55 / 3.17 */
    --em-grad-sec-purchases: linear-gradient(135deg, #71580d 0%, #b18a14 100%);  /* רכש — белый 4.59 / 3.22 */
    --em-grad-sec-importcost: linear-gradient(135deg, #3b681e 0%, #5b9f2e 100%);  /* חישוב עלות יבוא — белый 4.59 / 3.26 */
    --em-grad-sec-reports: linear-gradient(135deg, #ab3688 0%, #cc5dab 100%);  /* דוחות — белый 4.59 / 3.67 */
    --em-grad-sec-users: linear-gradient(135deg, #ba315f 0%, #d45f86 100%);  /* משתמשים והרשאות — белый 4.55 / 3.63 */
    --em-grad-sec-settings: linear-gradient(135deg, #47678b 0%, #688ab1 100%);  /* הגדרות — белый 4.58 / 3.58 */
    --em-grad-sec-site: linear-gradient(135deg, #0c656f 0%, #13a0af 100%);  /* אתר — белый 4.55 / 3.15 */
    --em-grad-sec-coupons: linear-gradient(135deg, #8a2f2f 0%, #b25050 100%);  /* קופונים — белый 8.31 / 5.05; от ближайшего тона (לידים) 22 ΔE (П.60) */
    --em-grad-sec-siteorders: linear-gradient(135deg, #7a2f4f 0%, #9e4c74 100%);  /* הזמנות מהאתר — белый 8.95 / 5.62; от ближайшего тона (משתמשים) 26 ΔE (П.58) */
    --em-grad-sec-system: linear-gradient(135deg, #494949 0%, #6c6c6c 100%);  /* עדכון מערכת — белый 6.79 / 5.25 */

    /* Кнопки: цвет роли — свой токен (§0.2 п.4). Правка цвета кнопки = правка токена */
    --em-grad-action: linear-gradient(135deg, #22c55e, #10b981);
    --em-grad-action-hover: linear-gradient(135deg, #16a34a, #059669);  /* наведение на зелёные «добавить/сохранить» */
    --em-grad-muted: linear-gradient(135deg, #94a3b8, #64748b);
    --em-grad-muted-dark: linear-gradient(135deg, #64748b, #475569);  /* тёмный слейт: наведение на слейт-кнопки */
    --em-muted-rgb: 100, 116, 139;  /* слейт в rgb — для теней и полупрозрачных подложек */
    --em-grad-danger-btn: linear-gradient(135deg, #ef4444, #dc2626);
    --em-grad-whatsapp: linear-gradient(135deg, #25d366, #128c7e);
    --em-grad-amber: linear-gradient(135deg, #f59e0b, #d97706);       /* янтарь: счётчик сигнала */
    --em-grad-sky: linear-gradient(135deg, #0ea5e9, #0284c7);         /* голубой: кнопка печати и счётчик сигнала */
    --em-grad-sky-hover: linear-gradient(135deg, #0284c7, #0369a1);
    --em-grad-danger-btn-hover: linear-gradient(135deg, #dc2626, #b91c1c);
    --em-grad-whatsapp-hover: linear-gradient(135deg, #128c7e, #075e54);
    --em-grad-back: linear-gradient(135deg, var(--em-primary), var(--em-primary-soft));
    --em-grad-back-hover: linear-gradient(135deg, var(--em-primary-hover), var(--em-primary));
    --em-grad-edit: linear-gradient(135deg, #f59e0b, #f97316);
    --em-grad-edit-hover: linear-gradient(135deg, #d97706, #ea580c);
    --em-grad-view: linear-gradient(135deg, #0ea5e9, #06b6d4);
    --em-grad-view-hover: linear-gradient(135deg, #0284c7, #0891b2);
    --em-grad-restore: linear-gradient(135deg, #22c55e, #16a34a);
    --em-grad-restore-hover: linear-gradient(135deg, #16a34a, #15803d);
    --em-grad-download: linear-gradient(135deg, #14b8a6, #0d9488);
    --em-grad-download-hover: linear-gradient(135deg, #0d9488, #0f766e);
    /* Палитра плиток цифр — вне фирменной семьи (§1.2, §3.3) */
    --em-grad-fuchsia: linear-gradient(135deg, #d946ef, #a21caf);
    --em-grad-fuchsia-hover: linear-gradient(135deg, #a21caf, #86198f);  /* тёмный шаг фуксии: кнопка выгрузки и отчётов (П.39) */
    /* Блик шапок модалок, выпадашек и календаря */
    --em-glare: radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 60%);

    /* Активная вкладка раздела — плоская заливка тоном своего раздела (Сборка 83).
       Глубже насыщенного конца гаммы иконки: белый текст на самой гамме даёт 1.4–2.5:1
       при пороге 4.5:1. Тон тот же, связь «иконка = вкладка» читается. */
    /* семантика */
    --em-success-bg:#dcfce7; --em-success-text:#166534; --em-success-border:#bbf7d0; --em-success:#16a34a;
    --em-warn-bg:#fef3c7;    --em-warn-text:#92400e;    --em-warn-border:#fde68a;
    --em-danger-bg:#fee2e2;  --em-danger-text:#991b1b;  --em-danger-border:#fecaca;  --em-danger:#dc2626;
    --em-info-bg:#dbeafe;    --em-info-text:#1e40af;    --em-info-border:#bfdbfe;
    --em-neutral-bg:var(--em-subtle); --em-neutral-text:var(--em-text-2); --em-neutral-border:var(--em-border);
    /* Плотная заливка бейджей статусов (§5.2) — белый текст на каждом из этих тонов */
    --em-pill-success:#3f9e51; --em-pill-warn:#e5a532; --em-pill-danger:#b81f3c;
    --em-pill-info:#2e9bd6;   --em-pill-neutral:#748296;
    --em-pill-warn-text:#4a2d00;  /* на янтаре тёмный текст читается, белый — нет */
    /* поверхности и текст */
    --em-page-bg:#f1f4f6; --em-card-bg:#ffffff; --em-subtle:#f1f5f9; --em-row-hover:#e0f3ff;
    --em-surface-2:#f8fafc;   /* светлая подложка: шапка таблицы, подвал модалки, ховер строки сигнала */
    --em-hover-soft:#e6e8f3;  /* наведение: пагинация и чипы диапазонов */
    --em-install-bg:#fafbff; --em-install-border:#eef0f5;  /* шаги и заметка инсталлятора */
    --em-shadow-card:0 .46875rem 2.1875rem rgba(4,9,20,.03), 0 .9375rem 1.40625rem rgba(4,9,20,.03), 0 .25rem .53125rem rgba(4,9,20,.05), 0 .125rem .1875rem rgba(4,9,20,.03);
    --em-shadow-title:0 .46875rem 2.1875rem rgba(4,9,20,.03), 0 .25rem .53125rem rgba(4,9,20,.05);
    --em-shadow-drop:0 .46875rem 2.1875rem rgba(8,10,37,.03), 0 .9375rem 1.40625rem rgba(8,10,37,.03), 0 .25rem .53125rem rgba(8,10,37,.05), 0 .125rem .1875rem rgba(8,10,37,.03), 0 16px 56px rgba(8,10,37,.18);
    --em-text:#1e293b; --em-text-2:#475569; --em-text-3:#64748b; --em-placeholder:#94a3b8; --em-faint:#cbd5e1;
    --em-text-body:#495057;   /* базовый текст: body, поля ввода, пункты выпадашки */
    --em-danger-deep:#b91c1c; /* насыщенный красный: значок сигнала и пункт выхода */
    --em-slate-deep:#334155;  /* тёмный слейт: текст ячейки таблицы */
    --em-skel-mid:#edf1f7;    /* светлая середина бегущего блика скелетона */
    --em-border:#e2e8f0; --em-border-input:#ced4da; --em-border-subtle:var(--em-subtle);
    --em-input-font: 0.9rem;
    --em-font: 'Eyal Sans', sans-serif;  /* шрифт системы — тот же, что на печатном листе (§PDF) */
    /* Белый на фирменном фоне: подложка значка, рамка кнопки-иконки, приглушённый текст шапки.
       Значения жили числами в трёх правилах — теперь каждое написано один раз (Сборка 104) */
    --em-on-brand-veil: rgba(255,255,255,.18);
    --em-on-brand-border: rgba(255,255,255,.45);
    --em-on-brand-dim: rgba(255,255,255,.85);
    /* Окно просмотра документа: ширина окна и полоса просмотрщика PDF (Сборка 106).
       Высота листа считается от ширины по пропорции альбомного A4 — воздуха под листом нет */
    --em-frame-side: 380px;                /* боковая колонка каркаса «сведения справа, содержимое слева» (§3.36) */
    --em-frame-side-wide: 520px;           /* та же колонка на карточке объекта: в ней стоят все сведения об объекте (§3.36) */
    --em-chain-mark: 28px;                 /* метка ленты цепочки документов (§8.3, П.36) */
    --em-chain-line: 2px;                  /* толщина линии ленты цепочки */
    --em-doc-w: min(752px, calc(100vw - 2rem));   /* окно просмотра: книжный A4 при 90% плюс полоса прокрутки, без воздуха по бокам (решение владельца 09.09.2026) */
    --em-pdf-bar: 40px;
    /* Кольцо фокуса и выбора — четвёртая тень системы. Было написано числами дважды
       (поле в фокусе и выпадашка в фокусе); теперь значение живёт здесь (Сборка 108) */
    --em-ring-focus: 0 0 0 .2rem rgba(var(--em-primary-rgb),.25);
    /* Плитки цифр и плитки статистики: тень покоя и тень подъёма — одно значение на оба компонента */
    --em-shadow-tile: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    --em-shadow-tile-hover: 0 8px 20px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.06);
    /* Плитка статистики (П.37, решения владельца 07.09.2026): высота, полоса графика, блик.
       Ход блика — свой токен: владелец попросил его медленнее подъёма.
       Полоса графика — остаток высоты плитки после значка, числа, подписи и плашки
       (Сборка 211): 176 − 16 поля − 98,3 текста − 24 зазора = 37,7, взято 36 */
    --em-stat-h: 176px;
    --em-stat-chart-h: 36px;
    --em-stat-sheen-time: .9s;
    --em-grad-sheen: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 62%);
    /* Восемь заливок плиток — ровно на самый длинный ряд системы: на одном экране
       цвет не повторяется никогда, даже похожий. Подбор расчётом:
       светлота L* 53…58 (средний тон — не тёмный: панель системы и так тёмно-синяя,
       решение владельца 07.09.2026), насыщенность 88 % предельной — цвет живой, но не едкий,
       перцептивная разница ΔE2000 по всем парам ряда не меньше 18, у наборов из четырёх — 23.
       Белый на заливке 3,34…4,01 — норма крупного текста 3,0 (главное число её проходит);
       мелкий текст сидит на тёмной плашке --em-stat-plate, где белый даёт 4,5…5,4 */
    --em-stat-plate: rgba(0, 0, 0, .32);
    --em-grad-stat-1: linear-gradient(135deg, #de0833 0%, #ef3546 100%);
    --em-grad-stat-2: linear-gradient(135deg, #128888 0%, #2f9999 100%);
    --em-grad-stat-3: linear-gradient(135deg, #715de2 0%, #8071f0 100%);
    --em-grad-stat-4: linear-gradient(135deg, #029038 0%, #31a04d 100%);
    --em-grad-stat-5: linear-gradient(135deg, #ba2cba 0%, #c947c9 100%);
    --em-grad-stat-6: linear-gradient(135deg, #a96500 0%, #b97729 100%);
    --em-grad-stat-7: linear-gradient(135deg, #007fbc 0%, #2e90cb 100%);
    --em-grad-stat-8: linear-gradient(135deg, #7c7d02 0%, #8c8d2c 100%);
}

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

/* Атрибут скрытия сильнее любого правила вида. Единственное !important вне блоков
   сброса анимации и подчинения библиотеки выпадашек: у элемента со своим display
   (плашка ошибки входа — display:flex) атрибут hidden без него молча не работал и
   на /login висела пустая красная полоса. Записано в канон §0.2 как исключение.
   Точечные правила [hidden] у отдельных классов сняты — это одна точка правки. */
[hidden]{display:none !important;}

/* Плавные переходы страниц; браузеры без поддержки игнорируют */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){animation-duration:.22s; animation-timing-function:ease-out;}
.app-header{view-transition-name:em-header;}
.app-sidebar{view-transition-name:em-sidebar;}
html,body{height:100vh; overflow:hidden;}
body{
    font-family:var(--em-font);
    font-size:.88rem;
    color:var(--em-text-body);
    background:var(--em-page-bg);
    -webkit-text-size-adjust:100%;
}

/* Самостоятельные страницы (вход, инсталлятор, ошибки): класс standalone на <html> и <body> */
html.standalone, html.standalone body{height:auto; min-height:100vh; overflow:auto;}
body.standalone{
    display:flex; align-items:center; justify-content:center;
    padding:1rem; background:var(--em-sidebar-bg);
}
body.standalone-light{background:var(--em-page-bg);}

/* Фокус-кольца — канон §4: только :focus-visible.
   Карточка товара витрины берёт то же кольцо целиком, когда фокус на её ссылке (Сборка 304) — значения кольца записаны один раз */
:focus-visible, :is(.em-site-prod:has(.em-site-prod-link:focus-visible)){ /* :is() — чтобы браузер без :has() не отбросил всё правило */
    outline:2px solid var(--em-primary);
    outline-offset:2px;
    border-radius:var(--em-radius);
}
.abtn:focus-visible{
    outline:2px solid #fff;
    outline-offset:-4px;
    box-shadow:0 0 0 2px var(--em-primary);
}

/* ═══ Шапка (§4.1) ═══ */
.app-header{
    position:fixed; top:0; left:0; right:0;
    height:var(--em-header-h);
    display:flex; align-items:center;
    z-index:12;
    background:var(--em-grad-header);
    box-shadow:0 .46875rem 2.1875rem rgba(0,0,0,.03), 0 .25rem .53125rem rgba(0,0,0,.05);
}
.app-header__logo{
    width:var(--em-sidebar-w); height:60px; padding:0 1.5rem;
    display:flex; align-items:center; flex-shrink:0;
    transition:width .3s ease, padding .3s ease;
}
/* Гамбургер — канон шапки: 48×48 без плашки, палочки 26×2 (ряды 15/23/31),
   скрытие меню: кнопка поворачивается на 90°, крайние палочки складываются в ✕, средняя схлопывается */
.hb{
    width:48px; height:48px; background:transparent; border:none; cursor:pointer;
    position:relative; padding:0;
    transition:transform .4s cubic-bezier(0,0,0,1);
}
.hb-bar{
    width:26px; height:var(--em-hair); background:#fff; border-radius:0;
    display:block; position:absolute; left:11px;
    transition:transform .4s cubic-bezier(0,0,0,1);
}
.hb-bar:nth-child(1){top:15px;}
.hb-bar:nth-child(2){top:23px;}
.hb-bar:nth-child(3){top:31px;}
/* Скрытое меню: десктоп — при свёрнутом; мобайл — при открытом поверх контента */
body.sidebar-collapsed .hb, body.sidebar-open .hb{transform:rotate(90deg);}
body.sidebar-collapsed .hb .hb-bar:nth-child(1), body.sidebar-open .hb .hb-bar:nth-child(1){transform:rotate(45deg) translate(5.65px,5.65px);}
body.sidebar-collapsed .hb .hb-bar:nth-child(2), body.sidebar-open .hb .hb-bar:nth-child(2){transform:scaleX(0);}
body.sidebar-collapsed .hb .hb-bar:nth-child(3), body.sidebar-open .hb .hb-bar:nth-child(3){transform:rotate(-45deg) translate(5.65px,-5.65px);}
.hb:active{transform:scale(.93);}
body.sidebar-collapsed .hb:active, body.sidebar-open .hb:active{transform:rotate(90deg) scale(.93);}
/* Логотип прозрачный: круглая обрезка срезала бы концы рогов — рамки нет вовсе.
   Размер 26, а не 36: прежний файл был кружком, знак занимал в нём 67% высоты
   и читался как 24 точки. Новый обрезан вплотную по рогам и заполняет бокс целиком,
   поэтому при тех же 36 выглядел в полтора раза крупнее прежнего */
.app-header__logo .logo-mark-img{width:26px; height:26px; flex-shrink:0; object-fit:contain; margin-inline-end:var(--em-gap-row-lg);}
.app-header__logo .logo-src{font-size:20px; font-weight:800; color:#fff; letter-spacing:-.5px; white-space:nowrap; display:flex; align-items:baseline; gap:var(--em-gap-row);}
.app-header__logo .logo-sub{font-size:10px; color:rgba(255,255,255,.75); font-weight:400;}
.app-header__logo .header__pane{margin-inline-start:auto;}
.app-header__content{flex:1; display:flex; align-items:center; padding:0 1.5rem;}
.app-header-left{display:flex; align-items:center; gap:var(--em-gap-row);}
.app-header-right{margin-inline-start:auto; display:flex; align-items:center; gap:var(--em-gap-row);}
.hd-btn{
    width:38px; height:38px; border-radius:50%;
    border:none; background:transparent; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; cursor:pointer; position:relative; flex-shrink:0;
    transition:background .12s var(--ease-out), transform .1s var(--ease-out), box-shadow .15s var(--ease-out);
}
.hd-btn:hover{background:rgba(255,255,255,.12);}
.hd-btn:active{transform:scale(0.93);}
.header-btn-lg{position:relative; padding:0; display:flex; align-items:center;}
.user-box{display:flex; align-items:center; gap:var(--em-gap-row); position:relative;}
.user-toggle{display:flex; align-items:center; gap:var(--em-gap-row); background:transparent; border:none; cursor:pointer; padding:4px; border-radius:var(--em-radius); transition:background .2s;}
.user-toggle:hover{background:rgba(255,255,255,.08);}
/* Кольцо мятой = «эта выпадашка сейчас раскрыта». Признак берётся из aria-expanded,
   который кнопки шапки уже объявляют сами — состояние и вид не могут разойтись.
   У колокольчика кольцо ложится на круглую кнопку; у пользователя кнопка прямоугольная
   (имя + стрелка + аватар), поэтому кольцом красится ободок самого круга аватара (Сборка 154). */
.hd-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--em-accent);}
.user-toggle[aria-expanded="true"] .avatar-icon{border-color:var(--em-accent);}
.user-toggle .fa-angle-down{color:var(--em-on-brand-dim); font-size:12px; transition:transform .2s;}
.header-user-info{text-align:right; line-height:1.2;}
.header-user-info .widget-heading{font-size:.82rem; font-weight:700; color:#fff; white-space:nowrap;}
.header-user-info .widget-subheading{font-size:.68rem; color:rgba(255,255,255,.7); white-space:nowrap;}
.em-nb-badge{
    position:absolute; top:-2px; left:-2px;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--em-grad-danger-btn); color:#fff;
    font-size:10px; font-weight:800; line-height:1; direction:ltr;
    display:none; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px var(--em-primary);
}
.em-nb-badge.show{display:inline-flex;}
.avatar-icon{
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.35);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:14px; flex-shrink:0;
    transition:border-color .15s var(--ease-out);
}
.inline-form{display:inline;}
/* Глобальный поиск (§4.1, механика референса оболочки): кружок-лупа → пилюля 360px,
   текст влетает снизу, лупа поворачивается, отдельный ✕ появляется с задержкой */
.search-wrapper{position:relative; width:42px; transition:width .3s ease;}
.search-wrapper.active{width:380px;}
.search-wrapper .input-holder{
    height:42px; width:42px; overflow:hidden; position:relative;
    border-radius:50px;
    transition:width .3s ease-in-out, background .3s ease-in-out;
}
.search-wrapper.active .input-holder{
    width:340px; background:rgba(255,255,255,.15);
    transition:width .5s cubic-bezier(0, .105, .035, 1.57), background .5s cubic-bezier(0, .105, .035, 1.57);
}
.search-wrapper .search-input{
    width:100%; position:absolute; top:0; inset-inline-start:0; height:42px;
    padding-block:0; padding-inline-start:20px; padding-inline-end:60px;
    background:transparent; border:none; outline:none; box-sizing:border-box;
    color:#fff; font-family:var(--em-font); font-size:.9rem; font-weight:500;
    opacity:0; transform:translate(0, 60px);
    transition:opacity .3s cubic-bezier(0, .105, .035, 1.57), transform .3s cubic-bezier(0, .105, .035, 1.57); transition-delay:.3s;
}
/* Конечное положение поля — ровно в рамке: прежние 11 точек сдвига остались от анимации
   и опускали строку ниже середины, а низ поля уходил под обрезку рамки */
.search-wrapper.active .search-input{opacity:1; transform:translate(0, 0);}
.search-wrapper .search-input::placeholder{color:rgba(255,255,255,.7);}
.search-wrapper .search-icon{
    width:42px; height:42px; border:none; padding:0; outline:none;
    position:relative; z-index:2; float:inline-end; cursor:pointer;
    background:rgba(255,255,255,.09); border-radius:30px;
    transition:background .3s ease-in-out;
}
.search-wrapper .search-icon span{
    width:22px; height:22px; display:inline-block; vertical-align:middle;
    position:relative; transform:rotate(-45deg);
    transition:transform .4s cubic-bezier(.65, -0.6, .24, 1.65);
}
.search-wrapper .search-icon span::before, .search-wrapper .search-icon span::after{
    position:absolute; content:'';
}
.search-wrapper .search-icon span::before{
    width:4px; height:11px; left:9px; top:13px; border-radius:var(--em-radius); background:#fff;
}
.search-wrapper .search-icon span::after{
    width:14px; height:14px; left:4px; top:0; border-radius:16px; border:2px solid #fff;
}
.search-wrapper.active .search-icon{background:transparent;}
.search-wrapper.active .search-icon span{transform:rotate(45deg);}
/* Повёрнута на 45°: без поворота две полоски складываются в плюс,
   а плюс рядом с поиском читается как «добавить», а не «закрыть» */
.search-wrapper .btn-close-search{
    position:absolute; z-index:1; top:50%; inset-inline-start:0;
    width:20px; height:20px; margin-top:-10px; padding:0; transform:rotate(45deg);
    border:none; background:transparent; cursor:pointer;
    opacity:0; pointer-events:none;
    transition:opacity .2s cubic-bezier(.285, -0.45, .935, .11), inset-inline-start .2s cubic-bezier(.285, -0.45, .935, .11); transition-delay:.1s;
}
.search-wrapper .btn-close-search::before, .search-wrapper .btn-close-search::after{
    position:absolute; content:''; background:#fff; border-radius:var(--em-radius);
}
.search-wrapper .btn-close-search::before{width:var(--em-hair); height:20px; left:9px; top:0;}
.search-wrapper .btn-close-search::after{width:20px; height:var(--em-hair); left:0; top:9px;}
.search-wrapper.active .btn-close-search{
    inset-inline-start:350px; opacity:.6; pointer-events:auto;
    transition:opacity .6s cubic-bezier(0, .105, .035, 1.57), inset-inline-start .6s cubic-bezier(0, .105, .035, 1.57); transition-delay:.5s;
}
.search-wrapper.active .btn-close-search:hover{opacity:1;}

/* Узкие экраны: ступени ширины раскрытого поиска (канон шапки) */
@media (max-width:1200px){
    .search-wrapper.active{width:260px;}
    .search-wrapper.active .input-holder{width:220px;}
    .search-wrapper.active .btn-close-search{inset-inline-start:230px;}
}
@media (max-width:992px){
    .search-wrapper.active{width:230px;}
    .search-wrapper.active .input-holder{width:190px;}
    .search-wrapper.active .btn-close-search{inset-inline-start:200px;}
}

/* ═══ Сайдбар (§4.2) ═══ */
.app-sidebar{
    width:var(--em-sidebar-w);
    position:fixed; top:var(--em-header-h); right:0; bottom:0;
    z-index:11;
    display:flex; flex-direction:column;
    background:var(--em-menu-bg);
    box-shadow:7px 0 60px rgba(0,0,0,.05);
    transition:transform .3s ease, width .25s ease;
    overflow:hidden;
}
.app-sidebar__inner{overflow-y:auto; padding:12px 1.5rem 1.5rem; flex:1; -webkit-overflow-scrolling:touch;}
.app-sidebar__heading{
    display:flex; align-items:center; gap:var(--em-gap-row);
    padding:12px 0 var(--em-pad-y-sm);
    font-size:.65rem; font-weight:800; letter-spacing:1.5px;
    color:var(--em-menu-heading); text-transform:uppercase;
}
.app-sidebar__heading::before{content:''; width:16px; height:1px; background:var(--em-menu-line);}
.vertical-nav-menu{list-style:none; display:flex; flex-direction:column; gap:var(--em-gap-tight);}
.vertical-nav-menu a{
    display:flex; align-items:center; gap:var(--em-gap-row);
    padding:9px 16px; margin:var(--em-gap-tight) 0; border-radius:var(--em-radius);
    color:var(--em-menu-text); text-decoration:none;
    font-size:.88rem; font-weight:600;
    position:relative;
    transition:background-color .15s var(--ease-out), color .15s var(--ease-out), padding .2s var(--ease-out);
}
.vertical-nav-menu a i{width:20px; text-align:center; font-size:15px; color:var(--em-menu-icon); transition:color .2s var(--ease-out);}
.vertical-nav-menu a:hover{background:var(--em-menu-hover-bg); color:var(--em-menu-text-full);}
.vertical-nav-menu a:hover i{color:var(--em-menu-text-full);}
/* Текущий пункт: плотная заливка краской, белые надпись и значок и мятные полоски
   с обеих сторон — как в ветеринарной системе (решение владельца 13.09.2026). */
.vertical-nav-menu a.mm-active{
    background:linear-gradient(90deg, var(--em-primary-soft), var(--em-primary));
    box-shadow:inset 3px 0 0 var(--em-accent), inset -3px 0 0 var(--em-accent), 0 2px 8px rgba(var(--em-primary-rgb),.35);
    color:var(--em-menu-text-full); font-weight:700;
}
.vertical-nav-menu a.mm-active i{color:var(--em-menu-text-full);}
.sidebar-overlay{
    display:none; position:fixed; inset:0; top:var(--em-header-h);
    background:rgba(0,0,0,.4); z-index:10; border:none;
}

/* ═══ Контент (§4.3, scroll model §0) ═══ */
.app-main{
    margin-right:var(--em-sidebar-w);
    margin-top:var(--em-header-h);
    height:calc(100vh - var(--em-header-h));
    overflow:auto;
    transition:margin .3s ease;
}
.app-main__inner{padding:var(--em-page-pad);}

/* Свёрнутое меню (десктоп): полоска 80px; наведение временно раскрывает (канон); память в localStorage */
@media (min-width:769px){
    body.sidebar-collapsed .app-sidebar{width:var(--em-sidebar-w-collapsed);}
    body.sidebar-collapsed .app-sidebar__inner{padding:12px 0;}
    body.sidebar-collapsed .app-sidebar__heading{text-indent:-9999px; padding:var(--em-pad-y) 0; margin:var(--em-gap-row) var(--em-block-gap); position:relative; height:1px; overflow:hidden;}
    body.sidebar-collapsed .app-sidebar__heading::before{display:none;}
    body.sidebar-collapsed .app-sidebar__heading::after{content:''; position:absolute; top:50%; left:10%; right:10%; height:1px; background:var(--em-menu-line);}
    body.sidebar-collapsed .vertical-nav-menu a{justify-content:center; padding:11px 0; margin:3px var(--em-block-gap); font-size:0; border-radius:var(--em-radius); transition:background-color .15s, color .15s;}
    body.sidebar-collapsed .vertical-nav-menu a span{display:none;}
    body.sidebar-collapsed .vertical-nav-menu a i{font-size:16px; width:auto; margin:0; opacity:.85; transition:opacity .15s, color .2s var(--ease-out);}
    body.sidebar-collapsed .vertical-nav-menu a.mm-active::before{display:none;}
    body.sidebar-collapsed .app-main{margin-right:var(--em-sidebar-w-collapsed);}
    body.sidebar-collapsed .app-header__logo{width:var(--em-sidebar-w-collapsed); padding:0; justify-content:center;}
    body.sidebar-collapsed .app-header__logo .logo-src, body.sidebar-collapsed .app-header__logo .logo-sub{display:none;}
    /* В свёрнутом виде на логотип места нет: гамбургер 48 + знак 36 не влезают
       в 80 точек, и знак вылезал за правый край экрана */
    body.sidebar-collapsed .app-header__logo .logo-mark-img{display:none;}
    body.sidebar-collapsed .app-header__logo .header__pane{margin-inline-start:0;}
    body.sidebar-collapsed .app-header__content{padding-right:0;}
    body.sidebar-collapsed .app-sidebar:hover{width:var(--em-sidebar-w); box-shadow:7px 0 60px rgba(0,0,0,.25);}
    body.sidebar-collapsed .app-sidebar:hover .app-sidebar__inner{padding:12px 1.5rem 1.5rem;}
    body.sidebar-collapsed .app-sidebar:hover .app-sidebar__heading{text-indent:0; padding:12px 0 var(--em-pad-y-sm); margin:0; height:auto; overflow:visible;}
    body.sidebar-collapsed .app-sidebar:hover .app-sidebar__heading::after{display:none;}
    body.sidebar-collapsed .app-sidebar:hover .app-sidebar__heading::before{display:inline-block;}
    body.sidebar-collapsed .app-sidebar:hover .vertical-nav-menu a{justify-content:flex-start; padding:9px 16px; margin:var(--em-gap-tight) 0; font-size:.88rem;}
    body.sidebar-collapsed .app-sidebar:hover .vertical-nav-menu a span{display:inline;}
    body.sidebar-collapsed .app-sidebar:hover .vertical-nav-menu a i{width:20px; font-size:16px;}
    body.sidebar-collapsed .app-sidebar:hover .vertical-nav-menu a.mm-active::before{display:block;}
}

/* На время первичной отрисовки — без анимаций (анти-мигание при восстановлении состояния) */
body.preload .app-sidebar, body.preload .app-main, body.preload .app-header__logo,
body.preload .hb, body.preload .hb-bar{transition:none !important;}

/* ═══ Заголовок страницы (§5.1 + канон высоты) ═══ */
.app-page-title{
    background:var(--em-card-bg);
    height:var(--em-page-title-h); min-height:var(--em-page-title-h);
    padding:0 var(--em-card-pad);
    display:flex; align-items:center;
    border-radius:var(--em-radius);
    box-shadow:var(--em-shadow-title);
    margin-bottom:var(--em-block-gap);
}
.page-title-wrapper{display:flex; align-items:center; flex-wrap:wrap; width:100%; gap:var(--em-gap-row-lg);}
.page-title-heading{display:flex; align-items:center; gap:var(--em-gap-row-lg);}
.page-title-icon{
    width:var(--em-page-title-mark); height:var(--em-page-title-mark); border-radius:var(--em-radius); flex-shrink:0;
    background:var(--em-grad-primary);
    box-shadow:var(--em-shadow-title);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.5rem;
}
/* Знак раздела у заголовка — свой тон каждому разделу (§3, решение владельца 02.09.2026).
   Классы pti-* уже стоят в разметке всех экранов; правка тона раздела — одна строка выше. */
.page-title-icon.pti-dashboard, .em-card-head-mark.pti-dashboard{background:var(--em-grad-sec-dashboard);}
.page-title-icon.pti-documents, .em-card-head-mark.pti-documents{background:var(--em-grad-sec-documents);}
.page-title-icon.pti-clients, .em-card-head-mark.pti-clients{background:var(--em-grad-sec-clients);}
.page-title-icon.pti-leads, .em-card-head-mark.pti-leads{background:var(--em-grad-sec-leads);}
.page-title-icon.pti-extradocs, .em-card-head-mark.pti-extradocs{background:var(--em-grad-sec-extradocs);}
.page-title-icon.pti-catalog, .em-card-head-mark.pti-catalog{background:var(--em-grad-sec-catalog);}
.page-title-icon.pti-purchases, .em-card-head-mark.pti-purchases{background:var(--em-grad-sec-purchases);}
.page-title-icon.pti-importcost, .em-card-head-mark.pti-importcost{background:var(--em-grad-sec-importcost);}
.page-title-icon.pti-reports, .em-card-head-mark.pti-reports{background:var(--em-grad-sec-reports);}
.page-title-icon.pti-users, .em-card-head-mark.pti-users{background:var(--em-grad-sec-users);}
.page-title-icon.pti-settings, .em-card-head-mark.pti-settings{background:var(--em-grad-sec-settings);}
.page-title-icon.pti-site, .em-card-head-mark.pti-site{background:var(--em-grad-sec-site);}
.page-title-icon.pti-site-orders, .em-card-head-mark.pti-site-orders{background:var(--em-grad-sec-siteorders);}
.page-title-icon.pti-coupons, .em-card-head-mark.pti-coupons{background:var(--em-grad-sec-coupons);}
.page-title-icon.pti-system, .em-card-head-mark.pti-system{background:var(--em-grad-sec-system);}
.page-title-text{font-size:1.1rem; font-weight:400; color:#343a40; line-height:1.2;}
.page-title-subheading{font-size:.88rem; opacity:.6; padding:0; line-height:1.2;}
.page-title-actions{margin-inline-start:auto; display:flex; gap:var(--em-gap-row); flex-wrap:wrap; justify-content:flex-end; min-width:0;}
/* 🔴 min-width:0 обязателен: без него ряд кнопок раздела (§3.32) не сжимается ниже
   своей ширины и на узком экране вылезает из блока вместо того, чтобы прокручиваться.
   Померено на живой странице: при ширине блока 380 ряд 670 не прокручивался вовсе. */

/* ═══ Карточки (§5.3 + Rule 4) ═══ */
.card{
    background:var(--em-card-bg);
    border-radius:var(--em-radius);
    border:0;
    box-shadow:var(--em-shadow-card);
    margin-bottom:var(--em-block-gap);
}
.card > .card-header:first-child{
    border-top-left-radius:var(--em-radius);
    border-top-right-radius:var(--em-radius);
}
.card > .card-body:last-child, .card > .card-footer:last-child{
    border-bottom-left-radius:var(--em-radius);
    border-bottom-right-radius:var(--em-radius);
}
.card-header{
    display:flex; align-items:center; flex-wrap:wrap; gap:var(--em-gap-row);
    padding-block:.375rem; padding-inline-start:.625rem; padding-inline-end:var(--em-card-pad);
    min-height:var(--em-card-head-h); line-height:1.2;
    font-size:.88rem; font-weight:700;
    text-transform:uppercase;
    color:rgba(43,37,100,.7);
    background:var(--em-card-bg);
    border-bottom:1px solid rgba(32,39,140,.125);
}
/* Ведущая иконка шапки карточки — всегда индиго; исключения — модификаторы ниже */
.card-header > i:first-child{color:var(--em-primary);}
.card-header-ok > i:first-child{color:var(--em-success);}
.card-header-danger{color:var(--em-danger-text);}
.card-header-danger > i:first-child{color:var(--em-danger-text);}
.card-body{padding:var(--em-card-pad); background:var(--em-card-bg);}
.card-footer{padding:var(--em-card-pad); border-top:1px solid var(--em-border-subtle); background:var(--em-card-bg);}
.card-footer-actions{display:flex; gap:var(--em-gap-row);}
.card-note{color:var(--em-text-3); font-size:.88rem; margin-bottom:14px;}

/* ═══ Кнопки .abtn (§5.5 A/B) ═══ */
.abtn{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--em-gap-row);
    padding:var(--em-pad-y) 16px; border-radius:var(--em-radius);
    font-family:var(--em-font); font-size:13px; font-weight:600;
    text-decoration:none; border:none; cursor:pointer;
    transition:background .2s var(--ease-out), transform .15s var(--ease-out),
               box-shadow .2s var(--ease-out), color .15s var(--ease-out);
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    white-space:nowrap; line-height:1.2; min-height:var(--em-control-h);
}
.abtn:hover{transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,.15); color:#fff;}
.abtn:active{transform:translateY(-1px) scale(0.97); transition:transform 100ms var(--ease-out);}
.abtn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}
.abtn-add{background:var(--em-grad-action); color:#fff;}
.abtn-add:hover{background:var(--em-grad-action-hover);}
.abtn-save{background:var(--em-grad-action); color:#fff;}
.abtn-save:hover{background:var(--em-grad-action-hover);}
.abtn-back{background:var(--em-grad-back); color:#fff;}
.abtn-back:hover{background:var(--em-grad-back-hover);}
.abtn-cancel{background:var(--em-grad-muted); color:#fff;}
.abtn-cancel:hover{background:var(--em-grad-muted-dark);}
.abtn-delete{background:var(--em-grad-danger-btn); color:#fff;}
.abtn-delete:hover{background:var(--em-grad-danger-btn-hover);}
.abtn-whatsapp{background:var(--em-grad-whatsapp); color:#fff;}
.abtn-whatsapp:hover{background:var(--em-grad-whatsapp-hover);}
.abtn-sm{padding:5px var(--em-pad-x-sm) !important; min-height:28px !important; font-size:11px !important;}
.abtn-edit{background:var(--em-grad-edit); color:#fff;}
.abtn-edit:hover{background:var(--em-grad-edit-hover);}
.abtn-view{background:var(--em-grad-view); color:#fff;}
.abtn-view:hover{background:var(--em-grad-view-hover);}
.abtn-restore{background:var(--em-grad-restore); color:#fff;}
.abtn-restore:hover{background:var(--em-grad-restore-hover);}
.abtn-download{background:var(--em-grad-download); color:#fff;}
.abtn-download:hover{background:var(--em-grad-download-hover);}
/* Выгрузка и отчёты — пятая роль ряда кнопок раздела (П.39, §3.32) */
.abtn-export{background:var(--em-grad-fuchsia); color:#fff;}
.abtn-export:hover{background:var(--em-grad-fuchsia-hover);}
/* 🔴 Ряд кнопок раздела (П.39, решение владельца 08.09.2026): одна строка,
   всегда одна — на планшете и телефоне ряд прокручивается вбок, во вторую
   строку не переносится, в значки не сжимается и в выпадашку не сворачивается.
   Полоса вкладок раздела снята: переход между экранами раздела делает этот ряд. */
/* Ряд кнопок раздела. Прокрутка включается только там, где ряд не помещается —
   на телефоне (§3.32). На широком экране полоса прокрутки не заводится: она
   обрезала бы подсказку системы, которая рисуется под кнопкой (Сборка 198). */
.em-actions{display:flex; gap:var(--em-gap-row); flex-wrap:nowrap; max-width:100%; min-width:0;}
.em-actions .abtn{flex:0 0 auto;}
/* Счётчик «требует внимания»: белая плашка читается на любом из пяти цветов ряда */
.em-count-badge{display:inline-flex; align-items:center; justify-content:center; min-width:var(--em-tab-badge-h); height:var(--em-tab-badge-h); padding:0 5px; border-radius:999px; background:var(--em-card-bg); color:var(--em-text); font-size:.62rem; font-weight:800;}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--em-gap-row);}
.btn-row-top{margin-top:12px;}

/* ═══ Пилюли (.em-pill §5.2) ═══ */
.em-pill{
    display:inline-flex; align-items:center; gap:5px;
    border-radius:var(--em-radius); font-size:.72rem; font-weight:800; line-height:1.4;
    letter-spacing:.3px; padding:3px 9px; border:none; color:#fff; white-space:nowrap;
}
.em-pill i{font-size:.65rem;}
.em-pill-success{background:var(--em-pill-success);}
.em-pill-warn{background:var(--em-pill-warn); color:var(--em-pill-warn-text);}
.em-pill-danger{background:var(--em-pill-danger);}
.em-pill-info{background:var(--em-pill-info);}
.em-pill-neutral{background:var(--em-pill-neutral);}
.em-pill-note{margin-bottom:12px;}

/* ═══ Формы (§5.7 B + токен --em-input-font A) ═══ */
.form-group{margin-bottom:1rem;}
/* 🔴 Подпись поля — мелкая надпись НАД полем (решение владельца 25.08.2026).
   Без заливки, без рамки, приглушённым цветом. Прежняя светлая плашка сбоку
   (15.08.2026) отменена: она забирала 200 точек в каждой клетке формы.
   Одно устройство на все формы системы: разметка не меняется, вид задаёт этот блок. */
.form-group > label{
    display:block; font-size:.78rem; font-weight:600;
    color:var(--em-text-3); margin-bottom:4px; line-height:1.3;
}
.form-control{
    width:100%; padding:.375rem .75rem;
    border:1px solid var(--em-border-input); border-radius:var(--em-radius);
    font-family:var(--em-font); font-size:.88rem;
    color:var(--em-text-body); background:#fff;
    height:var(--em-control-h); line-height:1.2;
    transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
/* Многострочное поле и список живут своей высотой */
textarea.form-control{height:auto; min-height:calc(var(--em-control-h) * 2); padding-block:.5rem;}
select[multiple].form-control{height:auto;}
input[type="file"].form-control{height:auto;}
.form-control::placeholder{color:var(--em-placeholder);}
.form-control:focus{
    outline:none; border-color:var(--em-primary-soft);
    box-shadow:var(--em-ring-focus);
}
/* Поле с ошибкой — один класс на всю систему. Стоит ПОСЛЕ :focus, у правил равный вес:
   пока значение неверное, рамка остаётся красной и во время набора (Сборка 108) */
.form-control.is-invalid{
    border-color:var(--em-danger); background:var(--em-danger-bg);
    box-shadow:none;
}
/* Общие элементы форм — один класс на всю систему */
.f-hint{font-size:.74rem; color:var(--em-text-3); margin-top:4px;}
.f-err{font-size:.74rem; color:var(--em-danger-text); margin-top:4px;}
.f-req{color:var(--em-danger); font-weight:700;}
.f-vat{font-size:.78rem; color:var(--em-text-2); margin-top:4px;}
.f-ro{background:var(--em-subtle); color:var(--em-text-2);}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--em-gap-row-lg);}
.f-grid-narrow{max-width:560px;}
.f-check{display:flex; align-items:center; gap:var(--em-gap-row); font-size:.85rem; color:var(--em-text-2);}
.f-check input{width:18px; height:18px; accent-color:var(--em-primary); flex-shrink:0;}
.f-check label{margin:0;}
.f-check-pad{padding-top:var(--em-pad-y);}

/* Ограничение ширины относится к полю, а не ко всей группе: узкая группа сжала бы
   и подпись, и та переносилась бы в две строки. Блок стоит ПОСЛЕ правил сетки формы
   намеренно — у `.f-grid` и `.f-grid-narrow` одинаковый вес, побеждает записанное ниже
   (урок 15.08.2026). */
@media (min-width:769px){
    .form-group.w-max-120, .form-group.w-max-360{max-width:none;}
    .form-group.w-max-120 > .form-control{max-width:120px;}
    .form-group.w-max-360 > .form-control{max-width:360px;}
}
/* Ноутбук: форма идёт одной колонкой. Правило осталось с прежней плашечной раскладки;
   пересмотр — отдельным решением владельца. */
@media (min-width:769px) and (max-width:1279px){
    .f-grid{grid-template-columns:minmax(0, 1fr);}
}
.chk{width:18px; height:18px; accent-color:var(--em-primary);}
.chk-sm{width:16px; height:16px; accent-color:var(--em-primary);}
.lbl-chk-inline{display:inline-flex; align-items:center; gap:4px; margin-inline-end:var(--em-gap-row-lg); font-size:.8rem;}
.form-actions{display:flex; gap:var(--em-gap-row); margin-top:16px; padding-top:16px; border-top:1px solid var(--em-border-subtle);}
.w-max-120{max-width:120px;}
.w-max-360{max-width:360px;}

/* ═══ Таблицы-списки (§5.6 B + §5.11 A: stagger) ═══ */
.table{width:100%; border-collapse:collapse;}
.table thead th{
    text-align:start; padding:var(--em-cell-pad) 12px;
    background:var(--em-surface-2);
    font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--em-text-3); border-bottom:2px solid var(--em-border);
    white-space:nowrap;
}
.table tbody td{
    padding:11px 12px; font-size:.85rem; color:var(--em-slate-deep);
    border-bottom:1px solid var(--em-border-subtle);
    vertical-align:middle;
}
.table-hover tbody tr{transition:background .12s var(--ease-out); cursor:pointer;}
/* 🔴 Строка с наведением поднимается слоем (Сборка 199): у каждой строки списка
   своя анимация появления, а анимация преобразования делает строку отдельным
   слоем — из-за этого подсказка кнопки уходила под кнопки следующей строки.
   Слой 60 — тот же, что у подсказок строк документа (§1.7). */
.table-hover tbody tr:hover{background:var(--em-row-hover); position:relative; z-index:60;}
.td-c{text-align:center;}
.txt-faint{color:var(--em-faint);}
.txt-strong{font-weight:700;}
.num-ltr{direction:ltr; text-align:right;}
/* Поле английского текста в ивритской форме (П.67): значение слева направо и от левого края */
.em-en-field{direction:ltr; text-align:left;}
@keyframes emRowFadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.main-card tbody tr{opacity:0; animation:emRowFadeIn .25s var(--ease-out) forwards;}
.main-card tbody tr:nth-child(1){animation-delay:0ms;}
.main-card tbody tr:nth-child(2){animation-delay:25ms;}
.main-card tbody tr:nth-child(3){animation-delay:50ms;}

/* ═══ Пустое состояние (.em-empty-state §5.3) ═══ */
/* 🔴 Плотное пустое состояние (решение владельца 09.09.2026): значок и текст одной
   строкой у начала, поле карточки вместо 48 точек сверху и снизу — блок 66 точек вместо 200. */
.em-empty-state{
    display:flex; align-items:center; justify-content:flex-start;
    gap:var(--em-gap-row-lg); padding:var(--em-card-pad); text-align:start;
}
.em-empty-state-icon{
    width:var(--em-control-h); height:var(--em-control-h); border-radius:50%; flex:0 0 auto;
    background:linear-gradient(135deg, var(--em-neutral-bg), var(--em-neutral-border));
    color:var(--em-placeholder); font-size:15px;
    display:flex; align-items:center; justify-content:center;
    margin:0;
}
.em-empty-state-title{font-weight:700; color:var(--em-text); font-size:.98rem; margin:0;}
.em-empty-state-text{color:var(--em-text-3); font-size:.82rem; margin:0;}

/* ═══ Тост (§5.6 A + §10.6 B) ═══ */
@keyframes emSlideIn{from{opacity:0; transform:translateY(-8px) scale(.98);} to{opacity:1; transform:none;}}
@keyframes emToastIn{from{opacity:0; transform:translateX(-20px);} to{opacity:1; transform:none;}}
.em-toast-container{
    position:fixed; top:calc(78px + env(safe-area-inset-top, 0px)); inset-inline-end:16px; z-index:10055;
    display:flex; flex-direction:column; align-items:flex-end; gap:var(--em-gap-row);
    max-width:380px; pointer-events:none;
}
.em-toast{
    pointer-events:auto; position:relative; overflow:hidden;
    display:flex; align-items:flex-start; gap:var(--em-gap-row);
    background:#fff; border:1px solid var(--em-border); border-radius:var(--em-radius);
    box-shadow:0 10px 32px rgba(8,10,37,.12), 0 4px 12px rgba(8,10,37,.08);
    padding:12px 14px; font-size:.85rem; color:var(--em-text);
    min-width:260px;
    opacity:0; transform:translateX(20px);
    transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.em-toast.show{opacity:1; transform:translateX(0);}
.em-toast.hide{opacity:0; transform:translateX(20px);}
.em-toast::before{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;}
.em-toast-success::before{background:var(--em-success);}
.em-toast-error::before{background:var(--em-danger);}
.em-toast-icon{
    width:28px; height:28px; flex-shrink:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; margin-inline-start:4px;
}
.em-toast-success .em-toast-icon{background:var(--em-success-bg); color:var(--em-success-text);}
.em-toast-error .em-toast-icon{background:var(--em-danger-bg); color:var(--em-danger-text);}
.em-toast-msg{flex:1; padding-top:5px; font-weight:600;}
.em-toast-close{
    border:none; background:transparent; cursor:pointer;
    color:var(--em-placeholder); font-size:.75rem;
    padding:4px; margin-top:var(--em-gap-tight); border-radius:var(--em-radius);
    display:flex; align-items:center; justify-content:center;
    transition:background .12s var(--ease-out), color .12s var(--ease-out);
}
.em-toast-close:hover{background:var(--em-subtle); color:var(--em-text);}
.em-toast-close:active{transform:scale(0.92);}

/* Утилита скрытия (управляется из JS вместо инлайн-стилей) */
.is-hidden{display:none !important;}

/* ═══ Колауты ═══ */
.em-callout-warn{
    margin-top:12px; font-size:.82rem; color:var(--em-warn-text);
    background:var(--em-warn-bg); border:1px solid var(--em-warn-border);
    border-radius:var(--em-radius); padding:9px 12px;
}
.em-list-title{font-weight:700; margin-bottom:var(--em-block-gap);}
.em-checklist{padding-inline-start:20px; line-height:1.9;}

/* ═══ Модалка подтверждения (канон §5.7) ═══ */
.em-modal-overlay{position:fixed; inset:0; z-index:10050; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:1rem;}
.em-modal-card{background:var(--em-card-bg); border-radius:var(--em-radius); box-shadow:0 25px 80px rgba(0,0,0,.35); width:100%; max-width:440px; overflow:hidden; position:relative; animation:emSlideIn .2s ease-out;}
.em-modal-head{display:flex; align-items:center; justify-content:flex-start; gap:var(--em-gap-row-lg); padding:1rem 1.25rem; padding-inline-end:3rem; background:var(--em-grad-primary); color:#fff; font-weight:700; position:relative; overflow:hidden;}
.em-modal-head::before{content:''; position:absolute; inset:0; background:var(--em-glare); pointer-events:none;}
.em-modal-head > *{position:relative;}
.em-modal-x{position:absolute; top:var(--em-inset); inset-inline-end:var(--em-inset); z-index:2; border:none; background:transparent; color:var(--em-on-brand-dim); cursor:pointer; width:32px; height:32px; border-radius:var(--em-radius); display:inline-flex; align-items:center; justify-content:center; font-size:14px; transition:background .12s var(--ease-out), color .12s var(--ease-out);}
.em-modal-x:hover{background:var(--em-on-brand-veil); color:#fff;}
.em-modal-icon{width:42px; height:42px; border-radius:50%; background:var(--em-on-brand-veil); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
.em-modal-title{font-size:1rem; font-weight:800; color:#fff; margin:0; text-align:start; min-width:0; overflow-wrap:anywhere;}
.em-modal-x:active{transform:scale(.92);}
.em-modal-body{padding:1.1rem 1.25rem; color:var(--em-text-2); font-size:.92rem; line-height:1.5; white-space:pre-line;}
.em-modal-card-lg{max-width:640px;}
.em-modal-body-rich{white-space:normal; max-height:calc(100vh - 16rem); overflow:auto;}
.em-modal-foot{display:flex; justify-content:flex-end; gap:var(--em-gap-row); padding:.85rem 1.25rem; background:var(--em-surface-2); border-top:1px solid var(--em-border);}
.em-modal-foot .em-btn-cancel{background:var(--em-neutral-border); color:var(--em-neutral-text);}
.em-modal-foot .em-btn-cancel:hover{background:var(--em-faint);}
.em-modal-foot .em-btn-ok{background:var(--em-grad-muted); color:#fff; box-shadow:0 2px 6px rgba(var(--em-muted-rgb),.3);}
.em-modal-foot .em-btn-ok:hover{background:var(--em-grad-muted-dark);}

/* ═══ Окно просмотра документа (§3.28, Сборка 104) ═══
   PDF открывается окном канона, а не вкладкой браузера. Действия — иконками
   в шапке, каждая в цвете своей роли; подпись действия даёт своя подсказка. */
.em-modal-card-doc{width:var(--em-doc-w); max-width:var(--em-doc-w); max-height:calc(100vh - 2rem); display:flex; flex-direction:column;}
.em-doc-head{
    display:flex; align-items:center; gap:var(--em-gap-row-lg);
    padding:var(--em-gap-row-lg) 1.25rem;
    background:var(--em-grad-primary); color:#fff; position:relative; flex-shrink:0;
}
.em-doc-head::before{content:''; position:absolute; inset:0; background:var(--em-glare); pointer-events:none;}
.em-doc-head > *{position:relative;}
.em-doc-head-icon{width:42px; height:42px; border-radius:50%; background:var(--em-on-brand-veil); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.em-doc-head-text{min-width:0;}
.em-doc-head-title{font-size:1rem; font-weight:800; color:#fff; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.em-doc-head-sub{font-size:.8rem; font-weight:600; color:var(--em-on-brand-dim); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.em-doc-head-actions{margin-inline-start:auto; display:flex; align-items:center; gap:var(--em-gap-row); flex-shrink:0;}
.em-doc-head-sep{width:1px; height:22px; background:var(--em-on-brand-border);}
.em-doc-body{flex:0 1 auto; min-height:0; padding:0; background:var(--em-card-bg);
    /* лист книжного A4 по ширине окна плюс полоса просмотрщика; на низком экране блок сжимается и лист прокручивается */
    height:calc(var(--em-doc-w) * 297 / 210 + var(--em-pdf-bar));}
.em-doc-frame{width:100%; height:100%; border:none; background:var(--em-card-bg); display:block;}

/* Кнопка-иконка: тот же .abtn и та же роль-гамма, только квадрат по высоте элемента */
.abtn-icon{width:var(--em-control-h); padding:0;}
/* Тот же квадрат в строке списка: сторона считается от высоты мелкой кнопки, своего числа нет */
.abtn-sm.abtn-icon{width:auto; aspect-ratio:1; padding:0 !important;}
/* Печать (роль отсутствовала в файле, хотя класс использовался — Сборка 104) */
.abtn-print{background:var(--em-grad-sky); color:#fff;}
.abtn-print:hover{background:var(--em-grad-sky-hover);}
/* Оригинал для подшивки — та же семья, тон глубже: две родственные операции печати */
.abtn-print-original{background:var(--em-grad-sky-hover); color:#fff;}
.abtn-print-original:hover{background:var(--em-grad-sky);}

/* Подсказка системы: имя действия на иврите рисует система, окна ОС нет */
/* Нулевой вес у опоры подсказки: класс подсказки встал и на элементы, у которых
   своё положение — крестик модалки (absolute), кнопка календаря (absolute).
   Правило в один класс стоит ниже них в файле и молча перебивало бы положение,
   и крестик уехал бы из угла. В `:where()` вес равен нулю, и своё правило элемента
   побеждает; элементу без своего положения по-прежнему достаётся relative
   (проверено на живой странице 11.09.2026: крестик absolute, кнопка списка relative) */
:where(.em-tip){position:relative;}
/* Подсказка стоит ровно под серединой кнопки и появляется сразу: центрирование
   считается физическими свойствами, потому что логические в RTL уводили её в сторону
   (Сборка 199). Слой выше плиток и шапки карточки, иначе подсказка уходит под них. */
.em-tip::after{
    content:attr(data-em-tip); position:absolute; top:calc(100% + var(--em-gap-row)); left:50%;
    transform:translateX(-50%);
    background:var(--em-slate-deep); color:#fff; font-size:11px; font-weight:600; line-height:1;
    padding:var(--em-gap-row) var(--em-block-gap); border-radius:var(--em-radius); white-space:nowrap;
    opacity:0; pointer-events:none; box-shadow:var(--em-shadow-title); z-index:60;
}
.em-tip:hover::after, .em-tip:focus-visible::after{opacity:1;}
/* Подсказка вверх — для кнопки, стоящей у нижнего края окна: вниз ей некуда
   (кнопка «наверх» на витрине закреплена в 26 точках от низа, и подсказка
   уходила бы за экран; замер живой страницы 11.09.2026) */
.em-tip-up::after{top:auto; bottom:calc(100% + var(--em-gap-row));}
/* Длинная подсказка — для пояснения у подписи поля: текст не помещается в одну
   строку ни при какой ширине, поэтому плашка переносит строки и ограничена по
   ширине токеном. Центр по оси отменён: плашка прижимается к знаку и растёт
   внутрь страницы — иначе половина ушла бы за край и дала горизонтальную
   прокрутку (тот же случай, что с крайней кнопкой ряда, Сборка 242). */
.em-tip-wide::after{left:auto; right:0; transform:none; white-space:normal; max-width:var(--em-tip-max); width:max-content; line-height:1.35; text-align:start;}
.em-btn-ok, .em-btn-cancel{display:inline-flex; align-items:center; gap:var(--em-gap-row); padding:var(--em-pad-y) 16px; border:none; border-radius:var(--em-radius); font-family:var(--em-font); font-size:13px; font-weight:600; cursor:pointer; min-height:var(--em-control-h); transition:background .2s var(--ease-out), transform .15s var(--ease-out);}
.em-btn-ok:active, .em-btn-cancel:active{transform:scale(.97);}

/* ═══ Пагинация ═══ */
.em-pagination{display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center; padding:4px;}
.em-pagination a, .em-pagination span{min-width:var(--em-control-h); height:var(--em-control-h); padding:0 var(--em-pad-x); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--em-radius); font-size:.85rem; font-weight:600; text-decoration:none; color:var(--em-text-2); background:var(--em-subtle);}
.em-pagination a:hover{background:var(--em-hover-soft);}
.em-pagination .em-page-active{background:var(--em-grad-primary); color:#fff;}
.em-pagination .em-page-disabled{opacity:.45;}

/* ═══ Фильтры и действия строк ═══ */
/* Одна полоса отбора: табы диапазона и поля живут в одной карточке (решение владельца 10.09.2026) */
.em-filter-body{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--em-block-gap);}
.em-filter-body > .f-hint{flex:1 1 100%;}
.em-filter-body > .chip-row{flex:0 0 auto; flex-wrap:nowrap;}
.em-filter-body > .filter-bar{flex:1 1 auto; min-width:0;}
.filter-bar{display:flex; flex-wrap:nowrap; gap:var(--em-gap-row); align-items:flex-end; margin:0;}
.filter-bar .filter-field{display:flex; flex-direction:column; gap:4px; flex:1 1 0; min-width:0;}
.filter-bar .filter-field label{font-size:.7rem; font-weight:700; color:var(--em-text-3); text-transform:uppercase; letter-spacing:.4px;}
.filter-bar .filter-actions{display:flex; gap:var(--em-gap-row); align-items:flex-end; flex:0 0 auto; flex-direction:row; justify-content:flex-end;}
.row-actions{display:flex; align-items:center; gap:4px; direction:ltr; flex-wrap:wrap; justify-content:flex-start;}  /* блок действий занимает всю ячейку и прижимается к концу строки (в RTL — к левому краю страницы) */

/* ═══ Общие элементы списков (имя · цена · подпись) — используются во всех разделах ═══ */
.list-name{font-weight:700;}
/* Зазор между соседними метками в ячейке состояния. Прежнее правило знало только
   пару «имя + метка» и умерло вместе с переносом меток из ячейки названия
   в колонку состояния (Сборка 367): такой пары в разметке не осталось ни одной. */
.em-pill + .em-pill{margin-inline-start:var(--em-gap-row);}
.price-main{font-weight:700; direction:ltr; text-align:right;}
.price-vat{font-size:.72rem; color:var(--em-text-3); direction:ltr; text-align:right;}
.meta-sub{display:block; font-size:.72rem; color:var(--em-text-3);}

/* ═══ Светофор остатка ═══ */
.sti-stk{display:inline-flex; align-items:center; gap:5px; padding:3px var(--em-pill-pad); border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.4;}
.sti-stk-ok{background:var(--em-success-bg); color:var(--em-success-text);}
.sti-stk-low{background:var(--em-warn-bg); color:var(--em-warn-text);}
.sti-stk-out{background:var(--em-danger-bg); color:var(--em-danger-text);}

/* ═══ Живой отбор списков (§3.23) ═══ */
/* Пока идёт запрос — прежние строки бледнеют и остаются на месте.
   Скелетон здесь не используется: при быстром ответе он успевает только мигнуть. */
.em-list-body{transition:opacity .15s var(--ease-out);}
.em-list-wait .em-list-body{opacity:.5; pointer-events:none;}

/* ═══ Список вкладок сбоку (общий компонент: «הגדרות» и «אתר») ═══
   Решение владельца 13.09.2026: раздел живёт одной страницей — столбик вкладок
   сбоку (в RTL визуально слева), содержимое рядом. Собран из готовых токенов;
   активная вкладка красится краской системы, как активная вкладка раздела. */
.em-side-layout{display:grid; grid-template-columns:var(--em-side-tabs-w) 1fr; gap:var(--em-block-gap); align-items:start;}
.em-side-tabs{grid-column:1; display:flex; flex-direction:column; gap:var(--em-gap-row); background:var(--em-card-bg); border:1px solid var(--em-border); border-radius:var(--em-radius); padding:var(--em-tab-pad); position:sticky; top:var(--em-page-pad);}
.em-side-tab{display:flex; align-items:center; gap:var(--em-gap-row); min-height:var(--em-tab-h); padding:0 var(--em-tab-pad-x); border-radius:var(--em-radius); text-decoration:none; font-size:var(--em-tab-font); font-weight:600; color:var(--em-text-2); background:var(--em-card-bg); border:1px solid var(--em-border-subtle); transition:background .15s var(--ease-out), color .15s var(--ease-out);}
.em-side-tab i{width:20px; text-align:center; color:var(--em-text-3);}
/* Вкладка сбоку ведёт себя как таб диапазона дат (§3.12): тот же тон при наведении
   и у выбранной — решение владельца 13.09.2026. */
.em-side-tab:hover{background:var(--em-grad-view-hover); border-color:transparent; color:#fff;}
.em-side-tab:hover i{color:#fff;}
.em-side-tab.is-active{background:var(--em-grad-view); color:#fff; border-color:transparent;}
.em-side-tab.is-active:hover{background:var(--em-grad-view-hover);}
.em-side-tab.is-active i{color:#fff;}
.em-side-panes{grid-column:2; min-width:0;}
.em-side-pane{display:none;}
.em-side-pane.is-active{display:block;}
/* Блоки вкладки ложатся колонками, а не рядами: ряд равнялся по самой высокой карточке
   и оставлял под короткими до 303 точек пустоты (замер 13.09.2026). */
/* Блоки вкладки стоят двумя стопками канона §3.37, и последний блок каждой стопки
   дорастает до низа: обе колонки кончаются на одной линии, рваного низа над кнопкой
   сохранения не остаётся (решение владельца 14.09.2026). */
.em-side-pane .em-col > .card:last-child{flex:1;}

/* ═══ Миниатюра товара — общий блок (список каталога и строки документа, П.38) ═══
   Класс стал общим для двух разделов, поэтому носит нейтральное имя и живёт здесь,
   а размер задан токеном: квадрат правится одной строкой в одном месте. */
.em-thumb{width:var(--em-thumb); height:var(--em-thumb); border-radius:var(--em-radius); object-fit:cover; background:var(--em-subtle);}
.em-thumb-ph{width:var(--em-thumb); height:var(--em-thumb); border-radius:var(--em-radius); background:var(--em-subtle); display:flex; align-items:center; justify-content:center; color:var(--em-placeholder);}

/* ═══ Каталог: список товаров ═══ */
.cat-sn{display:inline-flex; align-items:center; gap:4px; padding:var(--em-gap-tight) var(--em-chip-pad); border-radius:999px; font-size:.66rem; font-weight:700; background:var(--em-info-bg); color:var(--em-info-text); margin-inline-start:var(--em-gap-row);}
.cat-catname{color:var(--em-text-2);}
.cat-catname-none{color:var(--em-placeholder);}

/* ═══ Каталог: форма товара — галерея и файлы ═══ */
.pf-gal{display:flex; flex-wrap:wrap; gap:var(--em-gap-row);}
.pf-gal-item{position:relative; width:104px;}
.pf-gal-item img{width:104px; height:104px; object-fit:cover; border-radius:var(--em-radius); border:1px solid var(--em-border); background:var(--em-subtle); cursor:grab;}
.pf-gal-item.dragging{opacity:.4;}
.pf-gal-cover{position:absolute; inset-block-start:4px; inset-inline-start:4px; background:var(--em-primary); color:#fff; font-size:.62rem; font-weight:700; padding:var(--em-gap-tight) 7px; border-radius:999px;}
.pf-gal-del{position:absolute; inset-block-start:4px; inset-inline-end:4px; width:24px; height:24px; border-radius:50%; border:none; background:var(--em-danger); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.7rem;}
.pf-gal-empty{color:var(--em-placeholder); font-size:.85rem;}
.pf-files{display:flex; flex-direction:column; gap:var(--em-gap-row);}
.pf-file{display:flex; align-items:center; gap:var(--em-gap-row); padding:var(--em-pad-y) var(--em-pad-x); border:1px solid var(--em-border); border-radius:var(--em-radius);}
.pf-file i.pf-file-ic{color:var(--em-primary);}
.pf-file .pf-file-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-file-del{width:26px; height:26px; border-radius:50%; border:none; background:var(--em-danger-bg); color:var(--em-danger-text); cursor:pointer;}
.pf-uploader{margin-top:var(--em-gap-row-lg);}

/* ═══ Страница товара: плитки и сведения ═══ */
.st-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--em-gap-row); margin-bottom:var(--em-block-gap);}
.st-tile{background:var(--em-card-bg); border:1px solid var(--em-border-subtle); border-radius:var(--em-radius); padding:12px 14px;}
.st-tile-label{font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.st-tile-val{font-size:1.25rem; font-weight:800; color:var(--em-text); margin-top:var(--em-gap-tight); direction:ltr; text-align:right;}
.st-tile-sub{font-size:.72rem; color:var(--em-text-3); direction:ltr; text-align:right;}
a.st-tile{display:block; text-decoration:none; color:inherit; transition:border-color .15s var(--ease-out), transform .15s var(--ease-out);}
a.st-tile:hover{border-color:var(--em-primary); transform:translateY(-1px);}
.pv-head{display:flex; gap:var(--em-gap-row-lg); align-items:flex-start; flex-wrap:wrap;}
.pv-cover{width:120px; height:120px; border-radius:var(--em-radius); object-fit:cover; background:var(--em-subtle);}
.pv-cover-ph{width:120px; height:120px; border-radius:var(--em-radius); background:var(--em-subtle); display:flex; align-items:center; justify-content:center; color:var(--em-placeholder); font-size:1.6rem;}
.pv-meta{flex:1; min-width:220px; display:grid; grid-template-columns:auto 1fr; gap:var(--em-gap-row) 14px; align-items:baseline;}
.pv-meta dt{font-size:.78rem; font-weight:700; color:var(--em-text-3);}
.pv-meta dd{font-size:.9rem; color:var(--em-text); margin:0;}
.pv-desc{margin-top:12px; white-space:pre-line; color:var(--em-text-2); font-size:.9rem;}

/* ═══ Журнал движений ═══ */
.mv-change-pos{color:var(--em-success); font-weight:700; direction:ltr;}
.mv-change-neg{color:var(--em-danger); font-weight:700; direction:ltr;}
.mv-prod{font-weight:700;}

/* ═══ Приёмка: серийные номера ═══ */
.rc-serials{margin-top:var(--em-gap-row); display:flex; flex-direction:column; gap:var(--em-gap-row);}
.rc-serial-row{display:flex; align-items:center; gap:var(--em-gap-row);}
.rc-serial-row .rc-idx{width:28px; text-align:center; font-weight:700; color:var(--em-text-3);}

/* ═══ Приёмка: אצוות ותאריכי תפוגה (ТЗ 25.2) ═══ */
.rc-batches{margin-top:var(--em-gap-row); display:flex; flex-direction:column; gap:var(--em-gap-row);}
.rc-batch-row{display:grid; grid-template-columns:2fr 2fr 1fr auto; gap:var(--em-gap-row); align-items:center;}

/* ═══ Подпись клиента (ТЗ 27.4) ═══ */
.em-signpage{max-width:760px; margin:0 auto; padding:var(--em-page-pad); text-align:center;}
.em-signpage .card{text-align:start;}
.em-sign-box{border:1px dashed var(--em-border-input); border-radius:var(--em-radius); padding:var(--em-card-pad); margin-top:var(--em-block-gap);}
.em-sign-label{font-size:.78rem; font-weight:700; color:var(--em-text-3); margin-bottom:var(--em-gap-row);}
.em-sign-pad{width:100%; height:200px; background:var(--em-card-bg); border:1px solid var(--em-border-input); border-radius:var(--em-radius); touch-action:none; cursor:crosshair;}
.em-sign-image{max-width:280px; margin-top:var(--em-block-gap); border:1px solid var(--em-border); border-radius:var(--em-radius);}

/* ═══ Выбор единиц (ניפוק · תיקון מלאי) ═══ */
.sn-pick-bar{display:flex; align-items:center; gap:var(--em-gap-row); flex-wrap:wrap; margin:var(--em-block-gap) 0;}
.sn-pick-count{font-size:.8rem; font-weight:700; color:var(--em-text-3);}
.sn-pick{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--em-gap-row);}
.sn-pick-row{display:flex; align-items:center; gap:var(--em-gap-row); padding:var(--em-pad-y) var(--em-pad-x); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg); cursor:pointer; transition:background .15s var(--ease-out), border-color .15s var(--ease-out);}
.sn-pick-row:hover{background:var(--em-subtle);}
.sn-pick-row input{width:18px; height:18px; accent-color:var(--em-primary); flex-shrink:0;}
.sn-pick-row:has(input:checked){border-color:var(--em-primary); background:var(--em-primary-pastel);}
.sn-pick-serial{font-weight:600; direction:ltr; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ═══ Корректировка: разница ═══ */
.adj-diff{font-size:1.25rem; font-weight:800; color:var(--em-text-3); direction:ltr; text-align:right; padding:7px 0;}
.adj-diff-pos{color:var(--em-success);}
.adj-diff-neg{color:var(--em-danger);}

/* ═══ Вкладка «להזמין» ═══ */
.rq-lack{font-weight:800; color:var(--em-danger); direction:ltr; text-align:right;}

/* ═══ Строка-форма добавления (общая: категории, מחירים מיוחדים …) ═══ */
/* 🔴 Строка добавления стоит одной строкой и в узкой колонке карточки (решение
   владельца 09.09.2026): поля сжимаются, кнопка не переносится под них.
   На телефоне перенос возвращается — там одной строкой не помещается ничего. */
.inline-add{display:flex; gap:var(--em-gap-row); align-items:end; flex-wrap:nowrap;}
.inline-add .form-group{flex:1; min-width:0; margin:0;}
/* 🔴 Поле занимает свою клетку целиком: клетка шире по длине подписи, и поле,
   ограниченное собственной шириной, оставляло между собой и кнопкой пустое место. */
.inline-add .form-group > .form-control{max-width:none; width:100%;}

/* ═══ Категории ═══ */
.ct-name{font-weight:600;}
.ct-rename{display:flex; gap:var(--em-gap-row); align-items:center; flex-wrap:wrap;}
.ct-rename input{max-width:260px;}
.ct-count{color:var(--em-text-3); font-size:.85rem;}
.ct-hidden{display:none;}

/* ═══ Клиенты ═══ */
.cl-rows{display:flex; flex-direction:column; gap:var(--em-gap-row);}
.cl-row{display:flex; flex-wrap:wrap; gap:var(--em-gap-row); align-items:flex-end; padding:var(--em-pad-lg); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg);}
.cl-row .form-group{flex:1; min-width:150px; margin:0;}
.cl-row-primary{display:inline-flex; align-items:center; gap:var(--em-gap-row); white-space:nowrap; font-size:.8rem; font-weight:700; color:var(--em-text-2); padding-bottom:9px;}
.cl-row-primary input{width:16px; height:16px; accent-color:var(--em-primary);}
.cl-row-del{width:32px; height:32px; margin-bottom:var(--em-gap-tight); border-radius:50%; border:none; background:var(--em-danger-bg); color:var(--em-danger-text); cursor:pointer;}
.cl-rows-empty{color:var(--em-placeholder); font-size:.85rem;}
.cl-dup-list{margin:var(--em-block-gap) 0 12px; padding-inline-start:18px; display:flex; flex-direction:column; gap:4px;}
.cl-dup-list a{color:var(--em-primary); font-weight:700;}
.cl-link{display:flex; gap:var(--em-gap-row); align-items:center; flex-wrap:wrap;}
.cl-link .form-control{flex:1; min-width:240px;}
.cl-match{display:block; font-size:.72rem; color:var(--em-text-3);}
.cl-match a{color:var(--em-primary); font-weight:700;}
.cl-hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden;}
.login-card.cl-reg-card{max-width:460px;}
.cl-reg-done{display:flex; gap:var(--em-gap-row-lg); align-items:center; color:var(--em-text-2); font-size:.95rem;}
.cl-reg-done-ic{flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--em-success-bg); color:var(--em-success-text); display:flex; align-items:center; justify-content:center; font-size:1.2rem;}

/* ═══ Документы ═══ */
.dl-search{display:flex; gap:var(--em-gap-row); align-items:end; flex-wrap:wrap; position:relative; margin-bottom:14px;}
.dl-search .form-group{flex:1; min-width:240px; margin:0; position:relative;}
.dl-results{position:absolute; z-index:60; inset-inline:0; top:100%; margin-top:4px; max-height:280px; overflow:auto; background:var(--em-card-bg); border:1px solid var(--em-border); border-radius:var(--em-radius); box-shadow:0 12px 32px rgba(8,10,37,.16);}
.dl-result{display:flex; flex-direction:column; gap:var(--em-gap-tight); width:100%; padding:var(--em-pad-y) 12px; border:none; background:transparent; text-align:start; cursor:pointer; border-bottom:1px solid var(--em-border-subtle);}
.dl-result:last-child{border-bottom:none;}
.dl-result:hover{background:var(--em-primary-pastel);}
.dl-result-name{font-weight:700; color:var(--em-text);}
.dl-result-meta{font-size:.74rem; color:var(--em-text-3); direction:ltr; text-align:start;}
/* 🔴 Каркас всех разделов (решение владельца 09.09.2026, П.41 §3.36): узкая колонка
   у начала страницы держит то, что описывает объект — реквизиты формы либо визитку
   с сеткой реквизитов; вся остальная ширина — тому, что с ним делают: строки, галерея,
   файлы, контакты, таблицы. До 1279px колонки не помещаются рядом — идут одна под другой.
   Одиночная форма без содержимого (лид, поставщик, категория, роль) — одной колонкой,
   ограниченной шириной, чтобы не растягиваться на всю страницу. */
.em-frame{display:grid; grid-template-columns:var(--em-frame-side) minmax(0, 1fr); gap:var(--em-block-gap); align-items:start;}
.em-frame-wide{grid-template-columns:var(--em-frame-side-wide) minmax(0, 1fr);}
.em-frame-side, .em-frame-main{min-width:0;}
/* 🔴 Шаблон «создание и правка» (решения владельца 10.09.2026, П.44 §3.38):
   страница делится на две части — узкая колонка держит вспомогательное (дополнительные
   поля и полосы загрузки), широкая держит главное: основные поля группами, а на экранах
   со строками — сами строки и итог. Кнопки сохранения стоят внутри последнего блока
   широкой колонки. Ширина поля идёт от данных: имя и описание тянутся и забирают остаток
   строки, список — по длине варианта, цифра и дата — узкие. Строка блока заполняется
   до края: одинокого поля с пустотой рядом не остаётся. */
.em-frame-form{grid-template-columns:var(--em-frame-side-wide) minmax(0, 1fr); align-items:stretch;}
.em-frame-form > .em-frame-side, .em-frame-form > .em-frame-main{display:flex; flex-direction:column; gap:var(--em-block-gap);}
.em-frame-form .card{margin-bottom:0;}
/* 🔴 Шаблон «просмотр» (решения владельца 14.09.2026): тот же каркас, что у создания и правки,
   и то же правило плотности, что у вкладок настроек (§3.14) — обе стопки кончаются на одной
   линии, последний блок каждой дорастает до низа. Проверено замером на четырёх карточках
   товара с разным наполнением: остаток 0 при пустом товаре и при заполненном. */
.em-frame-view{align-items:stretch;}
.em-frame-view > .em-frame-side, .em-frame-view > .em-frame-main{display:flex; flex-direction:column; gap:var(--em-block-gap); height:100%;}
.em-frame-view .card{margin-bottom:0;}
.em-frame-view > .em-frame-side > .card:last-child, .em-frame-view > .em-frame-main > .card:last-child{flex:1 1 auto;}
.em-fg-line{display:flex; gap:var(--em-block-gap); flex-wrap:wrap; grid-column:1 / -1;}
.em-fg-line > .form-group{flex:1 1 auto; min-width:0; margin-bottom:0;}
.em-fg-line > .em-fg-num{flex:0 0 var(--em-fg-num-w);}
.em-fg-line > .em-fg-pick{flex:0 0 var(--em-fg-pick-w);}
.em-fg-line > .em-fg-code{flex:0 0 var(--em-fg-short-w);}
.em-fg-line > .em-fg-full{flex:1 1 100%;}
/* Кнопки сохранения — своим блоком в конце широкой колонки, одинаково на всех экранах шаблона */
.em-actions-card > .card-body{padding:var(--em-gap-row-lg) var(--em-card-pad);}
.em-actions-card .form-actions{margin-top:0; padding-top:0; border-top:0;}
/* Поток полей: поля делят строку между собой и растягиваются до края блока —
   применяется там, где состав полей рисуется списком и чётность заранее не известна */
.em-fg-flow{display:flex; flex-wrap:wrap; gap:var(--em-gap-row-lg);}
.em-fg-flow > .form-group{flex:1 1 var(--em-fg-short-w); min-width:0; margin-bottom:0;}
.em-fg-flow > .em-fg-full{flex:1 1 100%;}
.em-fg-flow > .em-fg-title{flex:1 1 100%;}
/* Ширина поля в потоке — по данным, как в строке полей (§3.33, решение владельца 13.09.2026):
   число, короткий код и выпадающий список не растягиваются на всю строку блока. */
.em-fg-flow > .em-fg-num{flex:0 0 var(--em-fg-num-w);}
.em-fg-flow > .em-fg-pick{flex:0 0 var(--em-fg-pick-w);}
.em-fg-flow > .em-fg-code{flex:0 0 var(--em-fg-short-w);}
/* Отметка выглядит как поле: та же высота, рамка и угол, знак у начала строки, надпись одной строкой */
.em-form-grid .em-fg-check{grid-column:1 / -1;}
.em-fg-check .f-check-pad{padding:0 var(--em-tab-pad-x); height:var(--em-control-h);
    border:1px solid var(--em-border-input); border-radius:var(--em-radius); background:var(--em-card-bg);}
.em-fg-check .f-check label{white-space:nowrap;}
/* Полоса загрузки: блок второстепенный, поэтому значок, надпись и подсказка стоят в одну строку */
.em-dropzone-sm{display:flex; align-items:center; gap:var(--em-gap-row-lg); text-align:start;
    padding:var(--em-gap-row-lg) var(--em-tab-pad-x);}
.em-dropzone-sm .em-dropzone-icon{width:var(--em-control-h); height:var(--em-control-h); margin:0; font-size:1rem; flex:0 0 auto;}
.em-dropzone-sm .em-dropzone-title{font-size:.85rem;}
.em-dropzone-sm .em-dropzone-file{margin-top:0;}
@media (max-width:768px){
    .em-fg-line > .em-fg-num, .em-fg-line > .em-fg-pick, .em-fg-line > .em-fg-code{flex:1 1 100%;}
    .em-fg-flow > .em-fg-num, .em-fg-flow > .em-fg-pick, .em-fg-flow > .em-fg-code{flex:1 1 100%;}
}
/* Телефон (решение владельца 20.09.2026): каждое поле формы занимает свою строку.
   Правило 768 снимало ширину «по данным» только у числа, списка и короткого кода,
   а обычное поле держало основу 160 точек и вставало по два в ряд: замер стенда на 390
   давал пять строк по два поля шириной 170. Своя граница 640 — та же, что у полосы «למה אנחנו». */
@media (max-width:640px){
    .em-fg-line > .form-group, .em-fg-flow > .form-group{flex:1 1 100%;}
}
@media (max-width:1279px){
    .em-frame{grid-template-columns:minmax(0, 1fr);}
}
.dl-head, .dl-row{display:grid; grid-template-columns:var(--em-thumb) minmax(160px,2.5fr) 70px 110px 120px 110px 90px 90px 70px 44px; gap:var(--em-gap-row); align-items:center;}
/* 🔴 Шапка стоит на тех же отступах, что строка: у строки есть поле и рамка,
   и без них подписи колонок разъезжались с содержимым. Прозрачная рамка держит
   геометрию точно, а гибкая колонка названия иначе съедала бы разницу. */
.dl-head{padding:0 var(--em-block-gap) var(--em-gap-row); border:1px solid transparent; font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.dl-rows{display:flex; flex-direction:column; gap:var(--em-gap-row);}
.dl-row{padding:var(--em-block-gap); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg);}
.dl-cell{min-width:0;}
/* 🔴 Узкие колонки идут по одной оси (решение владельца 25.08.2026): подпись,
   поле ввода и вычисленное число выравниваются по центру клетки. Причина числом:
   у поля ввода своё внутреннее поле 12 точек, у подписи и у готового текста его
   нет — при выравнивании по краю подпись и значение расходились на эти 12 точек,
   и колонка переставала читаться сверху вниз. Первая колонка — описание строки,
   она текстовая и остаётся у начала строки. */
.dl-head > span, .dl-row .dl-cell{text-align:center;}
.dl-head > span:first-child, .dl-head > span:nth-child(2), .dl-row .dl-cell-name{text-align:start;}
.dl-row .dl-cell .form-control{text-align:center;}
.dl-row .dl-cell-name .form-control{text-align:start;}
/* Точка отсчёта для списка подсказок строки: подсказки живут в самой строке (П.4). */
.dl-cell-name{display:flex; flex-direction:column; gap:5px; position:relative;}
.dl-desc{font-size:.8rem;}
/* Цифры моноширинные: разряд встаёт под разрядом и суммы сверяются взглядом */
.dl-cell-total{font-weight:800; direction:ltr; font-variant-numeric:tabular-nums;}
/* Себестоимость, заработок и наценка — только для глаз владельца: в документ,
   в PDF и на публичную страницу эти величины не уходят. Пусто там, где
   себестоимость неизвестна: ноль показал бы прибыль, которой нет. */
.dl-cell-cost{font-size:.82rem; font-weight:700; color:var(--em-text-2); direction:ltr; font-variant-numeric:tabular-nums;}
.dl-loss{color:var(--em-danger-text);}
/* 🔴 Скидка строки задаётся процентом или шекелями (решение владельца 25.08.2026):
   знак стоит вплотную к полю и переключается кликом. Знак залит краской, потому
   что показывает действующее состояние, а не предлагает действие. */
.dl-disc{display:flex; align-items:stretch;}
.dl-disc > .form-control{flex:1 1 0; min-width:0; border-start-end-radius:0; border-end-end-radius:0;}
.dl-disc-toggle{flex:0 0 auto; width:30px; height:var(--em-control-h); border:1px solid var(--em-primary); border-inline-start:none;
    border-start-start-radius:0; border-end-start-radius:0; border-start-end-radius:var(--em-radius); border-end-end-radius:var(--em-radius);
    background:var(--em-primary); color:#fff; font-size:.9rem; font-weight:800; cursor:pointer;}
.dl-del{width:32px; height:32px; border-radius:50%; border:none; background:var(--em-danger-bg); color:var(--em-danger-text); cursor:pointer;}
.dl-empty{color:var(--em-placeholder); font-size:.85rem; padding-top:var(--em-pad-y-sm);}
/* Счёт справа столбцом, плитка скидки — слева от него */
.dl-sum{display:flex; gap:var(--em-gap-row-lg); justify-content:space-between; flex-wrap:wrap; align-items:flex-start;}
.dl-totals{display:grid; grid-template-columns:auto auto; gap:var(--em-gap-row) 0; align-items:baseline; margin-inline-start:auto; min-width:260px;}
.dl-totals dt{font-size:.82rem; color:var(--em-text-3); font-weight:600; padding-inline-end:var(--em-card-pad);}
/* Разряд под разрядом: суммы счёта сверяются взглядом */
.dl-totals dd{margin:0; font-weight:700; direction:ltr; text-align:end; font-variant-numeric:tabular-nums;}
/* 🔴 «Итого к оплате» — своя плитка в краске системы (решение владельца 25.08.2026):
   остальные строки счёта остаются обычным текстом без подложки */
.dl-totals .dl-total-main{font-size:1.1rem; font-weight:800; color:#fff; background:var(--em-primary); padding-block:var(--em-gap-row);}
.dl-totals dt.dl-total-main{padding-inline-start:var(--em-card-pad); border-start-start-radius:var(--em-radius); border-end-start-radius:var(--em-radius);}
.dl-totals dd.dl-total-main{padding-inline-end:var(--em-card-pad); border-start-end-radius:var(--em-radius); border-end-end-radius:var(--em-radius);}

/* 🔴 Скидка на итог — плитка действия (решение владельца 25.08.2026).
   Скидку владелец даёт осознанно, поэтому она читается как действие, а не как
   ещё одно поле формы: подпись на краске, поле вплотную к ней, рамка вокруг всего. */
.em-disc-tile{border:1px solid var(--em-border-input); border-radius:var(--em-radius); overflow:hidden; min-width:260px;}
.em-disc-tile-head{background:var(--em-primary); padding:var(--em-gap-row) var(--em-card-pad);}
.em-disc-tile-head > *{display:block; margin:0; color:#fff; font-size:.82rem; font-weight:700;}
.em-disc-tile-body{display:flex; align-items:stretch; gap:var(--em-gap-row); padding:var(--em-gap-row-lg) var(--em-card-pad);}
.em-disc-input{height:auto; min-height:calc(var(--em-control-h) * 1.5); font-size:1.4rem; font-weight:800; text-align:center; flex:1 1 0;}
.em-disc-switch{display:flex; flex-direction:column;}
.em-disc-opt{flex:1; min-width:38px; border:1px solid var(--em-border-input); border-radius:var(--em-radius); background:var(--em-card-bg); color:var(--em-text-2); font-size:.88rem; font-weight:800; cursor:pointer;}
.em-disc-opt.is-on{background:var(--em-primary); border-color:var(--em-primary); color:#fff;}
/* 🔴 Плитка состояния оплаты на просмотре (решение владельца 06.09.2026, Сборка 155):
   тот же корпус, что у плитки скидки на создании — там действие, здесь состояние, одно место.
   У черновика её место пустое. */
.em-pay-tile-body{display:grid; grid-template-columns:auto 1fr; gap:var(--em-gap-row) var(--em-card-pad); align-items:baseline; margin:0; padding:var(--em-gap-row-lg) var(--em-card-pad);}
.em-pay-tile-body dt{font-size:.82rem; color:var(--em-text-3); font-weight:600;}
.em-pay-tile-body dd{margin:0; font-size:1.05rem; font-weight:800; direction:ltr; text-align:end; font-variant-numeric:tabular-nums;}
/* Строки чтением (Сборка 155): тот же компонент .dl-* без колонки удаления; вторая колонка —
   вид строки бейджем в своей колонке (§3.5). Ширины — те же, что у создания. */
/* 🔴 Фотография товара в начале строки (П.38, решение владельца 08.09.2026): та же
   миниатюра и тот же размер, что в списке каталога и в печатном листе. Своя колонка,
   как в PDF, — иначе квадрат съедал бы ширину названия. */
/* 🔴 Ширины по данным (Сборка 261, решение владельца 15.09.2026): прежний набор просил 1008 точек
   при 973 в блоке, и крайняя колонка выходила за край на 35. Описание тянется, остальные — по
   содержимому. Подпись стоит над своим значением: обе стороны выровнены одной физической стороной,
   потому что число пишется слева направо, а подпись справа налево. */
.dl-view .dl-head, .dl-view .dl-row{grid-template-columns:var(--em-thumb) minmax(0,2.5fr) 70px 56px 96px 80px 104px 88px 88px 64px;}
.dl-view .dl-head > span, .dl-view .dl-row .dl-cell{text-align:right;}
.dl-view .dl-cell-photo{justify-content:flex-end;}
.dl-view .dl-cell-val, .dl-view .dl-cell-total, .dl-view .dl-cell-cost{font-variant-numeric:tabular-nums;}
.dl-cell-photo{display:flex; align-items:center;}

/* ═══ Документы: выпуск и цепочка ═══ */
.iss-facts{list-style:none; display:flex; flex-direction:column; gap:var(--em-gap-row);}
.iss-facts li{display:flex; gap:var(--em-gap-row); align-items:flex-start; color:var(--em-text-2); font-size:.9rem;}
.iss-facts i{color:var(--em-primary); width:18px; text-align:center; margin-top:var(--em-gap-tight);}
.iss-problems{margin:var(--em-block-gap) 0 12px; padding-inline-start:18px; display:flex; flex-direction:column; gap:4px;}
.iss-serial-block{padding:var(--em-pad-lg); border:1px solid var(--em-border); border-radius:var(--em-radius); margin-bottom:var(--em-gap-row-lg);}
.iss-serial-head{display:flex; gap:var(--em-gap-row); align-items:baseline; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--em-block-gap);}
/* Лента цепочки (П.36, Сборка 159): сплошная линия, круглые метки, карточка у каждой метки.
   Порядок узлов задаёт разметка; линия рисуется на колонке меток, поэтому лишних слоёв нет.
   Метка текущего — мята (значение канона «сейчас»), знак на ней глубоким синим:
   белый на мяте даёт 2,03 при норме 4,5, глубокий синий — 6,03. */
.em-chain{display:flex; flex-direction:column; gap:var(--em-block-gap);}
.em-chain-node{display:grid; grid-template-columns:var(--em-chain-mark) 1fr; gap:var(--em-gap-row-lg); align-items:start;}
.em-chain-mark{position:relative; width:var(--em-chain-mark); height:var(--em-chain-mark); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--em-brand-blue); color:#fff; font-size:.72rem; z-index:1;}
.em-chain-node:not(:last-child) .em-chain-mark::after{content:''; position:absolute; top:100%; inset-inline-start:calc(50% - var(--em-chain-line) / 2); width:var(--em-chain-line); height:calc(100% + var(--em-block-gap)); background:var(--em-border);}
.em-chain-now .em-chain-mark{background:var(--em-accent); color:var(--em-brand-deep);}
.em-chain-card{display:flex; flex-direction:column; gap:var(--em-gap-row); padding:var(--em-gap-row-lg) var(--em-card-pad); border-radius:var(--em-radius); border:1px solid var(--em-border); background:var(--em-card-bg); box-shadow:var(--em-shadow-card); text-decoration:none; color:var(--em-text);}
a.em-chain-card[href]:hover{background:var(--em-subtle);}
.em-chain-now .em-chain-card{border-color:var(--em-accent);}
.em-chain-head, .em-chain-state{display:flex; gap:var(--em-gap-row); align-items:center; flex-wrap:wrap;}
.em-chain-type{font-weight:700; font-size:.86rem;}
.em-chain-num{color:var(--em-text-3); font-size:.82rem;}
.em-chain-date{color:var(--em-text-3); font-size:.78rem;}

/* ═══ Карточка объекта: плотность блоков (Сборки 260–262, решения владельца 15.09.2026 по живому превью) ═══
   Участок работает только на карточках просмотра с меткой `.em-obj-view` (документ, клиент);
   остальные экраны разделов держат прежний вид. Таблица строк чтением живёт своим правилом `.dl-view` выше — оно общее
   для просмотра и двух экранов выпуска (Сборка 261). Правило одно на весь блок: подпись стоит
   над своим значением, данные занимают блок по всей ширине, воздуха с одной стороны не остаётся.
   Выравнивание задано физическими сторонами намеренно: число пишется слева направо,
   а подпись справа налево, и логические `start`/`end` увели бы их к разным краям колонки. */
/* Таблицы широкой части: колонки делят блок поровну, крайняя стоит у своего края.
   В узкой части таблица идёт по данным — при 520 точках равные доли режут имя и почту (Сборка 262) */
.em-obj-view .em-frame-main .table{table-layout:fixed;}
.em-obj-view .em-frame-main .table th, .em-obj-view .em-frame-main .table td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Первая колонка — имя записи (товар, номер, дата): она переносится, а не режется многоточием (Сборка 263) */
.em-obj-view .em-frame-main .table td:first-child{white-space:normal;}
.em-obj-view .table th, .em-obj-view .table td{text-align:right;}
.em-obj-view .table th:last-child, .em-obj-view .table td:last-child{text-align:left;}
.em-obj-view .table td.num-ltr{font-variant-numeric:tabular-nums;}
/* Реквизиты: подписи столбиком у края, данные следом с зазором ряда — список «поле: значение»
   у документа и сетка реквизитов у клиента (§3.35) складываются в одни и те же две колонки */
.em-obj-view .em-frame-side .pv-meta{grid-template-columns:max-content max-content; justify-content:start; column-gap:var(--em-gap-row-lg);}
.em-obj-view .em-frame-side .pv-meta dt{text-align:right; white-space:nowrap;}
.em-obj-view .em-frame-side .pv-meta dd{text-align:right; font-variant-numeric:tabular-nums;}
.em-obj-view .em-frame-side .em-facts{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--em-gap-row) var(--em-gap-row-lg); justify-content:start; align-items:baseline;}
.em-obj-view .em-frame-side .em-fact{display:contents;}
.em-obj-view .em-frame-side .em-fact-label{text-align:right; white-space:nowrap;}
.em-obj-view .em-frame-side .em-fact-value{text-align:right; font-variant-numeric:tabular-nums;}
/* Лента цепочки: номер шага кружком рядом со значком типа, стрелка вместо конца линии */
.em-obj-view .em-chain-node{position:relative; grid-template-columns:var(--em-tab-badge-h) var(--em-chain-mark) minmax(0,1fr); gap:var(--em-gap-row);}
.em-obj-view .em-chain-step{width:var(--em-tab-badge-h); height:var(--em-tab-badge-h); margin-block-start:calc((var(--em-chain-mark) - var(--em-tab-badge-h)) / 2); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--em-brand-blue); color:#fff; font-size:.72rem; font-weight:800; line-height:1;}
.em-obj-view .em-chain-now .em-chain-step{background:var(--em-accent); color:var(--em-brand-deep);}
.em-obj-view .em-chain-node:not(:last-child) .em-chain-mark::after{height:calc(100% + var(--em-block-gap) - var(--em-gap-row));}
.em-obj-view .em-chain-arrow{position:absolute; inset-block-end:calc(-1 * var(--em-gap-row)); inset-inline-start:calc(var(--em-tab-badge-h) + var(--em-chain-mark) / 2); color:var(--em-border); font-size:.72rem; line-height:1;}
/* Карточка узла: те же две колонки, что у реквизитов — бейдж состояния стоит на линии данных */
.em-obj-view .em-chain-card{display:grid; grid-template-columns:max-content max-content; justify-content:start; align-items:center; gap:var(--em-gap-row) var(--em-gap-row-lg);}
.em-obj-view .em-chain-card .em-chain-head, .em-obj-view .em-chain-card .em-chain-state, .em-obj-view .em-chain-card .pv-meta{display:contents;}
.em-obj-view .em-chain-card .em-chain-type, .em-obj-view .em-chain-card .em-chain-date, .em-obj-view .em-chain-card dt{text-align:right; white-space:nowrap;}
.em-obj-view .em-chain-card .em-chain-num, .em-obj-view .em-chain-card dd{text-align:right;}
.em-obj-view .em-chain-card .em-pill{justify-self:start;}

/* ═══ Документы: аמצעי תשלום ═══ */
.pm-rows{display:flex; flex-direction:column; gap:var(--em-gap-row); margin-bottom:12px;}
.pm-row{display:flex; flex-wrap:wrap; gap:var(--em-gap-row); align-items:flex-end; padding:var(--em-pad-lg); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg);}
.pm-row .form-group{flex:1; min-width:150px; margin:0;}
.pm-del{width:32px; height:32px; margin-bottom:var(--em-gap-tight); border-radius:50%; border:none; background:var(--em-danger-bg); color:var(--em-danger-text); cursor:pointer;}

/* ═══ תעודת זיכוי: строки возврата ═══ */
.cn-head, .cn-row{display:grid; grid-template-columns:minmax(200px,3fr) 80px 110px 110px 110px; gap:var(--em-gap-row); align-items:center;}
.cn-head{padding:0 4px var(--em-pad-y-sm); font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.cn-row{padding:var(--em-pad); border:1px solid var(--em-border); border-radius:var(--em-radius); margin-bottom:var(--em-block-gap);}

/* ═══ Закупки: строки заказа ═══ */
.po-head, .po-row{display:grid; grid-template-columns:minmax(200px,3fr) 80px 90px 120px 110px 44px; gap:var(--em-gap-row); align-items:center;}
.po-head{padding:0 4px var(--em-pad-y-sm); font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.po-row{padding:var(--em-pad); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg); margin-bottom:var(--em-block-gap);}
.po-cell{min-width:0;}
.po-cell-name{display:flex; flex-direction:column; gap:var(--em-gap-tight);}
.po-cell-total{font-weight:800; direction:ltr; text-align:start;}

/* ═══ Закупки: приёмка ═══ */
.pr-head, .pr-row{display:grid; grid-template-columns:minmax(180px,3fr) 70px 70px 110px 110px 110px 100px; gap:var(--em-gap-row); align-items:center;}
.pr-head{padding:0 4px var(--em-pad-y-sm); font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.pr-row{padding:var(--em-pad); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg); margin-bottom:var(--em-block-gap);}
.pr-cell-name{display:flex; flex-direction:column; gap:var(--em-gap-tight);}
.pr-cost{font-weight:800;}
.pr-serials{grid-column:1 / -1; padding-top:var(--em-pad-y); border-top:1px solid var(--em-border-subtle);}
.pr-serial-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:var(--em-gap-row); margin-top:var(--em-gap-row);}
.pr-receipt{padding:var(--em-pad-lg); border:1px solid var(--em-border); border-radius:var(--em-radius); margin-bottom:12px;}
.pr-receipt-head{display:flex; gap:var(--em-gap-row); align-items:baseline; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--em-block-gap);}

/* ═══ Расчёт себестоимости поставки: строки товаров ═══ */
.ic-head, .ic-row{display:grid; grid-template-columns:minmax(180px,3fr) 70px 100px 110px 110px 110px 90px 44px; gap:var(--em-gap-row); align-items:center;}
.ic-head{padding:0 4px var(--em-gap-row); font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.ic-rows{display:flex; flex-direction:column; gap:var(--em-gap-row);}
.ic-row{padding:var(--em-block-gap); border:1px solid var(--em-border); border-radius:var(--em-radius); background:var(--em-card-bg);}
.ic-cell{min-width:0;}
.ic-cell-name{display:flex; flex-direction:column; gap:var(--em-gap-tight);}
.ic-out{display:flex; align-items:center; font-weight:800;}
.ic-real{display:flex; align-items:center;}
.ic-loss{color:var(--em-danger-text); font-weight:800;}

/* ═══ Строка действия (.em-act-row): пояснение и кнопка в одной строке ═══ */
/* Пояснение под кнопкой читается как подпись к пустому месту и растягивает карточку.
   Один класс на всю систему: текст занимает остаток строки, кнопка стоит у её конца. */
.em-act-row{display:flex; align-items:center; gap:var(--em-gap-row-lg); flex-wrap:wrap;}
.em-act-row > .card-note, .em-act-row > .f-hint{margin:0; flex:1 1 240px; min-width:0;}
.em-act-row form{margin:0;}
.em-act-row .abtn, .em-act-row .btn-row{flex:0 0 auto;}

/* ═══ Поле и кнопка в одной строке (.em-field-row) ═══ */
/* Кнопка, относящаяся к полю, стоит рядом с ним, а не в подписи под ним. */
.em-field-row{display:flex; align-items:center; gap:var(--em-gap-row); flex-wrap:wrap;}
.em-field-row > .form-control{flex:1 1 140px; min-width:0; width:auto;}
.em-field-row > .abtn{flex:0 0 auto;}

/* ═══ Ряды обслуживания (.em-maint-row) — карточка «ניקוי ותחזוקה» ═══ */
.em-maint-row{
    display:flex; align-items:center; gap:var(--em-gap-row-lg);
    padding:14px 0; border-top:1px solid var(--em-border-subtle);
}
.em-maint-row:first-of-type{border-top:0; padding-top:4px;}
.em-maint-icon{
    width:40px; height:40px; border-radius:var(--em-radius); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.em-maint-icon-green{background:var(--em-success-bg); color:var(--em-success);}
.em-maint-icon-red{background:var(--em-danger-bg); color:var(--em-danger);}
.em-maint-info{flex:1 1 auto; min-width:0;}
.em-maint-title{font-weight:800; font-size:.86rem; color:var(--em-text);}
.em-maint-sub{font-size:.78rem; color:var(--em-text-3); margin-top:1px;}
.em-maint-row .abtn{flex-shrink:0;}
/* Подсказка крайней кнопки ряда центрировалась под ней и выходила за край страницы
   на 20 точек — появлялась горизонтальная прокрутка. Плашка прижата к началу кнопки
   и растёт внутрь страницы; замер на живой странице: прокрутки нет. */
.em-maint-row .em-tip::after{left:0; transform:none;}
@media (max-width:768px){
    .rc-batch-row{grid-template-columns:1fr;}

    .em-maint-row{flex-wrap:wrap;}
    .em-maint-row .abtn{width:100%; justify-content:center; min-height:44px;}
}

/* ═══ Строки проверки системы (.em-check-row) — экран обновления ═══ */
.em-check-list{display:flex; flex-direction:column; gap:var(--em-gap-row); margin-top:12px;}
.em-check-row{
    display:flex; align-items:center; gap:var(--em-gap-row-lg);
    border:1px solid; border-radius:var(--em-radius); padding:var(--em-pad-y-lg) 14px;
}
.em-check-ok{background:var(--em-success-bg); border-color:var(--em-success-border);}
.em-check-fail{background:var(--em-danger-bg); border-color:var(--em-danger-border);}
.em-check-row i{font-size:1rem; flex-shrink:0;}
.em-check-ok i{color:var(--em-success);}
.em-check-fail i{color:var(--em-danger);}
.em-check-title{font-weight:800; font-size:.86rem; color:var(--em-text);}
.em-check-sub{font-size:.78rem; color:var(--em-text-3);}

/* ═══ Зона перетаскивания файла (.em-dropzone) — экран обновления ═══ */
.em-dropzone{
    border:2px dashed var(--em-border-input); border-radius:var(--em-radius);
    padding:28px 16px; text-align:center; cursor:pointer;
    transition:border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.em-dropzone:hover, .em-dropzone.em-drag{border-color:var(--em-primary-soft); background:var(--em-primary-pastel);}
.em-dropzone-icon{
    width:56px; height:56px; margin:0 auto var(--em-gap-row-lg); border-radius:var(--em-radius);
    background:var(--em-primary-pastel); color:var(--em-primary-soft);
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.em-dropzone.em-drag .em-dropzone-icon, .em-dropzone:hover .em-dropzone-icon{background:#fff;}
.em-dropzone-title{font-weight:800; font-size:.95rem; color:var(--em-text);}
.em-dropzone-sub{font-size:.78rem; color:var(--em-text-3); margin-top:var(--em-gap-tight);}
.em-dropzone-file{margin-top:var(--em-block-gap); font-size:.82rem; font-weight:700; color:var(--em-success); display:none; line-height:1.5; overflow-wrap:anywhere;}
.em-dropzone.em-has-file .em-dropzone-file{display:block;}

/* ═══ Каркас карточек и форм всех разделов (П.41, Сборки 185+) ═══
   §3.33 Сетка формы — поля одной группы рядом: до трёх в ряд, на планшете два, на телефоне одно.
   §3.34 Ряд карточек — две-три карточки в ряд, на телефоне одна.
   §3.35 Визитка и сетка реквизитов — имя крупно, строка ключевых данных, плашка состояния;
         реквизиты «подпись сверху, значение снизу», пустые не выводятся. */
.em-form-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--em-gap-row-lg); align-items:start;}
.em-form-grid > .form-group{margin-bottom:0; min-width:0;}
.em-form-grid-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.em-form-grid .em-fg-full{grid-column:1 / -1;}
.em-fg-title{grid-column:1 / -1; font-size:.8rem; font-weight:800; color:var(--em-primary); padding-top:var(--em-gap-row); border-top:1px solid var(--em-border-subtle); margin-top:var(--em-gap-row);}
.em-fg-title:first-child{border-top:0; padding-top:0; margin-top:0;}
.em-card-head{display:flex; align-items:center; gap:var(--em-gap-row-lg); flex-wrap:wrap;}
.em-card-head-thumb{width:var(--em-thumb); height:var(--em-thumb); border-radius:var(--em-radius); object-fit:cover; background:var(--em-subtle); flex-shrink:0;}
.em-card-head-text{flex:1; min-width:0;}
.em-card-head-name{font-size:1.15rem; font-weight:800; color:var(--em-text); line-height:1.25; overflow-wrap:anywhere;}
.em-card-head-meta{font-size:.82rem; color:var(--em-text-3); margin-top:var(--em-gap-tight);}
.em-card-head-pills{display:flex; gap:var(--em-gap-row); flex-wrap:wrap; align-items:center;}
.em-facts{display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--em-facts-min), 1fr)); gap:var(--em-gap-row-lg) var(--em-gap-row-lg); margin-top:var(--em-gap-row-lg);}
.em-fact{min-width:0;}
.em-fact-label{font-size:.72rem; font-weight:700; color:var(--em-text-3); line-height:1.3;}
.em-fact-value{font-size:.9rem; font-weight:600; color:var(--em-text); margin-top:var(--em-gap-tight); overflow-wrap:anywhere;}
.em-fact-value.num-ltr{text-align:right;}
.em-fact-wide{grid-column:1 / -1;}
.em-fact-text{white-space:pre-line; font-weight:400; color:var(--em-text-2);}
/* 🔴 Карточка объекта (решения владельца 09.09.2026): знак визитки — круг в тоне своего
   раздела, единственное цветное пятно блока; части строки ключевых данных не рвутся
   по дефису — телефон разрывался пополам; нечётный последний реквизит занимает весь ряд,
   поэтому клетки с пустым соседом в колонке не бывает. */
.em-card-head-mark{width:var(--em-thumb); height:var(--em-thumb); border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; color:#fff;}
.em-card-head-meta > span{white-space:nowrap;}
.em-frame-side .em-facts > .em-fact:nth-child(odd):last-child{grid-column:1 / -1;}
.em-frame-side .em-facts > .em-fact:nth-child(odd):has(+ .em-fact-wide){grid-column:1 / -1;}

/* 🔴 §3.39 Плитка сведения (решения владельца 14.09.2026, карточка просмотра).
   Плитки делят строку между собой и растягиваются до края блока — воздуха рядом
   не остаётся при любом числе сведений, как у потока полей формы (§3.33). */
.em-mini{display:flex; flex-wrap:wrap; gap:var(--em-gap-row);}
.em-mini-cell{flex:1 1 var(--em-mini-min); min-width:0; background:var(--em-subtle); border:1px solid var(--em-border-subtle); border-radius:var(--em-radius); padding:var(--em-pad-y-lg) var(--em-pad-x);}
/* Подпись плитки — тон text-2: на пастели и на заливке даёт 6,77 и 6,92 при норме 4,5; text-3 давал 4,25 (Сборка 263) */
.em-mini-cell .em-fact-label{font-size:.72rem; font-weight:700; color:var(--em-text-2); line-height:1.3;}
.em-mini-cell b{display:block; font-size:1.15rem; font-weight:800; color:var(--em-text); line-height:1.2; white-space:nowrap;}
/* Ведущее число блока — в пастели краски: главная цена читается первой */
.em-mini-cell.is-lead{background:var(--em-primary-pastel); border-color:var(--em-primary);}
.em-mini-cell.is-lead b{color:var(--em-primary);}
/* Сведение-слово (категория, код, вид): текст вместо числа */
.em-mini-sm{padding:var(--em-pad-y) var(--em-pad-x-sm);}
.em-mini-sm span{display:block; font-size:.85rem; font-weight:700; color:var(--em-text); overflow-wrap:anywhere;}
/* Сведение-ссылка: те же состояния, что у вкладки сбоку и таба диапазона (§3.12, §3.14) */
.em-mini-link{display:block; text-decoration:none; transition:background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);}
.em-mini-link span{color:var(--em-primary);}
.em-mini-link:hover{background:var(--em-grad-view-hover); border-color:transparent;}
.em-mini-link:hover .em-fact-label, .em-mini-link:hover span{color:#fff;}
.em-mini-link:focus-visible{box-shadow:var(--em-ring-focus); outline:none;}

/* 🔴 §3.40 Карусель фотографий карточки (решение владельца 14.09.2026).
   Кадр идёт по самой фотографии: своей заливки и рамки у него нет, полей по краям
   не остаётся. Счётчик и лента миниатюр стоят по центру под кадром. */
.em-gal{display:flex; flex-direction:column; gap:var(--em-gap-row);}
.em-gal-stage{position:relative; display:block;}
.em-gal-stage img{display:block; width:100%; height:auto; border-radius:var(--em-radius);}
.em-gal-nav{position:absolute; top:50%; transform:translateY(-50%);}
.em-gal-prev{inset-inline-start:var(--em-gap-row-lg);}
.em-gal-next{inset-inline-end:var(--em-gap-row-lg);}
.em-gal-bar{display:flex; flex-direction:column; align-items:center; gap:var(--em-gap-row);}
.em-gal-count{direction:ltr; background:var(--em-slate-deep); color:#fff; font-size:11px; font-weight:600; padding:var(--em-gap-row) var(--em-block-gap); border-radius:var(--em-radius);}
.em-gal-thumbs{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--em-gap-row);}
.em-gal-thumb{width:var(--em-thumb); height:var(--em-thumb); padding:0; border:1px solid var(--em-border-subtle); border-radius:var(--em-radius); background:var(--em-subtle); overflow:hidden; cursor:pointer;}
.em-gal-thumb img{width:100%; height:100%; object-fit:cover;}
.em-gal-thumb.is-on{border-color:var(--em-primary); box-shadow:var(--em-ring-focus);}

/* 🔴 §3.41 Строка прикреплённого файла на карточке: значок типа в квадрате,
   имя одной строкой, действие у края (решение владельца 14.09.2026) */
.em-files{display:flex; flex-direction:column; gap:var(--em-gap-row);}
.em-file-row{display:flex; align-items:center; gap:var(--em-gap-row-lg); border:1px solid var(--em-border-subtle); border-radius:var(--em-radius); padding:var(--em-pad-y) var(--em-pad-x);}
.em-file-ic{flex:0 0 auto; width:var(--em-control-h); height:var(--em-control-h); display:flex; align-items:center; justify-content:center; border-radius:var(--em-radius); background:var(--em-subtle); color:var(--em-text-2);}
.em-file-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; font-weight:600;}
/* Имя объекта и плашки состояния разведены по краям блока (§3.35) */
.em-name-card .em-card-head{width:100%; gap:var(--em-block-gap);}
.em-name-card .em-card-head-pills{margin-inline-start:auto;}
@media (max-width:1279px){
    .em-form-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:768px){
    .inline-add{flex-wrap:wrap;}
    .inline-add .form-group{min-width:220px;}
    .em-form-grid{grid-template-columns:minmax(0, 1fr);}
}

/* ═══ Две колонки карточек (общий класс: дашборд, обновление системы) ═══ */
.em-cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--em-block-gap); align-items:stretch;}
.em-cols > .card{margin-bottom:0;}
.em-col{display:flex; flex-direction:column; gap:var(--em-block-gap); min-width:0;}
.em-col > .card{margin-bottom:0;}
@media (max-width:991px){
    .em-cols{grid-template-columns:1fr;}
    .em-stat{flex-basis:calc(50% - var(--em-block-gap));}
}
@media (max-width:480px){
    .em-stat{flex-basis:100%;}
}

/* ═══ Отчёты ═══ */
.rp-total td{font-weight:800; background:var(--em-primary-pastel); color:var(--em-primary-pastel-text); border-top:2px solid var(--em-border); border-bottom:none;}

/* ═══ Настройки: дизайн ═══ */
.dz-num{width:74px; display:inline-block;}
.dz-items{list-style:none; display:flex; flex-direction:column; gap:var(--em-gap-row);}
.dz-items li{display:flex; align-items:center; gap:var(--em-gap-row);}
/* Поле кода не тянется на всю строку: правило .em-field-row > .form-control сильнее
   имени класса, поэтому ширина задаётся селектором с большим весом */
.em-field-row > .form-control.dz-hex{flex:0 0 auto; width:140px; text-transform:uppercase;}
.dz-sample{width:var(--em-control-h); height:var(--em-control-h); flex:0 0 auto;
    border:1px solid var(--em-border-input); border-radius:var(--em-radius);
    background:var(--em-picked, var(--em-primary));}
.dz-presets{display:flex; flex-wrap:wrap; gap:var(--em-gap-row);}
.dz-preset{width:var(--em-control-h); height:var(--em-control-h); padding:0; cursor:pointer;
    border:1px solid var(--em-border-input); border-radius:var(--em-radius);
    background:var(--em-picked, var(--em-subtle));}
.dz-preset.is-on{border-color:var(--em-primary-soft); box-shadow:var(--em-ring-focus);}
.dz-swatches{display:flex; flex-wrap:wrap; gap:var(--em-gap-row-lg); margin-top:12px;}
.dz-swatch{display:flex; align-items:center; gap:var(--em-gap-row); font-size:.8rem; color:var(--em-text-3);}
.dz-chip{width:22px; height:22px; border-radius:var(--em-radius); border:1px solid var(--em-border);}
.dz-chip-primary{background:var(--em-primary);}
.dz-chip-hover{background:var(--em-primary-hover);}
.dz-chip-soft{background:var(--em-primary-soft);}
.dz-chip-pastel{background:var(--em-primary-pastel);}

/* ═══ Полоса «в системе демо-данные» ═══ */
.demo-bar{display:flex; align-items:center; gap:var(--em-gap-row); flex-wrap:wrap; margin-bottom:var(--em-block-gap);
    padding:9px 14px; border-radius:var(--em-radius); font-size:.84rem; font-weight:600;
    color:var(--em-warn-text); background:var(--em-warn-bg); border:1px solid var(--em-warn-border);}
.demo-bar a{color:inherit; font-weight:800;}

/* ═══ Полоса «вы работаете как …» (П.49, вход под сотрудником) ═══
   Строй тот же, что у полосы демо-данных: общий отступ, скругление и размер.
   Разводит их только семья цвета — «сведения» вместо «внимание». */
.em-as-bar{display:flex; align-items:center; gap:var(--em-gap-row); flex-wrap:wrap; margin-bottom:var(--em-block-gap);
    padding:9px 14px; border-radius:var(--em-radius); font-size:.84rem; font-weight:600;
    color:var(--em-info-text); background:var(--em-info-bg); border:1px solid var(--em-info-border);}
.em-as-bar form{margin-inline-start:auto;}
.em-as-bar button{color:inherit; font-weight:800; background:none; border:0; cursor:pointer; padding:0;}

/* ═══ Лиды ═══ */
.ld-msg{max-width:320px; white-space:pre-line; color:var(--em-text-2); font-size:.84rem;}

/* ═══ Глобальный поиск: подсказки ═══ */
.hd-sug{position:absolute; top:calc(100% + var(--em-drop-gap)); inset-inline-start:0; width:360px; max-width:86vw; max-height:60vh; overflow:auto; background:var(--em-card-bg); border:1px solid var(--em-border); border-radius:var(--em-radius); box-shadow:0 12px 32px rgba(8,10,37,.18); z-index:120;}
.hd-sug-group{display:flex; align-items:center; gap:var(--em-gap-row); padding:7px 12px; font-size:.7rem; font-weight:800; color:var(--em-text-3); background:var(--em-subtle);}
.hd-sug-item{display:block; padding:9px 12px; text-decoration:none; color:var(--em-text); border-bottom:1px solid var(--em-border-subtle);}
.hd-sug-item:last-child{border-bottom:none;}
.hd-sug-item:hover{background:var(--em-primary-pastel);}
.hd-sug-empty{padding:12px; text-align:center; color:var(--em-placeholder); font-size:.85rem;}

/* ═══ Колокольчик сигналов ═══ */
.hd-bell{position:relative;}
/* Общий канон выпадашек шапки: вырастание из кнопки (opacity + scale .96→1) */
.hd-menu{
    position:absolute; top:calc(100% + 14px); left:0; min-width:230px;
    background:var(--em-card-bg); border:1px solid var(--em-border); border-radius:var(--em-radius);
    box-shadow:var(--em-shadow-drop); z-index:120; overflow:hidden;
    visibility:hidden; opacity:0; transform:translateY(-4px) scale(.96); transform-origin:top;
    transition:opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility .15s var(--ease-out);
}
.hd-menu.open{visibility:visible; opacity:1; transform:translateY(0) scale(1);}
.em-nb-item{display:flex; align-items:center; gap:var(--em-gap-row); padding:11px 14px; border-bottom:1px solid var(--em-border-subtle); text-decoration:none; color:inherit; cursor:pointer; transition:background .12s;}
.em-nb-item:last-child{border-bottom:none;}
.em-nb-item:hover{background:var(--em-surface-2);}
.em-nb-item-icon{width:38px; height:38px; border-radius:var(--em-radius); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.em-nb-high .em-nb-item-icon{background:var(--em-danger-bg); color:var(--em-danger-deep);}
.em-nb-medium .em-nb-item-icon{background:var(--em-warn-bg); color:var(--em-warn-text);}
.em-nb-info .em-nb-item-icon{background:#e0f2fe; color:#075985;}
.em-nb-item-info{flex:1; min-width:0;}
.em-nb-item-info strong{display:block; font-size:.86rem; color:var(--em-text); font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.em-nb-item-info span{display:block; font-size:.75rem; color:var(--em-text-3); line-height:1.3; margin-top:var(--em-gap-tight);}
.em-nb-item-count{background:var(--em-grad-muted); color:#fff; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:var(--em-count-radius); min-width:22px; text-align:center; direction:ltr; flex-shrink:0;}
.em-nb-high .em-nb-item-count{background:var(--em-grad-danger-btn);}
.em-nb-medium .em-nb-item-count{background:var(--em-grad-amber);}
.em-nb-info .em-nb-item-count{background:var(--em-grad-sky);}
.em-nb-head{padding:1rem; background:var(--em-grad-primary); color:#fff; position:relative; overflow:hidden; display:flex; align-items:center; gap:var(--em-gap-row); font-weight:700;}
.em-nb-head::before{content:''; position:absolute; inset:0; background:var(--em-glare); pointer-events:none;}
.em-nb-head > *{position:relative;}
.hd-bell-empty{padding:12px; color:var(--em-placeholder); font-size:.85rem; text-align:center;}

/* ═══ Меню пользователя (аватар в шапке) ═══ */
.hd-user{position:relative;}
.user-menu{min-width:var(--em-user-menu-w);}
.dropdown-menu-header{padding:1.25rem 1rem; background:var(--em-grad-primary); color:#fff; position:relative; overflow:hidden;}
.dropdown-menu-header::before{content:''; position:absolute; inset:0; background:var(--em-glare); pointer-events:none;}
.menu-header-content{position:relative; display:flex; align-items:center; gap:var(--em-gap-row-lg);}
.menu-header-content .big-avatar{width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff; flex-shrink:0;}
.menu-header-content .user-name{font-size:1rem; font-weight:700; line-height:1.2;}
.menu-header-content .user-role{font-size:.75rem; opacity:.9; margin-top:var(--em-gap-tight);}
.dropdown-list{list-style:none; margin:0; padding:.5rem 0;}
.dropdown-list .dropdown-form{margin:0;}
.dropdown-list .dropdown-form button, .dropdown-list .dropdown-form a{display:flex; align-items:center; gap:var(--em-gap-row); width:100%; padding:.65rem 1.25rem; font-family:var(--em-font); font-size:.85rem; font-weight:600; color:var(--em-text-body); background:transparent; border:none; text-align:right; cursor:pointer; transition:background .15s, color .15s;}
.dropdown-list .dropdown-form button:hover, .dropdown-list .dropdown-form a:hover{background:#f0f4ff; color:var(--em-primary-hover);}
.dropdown-list .dropdown-form button i, .dropdown-list .dropdown-form a i{width:18px; text-align:center; color:#6c757d; font-size:14px; transition:color .15s;}
.dropdown-list .dropdown-form button:hover i, .dropdown-list .dropdown-form a:hover i{color:var(--em-primary-hover);}
.dropdown-list .logout-btn, .dropdown-list .logout-btn i, .dropdown-list .em-act-danger, .dropdown-list .em-act-danger i{color:var(--em-danger);}
.dropdown-list .logout-btn:hover, .dropdown-list .em-act-danger:hover{background:#fef2f2; color:var(--em-danger-deep);}
.dropdown-list .logout-btn:hover i, .dropdown-list .em-act-danger:hover i{color:var(--em-danger-deep);}
#hdBellMenu{width:var(--em-bell-w); max-width:calc(100vw - 20px);}
/* Выпадашка «פעולות» в заголовке страницы (Сборка 155): тот же .hd-menu, что у шапки,
   пункты — тем же списком, что у меню пользователя; своей выпадашки экран не заводит.
   Якорь left:0 — литерал, как у выпадашек шапки (§2.1): кнопка стоит у левого края. */
.em-act-drop{position:relative;}
.em-act-menu{text-align:start;}
.em-act-menu .dropdown-form a{text-decoration:none;}

/* ═══ Кнопка-ссылка в неактивном состоянии ═══ */
.is-disabled{pointer-events:none; opacity:.5;}

/* ═══ Настройки ═══ */
.set-logo{display:flex; gap:var(--em-gap-row-lg); align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.set-logo-img{max-width:220px; max-height:90px; object-fit:contain; padding:var(--em-pad); border:1px solid var(--em-border); border-radius:var(--em-radius); background:#fff;}
.set-logo-remove{display:inline-flex; align-items:center; gap:var(--em-gap-row); font-size:.85rem; color:var(--em-text-2);}
.set-logo-remove input{width:16px; height:16px; accent-color:var(--em-primary);}
.set-series-head, .set-series-row{display:grid; grid-template-columns:minmax(140px,2fr) 120px 140px minmax(120px,1fr); gap:var(--em-gap-row); align-items:center;}
.set-series-head{padding:0 4px var(--em-pad-y-sm); font-size:.72rem; font-weight:700; color:var(--em-text-3);}
.set-series-row{padding:var(--em-pad); border:1px solid var(--em-border); border-radius:var(--em-radius); margin-bottom:var(--em-block-gap);}

/* ═══ Экран обновления: версия + оверлей установки ═══ */
.sys-ver{display:flex; align-items:center; gap:var(--em-gap-row-lg);}
.sys-ver-icon{width:44px; height:44px; border-radius:var(--em-radius); background:var(--em-info-bg); color:var(--em-info-text); display:flex; align-items:center; justify-content:center; font-size:1.1rem;}
.sys-ver-label{font-size:.74rem; font-weight:700; color:var(--em-text-3);}
.sys-ver-val{font-size:1rem; font-weight:700; color:var(--em-text);}
.sys-ver-date{font-weight:500; color:var(--em-text-3); font-size:.85rem;}
.em-loading-overlay{position:fixed; inset:0; z-index:10060; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:16px;}
.em-loading-box{background:var(--em-card-bg); border-radius:var(--em-radius); box-shadow:0 25px 80px rgba(0,0,0,.35); padding:28px var(--em-modal-pad-x); text-align:center; min-width:260px; animation:emToastIn .2s var(--ease-out);}
.em-spinner{width:46px; height:46px; margin:0 auto 14px; border-radius:50%; border:4px solid var(--em-subtle); border-top-color:var(--em-primary); animation:emSpin .8s linear infinite;}
.em-loading-title{font-weight:700; font-size:1.05rem; color:var(--em-text);}
.em-loading-sub{margin-top:4px; font-size:.85rem; color:var(--em-text-3);}
@keyframes emSpin{to{transform:rotate(360deg);}}

/* ═══ Вход в систему (standalone) ═══ */
.login-card{
    background:#fff; border-radius:var(--em-radius);
    box-shadow:0 10px 40px rgba(8,10,37,.25);
    width:100%; max-width:400px; padding:40px 36px;
}
.login-brand{display:flex; align-items:center; gap:var(--em-gap-row-lg); justify-content:center; margin-bottom:var(--em-block-gap);}
.login-mark{
    width:48px; height:48px; border-radius:50%;
    background:var(--em-grad-primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.login-word{font-size:22px; font-weight:800; line-height:1.1;}
.login-tag{font-size:11px; color:var(--em-text-3); font-weight:600;}
.login-title{text-align:center; font-size:1rem; font-weight:600; color:var(--em-text-3); margin:18px 0 22px;}
.login-card .form-group{margin-bottom:16px;}
.login-card .form-group label{font-size:.85rem; margin-bottom:var(--em-gap-row);}
.login-card .form-control{padding:var(--em-pad-y-lg) 12px var(--em-pad-y-lg) 38px; font-size:.95rem; height:42px;}
.login-card .f-check{margin-bottom:20px; color:var(--em-text-3);}
.login-card .f-check input{width:16px; height:16px;}
.login-btn{
    width:100%; padding:11px; border:none; border-radius:var(--em-radius);
    background:var(--em-grad-action); color:#fff;
    font-family:var(--em-font); font-size:15px; font-weight:700; cursor:pointer;
    transition:transform .15s var(--ease-out), box-shadow .2s var(--ease-out);
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.login-btn:hover{transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,.15);}
.login-btn:active{transform:translateY(-1px) scale(0.98);}
.alert-danger{display:flex; align-items:center; gap:var(--em-gap-row); background:#f8d7da; border:1px solid #f5c6cb; color:#721c24; border-radius:var(--em-radius); padding:var(--em-pad-y-lg) 14px; font-size:.85rem; font-weight:600; margin-bottom:18px;}

/* ═══ Публичная страница документа (standalone) ═══ */
.em-pubdoc{
    background:#fff; border-radius:var(--em-radius);
    box-shadow:0 10px 40px rgba(8,10,37,.25);
    width:100%; max-width:400px; padding:40px 36px;
    display:flex; flex-direction:column; align-items:center; gap:var(--em-gap-row); text-align:center;
}
.em-pubdoc-logo{width:64px; height:64px; object-fit:contain; border-radius:50%;}
.em-pubdoc-title{font-size:1.05rem; font-weight:800; color:var(--em-text);}
.em-pubdoc-sub{font-size:.85rem; font-weight:600; color:var(--em-text-3); margin-bottom:var(--em-block-gap);}

/* ═══ Страницы ошибок (standalone-light) ═══ */
.err-card{background:#fff; border-radius:var(--em-radius); box-shadow:0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); padding:48px 40px; text-align:center; max-width:420px; width:100%;}
.err-code{font-size:3.5rem; font-weight:800; color:var(--em-primary); line-height:1; margin-bottom:12px;}
.err-title{font-size:1.2rem; font-weight:700; margin-bottom:var(--em-gap-row);}
.err-text{font-size:.9rem; color:var(--em-text-3); margin-bottom:24px; line-height:1.5;}
.err-btn{display:inline-flex; align-items:center; gap:var(--em-gap-row); padding:var(--em-pad-y-lg) 22px; border-radius:var(--em-radius); background:var(--em-grad-action); color:#fff; text-decoration:none; font-weight:600; font-size:14px; transition:transform .15s var(--ease-out), box-shadow .2s var(--ease-out); box-shadow:0 2px 4px rgba(0,0,0,.1);}
.err-btn:hover{transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,.15);}

/* ═══ Инсталлятор (standalone) ═══ */
.wiz{background:#fff; border-radius:var(--em-radius); box-shadow:0 10px 40px rgba(8,10,37,.25); width:100%; max-width:560px; overflow:hidden;}
.wiz-head{background:var(--em-grad-primary); color:#fff; padding:22px 28px; display:flex; align-items:center; gap:var(--em-gap-row-lg);}
.wiz-mark{width:44px; height:44px; border-radius:50%; background:var(--em-on-brand-veil); display:flex; align-items:center; justify-content:center; font-size:1.2rem;}
.wiz-word{font-size:19px; font-weight:800; line-height:1.1;}
.wiz-tag{font-size:11px; color:rgba(255,255,255,.8); font-weight:600;}
.wiz-steps{display:flex; border-bottom:1px solid var(--em-install-border); background:var(--em-install-bg);}
.wiz-step{flex:1; text-align:center; padding:12px 4px; font-size:.75rem; font-weight:700; color:var(--em-placeholder); position:relative;}
.wiz-step.active{color:var(--em-primary);}
.wiz-step.done{color:var(--em-success);}
.wiz-step .n{display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--em-neutral-border); color:var(--em-text-3); align-items:center; justify-content:center; font-size:.72rem; margin-inline-end:5px;}
.wiz-step.active .n{background:var(--em-primary); color:#fff;}
.wiz-step.done .n{background:var(--em-success); color:#fff;}
.wiz-body{padding:28px;}
.wiz-title{font-size:1.15rem; font-weight:700; margin-bottom:4px;}
.wiz-sub{font-size:.88rem; color:var(--em-text-3); margin-bottom:20px;}
.wiz .form-group{margin-bottom:15px;}
.wiz .form-group label{font-size:.83rem; margin-bottom:5px;}
.wiz .form-control{padding:9px 12px; font-size:.92rem; height:40px;}
.wiz .abtn{padding:var(--em-pad-y-lg) 20px; font-size:14px; font-weight:700;}
.wiz .abtn:hover{box-shadow:0 4px 8px rgba(0,0,0,.15);}
.row2{display:flex; gap:var(--em-gap-row-lg);}
.row2 .form-group{flex:1;}
.check-row{display:flex; align-items:center; gap:var(--em-gap-row-lg); padding:11px 0; border-bottom:1px solid var(--em-border-subtle);}
.check-row:last-child{border-bottom:none;}
.check-ico{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0;}
.check-ok{background:var(--em-success-bg); color:var(--em-success);}
.check-bad{background:var(--em-danger-bg); color:var(--em-danger);}
.check-txt{flex:1;}
.check-label{font-weight:600; font-size:.9rem;}
.check-hint{font-size:.78rem; color:var(--em-text-3);}
.wiz-actions{margin-top:22px; display:flex; justify-content:flex-start;}
.wiz-done{text-align:center; padding:var(--em-pad-y-lg) 0 4px;}
.wiz-done-ic{width:64px; height:64px; border-radius:50%; background:var(--em-grad-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 16px;}
.wiz-note{background:var(--em-install-bg); border:1px solid var(--em-install-border); border-radius:var(--em-radius); padding:14px; text-align:right; font-size:.83rem; color:var(--em-text-3); margin-bottom:20px;}


/* ═══ Плитки статистики .em-stat (П.37, Сборки 160 и 164) ═══
   Вид по образцу владельца от 07.09.2026: значок в полупрозрачном квадрате сверху,
   под ним крупное число, подпись, строка сравнения, а внизу во всю ширину график —
   столбики, сглаженная кривая с точками и мягкая заливка под ней. Всё по центру.
   Заливка — одна из тринадцати ярких, по месту плитки в ряду. */
.em-stat-row{display:flex; flex-wrap:wrap; gap:var(--em-block-gap); margin-bottom:var(--em-block-gap);}
.em-stat{
    flex:1 1 calc(25% - var(--em-block-gap)); min-width:0;
    height:var(--em-stat-h); padding:var(--em-card-pad) var(--em-card-pad) 0; border-radius:var(--em-radius);
    position:relative; overflow:hidden; text-decoration:none; color:#fff;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--em-gap-row);
    box-shadow:var(--em-shadow-tile);
    transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
/* Свет сверху-справа — тот же блик, что у шапок модалок и выпадашек: плоская заливка
   без него читается как бумажный прямоугольник */
.em-stat::before{content:''; position:absolute; inset:0; background:var(--em-glare); pointer-events:none;}
/* Ни одна часть плитки не сжимается: высота плитки задана, и при сжатии первой
   уступала подпись — у неё нет своей высоты, и хвосты букв уходили под обрезку
   (найдено замером на бою 11.09.2026: нужно 18, оставалось 11). Полоса графика
   считается от остатка высоты, а не наоборот */
.em-stat > *{position:relative; flex:none;}
.em-stat:hover{transform:translateY(-3px); box-shadow:var(--em-shadow-tile-hover); color:#fff;}
/* Блик: светлая диагональная полоса проходит по плитке один раз, медленнее подъёма
   (решение владельца 07.09.2026). Вне наведения перехода нет — возврата не видно. */
.em-stat::after{content:''; position:absolute; inset:0; background:var(--em-grad-sheen); transform:translateX(-140%); pointer-events:none;}
.em-stat:hover::after{transform:translateX(140%); transition:transform var(--em-stat-sheen-time) var(--ease-out);}
.em-stat-ic{display:inline-flex; align-items:center; justify-content:center; aspect-ratio:1; padding:var(--em-gap-row); border-radius:var(--em-radius); background:var(--em-stat-plate); font-size:1.1rem; line-height:1;}
.em-stat-value{font-size:1.75rem; font-weight:800; line-height:1.05; letter-spacing:-.02em; direction:ltr; font-variant-numeric:tabular-nums;}
.em-stat-label{font-size:.82rem; font-weight:700; opacity:1; letter-spacing:.02em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Сравнение — плашка, а не строка: цифра периода не спорит с главным числом */
.em-stat-cmp{font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; gap:var(--em-gap-row); padding:0 var(--em-gap-row); line-height:1.9; border-radius:var(--em-radius); background:var(--em-stat-plate);}
.em-stat-chart{margin-top:auto; display:block; width:calc(100% + var(--em-gap-row-lg) * 2); height:var(--em-stat-chart-h);}
.em-stat-area{fill:#fff; fill-opacity:.16;}
.em-stat-line{fill:none; stroke:#fff; stroke-width:2; stroke-opacity:.95; vector-effect:non-scaling-stroke;}
.em-stat-bar{stroke:#fff; stroke-opacity:.75; stroke-width:3; vector-effect:non-scaling-stroke;}
.em-stat-dot{stroke:#fff; stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke;}
.em-stat-c1{background-image:var(--em-grad-stat-1);}
.em-stat-c2{background-image:var(--em-grad-stat-2);}
.em-stat-c3{background-image:var(--em-grad-stat-3);}
.em-stat-c4{background-image:var(--em-grad-stat-4);}
.em-stat-c5{background-image:var(--em-grad-stat-5);}
.em-stat-c6{background-image:var(--em-grad-stat-6);}
.em-stat-c7{background-image:var(--em-grad-stat-7);}
.em-stat-c8{background-image:var(--em-grad-stat-8);}
/* Переключатель периода — чипы канона (§3.12) радиокнопками: выбор виден сразу,
   а числа пересчитывает тот же живой отбор, что и списки (§3.23) */
.em-stat-period .chip{cursor:pointer;}
.em-stat-period .chip input{position:absolute; opacity:0; width:0; height:0;}
.em-stat-period .chip:has(input:checked){background:var(--em-grad-view); border-color:transparent; color:#fff;}
.em-stat-period .chip:has(input:checked):hover{background:var(--em-grad-view-hover); border-color:transparent;}
.em-stat-period .chip:focus-within{box-shadow:var(--em-ring-focus);}

/* ═══ Скелетоны загрузки .em-skel (канон §5.4) ═══ */
@keyframes emSkelPulse{0%{opacity:.6;} 50%{opacity:1;} 100%{opacity:.6;}}
.em-skel{display:inline-block; border-radius:var(--em-radius); background:linear-gradient(90deg,var(--em-neutral-border) 0%,var(--em-skel-mid) 50%,var(--em-neutral-border) 100%); background-size:200% 100%; animation:emSkelPulse 1.4s var(--ease-in-out) infinite;}
.em-skel-line{height:14px; margin-bottom:var(--em-block-gap);}
.em-skel-line.short{width:40%;}
.em-skel-line.medium{width:65%;}
.em-sug-skel{padding:12px;}
.em-sug-skel .em-skel-line:last-child{margin-bottom:0;}

/* ═══ Ховер-карточка .em-hovercard (канон §5.5): подробности при наведении, без запросов ═══ */
.em-hovercard{
    position:fixed; z-index:10040; min-width:220px; max-width:300px;
    background:var(--em-card-bg); border:1px solid var(--em-border); border-radius:var(--em-radius);
    box-shadow:0 10px 32px rgba(8,10,37,.12); padding:12px 14px;
    opacity:0; transform:translateY(4px); pointer-events:none;
    transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.em-hovercard.show{opacity:1; transform:none; pointer-events:auto;}
.em-hovercard-content{display:none;}
[data-em-hovercard] .list-name{border-bottom:1px dashed var(--em-faint); cursor:default;}
.hc-name{display:block; font-weight:700; margin-bottom:var(--em-gap-row);}
.hc-row{display:flex; align-items:center; gap:var(--em-gap-row); font-size:.85rem; color:var(--em-text-2); margin-bottom:4px;}
.hc-row i{color:var(--em-primary); width:14px; text-align:center;}
.hc-actions{display:flex; gap:var(--em-gap-row); margin-top:var(--em-block-gap); padding-top:var(--em-pad-y); border-top:1px solid var(--em-border-subtle);}

/* ═══ Чипы быстрых диапазонов (канон §5.13): своя компактная карточка перед фильтром ═══ */
.act-range-body{padding:12px 16px;}
.chip-row{display:flex; gap:var(--em-gap-row); flex-wrap:wrap;}
.chip{
    display:inline-flex; align-items:center; height:var(--em-control-h); padding:0 14px;
    border-radius:var(--em-radius); border:1px solid var(--em-border);
    font-size:.8rem; font-weight:700; text-decoration:none;
    color:var(--em-text); background:var(--em-card-bg);
    transition:background .12s var(--ease-out), border-color .12s var(--ease-out), color .12s var(--ease-out);
}
/* Гамма таба — та же, что у кнопки действия строки (решение владельца 10.09.2026):
   выбранный берёт заливку кнопки «צפייה», наведение — её же тон на ступень темнее. */
.chip:hover{background:var(--em-grad-view-hover); border-color:transparent; color:#fff;}
.chip.active{background:var(--em-grad-view); border-color:transparent; color:#fff;}
.chip.active:hover{background:var(--em-grad-view-hover); border-color:transparent;}

/* ═══ Кнопка копирования .em-copy-btn (канон) ═══ */
.em-copy-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0; margin:0 var(--em-gap-row); flex-shrink:0; vertical-align:middle;
    border:1px solid var(--em-border); border-radius:var(--em-radius); cursor:pointer;
    background:#fff; color:var(--em-placeholder); font-size:11px;
    transition:background .15s, color .15s, border-color .15s;
}
.em-copy-btn:hover{background:#eef0ff; border-color:#c7d2fe; color:var(--em-primary);}
.em-copy-btn:active{transform:scale(.97);}
.em-copy-btn.copied{background:#f0fdf4; border-color:var(--em-success-border); color:var(--em-success);}

/* ═══ Выпадашки с поиском (библиотека в public/vendor): вид по канону полей ═══ */
/* Обёртка библиотеки наследует классы исходного поля: гасим «поле внутри поля» */
.ts-wrapper.form-control{padding:0; border:0; height:auto; min-height:0; background:transparent; box-shadow:none;}
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control{
    border:1px solid var(--em-border-input); border-radius:var(--em-radius);
    font-family:var(--em-font); font-size:var(--em-input-font); font-weight:500;
    color:var(--em-text-body); background:#fff; box-shadow:none;
    min-height:var(--em-control-h); line-height:normal;
    display:flex; flex-wrap:nowrap; align-items:center;
    padding-block:0 !important; padding-inline:.75rem 1.75rem !important;
}
/* Одна строка: выбранное значение с многоточием, поле поиска занимает остаток */
.ts-wrapper.single .ts-control{height:var(--em-control-h);}
.ts-wrapper.single .ts-control > .item{flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ts-wrapper .ts-control > input{flex:1 1 0; min-width:0 !important; height:auto; font-size:var(--em-input-font);}
/* Своя стрелка у конца строки — библиотека её не рисует, а обычное поле её имеет */
.ts-wrapper.single .ts-control::after{
    content:''; position:absolute; inset-inline-end:.7rem; top:50%; transform:translateY(-2px);
    width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid var(--em-text-3); pointer-events:none;
}
.ts-wrapper.focus .ts-control{border-color:var(--em-primary-soft); box-shadow:var(--em-ring-focus);}
.ts-dropdown.ts-dropdown{border:1px solid var(--em-border); border-radius:var(--em-radius); box-shadow:0 12px 32px rgba(8,10,37,.16); font-family:var(--em-font);}
.ts-dropdown .option{padding:var(--em-pad-y) 12px; border-radius:var(--em-radius);}
.ts-dropdown .option.active{position:relative; background:var(--em-primary-pastel); color:var(--em-primary-pastel-text);}
.ts-dropdown .option.active::before{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--em-primary); border-radius:var(--em-radius);}
.ts-dropdown .option:active{transform:scale(.985);}
.ts-dropdown .no-results{padding:var(--em-pad-y-lg) 12px; color:var(--em-placeholder);}
.ts-dropdown-input{border:1px solid var(--em-border-input) !important; border-radius:var(--em-radius); font-family:var(--em-font);}

/* ═══ Поле даты и календарь системы (канон §3.20) ═══
   Системное окно выбора даты показывает месяцы и кнопки на языке компьютера — вместо него
   свой календарь на иврите. Видимое поле текстовое, значение для сервера — в скрытом поле. */
.em-date-field{position:relative; display:block;}
.em-date-field .em-date{padding-inline-end:var(--em-control-h);}
.em-date-btn{
    position:absolute; inset-inline-end:var(--em-inset-sm); top:50%; transform:translateY(-50%);
    width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
    border:none; background:transparent; color:var(--em-text-3); cursor:pointer; font-size:14px;
    border-radius:var(--em-radius); transition:color .15s var(--ease-out), background .15s var(--ease-out);
}
.em-date-btn:hover{color:var(--em-primary); background:var(--em-primary-pastel);}
.em-date-btn:active{transform:translateY(-50%) scale(.92);}

.em-datepicker{
    position:fixed; z-index:130; width:262px; background:var(--em-card-bg);
    border:1px solid var(--em-border); border-radius:var(--em-radius);
    box-shadow:var(--em-shadow-drop); overflow:hidden; direction:rtl;
    opacity:0; transform:translateY(-4px) scale(.98); pointer-events:none;
    transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.em-datepicker.em-dp-open{opacity:1; transform:none; pointer-events:auto;}
.em-dp-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--em-gap-row);
    padding:var(--em-pad-y) var(--em-pad-x); background:var(--em-grad-primary); color:#fff; position:relative; overflow:hidden;
}
.em-dp-head::before{content:''; position:absolute; inset:0; background:var(--em-glare); pointer-events:none;}
.em-dp-head > *{position:relative;}
.em-dp-title{font-size:.86rem; font-weight:800;}
.em-dp-nav{
    width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
    border:none; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; font-size:12px;
    border-radius:var(--em-radius); transition:background .15s var(--ease-out);
}
.em-dp-nav:hover{background:rgba(255,255,255,.3);}
.em-dp-nav:active{transform:scale(.93);}
.em-dp-body{padding:var(--em-pad);}
.em-dp-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--em-gap-tight);}
.em-dp-dow{
    text-align:center; font-size:.68rem; font-weight:800; color:var(--em-text-3);
    text-transform:none; padding-bottom:4px;
}
.em-dp-day{
    height:30px; display:inline-flex; align-items:center; justify-content:center;
    border:none; background:transparent; cursor:pointer; direction:ltr;
    font-family:var(--em-font); font-size:.8rem; font-weight:600; color:var(--em-text);
    border-radius:var(--em-radius); transition:background .12s var(--ease-out), color .12s var(--ease-out);
}
.em-dp-day:hover{background:var(--em-row-hover);}
.em-dp-day:active{transform:scale(.93);}
.em-dp-day.em-dp-out{color:var(--em-faint); font-weight:500;}
.em-dp-day.em-dp-today{background:var(--em-primary-pastel); color:var(--em-primary-pastel-text); font-weight:800;}
.em-dp-day.em-dp-sel{background:var(--em-grad-primary); color:#fff; font-weight:800;}
.em-dp-foot{
    display:flex; align-items:center; justify-content:space-between; gap:var(--em-gap-row);
    padding:var(--em-pad); border-top:1px solid var(--em-border-subtle); background:var(--em-surface-2);
}
.em-dp-link{
    border:none; background:transparent; cursor:pointer; padding:4px var(--em-pad-x-sm);
    font-family:var(--em-font); font-size:.78rem; font-weight:700; color:var(--em-primary);
    border-radius:var(--em-radius); transition:background .12s var(--ease-out);
}
.em-dp-link:hover{background:var(--em-primary-pastel);}
.em-dp-link.em-dp-clear{color:var(--em-text-3);}
.em-dp-link.em-dp-clear:hover{background:var(--em-neutral-bg);}
@media (max-width:768px){
    .em-datepicker{width:min(300px, 92vw);}
    .em-dp-day{height:36px; font-size:.86rem;}
}
@media (hover: none){
    .em-dp-day:hover{background:transparent;}
    .em-date-btn:hover{background:transparent; color:var(--em-text-3);}
}

/* ═══ Выбор файла (канон): кнопка на иврите вместо системной, имя файла рядом ═══ */
.em-file{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.em-file-picker{
    display:inline-flex; align-items:center; gap:var(--em-gap-row); padding:7px 12px;
    background:#fff; border:1px solid var(--em-border); border-radius:var(--em-radius);
    font-size:.82rem; color:var(--em-text-3); cursor:pointer; transition:border-color .1s, color .1s, transform .1s;
}
.em-file-picker:hover{border-color:var(--em-primary); color:var(--em-text);}
.em-file-picker i{color:var(--em-primary);}
.em-file-picker:active{transform:scale(.97);}
.em-filename{
    font-size:.78rem; color:var(--em-text-3); font-style:italic; padding:7px var(--em-pad-x);
    background:#fff; border:1px solid var(--em-border); border-radius:var(--em-radius);
    max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block;
}
.em-file-row{display:flex; gap:var(--em-gap-row); flex-wrap:wrap; align-items:center;}

/* ═══ Мобайл (§4.5 / §13.4) ═══ */
@media (max-width:768px){
    /* Мобильная шапка канона: 54px, лого-зона остаётся, тот же гамбургер */
    .app-header{height:calc(54px + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px);}
    .app-header__logo{padding:0 .75rem; height:54px; width:auto;}
    .app-header__logo .logo-src{font-size:17px;}
    .app-header__logo .logo-sub{font-size:9px;}
    .app-header__content{padding:0 .75rem; height:54px; gap:var(--em-gap-row);}
    .header-user-info{display:none;}
    .search-wrapper.active{width:190px;}
    .search-wrapper.active .input-holder{width:150px;}
    .search-wrapper.active .btn-close-search{inset-inline-start:160px;}
    .em-side-layout{grid-template-columns:1fr;}
    .em-side-tabs{grid-column:1; grid-row:1; flex-direction:row; overflow-x:auto; position:static;}
    .em-side-tab{flex:0 0 auto;}
    .em-side-panes{grid-column:1; grid-row:2;}
    .app-sidebar{transform:translateX(100%); width:min(var(--em-sidebar-w), 85vw); top:calc(54px + env(safe-area-inset-top, 0px));}
    body.sidebar-open .app-sidebar{transform:translateX(0);}
    body.sidebar-open .sidebar-overlay{display:block;}
    .sidebar-overlay{top:calc(54px + env(safe-area-inset-top, 0px));}
    .app-main{margin-right:0; margin-top:calc(54px + env(safe-area-inset-top, 0px)); height:calc(100vh - 54px - env(safe-area-inset-top, 0px));}
    :root{--em-card-pad:.625rem; --em-page-pad:.625rem; --em-tab-h:44px;}
    .app-page-title{height:auto; min-height:var(--em-page-title-h); padding:.7rem var(--em-card-pad); box-shadow:none; border-bottom:2px solid var(--em-primary);}
    .page-title-wrapper{flex-wrap:wrap;}
    .page-title-actions{width:100%; margin-inline-start:0;}
    .em-toast-container{inset-inline:var(--em-inset); align-items:stretch; max-width:none;}
    .hd-menu{position:fixed; top:62px; inset-inline:var(--em-inset); left:auto; width:auto; min-width:0; max-width:none; transform:translateY(-4px) scale(1); transform-origin:top center;}
    .hd-menu.open{transform:translateY(0) scale(1);}
    #hdBellMenu{width:auto;}
    .f-grid{grid-template-columns:1fr;}
    /* Ряд кнопок раздела прокручивается вбок только на телефоне */
    .em-actions{overflow-x:auto;}
    /* Полоса отбора на телефоне: табы диапазона встают своей строкой над полями */
    .em-filter-body{flex-wrap:wrap;}
    .em-filter-body > .chip-row{flex:1 1 100%; flex-wrap:wrap;}
    /* Документы: строки становятся карточками */
    .dl-head{display:none;}
    .dl-row{grid-template-columns:1fr 1fr; gap:var(--em-gap-row);}
    .dl-view .dl-row{grid-template-columns:1fr 1fr;}
    .dl-row .dl-cell-photo{grid-column:1 / -1;}
    .dl-row .dl-cell-name{grid-column:1 / -1;}
    .dl-row .dl-cell-total{grid-column:1 / -1; text-align:end;}
    /* Три величины себестоимости прячутся не молча: на телефоне они идут одной
       строкой с подписями — на узком экране девять колонок не читаются */
    .dl-row .dl-cell-cost, .dl-row .dl-cell-val{display:flex; gap:4px; align-items:baseline; justify-content:flex-start; direction:rtl;}
    .dl-cell-cost:empty{display:none;}
    .dl-cell-cost::before, .dl-cell-val::before{content:attr(data-em-label) ':'; font-weight:600; color:var(--em-text-3); font-size:.72rem;}
    .dl-totals{min-width:100%;}
    .em-disc-tile{min-width:100%;}
    /* Настройки: сдвоенные строки серий */
    .set-series-head{display:none;}
    .set-series-row{grid-template-columns:1fr 1fr;}
    .set-series-row .list-name{grid-column:1 / -1;}
    /* Возврат: строки в две колонки */
    .cn-head{display:none;}
    .cn-row{grid-template-columns:1fr 1fr;}
    .cn-row > span:first-child{grid-column:1 / -1;}
    /* Закупки: строки заказа в две колонки */
    .po-head{display:none;}
    .po-row{grid-template-columns:1fr 1fr;}
    .po-cell-name{grid-column:1 / -1;}
    .po-cell-total{grid-column:1 / -1; text-align:end;}
    /* Приёмка: строки в две колонки */
    .pr-head{display:none;}
    .pr-row{grid-template-columns:1fr 1fr;}
    .pr-cell-name{grid-column:1 / -1;}
    .pr-serial-list{grid-template-columns:1fr;}
    .em-act-row > .card-note, .em-act-row > .f-hint{flex:1 1 100%;}
    /* Расчёт себестоимости: строки в две колонки */
    .ic-head{display:none;}
    .ic-row{grid-template-columns:1fr 1fr;}
    .ic-cell-name{grid-column:1 / -1;}
    /* Канон списков на телефоне: строка-карточка — главное поле жирным (1rem) без подписи,
       значок круглится до 40px, второстепенные поля мелким с подписью, кнопки действий 44px */
    .table thead{display:none;}
    .table tbody tr{display:block; margin-bottom:var(--em-gap-row-lg); padding:var(--em-cell-pad) 12px; border:1px solid var(--em-border-subtle); border-radius:var(--em-radius);}
    .table tbody td{display:flex; justify-content:space-between; align-items:center; gap:var(--em-gap-row-lg); padding:var(--em-cell-pad-sm) 0; font-size:.82rem; border-bottom:1px solid var(--em-border-subtle);}
    .table tbody td:last-child{border-bottom:none;}
    .table tbody td::before{content:attr(data-label); font-weight:700; color:var(--em-text-2); font-size:.78rem;}
    .table tbody td[data-label=""]::before{content:none;}
    /* Карточка документа на телефоне: плотность колонок снимается — строка становится карточкой,
       лента цепочки и реквизиты возвращаются к потоку (Сборка 260) */
    .em-obj-view .em-frame-main .table{table-layout:auto;}
    .em-obj-view .em-frame-main .table th, .em-obj-view .em-frame-main .table td, .em-obj-view .table th, .em-obj-view .table td, .em-obj-view .table td:last-child{white-space:normal; text-align:start;}
    .dl-view .dl-row .dl-cell{text-align:start;}
    .dl-view .dl-row .dl-cell-total{text-align:end;}
    .em-obj-view .em-chain-card{display:flex;}
    .em-obj-view .em-chain-card .em-chain-head, .em-obj-view .em-chain-card .em-chain-state{display:flex;}
    .em-obj-view .em-chain-card .pv-meta{display:grid;}
    /* главное поле строки — ячейка с .list-name */
    .table tbody td:has(.list-name){display:block; font-size:1rem; padding-bottom:var(--em-cell-pad-edge);}
    .table tbody td:has(.list-name)::before{content:none;}
    /* круглый значок строки — по канону 40px */
    .table tbody td .em-thumb, .table tbody td .em-thumb-ph{width:40px; height:40px; border-radius:50%;}
    /* кнопки действий — высота 44px, «просмотр» первым уже в разметке */
    .table tbody td:has(.row-actions){display:block; padding-top:var(--em-cell-pad-edge);}
    .table tbody td:has(.row-actions)::before{content:none;}
    .table tbody td .row-actions{justify-content:flex-end;}
    .table tbody td .row-actions .abtn{min-height:44px; padding:var(--em-pad-y-lg) 14px; font-size:12px;}
    /* плитки-счётчики — две в ряд */
    .st-row{grid-template-columns:1fr 1fr;}
    .abtn{padding:7px 13px; font-size:12px;}
}
@media (max-width:480px){
    .app-page-title{padding:.7rem var(--em-card-pad);}
    .abtn{padding:var(--em-pad-y-sm) 11px; font-size:11px;}
}

/* Гард наведения для тач-устройств (§4 A) */
@media (hover: none){
    .abtn:hover{transform:none; box-shadow:0 2px 4px rgba(0,0,0,.1);}
    .hd-btn:hover{background:transparent;}
    .vertical-nav-menu a:hover{background:transparent; color:var(--em-menu-text);}
    .vertical-nav-menu a:hover:not(.mm-active) i{color:inherit;}
    .table-hover tbody tr:hover{background:transparent;}
    .chip:hover{background:var(--em-card-bg); border-color:var(--em-border); color:var(--em-text);}
    .em-side-tab:hover{background:var(--em-card-bg); border-color:var(--em-border-subtle); color:var(--em-text-2);}
    .em-side-tab:hover i{color:var(--em-text-3);}
    .em-side-tab.is-active:hover{background:var(--em-grad-view); border-color:transparent; color:#fff;}
    .em-side-tab.is-active:hover i{color:#fff;}
    .chip.active:hover, .em-stat-period .chip:has(input:checked):hover{background:var(--em-grad-view); border-color:transparent; color:#fff;}
    .em-hovercard{display:none;}
    .login-btn:hover, .err-btn:hover{transform:none;}
}

/* Сниженная анимация (§4 A) */
@media (prefers-reduced-motion: reduce){
    *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
    .abtn:hover, .abtn:active, .hd-btn:active, .em-toast-close:active, .login-btn:hover, .err-btn:hover{transform:none !important;}
    .main-card tbody tr{opacity:1; animation:none !important;}
    .em-skel{animation:none !important;}
    .em-list-body{transition:none !important;}
    .em-stat:hover{transform:none !important;}
    .em-stat:hover::after{transform:translateX(-140%) !important; transition:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВИТРИНА (П.31, Сборка 125) — публичный сайт на корне домена. Макет 4.6 (утверждён 01.09.2026):
   герой-слайдер категорий (образец №3) → строка поиска (№1) → магазинный низ (№6).
   Все цвета и геометрия — токены :root ниже; в разметке витрины ни одного числа.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
    --em-site-dark: #001f38;        /* глубокий синий бренда: подвал, полосы, градиенты героя (белый на нём 16,76) */
    --em-site-primary: var(--em-brand-blue);  /* краска бренда: кнопки, ссылки, מק״ט (контраст на белом 9,85) */
    --em-site-primary-hover: #00355f;
    --em-site-dark-2: #002e51;      /* середина градиента пустого героя */
    --em-site-accent: var(--em-accent);  /* мята бренда — значение написано один раз, в --em-accent (таймер, прогресс, бейдж «חדש», акценты на тёмном: 8,25 на подвале) */
    --em-site-card: #f3fbfa;        /* подложка фото товара — едва заметная мята (решение владельца 17.09.2026, Сборка 306); до неё серый образца #F2F3F5 */
    --em-site-btn-face: #fcfcfd;    /* фон вкладок-фильтров и светлой кнопки — замер демо */
    --em-site-flash: rgba(255,255,255,.7);  /* вспышка баннера при наведении — замер демо */
    --em-site-soft: var(--em-site-card); /* полоса заголовка, итог корзины, наведение строк — та же светлая мята, что под фото (решение владельца 17.09.2026, Сборка 307); до неё серый #F3F6F8 */
    --em-site-accent-16: rgba(57,202,187,.16); /* мята бренда на 16% — кружок значка на синей панели кабинета */
    --em-site-auth-pad: 48px;        /* поле половин блока входа и регистрации */
    --em-site-auth-ring: 72px;       /* круг значка над заголовком формы входа */
    --em-site-auth-perk: 44px;       /* кружок значка в списке преимуществ кабинета */
    --em-site-accent-deep: #2a9c90; /* тёмная мята — крупный заголовок полосы: 3,2 на светлой мяте при норме 3,0 для крупного текста; мята бренда давала 1,93 */
    --em-site-light: var(--em-site-card); /* светлый вариант промо-баннера — та же светлая мята (Сборка 308: серых заливок на витрине 0); до неё серо-голубой #F2F6FB */
    --em-site-line: #d9ece9;        /* линии и рамки витрины — с лёгкой мятой, той же светлоты, что прежний серый #E8E8EE (решение владельца 17.09.2026, Сборка 311) */
    --em-site-text: #6a6a72;
    --em-site-muted: #9a9aa2;
    --em-site-badge: var(--em-site-accent);  /* метка промо-баннера — мята бренда; розовый образца снят: белый на нём давал 2,94 */
    --em-site-new: var(--em-danger);         /* бейдж «חדש» — красный по решению владельца 16.09.2026 (белый на нём 4,83); отметка ручная (П.58) */
    --em-site-hero-size: 172px;    /* кегль названия категории в карусели */
    --em-site-zoom: 1.06;           /* увеличение фото товара при наведении (решение владельца 15.09.2026, Сборка 272) */
    --em-site-collage-w: 560px;     /* сторона коллажа компании в блоке обращения (решение владельца 15.09.2026) */
    --em-site-collage-gap: 1.2%;    /* белый зазор между плитками коллажа */
    --em-site-collage-shift: 16px;  /* сдвиг мятной подложки вправо и вниз */
    --em-site-collage-r: 6px;       /* радиус внешних углов фигуры — снят с образца: 6 при стороне 536 */
    --em-site-collage-num: 70px;    /* кегль числа на плашке (решение владельца 15.09.2026, было 52) */
    --em-site-collage-label: 21.5px; /* подпись под числом — подобрана под ширину «500»: 99 против 102 */
    --em-site-collage-name: 22px;   /* имя компании стоймя */
    --em-site-radius: 6px;          /* радиус блоков витрины (решение владельца 01.09.2026: 6px) */
    --em-site-radius-sm: 4px;
    --em-site-wrap: 1170px;
    --em-site-nav-h: 82px;
    --em-site-nav-pad-sm: 28px;     /* поле логотипа от края на телефоне (решение владельца 19.09.2026) */
    --em-site-boot-w: 320px;        /* ширина полосы заставки загрузки */
    --em-site-boot-logo: 64px;      /* знак компании на заставке */
    --em-site-boot-ecg-h: 92px;     /* высота кардиолинии */
    --em-site-boot-bar: 4px;        /* толщина полосы готовности */
    --em-site-boot-gap: 22px;       /* воздух между частями заставки */
    --em-site-quad-btn-gap: 24px;   /* наименьший воздух между текстом плитки и её кнопкой */
    --em-site-quad-pad: 36px;       /* поле внутри плитки под каруселью — как в образце, на любом экране */
    --em-site-quad-h-sm: 293px;     /* высота плитки под каруселью на телефоне — по образцу (19.09.2026) */
    --em-site-card-w: 207px;        /* карточка героя */
    --em-site-card-h: 325px;
    --em-site-card-gap: 33px;
    --em-site-hero-expand: .8s;     /* раскрытие кадра карусели — одно место, скрипт читает его отсюда */
    /* Блок обращения — размеры сняты замером с живого образца (карточка 635×504
       в контейнере 1140, поле 40/40/50, поле ввода 50, кнопка 56, фотография 565×662,
       зазор 45) и приведены к нашему контейнеру 1170. Тон подложки снят пикселями
       с фонового снимка образца: среднее #D4F6F5. */
    --em-site-contact-bg: #d4f6f5;
    --em-site-contact-pad-y: 72px;      /* верхнее поле секции обращения (было 104) */
    --em-site-contact-pad-b: 72px;      /* нижнее поле секции обращения */
    --em-site-contact-card: 520px;
    --em-site-contact-pad: 40px;
    --em-site-contact-btn: 56px;
    --em-site-contact-gap: 45px;
    --em-site-promo-h: 333px;       /* высота промо-блока: снята с образца 576×342 и приведена к контейнеру 1170 */
    --em-site-promo-gap: 48px;      /* зазор между блоками — с образца (два жёлоба по 24) */
    --em-site-promo-pad: 40px;      /* поле текстовой половины */
    --em-site-promo-h-sm: 260px;    /* высота баннера середины на телефоне, когда баннеры идут столбцом */
    --em-site-promo-shade: linear-gradient(to top, rgba(0,31,56,.92) 0%, rgba(0,31,56,.6) 40%, rgba(0,31,56,0) 75%);   /* затемнение снизу под надпись баннера: глубокий синий бренда гаснет к середине снимка */
    --em-site-hair: 2px;            /* тонкая цветная линия витрины: верх панели категорий */
    --em-site-catpanel-cols: 3;     /* колонок в панели категорий; на узком экране переопределяется */
    --em-site-catpanel-pad: 26px;   /* поле панели категорий */
    --em-site-font: var(--em-font);   /* один шрифт на систему и витрину (Сборка 214) */
    --em-site-shadow-lg: 0 20px 44px rgba(0,31,56,.2);
    --em-site-shadow-btn: 0 8px 20px rgba(0,69,122,.3);
    --em-site-shadow-hero: 0 20px 40px rgba(0,0,0,.25);
    --em-site-shadow-drop: 0 24px 50px rgba(0,31,56,.14);
    /* Блок «איכות ושירות» (решение владельца 18.09.2026, Сборка 319): краски бренда, не мята */
    --em-site-trusted-ic: 48px;                             /* кружок значка карточки учреждения (Сборка 333) */
    --em-site-trusted-logo: 84px;                           /* предельная высота логотипа учреждения: круглые знаки и надписи на одной линии */
    --em-site-trusted-cell: 140px;                          /* высота ячейки ленты логотипов */
    --em-site-trusted-cell-sm: 110px;                       /* та же ячейка на телефоне */
    --em-site-trusted-logo-sm: 52px;                        /* предел логотипа на телефоне и планшете: круглые знаки не перевешивают надписи */
    --em-site-why-ic: 62px;                                 /* кружок значка в списке преимуществ */
    --em-site-why-band: 520px;                              /* высота фирменной полосы блока */
    --em-site-why-gap: 64px;                                /* воздух между полосой и соседними блоками — как у обычного блока витрины */
    --em-site-why-photo-h: 880px;                           /* высота снимка фигуры: низ срезан полосой; подобрана так, чтобы ладонь встала в ~45 от значков списка */
    --em-site-why-reach: 40px;                              /* на сколько фигура может зайти в промежуток между снимком и списком */
    --em-site-why-strip: 50vw;                              /* световая полоса строки уходит от значка к краю экрана */
    --em-site-why-rise: 100px;                              /* на сколько голова выходит над полосой в воздух над ней */
    --em-site-why-glow: radial-gradient(60% 80% at 30% 100%, rgba(57,202,187,.18) 0%, transparent 70%);
    --em-site-why-slide: -6px;                              /* сдвиг строки при наведении: в RTL — к началу строки */
    --em-site-why-dots: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px);
    --em-site-why-hover: rgba(255,255,255,.10);             /* световая полоса строки при наведении на фирменной полосе */
    --em-site-why-strip-grad: linear-gradient(to left, transparent 0, var(--em-site-why-hover) 24px, transparent 85%);   /* от значка (справа) гаснет к краю экрана, резких краёв нет */
    --em-site-why-grad: linear-gradient(140deg, var(--em-brand-blue) 0%, var(--em-brand-deep) 100%);
    --em-site-grad-hero: linear-gradient(to bottom, rgba(0,31,56,.45) 0%, rgba(0,31,56,0) 30%, rgba(0,31,56,0) 55%, rgba(0,31,56,.7) 100%), linear-gradient(to left, rgba(0,31,56,.45) 0%, rgba(0,31,56,0) 45%);
    --em-site-grad-hero-empty: linear-gradient(135deg, var(--em-site-dark) 0%, var(--em-site-dark-2) 55%, var(--em-site-primary) 100%);
    --em-site-grad-card: linear-gradient(to top, rgba(0,31,56,.78) 0%, rgba(0,31,56,.2) 45%, rgba(0,31,56,0) 70%);
    --em-site-white-92: rgba(255,255,255,.92);
    --em-site-white-45: rgba(255,255,255,.45);
    --em-site-white-28: rgba(255,255,255,.28);
    --em-site-white-20: rgba(255,255,255,.2);
    --em-site-white-85: rgba(255,255,255,.85);
    --em-site-overlay: rgba(0,31,56,.92);
    /* Полноэкранный поиск — размеры сняты замером с живого образца */
    --em-site-field-h: 50px;         /* высота поля ввода на витрине: окно поиска и карточка обращения */
    --em-site-search-pad: 55px;      /* отступ под лупу в конце строки */
    --em-site-search-max: 960px;     /* ограничение ширины на широком экране */
    --em-site-search-min: 260px;     /* ограничение ширины на узком */
    --em-site-touch: 44px;           /* область касания на витрине: кнопка поиска, крестик, кнопка промо-блока — норма доступности */
    --em-site-urgent-pattern: url('../img/branding/urgent-pattern.svg');   /* водяной знак полосы: пульс, кресты, лапы, лампы — белым 7% */
    --em-site-subs-bg: #002c5d;      /* полоса подписки над подвалом — тон образца */
    --em-site-field-face: #ebfaf8;   /* заливка поля ввода на витрине: полоса подписки и карточка обращения — тон образца */
    --em-site-ring: rgba(0,69,122,.18);
}
html.em-site-html{scroll-behavior:smooth; overflow-x:hidden;}
/* Длинное слово переносится, а не вылезает за край окна: на узком экране одно такое слово
   в подвале или в имени товара сдвигало всю страницу вбок (замечание владельца 19.09.2026) */
.em-site{overflow-wrap:break-word;}
body.em-site{font-family:var(--em-font); font-size:16px; line-height:1.6; color:var(--em-site-text); background:#fff; overflow-x:hidden; display:block; padding:0; min-height:100svh;}
.em-site a{color:inherit; text-decoration:none;}
.em-site img{display:block; max-width:100%;}
/* :where() обнуляет вес селектора: сброс остаётся, но любое правило с классом
   теперь выигрывает у него, как и задумано. Раньше сброс перебивал заголовок
   карусели, кнопку подвала и кнопку «наверх». */
:where(.em-site h1, .em-site h2, .em-site h3, .em-site h4){color:var(--em-site-dark); line-height:1.36; margin:0;}
.em-site p{margin:0;}
:where(.em-site button){font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; cursor:pointer;}
.em-site-wrap{width:var(--em-site-wrap); max-width:calc(100% - 40px); margin-inline:auto; position:relative;}
.em-site-ltr{direction:ltr; unicode-bidi:isolate;}
/* Поля с латинским значением (почта, телефон, пароль): значение слева направо, но у правого края,
   а ивритская подсказка внутри поля читается справа налево (замечание владельца 16.09.2026) */
input.em-site-ltr{text-align:right;}
input.em-site-ltr::placeholder{direction:rtl; text-align:right;}
.em-site-muted{color:var(--em-site-muted);}
.em-site-skip{position:absolute; inset-inline-start:-999px; top:var(--em-inset); z-index:100; background:var(--em-site-dark); color:#fff; padding:var(--em-pad-y) 14px; border-radius:var(--em-site-radius-sm);}
.em-site-skip:focus{inset-inline-start:var(--em-inset);}
.em-site-fade{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.em-site-fade.is-in{opacity:1; transform:none;}
.em-site-hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden;}

/* кнопки витрины */
.em-site-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--em-gap-inner); height:50px; padding:0 30px; color:#fff; font-size:14px; font-weight:500; white-space:nowrap; position:relative; overflow:hidden; z-index:0; background:transparent; border-radius:var(--em-site-radius-sm); transition:color .3s var(--ease-out);}
.em-site-btn::after, .em-site-btn::before{content:''; position:absolute; inset:0; border-radius:inherit; transition:transform .3s var(--ease-out), opacity .3s var(--ease-out); z-index:-1;}
.em-site-btn::after{background:var(--em-site-primary);}
.em-site-btn::before{border:1px solid var(--em-site-primary); opacity:0; transform:scale(.1, .1);}
.em-site-btn:hover{color:var(--em-site-primary);}
.em-site-btn:hover::after{transform:scale(0, 0); opacity:0;}
.em-site-btn:hover::before{opacity:1; transform:scale(1, 1);}
.em-site-btn:active{transform:scale(.98);}
.em-site-btn.is-accent{color:var(--em-site-dark);}
.em-site-btn.is-accent::after{background:var(--em-site-accent);}
.em-site-btn.is-accent::before{border-color:var(--em-site-accent);}
.em-site-btn.is-accent:hover{color:var(--em-site-accent);}
.em-site-btn.is-light{color:var(--em-site-text); background:var(--em-site-btn-face);}
.em-site-btn.is-light::after{background:var(--em-site-primary); transform:scale(0, 0); opacity:0;}
.em-site-btn.is-light::before{border-color:var(--em-site-line); opacity:1; transform:scale(1, 1);}
.em-site-btn.is-light:hover{color:#fff;}
.em-site-btn.is-light:hover::after{transform:scale(1, 1); opacity:1;}
.em-site-btn.is-light:hover::before{opacity:0; transform:scale(0, 0);}

/* верхняя полоса */
/* шапка: по ширине контейнера, прозрачная над героем; is-dark — статичная тёмная на внутренних страницах; is-sticky — прилипшая */
.em-site-nav{position:absolute; z-index:8; inset-inline:0; top:0; height:var(--em-site-nav-h); display:flex; align-items:center; width:var(--em-site-wrap); max-width:calc(100% - 40px); margin-inline:auto; color:#fff;}
.em-site-nav > .em-site-wrap{display:flex; align-items:center; width:100%; max-width:none;}
.em-site-nav.is-dark{position:relative; background:var(--em-brand-blue); width:100%; max-width:none; padding:0 calc((100% - var(--em-site-wrap)) / 2);}
.em-site-nav.is-sticky{position:fixed; top:0; inset-inline:0; width:100%; max-width:none; height:66px; padding:0 calc((100% - var(--em-site-wrap)) / 2); background:var(--em-brand-blue); box-shadow:var(--em-site-shadow-lg); z-index:50; animation:em-site-slide .4s var(--ease-out);}
@keyframes em-site-slide{from{transform:translateY(-100%);} to{transform:none;}}
.em-site-logo{display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; letter-spacing:.28em; color:inherit;}
.em-site-logo img{height:32px; width:auto;}
.em-site-logo.is-dark{color:var(--em-site-dark);}
/* подвал стал тёмным — логотип и название на нём белые; размеры логотипа с образца */
.em-site-footer .em-site-logo.is-dark{color:#fff; gap:14px; font-size:20px; letter-spacing:.04em;}
.em-site-footer .em-site-logo.is-dark img{height:48px;}
.em-site-menu{display:flex; gap:46px; margin-inline-start:auto; margin-inline-end:40px; font-size:16px; font-weight:500; letter-spacing:normal;}
.em-site-menu a{position:relative; padding:var(--em-pad-y-sm) 0; color:#fff;}
/* Черта одна на оба состояния: у наведения и у активного пункта она рисуется
   одним правилом, поэтому правится в одной точке. Мята на синем бренда — 4,85. */
.em-site-menu a::after{content:''; position:absolute; inset-inline:0; bottom:-2px; height:var(--em-hair); background:var(--em-site-accent); opacity:0; transition:opacity .2s var(--ease-out);}
.em-site-menu a:hover::after, .em-site-menu a.is-active::after{opacity:1;}
.em-site-nav-tools{display:flex; gap:22px; align-items:center;}
/* ── Панель категорий у пункта «קטלוג» ──
   Лежит под шапкой во всю её ширину, содержимое — по контейнеру витрины.
   Открывается классом is-cat на самой шапке: и пункт, и панель — её потомки,
   поэтому переход курсора между ними не закрывает панель. */
.em-site-catpanel{position:absolute; top:100%; inset-inline:0; background:#fff; color:var(--em-site-dark); border-top:var(--em-site-hair) solid var(--em-site-accent); border-radius:0 0 var(--em-site-radius) var(--em-site-radius); box-shadow:var(--em-site-shadow-drop); padding:var(--em-site-catpanel-pad) 0; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; z-index:8;}
.em-site-nav.is-cat .em-site-catpanel{opacity:1; visibility:visible; transform:none;}
.em-site-catpanel-grid{display:grid; grid-template-columns:repeat(var(--em-site-catpanel-cols), 1fr); column-gap:var(--em-site-catpanel-pad);}
.em-site-catpanel-grid a{display:flex; align-items:center; gap:var(--em-site-card-gap); padding-block:var(--em-gap-row); font-size:15px; color:var(--em-site-dark); transition:color .2s var(--ease-out);}
/* Число товаров — тоном подписей витрины (5,36 на белом), а не приглушённым:
   приглушённый #9A9AA2 даёт 2,79 при норме 4,5 — это текст, а не украшение. */
.em-site-catpanel-grid a small{margin-inline-start:auto; color:var(--em-site-text); font-size:13px;}
/* Наведение — синим бренда (9,85 на белом), не мятой: мята на белом даёт 2,03
   и при норме 4,5 для текста и 3,0 для графики не проходит ни там, ни там.
   Три места мяты на белом уже снимались по этой же причине (Сборка 134). */
.em-site-catpanel-grid a:hover{color:var(--em-site-primary);}
.em-site-catpanel-all{display:inline-flex; align-items:center; gap:var(--em-gap-row); margin-top:var(--em-site-catpanel-pad); padding-top:var(--em-site-catpanel-pad); border-top:1px solid var(--em-site-line); font-size:15px; font-weight:700; color:var(--em-site-primary);}
.em-site-catpanel-all:hover{color:var(--em-site-dark);}
.em-site-mobile-cat{display:none;}
.em-site-mobile-catlist{display:none;}
.em-site-search-btn, .em-site-burger, .em-site-cart-btn{color:inherit; font-size:18px; display:grid; place-items:center; width:36px; height:36px;}
/* Переключатель языка (П.67): та же клетка, что у значков шапки, но с надписью.
   Показывает язык, на который переключит, — так короче и понятнее двух ярлыков разом. */
.em-site-lang{color:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; display:grid; place-items:center; min-width:36px; height:36px; padding:0 var(--em-gap-row); border:1px solid var(--em-site-white-45); border-radius:999px; transition:background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);}
.em-site-lang:hover{background:#fff; color:var(--em-site-dark); border-color:#fff;}
/* Корзина в шапке (П.58): значок и кружок с числом позиций; кружок — мята бренда, число на нём глубоким синим (8,25) */
.em-site-cart-btn{position:relative;}
.em-site-cart-count{position:absolute; top:0; inset-inline-start:0; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--em-site-accent); color:var(--em-site-dark); font-size:11px; font-weight:700; line-height:18px; text-align:center;}
/* Клиент в шапке (П.32): «שלום, имя» и выпадающее меню кабинета */
.em-site-user{position:relative;}
.em-site-user-btn{display:inline-flex; align-items:center; gap:var(--em-gap-inner); height:36px; color:inherit; font-size:15px; font-weight:600; white-space:nowrap;}
.em-site-user-btn i{font-size:18px;}
.em-site-user-menu{position:absolute; top:calc(100% + var(--em-gap-row)); inset-inline-end:0; min-width:220px; background:#fff; color:var(--em-site-dark); border-radius:var(--em-site-radius); box-shadow:var(--em-shadow-drop); padding:var(--em-gap-row) 0; z-index:60;}
.em-site-user-menu a, .em-site-user-menu button{display:flex; align-items:center; gap:12px; width:100%; padding:12px 18px; font-size:14px; color:var(--em-site-dark); text-align:start; font-family:inherit;}
.em-site-user-menu i{width:18px; text-align:center; color:var(--em-site-primary);}
.em-site-user-menu a:hover, .em-site-user-menu button:hover{background:var(--em-site-soft);}
.em-site-user-menu form{border-top:1px solid var(--em-site-line); margin-top:var(--em-gap-row); padding-top:var(--em-gap-row);}
.em-site-burger{display:none;}
.em-site-mobile-menu{display:none;}

/* герой */
.em-site-hero{position:relative; width:100%; height:100svh; min-height:720px; overflow:hidden; color:#fff; background:var(--em-site-grad-hero-empty);}
.em-site-hero-bg{position:absolute; inset:0; z-index:0;}
.em-site-hero-bg img{width:100%; height:100%; object-fit:cover;}
.em-site-hero-bg img.is-empty{display:none;}
.em-site-hero-bg::after{content:''; position:absolute; inset:0; background:var(--em-site-grad-hero);}
/* Раскрытие идёт преобразованием, а не шириной и высотой: раскладочные свойства
   заставляли браузер каждый кадр пересчитывать раскладку и заново растрировать
   полноэкранный снимок — замер показал провал в 158 мс без единого кадра и прыжок
   слоя с 245 до 1552 точек. Преобразование считает видеокарта, раскладки нет.
   Слой лежит на весь экран и сжимается до рамки карточки; снимок внутри получает
   встречное преобразование, поэтому стоит на месте и не искажается ни в одном кадре —
   растёт только окно. Радиуса нет: при неравном сжатии углы вытянулись бы. */
.em-site-hero-expander{position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--em-site-grad-hero-empty); will-change:clip-path; transition:clip-path var(--em-site-hero-expand) var(--ease-in-out);}   /* окно раскрытия (Сборка 338, П.66): растёт обрезка, снимок внутри неё едет из рамки карточки в кадр героя */
/* Снимок в окне стоит ровно так, как он стоял в карточке, и вырастает до кадра героя (Сборка 340).
   До этого он показывался сразу в конечном кадрировании: на 1920×1080 при карточке 207×325 это
   втрое более крупный кадр, и старт раскрытия читался как рывок увеличения. */
.em-site-hero-expander img{width:100%; height:100%; object-fit:cover; display:block; will-change:transform; transition:transform var(--em-site-hero-expand) var(--ease-in-out);}
/* Та же заливка, что у подложки героя: без неё раскрытый кадр был светлее готового, и подмена слоя
   фоном давала скачок яркости (замер по записи владельца 18.09.2026: 135,6 против 123,1 из 255). */
.em-site-hero-expander::after{content:''; position:absolute; inset:0; background:var(--em-site-grad-hero);}
.em-site-hero-expander.no-anim, .em-site-hero-expander.no-anim img{transition:none;}   /* стартовое окно ставится без перехода (Сборка 336) */
.em-site-hero-timer{position:absolute; top:0; inset-inline-start:0; height:3px; width:0; background:var(--em-site-accent); z-index:9;}
.em-site-hero-timer.is-run{animation:em-site-timer 3750ms linear forwards;}
@keyframes em-site-timer{from{width:0;} to{width:100%;}}
.em-site-hero-wrap{height:100%; z-index:2;}
.em-site-hero-text{position:absolute; z-index:5; inset-inline-start:0; top:285px; width:440px;}
.em-site-hero-line{width:33px; height:var(--em-hair); background:var(--em-site-accent); margin-bottom:22px;}
.em-site-hero-sub{font-size:22px; font-weight:300; margin-bottom:12px; line-height:1.2;}
/* Две строки резервируются всегда: у части категорий заголовок в одну строку,
   и без запаса описание с кнопками прыгало на 117 точек при каждом переключении */
/* Два класса в селекторе: правило «.em-site h1…h4» весит больше одного класса
   и перебивало и цвет, и межстрочный интервал — заголовок выходил тёмным
   и разреженным (1,2 вместо 1,02). */
/* Название категории — главный текст витрины: самый крупный кегль и строки вплотную
   (решения владельца 13.09.2026). Межстрочный оставлен 1,06 — ниже него хвосты букв
   уходят под обрезку строки; расстояние между строками убрано отрицательным полем.
   Длинное название ужимает скрипт героя: слово шире колонки обрезалось бы по краю. */
.em-site .em-site-hero-title{font-family:var(--em-site-font); font-weight:700; font-size:var(--em-site-hero-size); line-height:1.06; letter-spacing:.01em; margin-bottom:14px; color:#fff; min-height:calc(var(--em-site-hero-size) * 1.06 * 2 - .18em);}
.em-site-hero-title span + span{margin-top:-.18em;}
.em-site-hero-title span{display:block; overflow:hidden;}
.em-site-hero-title span i{display:block; font-style:normal;}
.em-site-hero-desc{font-size:14px; line-height:1.8; max-width:400px; margin-bottom:28px; color:var(--em-site-white-92);}
.em-site-hero-actions{display:flex; align-items:center; gap:18px;}
.em-site-hero-round{width:44px; height:44px; border-radius:50%; background:var(--em-site-accent); color:var(--em-site-dark); display:grid; place-items:center; font-size:16px; transition:transform .2s var(--ease-out);}
.em-site-hero-round:hover{transform:scale(1.08);}
.em-site-hero-pill{height:39px; padding:0 30px; border:1px solid var(--em-site-white-85); border-radius:999px; font-size:12px; letter-spacing:.08em; font-weight:600; display:inline-flex; align-items:center; transition:background .25s var(--ease-out), color .25s var(--ease-out);}
.em-site-hero-pill:hover{background:#fff; color:var(--em-site-dark);}
.em-site-hero-line, .em-site-hero-sub, .em-site-hero-title span i, .em-site-hero-desc, .em-site-hero-actions{opacity:0; transform:translateY(24px);}
.em-site-hero-title span i{transform:translateY(110%);}
.em-site-hero-text.is-in .em-site-hero-line{animation:em-site-up .45s var(--ease-out) forwards;}
.em-site-hero-text.is-in .em-site-hero-sub{animation:em-site-up .45s var(--ease-out) .05s forwards;}
.em-site-hero-text.is-in .em-site-hero-title span:nth-child(1) i{animation:em-site-up .5s var(--ease-out) .1s forwards;}
.em-site-hero-text.is-in .em-site-hero-title span:nth-child(2) i{animation:em-site-up .5s var(--ease-out) .18s forwards;}
.em-site-hero-text.is-in .em-site-hero-desc{animation:em-site-up .45s var(--ease-out) .16s forwards;}
.em-site-hero-text.is-in .em-site-hero-actions{animation:em-site-up .45s var(--ease-out) .22s forwards;}
.em-site-hero-text.is-out .em-site-hero-line, .em-site-hero-text.is-out .em-site-hero-sub, .em-site-hero-text.is-out .em-site-hero-title span i, .em-site-hero-text.is-out .em-site-hero-desc, .em-site-hero-text.is-out .em-site-hero-actions{animation:em-site-out .27s var(--ease-in-out) forwards;}
@keyframes em-site-up{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
@keyframes em-site-out{from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-18px);}}
.em-site-hero-cards{position:absolute; z-index:4; top:344px; inset-inline-start:594px; height:var(--em-site-card-h); display:flex; gap:var(--em-site-card-gap); transition:transform .5s var(--ease-in-out);}
.em-site-hero-cards.no-anim{transition:none;}
.em-site-hero-card{position:relative; flex:none; width:var(--em-site-card-w); height:var(--em-site-card-h); border-radius:var(--em-site-radius); overflow:hidden; cursor:pointer; background:var(--em-site-grad-hero-empty); box-shadow:var(--em-site-shadow-hero); transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);}
.em-site-hero-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.em-site-hero-card::after{content:''; position:absolute; inset:0; background:var(--em-site-grad-card);}
.em-site-hero-card:hover{transform:translateY(-6px);}
.em-site-hero-card.is-ghost{opacity:0;}
.em-site-hero-card-body{position:absolute; z-index:1; inset-inline:22px; bottom:22px;}
.em-site-hero-card-body small{display:block; font-size:12px; margin-bottom:var(--em-shift); color:var(--em-site-white-92);}
.em-site-hero-card-body small::before{content:''; display:inline-block; width:14px; height:1px; background:var(--em-site-accent); vertical-align:middle; margin-inline-end:var(--em-shift);}
.em-site-hero-card-body h3{font-family:var(--em-site-font); font-weight:700; font-size:21px; line-height:1.2; color:#fff;}
.em-site-hero-card.is-hidden{opacity:0; transform:translateY(20px); transition:none;}
/* backwards, а не forwards: конечный кадр закреплял transform навсегда,
   и у только что въехавшей карточки переставал работать подъём при наведении */
.em-site-hero-card.is-enter{animation:em-site-card-in .45s var(--ease-out) backwards;}
@keyframes em-site-card-in{from{opacity:0; transform:translateY(20px);}}
/* Одна строка: стрелки, пауза, линия и счётчик стоят рядом и по одной оси.
   Раньше три блока висели на разной высоте (703 / 740 / 712) и счётчик уезжал к краю. */
.em-site-hero-ctrl{position:absolute; z-index:5; top:703px; inset-inline-start:594px; inset-inline-end:45px; display:flex; align-items:center; gap:13px;}
.em-site-hero-arrow{width:74px; height:74px; border:1px solid var(--em-site-white-45); border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; transition:background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);}
.em-site-hero-arrow:hover{background:#fff; color:var(--em-site-dark); border-color:#fff;}
.em-site-hero-pause{width:44px; height:44px; border:1px solid var(--em-site-white-28); border-radius:50%; display:grid; place-items:center; margin-inline-start:var(--em-shift-lg); color:#fff; font-size:13px; transition:background .25s var(--ease-out), color .25s var(--ease-out);}
.em-site-hero-pause .is-play{display:none;}
.em-site-hero-pause.is-paused .is-play{display:block;}
.em-site-hero-pause.is-paused .is-pause{display:none;}
.em-site-hero-pause:hover{background:#fff; color:var(--em-site-dark);}
.em-site-hero-progress{flex:1; position:relative; height:1px; margin-inline-start:12px; background:var(--em-site-white-28);}
.em-site-hero-progress i{position:absolute; inset-inline-start:0; top:0; height:100%; width:0; background:var(--em-site-accent); transition:width .8s var(--ease-in-out);}
.em-site-hero-counter{flex:none; font-family:var(--em-site-font); font-weight:700; font-size:38px; line-height:1; height:52px; overflow:hidden; direction:ltr; color:#fff;}
.em-site-hero-counter span{display:block;}
.em-site-hero-counter.is-flip span{animation:em-site-flip .5s var(--ease-in-out);}
@keyframes em-site-flip{0%{transform:translateY(0);} 45%{transform:translateY(-110%); opacity:0;} 55%{transform:translateY(110%); opacity:0;} 100%{transform:translateY(0); opacity:1;}}
.em-site-hero.is-empty .em-site-hero-cards, .em-site-hero.is-empty .em-site-hero-ctrl, .em-site-hero.is-empty .em-site-hero-progress, .em-site-hero.is-empty .em-site-hero-counter{display:none;}

/* строка поиска — перекрывает низ героя на 55px */
.em-site-suggest{position:absolute; top:100%; inset-inline:0; background:#fff; border-radius:var(--em-site-radius); box-shadow:var(--em-site-shadow-drop); display:none; z-index:7; overflow:hidden;}
.em-site-suggest.is-open{display:block;}
.em-site-suggest-item{display:flex; align-items:center; gap:12px; padding:var(--em-pad-y) 12px; font-size:14px; color:var(--em-site-dark);}
.em-site-suggest-item:hover{background:var(--em-site-soft);}
.em-site-suggest-item img{width:40px; height:40px; object-fit:contain; background:var(--em-site-card); border-radius:var(--em-site-radius-sm); flex:none;}
.em-site-suggest-item img.is-empty{visibility:hidden;}
.em-site-suggest-item span{flex:1;}
.em-site-suggest-item small{color:var(--em-site-muted);}
.em-site-searchlay .em-site-suggest{background:#fff; color:var(--em-site-dark);}

/* рекламные баннеры (объявления) */
/* ярлык объявления — используется двумя промо-блоками середины страницы */
.em-site-ad-tag{display:inline-block; border:1px solid var(--em-site-white-85); color:#fff; font-size:11px; letter-spacing:.3em; padding:var(--em-pad-y-sm) 12px; margin-bottom:14px;}
.em-site-ad-tag.is-fill{border:0; background:var(--em-site-badge); color:var(--em-site-dark); letter-spacing:.2em;}

/* заголовок раздела, бейджи-вкладки, сетка товаров */
.em-site-section{padding:64px 0;}
.em-site-sec-head{text-align:center; margin-bottom:40px;}
.em-site-sec-head h2{font-family:var(--em-site-font); font-weight:700; font-size:34px; letter-spacing:.03em; line-height:1; margin:0; color:var(--em-site-accent-deep);} /* заголовок блока тёмной мятой — тем же тоном, что заголовок полосы (решение владельца 18.09.2026, Сборка 316); на белом 3,36 при норме 3,0 для крупного текста */ /* строка вплотную, как в полосе заголовка: при 1,36 между заголовком блока и подписью стояло 18 точек воздуха (замечание владельца 17.09.2026, Сборка 314) */
.em-site-sec-head p{font-size:15px; color:var(--em-site-muted); margin-top:0;} /* подпись вплотную к заголовку — тот же зазор, что у цепочки ссылок в полосе */
.em-site-filter{display:flex; justify-content:center; flex-wrap:wrap; gap:var(--em-gap-inner-lg); margin:-10px 0 40px;}
.em-site-filter button, .em-site-filter a{height:40px; padding:0 20px; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); font-size:14px; font-weight:500; color:var(--em-site-text); background:var(--em-site-btn-face); display:inline-flex; align-items:center; transition:background .3s linear, color .3s linear, border-color .3s linear;}
.em-site-filter button.is-on, .em-site-filter a.is-on, .em-site-filter button:hover, .em-site-filter a:hover{background:var(--em-site-accent); border-color:var(--em-site-accent); color:#fff;}
.em-site-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:38px 27px;}
.em-site-prod{position:relative; display:block;}
/* Ссылка на товар одна — в названии, растянута на всю карточку; кружки действий лежат слоем выше и в ссылку не входят:
   кнопка внутри ссылки недопустима и с клавиатуры недостижима (Сборка 304). Кольцо фокуса — у всей карточки, правило канона §4 */
.em-site-prod-link::after{content:""; position:absolute; inset:0; z-index:1;}
@supports selector(:has(a)){ .em-site-prod-link:focus-visible{outline:none;} } /* без :has() кольцо остаётся у самой ссылки */
.em-site-prod.is-hid{display:none;}
.em-site-prod-img{display:block; position:relative; height:341px; background:var(--em-site-card); border-radius:var(--em-site-radius); overflow:hidden;}
.em-site-prod-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:30px 20px 60px; mix-blend-mode:multiply; transition:opacity .3s linear, visibility .3s linear, transform .4s var(--ease-out);}
/* Фото плавно растёт при наведении — второе фото есть у единиц из 522 товаров, и без
   этого наведение на большинстве карточек ничего не показывало (решение владельца 15.09.2026) */
.em-site-prod:hover .em-site-prod-img img{transform:scale(var(--em-site-zoom));}
.em-site-prod-img img.is-alt{opacity:0;}
.em-site-prod:hover .em-site-prod-img img.is-main{opacity:0;}
.em-site-prod:hover .em-site-prod-img img.is-alt{opacity:1;}
.em-site-prod:hover .em-site-prod-img img.is-main:only-of-type{opacity:1;}
.em-site-prod-empty{position:absolute; inset:0; display:grid; place-items:center; font-size:44px; color:var(--em-site-line);}
.em-site-prod-cat{position:absolute; inset-inline:0; bottom:16px; text-align:center; font-size:12px; color:var(--em-site-dark); font-weight:500;}
.em-site-badge{position:absolute; top:14px; inset-inline-end:14px; background:var(--em-site-new); color:#fff; font-size:12px; font-weight:600; padding:4px 12px; z-index:2; border-radius:var(--em-site-radius-sm);}
.em-site-acts{position:absolute; top:14px; inset-inline-start:14px; display:flex; flex-direction:column; gap:9px; z-index:2;}
/* Значок «просмотр» — ссылка, и сброс ссылок витрины (класс + тег) перебивал правило в один
   класс: краска бралась от карточки и значок выходил серым при белых соседях. Вес поднят
   вторым классом (тот же урок, что Сборка 305; найдено владельцем 19.09.2026) */
.em-site-acts button, .em-site-acts .em-site-acts-view{width:40px; height:40px; border-radius:50%; background:var(--em-brand-blue); color:#fff; display:grid; place-items:center; font-size:15px; opacity:0; visibility:hidden; transform:translateX(-20px); transition:opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out, background .3s linear;}
.em-site-acts-view{transition-delay:.1s;}
.em-site-prod:hover .em-site-acts button, .em-site-prod:hover .em-site-acts-view,
.em-site-prod:focus-within .em-site-acts button, .em-site-prod:focus-within .em-site-acts-view{opacity:1; visibility:visible; transform:translateX(0);}
.em-site-acts button:hover, .em-site-acts-view:hover{background:var(--em-site-accent); color:#fff;}
.em-site-acts button.is-on{background:var(--em-site-accent); color:#fff;}
.em-site-acts button.is-added{transform:scale(1.15);}
/* Подсказка у кружков карточки — вбок, внутрь карточки, на уровне середины кружка:
   кружки стоят столбиком, и подсказка вниз ложилась под следующий кружок, который
   рисуется своим слоем поверх неё (снимок владельца 15.09.2026, Сборка 271).
   Стороны физические, как у центрирования подсказки канона (§3.22). */
.em-site-acts .em-tip::after{top:50%; left:auto; right:calc(100% + var(--em-gap-row)); transform:translateY(-50%);}
.em-site-prod-body{display:block; text-align:center; padding-top:18px;}
/* Название — единственная подпись карточки: 18/600, до двух строк (решение владельца 15.09.2026, Сборка 272;
   код товара с карточки снят, на странице товара остаётся) */
.em-site-prod-body h3{font-family:var(--em-site-font); font-size:18px; line-height:1.36; font-weight:600; transition:color .3s linear; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.em-site-prod:hover .em-site-prod-body h3{color:var(--em-site-primary);}
/* Цена клиенту под названием (П.58, решение владельца 16.09.2026): без НДС, подпись мелко; у товара без цены строки нет */
.em-site-prod-price{display:flex; align-items:baseline; justify-content:center; gap:var(--em-gap-row); margin-top:var(--em-gap-row); color:var(--em-site-primary); font-weight:700; font-size:18px;}
.em-site-prod-price small{font-size:12px; font-weight:400; color:var(--em-site-muted);}
/* Своя цена вошедшего клиента (П.58, Сборка 285): цена каталога зачёркнута, своя — крупно, ниже строка выгоды */
.em-site-prod-price s, .em-site-pd-price-full s, .em-site-cart-price s, .em-site-cart-unit s{color:var(--em-site-muted); font-weight:400; font-size:14px; margin-inline-end:var(--em-gap-inner);}
.em-site-saving{display:block; text-align:center; margin-top:4px; font-size:12px; font-weight:600; color:var(--em-success-text);}
.em-site-pd-price .em-site-saving{text-align:start; margin-top:0;}
.em-site-pd-price-full{font-size:14px; color:var(--em-site-muted); display:flex; align-items:baseline; gap:12px;}
.em-site-cart-row.is-saved b{color:var(--em-success-text);}
/* Купон в корзине (П.60): поле с кнопкой «החלה», строка скидки с крестиком */
.em-site-coupon{display:grid; grid-template-columns:1fr auto; gap:var(--em-gap-inner); padding:12px 0; border-bottom:1px solid var(--em-site-line);}
.em-site-coupon-field{display:flex; align-items:center; gap:var(--em-gap-inner); height:44px; padding:0 14px; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); background:#fff; color:var(--em-site-muted);}
.em-site-coupon-field input{flex:1; min-width:0; border:0; outline:none; font-family:inherit; font-size:14px; color:var(--em-site-dark); background:transparent; text-transform:uppercase;}
.em-site-coupon .em-site-cta{height:44px; padding:0 18px; font-size:14px;}
.em-site-coupon-msg{grid-column:1 / -1; font-size:13px; color:var(--em-danger-text);}
.em-site-cart-row.is-coupon b{color:var(--em-success-text);}
.em-site-cart-row.is-coupon span b{color:var(--em-site-dark);}
.em-site-coupon-del{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--em-site-muted); vertical-align:middle; transition:background .2s linear, color .2s linear;}
.em-site-coupon-del:hover{background:var(--em-danger-bg); color:var(--em-danger-text);}
.em-site-more{display:flex; justify-content:center; margin-top:44px;}

/* срочный сервис */
/* Полоса срочного обращения по образцу: ровный фирменный синий с еле заметным
   водяным знаком поверх — у образца ровно так же, фотографии там нет. */
.em-site-urgent{background:var(--em-site-urgent-pattern) 0 0 repeat, var(--em-brand-blue); background-size:420px 420px, auto; color:#fff; padding:100px 0;}
.em-site-urgent .em-site-wrap{display:flex; align-items:center; gap:26px;}
.em-site-urgent-icon{width:88px; height:88px; background:var(--em-site-accent); color:var(--em-site-dark); display:grid; place-items:center; flex:none; border-radius:var(--em-site-radius); font-size:38px;}
.em-site-urgent small{display:block; font-family:var(--em-site-font); font-size:21px; line-height:1.36; color:var(--em-site-white-92);}
.em-site-urgent b{display:block; font-family:var(--em-site-font); font-size:36px; line-height:1.36; text-align:right;}
.em-site-urgent .em-site-btn{margin-inline-start:auto;}

/* промо-баннеры середины */
/* ── Два промо-блока середины ──
   Устройство образца: два блока равной ширины, каждый на две половины —
   текст с одной стороны, фотография во всю высоту с другой. Ширина, высота
   и зазор сняты замером с живого образца (блок 576×342 в контейнере 1200,
   жёлоба по 24) и приведены к нашему контейнеру 1170: блок 561×333, зазор 48.
   Половины выложены сеткой, поэтому в RTL они меняются местами сами —
   фотография оказывается со стороны, зеркальной образцу, как просит ТЗ. */
.em-site-darkrow{padding:20px 0 var(--em-pad-y-lg);}
.em-site-darkrow .em-site-wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--em-site-promo-gap);}
.em-site-dark{position:relative; height:var(--em-site-promo-h); background:var(--em-site-dark); color:#fff; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; border-radius:var(--em-site-radius); transition:transform .5s linear;}
.em-site-dark::after{content:''; position:absolute; inset-inline:0; bottom:0; width:150%; height:0; background:var(--em-site-flash); transform:rotate(10deg) translate(-30px, 80px); pointer-events:none; z-index:2;}
.em-site-dark:hover{transform:translateY(-5px);}
.em-site-dark:hover::after{height:100%; opacity:0; transform:rotate(0deg) translate(0, 0); transition:height .5s ease-out, opacity .5s ease-out, transform .5s ease-out;}
.em-site-dark img{grid-column:2; width:100%; height:var(--em-site-promo-h); object-fit:cover; display:block;}
.em-site-dark.is-light{background:var(--em-site-light); color:var(--em-site-dark);}
.em-site-dark > div{grid-column:1; padding:0 var(--em-site-promo-pad);}
.em-site-dark .em-site-ad-tag{margin-bottom:16px;}
.em-site-dark.is-light .em-site-ad-tag{border-color:var(--em-site-dark); color:var(--em-site-dark);}
.em-site-dark.is-light .em-site-ad-tag.is-fill{color:#fff; border:0;}
.em-site-dark b{font-family:var(--em-site-font); font-size:34px; font-weight:700; line-height:1.2; display:block; margin-bottom:14px; color:#fff;}
.em-site-dark.is-light b{color:var(--em-site-dark);}
.em-site-dark b em{font-style:normal; color:var(--em-site-accent);}
.em-site-dark.is-light b em{color:var(--em-site-primary);}
.em-site-dark-from{display:block; font-size:15px; margin-bottom:16px;}
/* Кнопка вместо прежней строки капслоком: то же правило наведения, что у кнопок
   на синих плитках (§J.4) — заливка мятой, надпись глубоким синим, 6,03. */
.em-site-dark-btn{display:inline-flex; align-items:center; gap:var(--em-gap-row); margin-top:18px; height:var(--em-site-touch); padding:0 22px; border:1px solid var(--em-site-white-85); border-radius:var(--em-site-radius); font-size:14px; font-weight:700; color:#fff; transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);}
.em-site-dark:hover .em-site-dark-btn{background:var(--em-site-accent); border-color:var(--em-site-accent); color:var(--em-brand-deep);}
/* Рамка тоном подписей витрины: --em-site-line на светлом блоке давала 1,12
   при норме 3,0 для графики — кнопка теряла край. Тон подписей даёт 4,94. */
.em-site-dark.is-light .em-site-dark-btn{border-color:var(--em-site-text); color:var(--em-site-dark);}
/* Три баннера середины (Сборка 331, образец владельца): широкий и два одинаковых поуже, снимок на всю площадь,
   надпись, метка и кнопка — в нижнем углу на затемнении. Подъём, косая вспышка и заливка кнопки при наведении — прежние */
.em-site-darkrow.is-trio .em-site-wrap{grid-template-columns:2fr 1fr 1fr; gap:calc(var(--em-site-promo-gap) / 2);}   /* жёлоб образца — 24 */
.em-site-dark.is-cover{display:block; height:var(--em-site-promo-h); isolation:isolate;}
.em-site-dark.is-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:-2; transition:transform .8s var(--ease-out);}   /* прибор в верхней части кадра остаётся в баннере */
.em-site-dark.is-cover::before{content:''; position:absolute; inset:0; background:var(--em-site-promo-shade); z-index:-1; pointer-events:none;}
.em-site-dark.is-cover.is-wide img{object-position:22% center;}   /* в широком кадре прибор стоит слева, надпись справа */
.em-site-dark.is-cover:hover img{transform:scale(1.06);}
.em-site-dark.is-cover > div{position:absolute; inset-inline:0; bottom:0; padding:calc(var(--em-site-promo-pad) * .7);}   /* надпись плотной стопкой у нижнего края: снимок остаётся открытым */
.em-site-dark.is-cover .em-site-ad-tag{margin-bottom:var(--em-gap-row-lg);}
.em-site-dark.is-cover b{margin-bottom:0;}
.em-site-dark.is-cover .em-site-dark-btn{margin-top:14px;}
.em-site-dark.is-cover:not(.is-wide) b{font-size:28px;}

/* карусель ведущих */
.em-site-carousel{position:relative;}
.em-site-car-clip{overflow:hidden;}
.em-site-car-track{display:flex; gap:27px; transition:transform .55s var(--ease-out);}
.em-site-car-track .em-site-prod{flex:none; width:calc((100% - 81px) / 4);}
.em-site-car-arrow{position:absolute; top:170px; width:60px; height:60px; border-radius:50%; background:var(--em-site-primary); color:#fff; display:grid; place-items:center; z-index:4; font-size:16px; box-shadow:var(--em-site-shadow-btn); opacity:0; visibility:hidden; transition:background .3s linear, opacity .3s linear, visibility .3s linear;}
.em-site-carousel:hover .em-site-car-arrow{opacity:1; visibility:visible;}
.em-site-car-arrow:hover{background:var(--em-site-primary-hover);}
.em-site-car-arrow.is-prev{inset-inline-start:-78px;}
.em-site-car-arrow.is-next{inset-inline-end:-78px;}

/* обращение */
/* ── Блок обращения по образцу ──
   Светлое мятное поле во всю ширину; внутри контейнера — вырезанная фотография
   ближе к краю и белая карточка ближе к центру. Раскладка сеткой, поэтому в RTL
   стороны меняются сами: фотография оказывается зеркально образцу. */
.em-site-contact{position:relative; background:var(--em-site-contact-bg); padding:var(--em-site-contact-pad-y) 0 var(--em-site-contact-pad-b);}
.em-site-contact .em-site-wrap{display:grid; grid-template-columns:1fr var(--em-site-contact-card); gap:var(--em-site-contact-gap); align-items:center;}
/* Мокап телефона с нашей витриной внутри — вместо фотографии в блоке обращения
   (решение владельца 15.09.2026, Сборка 273). Рисуется своими средствами: корпус
   и экран — фигуры на токенах, внутри настоящие обложки товаров каталога.
   Ни одной картинки со стороны, ни одного нового цвета. */
.em-site-collage{justify-self:center; width:var(--em-site-collage-w); max-width:100%; min-width:0; position:relative; direction:ltr;}
.em-site-collage-pad{position:absolute; right:calc(-1 * var(--em-site-collage-shift)); bottom:calc(-1 * var(--em-site-collage-shift)); width:64%; height:62%; background:var(--em-site-accent); border-radius:var(--em-site-collage-r);}
.em-site-collage-grid{position:relative; display:grid; grid-template-columns:17.1fr 18.7fr 19.1fr 20.4fr 21.2fr; grid-template-rows:18.9fr 20.2fr 19.9fr 20.1fr 17.2fr; gap:var(--em-site-collage-gap); aspect-ratio:1 / 0.998; background:#fff;}
.em-site-collage-photo{grid-column:2 / span 4; grid-row:1 / span 5; width:100%; height:100%; object-fit:cover; display:block; background:var(--em-site-card); border-radius:0 var(--em-site-collage-r) 0 0;}
/* Мозаика: зазоры снимка повторяют карту образца, снятую по прозрачным полосам его картинки.
   Линии не сквозные: правый верхний блок 2x2 слитен, линия под верхним квадратом идёт до третьей
   колонки, нижняя — только правее плашки. Семь белых полос, размеры и места в долях области снимка */
.em-site-collage-net{grid-column:2 / span 4; grid-row:1 / span 5; pointer-events:none; z-index:2;
    background:
        linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),
        linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),
        linear-gradient(#fff,#fff);
    background-size:1.18% 100%, 1.18% 100%, .94% 58.88%, 47.06% .97%, 100% .97%, 100% .97%, 76% .97%;
    background-position:23.09% 0, 47.85% 0, 74.11% 100%, 0 19.11%, 0 40.54%, 0 61.6%, 100% 82.85%;
    background-repeat:no-repeat;}
.em-site-collage-sq{background:var(--em-brand-deep); z-index:3;}
.em-site-collage-sq.is-top{grid-column:2; grid-row:1;}
.em-site-collage-sq.is-corner{grid-column:5; grid-row:5; border-radius:0 0 var(--em-site-collage-r) 0; z-index:3;}
.em-site-collage-name{grid-column:1; grid-row:1 / span 2; z-index:3; background:var(--em-site-field-face); display:flex; align-items:center; justify-content:center; border-radius:var(--em-site-collage-r) 0 0 0;}
.em-site-collage-name-in{writing-mode:vertical-rl; transform:rotate(180deg); direction:rtl; text-align:center;}
.em-site-collage-name b{display:block; font-size:var(--em-site-collage-name); font-weight:700; color:var(--em-brand-deep); line-height:1.2;}
.em-site-collage-name i{display:block; font-style:normal; font-size:12px; color:var(--em-site-primary); margin-top:var(--em-gap-inner);}
.em-site-collage-mint{grid-column:1; grid-row:3; z-index:3; background:var(--em-site-accent);}
.em-site-collage-num{grid-column:1 / span 2; grid-row:4 / span 2; z-index:3; background:var(--em-brand-deep); border-radius:0 0 0 var(--em-site-collage-r); display:grid; place-content:center; justify-items:center; gap:0; padding:0 var(--em-gap-inner); color:#fff; direction:rtl;}
/* Плюс вынесен из потока: в потоке он тянет центр вправо и подпись не стоит под цифрами */
.em-site-collage-num b{position:relative; display:block; font-size:var(--em-site-collage-num); font-weight:700; line-height:.94; direction:ltr; text-align:center;}
.em-site-collage-num b span{position:absolute; left:100%; top:1px; margin-left:3px; font-size:54%; font-weight:700; line-height:1; color:var(--em-site-accent);}
.em-site-collage-num i{font-style:normal; font-size:var(--em-site-collage-label); line-height:1; white-space:nowrap; text-align:center;}
.em-site-contact-card{background:#fff; border-radius:var(--em-site-radius); padding:var(--em-site-contact-pad) var(--em-site-contact-pad) 50px;}
.em-site-contact h2{font-family:var(--em-site-font); font-size:32px; font-weight:700; letter-spacing:.03em; margin-bottom:var(--em-shift-lg);}
.em-site-contact p{font-size:15px; color:var(--em-site-text); margin-bottom:26px;}
.em-site-contact-form{position:relative;}
.em-site-contact-form input{display:block; width:100%; height:var(--em-site-field-h); margin-bottom:14px; border:0; background:var(--em-site-field-face); padding:0 15px; font-family:inherit; font-size:16px; color:var(--em-site-dark); outline:none; border-radius:var(--em-site-radius); transition:box-shadow .2s var(--ease-out);}
/* Подсказка несёт название поля — видимых подписей у полей нет, поэтому она
   задаётся токеном, а не оставляется на умолчание браузера. 4,99 на заливке. */
.em-site-contact-form input::placeholder{color:var(--em-site-text); opacity:1;}
.em-site-contact-form input:focus{box-shadow:0 0 0 3px var(--em-site-ring);}
/* Кнопка во всю ширину карточки. Надпись глубоким синим на мяте — 6,03;
   то же правило, что у кнопок на синих плитках (§J.4) и на экране входа. */
.em-site-contact-send{width:100%; height:var(--em-site-contact-btn); margin-top:var(--em-shift-sm); border:0; border-radius:var(--em-site-radius); background:var(--em-site-accent); color:var(--em-brand-deep); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background .3s var(--ease-out);}
.em-site-contact-send:hover{background:var(--em-site-primary); color:#fff;}
.em-site-lead-done{display:none; margin-top:12px; color:var(--em-site-primary); font-weight:600;}
.em-site-contact-form.is-done input, .em-site-contact-form.is-done .em-site-contact-send{display:none;}
.em-site-contact-form.is-done .em-site-lead-done, .em-site-lead-form.is-done .em-site-lead-done{display:block;}
.em-site-lead-form.is-done .em-site-fld, .em-site-lead-form.is-done .em-site-btn{display:none;}

/* подвал */
/* ═══ Полоса подписки и подвал — по размерам образца (замер 02.09.2026) ═══ */
.em-site-subs{background:var(--em-site-subs-bg); padding:50px 0;}
/* row-reverse: в RTL обычный порядок поставил бы соцсети справа, а форму слева.
   Владелец выбрал расположение образца — соцсети слева, форма справа. */
.em-site-subs .em-site-wrap{display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}
.em-site-subs-soc{display:flex; gap:16px;}
.em-site-subs-soc a{width:50px; height:50px; border-radius:50%; background:var(--em-site-accent); color:#fff; display:grid; place-items:center; font-size:16px; transition:background .5s var(--ease-out), color .5s var(--ease-out);}
.em-site-subs-soc a:hover{background:var(--em-site-subs-bg); color:#fff;}   /* образец: кружок уходит в цвет полосы, значок остаётся белым */
.em-site-subs-form{display:flex; flex-direction:row-reverse; min-width:min(420px, 100%);}
.em-site-subs-form input{flex:1; height:62px; border:0; outline:none; background:var(--em-site-field-face); color:var(--em-site-dark); font-family:inherit; font-size:16px; padding:0 18px; border-start-end-radius:var(--em-site-radius); border-end-end-radius:var(--em-site-radius);}   /* поле слева — скругление с левого края */
.em-site-subs-form button{flex:none; width:152px; height:62px; border:0; background:var(--em-site-accent); color:#fff; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; border-start-start-radius:var(--em-site-radius); border-end-start-radius:var(--em-site-radius); transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out);}   /* кнопка справа — скругление с правого края */
.em-site-subs-form button:hover{background:var(--em-site-subs-bg); box-shadow:inset 0 0 0 1px var(--em-site-accent); color:#fff;}

.em-site-footer{background:var(--em-site-urgent-pattern) 0 0 repeat, var(--em-site-dark); background-size:760px 760px, auto; color:#fff; padding:100px 0 60px; opacity:1;}
 /* Главная кнопка действия сайта (решение владельца 16.09.2026, Сборка 293): как кнопка «כניסה» кабинета —
   мята с глубоким синим текстом, при наведении синий бренда с белым; высота поля витрины.
   Подвал держит свою прежнюю высоту 58 и белый текст (отступление владельца §H). */
.em-site-cta{display:inline-flex; align-items:center; justify-content:center; height:var(--em-site-field-h); padding:0 26px; border:0; border-radius:var(--em-site-radius); background:var(--em-site-accent); color:var(--em-brand-deep); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background .3s var(--ease-out), color .3s var(--ease-out);}
.em-site-cta:hover{background:var(--em-site-primary); color:#fff;}
.em-site-footer .em-site-cta{margin-top:26px; height:58px; color:#fff; font-weight:600;}
.em-site-fav-all{display:flex; justify-content:flex-end; margin-top:18px;}
.em-site-cta i{margin-inline-end:var(--em-gap-inner);}
.em-site-footer-links li{display:flex; align-items:center; height:48px;}   /* шаг строк ссылок как в образце */
.em-site-footer-links a{display:flex; align-items:center; gap:var(--em-gap-inner-lg); font-weight:500; line-height:1.5;}
.em-site-footer-links a::before{content:'\00BB'; color:#fff; font-size:16px; line-height:1;}   /* в образце стрелка белая, не мятная */
.em-site-footer-new{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.em-site-footer-new img{width:69px; height:69px; flex:none; object-fit:cover; border-radius:var(--em-site-radius); background:var(--em-site-card);}
.em-site-footer-new b{display:block; font-size:16px; font-weight:600; line-height:1.4; color:#fff;}
.em-site-footer-new small{display:block; margin-top:var(--em-shift-sm); font-size:16px; color:var(--em-site-accent);}
.em-site-footer-new:hover b{color:var(--em-site-accent);}
.em-site-footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr; gap:44px;}
.em-site-footer-grid.is-five{grid-template-columns:1.2fr 1fr 1fr 1fr 1.2fr;}   /* пятая колонка — страницы услуг (Сборка 330) */
.em-site-footer h4{font-family:var(--em-site-font); font-size:20px; font-weight:700; color:#fff; margin-bottom:20px;}
.em-site-footer-about{font-size:16px; line-height:1.7; margin:24px 0 var(--em-shift-lg); max-width:285px; color:#fff;}
.em-site-footer ul{list-style:none; margin:0; padding:0;}
.em-site-footer li{font-size:16px; color:#fff;}
.em-site-footer li a{display:inline-flex; align-items:center; gap:var(--em-gap-inner-lg); color:#fff; transition:color .25s var(--ease-out), padding .25s var(--ease-out);}
.em-site-footer li a:hover{color:var(--em-site-accent); padding-inline-start:4px;}
.em-site-footer-contact li{display:flex; gap:var(--em-gap-inner-lg); align-items:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--em-site-white-28);}
.em-site-footer-contact li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}
.em-site-footer-contact i{color:var(--em-site-accent); width:20px; font-size:20px; text-align:center;}
.em-site-copy{background:var(--em-site-dark); color:var(--em-site-white-85); text-align:center; padding:38px 0; font-size:16px; border-top:1px solid var(--em-site-white-28);}   /* 45% белого дало бы 4,34 при норме 4,5 */
.em-site-top{position:fixed; bottom:26px; inset-inline-end:26px; width:52px; height:52px; border-radius:50%; background:var(--em-site-accent); color:#fff; display:grid; place-items:center; box-shadow:var(--em-site-shadow-btn); opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), visibility .3s; z-index:60; font-size:18px;}
.em-site-top.is-show{opacity:1; visibility:visible;}

/* полноэкранный поиск и окно обращения */
.em-site-searchlay{position:fixed; inset:0; background:var(--em-site-overlay); z-index:90; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .35s var(--ease-out), visibility .35s;}
.em-site-searchlay.is-open{opacity:1; visibility:visible;}
/* Ширина, высота поля, размер подсказки, линия и отступ под лупу сняты замером
   с живого образца: 50 % экрана на компьютере, 80 % на телефоне, поле 50 точек,
   подсказка 16, линия 2 точки сплошным белым, отступ под значок 55. */
.em-site-searchlay-form{width:50%; max-width:var(--em-site-search-max); min-width:var(--em-site-search-min); position:relative;}
/* Отступ резервируется с той же стороны, где стоит значок поиска — в конце строки
   по направлению письма (в иврите слева). Логические свойства держат обе стороны. */
.em-site-searchlay-form input{width:100%; height:var(--em-site-field-h); background:transparent; border:0; border-bottom:2px solid #fff; color:#fff; font-family:inherit; font-size:16px; padding-block:12px; padding-inline-start:0; padding-inline-end:var(--em-site-search-pad); outline:none;}
.em-site-searchlay-form input::placeholder{color:#fff; opacity:1;}
.em-site-searchlay-form button{position:absolute; inset-inline-end:0; inset-inline-start:auto; top:0; bottom:auto; width:var(--em-site-touch); height:var(--em-site-field-h); display:grid; place-items:center; color:#fff; font-size:18px;}
/* Селектор с двумя классами: правило «.em-site button» весит больше одного класса
   и перебивало цвет и размер — крестик рисовался серым 16px на тёмном слое.
   Крестик один и стоит у ПРАВОГО края экрана физически, независимо от направления
   письма, — поэтому right/left, а не логические свойства. По высоте — над полем. */
.em-site-searchlay .em-site-searchlay-close{position:fixed; top:calc(50% - var(--em-site-field-h) / 2 - var(--em-site-touch)); inset-inline:auto; right:28px; left:auto; width:var(--em-site-touch); height:var(--em-site-touch); display:grid; place-items:center; color:#fff; font-size:26px; z-index:2;}
.em-site-modal{position:fixed; inset:0; background:var(--em-site-overlay); z-index:95; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), visibility .3s;}
.em-site-modal.is-open{opacity:1; visibility:visible;}
.em-site-modal-card{position:relative; width:520px; max-width:100%; min-width:0; background:#fff; border-radius:var(--em-site-radius); padding:36px var(--em-modal-pad-x) 30px; box-shadow:var(--em-site-shadow-lg); transform:translateY(16px); transition:transform .3s var(--ease-out);}
.em-site-modal.is-open .em-site-modal-card{transform:none;}
.em-site-modal-card h3{font-family:var(--em-site-font); font-size:20px; font-weight:700;}
.em-site-modal-sub{font-size:14px; color:var(--em-site-muted); margin:var(--em-shift-sm) 0 20px;}
.em-site-modal-close{position:absolute; top:14px; inset-inline-end:14px; font-size:20px; color:var(--em-site-muted);}
.em-site-fld{display:block; margin-bottom:14px;}
.em-site-fld span{display:block; font-size:13px; font-weight:600; color:var(--em-site-dark); margin-bottom:var(--em-shift-sm);}
.em-site-fld input, .em-site-fld textarea{width:100%; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); padding:var(--em-pad-y-lg) 12px; font-family:inherit; font-size:14px; color:var(--em-site-dark); outline:none; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);}
.em-site-fld input{height:40px;}
.em-site-fld input:focus, .em-site-fld textarea:focus{border-color:var(--em-site-primary); box-shadow:0 0 0 3px var(--em-site-ring);}

/* внутренние страницы: полоса заголовка, категория, товар */
.em-site-band{background:var(--em-site-soft); padding:44px 0; text-align:center;}
/* Заголовок полосы — крупно, тёмной мятой; цепочка ссылок — жирнее и крупнее (образец владельца 17.09.2026, Сборка 307).
   На странице товара первый заголовок страницы — имя товара, поэтому в полосе стоит название категории классом, а не h1 */
.em-site-band h1, .em-site-band-title{font-family:var(--em-site-font); font-size:44px; font-weight:700; color:var(--em-site-accent-deep); letter-spacing:.04em; line-height:1; margin:0;} /* строка вплотную: при 1,36 между заголовком и цепочкой стояло 26 точек воздуха (замечание владельца 17.09.2026, Сборка 308) */
.em-site-crumbs{font-size:18px; font-weight:600; color:var(--em-site-dark); line-height:1.36; margin-top:0;} /* вплотную к заголовку полосы (Сборка 309) */
.em-site-crumbs a:hover{color:var(--em-site-primary);}
.em-site-cat-page{padding:50px 0 70px;}
/* Каталог с колонкой отбора справа (П.59, Сборка 296, образец владельца 16.09.2026) */
.em-site-cat-layout{display:grid; grid-template-columns:280px 1fr; gap:38px; align-items:start;}   /* в RTL первая колонка — правая: фильтр 280, товары остальное */
.em-site-cat-side{display:flex; flex-direction:column; gap:22px;}
.em-site-cat-box{background:#fff; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); padding:22px 24px;}
.em-site-cat-box h3{font-family:var(--em-site-font); font-size:17px; font-weight:700; color:var(--em-site-dark); padding-inline-start:12px; border-inline-start:3px solid var(--em-site-accent); margin-bottom:16px;}
.em-site-cat-list{list-style:none; display:flex; flex-direction:column;}
.em-site-cat-list li{border-bottom:1px solid var(--em-site-line);}
.em-site-cat-list li:last-child{border-bottom:0;}
.em-site-cat-list label, .em-site-cat-list a{display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15px; color:var(--em-site-dark); cursor:pointer; transition:color .2s linear;}
.em-site-cat-list label:hover, .em-site-cat-list a:hover, .em-site-cat-list a.is-on{color:var(--em-site-primary);}
.em-site-cat-list a.is-on{font-weight:700;}
.em-site-cat-list span{flex:1;}
.em-site-cat-list small{color:var(--em-site-muted); font-size:13px;}
.em-site-cat-list input, .em-site-contact-form .em-site-consent input{width:18px; height:18px; accent-color:var(--em-site-primary); flex:none;}
.em-site-cat-all{display:inline-block; margin-top:12px; font-size:14px; color:var(--em-site-primary); font-weight:600;}
.em-site-cat-all:hover{text-decoration:underline;}
.em-site-cat-range{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:var(--em-gap-row);}
.em-site-cat-range label{display:flex; align-items:center; gap:var(--em-gap-inner); font-size:14px; color:var(--em-site-text);}
.em-site-cat-range input{width:100%; height:44px; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); padding:0 12px; font-family:inherit; font-size:15px; color:var(--em-site-dark); outline:none;}
.em-site-cat-range input:focus{box-shadow:0 0 0 3px var(--em-site-ring);}
.em-site-cat-side-actions{display:flex; flex-direction:column; gap:12px; align-items:stretch;}
.em-site-cat-side-actions .em-site-cta{width:100%;}
.em-site-cat-clear{text-align:center; font-size:14px; color:var(--em-site-text); text-decoration:underline;}
.em-site-cat-clear:hover{color:var(--em-site-primary);}
.em-site-cat-main{min-width:0;}
.em-site-cat-bar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:30px;}
.em-site-cat-count{font-size:15px; color:var(--em-site-text);}
.em-site-cat-bar-tools{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.em-site-cat-sortsel{display:flex; align-items:center; gap:var(--em-gap-inner); font-size:14px; color:var(--em-site-text);}
.em-site-cat-sortsel select{height:44px; padding:0 14px; border:1px solid var(--em-site-line); border-radius:999px; background:#fff; font-family:inherit; font-size:14px; color:var(--em-site-dark); outline:none; cursor:pointer;}
.em-site-cat-sortsel select:focus{box-shadow:0 0 0 3px var(--em-site-ring);}
.em-site-cat-view{display:flex; gap:var(--em-gap-inner);}
.em-site-cat-view button{width:44px; height:44px; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); display:grid; place-items:center; color:var(--em-site-text); background:#fff; font-size:16px; transition:background .2s linear, color .2s linear, border-color .2s linear;}
.em-site-cat-view button:hover, .em-site-cat-view button.is-on{background:var(--em-site-primary); border-color:var(--em-site-primary); color:#fff;}
.em-site-grid.is-cat{grid-template-columns:repeat(3, 1fr);}
/* Вид списком: карточка в строку — фото слева (в RTL справа), название и цена рядом */
.em-site-grid.is-list{grid-template-columns:1fr; gap:18px;}
.em-site-grid.is-list .em-site-prod{display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); padding:18px;}
.em-site-grid.is-list .em-site-prod-img{height:200px;}
.em-site-grid.is-list .em-site-prod-body{text-align:start; padding-top:0;}
.em-site-grid.is-list .em-site-prod-price{justify-content:flex-start;}
.em-site-grid.is-list .em-site-saving{text-align:start;}
.em-site-cat-search{display:flex; align-items:center; gap:var(--em-gap-inner-lg); height:44px; padding:0 16px; border:1px solid var(--em-site-line); border-radius:999px; background:#fff; color:var(--em-site-text);}
.em-site-cat-search input{border:0; outline:none; font-family:inherit; font-size:14px; color:var(--em-site-dark); background:transparent; width:200px;}
.em-site-pagination{display:flex; justify-content:center; margin-top:40px;}
.em-site-empty{text-align:center; padding:60px 0; color:var(--em-site-muted);}
.em-site-empty i{font-size:48px; margin-bottom:14px;}
.em-site-text-page{padding:50px 0 80px; max-width:860px;}
.em-site-text-page, .em-site-svc-body{font-size:16px; line-height:1.8;}   /* текст юридических страниц и страниц услуг — один набор */
/* Юридические страницы (Сборка 305): заголовок раздела и абзацы; текст — из «אתר», реквизиты — из Настройки → חברה */
.em-site-text-page h2, .em-site-svc-body h2{font-family:var(--em-site-font); font-size:20px; font-weight:700; margin:30px 0 12px;}
.em-site-text-page p, .em-site-svc-body p{margin:0 0 12px;}
/* ── Корзина и оформление заказа (П.58, Сборка 283) — тот же блочный ритм, что у остальных страниц витрины ── */
.em-site-cart{padding:50px 0 80px;}
.em-site-cart-note{display:flex; align-items:center; gap:var(--em-gap-inner); margin-bottom:24px; padding:14px 18px; background:var(--em-site-field-face); color:var(--em-site-dark); border-radius:var(--em-site-radius); font-size:15px;}
.em-site-cart-note.is-error{background:var(--em-danger-bg); color:var(--em-danger-text);}
.em-site-cart-empty{text-align:center; padding:60px 0;}
.em-site-cart-empty > i{font-size:56px; color:var(--em-site-line); margin-bottom:18px;}
.em-site-cart-empty.is-done > i{color:var(--em-site-accent);}
/* Пустое состояние корзины и избранного (решение владельца 16.09.2026, Сборка 289): значок в мятном кольце, две кнопки */
.em-site-empty-ring{display:inline-grid; place-items:center; width:120px; height:120px; border-radius:50%; background:var(--em-site-field-face); margin-bottom:22px;}
.em-site-empty-ring i{font-size:48px; color:var(--em-site-accent); margin:0;}
.em-site-cart-empty p{max-width:520px; margin-inline:auto;}
.em-site-empty-actions{display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
.em-site-cart-empty h2{font-family:var(--em-site-font); font-size:26px; font-weight:700; color:var(--em-site-dark); margin-bottom:12px;}
.em-site-cart-empty p{color:var(--em-site-text); margin-bottom:26px;}
.em-site-cart-grid{display:grid; grid-template-columns:1fr 360px; gap:38px; align-items:start;}
.em-site-cart-item{display:grid; grid-template-columns:84px 1fr 120px 132px 120px 36px; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--em-site-line); transition:background .2s linear;}
.em-site-cart-item:hover{background:var(--em-site-soft);}
.em-site-cart-img{display:grid; place-items:center; width:84px; height:84px; background:var(--em-site-card); border-radius:var(--em-site-radius); overflow:hidden; color:var(--em-site-line); font-size:26px;}
.em-site-cart-img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
.em-site-cart-name a{font-weight:600; color:var(--em-site-dark); display:block;}
.em-site-cart-name a:hover{color:var(--em-site-primary);}
.em-site-cart-name small{display:block; color:var(--em-site-muted); font-size:12px; margin-top:4px;}
.em-site-cart-price, .em-site-cart-total{font-weight:700; color:var(--em-site-primary); font-size:16px;}
.em-site-cart-ask{font-weight:500; font-size:13px; color:var(--em-site-muted); direction:rtl;}
.em-site-cart-qty{display:flex; align-items:center; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); overflow:hidden; height:44px;}
.em-site-cart-qty button{width:40px; height:44px; display:grid; place-items:center; color:var(--em-site-text); background:var(--em-site-btn-face); font-size:13px; transition:background .2s linear, color .2s linear;}
.em-site-cart-qty button:hover{background:var(--em-site-primary); color:#fff;}
.em-site-cart-qty input{width:52px; height:44px; border:0; text-align:center; font-family:inherit; font-size:15px; font-weight:700; color:var(--em-site-dark); outline:none;}
.em-site-cart-del{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--em-site-muted); transition:background .2s linear, color .2s linear;}
.em-site-cart-del:hover{background:var(--em-danger-bg); color:var(--em-danger-text);}
.em-site-cart-sum{background:var(--em-site-soft); border-radius:var(--em-site-radius); padding:30px;}
.em-site-cart-sum h2{font-family:var(--em-site-font); font-size:22px; font-weight:700; color:var(--em-site-dark); margin-bottom:18px;}
.em-site-cart-row{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--em-site-line); font-size:15px; color:var(--em-site-text);}
.em-site-cart-row b{color:var(--em-site-dark);}
.em-site-cart-row.is-total{border-bottom:0; font-size:18px; font-weight:700; color:var(--em-site-dark); padding-top:14px;}
.em-site-cart-row.is-total b{color:var(--em-site-primary); font-size:22px;}
.em-site-cart-unpriced{display:flex; gap:var(--em-gap-inner); align-items:flex-start; font-size:13px; color:var(--em-site-text); margin:12px 0 0;}
.em-site-cart-sum .em-site-btn{width:100%; margin-top:14px;}
.em-site-cart-sum .em-site-muted{font-size:13px; margin-top:14px; line-height:1.6;}
.em-site-checkout-card{padding:var(--em-site-contact-pad);}
.em-site-checkout-card h2{font-family:var(--em-site-font); font-size:26px; font-weight:700; color:var(--em-site-dark); margin-bottom:12px;}
.em-site-checkout-card > p{color:var(--em-site-text); margin-bottom:24px; line-height:1.6;}
.em-site-checkout-lines{margin-bottom:12px;}
.em-site-checkout-line{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px; color:var(--em-site-dark); border-bottom:1px dashed var(--em-site-line);}
.em-site-checkout-line small{color:var(--em-site-muted);}
.em-site-checkout-line b{color:var(--em-site-primary); white-space:nowrap;}
/* ── Кабинет клиента (П.32, Сборка 284) ── */
/* Вход, регистрация, сброс пароля (решение владельца 17.09.2026 по превью, Сборка 312): блок во всю ширину сайта из двух половин —
   форма и синяя панель «что даёт кабинет» с кнопкой перехода; фон страницы — та же светлая мята, что у полосы заголовка.
   В RTL первая колонка сетки — правая: форма справа, панель слева */
.em-site-auth{background:var(--em-site-soft); padding:0 0 80px;}
.em-site-auth-card{display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); box-shadow:var(--em-site-shadow-drop); overflow:hidden;}
.em-site-auth-card.is-wide{grid-template-columns:3fr 2fr;}
.em-site-auth-main{padding:var(--em-site-auth-pad); text-align:center; min-width:0; display:flex; flex-direction:column; justify-content:center;} /* короткая форма стоит по центру высоты панели */
.em-site-auth-main form{text-align:start;}
.em-site-auth-ring{display:inline-grid; place-items:center; width:var(--em-site-auth-ring); height:var(--em-site-auth-ring); border-radius:50%; background:var(--em-site-field-face); color:var(--em-site-accent-deep); font-size:28px; margin-bottom:16px; align-self:center;}
.em-site-auth-main > h2{font-family:var(--em-site-font); font-size:26px; font-weight:700; color:var(--em-site-dark); margin-bottom:var(--em-block-gap);}
.em-site-auth-main > p{color:var(--em-site-text); margin-bottom:28px; line-height:1.6;}
.em-site-auth-main .em-site-cart-note{text-align:start;}
.em-site-auth-group{font-size:13px; font-weight:700; color:var(--em-site-primary); letter-spacing:.04em; margin:var(--em-gap-row) 0 12px;}
/* «שכחתי סיסמה» — у начала строки (в RTL справа), со значком, синим бренда и с чертой: видно, что это ссылка (замечание владельца 17.09.2026, Сборка 313) */
.em-site-auth-main .em-site-auth-forgot{display:inline-flex; align-items:center; gap:var(--em-gap-inner); align-self:flex-start; margin:0 0 18px; font-size:15px; font-weight:700; color:var(--em-site-primary); text-decoration:underline; text-underline-offset:4px; transition:color .25s var(--ease-out);}
.em-site-auth-main .em-site-auth-forgot:hover{color:var(--em-site-accent-deep);}
.em-site-auth-side{background:var(--em-brand-deep); color:#fff; padding:var(--em-site-auth-pad); display:flex; flex-direction:column; justify-content:center; min-width:0;}
.em-site-auth-side h3{font-family:var(--em-site-font); font-size:28px; font-weight:700; color:#fff; margin-bottom:var(--em-gap-row-lg);}
.em-site-auth-side > p{color:var(--em-site-white-85); line-height:1.6; margin-bottom:28px;}
.em-site-auth-perks{list-style:none; margin:0 0 32px; padding:0; display:grid; gap:18px;}
.em-site-auth-perks li{display:flex; align-items:center; gap:14px; font-size:16px; font-weight:500;}
.em-site-auth-perks i{display:grid; place-items:center; width:var(--em-site-auth-perk); height:var(--em-site-auth-perk); border-radius:50%; background:var(--em-site-accent-16); color:var(--em-site-accent); font-size:17px; flex:none;}
.em-site-auth-side .em-site-auth-alt{display:flex; align-items:center; justify-content:center; gap:var(--em-gap-inner); width:100%; height:var(--em-site-field-h); border:1px solid var(--em-site-accent); border-radius:var(--em-site-radius); color:var(--em-site-accent); font-size:16px; font-weight:700; transition:background .3s var(--ease-out), color .3s var(--ease-out);}
.em-site-auth-side .em-site-auth-alt:hover{background:var(--em-site-accent); color:var(--em-brand-deep);}

/* ── Корзина в каноне блока кабинета (решение владельца 18.09.2026, Сборка 317):
   та же карточка во всю ширину, то же поле половин, та же синяя панель, что у входа и регистрации.
   Строки товаров живут в белой половине, итог и купон — на синей. ── */
.em-site-auth-main.is-cart{text-align:start; justify-content:flex-start;}
.em-site-cart-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--em-gap-inner); margin-bottom:18px;}
.em-site-cart-head h2{font-family:var(--em-site-font); font-size:26px; font-weight:700; color:var(--em-site-dark);}
.em-site-cart-head span{color:var(--em-site-muted); font-size:14px;}
.em-site-cart-head b{color:var(--em-site-dark);}
/* строка товара внутри карточки уже, чем на прежней странице: цена за единицу ушла под название */
.em-site-auth-main.is-cart .em-site-cart-item{grid-template-columns:72px 1fr auto 96px 32px; gap:14px; padding:14px 0;}
.em-site-auth-main.is-cart .em-site-cart-item:hover{background:transparent;}
.em-site-auth-main.is-cart .em-site-cart-img{width:72px; height:72px;}
.em-site-auth-main.is-cart .em-site-cart-del{width:32px; height:32px;}
.em-site-cart-unit{display:block; margin-top:4px; font-weight:700; font-size:14px; color:var(--em-site-primary);}
.em-site-cart-unit small{display:inline; color:var(--em-site-muted); font-weight:500;} /* «ליח׳» в той же строке, что цена: у мелкого текста названия display:block */
.em-site-auth-main.is-cart .em-site-auth-forgot{margin:22px 0 0;}

.em-site-auth-side.is-sum{text-align:start;}
.em-site-auth-side.is-sum .em-site-cart-row{color:var(--em-site-white-85); border-bottom-color:var(--em-on-brand-border);}
.em-site-auth-side.is-sum .em-site-cart-row b{color:#fff;}
.em-site-auth-side.is-sum .em-site-cart-row.is-total{color:#fff;}
.em-site-auth-side.is-sum .em-site-cart-row.is-total b, .em-site-auth-side.is-sum .em-site-cart-row.is-saved b, .em-site-auth-side.is-sum .em-site-cart-row.is-coupon b{color:var(--em-site-accent);}
.em-site-auth-side.is-sum .em-site-cart-row.is-coupon span b{color:#fff;}
.em-site-auth-side.is-sum .em-site-coupon{border-bottom-color:var(--em-on-brand-border);}
.em-site-auth-side.is-sum .em-site-coupon-msg{color:#fff;}
.em-site-auth-side.is-sum .em-site-coupon-del{color:var(--em-site-white-85);}
.em-site-auth-side.is-sum .em-site-coupon-del:hover{background:var(--em-site-accent-16); color:var(--em-site-accent);}
.em-site-auth-side.is-sum .em-site-cart-unpriced{color:var(--em-site-white-85); font-size:13px; line-height:1.6; margin-top:14px;}
.em-site-cart-go{display:grid; gap:12px; margin-top:24px;}
.em-site-auth-side.is-sum .em-site-cta{width:100%;}
.em-site-auth-side.is-sum .em-site-muted{color:var(--em-site-white-85); font-size:13px; line-height:1.6; margin-top:16px;}
/* ── Страница услуги (Сборка 330): канон блока кабинета — справа текст услуги, слева синяя панель со всеми услугами и связью ── */
.em-site-auth-main.is-text{text-align:start; justify-content:flex-start;}
.em-site-auth-main.is-text .em-site-auth-ring{align-self:flex-start;}
.em-site-svc-lead{font-size:19px; font-weight:600; line-height:1.6; color:var(--em-site-dark); margin-bottom:18px;}
.em-site-svc-body{color:var(--em-site-text);}
.em-site-svc-body h2{color:var(--em-site-dark);}
.em-site-svc-body ul{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:var(--em-gap-inner);}
.em-site-svc-body li{display:flex; align-items:baseline; gap:var(--em-gap-inner-lg);}
.em-site-svc-body li i{flex:none; font-size:14px; color:var(--em-site-accent-deep);}   /* тёмная мята на белом — 3,36 при норме значка 3,0 */
.em-site-auth-side .em-site-auth-perks a{display:flex; align-items:center; gap:14px; color:#fff; transition:color .25s var(--ease-out);}   /* два класса — сильнее сброса ссылок витрины */
.em-site-auth-side .em-site-auth-perks a:is(:hover, :focus-visible, .is-on){color:var(--em-site-accent);}
.em-site-auth-side .em-site-auth-perks a.is-on{font-weight:700;}
.em-site-auth-side .em-site-auth-perks a.is-on i{background:var(--em-site-accent); color:var(--em-brand-deep);}   /* текущая услуга — кружок мятой, значок глубоким синим (6,03) */
.em-site-auth-side.is-svc .em-site-cta{width:100%; margin-bottom:14px;}
/* Телефон: строка товара в две полосы — снимок и название сверху, количество и сумма под ними */
@media (max-width:759px){
    .em-site-auth-main.is-cart .em-site-cart-item{grid-template-columns:72px 1fr auto; gap:12px 14px;}
    .em-site-auth-main.is-cart .em-site-cart-img{grid-row:1 / span 2; align-self:start;}
    .em-site-auth-main.is-cart .em-site-cart-del{grid-column:3; grid-row:1; align-self:start;}
    .em-site-auth-main.is-cart .em-site-cart-qty{grid-column:2; grid-row:2;}
    .em-site-auth-main.is-cart .em-site-cart-total{grid-column:3; grid-row:2; text-align:end;}
}
.em-site-auth-pair{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.em-site-auth-foot{margin-top:18px; font-size:14px; color:var(--em-site-text); line-height:1.6;}
.em-site-auth-foot a, .em-site .em-site-link{color:var(--em-site-primary); font-weight:600; text-decoration:underline; font-family:inherit; font-size:inherit;}
.em-site-contact-form input[readonly]{color:var(--em-site-muted);}
/* Согласие с условиями и политикой приватности при регистрации и заказе (Сборка 305). Флажок — тот же, что в отборе каталога;
   здесь с него снимается вид поля формы, который даёт ему правило полей выше */
.em-site-consent{display:flex; align-items:flex-start; gap:var(--em-gap-row-lg); margin-bottom:14px; font-size:14px; line-height:1.6; color:var(--em-site-text); cursor:pointer;}
.em-site-contact-form .em-site-consent input{display:block; margin:var(--em-gap-tight) 0 0; padding:0; border-radius:0; background:none;}
.em-site-portal{display:grid; grid-template-columns:260px 1fr; gap:38px; align-items:start;}
.em-site-portal-nav{background:var(--em-site-soft); border-radius:var(--em-site-radius); padding:18px 0; display:flex; flex-direction:column;}
.em-site-portal-hello{padding:0 24px 14px; font-size:18px; font-weight:700; color:var(--em-site-dark); border-bottom:1px solid var(--em-site-line); margin-bottom:var(--em-gap-row);}
.em-site-portal-nav a, .em-site-portal-nav button{display:flex; align-items:center; gap:12px; padding:12px 24px; font-size:15px; color:var(--em-site-dark); font-family:inherit; width:100%; text-align:start; border-inline-start:3px solid transparent;}
.em-site-portal-nav i{width:18px; text-align:center; color:var(--em-site-primary);}
.em-site-portal-nav a:hover, .em-site-portal-nav button:hover{background:#fff;}
.em-site-portal-nav a.is-on{background:#fff; border-inline-start-color:var(--em-site-accent); font-weight:700;}
.em-site-portal-nav form{border-top:1px solid var(--em-site-line); margin-top:var(--em-gap-row); padding-top:var(--em-gap-row);}
.em-site-portal-body{min-width:0;}
.em-site-portal-card{background:#fff; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); padding:30px; margin-bottom:24px;}
.em-site-portal-card h2{font-family:var(--em-site-font); font-size:22px; font-weight:700; color:var(--em-site-dark); margin-bottom:18px; display:flex; align-items:center; gap:12px;}
.em-site-portal-card h2 small{font-size:15px; font-weight:400; color:var(--em-site-muted);}
.em-site-portal-facts{display:grid; grid-template-columns:max-content 1fr; gap:12px 24px; font-size:15px; margin-bottom:18px;}
.em-site-portal-facts dt{color:var(--em-site-muted);}
.em-site-portal-facts dd{color:var(--em-site-dark); font-weight:600;}
.em-site-portal-list{display:flex; flex-direction:column; margin-bottom:18px;}
.em-site-portal-row{display:grid; grid-template-columns:100px 1fr auto auto; gap:18px; align-items:center; padding:12px 0; border-bottom:1px solid var(--em-site-line); color:var(--em-site-dark); font-size:15px;}
.em-site-portal-row{transition:background .2s linear;}
.em-site-portal-row:hover{background:var(--em-site-soft);}
.em-site-portal-row:hover b{color:var(--em-site-primary);}
.em-site-portal-lines{margin-bottom:12px;}
.em-site-pager{margin-top:18px;}
/* Плашка состояния заказа в кабинете: те же смыслы, что у плашек панели */
.em-site-pill{display:inline-block; padding:3px 12px; border-radius:999px; font-size:12px; font-weight:700; background:var(--em-site-soft); color:var(--em-site-dark);}
.em-site-pill.is-new{background:var(--em-warn-bg); color:var(--em-warn-text);}
.em-site-pill.is-confirmed{background:var(--em-info-bg); color:var(--em-info-text);}
.em-site-pill.is-shipped, .em-site-pill.is-closed{background:var(--em-success-bg); color:var(--em-success-text);}
.em-site-pill.is-cancelled{background:var(--em-danger-bg); color:var(--em-danger-text);}
/* Документы и оплаты в кабинете (П.32.2, Сборка 286): те же плашки, что у панели, по состоянию документа */
.em-site-pill.is-issued{background:var(--em-info-bg); color:var(--em-info-text);}
.em-site-pill.is-paid{background:var(--em-success-bg); color:var(--em-success-text);}
.em-site-portal-row.is-doc{grid-template-columns:130px 1fr auto auto 36px;}
.em-site-doc-pdf{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--em-site-primary); background:var(--em-site-soft); transition:background .2s linear, color .2s linear;}
.em-site-doc-pdf:hover{background:var(--em-site-primary); color:#fff;}
.em-site-portal-tabs{margin:0 0 18px; justify-content:flex-start;}
.em-site-portal-tabs a small{color:var(--em-site-muted); margin-inline-start:4px;}
/* Страница избранного (П.58, Сборка 288): таблица — товар, цена, «в корзину», убрать; шапка таблицы глубоким синим */
.em-site-fav-table{border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); overflow:hidden;}
.em-site-fav-head, .em-site-fav-row{display:grid; grid-template-columns:1fr 160px 200px 60px; align-items:center; gap:18px; padding:0 24px;}
.em-site-fav-head{height:56px; background:var(--em-site-soft); color:var(--em-site-dark); font-size:15px; font-weight:600;}
.em-site-fav-row{padding-top:18px; padding-bottom:18px; border-top:1px solid var(--em-site-line); transition:background .2s linear;}
.em-site-fav-row:hover{background:var(--em-site-soft);}
.em-site-fav-row:first-child{border-top:0;}
.em-site-fav-prod{display:flex; align-items:center; gap:18px; color:var(--em-site-dark);}
.em-site-fav-prod b{display:block; font-weight:600;}
.em-site-fav-prod small{display:block; color:var(--em-site-muted); font-size:12px; margin-top:4px;}
.em-site-fav-prod:hover b{color:var(--em-site-primary);}
.em-site-fav-row .em-site-btn{height:44px; padding:0 18px; font-size:13px;}
.em-site-pd{padding:70px 0 40px;}
.em-site-pd-grid{display:grid; grid-template-columns:127px 435px 1fr; gap:26px; align-items:start;}
.em-site-pd-thumbs{display:grid; gap:14px;}
.em-site-pd-thumbs button{height:127px; background:var(--em-site-card); border:1px solid transparent; border-radius:var(--em-site-radius-sm); display:grid; place-items:center; padding:var(--em-pad-lg); overflow:hidden;}
.em-site-pd-thumbs button.is-on{border-color:var(--em-site-primary);}
.em-site-pd-thumbs button:hover{border-color:var(--em-site-accent);}
.em-site-pd-thumbs img{max-height:100%; object-fit:contain; mix-blend-mode:multiply;}
.em-site-pd-main{position:relative; height:445px; background:var(--em-site-card); border-radius:var(--em-site-radius); display:grid; place-items:center; padding:28px;}
.em-site-pd-main img{max-height:100%; object-fit:contain; mix-blend-mode:multiply; transition:opacity .3s var(--ease-out);}
.em-site-pd-main img.is-fade{opacity:0;}
.em-site-pd-info h1{font-size:30px; font-weight:600;}
.em-site-pd-top{display:flex; align-items:center; gap:12px; margin-bottom:var(--em-shift-lg);}
.em-site-pd-cat{display:inline-block; color:var(--em-site-primary); font-size:14px; font-weight:600; transition:color .2s linear;}
.em-site-pd-cat:hover{color:var(--em-site-dark); text-decoration:underline;}
/* Строка מק״ט · יצרן · סוג под названием (Сборка 287) */
.em-site-pd-meta{display:flex; flex-wrap:wrap; gap:12px 26px; margin:14px 0 22px; font-size:14px;}
.em-site-pd-meta small{color:var(--em-site-muted); margin-inline-end:var(--em-gap-row);}
.em-site-pd-meta b{color:var(--em-site-dark); font-weight:600;}
/* Цена на странице товара (П.58): без НДС крупно, с НДС строкой ниже; та же геометрия, что у строки מק״ט */
.em-site-pd-price{display:flex; flex-direction:column; gap:var(--em-gap-row); margin-bottom:22px;}
.em-site-pd-price-main{font-size:26px; font-weight:700; color:var(--em-site-primary); display:flex; align-items:baseline; gap:12px;}
.em-site-pd-price-vat{font-size:16px; font-weight:600; color:var(--em-site-text); display:flex; align-items:baseline; gap:12px;}
.em-site-pd-price small{font-size:14px; font-weight:400; color:var(--em-site-muted);}
.em-site-btn.is-added{color:#fff;}
.em-site-cta.is-added{background:var(--em-site-primary); color:#fff;}   /* секунда после нажатия «в корзину» */
/* Блок покупки (Сборка 287, переработан Сборкой 301): цена; строка — счётчик, «в корзину» мятой, «заказать сейчас» синей;
   ниже четыре равные плитки: избранное · запрос цены · телефон · вотсап */
.em-site-pd-buy{background:var(--em-site-card); padding:26px 28px; border-radius:var(--em-site-radius);}
.em-site-pd-buy .em-site-pd-price{margin-bottom:18px;}
.em-site-pd-actions{display:grid; grid-template-columns:auto 1fr 1fr; align-items:center; gap:12px;}
.em-site-pd-actions .em-site-cart-qty{background:#fff;}
/* Обе кнопки — главная кнопка сайта, высотой в счётчик (44), решение владельца 16.09.2026 */
.em-site-pd-actions .em-site-cta{height:44px; padding:0 18px; white-space:nowrap;}
.em-site-pd-tiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--em-site-line);}
.em-site-pd-tile{--em-tile-ink:var(--em-site-primary); --em-tile-soft:var(--em-site-field-face); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--em-gap-row); min-height:78px; padding:9px 4px; background:#fff; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); color:var(--em-site-dark); font-family:inherit; font-size:13px; font-weight:600; text-align:center; transition:border-color .2s linear, color .2s linear, background .2s linear, transform .2s var(--ease-out);}
/* Значок в кружке 40 цвета действия: сердце — красный, предложение — синий, телефон — синий бренда на мяте, вотсап — зелёный (решение владельца 16.09.2026) */
.em-site-pd-tile i{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font-size:18px; color:var(--em-tile-ink); background:var(--em-tile-soft); transition:color .2s linear, background .2s linear;}
.em-site-pd-tile.is-fav{--em-tile-ink:var(--em-danger); --em-tile-soft:var(--em-danger-bg);}
.em-site-pd-tile.is-quote{--em-tile-ink:var(--em-info-text); --em-tile-soft:var(--em-info-bg);}
.em-site-pd-tile.is-phone{--em-tile-ink:var(--em-site-primary); --em-tile-soft:var(--em-site-field-face);}
.em-site-pd-tile.is-wa{--em-tile-ink:var(--em-success); --em-tile-soft:var(--em-success-bg);}
.em-site-pd-tile:hover{border-color:var(--em-tile-ink); color:var(--em-tile-ink); transform:translateY(calc(-1 * var(--em-shift-sm)));}
.em-site-pd-tile:hover i{background:var(--em-tile-ink); color:#fff;}
.em-site-pd-tile.is-on{border-color:var(--em-tile-ink); color:var(--em-tile-ink);}
.em-site-pd-tile.is-on i{background:var(--em-tile-ink); color:#fff;}
/* Четыре плитки доверия под блоком покупки */
.em-site-pd-trust{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:22px;}
.em-site-pd-trust span{display:flex; align-items:center; gap:var(--em-gap-inner); font-size:13px; color:var(--em-site-dark); background:#fff; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius-sm); padding:12px 14px;}
.em-site-pd-trust span{transition:border-color .2s linear, box-shadow .2s linear, transform .2s var(--ease-out);}
.em-site-pd-trust span:hover{border-color:var(--em-site-primary); box-shadow:var(--em-shadow-tile-hover); transform:translateY(calc(-1 * var(--em-shift-sm)));}
.em-site-pd-trust i{color:var(--em-site-primary); font-size:16px;}
.em-site-pd-note{display:flex; align-items:center; gap:var(--em-gap-inner); margin-top:14px; font-size:13px; color:var(--em-site-text);}
.em-site-tabs{display:flex; gap:var(--em-gap-inner-xl); border-bottom:1px solid var(--em-site-line); margin:40px 0 22px; font-size:16px; font-weight:500; color:var(--em-site-muted);}
.em-site-tabs button{padding:0 var(--em-gap-tight) 14px; border-bottom:2px solid transparent; transition:color .25s var(--ease-out), border-color .25s var(--ease-out);}
.em-site-tabs button.is-on{color:var(--em-site-dark); border-color:var(--em-site-primary);}
.em-site-tabpane{font-size:15px; line-height:1.8; max-width:900px;}
/* Вкладка «קבצים והוראות» страницы товара (Сборка 307): файл строкой — значок, название, вид и размер */
.em-site-files{list-style:none; margin:0; padding:0; display:grid; gap:var(--em-gap-row-lg);}
.em-site-file{display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); color:var(--em-site-dark); font-weight:500; transition:border-color .25s var(--ease-out), color .25s var(--ease-out);}
.em-site-file:hover{border-color:var(--em-site-primary); color:var(--em-site-primary);}
.em-site-file > i{font-size:22px; color:var(--em-site-primary); flex:none;}
.em-site-file small{margin-inline-start:auto; font-size:12px; font-weight:400; color:var(--em-site-muted); white-space:nowrap;}
.em-site-closed{max-width:520px; margin:80px auto; text-align:center; padding:0 20px;}
.em-site-closed .abtn{margin-top:20px;}

/* раздел «אתר» в панели: строки слайдов и баннеров */
.em-site-set-row{display:flex; gap:var(--em-gap-row-lg); align-items:flex-start; padding:12px 0; border-top:1px solid var(--em-border-subtle);}
.em-site-set-row:first-of-type{border-top:0;}
.em-site-set-num{width:28px; height:28px; border-radius:50%; background:var(--em-primary-pastel); color:var(--em-primary-pastel-text); display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none;}
.em-site-set-fields{flex:1;}
.em-site-set-thumb{width:96px; height:64px; object-fit:cover; border-radius:var(--em-radius); flex:none;}
.em-site-set-remove{margin-top:var(--em-shift-sm); border:0; padding:0; font-size:.8rem;}

/* ═══ Четыре плитки под каруселью (П.31.1): срочное · каталог · часы · связь ═══ */
/* Ряд по ширине сайта; наползание на карусель −85, как на образце. */
.em-site-quad{width:var(--em-site-wrap); max-width:calc(100% - 40px); margin:-85px auto 0; display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:6;}
.em-site-quad-cell{position:relative; overflow:hidden; display:flex; flex-direction:column; aspect-ratio:285 / 329; min-height:329px; padding:var(--em-site-quad-pad); transition:transform .35s var(--ease-out);}
/* Белый на мяте — решение владельца 02.09.2026, как в образце. Контраст 2,03
   при норме 4,5; отступление внесено в 03_DESIGN_SYSTEM. Значки, рамки кнопок
   и линии расписания берут цвет отсюда, поэтому белеют вместе с текстом. */
.em-site-quad-cell.is-mint{background:var(--em-site-accent); color:#fff;}
.em-site-quad-cell.is-deep{background:var(--em-brand-blue); color:#fff;}
/* блик при наведении — тот же приём, что у тёмных промо-блоков витрины */
.em-site-quad-cell::after{content:''; position:absolute; inset-inline:0; bottom:0; width:150%; height:0; background:var(--em-site-flash); transform:rotate(10deg) translate(-30px, 80px); pointer-events:none; z-index:0;}
.em-site-quad-cell:hover::after{height:100%; opacity:0; transform:rotate(0deg) translate(0, 0); transition:height .5s ease-out, opacity .5s ease-out, transform .5s ease-out;}
.em-site-quad-cell > *{position:relative; z-index:1;}
/* Значки контурные, как на образце. Один файл на значок: цвет даёт сама плитка
   через маску, поэтому светлой и тёмной копии не нужно. */
.em-site-quad-ic{width:50px; height:50px; margin-bottom:20px; background:currentColor;
    -webkit-mask:var(--em-quad-ic) center/contain no-repeat; mask:var(--em-quad-ic) center/contain no-repeat;}
.em-site-quad-ic.is-urgent{--em-quad-ic:url('../img/branding/quad/urgent.svg');}
.em-site-quad-ic.is-catalog{--em-quad-ic:url('../img/branding/quad/catalog.svg');}
.em-site-quad-ic.is-hours{--em-quad-ic:url('../img/branding/quad/hours.svg');}
.em-site-quad-ic.is-lead{--em-quad-ic:url('../img/branding/quad/lead.svg');}
.em-site-quad-cell h3{font-family:var(--em-site-font); font-size:22px; font-weight:700; margin-bottom:20px; color:inherit;}
.em-site-quad-cell p{font-size:15px; line-height:1.45; opacity:.9;}
.em-site-quad-cell p + p{margin-top:var(--em-gap-row);}   /* два предложения читаются одним блоком: при большем зазоре строки выглядели разрежёнными */
.em-site-quad-cell > p:last-of-type{margin-bottom:var(--em-site-quad-btn-gap);}   /* воздух до кнопки, когда содержимое заполнило плитку и auto-поле обнулилось */
.em-site-quad-btn{align-self:flex-start; display:inline-flex; align-items:center; margin-top:auto; height:42px; padding:0 18px; border:1px solid currentColor; border-radius:var(--em-site-radius); font-size:16px; font-weight:600; color:inherit; opacity:.85; transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s var(--ease-out);}
/* Наведение красит кнопку в цвет соседней плитки: на мятной — фирменный синий,
   на синей — мята. Подпись берётся под заливку: белая на синем (9,85),
   синяя на мяте (8,89) — на мятной заливке белая подпись дала бы 2,03. */
.em-site-quad-btn:hover{opacity:1;}
.em-site-quad-cell.is-mint .em-site-quad-btn:hover{background:var(--em-brand-blue); border-color:var(--em-brand-blue); color:#fff;}
.em-site-quad-cell.is-deep .em-site-quad-btn:hover{background:var(--em-site-accent); border-color:var(--em-site-accent); color:var(--em-brand-blue);}
.em-site-quad-hours{list-style:none; margin:0 0 var(--em-site-quad-btn-gap); padding:0; width:100%;}
.em-site-quad-hours li{display:flex; justify-content:space-between; gap:12px; padding:var(--em-pad-y-lg) 0; font-size:15px; border-bottom:1px solid var(--em-site-flash);}
.em-site-quad-hours li:last-child{border-bottom:0;}
.em-site-quad-hours b{font-weight:700;}

/* ═══ Новые блоки витрины: полоса объявлений · «למה אנחנו» · цифры · отзывы ═══
   Решения владельца 13.09.2026. Собраны из готовых красок и радиуса витрины;
   своих цветов не заводят, после установки выключены и не показываются. */
.em-site-topbar{background:var(--em-site-dark); color:#fff; font-size:14px;}
.em-site-topbar .em-site-wrap{display:flex; justify-content:center; padding:9px 0;}
.em-site-topbar a{color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:var(--em-gap-row); transition:opacity .2s var(--ease-out);}
.em-site-topbar a:hover{opacity:.8;}

/* Блок «איכות ושירות» (решения владельца 18.09.2026, Сборки 319–323): узкая фирменная полоса
   во всю ширину экрана с мягким свечением. Слева вырезанная фигура — она крупнее полосы
   и выходит за её верхний край; справа список преимуществ. Заголовка у блока нет.
   При наведении строка встаёт светлой плашкой, кружок заливается мятой, заголовок — мятный. */
.em-site-section.is-why{background:var(--em-site-why-grad); padding:0; margin:calc(var(--em-site-why-gap) + var(--em-site-why-rise)) 0 0; position:relative; overflow-x:clip; clip-path:inset(calc(-1 * var(--em-site-why-rise)) 0 0 0);}   /* над полосой — воздух под голову фигуры; снизу воздух даёт поле следующего блока; обрезка: сверху открыто на подъём головы, снизу и по бокам — край полосы */
.em-site-section.is-why::before{content:''; position:absolute; inset:0; background:var(--em-site-why-dots); background-size:18px 18px; pointer-events:none;}
.em-site-section.is-why::after{content:''; position:absolute; inset:0; background:var(--em-site-why-glow); pointer-events:none;}
.em-site-section.is-why .em-site-wrap{position:relative; z-index:1;}
.em-site-why{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; min-height:var(--em-site-why-band);}
.em-site-why.is-flat{align-items:center; padding:38px 0;}
.em-site-why-photo{position:relative; align-self:stretch;}
.em-site-why-photo img{position:absolute; top:calc(-1 * var(--em-site-why-rise)); inset-inline-start:0; height:var(--em-site-why-photo-h); width:auto; max-width:calc(100% + var(--em-site-why-reach)); object-fit:contain; object-position:top; display:block;}   /* голова над полосой, низ фигуры срезан краем полосы */
.em-site-why-list{display:grid; gap:var(--em-gap-inner); align-content:center; padding:20px 0; min-height:var(--em-site-why-band);}
.em-site-why.is-flat .em-site-why-list{grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:var(--em-gap-inner) 40px; min-height:0; padding:0;}
.em-site-why-cell{position:relative; isolation:isolate; display:flex; align-items:center; gap:18px; text-align:start; padding:12px 16px; transition:transform .3s var(--ease-out);}
.em-site-why-cell::before{content:''; position:absolute; inset-block:0; inset-inline-start:0; inset-inline-end:calc(-1 * var(--em-site-why-strip)); background:var(--em-site-why-strip-grad); opacity:0; transition:opacity .35s var(--ease-out); z-index:-1; pointer-events:none;}   /* полоса света от значка к краю экрана, а не коробка по ширине колонки; направление градиента физическое — сайт только справа налево */
.em-site-why-cell:is(:hover, :focus-visible){transform:translateX(var(--em-site-why-slide));}
.em-site-why-cell:is(:hover, :focus-visible)::before{opacity:1;}   /* строка со страницей услуги — ссылка: клавиатура получает тот же отклик, что мышь */
.em-site-why-ic{flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--em-site-why-ic); height:var(--em-site-why-ic); border-radius:50%; border:1px solid var(--em-on-brand-border); background:transparent; color:#fff; font-size:24px; transition:background .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);}
.em-site-why-cell:is(:hover, :focus-visible) .em-site-why-ic{background:var(--em-site-accent); border-color:transparent; color:var(--em-brand-deep); transform:scale(1.06); box-shadow:0 0 0 8px var(--em-site-accent-16);}
.em-site-why-body{min-width:0;}
.em-site-why-cell b{display:block; font-family:var(--em-site-font); font-size:19px; color:#fff; transition:color .3s var(--ease-out);}
.em-site-why-cell:is(:hover, :focus-visible) b{color:var(--em-site-accent);}
.em-site-why-cell .em-site-why-body span{display:block; margin-top:4px; font-size:14px; line-height:1.55; color:var(--em-site-white-85);}

/* ── Полоса «בין לקוחותינו» (Сборки 333–335): учреждения-клиенты под блоком «איכות ושירות». Заголовок — канон витрины;
   логотипы в одну ленту между двумя тонкими линиями, ячейки разделены вертикальной чертой. Знак серый и оживает при наведении ── */
.em-site-trusted{padding:64px 0 0;}   /* снизу воздух даёт верхнее поле следующего блока витрины */
.em-site-trusted-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); border-block:1px solid var(--em-site-line);}
.em-site-trusted-card{display:flex; align-items:center; justify-content:center; gap:16px; height:var(--em-site-trusted-cell); padding:0 24px; color:var(--em-site-dark);}
.em-site-trusted-card + .em-site-trusted-card{border-inline-start:1px solid var(--em-site-line);}
.em-site-trusted-card b{font-family:var(--em-site-font); font-size:18px; font-weight:700;}
.em-site-trusted-ic{flex:none; display:inline-grid; place-items:center; width:var(--em-site-trusted-ic); height:var(--em-site-trusted-ic); border-radius:50%; background:var(--em-site-primary); color:#fff; font-size:20px;}
.em-site-trusted-card img{max-height:var(--em-site-trusted-logo); max-width:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .35s var(--ease-out), opacity .35s var(--ease-out), transform .35s var(--ease-out);}
.em-site-trusted-card:is(:hover, :focus-visible) img{filter:none; opacity:1; transform:scale(1.06);}
.em-site-numbers{background:var(--em-site-soft); padding:64px 0;}
.em-site-numrow{display:grid; grid-template-columns:repeat(4, 1fr); gap:27px;}
.em-site-num{text-align:center;}
.em-site-num b{display:block; font-family:var(--em-site-font); font-size:44px; font-weight:700; color:var(--em-site-primary);}
.em-site-num span{display:block; margin-top:var(--em-gap-row); font-size:15px; color:var(--em-site-text);}

.em-site-reviews{display:grid; grid-template-columns:repeat(3, 1fr); gap:27px;}
.em-site-review{margin:0; background:#fff; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); padding:30px;}
.em-site-review-stars{color:var(--em-site-accent); font-size:14px; letter-spacing:2px;}
.em-site-review blockquote{margin:14px 0 0; font-size:15px; color:var(--em-site-text); line-height:1.7;}
.em-site-review figcaption{margin-top:16px; font-weight:700; color:var(--em-site-dark);}

/* витрина — планшет и телефон */
@media (max-width:1240px){
    .em-site-footer-grid.is-five{grid-template-columns:repeat(3, 1fr);}   /* пять колонок подвала на средней ширине — по три в ряд */
    :root{--em-site-wrap: calc(100% - 40px);}
    .em-site-hero-cards{inset-inline-start:520px;}
    .em-site-hero-ctrl{inset-inline-start:520px;}
    .em-site-hero-text{inset-inline-start:0; width:420px;}
    .em-site-hero{--em-site-hero-size:118px;}
    .em-site-hero-progress{inset-inline-start:760px; inset-inline-end:100px;}
    .em-site-menu{gap:28px; margin-inline-end:24px;}
    :root{--em-site-catpanel-cols: 2;}   /* две колонки: контейнер сузился */
    .em-site-car-arrow.is-prev{inset-inline-start:-10px;}
    .em-site-car-arrow.is-next{inset-inline-end:-10px;}
    .em-site-grid{grid-template-columns:repeat(3, 1fr);}
    .em-site-pd-grid{grid-template-columns:100px 1fr; gap:20px;}
    :root{--em-site-collage-w: 420px; --em-site-collage-num: 52px; --em-site-collage-label: 16px; --em-site-collage-name: 19px;}   /* колонка сузилась */
    .em-site-pd-info{grid-column:1 / -1;}
}
@media (max-width:900px){
    .em-site-darkrow.is-trio .em-site-wrap{grid-template-columns:1fr 1fr;}   /* широкий баннер — строкой над двумя узкими */
    .em-site-dark.is-cover.is-wide{grid-column:1 / -1;}
    .em-site-dark.is-cover > div{padding:calc(var(--em-site-promo-pad) * .6);}
    :root{--em-site-card-w: 150px; --em-site-card-h: 230px; --em-site-card-gap: 16px;}
    .em-site-menu{display:none;}
    .em-site-burger{display:grid; margin-inline-start:4px;}
    /* Шапка на телефоне и планшете (решение владельца 18.09.2026): в ряду остаются язык,
       поиск, корзина и кнопка меню. Название компании уходит — остаётся знак; избранное
       и кабинет уходят тоже: они и так стоят пунктами в самом меню. До этого ряд значков
       не помещался и наезжал на логотип: нужно 397 точек при 320 на экране 360. */
    .em-site-nav .em-site-logo.has-icon span{display:none;}
    .em-site-nav-tools .is-fav{display:none;}
    /* Кабинет в шапке остаётся (решение владельца 18.09.2026): у вошедшего — один знак без приветствия */
    .em-site-nav-tools .em-site-user-btn span{display:none;}
    .em-site-nav-tools .em-site-user-btn{width:36px; padding:0;}
    /* Меню скрыто, поэтому ряд значков прижимается к своему краю; шаг между значками меньше —
       при шаге 22 ряд не помещался на экране 360 и вылезал за край на 20 точек (замер 19.09.2026) */
    .em-site-nav-tools{margin-inline-start:auto; gap:14px;}
    /* Логотип прижимался к самому краю: поле только со своей стороны — ряд значков у другого
       края и так тесный (решение владельца 19.09.2026) */
    .em-site-nav{padding-inline-start:calc(var(--em-site-nav-pad-sm) - 20px);}
    .em-site-nav.is-open .em-site-mobile-menu{display:flex; flex-direction:column; position:absolute; top:100%; inset-inline:0; background:var(--em-site-dark); padding:var(--em-pad-y-lg) 20px 16px;}
    .em-site-mobile-menu a{padding:12px 0; border-bottom:1px solid var(--em-site-white-20); color:#fff; font-size:16px;}
    /* Панель под шапкой на телефоне не показывается: её место — аккордеон в меню */
    .em-site-catpanel{display:none;}
    .em-site-mobile-cat{display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 0; border-bottom:1px solid var(--em-site-white-20); color:#fff; font-size:16px; text-align:start;}
    .em-site-mobile-cat i{transition:transform .2s var(--ease-out);}
    .em-site-mobile-cat[aria-expanded="true"] i{transform:rotate(180deg);}
    .em-site-mobile-cat[aria-expanded="true"] + .em-site-mobile-catlist{display:flex;}
    .em-site-mobile-catlist{flex-direction:column; padding-inline-start:var(--em-site-catpanel-pad);}
    .em-site-mobile-catlist a{display:flex; align-items:center; justify-content:space-between; padding:var(--em-gap-row-lg) 0; border-bottom:1px solid var(--em-site-white-20); color:#fff; font-size:15px;}
    .em-site-mobile-catlist a small{color:var(--em-site-white-92);}   /* 45% белого давал 4,34 при норме 4,5 */
    .em-site-searchlay-form{width:80%;}   /* доля образца на узком экране */
    /* Корзина на телефоне (П.58): одна колонка, строка товара — фото, имя во всю ширину, ниже цена · количество · сумма */
    .em-site-cart-grid{grid-template-columns:1fr;}
    .em-site-cart-item{grid-template-columns:64px 1fr 36px; grid-template-areas:"img name del" "img price del" "img qty del" "img total del"; gap:12px 14px;}
    .em-site-cart-img{grid-area:img; width:64px; height:64px;}
    .em-site-cart-name{grid-area:name;}
    .em-site-cart-price{grid-area:price;}
    .em-site-cart-qty{grid-area:qty; width:max-content;}
    .em-site-cart-total{grid-area:total;}
    .em-site-cart-del{grid-area:del;}
    .em-site-pd-actions{grid-template-columns:1fr 1fr;}
    .em-site-pd-actions .em-site-cart-qty{grid-column:1 / -1; width:100%;}
    .em-site-pd-actions .em-site-cart-qty input{flex:1;}
    .em-site-pd-tiles{grid-template-columns:1fr 1fr;}
    .em-site-pd-trust{grid-template-columns:1fr 1fr;}
    /* Кабинет вошедшего на телефоне виден знаком (решение владельца 18.09.2026);
       имя не показывается — оно осталось пунктом в мобильном меню. Выпадашка
       считается от контейнера шапки, а не от самого знака: знак стоит посередине ряда,
       и от него плашка в 220 точек уходила за край экрана на 102 точки. */
    .em-site-nav-tools .em-site-user{position:static;}
    .em-site-nav-tools .em-site-user-menu{top:calc(100% + var(--em-gap-row)); inset-inline-end:0; inset-inline-start:auto;}
    .em-site-portal{grid-template-columns:1fr;}
    .em-site-auth-pair{grid-template-columns:1fr;}
    .em-site-auth-card, .em-site-auth-card.is-wide{grid-template-columns:1fr;} /* на узком экране форма сверху, панель под ней */
    .em-site-auth-main, .em-site-auth-side{padding:var(--em-site-contact-pad) var(--em-page-pad);}
    .em-site-portal-row{grid-template-columns:1fr 1fr; gap:var(--em-gap-row) 12px;}
    .em-site-portal-row.is-doc{grid-template-columns:1fr 1fr;}
    .em-site-fav-head{display:none;}
    .em-site-fav-row{grid-template-columns:1fr auto; gap:12px;}
    .em-site-fav-row .em-site-cart-price{grid-column:1;}
    .em-site-searchlay .em-site-searchlay-close{right:16px;}
    .em-site-nav.is-sticky, .em-site-nav.is-dark{padding-block:0; padding-inline:var(--em-site-nav-pad-sm) 20px;}
    .em-site-hero{height:auto; min-height:100svh;}   /* svh, а не vh: адресная строка телефона меняет vh прямо во время прокрутки */
    .em-site-hero-wrap{display:flex; flex-direction:column;}
    .em-site-hero-text{position:relative; top:auto; inset-inline-start:auto; width:auto; padding:110px 4px 0;}
    .em-site-hero{--em-site-hero-size:76px;}
    .em-site-hero-desc{max-width:none;}
    .em-site-hero-cards{position:relative; top:auto; inset-inline-start:auto; margin:36px 4px 0;}
    .em-site-hero-ctrl{position:relative; top:auto; inset-inline:auto; margin:28px 4px 90px;}
    .em-site-hero-progress{margin-inline-start:var(--em-shift);}
    .em-site-hero-counter{padding:0; height:auto;}
    .em-site-quad{grid-template-columns:1fr 1fr; margin-top:-40px;}
    .em-site-quad-cell{aspect-ratio:auto; min-height:290px;}
    .em-site-section{padding:44px 0;}
    .em-site-sec-head h2{font-size:34px;}
    .em-site-grid{grid-template-columns:repeat(2, 1fr); gap:24px 14px;}
    .em-site-numrow, .em-site-reviews{grid-template-columns:repeat(2, 1fr);}
    /* Планшет и телефон: снимок над списком, список в одну колонку */
    /* Планшет: фигура остаётся сбоку от списка, как на широком экране (решение владельца
       19.09.2026). Жест горизонтальный, и работает он только рядом со строками; на телефоне
       ниже фигура снимается совсем. Промежуток уже, поэтому ноги фигуры сажаются на нижний
       край полосы, а над полосой остаётся ровно то, что не поместилось */
    .em-site-why{gap:28px;}
    .em-site-why.is-flat .em-site-why-list{grid-template-columns:1fr;}
    .em-site-why-photo img{top:auto; bottom:0; height:calc(100% + var(--em-site-why-rise)); object-position:bottom;}
    .em-site-prod-img{height:250px;}
    .em-site-car-track .em-site-prod{width:calc((100% - 27px) / 2);}
    .em-site-car-arrow{display:none;}
    .em-site-urgent .em-site-wrap{flex-wrap:wrap;}
    .em-site-urgent .em-site-btn{margin-inline-start:0;}
    .em-site-urgent{padding:52px 0;}
    .em-site-urgent small{font-size:18px;}
    .em-site-urgent b{font-size:28px;}
    /* Телефон: фотография сверху, карточка на всю ширину */
    .em-site-contact{padding:44px 0;}
    .em-site-contact .em-site-wrap{grid-template-columns:1fr; gap:20px;}
    /* Коллаж тянется по колонке, а не держит свою ширину: на экране 320 заданная ширина
       растягивала колонку до 340 и страница ехала вбок (замер 19.09.2026) */
    .em-site-collage{width:100%; max-width:var(--em-site-collage-w);}
    :root{--em-site-collage-w: 340px; --em-site-collage-num: 42px; --em-site-collage-label: 13px; --em-site-collage-name: 16px; --em-site-collage-shift: 10px;}   /* блоки в столбец */
    .em-site-contact-card{padding:26px 22px 30px;}
    .em-site-contact h2{font-size:30px;}
    .em-site-darkrow .em-site-wrap{grid-template-columns:1fr;}
    /* Телефон: блоки в столбец, фотография сверху — половины становятся строками */
    .em-site-dark{grid-template-columns:1fr; grid-template-rows:auto auto; height:auto; align-items:stretch;}
    .em-site-dark img{grid-column:1; grid-row:1; height:200px;}
    .em-site-dark > div{grid-column:1; grid-row:2; padding:26px var(--em-site-promo-pad) 30px;}
    .em-site-dark b{font-size:30px;}
    /* Телефон и планшет: подвал в одну колонку, и всё его содержимое стоит по центру —
       логотип, текст, ссылки, новинки, контакты, кнопка и значки соцсетей над подвалом
       (решение владельца 19.09.2026). В колонке шириной в экран левый прижим читается
       как незаконченная вёрстка */
    /* Лента учреждений на телефоне и планшете: вместо таблицы с чертами — ровные карточки
       в два ряда с полем и скруглением, логотип не выше 52 точек. Черты внутри ленты на
       узком экране читались как обрывки таблицы, а круглые знаки перевешивали надписи
       (решение владельца 19.09.2026) */
    .em-site-trusted-row{grid-template-columns:1fr 1fr; border-block:0; gap:12px;}
    .em-site-trusted-card{height:var(--em-site-trusted-cell-sm); padding:0 18px; border:1px solid var(--em-site-line); border-radius:var(--em-site-radius); background:var(--em-site-card);}
    .em-site-trusted-card img{max-height:var(--em-site-trusted-logo-sm);}
    .em-site-footer-grid, .em-site-footer-grid.is-five{grid-template-columns:1fr; gap:30px;}
    .em-site-footer-grid > div{text-align:center;}
    .em-site-footer .em-site-logo.is-dark{justify-content:center;}
    .em-site-footer-about{max-width:none;}   /* предел ширины снят: в колонке во весь экран он прижимал абзац к краю, а авто-поля при незаданной ширине обнуляются */   /* ширина по содержимому: при auto-ширине авто-поля обнуляются и остаток уходит в один край */
    .em-site-footer-links li{justify-content:center;}
    .em-site-footer-contact li{justify-content:center;}
    .em-site-footer-new{justify-content:center; text-align:start;}   /* строка новинки: снимок и подпись рядом, подпись читается от своего края */
    .em-site-subs .em-site-wrap{justify-content:center;}
    .em-site-subs-soc{justify-content:center;}
    .em-site-pd-grid{grid-template-columns:1fr;}
    .em-site-pd-thumbs{grid-template-columns:repeat(3, 1fr); order:2;}
    .em-site-pd-main{height:320px;}
    .em-site-cat-layout{grid-template-columns:1fr;}
    .em-site-cat-side{order:1;}   /* на телефоне колонка отбора под товарами (в одной колонке порядок — по DOM) */
    .em-site-grid.is-cat{grid-template-columns:repeat(2, 1fr);}
    /* Вид списком — всегда один товар в ряд: правило каталога весит столько же и стояло ниже,
       поэтому на планшете список шёл в две колонки (замер 19.09.2026) */
    .em-site-grid.is-cat.is-list{grid-template-columns:1fr;}
    .em-site-grid.is-list .em-site-prod{grid-template-columns:120px 1fr; gap:14px;}
    .em-site-grid.is-list .em-site-prod-img{height:120px;}
    /* Телефон и планшет, все карточки товара витрины: кружки действий ложатся строкой по центру
       под товаром. На сенсорном экране наведения нет, и столбиком поверх снимка они висят
       постоянно — закрывают треть товара; в виде списком они к тому же занимали 187 точек
       при высоте снимка 120 и вылезали из карточки (замер 19.09.2026, решение владельца) */
    .em-site-prod .em-site-acts{position:static; grid-column:1 / -1; flex-direction:row; justify-content:center; gap:12px; margin-top:var(--em-gap-row-lg);}
    /* Кружки стоят отдельной строкой, а не поверх снимка, поэтому видны всегда — и там, где мышь есть */
    .em-site-prod .em-site-acts button, .em-site-prod .em-site-acts .em-site-acts-view{opacity:1; visibility:visible; transform:none;}
    .em-site-set-row{flex-wrap:wrap;}
}
@media (max-width:480px){
    .em-site-darkrow.is-trio .em-site-wrap{grid-template-columns:1fr;}   /* телефон: баннеры столбцом */
    .em-site-dark.is-cover{height:var(--em-site-promo-h-sm);}
    .em-site-grid{grid-template-columns:1fr;}
    /* Каталог на телефоне — один товар в ряд (решение владельца 19.09.2026). Правило каталога
       весит два класса и перебивало общее правило выше, поэтому товары оставались по два
       в ряд шириной 173 точки: имя ломалось, цена и кружки действий налезали на снимок */
    .em-site-grid.is-cat{grid-template-columns:1fr;}
    /* Телефон: в ленте одна карточка за пролистывание. По две карточка выходила 161 точку —
       ряд кружков под товаром (196) в неё не помещался (решение владельца 19.09.2026) */
    .em-site-car-track .em-site-prod{width:100%;}
    /* Телефон: плитки во всю ширину экрана и с наездом на карусель — как на широком экране
       (решение владельца 19.09.2026). До этого они стояли в рамке 20 точек и не наезжали */
    .em-site-quad{grid-template-columns:1fr; width:100%; max-width:none; margin-top:-40px;}
    .em-site-band h1, .em-site-band-title{font-size:30px;}
    .em-site-crumbs{font-size:15px;}
    /* Высота плитки на телефоне — по образцу; до этого она задавалась содержимым и выходила ниже */
    .em-site-quad-cell{aspect-ratio:auto; min-height:var(--em-site-quad-h-sm); padding:var(--em-site-quad-pad);}   /* поле было 10 точек по краям — текст прилипал к краю экрана */
    .em-site-numrow, .em-site-reviews{grid-template-columns:1fr;}
    .em-site-prod-img{height:300px;}
}
@media (max-width:640px){
    /* Телефон и узкий планшет: фигура снимается. Жест «подаю то, что слева» работает только
       рядом со строками; в одну колонку он указывает в пустое поле, а сама фигура занимает
       весь первый экран полосы. Своя граница 640: при более узкой полосе колонка фигуры
       становится шире колонки списка (решение владельца 19.09.2026) */
    .em-site-why-photo{display:none;}
    .em-site-why{grid-template-columns:1fr; gap:0; min-height:0;}
    .em-site-why-list{min-height:0; padding:38px 0;}
    .em-site-section.is-why{margin:var(--em-site-why-gap) 0 0; clip-path:none;}   /* фигуры нет — воздуха над полосой под голову тоже не нужно */
}
@media (hover: none){
    .em-site-trusted-card img{filter:none; opacity:1;}   /* на сенсорном экране наведения нет — логотипы сразу в цвете */
    .em-site-acts button, .em-site-acts-view{opacity:1; visibility:visible; transform:none;} /* без visibility кружки на экране без наведения не показывались вовсе (Сборка 304) */
    .em-site-prod:hover .em-site-prod-img img.is-main{opacity:1;}
    .em-site-prod:hover .em-site-prod-img img.is-alt{opacity:0;}
    .em-site-hero-card:hover{transform:none;}
    /* На сенсорном экране наведения нет, и подсказка не показывается никогда, а место
       занимает: плашка у крайней кнопки выходила за край страницы, и страницу можно было
       сдвинуть вбок — отсюда белая полоса у края (замер на бою 19.09.2026: тело 405 при
       окне 393; со снятыми подсказками — 393 ровно). Подпись для чтения с экрана
       остаётся в aria-label, поэтому доступность не страдает. */
    .em-site .em-tip::after{content:none;}
}
@media (prefers-reduced-motion: reduce){
    .em-site-fade{opacity:1; transform:none;}
    .em-site-hero-timer{display:none;}
    .em-site-acts button, .em-site-acts-view{opacity:1; visibility:visible; transform:none;} /* без visibility кружки на экране без наведения не показывались вовсе (Сборка 304) */
    .em-site-prod:hover .em-site-prod-img img{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Заставка загрузки витрины (решение владельца 19.09.2026): кардиолиния
   монитора рисуется по мере готовности страницы, под ней полоса и число.
   Снимается скриптом; если скрипт не работает вовсе — снимается правилом через
   5 секунд, поэтому сайт не может остаться закрытым.
   ═══════════════════════════════════════════════════════════════════════════ */
.em-site-boot{position:fixed; inset:0; z-index:110; display:grid; place-items:center; background:var(--em-site-why-grad); animation:em-site-boot-off .4s var(--ease-out) 5s forwards;}
.em-site-boot.is-off{display:none;}   /* повторный заход в тот же сеанс: заставка не показывается вовсе */
.em-site-boot.is-done{opacity:0; visibility:hidden; transition:opacity .45s var(--ease-out), visibility .45s var(--ease-out);}
.em-site-boot-in{display:flex; flex-direction:column; align-items:center; width:min(var(--em-site-boot-w), calc(100% - 40px));}
.em-site-boot-logo{height:var(--em-site-boot-logo); width:auto; margin-bottom:var(--em-site-boot-gap);}
.em-site-boot-ecg{display:block; width:100%; height:var(--em-site-boot-ecg-h);}
.em-site-boot-ecg path{fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.em-site-boot-ecg .is-track{stroke:var(--em-site-white-20);}
.em-site-boot-ecg .is-live{stroke:var(--em-site-accent);}
.em-site-boot-bar{position:relative; width:100%; height:var(--em-site-boot-bar); margin-top:var(--em-site-boot-gap); border-radius:999px; background:var(--em-site-white-20); overflow:hidden;}
.em-site-boot-bar i{position:absolute; inset-block:0; left:0; width:0; border-radius:999px; background:var(--em-site-accent); transition:width .25s var(--ease-out);}   /* полоса идёт слева направо, как сама кардиолиния: сторона физическая, направление письма тут ни при чём */
.em-site-boot-num{margin-top:var(--em-gap-row-lg); font-family:var(--em-site-font); font-size:16px; font-weight:700; color:#fff;}
@keyframes em-site-boot-off{to{opacity:0; visibility:hidden;}}

/* Сниженная анимация: линия не догоняет готовность плавно, а встаёт сразу */
@media (prefers-reduced-motion: reduce){
    .em-site-boot-ecg .is-live{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВХОД (П.34, Сборка 131) — экран входа в панель. Самостоятельная страница.
   Все цвета и размеры — токены :root ниже; в разметке ни одного числа.
   Прежний блок «Вход в систему» выше не тронут: его классы использует
   публичная заявка регистрации клиента (.login-card.cl-reg-card).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
    --em-login-panel-w: 46%;
    --em-login-panel-w-md: 40%;
    --em-login-card-w: 420px;
    --em-login-mark: 150px;
    --em-login-mark-md: 120px;
    --em-login-mark-sm: 52px;
    --em-login-field-h: 46px;
    --em-login-btn-h: 50px;
    --em-login-icon: 46px;
    --em-login-dot-area: 150px;
    --em-login-curtain: .8s;         /* ход занавеса: панель растёт, половина карточки схлопывается */
    --em-login-curtain-delay: .35s;  /* занавес начинается после того, как карточка растаяла */
    --em-login-grad-panel: linear-gradient(160deg, var(--em-brand-blue) 0%, var(--em-brand-deep) 100%);
    --em-login-grad-btn: linear-gradient(135deg, var(--em-brand-blue) 0%, var(--em-brand-deep) 100%);
    /* Плёнка поверх фото: плотнее в зоне знака и текста, чтобы белый держал 4,5 даже над светлым кадром */
    --em-login-film: linear-gradient(160deg, rgba(0,69,122,.55) 0%, rgba(0,55,96,.82) 45%, rgba(0,55,96,.75) 100%);
    --em-login-dots: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
    --em-login-wave-1: rgba(255,255,255,.07);
    --em-login-wave-2: rgba(255,255,255,.05);
    --em-login-glass: rgba(255,255,255,.14);
    --em-login-glass-line: rgba(255,255,255,.22);
    --em-login-page-off: rgba(255,255,255,.75);  /* непройденные номера пейджера и версия: 55% из ТЗ давали 3,41 над светлым кадром, 75% дают 4,89 */
    --em-login-ink: #0b2a44;
    --em-login-gray: #5c6b78;
    --em-login-line: var(--em-border-input);  /* рамка поля — та же, что у всех полей панели: тон #dce7e5 из ТЗ давал на белом 1,26 */
    --em-login-ring: rgba(0,69,122,.14);
    --em-login-shadow-card: 0 24px 64px rgba(0,69,122,.14);
    --em-login-shadow-btn-hi: 0 12px 26px rgba(0,69,122,.4);
}

.em-lp{margin:0; min-height:100vh; display:flex; background:#fff; font-family:var(--em-font); color:var(--em-login-ink);}

/* ── Правая половина: карточка входа ── */
.em-lp-side{flex:1; display:flex; align-items:center; justify-content:center; padding:32px 24px;}
.em-lp-card{width:100%; max-width:var(--em-login-card-w); background:#fff; border-radius:var(--em-site-radius); box-shadow:var(--em-login-shadow-card); padding:40px 36px;}
.em-lp-title{font-size:24px; font-weight:800; line-height:1.2; color:var(--em-login-ink);}
.em-lp-sub{font-size:13.5px; color:var(--em-login-gray); margin-top:4px; margin-bottom:22px;}
.em-lp-group{margin-bottom:14px;}
.em-lp-group label{display:block; font-size:13px; font-weight:700; color:var(--em-login-gray); margin-bottom:var(--em-gap-row);}
.em-lp-field{position:relative; display:flex; align-items:center;}
.em-lp-field > i{position:absolute; inset-inline-start:14px; color:var(--em-login-gray); font-size:14px; pointer-events:none;}
.em-lp-field input{
    width:100%; height:var(--em-login-field-h);
    padding-inline-start:40px; padding-inline-end:44px;
    border:1px solid var(--em-login-line); border-radius:var(--em-site-radius);
    background:#fff; color:var(--em-login-ink);
    font-family:inherit; font-size:15px; outline:none;
    transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.em-lp-field input:focus{border-color:var(--em-brand-blue); box-shadow:0 0 0 3px var(--em-login-ring);}
.em-lp-eye{
    position:absolute; inset-inline-end:var(--em-inset); width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border:0; background:transparent; color:var(--em-login-gray);
    font-size:14px; cursor:pointer; border-radius:var(--em-site-radius);
    transition:color .15s var(--ease-out);
}
.em-lp-eye:hover{color:var(--em-brand-blue);}
.em-lp-row{display:flex; align-items:center; justify-content:space-between; gap:var(--em-gap-row); margin:14px 0 18px; flex-wrap:wrap;}
.em-lp-check{display:flex; align-items:center; gap:var(--em-gap-row); font-size:13px; color:var(--em-login-gray); cursor:pointer;}
.em-lp-check input{width:16px; height:16px; accent-color:var(--em-brand-blue);}
.em-lp-forgot{border:0; background:transparent; font-family:inherit; font-size:13px; font-weight:700; color:var(--em-brand-blue); cursor:pointer; padding:0;}
.em-lp-hint{font-size:12.5px; color:var(--em-login-gray); background:var(--em-subtle); border-radius:var(--em-site-radius); padding:var(--em-pad-y-lg) 12px; margin-bottom:16px; line-height:1.5;}
.em-lp-btn{
    width:100%; height:var(--em-login-btn-h);
    display:flex; align-items:center; justify-content:center; gap:var(--em-gap-row);
    /* рамка прозрачная, а не 0: при наведении она красится мятой, и при box-sizing:border-box
       высота и положение надписи не сдвигаются ни на точку */
    border:1px solid transparent; border-radius:var(--em-site-radius);
    background:var(--em-login-grad-btn); color:#fff;
    font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
    box-shadow:var(--em-site-shadow-btn);   /* та же тень фирменной кнопки, что на витрине — значение написано один раз */
    transition:transform .15s var(--ease-out), box-shadow .2s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* То же правило, что у кнопок на синих плитках витрины (§J.4): заливка мятой,
   надпись глубоким синим. Глубокий синий на мяте — 6,03 при норме 4,5. */
.em-lp-btn:hover{transform:translateY(-1px); box-shadow:var(--em-login-shadow-btn-hi); background:var(--em-accent); border-color:var(--em-accent); color:var(--em-brand-deep);}
.em-lp-btn:active{transform:translateY(-1px) scale(.99);}
.em-lp-btn-spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--em-on-brand-border); border-top-color:#fff; animation:emSpin .8s linear infinite;}
.em-lp-note{text-align:center; font-size:11.5px; color:var(--em-login-gray); margin-top:14px;}
.em-lp-ver-sm{display:none; text-align:center; font-size:11px; color:var(--em-login-gray); margin-top:12px;}

/* ── Левая половина: фирменная панель ── */
.em-lp-panel{
    position:relative; overflow:hidden; flex:0 0 var(--em-login-panel-w);
    background:var(--em-login-grad-panel);
    display:flex; align-items:center; justify-content:center;
    color:#fff; padding:40px 32px;
}
.em-lp-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; transition:opacity 1.2s var(--ease-out);}
.em-lp-photo.is-out{opacity:0;}
.em-lp-film{position:absolute; inset:0; background:var(--em-login-film);}
.em-lp-wave{position:absolute; border-radius:50%; pointer-events:none;}
.em-lp-wave-1{width:150%; padding-top:150%; inset-inline-start:-30%; bottom:-95%; background:var(--em-login-wave-1);}
.em-lp-wave-2{width:110%; padding-top:110%; inset-inline-end:-25%; bottom:-70%; background:var(--em-login-wave-2);}
.em-lp-dots{position:absolute; top:0; inset-inline-end:0; width:var(--em-login-dot-area); height:var(--em-login-dot-area); background:var(--em-login-dots); background-size:16px 16px;}
.em-lp-inner{position:relative; width:100%; max-width:var(--em-login-card-w); text-align:center;}
.em-lp-mark{
    width:var(--em-login-mark); height:var(--em-login-mark); margin:0 auto;
    background:var(--em-accent);
    -webkit-mask:var(--em-logo-mask) center/contain no-repeat;
    mask:var(--em-logo-mask) center/contain no-repeat;
    animation:emLpBreathe 6s var(--ease-in-out) infinite;
}
@keyframes emLpBreathe{
    0%, 100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-6px) scale(1.03);}
}
.em-lp-word{font-size:30px; font-weight:800; line-height:1.15; margin-top:14px;}
.em-lp-tag{display:none; font-size:12px; color:var(--em-on-brand-dim);}
.em-lp-slider{position:relative; margin-top:18px; min-height:74px;}
.em-lp-slide{position:absolute; inset:0; font-size:15.5px; line-height:1.6; color:var(--em-on-brand-dim); opacity:0; transform:translateY(6px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.em-lp-slide.is-on{opacity:1; transform:translateY(0);}
.em-lp-pager{display:flex; align-items:center; justify-content:center; gap:var(--em-gap-row-lg); margin-top:var(--em-block-gap);}
.em-lp-page{display:flex; align-items:center; gap:var(--em-gap-row); border:0; background:transparent; padding:0; cursor:pointer;}
.em-lp-page-n{font-size:13px; font-weight:700; color:var(--em-login-page-off); transition:color .3s var(--ease-out), transform .3s var(--ease-out);}
.em-lp-page.is-on .em-lp-page-n{color:#fff; transform:scale(1.12);}
.em-lp-page-line{position:relative; width:44px; height:var(--em-hair); background:var(--em-login-glass-line); overflow:hidden;}
.em-lp-page-line span{position:absolute; inset:0; inset-inline-end:auto; width:0; background:#fff;}
.em-lp-page.is-done .em-lp-page-line span{width:100%;}
.em-lp-page.is-on .em-lp-page-line span{width:100%; transition:width 4.5s linear;}
.em-lp-icons{display:flex; align-items:flex-start; justify-content:center; gap:var(--em-block-gap); margin-top:26px;}
.em-lp-ico{flex:1; max-width:110px;}
.em-lp-ico i{
    width:var(--em-login-icon); height:var(--em-login-icon); margin:0 auto var(--em-gap-row);
    display:flex; align-items:center; justify-content:center;
    background:var(--em-login-glass); border:1px solid var(--em-login-glass-line);
    border-radius:var(--em-site-radius); font-size:16px;
}
.em-lp-ico span{display:block; font-size:12px; color:var(--em-on-brand-dim); line-height:1.3;}
.em-lp-ver{position:absolute; bottom:16px; inset-inline-start:20px; font-size:11px; color:var(--em-login-page-off);}

/* ── Занавес при входе (§5 ТЗ): карточка уходит, панель раздвигается, знак гаснет ── */
.em-lp-go .em-lp-card{transform:translateY(18px) scale(.96); opacity:0; transition:transform .55s var(--ease-out), opacity .55s var(--ease-out);}
.em-lp-go .em-lp-panel{flex-basis:100%; transition:flex-basis var(--em-login-curtain) var(--ease-in-out) var(--em-login-curtain-delay);}
/* Половина карточки схлопывается вместе с ростом панели (Сборка 154): раньше она оставалась
   в раскладке со своими полями 24+24 и держала справа белую полосу 48 точек до отправки формы. */
.em-lp-go .em-lp-side{min-width:0; min-height:0; padding:0; overflow:hidden; transition:padding var(--em-login-curtain) var(--ease-in-out) var(--em-login-curtain-delay);}
/* Рост (flex:1) у половины остаётся: пока карточка тает (0,55 с), половина ещё широкая;
   свободное место уходит само по мере роста панели до 100 %, поля — тем же ходом до нуля. */
html.standalone body.em-lp-go{overflow:hidden;}  /* вес выше html.standalone body{overflow:auto} */
.em-lp-go .em-lp-word, .em-lp-go .em-lp-slider, .em-lp-go .em-lp-pager,
.em-lp-go .em-lp-icons, .em-lp-go .em-lp-ver, .em-lp-go .em-lp-photo,
.em-lp-go .em-lp-wave, .em-lp-go .em-lp-dots{opacity:0; transition:opacity .35s var(--ease-out);}
.em-lp-go .em-lp-mark{animation:emLpPulse .9s var(--ease-out) .4s forwards;}
@keyframes emLpPulse{
    0%{transform:scale(1); opacity:1;}
    25%{transform:scale(1.18); opacity:1;}
    100%{transform:scale(1.18); opacity:0;}
}

/* ── Планшет ── */
@media (max-width:979px){
    .em-lp-panel{flex-basis:var(--em-login-panel-w-md); padding:32px 20px;}
    .em-lp-mark{width:var(--em-login-mark-md); height:var(--em-login-mark-md);}
    .em-lp-word{font-size:26px;}
    .em-lp-card{padding:28px 26px;}
    .em-lp-icons{gap:var(--em-gap-row);}
}

/* ── Телефон: панель становится шапкой, фото и слайдер не показываются ── */
@media (max-width:759px){
    .em-lp{flex-direction:column;}
    .em-lp-panel{order:-1; flex:none; padding:16px var(--em-page-pad); justify-content:flex-start;}
    .em-lp-inner{display:flex; align-items:center; gap:var(--em-gap-row-lg); text-align:start; max-width:none;}
    .em-lp-mark{width:var(--em-login-mark-sm); height:var(--em-login-mark-sm); margin:0; animation:none;}
    .em-lp-word{font-size:19px; margin-top:0;}
    .em-lp-tag{display:block;}
    .em-lp-photo, .em-lp-slider, .em-lp-pager, .em-lp-icons, .em-lp-ver, .em-lp-dots, .em-lp-wave{display:none;}
    .em-lp-side{padding:20px var(--em-page-pad) 28px;}
    .em-lp-card{max-width:none; box-shadow:none; padding:24px 0 0;}
    .em-lp-ver-sm{display:block;}
    .em-lp-go .em-lp-panel{flex:1 1 auto; min-height:100vh; transition:min-height var(--em-login-curtain) var(--ease-in-out) var(--em-login-curtain-delay);}
}

/* ── Сниженная анимация: занавеса нет, дыхание знака выключено ── */
@media (prefers-reduced-motion: reduce){
    .em-lp-mark{animation:none !important;}
    .em-lp-go .em-lp-card, .em-lp-go .em-lp-panel, .em-lp-go .em-lp-side{transition:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЗАНАВЕС ПАНЕЛИ (П.34.6, Сборка 132) — первый показ после входа.
   Слой рисуется в первой отрисовке: файл темы со знаком и этот файл подключены
   блокирующими ссылками в <head> (канон §0.1), поэтому строк стиля в шаблоне нет.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
    --em-dh-z: 2000;
}
.em-dh-veil{
    position:fixed; inset:0; z-index:var(--em-dh-z);
    background:var(--em-login-grad-panel);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    animation:emDhVeil .7s var(--ease-out) .5s forwards;
}
.em-dh-mark{
    width:var(--em-login-mark); height:var(--em-login-mark);   /* тот же знак, что на экране входа — размер написан один раз */
    background:var(--em-accent);
    -webkit-mask:var(--em-logo-mask) center/contain no-repeat;
    mask:var(--em-logo-mask) center/contain no-repeat;
    animation:emDhMark .5s var(--ease-out) .3s forwards;
}
@keyframes emDhVeil{to{opacity:0; visibility:hidden;}}
@keyframes emDhMark{to{transform:scale(.9); opacity:0;}}

/* Плитки показателей дашборда входят волной справа налево (шаг 80 мс) */
.em-dh-enter .em-stat-row .em-stat{animation:emDhTile .5s var(--ease-out) backwards;}
.em-dh-enter .em-stat-row .em-stat:nth-child(1){animation-delay:.6s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(2){animation-delay:.68s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(3){animation-delay:.76s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(4){animation-delay:.84s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(5){animation-delay:.92s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(6){animation-delay:1s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(7){animation-delay:1.08s;}
.em-dh-enter .em-stat-row .em-stat:nth-child(8){animation-delay:1.16s;}
/* Заливка backwards, а не forwards: иначе конечный кадр закрепил бы transform
   на плитке навсегда и подъём при наведении перестал бы работать */
@keyframes emDhTile{from{opacity:0; transform:translateY(14px);}}

/* Телефон: слой уходит сверху вниз */
@media (max-width:759px){
    .em-dh-veil{animation:emDhVeilSm .7s var(--ease-in-out) .5s forwards;}
    @keyframes emDhVeilSm{to{clip-path:inset(100% 0 0 0);}}
}

/* Сниженная анимация: слоя нет, плитки на месте */
@media (prefers-reduced-motion: reduce){
    .em-dh-veil{display:none;}
    .em-dh-enter .em-stat-row .em-stat{animation:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВИТРИНА ПО-АНГЛИЙСКИ — зеркальная раскладка (П.67)
   Сайт набран логическими сторонами, поэтому при dir="ltr" он зеркалится сам.
   Здесь собрано то немногое, что задано физическими сторонами и потому требует пары:
   значение латиницей у начала строки, подсказка сбоку от кружка, стрелки направления.
   Крестик полноэкранного поиска сюда не входит: он стоит у правого края экрана
   физически в обоих языках — так решено при его заведении.
   ═══════════════════════════════════════════════════════════════════════════ */
html[dir="ltr"] input.em-site-ltr{text-align:left;}
html[dir="ltr"] input.em-site-ltr::placeholder{direction:ltr; text-align:left;}
html[dir="ltr"] .em-site-urgent b{text-align:left;}
html[dir="ltr"] .em-site-acts .em-tip::after{right:auto; left:calc(100% + var(--em-gap-row));}
/* Стрелки «вперёд» и «назад»: в иврите вперёд — влево, в английском — вправо.
   Один поворот на все стрелки витрины вместо второго набора значков. */
html[dir="ltr"] .em-site :is(.fa-arrow-left, .fa-arrow-right, .fa-chevron-left, .fa-chevron-right){transform:scaleX(-1);}