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

   Спрашиваем их до корзины: порог бесплатной доставки зависит от зоны,
   а зона — от точки на карте.
   --------------------------------------------------------------------------- */
.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; }

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

   Разметку полей отдаёт 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;
}

.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 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;
}

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

.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; }

/* Разметка старой мини-корзины нужна её же скрипту (пересчёт сумм и
   счётчика), но в витрине не показывается. */
.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; }
}