/* Новый дизайн клиентской части: шапка, меню телефона, крошки, подвал, верх главной с формой поиска.
   Образец — стенд редизайна (шапка, блок поиска, подвал). Подключается бандлом RedesignAsset
   после site.css и style.css, поэтому их правила перебиваются без !important.
   Больше 800 строк — осознанно (доводка 27.10): это общий слой всех страниц клиента — токены, шапка, подвал, форма
   поиска; разнести его по пакетам — отдельная задача, меняет порядок подключения стилей. */

:root {
    --zt-yellow: #FFB800;
    --zt-yellow-hover: #E8A600;
    --zt-on-yellow: #1A1A1A;
    --zt-ink: #0F141A;
    --zt-ink-soft: #333A43;
    --zt-secondary: #4D5966;
    --zt-muted: #646E79;
    --zt-border: #D4DCE3;
    --zt-divider: #E3E8ED;
    --zt-surface: #F8FAFB;
    /* Выдача поиска (results.css) — цвета стенда: подложка плашек и «Под заказ», мягкий жёлтый, «в наличии», «не найдено» и ошибки */
    --zt-surface-2: #EEF2F5;
    --zt-yellow-soft: #FFF2C7;
    --zt-success: #287A4B;
    --zt-success-soft: #EAF5EE;
    --zt-danger: #963A3A;
    --zt-danger-soft: #FBECEC;
    /* …рамка и подчёркивание при наведении, погашенные текст и подложка, тёмно-жёлтый значок, подложка сообщений сайта */
    --zt-border-hover: #9AA3AD;
    --zt-disabled: #969FA8;
    --zt-disabled-bg: #E5E8EB;
    --zt-yellow-dark: #B07E00;
    --zt-yellow-pale: #FFF8E6;
    /* Охра — мелкий текст и значки на светло-жёлтых подложках, где #FFB800 не виден (DESIGN.md, доводка 27.10) */
    --zt-ochre: #8A6200;
    --zt-font: "Onest", Arial, sans-serif;
    /* Сетка как на стенде: поля 2 % ширины (от 24 до 40 px), содержимое до 1760 px */
    --zt-gutter: clamp(24px, 2vw, 40px);
}

@media (max-width: 640px) {
    :root { --zt-gutter: 30px; }
}

/* Шрифт Onest: site.css задаёт Roboto для html, body и ссылок */
html, body, a { font-family: var(--zt-font); }

/* Подвал прижат к низу окна: на короткой странице нет лишней прокрутки (site.css задаёт body height: 100%) */
.zt-body { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
.zt-body > #vue-app { flex: 1 0 auto; }
/* Абзацы без одного слова на последней строке («статус.», «артикулу.» — доводка 27.10); где не поддерживается — как было */
:where(.zt-body p) { text-wrap: pretty; } /* :where — без веса: скрытые для экрана статусы с nowrap (.zt-results__sr) не переносятся */

.zt-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(1760px + 2 * var(--zt-gutter));
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--zt-gutter);
    padding-left: var(--zt-gutter);
}

.zt-header a, .zt-menu a, .zt-footer a { text-decoration: none; }

/* Фокус с клавиатуры у кнопок и ссылок — графитом (доводка 27.10): жёлтое кольцо пропадало у жёлтых кнопок, вкладки
   и полос логотипа. Так же в остальных стилях клиента; у полей — жёлтая рамка и кольцо (DESIGN.md) */
.zt-header a:focus-visible, .zt-header button:focus-visible, .zt-footer a:focus-visible,
.zt-menu a:focus-visible, .zt-menu button:focus-visible, .zt-crumbs a:focus-visible,
.poisk button:focus-visible, .poisk__dropzone:focus-visible {
    outline: 2px solid var(--zt-ink);
    outline-offset: 2px;
}

/* ---------- Шапка ---------- */

.zt-header {
    padding: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--zt-divider);
    box-shadow: 0 4px 14px rgba(17, 24, 32, .055);
    color: var(--zt-ink);
}

.zt-header svg {
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zt-header .zt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.zt-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 84px;
}

.zt-header__burger { display: none; }

.zt-header__logo { flex: 0 0 204px; display: block; }
.zt-header__logo img { display: block; width: 100%; height: auto; }

.zt-header__search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 19px;
    border: 1px solid var(--zt-yellow);
    border-radius: 8px;
    background: var(--zt-yellow);
    color: var(--zt-on-yellow);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .16px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease;
}
.zt-header__search svg { width: 20px; height: 20px; }
.zt-header__search:hover, .zt-header__search:focus-visible {
    border-color: var(--zt-yellow-hover);
    background: var(--zt-yellow-hover);
    color: var(--zt-on-yellow);
}

.zt-header__phone {
    display: inline-flex;
    align-items: center;
    height: 48px;
    margin-left: auto;
    padding: 0 24px;
    border: 1px solid var(--zt-yellow);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--zt-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .15px;
    white-space: nowrap;
    transition: background-color .18s ease;
}
.zt-header__phone:hover, .zt-header__phone:focus-visible { background: var(--zt-yellow); color: var(--zt-on-yellow); }

.zt-header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 44px;
    border-radius: 8px;
    color: var(--zt-ink-soft);
    transition: color .18s ease;
}
.zt-header__icon svg { width: 27px; height: 27px; }
.zt-header__icon:hover, .zt-header__icon:focus-visible { color: var(--zt-ink); }

.zt-header__badge {
    position: absolute;
    top: 2px;
    left: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: var(--zt-yellow);
    box-shadow: 0 3px 8px rgba(15, 20, 26, .12);
    color: #111820;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
/* Ноль — спокойным серым: жёлтый счётчик — когда в избранном или корзине что-то есть (доводка 27.10; класс ставит
   redesign.js, счётчик меню телефона — в favorites.css) */
.zt-header__badge.is-zero, .zt-menu__count.is-zero { background: var(--zt-surface-2); box-shadow: none; color: var(--zt-muted); }

/* «Ваш менеджер» — значок и две строки; окно с контактами открывает Bootstrap (#zt-manager) */
.zt-header__manager {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 200px;
    height: 48px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--zt-ink-soft);
    text-align: left;
    transition: color .18s ease;
}
.zt-header__manager svg { width: 27px; height: 27px; }
.zt-header__manager:hover { color: var(--zt-ink); }
.zt-header__manager-text { display: flex; flex-direction: column; min-width: 0; }
.zt-header__manager-text small { color: var(--zt-muted); font-size: 11px; line-height: 1.3; }
.zt-header__manager-text strong {
    overflow: hidden;
    color: var(--zt-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zt-header__account {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 222px;
    max-width: 260px;
    min-height: 48px;
    padding: 7px 15px;
    border: 1px solid var(--zt-ink);
    border-radius: 8px;
    background: var(--zt-ink);
    color: #FFFFFF;
    transition: background-color .18s ease;
}
.zt-header__account:hover, .zt-header__account:focus-visible { background: #262D36; color: #FFFFFF; }

.zt-header__account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.zt-header__account-icon svg { width: 17px; height: 17px; }

.zt-header__account-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zt-header__account-text strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.zt-header__account-text small {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, .75);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Уже 1300 px «Ваш менеджер» — один значок, имя — в подсказке */
@media (max-width: 1299.98px) {
    .zt-header__manager { justify-content: center; width: 40px; padding: 0; }
    .zt-header__manager-text { display: none; }
}

/* Ноутбук: строка шапки уже — кнопки компактнее, высота та же 48 px (доводка 27.10: телефон был 44, скругление 10,
   «Личный кабинет» распирало до 49) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .zt-header__inner { gap: 12px; }
    .zt-header__logo { flex-basis: 160px; }
    .zt-header__search { padding: 0 14px; font-size: 13px; letter-spacing: 0; }
    .zt-header__phone { padding: 0 16px; font-size: 14px; }
    .zt-header__account { min-width: 0; max-width: 210px; }
}

/* Телефон и планшет: бургер, логотип и корзина, остальное — в меню */
@media (max-width: 991.98px) {
    .zt-header__inner { gap: 12px; min-height: 68px; }
    .zt-header__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--zt-border);
        border-radius: 10px;
        background: #FFFFFF;
        color: var(--zt-ink);
    }
    .zt-header__logo { flex-basis: 140px; }
    .zt-header__search, .zt-header__phone, .zt-header__manager, .zt-header__account, .zt-header__logout { display: none; }
    #vue-block-cart { margin-left: auto; }
    html.zt-menu-open { overflow: hidden; }
}

/* ---------- Меню телефона ---------- */

.zt-menu { position: fixed; inset: 0; z-index: 1045; }

.zt-menu__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(15, 20, 26, .45);
}

.zt-menu__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(360px, 88vw);
    padding: 0 16px 24px;
    overflow-y: auto;
    background: #FFFFFF;
    box-shadow: 0 0 32px rgba(15, 20, 26, .18);
    animation: zt-menu-in .22s ease-out;
}

@keyframes zt-menu-in {
    from { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .zt-menu__panel { animation: none; }
}

@media (min-width: 992px) {
    .zt-menu { display: none; }
}

.zt-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    border-bottom: 1px solid var(--zt-divider);
}
.zt-menu__logo { width: 180px; }
.zt-menu__logo img { display: block; width: 100%; height: auto; }

.zt-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--zt-border);
    border-radius: 10px;
    background: #F4F6F8;
    color: var(--zt-ink);
}

.zt-menu__search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border-radius: 8px;
    background: var(--zt-yellow);
    color: var(--zt-on-yellow);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.zt-menu__search:hover { background: var(--zt-yellow-hover); color: var(--zt-on-yellow); }

.zt-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--zt-divider);
    background: none;
    color: var(--zt-ink);
    font-size: 15px;
    text-align: left;
}
.zt-menu__link:last-child { border-bottom: 0; }
.zt-menu__link:hover { color: var(--zt-ink); background: var(--zt-surface); }
.zt-menu__link svg { width: 22px; height: 22px; color: var(--zt-ink-soft); }

/* Телефон с часами работы — как на стенде */
.zt-menu__contacts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 10px;
    background: #EEF2F5;
}
.zt-menu__contacts a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--zt-ink);
    font-size: 13px;
    font-weight: 700;
}
.zt-menu__contacts a:hover { color: var(--zt-ink); }
.zt-menu__contacts small { color: var(--zt-secondary); font-size: 12px; line-height: 1.2; }

.zt-menu__account {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--zt-ink);
    color: #FFFFFF;
}
.zt-menu__account:hover { color: #FFFFFF; }
.zt-menu__account > span { display: flex; flex-direction: column; min-width: 0; }
.zt-menu__account strong { font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
.zt-menu__account small {
    overflow: hidden;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Окно «Ваш менеджер» ---------- */

.zt-manager { border-radius: 12px; color: var(--zt-ink); }
.zt-manager .modal-title { font-size: 16px; font-weight: 700; }
.zt-manager .modal-body p { margin: 0 0 6px; font-size: 14px; }
.zt-manager .modal-body p:last-child { margin-bottom: 0; }
.zt-manager__name { font-weight: 700; }
.zt-manager a { color: var(--zt-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Крошки ---------- */

.zt-crumbs { padding: 24px 0; }
.zt-crumbs .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--zt-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.zt-crumbs .breadcrumb > li + li::before { float: none; padding: 0 8px; color: var(--zt-muted); content: "›"; }
.zt-crumbs .breadcrumb a { color: var(--zt-muted); }
.zt-crumbs .breadcrumb a:hover { color: var(--zt-ink); text-decoration: underline; }
.zt-crumbs .breadcrumb .active { color: var(--zt-secondary); }

/* ---------- Сообщения сайта (флеши common\widgets\Alert): «Пароль изменён» после нового пароля (шаг В2) и др. ----------
   Виджет рисует разметку Bootstrap 3 (alert fade in, кнопка .close), а на сайте CSS Bootstrap 5: крестик выходил
   квадратом слева. Здесь плашка в цветах слоя (как сообщения экранов входа), крестик справа, касание 40 px. */
.zt-body > #vue-app > .alert {
    position: relative;
    margin: 16px 0 20px;
    padding: 14px 56px 14px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}
.zt-crumbs + #vue-app > .alert { margin-top: 0; }
.zt-body > #vue-app > .alert-success { border-color: #C9E7D5; background: var(--zt-success-soft); color: var(--zt-success); }
.zt-body > #vue-app > .alert-danger { border-color: #EBC5C5; background: var(--zt-danger-soft); color: var(--zt-danger); }
.zt-body > #vue-app > .alert-info,
.zt-body > #vue-app > .alert-warning { border-color: rgba(255, 184, 0, .55); background: var(--zt-yellow-pale); color: var(--zt-ink-soft); }
.zt-body > #vue-app > .alert > .close {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    opacity: .75;
    cursor: pointer;
    transform: translateY(-50%);
}
.zt-body > #vue-app > .alert > .close:hover { background: rgba(15, 20, 26, .06); opacity: 1; }
.zt-body > #vue-app > .alert > .close:focus-visible { outline: 2px solid var(--zt-ink); outline-offset: 2px; opacity: 1; }

/* ---------- Подвал ---------- */

.zt-footer {
    margin-top: 80px;
    padding: 0;
    border-top: 1px solid var(--zt-border);
    background: #FFFFFF;
    color: var(--zt-muted);
}
/* Пояснение — от верхней линии логотипа, а не по центру колонки логотипа с копирайтом (пользователь 27.10) */
.zt-footer__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 48px;
}
/* Логотип и под ним копирайт — одной колонкой (27.10: отдельной полосы с копирайтом внизу больше нет) */
.zt-footer__brand { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 12px; }
.zt-footer__logo { width: 220px; }
.zt-footer__logo img { display: block; width: 100%; height: auto; }
.zt-footer__note { max-width: 760px; margin: 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.zt-footer__copy { margin: 0; font-size: 13px; line-height: 1.4; }

@media (max-width: 767.98px) {
    .zt-footer { margin-top: 56px; }
    .zt-footer__main { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 32px; padding-bottom: 32px; }
    .zt-footer__logo { width: 190px; }
}

/* ---------- Главная: заголовок и форма поиска ---------- */

/* Отступ над заголовком — как на стенде при окне 1440 × 900; после поиска форма ближе к шапке */
.zt-home-head { margin: 101px 0 24px; }
.products-index--found .zt-home-head { margin-top: 66px; }
.zt-home-head__title {
    margin: 0;
    color: var(--zt-ink);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
}
.zt-home-head__title span { color: var(--zt-yellow); }
.zt-home-head__lead { max-width: 670px; margin: 12px 0 0; color: var(--zt-secondary); font-size: 15px; line-height: 1.5; }
.zt-home-head__lead b { color: var(--zt-ink); font-weight: 700; white-space: nowrap; }

.poisk {
    margin-bottom: 40px;
    border: 1px solid var(--zt-border);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 5px 16px rgba(17, 24, 32, .05);
    color: var(--zt-ink);
}

.poisk svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Вкладки делят ряд поровну, сколько бы их ни было: сейчас две, со временем — четыре */
.poisk__tabs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    padding: 14px 14px 0;
}

.poisk__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--zt-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .16px;
    text-transform: uppercase;
    transition: color .18s ease, background-color .18s ease;
}
.poisk__tab svg { width: 26px; height: 26px; stroke-width: 1.5; }
.poisk__tab:hover { color: var(--zt-yellow); }
/* Выбранная вкладка — графит на жёлтом, как у жёлтых кнопок (решение пользователя 27.10; было белым, как на стенде
   и у ZIPTEH.RU, — контраст 1,7:1) */
.poisk__tab[aria-pressed="true"] { background: var(--zt-yellow); color: var(--zt-on-yellow); }

.poisk__body { padding: 18px 20px; }

.poisk__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 16px;
}
.poisk__field { min-width: 0; }

.poisk__input, .poisk__textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--zt-border);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--zt-ink);
    font-size: 15px;
    font-weight: 500;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.poisk__input { height: 50px; padding: 0 16px 0 20px; }
.poisk__textarea { min-height: 132px; padding: 15px 18px; line-height: 1.55; resize: vertical; }
.poisk__input::placeholder, .poisk__textarea::placeholder { color: #8A949E; font-weight: 400; }
/* Фокус поля — как у остальных полей сайта: жёлтая рамка и мягкое жёлтое кольцо (доводка 27.10, было серым) */
.poisk__input:focus, .poisk__textarea:focus {
    border-color: var(--zt-yellow);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 184, 0, .22);
}

.poisk__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 50px;
    padding: 0 26px;
    border: 1px solid var(--zt-yellow);
    border-radius: 8px;
    background: var(--zt-yellow);
    color: var(--zt-on-yellow);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .16px;
    text-transform: uppercase;
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.poisk__submit svg { width: 24px; height: 24px; stroke-width: 2; }
.poisk__submit:hover, .poisk__submit:focus-visible { border-color: var(--zt-yellow-hover); background: var(--zt-yellow-hover); }
.poisk__submit:active { transform: translateY(1px); }

/* Мелкий текст массового поиска — 12 px, как нижняя ступень шкалы (доводка 27.10; было 11) */
.poisk__hint { margin: 8px 0 0; color: var(--zt-muted); font-size: 12px; line-height: 1.45; }

.poisk__dropzone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px dashed var(--zt-border);
    border-radius: 10px;
    background: var(--zt-surface);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.poisk__dropzone:hover, .poisk__dropzone--drag { border-color: #9AA3AD; background: #F2F4F6; }

.poisk__dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--zt-border);
    border-radius: 10px;
    background: #FFFFFF;
}
.poisk__dropzone-icon svg { width: 22px; height: 22px; }
.poisk__dropzone-text strong { display: block; font-size: 13px; font-weight: 750; line-height: 1.3; }
.poisk__dropzone-text span { display: block; margin-top: 4px; color: var(--zt-secondary); font-size: 12px; line-height: 1.4; }

.poisk__file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--zt-border);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

.poisk__batch-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    min-height: 44px;
    padding-top: 10px;
}
.poisk__status { padding: 5px 9px; border-radius: 6px; background: #EEF2F5; font-size: 12px; font-weight: 750; line-height: normal; }
.poisk__batch-actions { display: flex; gap: 7px; }
.poisk__batch-actions button {
    padding: 6px 9px;
    border: 0;
    background: none;
    color: var(--zt-secondary);
    font-size: 12px;
    line-height: normal;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.poisk__batch-actions button:hover { color: var(--zt-ink); }

.poisk__examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    color: var(--zt-muted);
    font-size: 12px;
    line-height: normal;
}
.poisk__examples-label { padding-right: 2px; font-weight: 650; }
.poisk__examples button {
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid #E1E6EA;
    border-radius: 6px;
    background: #F4F6F8;
    color: #68737E;
    font-size: 12px;
    font-weight: 700;
}
.poisk__examples button:hover, .poisk__examples button:focus-visible { border-color: #C4CDD5; color: var(--zt-ink-soft); }

.poisk__advantages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 8px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--zt-divider);
    list-style: none;
}
.poisk__advantages li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 55px;
    padding: 0 12px;
    border-right: 1px solid var(--zt-divider);
    color: var(--zt-secondary);
    font-size: 12px;
    line-height: 1.35;
}
.poisk__advantages li:last-child { border-right: 0; }
.poisk__advantages strong { display: block; margin-bottom: 4px; color: var(--zt-ink); font-size: 12.5px; font-weight: 750; line-height: 1.25; }

.poisk__advantage-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    height: 36px;
    border: 1px solid var(--zt-divider);
    border-radius: 10px;
    background: var(--zt-surface);
    color: #606A75;
}
.poisk__advantage-icon svg { width: 20px; height: 20px; }

@media (min-width: 768px) and (max-width: 1199.98px) {
    .poisk__tab { font-size: 14px; }
    .poisk__advantages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .poisk__advantages li:nth-child(3n) { border-right: 0; }
}

@media (max-width: 767.98px) {
    .zt-home-head, .products-index--found .zt-home-head { margin: 38px 0 18px; }
    .poisk { border-radius: 10px; }
    .poisk__tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 12px 0; }
    /* «Массовый поиск» — в одну строку, как «По артикулу» (доводка 27.10) */
    .poisk__tab { gap: 6px; padding: 0 6px; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
    .poisk__tab svg { width: 20px; height: 20px; }
    .poisk__row { grid-template-columns: minmax(0, 1fr); }
    .poisk__input { padding: 0 16px 0 14px; }
    .poisk__submit { justify-content: center; }
    .poisk__dropzone { grid-template-columns: auto minmax(0, 1fr); }
    .poisk__file-button { grid-column: 1 / -1; }
    .poisk__examples-label { flex-basis: 100%; }
    .poisk__examples button { min-height: 36px; }
    /* «Скачать шаблон» и «Очистить» — цель касания не меньше 36 px (доводка 27.10; было около 25) */
    .poisk__batch-actions button { min-height: 36px; }
    .poisk__advantages { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
    .poisk__advantages li { padding: 14px 12px; border-right: 0; border-bottom: 1px solid var(--zt-divider); }
    .poisk__advantages li:last-child { border-bottom: 0; }
}

/* Уже 390 px «Массовый поиск» со значком не входит во вкладку — значки вкладок убираем (проверка 28.10);
   уже 360 px и без значка не входит — подпись в две строки, как было */
@media (max-width: 389.98px) {
    .poisk__tab svg { display: none; }
}
@media (max-width: 359.98px) {
    .poisk__tab { white-space: normal; }
}

/* Поля 16 px: iPhone не увеличивает страницу при вводе */
@media (max-width: 640px) {
    .poisk__input, .poisk__textarea { font-size: 16px; }
}