/* ---------------------------------------------------------------------------
   Консультант на витрине: кнопка и окно разговора.

   Блок выводится в самом конце макета, за пределами обёртки .lx, поэтому
   селекторы идут без её префикса, а переменные берутся с запасным значением.
   --------------------------------------------------------------------------- */

/* Стопка кнопок внизу справа: WhatsApp и консультант. Порознь они
   перекрывали друг друга и панель сотрудника. */
.lx-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 880;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* У сотрудника внизу справа своя панель — поднимаемся над ней. */
.lx-fab--staff { bottom: 78px; }
.lx-cons.lx-fab--staff { bottom: 78px; }

/* Мобильное меню и полноэкранный поиск (layouts/shop.php) стоят ниже
   стопки по z-index — кнопки оставались поверх открытого меню. lx-shop.js
   вешает класс на body, пока один из оверлеев открыт. */
body.lx-scrim-open .lx-fab { display: none; }

/* Корзина и оформление заказа: внизу свои кнопки (итог, «оформить заказ»),
   плюс стопка на переходах между экранами перекрывает поля формы. Сам
   консультант остаётся доступен — из корзины его зовёт отдельная ссылка
   «спросить консультанта о товарах в корзине» (.lx-ask-cons). */
body.lc-funnel-page .lx-fab { display: none; }

.lx-fab__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .35);
}

.lx-fab__wa:hover { background: #1eb457; color: #fff; }

.lx-fab__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #2a6ad4;
    color: #fff;
    box-shadow: 0 8px 26px rgba(42, 106, 212, .35);
}

.lx-fab__call:hover { background: #1f52a8; color: #fff; }

/* Сама кнопка (чёрная кнопка + анимация звёздочек) — в lux-lure.css,
   класс .lx-lure. Настройки: /instel/chats/settings → «Кнопка «подобрать
   уход»». */

/* --- одна кнопка вместо стопки, с меню способов связи -----------------------
   Включается галочкой «Кнопки связи — одной кнопкой» в /instel/chats/settings.
   .lx-fab уже position: fixed — этого достаточно, чтобы меню, поставленное
   absolute, отсчитывалось от него, а не от страницы. */
.lx-fab__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: #111010;
    color: #fff;
    box-shadow: 0 8px 26px rgba(17, 16, 16, .3);
    cursor: pointer;
}

.lx-fab__toggle:hover { background: var(--violet, #6b5cd6); }

.lx-fab__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 230px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(17, 16, 16, .2);
}

.lx-fab__menu[hidden] { display: none; }

.lx-fab__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--ink, #111010);
    text-decoration: none;
    cursor: pointer;
}

.lx-fab__row:hover { background: var(--bg-soft, #f4f2f0); }

.lx-fab__row-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
}

.lx-fab__row-ico--phone { background: #2a6ad4; }
.lx-fab__row-ico--whatsapp { background: #25d366; }
.lx-fab__row-ico--chat { background: #111010; }

.lx-fab__row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lx-fab__row-text b { font-size: 13.5px; font-weight: 500; }
.lx-fab__row-text span { font-size: 12px; color: var(--mute, #8a8177); }

@media (max-width: 700px) {
    .lx-fab__menu { width: min(230px, calc(100vw - 24px)); }
}

/* Атрибут hidden проигрывает любому display в стилях — без этой строки
   окно не закрывалось. */
.lx-cons[hidden] { display: none; }

.lx-cons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 890;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: min(640px, calc(100vh - 40px));
    background: #fff;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(17, 16, 16, .2);
}

.lx-cons__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line, #e6e2de);
}

.lx-cons__head span { display: flex; flex-direction: column; gap: 2px; }
.lx-cons__head b { font-size: 15px; font-weight: 500; }
.lx-cons__head small { font-size: 12px; color: var(--mute); }

.lx-cons__x {
    margin-left: auto;
    border: 0;
    background: none;
    padding: 0 2px;
    font-size: 22px;
    line-height: 1;
    color: var(--mute);
    cursor: pointer;
}

.lx-cons__x:hover { color: var(--ink, #111010); }

.lx-cons__body {
    flex: 1;
    min-height: 180px;
    overflow-y: auto;
    /* Фото шире окна раздвигало разговор вбок — прокрутку в такую сторону
       внутри чата не ищут и не находят, поэтому её здесь вообще не
       должно быть. */
    overflow-x: hidden;
    /* Докрутив разговор до конца, не утаскиваем за собой страницу. */
    overscroll-behavior: contain;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* На случай, если overflow-x где-то всё же снимут: картинка не должна
   быть шире собственного сообщения ни при каких обстоятельствах. */
.lx-cons__msg img { max-width: 100%; height: auto; display: block; image-orientation: from-image; }

.lx-cons__file button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* Окно поверх страницы для фото менеджера — вместо новой вкладки, чтобы
   покупатель не терял место на сайте. */
.lx-cons__view {
    position: fixed;
    inset: 0;
    z-index: 970;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 64px;
    background: rgba(16, 20, 24, .82);
}

.lx-cons__view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; image-orientation: from-image; }

.lx-cons__view-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lx-cons__view-close:hover { background: rgba(255, 255, 255, .28); }

.lx-cons__view-orig {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .7);
}

.lx-cons__view-orig:hover { color: #fff; }

.lx-cons__msg {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.lx-cons__msg--bot { align-self: flex-start; background: #f4f2f0; }
.lx-cons__msg--me { align-self: flex-end; background: #111010; color: #fff; }
.lx-cons__msg.is-wait { color: var(--mute); }

.lx-cons__hints { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.lx-cons__hints button {
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    color: var(--ink, #111010);
    cursor: pointer;
    text-align: left;
}

.lx-cons__hints button:hover { border-color: var(--ink, #111010); }

.lx-cons__items { display: flex; flex-direction: column; gap: 8px; }

.lx-cons .lx-cons__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

.lx-cons .lx-cons__item:hover { border-color: var(--ink, #111010); }

.lx-cons__pic {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f4f2f0 center/cover no-repeat;
}

.lx-cons__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-cons__text b { font-size: 13px; font-weight: 400; line-height: 1.35; }
.lx-cons__text span { font-size: 13px; font-weight: 500; }

.lx-cons__foot {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 12px 16px 6px;
    border-top: 1px solid var(--line, #e6e2de);
}

.lx-cons__foot input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.lx-cons__foot input:focus { outline: none; border-color: var(--ink, #111010); }

.lx-cons__foot button {
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #111010;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

.lx-cons__foot button:hover { background: var(--violet, #6b5cd6); }

.lx-cons__note {
    padding: 4px 16px 12px;
    font-size: 11.5px;
    color: var(--mute);
}

@media (max-width: 700px) {
    /* Ниже, чем на десктопе, но не впритык: на коротких экранах стопка
       налезала на последний ряд контента (например, кружки категорий
       сразу под баннером на главной). Запас побольше — только там, где
       внизу есть своя панель с суммой (страница товара, .lc-stickybar):
       ей кнопки не должны загораживать «в корзину». */
    .lx-fab { right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
    body:has(.lc-stickybar) .lx-fab { bottom: 76px; }

    /* Окно разговора на телефоне занимает экран целиком. Раньше оно было
       ростом с половину экрана, а нижнюю часть — поле ввода и форму заказа
       — закрывали панель «в корзину» и панель сотрудника. */
    /* Панель сотрудника на телефоне прячется вместе с остальными, поэтому
       поднимать над ней окно не нужно — иначе снизу остаётся пустая полоса. */
    .lx-cons,
    .lx-cons.lx-fab--staff {
        top: 8px;
        right: 8px;
        left: 8px;
        bottom: 8px;
        z-index: 960;
        width: auto;
        max-width: none;
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Пока разговор открыт, нижние панели не нужны: они всё равно под ним. */
    body.lx-cons-on .lc-stickybar,
    body.lx-cons-on .lx-adm,
    body.lx-cons-on .lx-fab { display: none; }

    /* И сама страница стоит на месте: иначе палец прокручивал каталог
       под окном, а не разговор. */
    body.lx-cons-on {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }

    /* С открытой клавиатурой на окно остаётся треть экрана. Лента
       сообщений должна сжиматься до нуля — иначе она держит высоту, и
       поле ввода вместе с кнопкой уезжает за нижний край. */
    .lx-cons__body { min-height: 0; }
    .lx-cons { padding-bottom: 0; }
    .lx-cons__note { padding-bottom: 8px; }

    /* Поля не мельче 16px: на меньшем айфон при фокусе увеличивает
       страницу, окно уезжает вбок и кнопка отправки пропадает за краем. */
    .lx-cons input,
    .lx-cons textarea,
    .lx-cons select,
    .lx-cons__foot input { font-size: 16px; }

    /* Форма заказа: поля во всю ширину, карта пониже — иначе кнопка
       «оформить» уезжает за нижний край. */
    .lx-cons__order { gap: 8px; }
    .lx-cons__map { height: 180px; }
}

/* --- «печатает»: три точки, как в мессенджере ------------------------------ */
.lx-cons__typing { display: flex; gap: 4px; align-items: center; padding: 14px 13px; }

.lx-cons__typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a9a29b;
    animation: lx-cons-dot 1.2s infinite ease-in-out;
}

.lx-cons__typing i:nth-child(2) { animation-delay: .18s; }
.lx-cons__typing i:nth-child(3) { animation-delay: .36s; }

@keyframes lx-cons-dot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .lx-cons__typing i { animation: none; opacity: .6; }
}

/* --- карточка товара с кнопкой «в корзину» --------------------------------- */
.lx-cons__item { display: flex; align-items: stretch; gap: 8px; }

.lx-cons .lx-cons__link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

.lx-cons .lx-cons__link:hover { border-color: var(--ink, #111010); }

.lx-cons__add {
    flex: none;
    width: 42px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 11px;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    color: var(--ink, #111010);
    cursor: pointer;
}

.lx-cons__add:hover { background: #111010; border-color: #111010; color: #fff; }
.lx-cons__add.is-on { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.lx-cons__add:disabled { opacity: .5; cursor: default; }

/* --- строка корзины и оформление ------------------------------------------- */
.lx-cons__cart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--line, #e6e2de);
    background: #faf8f6;
    font-size: 13px;
}

.lx-cons__cart[hidden] { display: none; }
.lx-cons__cart span { color: var(--mute, #8a8177); }

/* Чёрная кнопка здесь одна — «оформить заказ». Строка с корзиной так и
   осталась строкой, только теперь по ней можно нажать. */
.lx-cons__cart [data-lx-cons-checkout] {
    margin-left: auto;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Заливка — только у «оформить заказ»: строка с корзиной остаётся строкой. */
.lx-cons__cart [data-lx-cons-checkout]:hover { background: var(--violet, #6b5cd6); }

.lx-cons__order {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 12px;
    background: #faf8f6;
}

.lx-cons__order b { font-size: 14px; font-weight: 500; }

.lx-cons__order input[type="text"],
.lx-cons__order input[type="tel"],
.lx-cons__order input[type="email"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.lx-cons__order input:focus { outline: none; border-color: var(--ink, #111010); }

.lx-cons__two { display: flex; gap: 8px; }
.lx-cons__two > * { flex: 1; min-width: 0; }
/* «Улица, дом» шире, чем «кв. / офис»: поле улицы обёрнуто в блок подсказок,
   поэтому ширину задаём обёртке, а не самому инпуту. */
.lx-cons__two > .lx-cons__sug-wrap { flex: 2; }

.lx-cons__pay { display: flex; flex-direction: column; gap: 6px; }

.lx-cons__pay-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line, #e6e1da);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.lx-cons__pay-opt i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line, #cfc9c0);
    border-radius: 50%;
}

.lx-cons__pay-opt.is-on { border-color: #111010; }
.lx-cons__pay-opt.is-on i { border-color: #111010; border-width: 5px; }
.lx-cons__pay-opt span { display: flex; flex-direction: column; }
.lx-cons__pay-opt em { font-style: normal; font-size: 11.5px; color: var(--mute, #8a8177); }

/* Подтверждение вместо формы: то, что мы знаем, показываем строкой. */
.lx-cons__ask { font-size: 13px; color: var(--mute, #8a8177); }

.lx-cons__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-soft, #f6f4f1);
    font-size: 13.5px;
}

.lx-cons__card b { font-size: 14.5px; }

.lx-cons__fix {
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--violet, #6b5cd6);
    text-decoration: underline;
    cursor: pointer;
}

.lx-cons__sug-wrap { position: relative; display: block; }

.lx-cons__sug {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 16, 16, .16);
    max-height: 210px;
    overflow-y: auto;
}

.lx-cons__sug li {
    display: flex;
    flex-direction: column;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.lx-cons__sug li.is-active,
.lx-cons__sug li:hover { background: var(--bg-soft, #f2efeb); }
.lx-cons__sug .lc-suggest__where { font-size: 11.5px; color: var(--mute, #8a8177); }

.lx-cons__map-btn {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--violet, #6b5cd6);
    text-decoration: underline;
    cursor: pointer;
}

.lx-cons__map {
    position: relative;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-soft, #f2efeb);
    font-size: 12.5px;
    color: var(--mute, #8a8177);
}

.lx-cons__map-canvas { position: absolute; inset: 0; }

/* Метка неподвижна в центре: двигают карту, а не метку — пальцем по
   маленькой метке промахиваются, и кажется, что адрес не определяется. */
.lx-cons__map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 22px;
    height: 22px;
    margin: -22px 0 0 -11px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #111010;
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px rgba(17, 16, 16, .35);
    pointer-events: none;
}

.lx-cons__map-note {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    font-size: 12px;
    line-height: 1.35;
    color: var(--ink, #111010);
    pointer-events: none;
}

.lx-cons__map[hidden] { display: none; }

.lx-cons__order button[type="submit"] {
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.lx-cons__order button[type="submit"]:hover { background: var(--violet, #6b5cd6); }
.lx-cons__order button[type="submit"]:disabled { opacity: .6; cursor: default; }

.lx-cons__err { font-size: 12.5px; color: var(--mute, #8a8177); }
.lx-cons__err.is-bad { color: #b3372c; }

.lx-cons .lx-cons__pay-link {
    display: block;
    padding: 13px;
    border-radius: 11px;
    background: #1f8a4c;
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
}

.lx-cons .lx-cons__pay-link:hover { background: #186f3d; color: #fff; }

.lx-cons__pay-note {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--mute, #8a8177);
    text-align: center;
}

/* --- вспомогательные кнопки чата ------------------------------------------- */
.lx-cons__tools {
    display: flex;
    gap: 8px;
    padding: 8px 16px 0;
}

.lx-cons__tools button {
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    padding: 6px 12px;
    font: inherit;
    font-size: 12.5px;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__tools button:hover { border-color: var(--ink, #111010); color: var(--ink, #111010); }

.lx-cons__hint { font-size: 12.5px; line-height: 1.5; color: var(--mute, #8a8177); }

.lx-cons__order input[type="file"] { font-size: 13px; }

/* Согласие: квадратик рисуем сами — системный витринный сброс стилей
   съедает, и строка выглядела нажимаемой лишь на словах. */
.lx-cons__agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.lx-cons__agree i {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--line2, #cfc9c0);
    border-radius: 6px;
    background: #fff;
}

.lx-cons__agree.is-on i {
    border-color: #111010;
    background: #111010 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Зона доставки в форме заказа. */
.lx-cons__zone {
    padding: 8px 10px;
    border-radius: 9px;
    background: #f0f8f2;
    border: 1px solid #d6ebdc;
    color: #1f6b40;
    font-size: 12.5px;
    line-height: 1.45;
}

/* Радиокнопки оплаты: тема сайта прячет нативные, рисуем свои. */
.lx-cons__pay input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #b9b3ad;
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.lx-cons__pay input[type="radio"]:checked { border-color: #111010; }

.lx-cons__pay input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #111010;
}

.lx-cons__pay label { text-transform: none; }

/* --- поля формы фото ------------------------------------------------------
   Тема сайта прячет нативные галочки и делает подписи капсом, а поле файла
   остаётся системным — в окне чата это выглядит чужим. Рисуем сами. */
.lx-cons__order label,
.lx-cons__agree { text-transform: none; letter-spacing: 0; }

.lx-cons__order input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--line2, #d9d4cf);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__order input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.lx-cons__order input[type="file"]::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.lx-cons__agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border: 1px solid #b9b3ad;
    border-radius: 4px;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.lx-cons__agree input[type="checkbox"]:checked { background: #111010; border-color: #111010; }

.lx-cons__agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Ответ живого менеджера отличаем от консультанта. */
.lx-cons__msg--man {
    background: #eef4ff;
    border-left: 3px solid #2a6ad4;
}

/* Предложение прислать фото — под тем ответом, где о нём зашла речь. */
.lx-cons__offer { display: flex; }

.lx-cons__offer button {
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    color: var(--ink, #111010);
    cursor: pointer;
}

.lx-cons__offer button:hover { border-color: var(--ink, #111010); }

/* --- голосовой ввод -------------------------------------------------------- */
/* Микрофон — вспомогательное действие: чёрная кнопка рядом только одна,
   и это «отправить». */
.lx-cons .lx-cons__mic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 50%;
    background: #fff;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons .lx-cons__mic:hover { border-color: var(--ink, #111010); color: var(--ink, #111010); background: #fff; }

.lx-cons__mic[hidden] { display: none; }
.lx-cons__mic:hover { border-color: var(--ink, #111010); }

/* Пока идёт запись — кнопка «дышит», иначе непонятно, слушает ли он. */
.lx-cons .lx-cons__mic.is-on {
    border-color: #b3372c;
    color: #b3372c;
    background: #fff;
    animation: lx-cons-mic 1.1s ease-in-out infinite;
}

@keyframes lx-cons-mic {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 55, 44, .35); }
    50% { box-shadow: 0 0 0 6px rgba(179, 55, 44, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lx-cons__mic.is-on { animation: none; }
}

/* Пункт выдачи: тот же вид, что и у остальных полей формы заказа. */
.lx-cons__order select {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
}

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

.lx-cons__rec {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 6px;
    border-top: 1px solid var(--line, #e6e2de);
}

.lx-cons__rec button {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.lx-cons__rec-no { background: var(--bg-soft, #f2efeb); color: var(--ink, #111010); }
.lx-cons__rec-no:hover { background: #e6e1da; }
.lx-cons__rec-yes { background: #111010; color: #fff; }
.lx-cons__rec-yes:hover { background: var(--violet, #6b5cd6); }

.lx-cons__wave {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 32px;
    overflow: hidden;
}

.lx-cons__wave i {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--ink, #111010);
    opacity: .75;
    transition: height .08s linear;
}

/* --- ответ на реплику ------------------------------------------------------
   Консультант спрашивает по три вещи разом; без указания, на какую именно
   отвечают, он переспрашивает то же самое. */

/* На реплику отвечают нажатием по ней самой. */
.lx-cons__msg--can { cursor: pointer; }
.lx-cons__msg--can:hover { background: var(--bg-soft, #efece8); }

.lx-cons__tip {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--mute, #8a8177);
}

.lx-cons__quote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 16px;
    padding: 8px 10px;
    border-left: 3px solid var(--ink, #111010);
    border-radius: 0 9px 9px 0;
    background: var(--bg-soft, #f4f2ef);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-2, #4a4340);
}

.lx-cons__quote[hidden] { display: none; }
.lx-cons__quote span { flex: 1; min-width: 0; }

.lx-cons__quote button {
    flex: none;
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: 17px;
    line-height: 1;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

/* --- скрепка --------------------------------------------------------------- */

/* Через класс строки ввода: там все кнопки чёрные и круглые, потому что
   такая кнопка одна — «отправить». Скрепка же вспомогательная, как и
   микрофон, и выглядеть должна так же — иначе она спорит с отправкой. */
.lx-cons .lx-cons__clip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 50%;
    background: #fff;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons .lx-cons__clip:hover {
    border-color: var(--ink, #111010);
    color: var(--ink, #111010);
    background: #fff;
}

/* Выбор, что прикрепить: полоса на месте поля ввода, как у записи
   голоса. Всплывающее окошко над скрепкой в узком окне налезало на
   переписку, а его кнопки наследовали от строки ввода круглую форму и
   белый текст — окно выглядело пустым. */
.lx-cons__pick {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 16px 6px;
    border-top: 1px solid var(--line, #e6e2de);
}

.lx-cons__pick .lx-cons__rec-no {
    flex: 0 0 auto;
    align-self: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.lx-cons__pick-one {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    height: auto;
    padding: 8px 12px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 14px;
    background: #fff;
    color: var(--ink, #1a1614);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lx-cons__pick-one:hover {
    border-color: var(--ink, #111010);
    background: var(--bg-soft, #f6f4f1);
}

.lx-cons__pick-one b {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #1a1614);
}

.lx-cons__pick-one span {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mute, #8a8177);
}

/* --- время у реплик --------------------------------------------------------
   В разговоре важно, когда это было сказано: без времени вчерашняя
   переписка и сегодняшняя выглядят одинаково. */

.lx-cons__time {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mute, #a49c92);
    text-align: right;
}

.lx-cons__msg--me .lx-cons__time { color: rgba(255, 255, 255, .6); }

/* --- корзина списком -------------------------------------------------------- */

.lx-cons__cart-open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--mute, #8a8177);
    text-align: left;
    cursor: pointer;
}

.lx-cons__cart-open,
.lx-cons__cart-open:hover,
.lx-cons__cart-open:focus { background: none; }

.lx-cons__cart-open:hover { color: var(--ink, #111010); }
.lx-cons__cart-open i { color: var(--mute, #8a8177); }

.lx-cons__cart-open i {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.lx-cons__basket {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Две строки должны помещаться целиком, иначе корзина выглядит как
       щель, в которую что-то видно. Выше не пускаем: разговор важнее. */
    max-height: 46vh;
    min-height: 132px;
    overflow-y: auto;
    padding: 10px 16px;
    border-top: 1px solid var(--line, #e6e2de);
    background: var(--bg-soft, #faf8f6);
}

.lx-cons__basket[hidden] { display: none; }

.lx-cons__basket-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
}

.lx-cons__basket-row img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
}

.lx-cons__basket-row a {
    flex: 1;
    min-width: 0;
    color: inherit;
    line-height: 1.35;
    text-decoration: none;
}

.lx-cons__basket-row a:hover { text-decoration: underline; }
.lx-cons__basket-row span { white-space: nowrap; color: var(--mute, #8a8177); }

.lx-cons__basket-row button {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 15px;
    line-height: 1;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__basket-row button:hover { background: #b3372c; color: #fff; }
.lx-cons__basket-row button:disabled { opacity: .5; }

/* Количество правится в самой корзине: минус, число, плюс. */
.lx-cons__basket-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.lx-cons__basket-count button {
    width: 22px;
    height: 22px;
    font-size: 14px;
}

.lx-cons__basket-count button:hover {
    background: var(--ink, #1a1614);
    color: #fff;
}

.lx-cons__basket-count b {
    min-width: 18px;
    text-align: center;
    font-weight: 600;
    color: var(--ink, #1a1614);
}

.lx-cons__basket-price {
    min-width: 62px;
    text-align: right;
}

.lx-cons__basket-foot {
    align-self: flex-end;
    font-size: 12.5px;
    font-weight: 600;
}

/* Позвать консультанта из корзины: сомнения приходят перед оплатой. */
.lx-ask-cons {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--violet, #6b5cd6);
    text-decoration: underline;
    cursor: pointer;
}

.lx-ask-cons:hover { color: var(--ink, #111010); }

/* Приглашение спросить консультанта на странице товара и под статьёй:
   заметнее ссылки в корзине — это первое, что предлагают попробовать.
   Класс не lx-ask — так уже называется оверлей своего confirm() из
   lux-adminbar.css/lux-admin-edit.js, и совпадение имён превращало эту
   кнопку в полноэкранный fixed-оверлей поверх шапки. */
.lx-ask-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 12px;
    background: var(--bg2, #f7f6f4);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.lx-ask-item:hover { border-color: var(--violet, #6b5cd6); background: #fff; }
.lx-ask-item svg { flex: none; margin-top: 2px; color: var(--violet, #6b5cd6); }
.lx-ask-item span { display: flex; flex-direction: column; gap: 2px; }
.lx-ask-item b { font-size: 14px; font-weight: 600; color: var(--ink, #1a1614); }
.lx-ask-item i { font-style: normal; font-size: 12.5px; color: var(--mute, #7c7570); }

/* Часы и телефон выбранного пункта выдачи под списком. */
.lx-cons__pickup-when {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--mute, #8a8177);
}

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

.lx-cons__shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.lx-cons .lx-cons__shot {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 12px;
    overflow: hidden;
    background: #f7f5f3;
}

.lx-cons__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lx-cons .lx-cons__shot-kill {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 16, 16, .66);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.lx-cons .lx-cons__shot-kill:hover { background: #b3372c; }

.lx-cons .lx-cons__shot--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-style: dashed;
    background: #fff;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons .lx-cons__shot--add i { font-style: normal; font-size: 20px; line-height: 1; }
.lx-cons .lx-cons__shot--add span { font-size: 11.5px; text-align: center; }
.lx-cons .lx-cons__shot--add:hover { border-color: var(--ink, #111010); color: var(--ink, #111010); }

.lx-cons__order textarea {
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 14px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.lx-cons__order textarea:focus { outline: none; border-color: var(--ink, #111010); }

/* Спокойная пометка внешней ссылки в чате: не тревога, а факт — куда
   ведёт. Оплату магазин шлёт только со своего адреса и с адреса
   платёжной системы, поэтому «другой сайт» рядом со ссылкой на оплату
   для покупателя — прямой сигнал остановиться. Цвет приглушённый: у тех,
   кто просто прислал ссылку на статью бренда, это не должно пугать. */
.lx-cons__ext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f3efe8;
    border: 1px solid #e6ddcd;
    color: #8a6d3b;
    font-size: 11px;
    white-space: nowrap;
    vertical-align: middle;
}

.lx-cons__ext::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c99a3a;
}

/* --- оценка ответа покупателем ---------------------------------------------
   Два серых пальца под ответом консультанта: нажатый — закрашен. Ряд не
   выше 22 px и вплотную к пузырю, чтобы читался как его часть, а не как
   отдельная реплика. На телефоне площадь под палец 32 px — за счёт
   отступов, сама иконка та же. */
.lx-cons__rate {
    display: flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
    height: 22px;
    margin: -6px 0 0 6px;
}

.lx-cons__rate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mute, #b3aba1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lx-cons__rate-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lx-cons__rate-btn--down svg { transform: rotate(180deg); }
.lx-cons__rate-btn:hover { color: #7a7268; background: #f4f2f0; }
.lx-cons__rate-btn.is-on { color: var(--ink, #111010); }
.lx-cons__rate-btn.is-on svg { fill: currentColor; }

.lx-cons__rate-note {
    margin-left: 4px;
    font-size: 11px;
    line-height: 1;
    color: var(--mute, #8a8177);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .lx-cons__rate-btn { width: 32px; height: 32px; margin: -5px -3px; }
}