/* ---------------------------------------------------------------------------
   Сборка статьи на самой странице.

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

.lx-article__body--edit {
    position: relative;
}

/* --- блок ------------------------------------------------------------------ */

.lxb {
    position: relative;
    border: 1px dashed transparent;
    border-radius: 10px;
    transition: border-color .12s, background .12s;
}

.lx-article__body--edit .lxb:hover,
.lx-article__body--edit .lxb:focus-within {
    border-color: #cdd6e4;
    background: rgba(247, 249, 252, .6);
}

.lxb--off { opacity: .55; }
.lxb--saving { border-color: #d8c9a4 !important; }
.lxb--saved { border-color: #9ecdb0 !important; }

/* Панель блока — на тёмной подложке, как панель оформления текста: белые
   кнопки на белой странице читались с трудом, особенно поверх фотографии. */
.lx .lxb__bar {
    position: absolute;
    top: -14px;
    right: 8px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 0;
    border-radius: 999px;
    background: #101418;
    box-shadow: 0 8px 24px rgba(16, 20, 24, .3);
    font-size: 11.5px;
}

.lxb:hover > .lxb__bar,
.lxb:focus-within > .lxb__bar { display: flex; }

.lx .lxb__type {
    padding-left: 4px;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8d97a2;
}

.lx .lxb__off { font-size: 10.5px; color: #ff9a8f; }
.lxb__gap { width: 4px; }

.lxb .lxb__act {
    height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #55606b;
    font: inherit;
    font-size: 11.5px;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
}

.lx .lxb .lxb__act { color: #e6eaee; }
.lx .lxb .lxb__act:hover { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
.lx .lxb .lxb__act--kill { font-size: 15px; }
.lx .lxb .lxb__act--kill:hover { background: #b3372c; color: #fff; }

.lxb__body > * { margin-top: 0; }

/* Пустой абзац, заголовок или подпись: без подсказки они выглядят как
   поломка вёрстки, а не как место, куда надо писать. */
.lx-article__body--edit [contenteditable]:empty::before {
    content: attr(data-lx-ph);
    color: #b6bcc4;
}

.lx-article__body--edit [contenteditable]:focus {
    outline: 2px solid rgba(59, 115, 216, .25);
    outline-offset: 4px;
    border-radius: 4px;
}

/* --- фотография ------------------------------------------------------------ */

.lx .lxb .lx-blk--photo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.lx .lxb .lx-blk--photo.lxb--empty {
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 20px;
    background: #f7f8fa;
    border: 1px dashed #ccd2d9;
    border-radius: 12px;
    text-align: center;
}

.lx .lxb .lx-blk--photo.lxb--empty img { display: none; }
.lx .lxb .lx-blk--photo.is-over { border-color: #3b73d8; background: #eef3fd; }

.lx .lxb__shot-pick {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #d9d4cf;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #55606b;
    cursor: pointer;
}

.lx .lxb__shot-pick:hover { border-color: #111010; color: #111010; }

.lx .lxb__shot-note {
    font-size: 12.5px;
    color: #9aa3ad;
}

/* --- панель оформления ------------------------------------------------------ */

.lxb__bar-tools {
    position: absolute;
    z-index: 60;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
    background: #101418;
    box-shadow: 0 10px 30px rgba(16, 20, 24, .22);
}

.lxb__bar-tools button {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.lxb__bar-tools button:hover { background: rgba(255, 255, 255, .16); }
.lxb__bar-tools button.is-on { background: rgba(255, 255, 255, .24); }

/* --- плюс ------------------------------------------------------------------ */

.lxb__plus {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

/* Кнопка тёмная и с подписью: серый кружок на светлой странице терялся —
   его находили, только зная, что он там есть. */
.lx .lxb__plus-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 14px 0 11px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    opacity: .5;
    transition: opacity .12s, background .12s;
}

.lx .lxb__plus-btn i { font-style: normal; font-size: 15px; line-height: 1; transition: transform .15s; }
/* Меню открыто — плюс становится крестиком: кнопка теперь закрывает. */
.lx .lxb__plus.is-open .lxb__plus-btn { opacity: 1; background: #3b73d8; }
.lx .lxb__plus.is-open .lxb__plus-btn i { transform: rotate(45deg); }
.lx .lxb__plus:hover .lxb__plus-btn,
.lx .lxb__plus-btn:focus { opacity: 1; }
.lx .lxb__plus-btn:hover { background: #3b73d8; }

.lx .lxb__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    width: 320px;
    margin-left: -160px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(16, 20, 24, .16);
    text-align: left;
}

.lx .lxb__menu-row {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lx .lxb__menu-row:hover { background: #f2f6fd; }
.lx .lxb__menu-row b { display: block; font-size: 13.5px; font-weight: 500; color: #101418; }
.lx .lxb__menu-row span { display: block; font-size: 11.5px; line-height: 1.4; color: #9aa3ad; }

/* --- старый текст ----------------------------------------------------------- */

.lxb__warn {
    display: block;
    padding: 12px 14px;
    margin: 10px 0;
    border: 1px solid #f0dcbb;
    border-radius: 12px;
    background: #fffaf2;
    font-size: 13px;
    line-height: 1.55;
    color: #7a5a1e;
}

.lxb__warn b { display: block; margin-bottom: 3px; color: #5f4514; }

/* Пустой блок: галерею, видео и товары выбирают в сборщике, а на странице
   от такого блока не остаётся ничего — только пустое место между двумя
   плюсами, и непонятно, что там вообще есть. */
.lx .lxb__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 18px;
    border: 1px dashed #ccd2d9;
    border-radius: 12px;
    background: #f7f8fa;
}

.lx .lxb__empty b { font-size: 13.5px; font-weight: 500; color: #55606b; }
.lx .lxb__empty span { font-size: 12.5px; color: #9aa3ad; }
.lx .lxb__empty a { font-size: 12.5px; }

/* --- подбор товаров в блоке ------------------------------------------------
   Как в заказе: поле с подсказками, где видно фотографию, цену и категорию.
   Виден только сотруднику — карточки читателю рисует сам блок. */

.lx .lxb__pick { position: relative; margin-top: 10px; }

.lx .lxb__find {
    width: 100%;
    max-width: 520px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #d9d4cf;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
}

.lx .lxb__find:focus { outline: none; border-color: #3b73d8; }

.lx .lxb__found {
    position: absolute;
    z-index: 40;
    top: 42px;
    left: 0;
    width: 100%;
    max-width: 520px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(16, 20, 24, .16);
}

.lx .lxb__found-row {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 2px 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lx .lxb__found-row:hover { background: #f2f6fd; }
.lx .lxb__found-row img { grid-row: span 2; width: 38px; height: 38px; object-fit: contain; }
.lx .lxb__found-row b { font-size: 13px; font-weight: 500; line-height: 1.3; }
.lx .lxb__found-row span { font-size: 11.5px; color: #9aa3ad; }
.lx .lxb__found-none { display: block; padding: 8px 10px; font-size: 13px; color: #9aa3ad; }

.lx .lxb__chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.lx .lxb__good {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 4px 6px 4px 12px;
    border: 1px solid #e2e6ec;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.3;
}

.lx .lxb__good button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #9aa3ad;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.lx .lxb__good button:hover { background: #fdecea; color: #b3372c; }

/* Текст в блоке правят как обычный текст. .lx-prose — колонка флекса с
   промежутком в 16 пикселей между детьми: в готовой статье это ровные
   абзацы, а под курсором каждый пустой <div> с переносом превращался в
   лишнюю дыру, и внизу блока копилось пустое место. */
.lx .lxb [contenteditable].lx-blk--text {
    display: block;
    min-height: 0;
}

.lx .lxb [contenteditable].lx-blk--text > div,
.lx .lxb [contenteditable].lx-blk--text > p {
    margin: 0 0 14px;
}

.lx .lxb [contenteditable].lx-blk--text > div:last-child,
.lx .lxb [contenteditable].lx-blk--text > p:last-child { margin-bottom: 0; }

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

.lx .lxb__cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.lx .lxb__cell {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f5f7;
}

.lx .lxb__cell img { width: 100%; height: 100%; object-fit: cover; }

.lx .lxb__cell button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 20, 24, .68);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.lx .lxb__cell button:hover { background: #b3372c; }

.lx .lxb__cell--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px dashed #ccd2d9;
    background: #fff;
    color: #9aa3ad;
    cursor: pointer;
}

.lx .lxb__cell--add i { font-style: normal; font-size: 20px; line-height: 1; }
.lx .lxb__cell--add span { font-size: 11.5px; }
.lx .lxb__cell--add:hover { border-color: #3b73d8; color: #3b73d8; }
.lx .lxb__cell--add input { display: none; }

.lx .lxb__shot-note select {
    height: 26px;
    margin-left: 4px;
    padding: 0 6px;
    border: 1px solid #dfe3e9;
    border-radius: 7px;
    font: inherit;
    font-size: 12.5px;
}

/* Файл тащат из папки — показываем, что бросить можно сюда. */
.lx .lxb.lxb--over {
    border-color: #3b73d8;
    background: #eef3fd;
}

/* Подтверждение удаления — своим окном: браузерное глушится, если человек
   однажды отметил «не показывать больше диалоги», и кнопка после этого
   выглядит сломанной.

   Без префикса .lx намеренно: окно живёт прямо в body, а не внутри
   витринной обёртки, — с префиксом правила до него не доставали, и оно
   рисовалось невидимой строкой в самом низу страницы. */
.lxb__ask {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 24, 30, .42);
}

.lxb__ask-card {
    width: 100%;
    max-width: 380px;
    padding: 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 20, 24, .28);
}

.lxb__ask-card b { display: block; font-size: 15px; }
.lxb__ask-card > span { display: block; margin-top: 4px; font-size: 13px; color: #9aa3ad; }
.lxb__ask-acts { display: flex; gap: 8px; margin-top: 16px; }

.lxb__ask-acts button {
    height: 34px;
    padding: 0 16px;
    border: 1px solid #dfe3e9;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.lxb__ask-acts [data-yes] { background: #b3372c; border-color: #b3372c; color: #fff; }
.lxb__ask-acts [data-yes]:hover { background: #97281e; border-color: #97281e; }

/* Короткая подсказка после работы ИИ: текст можно откатить. */
.lxb__toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 1200;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 999px;
    background: #101418;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(16, 20, 24, .28);
}

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

.lx .lxb .lx-blk--photo { position: relative; }

.lx .lxb__shot-over {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px;
    background: rgba(255, 255, 255, .78);
    color: #55606b;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transition: opacity .12s;
    cursor: pointer;
}

.lx .lxb .lx-blk--photo:hover .lxb__shot-over { opacity: 1; }
.lx .lxb .lx-blk--photo.lxb--empty .lxb__shot-over { position: static; opacity: 1; background: none; }
.lx .lxb__shot-over input { display: none; }

/* «Сохранено» в панели блока: кнопки сохранения нет, и человек должен
   видеть, что правка дошла до сервера. */
.lx .lxb__saved { font-size: 10.5px; color: #7fd4a2; }

/* Второе поле в блоке — подпись: она не обязательна, и звать на себя
   внимание ей незачем. */
.lx .lxb__find--note { margin-top: 6px; font-size: 13px; }

/* --- содержание статьи ------------------------------------------------------
   Длинную статью правят кусками, а порядок в ней виден только целиком.
   Стрелки у блока двигают его на шаг: чтобы поднять последний блок к
   началу, их пришлось бы нажать двадцать раз. Здесь весь список разом, и
   строку можно перетащить. */

.lxb__toc {
    position: fixed;
    top: 96px;
    right: 16px;
    z-index: 40;
    width: 250px;
    max-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    padding: 10px 10px 8px;
    border: 1px solid #e2e6ec;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 20, 24, .14);
}

.lxb__toc[hidden] { display: none; }

.lxb__toc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px;
}

.lxb__toc-head b { font-size: 12px; font-weight: 600; color: #101418; }

.lxb__toc-hide {
    margin-left: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #55606b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.lxb__toc-hide:hover { background: #e6eaef; }

.lxb__toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.lxb__toc-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 6px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: grab;
}

.lxb__toc-row:hover { background: #f4f6f9; }
.lxb__toc-row.is-dragged { opacity: .45; }
.lxb__toc-row.is-off { opacity: .55; }
.lxb__toc-row i { grid-row: span 2; width: 10px; height: 10px; border-left: 2px dotted #ccd2d9; }
.lxb__toc-row b { font-size: 11.5px; font-weight: 600; color: #55606b; }

.lxb__toc-row span {
    font-size: 11.5px;
    line-height: 1.35;
    color: #9aa3ad;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxb__toc-note {
    padding: 8px 4px 0;
    font-size: 10.5px;
    line-height: 1.4;
    color: #9aa3ad;
}

/* Свёрнутый список: остаётся заголовок, чтобы его можно было вернуть. */
.lxb__toc.is-small .lxb__toc-list,
.lxb__toc.is-small .lxb__toc-note { display: none; }
.lxb__toc.is-small { width: auto; }

/* Куда ведёт строка списка: блок мигает рамкой, иначе на длинной странице
   непонятно, к чему тебя перебросило. */
.lx .lxb.lxb--point {
    border-color: #3b73d8;
    background: #eef3fd;
}

@media (max-width: 1400px) {
    .lxb__toc { display: none; }
}