/* ---------------------------------------------------------------------------
   Город и адрес доставки в шапке.

   Спрашиваем их до корзины: порог бесплатной доставки зависит от зоны,
   а зона — от точки на карте.
   --------------------------------------------------------------------------- */
.select-city {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    margin-right: 2rem;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
}

/* Булавка из bundle.css в колонке встаёт отдельной строкой — гасим её. */
.select-city::before { content: none; }

.select-city > span {
    font: 600 1.5rem/1.2em Manrope, Roboto, Helvetica, Arial, sans-serif;
    color: #111010;
}

.select-city:hover > span { border-bottom: 1px dotted #111010; }

.select-city__address {
    max-width: 260px;
    overflow: hidden;
    color: #8a8177;
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.select-city:hover .select-city__address { color: #8c3d52; }

/* --- попап адреса --------------------------------------------------------- */
#popupSelCity.lc-delivery-popup {
    width: 560px;
    max-width: 100%;
    padding: 32px 36px 36px;
    text-align: left;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    color: #111010;
}

.lc-delivery-popup__title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
}

.lc-delivery-popup__hint {
    margin: 0 0 20px;
    color: #8a8177;
    font-size: 13px;
    line-height: 1.45;
}

.lc-delivery-popup__field {
    display: block;
    position: relative;
    margin-bottom: 16px;
}

.lc-delivery-popup__field > span {
    display: block;
    margin-bottom: 6px;
    color: #8a8177;
    font-size: 12px;
}

.lc-delivery-popup__field select,
.lc-delivery-popup__field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ddd7cc;
    background: #fff;
    color: #111010;
    font-size: 15px;
}

.lc-delivery-popup__field input:focus,
.lc-delivery-popup__field select:focus {
    border-color: #111010;
    outline: none;
}

.lc-delivery-popup__suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 250px;
    margin: 4px 0 0;
    padding: 6px 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #e7e1dc;
    box-shadow: 0 12px 28px rgba(17, 16, 16, .12);
}

.lc-delivery-popup__suggest li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
}

.lc-delivery-popup__suggest li:hover,
.lc-delivery-popup__suggest li.is-active { background: #f7f5f3; }

.lc-delivery-popup__suggest .lc-suggest__where {
    color: #8a8177;
    font-size: 12px;
}

.lc-delivery-popup__msg {
    min-height: 18px;
    margin: 0 0 10px;
    font-size: 13px;
}

.lc-delivery-popup__map {
    height: 320px;
    border: 1px solid #e7e1dc;
}

.lc-delivery-popup__save {
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border: 0;
    background: #111010;
    color: #fff;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.lc-delivery-popup__save:hover { background: #2b2725; }

@media (max-width: 620px) {
    #popupSelCity.lc-delivery-popup { padding: 24px 18px 28px; }
    .lc-delivery-popup__title { font-size: 22px; }
    .lc-delivery-popup__map { height: 240px; }
    .select-city__address { max-width: 180px; }
}

/* ---------------------------------------------------------------------------
   Персональная подборка на главной.

   Блок приезжает отдельным запросом, когда карусели уже инициализированы,
   поэтому он не карусель, а обычная сетка.
   --------------------------------------------------------------------------- */
.recommend-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
}

/* карточки из //blocks/items рассчитаны на каталожную сетку с float */
.recommend-grid .goodsBlock {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}

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

@media (max-width: 760px) {
    .recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}

/* Видео в баннере-герое ведёт себя как картинка макета. */
.lx .lx-hero__img video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Знак в кружке сторис: в макете это небольшая иконка по центру,
   а не изображение на всю площадь круга. */
.lx .lx-story__glyph {
    width: 26px;
    height: 26px;
    max-width: none;
}

/* Постраничная навигация каталога: виджет Yii рисует ul.pagination,
   в макете такого блока нет — приводим к его типографике. */
.lx .lx-pager ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lx .lx-pager ul.pagination li a,
.lx .lx-pager ul.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e7e1dc;
    color: #111010;
    font-size: 14px;
}
.lx .lx-pager ul.pagination li.active a,
.lx .lx-pager ul.pagination li.active span {
    border-color: #111010;
    background: #111010;
    color: #fff;
}
.lx .lx-pager ul.pagination li.disabled span { color: #bdb6b1; }

/* Кнопка «в корзину» на карточке.

   Вид даёт .lx-add из макета. Класс .addCart оставлен ради обработчика,
   который и кладёт товар, — но он же пишет в элемент текст «В корзине»,
   а тот в круг 42px не влезает. Поэтому текст гасим, а знак рисуем
   псевдоэлементом: .text() до него не достаёт.
   --------------------------------------------------------------------------- */
.lx .lx-add.addCart { font-size: 0; overflow: hidden; }
.lx .lx-add.addCart::before { content: '+'; font-size: 19px; line-height: 1; }

.lx .lx-add.addCart.__in-cart {
    background: #111010;
    border-color: #111010;
    color: #fff;
}

.lx .lx-add.addCart.__in-cart::before { content: '✓'; font-size: 16px; }

/* ---------------------------------------------------------------------------
   Плюс на карточке товара.

   По умолчанию это белый кружок с тонкой рамкой — поверх светлой
   фотографии его почти не видно. Тень отделяет его от снимка всегда, а при
   наведении на карточку он становится тёмным: понятно, куда нажимать, ещё
   до того, как курсор дошёл до самого кружка.
   --------------------------------------------------------------------------- */
.lx .lx-card .lx-add {
    box-shadow: 0 2px 10px rgba(17, 16, 16, .14);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.lx .lx-card:hover .lx-add {
    background: #111010;
    border-color: #111010;
    color: #fff;
}

/* Курсор на самом кружке — цвет акцента, видно, что нажмётся именно он. */
.lx .lx-card:hover .lx-add:hover,
.lx .lx-card .lx-add:hover {
    background: #6b5cd6;
    border-color: #6b5cd6;
    color: #fff;
    transform: scale(1.06);
}

/* Товар уже в корзине — галочка остаётся тёмной и на наведении. */
.lx .lx-card:hover .lx-add.__in-cart,
.lx .lx-card .lx-add.__in-cart:hover {
    background: #111010;
    border-color: #111010;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Формы кабинета внутри витрины.

   Разметку полей отдаёт Yii (label + input в .string), а ресет .lx снимает
   с них всё оформление — задаём его явно, в типографике макета.
   --------------------------------------------------------------------------- */
.lx .lx-form { display: flex; flex-direction: column; max-width: 620px; }

.lx .lx-form .string {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

/* Легаси-клирфикс «form .string::after{clear:both;display:block;content:""}»
   был рассчитан на float-вёрстку — внутри флекса этот пустой блок становится
   настоящим вторым флекс-элементом и съедает один gap: у .string.addr это
   было видно как поле «улица и дом», не дотягивающее до правого края на
   14px (значение gap), у обычного .string — лишние 6px под полем. */
.lx .lx-form .string::after { content: none; }

.lx .lx-form .string.addr { flex-direction: row; gap: 14px; align-items: flex-end; }
.lx .lx-form .string.addr .col { display: flex; flex-direction: column; gap: 6px; }
.lx .lx-form .string.addr .col.second { flex: 1 1 auto; }
.lx .lx-form .string.addr .col.third,
.lx .lx-form .string.addr .col.fourth { flex: 0 0 110px; }

/* Город — производная от метки, поэтому это строка, а не поле выбора:
   выбранные порознь город и адрес разъезжались. */
.lx .lx-form .lx-addr-city {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lx .lx-form .lx-addr-city__label { color: #8f8b88; font-size: 12px; }
.lx .lx-form .lx-addr-city__name { font-size: 14px; font-weight: 600; color: #111010; }

/* Резервное поле «дом» (набор 28-adres-odno-pole): разворачивается внутри
   строки «улица», только если подсказка/геокодер не дали номер дома
   отдельно. Своя ширина, а не на всю строку — иначе выглядело бы как
   приглашение написать туда что-то длинное. */
.lx .lx-form .string.addr .lx-addr-house { flex: 0 0 140px; max-width: 50%; }

/* Короткие поля адреса — подъезд/квартира/этаж/домофон
   (fix_verstka/КОРРЕКЦИИ-5.md, п.2): одна настоящая CSS-сетка 2×2, прямо
   на четырёх полях без обёрток-строк. Раньше та же раскладка держалась на
   display:contents + order по двум разным .string.addr — трюк трижды
   давал разную ширину полей и несовпадающие строки; настоящий grid этого
   не допускает в принципе. Без media-запроса: 2 колонки что на телефоне,
   что на десктопе. */
.lx .lx-form .lx-addr__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.lx .lx-form .lx-addr__grid .lx-addr__field { width: 100%; box-sizing: border-box; margin-bottom: 0; }

.lx .lx-form label {
    color: #8a8177;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: lowercase;
}

.lx .lx-form input[type=text],
.lx .lx-form input[type=tel],
.lx .lx-form input[type=email],
.lx .lx-form input[type=password],
.lx .lx-form select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #ddd7cc;
    background: #fff;
    color: #111010;
    font-size: 15px;
}

/* textarea сюда не входила — без явного font-size она брала унаследованный
   от .lx (14px) размер, но плейсхолдер внутри неё казался крупнее соседних
   полей и подписи (12px). Тот же размер и цвет, что у остальных полей. */
.lx .lx-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd7cc;
    background: #fff;
    color: #111010;
    font: inherit;
    font-size: 15px;
    resize: vertical;
}

.lx .lx-form input:focus,
.lx .lx-form select:focus,
.lx .lx-form textarea:focus { border-color: #111010; outline: none; }

.lx .lx-form input::placeholder,
.lx .lx-form textarea::placeholder { color: #b0a9a3; font-size: 14.5px; }

/* chosen подменяет select своей разметкой (div.chosen-container) — она вне
   правила выше и без явного font-size тянет то 13px из своих дефолтных
   стилей, то унаследованный размер побольше, в зависимости от порядка
   подключения css. Задаём его явно, как у остальных полей формы.
   Жирность и шрифт — отдельно: старый .formOrder .string .blSelect
   .chosen-container из style.css (старая витрина) держит их через шорткод
   «font: bold 1.6em Roboto» с той же специфичностью (4 класса) — этот блок
   перебивал только размер, а «город» так и оставался жирным Roboto среди
   обычных по начертанию полей формы. */
.lx .lx-form .blSelect .chosen-container,
.lx .lx-form .blSelect .chosen-single,
.lx .lx-form .blSelect .chosen-single span,
.lx .lx-form .blSelect .chosen-search input,
.lx .lx-form .blSelect .chosen-results,
/* chosen() не всегда успевает подменить select своей разметкой (проверено
   на test) — пока это просто <select>, тот же старый .formOrder .string
   .blSelect select с тем же числом классов бьёт это правило через порядок
   подключения файлов на мобильных брейкпоинтах (999/767/479px) своим
   «font: bold 1.6em Roboto». Перекрываем и голый select тоже. */
.lx .lx-form .blSelect select {
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
}

/* chosen.css по умолчанию скругляет и сам «селект», и выпадающий список —
   в этой форме поля прямоугольные, оставлять скругление только тут же
   было бы рассинхроном с остальными. */
.lx .lx-form .blSelect .chosen-container,
.lx .lx-form .blSelect .chosen-single,
.lx .lx-form .blSelect .chosen-drop {
    border-radius: 0;
}

/* Тот же голый select без chosen ловит легаси-высоту/скругление/паддинг
   «.formOrder .string .blSelect select» (тоже 3 класса — тот же порядок
   подключения файлов решает победителя). Возвращаем те же значения, что
   у текстовых полей рядом (см. .lx .lx-form input[type=text] выше). */
.lx .lx-form .blSelect select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #ddd7cc;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.lx .lx-form .btn_Form {
    align-self: flex-start;
    min-width: 260px;
    height: 52px;
    padding: 0 30px;
    border: 0;
    background: #111010;
    color: #fff;
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

.lx .lx-form .btn_Form:hover { background: #2b2725; }

.lx .lx-form .help-block,
.lx .lx-form .mapHint,
.lx .lx-form .mapMsg { color: #8a8177; font-size: 13px; }

.lx .lx-form .has-error input { border-color: #8c3d52; }

/* «Сделать основным адресом доставки» — на всех разрешениях, не только
   на мобильной (раньше жило только в lux-cabinet-mobile.css, на десктопе
   оставался приглушённый мелкий лейбл-подпись и легаси-иконка вместо
   чекбокса). */
.lx .lx-form .lx-addr-main { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 13.5px; color: #111010; }

/* Общий сброс .lx (lux-shop.css) снимает -webkit-appearance у всех полей,
   а без него accent-color красит только галочку — сам квадрат остаётся
   невидимым (нет ни рамки, ни фона). Тем же приёмом, что и в .lc-check
   (lux-checkout.css), возвращаем нативный вид точечно, только здесь. */
.lx .lx-form .lx-addr-main input { width: 18px; height: 18px; margin: 0; -webkit-appearance: auto; appearance: auto; accent-color: #111010; }

/* Глобальный сброс старой style.css прячет ЛЮБОЙ input[type=checkbox]
   (!important) и рисует вместо него свою иконку через label::before с
   абсолютным позиционированием — она не знает про flex;gap:10px этого
   блока и оказывается смещена относительно подписи и полей формы рядом.
   Возвращаем настоящий чекбокс (тоже !important — иначе не перебить) и
   гасим легаси-иконку, чтобы не рисовались обе сразу. */
.lx .lx-form .lx-addr-main input[type=checkbox] { display: inline-block !important; }
.lx .lx-form .lx-addr-main label::before { content: none !important; }

/* Легаси-лейбл рядом с чекбоксом по умолчанию мелкий, серый и с отступом
   слева под старую иконку — здесь подпись, а не служебная пометка. */
.lx .lx-form .lx-addr-main label { margin: 0; padding-left: 0; color: inherit; font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; }

/* Разметка старой мини-корзины нужна её же скрипту (пересчёт сумм и
   счётчика), но в витрине не показывается. */
.lx-legacy-cart { display: none !important; }

/* ---------------------------------------------------------------------------
   Уведомление о добавлении в корзину.

   Заменяет попап «оформить заказ / продолжить покупки»: тот перекрывал
   страницу ради вопроса, на который почти всегда отвечают «продолжить».
   --------------------------------------------------------------------------- */
.lx-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100020;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 320px;
    padding: 16px 20px;
    background: #111010;
    color: #fff;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    box-shadow: 0 14px 34px rgba(17, 16, 16, .28);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.lx-toast.is-on { opacity: 1; transform: none; pointer-events: auto; }

.lx-toast__key {
    color: #b9b2ab;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lx-toast__name { font-size: 14px; line-height: 1.35; }

.lx-toast__go {
    margin-top: 6px;
    color: #fff;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    align-self: flex-start;
}

.lx-toast__go:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 600px) {
    .lx-toast { right: 16px; left: 16px; bottom: 16px; max-width: none; }
}

/* Пол и галочки рассылки в настройках кабинета: разметку даёт Yii,
   ресет .lx снимает с них оформление. */
.lx .lx-form .lx-radios { display: flex; gap: 22px; }

.lx .lx-form .lx-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111010;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.lx .lx-form .lx-radio input { width: auto; height: auto; margin: 0; }

.lx .lx-form .string.lx-check {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.lx .lx-form .string.lx-check input { width: auto; height: auto; margin: 0; }

.lx .lx-form .string.lx-check label {
    margin: 0;
    color: #111010;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

/* Поле с глазом внутри формы кабинета: обёртка должна занимать всю
   ширину строки, иначе кнопка встаёт не у края поля. */
.lx .lx-form .lc-pass { display: block; width: 100%; }

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

   Форм на странице три, уходят они разными адресами и сохраняются
   независимо. Карточка со своей кнопкой у каждой — иначе непонятно, что
   именно сохраняет кнопка.
   --------------------------------------------------------------------------- */
.lx .lx-panel {
    padding: 30px 32px;
    border: 1px solid #e7e1dc;
    background: #fff;
}

.lx .lx-panel + .lx-panel { margin-top: 18px; }

.lx .lx-panel__head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 24px;
}

.lx .lx-panel__head b {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.lx .lx-panel__head span { color: #8a8177; font-size: 13px; line-height: 1.45; }

.lx .lx-panel__foot { margin-top: 6px; }

/* Внутри карточки форма занимает всю ширину: ограничение в 620px
   рассчитано на страницу без карточек. */
.lx .lx-panel .lx-form { max-width: none; }

.lx .lx-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.lx .lx-fields .string { margin-bottom: 20px; }
.lx .lx-fields .string.lx-wide { grid-column: 1 / -1; }

.lx .lx-hint {
    display: block;
    margin-top: 6px;
    color: #8a8177;
    font-size: 12.5px;
}

/* Пол — не голые радиокнопки, а выбор из двух вариантов. */
.lx .lx-form .lx-radios { display: flex; gap: 10px; flex-wrap: wrap; }

.lx .lx-form .lx-radio {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 18px;
    border: 1px solid #ddd7cc;
    color: #111010;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.lx .lx-form .lx-radio input { width: auto; height: auto; margin: 0; }
.lx .lx-form .lx-radio:has(input:checked) { border-color: #111010; }

/* Галочки рассылки: подпись рядом, строки с воздухом. */
.lx .lx-form .string.lx-check {
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
}

.lx .lx-form .string.lx-check input {
    width: auto;
    height: auto;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.lx .lx-form .string.lx-check label {
    margin: 0;
    color: #111010;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

@media (max-width: 760px) {
    .lx .lx-panel { padding: 22px 18px; }
    .lx .lx-fields { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Нижняя панель с суммой и главным действием.

   В корзине и оформлении итог с кнопкой уезжают под список товаров, а на
   карточке — под описание. На телефоне до них приходилось листать обратно.
   На широком экране панель не нужна: там всё видно сразу.
   --------------------------------------------------------------------------- */
.lc-stickybar { display: none; }

@media (max-width: 900px) {
    .lc-stickybar.is-ready {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #e7e1dc;
        box-shadow: 0 -10px 26px rgba(17, 16, 16, .12);
        transform: translateY(0);
        transition: transform .2s ease;
    }

    /* Настоящая кнопка на экране — панель уезжает вниз. */
    .lc-stickybar.is-ready.is-hidden { transform: translateY(110%); }

    .lc-stickybar__sum {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .lc-stickybar__key {
        color: #8a8177;
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .lc-stickybar__val {
        font-size: 19px;
        font-weight: 700;
        white-space: nowrap;
    }

    .lc-stickybar__btn {
        flex: 1 1 auto;
        height: 52px;
        padding: 0 18px;
        border: 0;
        background: #111010;
        color: #fff;
        font-size: 12.5px;
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .lc-stickybar__btn[disabled] { opacity: .5; }

    /* Место под панелью, чтобы она не накрывала последний блок страницы. */
    body:has(.lc-stickybar.is-ready:not(.is-hidden)) { padding-bottom: 84px; }
}

/* ---------------------------------------------------------------------------
   Слайд героя без текста.

   Текстовые поля баннера необязательные. Когда их не заполняют, вторая
   половина слайда оставалась пустой белой — картинка теперь занимает всю
   ширину, как большой баннер и задуман.
   --------------------------------------------------------------------------- */
.lx .lx-hero__in--bare { grid-template-columns: 1fr; }

.lx .lx-hero__in--bare .lx-hero__img {
    height: 100%;
    display: block;
}

.lx .lx-hero__in--bare .lx-hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 760px) {
    /* На телефоне обычный слайд отдаёт картинке 320px и место под текст.
       Здесь текста нет, поэтому картинка забирает высоту себе. */
    .lx .lx-hero__in--bare .lx-hero__img { height: 420px; }
}

/* ---------------------------------------------------------------------------
   Слайд героя «текст поверх картинки».

   Брендовые баннеры приходят одним фото на всю ширину, а надпись,
   заголовок и кнопка ложатся на него слева. Половинная раскладка с серой
   подложкой для них не годится — приходилось рисовать текст в картинке.
   Цвет текста выбирается в админке: на светлом фото тёмный, на тёмном —
   светлый.
   --------------------------------------------------------------------------- */
.lx .lx-hero__in--overlay { grid-template-columns: 1fr; position: relative; }

.lx .lx-hero__in--overlay .lx-hero__img { height: 100%; display: block; }

.lx .lx-hero__in--overlay .lx-hero__img img,
.lx .lx-hero__in--overlay .lx-hero__img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lx .lx-hero__in--overlay .lx-hero__txt {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 620px;
    padding: 0 96px;
    z-index: 1;
}

.lx .lx-hero__in--light .lx-hero__kicker,
.lx .lx-hero__in--light .lx-hero__title,
.lx .lx-hero__in--light .lx-hero__text { color: #fff; }

.lx .lx-hero__in--light .lx-hero__btn { background: #fff; color: var(--ink); }

@media (max-width: 1240px) {
    .lx .lx-hero__in--overlay .lx-hero__txt { padding: 0 84px; }
}

@media (max-width: 900px) {
    /* На телефоне картинка выше обычной (там текст под ней, здесь — на
       ней), а текст прижат к низу, над точками слайдера. Стрелки
       слайдера стоят на 160px и в текст не попадают. */
    .lx .lx-hero__in--overlay .lx-hero__img { height: 520px; }
    .lx .lx-hero__in--overlay .lx-hero__txt {
        top: auto;
        bottom: 56px;
        transform: none;
        max-width: none;
        padding: 0 28px;
        gap: 12px;
    }
    .lx .lx-hero__in--overlay .lx-hero__title { font-size: 34px; }
    /* На узком экране от фото остаётся середина, и текст почти всегда
       ложится на сам товар. Мягкий градиент снизу даёт ему подложку:
       светлую под тёмный текст, тёмную под светлый. */
    .lx .lx-hero__in--overlay .lx-hero__img::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 62%;
        background: linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 100%);
        pointer-events: none;
    }
    .lx .lx-hero__in--overlay .lx-hero__img { position: relative; }
    .lx .lx-hero__in--light .lx-hero__img::after {
        background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%);
    }
}

/* ---------------------------------------------------------------------------
   Кабинет: страница одного заказа.

   Список заказов уже был на новой вёрстке, а сам заказ открывался старой
   страницей со своей шапкой и таблицей.
   --------------------------------------------------------------------------- */
.lx .lx-ordv { display: flex; flex-direction: column; }

.lx .lx-ordv__head,
.lx .lx-ordv__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 130px 140px;
    gap: 12px 20px;
    align-items: center;
}

.lx .lx-ordv__head {
    padding-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mute);
    border-bottom: 1px solid var(--line);
}

.lx .lx-ordv__head span:not(:first-child),
.lx .lx-ordv__row > span:not(.lx-ordv__name) { text-align: right; }

.lx .lx-ordv__row { padding: 18px 0; border-bottom: 1px solid #f2f0ee; }

.lx .lx-ordv__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx .lx-ordv__name span { font-size: 12px; color: var(--mute); }

.lx .lx-sum { display: flex; flex-direction: column; gap: 10px; }

.lx .lx-sum__line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.lx .lx-sum__line span { color: var(--mute); }

.lx .lx-sum__line--total {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 17px;
}

.lx .lx-sum__line--total span { color: var(--ink, #111010); }

.lx .lx-facts { display: flex; flex-direction: column; gap: 14px; }
.lx .lx-facts > span { display: block; line-height: 1.5; }

.lx .lx-muted { color: var(--mute); font-size: 13px; }

@media (max-width: 760px) {
    /* Таблица в четыре колонки на телефоне не помещается — строка становится
       карточкой, у чисел появляется подпись из data-key. */
    .lx .lx-ordv__head { display: none; }

    .lx .lx-ordv__row { grid-template-columns: 1fr; gap: 6px; }

    .lx .lx-ordv__row > span:not(.lx-ordv__name) {
        display: flex;
        justify-content: space-between;
        text-align: left;
        font-size: 13px;
    }

    .lx .lx-ordv__row > span[data-key]::before {
        content: attr(data-key);
        color: var(--mute);
    }
}

/* ---------------------------------------------------------------------------
   Блог на главной.

   Блок был на старой главной и не переехал на новую вёрстку.
   --------------------------------------------------------------------------- */
.lx .lx-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.lx .lx-posts .lx-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    color: inherit;
}

.lx .lx-post__img {
    display: block;
    aspect-ratio: 3 / 2;
    background: #f2f0ee center/cover no-repeat;
}

.lx .lx-post__name {
    font-size: 17px;
    line-height: 1.35;
}

.lx .lx-post:hover .lx-post__name { color: var(--violet, #6b5cd6); }

.lx .lx-post__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mute);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .lx .lx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 600px) {
    .lx .lx-posts { grid-template-columns: minmax(0, 1fr); }
}

/* --- приглашение друга ------------------------------------------------------
   Раньше на странице бонусов был только код: что с ним делать и куда его
   вводить, нигде не говорилось. */
.lx .lx-invite {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.lx .lx-invite__url {
    flex: 1 1 260px;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d9d4cf;
    background: #fff;
    font-size: 13px;
    color: #4a443e;
}

.lx .lx-invite__copy { flex: none; height: 44px; }

@media (max-width: 600px) {
    .lx .lx-invite__url,
    .lx .lx-invite__copy { flex: 1 1 100%; }
}

/* --- ролик товара в галерее -------------------------------------------------
   Видео живёт в том же ряду миниатюр, что и фотографии, и отличается
   значком «плей»: иначе непонятно, что откроется. */
.lx .lx-thumb--video { position: relative; }

.lx .lx-thumb--video::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin: -8px 0 0 -5px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 3px rgba(17, 16, 16, .5));
}

.lx .lx-thumb--video::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 16, 16, .22);
}

.lx .lx-gallery__main video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f2f0ee;
}

/* Подсказка про исправленный запрос на странице поиска. */
.lx .lx-sr__fixed {
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--mute);
}

.lx .lx-sr__fixed b { color: var(--ink, #111010); }

/* ---------------------------------------------------------------------------
   Блог: список и страница статьи.

   Обе страницы оставались на старой вёрстке — со своей шапкой, подвалом и
   типографикой.
   --------------------------------------------------------------------------- */
.lx .lx-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.lx .lx-post__date {
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
}

.lx .lx-article { max-width: 820px; }

/* Заголовок и текст — одной колонкой, как в статье из блоков (700px).
   Раньше заголовок центрировало общее h1 из старой темы по всей ширине
   820px, а текст под ним стоял колонкой 640px от левого края: центры не
   совпадали, и страница выглядела перекошенной. У статьи заголовок слева,
   у текстовых страниц («Доставка», «О магазине») — по центру той же
   колонки: так их привыкли видеть. Выравнивание внутри текста задаётся
   кнопками редактора. */
.lx .lx-article__title { max-width: 700px; margin: 18px 0 8px; text-align: left; }
.lx .lx-page .lx-article__title { text-align: center; }
.lx .lx-article .lx-prose { max-width: 700px; }

.lx .lx-article__date {
    display: block;
    margin-bottom: 26px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
}

.lx .lx-article__cover {
    aspect-ratio: 16 / 9;
    margin-bottom: 30px;
    background: #f2f0ee center/cover no-repeat;
}

.lx .lx-article__body { font-size: 15px; line-height: 1.7; }
.lx .lx-article__body p { margin: 0 0 16px; }
.lx .lx-article__body h2 { margin: 32px 0 14px; font-size: 22px; font-weight: 500; }
.lx .lx-article__body h3 { margin: 26px 0 12px; font-size: 18px; font-weight: 500; }
.lx .lx-article__body ul,
.lx .lx-article__body ol { margin: 0 0 16px; padding-left: 22px; }
.lx .lx-article__body ul li { list-style: disc; margin-bottom: 6px; }
.lx .lx-article__body ol li { list-style: decimal; margin-bottom: 6px; }
.lx .lx-article__body img { margin: 20px 0; }

.lx .lx-article__body blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--violet, #6b5cd6);
    color: var(--mute);
    font-size: 16px;
}

/* Предупреждение о сгорании бонусов в кабинете. */
.lx .lx-tile__note--warn { color: #b3372c; }

/* Товар под заказ: подпись не должна быть такой же зелёной, как «в наличии». */
.lx .lx-buy__stock--wait { color: var(--mute); }

/* ---------------------------------------------------------------------------
   Оформление внутри текстовых блоков витрины.

   Сброс в начале lux-checkout.css снимает списки и курсив со всего, что
   внутри .lx: маркеры пропадали, а курсив выходил прямым — казалось, что
   кнопки редактора не работают. Внутри самих текстов оформление возвращаем.
   --------------------------------------------------------------------------- */
.lx .lx-prose ul,
.lx .lx-article__body ul { margin: 0 0 16px; padding-left: 22px; }

.lx .lx-prose ol,
.lx .lx-article__body ol { margin: 0 0 16px; padding-left: 22px; }

.lx .lx-prose ul li,
.lx .lx-article__body ul li { list-style: disc; margin-bottom: 6px; }

.lx .lx-prose ol li,
.lx .lx-article__body ol li { list-style: decimal; margin-bottom: 6px; }

.lx .lx-prose i,
.lx .lx-prose em,
.lx .lx-prose span[style*="italic"],
.lx .lx-article__body i,
.lx .lx-article__body em,
.lx .lx-article__body span[style*="italic"] { font-style: italic; }

.lx .lx-prose b,
.lx .lx-prose strong,
.lx .lx-article__body b,
.lx .lx-article__body strong { font-weight: 600; }

.lx .lx-prose a,
.lx .lx-article__body a {
    color: var(--violet, #6b5cd6);
    border-bottom: 1px solid currentColor;
}

.lx .lx-prose blockquote,
.lx .lx-article__body blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--violet, #6b5cd6);
    color: var(--mute);
    font-size: 16px;
}

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

   Страница звала оставить отзыв, а оставить его было негде.
   --------------------------------------------------------------------------- */
.lx .lx-rev-add {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.lx .lx-rev-add b { font-size: 16px; font-weight: 500; }
.lx .lx-rev-add--guest span { color: var(--mute); font-size: 14px; line-height: 1.5; }

.lx .lx-rate { display: flex; gap: 4px; }

.lx .lx-rate button {
    border: 0;
    background: none;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: #d9d4cf;
    cursor: pointer;
}

.lx .lx-rate button.is-on { color: #e0a800; }

.lx .lx-rev-add textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9d4cf;
    background: #fff;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

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

.lx .lx-rev-add__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lx .lx-rev-add__foot small { color: var(--mute); font-size: 12.5px; }

.lx .lx-rev-add__msg { font-size: 13px; color: var(--ok, #1f8a4c); }
.lx .lx-rev-add__msg.is-bad { color: #b3372c; }

/* ---------------------------------------------------------------------------
   Статья из блоков.

   Лонгрид собирается кусками — абзац, заголовок, фото, галерея, видео,
   цитата. Ширину текста держим читаемой (около 70 знаков в строке), а
   картинкам и видео разрешаем выходить шире: ради них статью и открывают.
   --------------------------------------------------------------------------- */

.lx .lx-blk { margin: 0 0 26px; }
.lx .lx-blk--text { max-width: 700px; font-size: 16px; line-height: 1.75; }
.lx .lx-blk--text p { margin: 0 0 16px; }
.lx .lx-blk--text p:last-child { margin-bottom: 0; }

.lx .lx-blk__head {
    max-width: 700px;
    margin: 44px 0 16px;
    font-weight: 500;
    line-height: 1.25;
}

.lx h2.lx-blk__head { font-size: 26px; }
.lx h3.lx-blk__head { font-size: 20px; }
.lx .lx-blk__head.is-center { text-align: center; }

.lx .lx-blk--photo { margin: 32px 0; }
.lx .lx-blk--photo img { display: block; width: 100%; margin: 0; }
.lx .lx-blk--photo.is-wide { margin-left: calc((820px - 100vw) / 2); }

.lx .lx-blk__note {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mute);
}

.lx .lx-blk__grid {
    display: grid;
    gap: 12px;
}

.lx .lx-blk--cols-2 .lx-blk__grid { grid-template-columns: repeat(2, 1fr); }
.lx .lx-blk--cols-3 .lx-blk__grid { grid-template-columns: repeat(3, 1fr); }
.lx .lx-blk--cols-4 .lx-blk__grid { grid-template-columns: repeat(4, 1fr); }

.lx .lx-blk__cell { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f2f0ee; }
.lx .lx-blk__cell img { width: 100%; height: 100%; object-fit: cover; margin: 0; }

.lx .lx-blk__frame { position: relative; padding-top: 56.25%; background: #f2f0ee; }
.lx .lx-blk__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lx .lx-blk--quote {
    max-width: 700px;
    margin: 34px 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--violet, #6b5cd6);
}

.lx .lx-blk--quote p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink); }

.lx .lx-blk--quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mute);
}

@media (max-width: 720px) {
    .lx .lx-blk--photo.is-wide { margin-left: 0; }
    .lx .lx-blk--cols-3 .lx-blk__grid,
    .lx .lx-blk--cols-4 .lx-blk__grid { grid-template-columns: repeat(2, 1fr); }
}