/* ==========================================================================
   Мебель Массив — доработки вёрстки под OpenCart.
   Всё, чего не было в статичном макете: счётчики в шапке, уведомления,
   состояния «пусто», служебные мелочи. style.css из макета не трогаем.
   ========================================================================== */

/* ---------- счётчики на иконках шапки ---------- */
.mebel-count-link {
  position: relative;
}

.mebel-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #c8f169;
  color: #1f1f1f;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}

/* ---------- всплывающее уведомление ---------- */
.mebel-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  max-width: min(92vw, 460px);
  padding: 13px 20px;
  border-radius: 12px;
  background: #1f1f1f;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .22s ease, transform .22s ease;
  visibility: hidden;
}

.mebel-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.mebel-toast.is-error {
  background: #b3261e;
}

@media (max-width: 991.98px) {
  .mebel-toast {
    bottom: 84px; /* над нижней панелью */
  }
}

/* ---------- пустая категория ---------- */
.cat-empty {
  padding: 48px 0;
  text-align: center;
}

.cat-empty__text {
  margin-bottom: 20px;
  color: #8a8a8a;
  font-size: 16px;
}

/* ---------- переносим текст описаний из админки в макетную типографику ----------
   Правило намеренно узкое. Раньше в списке был ещё `.ptabs__content img`, и он
   по специфичности перебивал собственные размеры картинок вёрстки, попавших
   внутрь вкладок: у баннера «Сделаем индивидуальный размер» ломалась высота,
   а фотографии в отзывах схлопывались в полоску (`height: auto` вместо
   фиксированных 110px). Весь html из админки внутри вкладок лежит в `.prose`,
   так что отдельное правило на `.ptabs__content` не нужно. */
.prose img,
.cat-about img:not([class*="__bg"]) {
  max-width: 100%;
  height: auto;
}

.prose table,
.ptabs__content table {
  max-width: 100%;
}

/* ---------- галерея товара: одинаковая высота слайдов ---------- */
.gallery-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- пагинация OpenCart внутри макетного пейджера ---------- */
.pager .pagination {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager .pagination > li > a,
.pager .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  color: #1f1f1f;
  font-size: 14px;
  text-decoration: none;
}

.pager .pagination > li.active > span,
.pager .pagination > li > a:hover {
  border-color: #1f1f1f;
  background: #1f1f1f;
  color: #fff;
}

/* ==========================================================================
   Адаптация элементов макета под реальную разметку OpenCart
   ========================================================================== */

/* .swatch в макете — <button>, у нас <label> с radio внутри */
label.swatch {
  display: inline-block;
  cursor: pointer;
}

/* .consult__link и подобные ссылки макета, ставшие кнопками */
button.consult__link,
button.sizes-buy,
button.cat-more__btn {
  border: 0;
  background: none;
  cursor: pointer;
}

/* В макете «Заказать консультацию» — ссылка, у нас <button> (открывает модалку).
   Кнопка внутри flex-колонки .consult__text растягивается на всю ширину, а текст
   в ней по умолчанию центрируется — подпись уезжала в середину, хотя заголовок
   «Тяжело выбрать?» прижат влево. Возвращаем выравнивание по левому краю. */
button.consult__link {
  align-self: flex-start;
  padding: 0;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Кнопка «В корзину» в карточке товара на мобильных.

   В макете у неё нет горизонтальных отступов, а шрифт 14px. Ширина карточки в
   ленте считается от экрана: на 390px это 141px, из которых 44 занимает
   «в избранное», и кнопке остаётся 87px. «В корзину» 14-м кеглем плюс значок —
   100px, поэтому подпись ломалась на две строки, а на широких экранах текст
   всё равно упирался в края.

   Считаем по замерам ширины кнопки: 360px → 85, 390 → 87, 440 → 107,
   768 → 119, 991 → 175. Отсюда три ступени ниже. white-space: nowrap
   гарантирует одну строку при любом раскладе.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .product-card__foot {
    gap: 8px;
  }

  .product-card__foot .btn-cart {
    min-width: 0;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
  }

  .product-card__foot .btn-cart i {
    flex: none;
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .product-card__foot .btn-cart {
    font-size: 12px;
  }
}

/* На узких карточках подпись важнее значка: без него остаётся место на
   нормальные отступы, с ним подпись снова полезла бы в две строки. */
@media (max-width: 575.98px) {
  .product-card__foot .btn-cart {
    padding: 0 10px;
  }

  .product-card__foot .btn-cart i {
    display: none;
  }
}

/* 360px — самый узкий из ходовых экранов, там кнопке не хватает буквально
   пары пикселей; берём их у квадрата «в избранное» (40px — всё ещё
   комфортная зона нажатия). */
@media (max-width: 400px) {
  .product-card__foot .btn-fav-sq {
    width: 40px;
    height: 40px;
  }

  .product-card__foot .btn-cart {
    height: 40px;
    padding: 0 8px;
  }
}

/* Баннер «Сделаем индивидуальный размер».
   В макете фото задавало высоту карточки (img с height:120px), а текст лежал
   поверх абсолютным блоком. На реальных заголовках в три строки текст выше
   фотографии, и снизу оставалась полоса одной только тёмной подложки.
   Меняем местами: высоту задаёт текст, фотография растягивается на всю
   карточку. Затемнение остаётся, но теперь всегда поверх фото. */
.custom-size__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-size__inner {
  position: relative;
  inset: auto;
  min-height: 120px;
}

.megamenu__promo .custom-size__inner {
  min-height: 150px;
}

a.cat-more__btn,
a.sizes-buy {
  text-decoration: none;
}

/* чекбоксы опций товара */
.mebel-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* оценка в форме отзыва */
.mebel-rating-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.mebel-rating-input label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
}

/* «Показывать по N» рядом с сортировкой */
.cat-limit {
  margin-left: 8px;
}

/* блок отзывов OpenCart внутри новой вкладки */
#review .table,
#review table {
  width: 100%;
  margin-bottom: 16px;
  font-size: 14px;
}

#review td {
  padding: 6px 8px;
  vertical-align: top;
}

#review hr {
  border: 0;
  border-top: 1px solid #e6e6e6;
  margin: 14px 0;
}

/* сообщения OpenCart, попадающие в новую вёрстку */
.mebel-theme .alert {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}

.mebel-theme .alert-danger {
  background: #fdecea;
  color: #b3261e;
}

.mebel-theme .alert-success {
  background: #eef7e3;
  color: #3d6b12;
}

/* ---------- старые модалки модуля feedback ----------
   Модуль feedback стоит в content_top почти всех раскладок и печатает три
   модалки (.modalcallback / .modalfeedback / .modalceofeedback). В старой теме
   их прятал style.css, уводя за экран, и открывал allscript.js по классу
   .active. В новой вёрстке этих правил нет, поэтому модалки вываливались
   в контент обычным текстом с формами.

   На страницах со старой вёрсткой (.mebel-legacy-page) всё как раньше —
   там работает legacy.css. На страницах новой вёрстки прячем: их роль
   выполняет #callbackModal из подвала. */
.mebel-theme:not(.mebel-legacy-page) .modalcallback,
.mebel-theme:not(.mebel-legacy-page) .modalfeedback,
.mebel-theme:not(.mebel-legacy-page) .modalceofeedback {
  display: none !important;
}

/* ==========================================================================
   Образцы цвета / ткани / древесины
   В магазине эти опции заведены как checkbox со своими картинками, поэтому
   штатный список чекбоксов заменён на плитки из макета (.swatch).
   Картинка приходит через переменную --sw, её же использует .swatch.is-active
   для внутреннего кружка — так что отдельный background-image не нужен.
   ========================================================================== */

/* вкладки родственных опций: «Цвет» / «Цвет с тиснением» */
.swatch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.swatch-tab {
  padding: 6px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: .2s;
}

.swatch-tab:hover {
  border-color: #1f1f1f;
}

.swatch-tab.is-active {
  border-color: #1f1f1f;
  background: #1f1f1f;
  color: #fff;
}

/* надбавка за цвет — «+25%» в углу плитки */
.swatch__price {
  position: absolute;
  top: -7px;
  right: -6px;
  z-index: 2;
  padding: 1px 5px;
  border-radius: 8px;
  background: #1f1f1f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
}

/* «Все» показывает остальные образцы */
.swatches--img .swatch--extra {
  display: none;
}

.swatches--img.is-expanded .swatch--extra {
  display: block;
}

.swatches--img.is-expanded .swatch--more {
  order: 99;
}

/* название выбранного значения — иначе образцы не различить */
.swatch-chosen {
  margin: 8px 0 0;
  min-height: 18px;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 18px;
}

.swatch-chosen:empty {
  display: none;
}

/* ---------- сетка селектов в параметрах товара ----------
   Названия опций бывают в одну, две и три строки («Размер» против
   «Ортопедическое основание на металлокаркасе»), и поля в соседних колонках
   вставали на разной высоте. Колонка становится флекс-столбцом, а поле
   прижимается к низу — тогда в паре селекты всегда на одной линии.

   Прижимаем именно последний элемент колонки: main.js оборачивает каждый
   <select> в <div class="fselect"> со своей разметкой, так что до самого
   select правило margin-top уже не достаёт. */
.product-params .mebel-field {
  display: flex;
  flex-direction: column;
}

.product-params .mebel-field > :last-child {
  margin-top: auto;
}

/* ---------- параметры товара на мобильном ----------
   В макете в этой сетке было ровно два поля («Спальное место» и «Размер
   кровати»), поэтому style.css ставит строке flex-wrap:nowrap и растягивает
   колонки. У реальных товаров опций до девяти — они уезжали в одну строку
   далеко за экран. Возвращаем перенос и раскладку по два поля в строку. */
@media (max-width: 991.98px) {
  .product-params > .row {
    flex-wrap: wrap;
  }

  .product-params > .row > [class*="col-"] {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* ссылки внутри всплывающего уведомления — оно тёмное, ссылки должны читаться */
.mebel-toast a {
  color: #c8f169;
  text-decoration: underline;
}

.mebel-toast a:hover {
  color: #fff;
}

.mebel-toast.is-error a {
  color: #fff;
}

/* ==========================================================================
   Панель «Все фильтры» — OCFilter в вёрстке макета

   Разметка OCFilter написана под Bootstrap 3, а тема работает на Bootstrap 5.
   Из-за этого: col-sm-3 у #column-right означал 25% ширины (панель 484px,
   содержимое 105px), .popover получал абсолютное позиционирование и рамку,
   .list-group-item — рамки и отступы, а .btn-primary — синюю заливку.
   Ниже гасим чужие стили и приводим фильтр к виду макета (.fgroup / .fcheck).
   Классы OCFilter не переименовываем: на них завязан его собственный js.
   ========================================================================== */

/* --- ширина и служебные обёртки --- */
.filter-panel #column-right {
  width: 100%;
  max-width: 100%;
  padding: 0;
  float: none;
}

.filter-panel .ocf-offcanvas,
.filter-panel .ocfilter-mobile-handle,
.filter-panel .filter_close_btn,
.filter-panel .popover .arrow {
  display: none !important;
}

.filter-panel #ocfilter,
.filter-panel .panel,
.filter-panel .list-group {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* .popover в Bootstrap 5 — абсолютно позиционированное всплывающее окно;
   у OCFilter это просто заголовок «Цена … — … ₽» */
.filter-panel .popover {
  position: static;
  display: block;
  z-index: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}

/* --- группа значений --- */
.filter-panel .list-group-item.ocfilter-option,
.filter-panel .filter-list-group-item.size {
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.filter-panel .list-group-item.ocfilter-option[data-toggle="popover-price"] {
  padding-top: 0;
}

.filter-panel .list-group > :last-child .list-group-item.ocfilter-option,
.filter-panel .filter-list-group-item.size:last-child {
  border-bottom: 0;
}

/* --- заголовок группы --- */
.filter-panel .ocf-option-name,
.filter-panel .control-label {
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* --- значения списком, как .fcheck в макете ---
   Селекторы длиннее, чем в ocfilter.css: он подключается после темы, и при
   равной специфичности выигрывал бы он (там .ocf-option-values — flex-строка). */
.filter-panel .ocfilter-option .ocf-option-values,
.filter-panel .filter-list-group-item .ocf-option-values {
  display: block;
  font-size: 12px;
}

.filter-panel .ocf-option-values .checkbox {
  margin: 0;
}

/* Строка целиком кликабельна: отступы побольше, чтобы в неё было легко
   попасть, и подсветка при наведении — видно, куда нажимаешь. */
.filter-panel .ocfilter-option label,
.filter-panel .filter-list-group-item label:not(.control-label) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0 -10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #4a4a4a;
  font-size: 12px;
  cursor: pointer;
}

.filter-panel .ocf-option-values label:hover {
  background: var(--bg-soft);
}

.filter-panel .ocf-option-values input[type="checkbox"],
.filter-panel .ocf-option-values input[type="radio"] {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.filter-panel .ocf-option-values input:checked {
  border-color: var(--green);
  background: var(--green);
}

.filter-panel .ocf-option-values input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* подпись значения: у OCFilter это серая «таблетка», в макете обычный текст */
.filter-panel .filter_checkbox_input {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
}

.filter-panel input:checked ~ .filter_checkbox_input {
  background: none;
  color: var(--ink);
  font-weight: 600;
}

.filter-panel .ocfilter-option label.disabled {
  opacity: .45;
}

/* --- собственная кнопка применения OCFilter ---
   Её роль в панели играет «Применить» в подвале offcanvas: она повторяет
   подпись этой кнопки и нажимает её (см. mebel-oc.js). Саму прячем. */
.filter-panel .ocfilter-button_wrapper {
  display: none;
}

/* --- ползунок цены (noUiSlider) под макетный .frange --- */
.filter-panel .scale {
  margin: 6px 7px 10px;
}

.filter-panel .noUi-target {
  border: 0;
  border-radius: 2px;
  background: var(--line);
  box-shadow: none;
  height: 2px;
}

.filter-panel .noUi-connect {
  background: #111;
}

.filter-panel .noUi-handle {
  top: -6px;
  right: -7px;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #111;
  box-shadow: none;
  cursor: pointer;
}

.filter-panel .noUi-handle::before,
.filter-panel .noUi-handle::after {
  display: none;
}

/* поля «от / до» у фильтра цены (добавляются скриптом темы) */
.filter-panel .ocf-price-inputs {
  margin-bottom: 6px;
}

.filter-panel .ocf-price-inputs input {
  -moz-appearance: textfield;
}

.filter-panel .ocf-price-inputs input::-webkit-outer-spin-button,
.filter-panel .ocf-price-inputs input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* исходный текст диапазона от OCFilter — скрыт, но нужен его скрипту */
.filter-panel .ocf-price-raw {
  display: none;
}

/* ==========================================================================
   Плитки категорий в шапке
   ========================================================================== */

/* В макете таких плиток восемь, и .cat-card{flex:1 0 96px} растягивал их до
   168px по ширине контейнера. В магазине разделов верхнего уровня четырнадцать,
   поэтому на ту же ширину они делились и выходили вдвое уже макета. Фиксируем
   размер плитки, а лишние уезжают в горизонтальную прокрутку — как в макете. */
@media (min-width: 992px) {
  .cat-card {
    flex: 0 0 168px;
    min-width: 168px;
  }
}

/* Заглушка для категории без своей картинки */
.cat-card__img--empty {
  border-radius: 10px;
  background: repeating-linear-gradient(
    45deg,
    #ededed,
    #ededed 6px,
    #f6f6f6 6px,
    #f6f6f6 12px
  );
}

/* стрелки прокрутки ленты категорий — те же, что у ленты чипсов (.catbar__next) */
.cat-scroll__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transform: translateY(-50%);
  transition: .2s;
}

.cat-scroll__nav:hover {
  border-color: var(--green);
  color: var(--green);
}

.cat-scroll__nav--prev { left: 4px; }
.cat-scroll__nav--next { right: 4px; }

/* на тач-устройствах лента листается пальцем */
@media (max-width: 991.98px) {
  .cat-scroll__nav { display: none; }
}

/* ==========================================================================
   Блок «Подбор» (зелёные карточки)

   Макет нарисован под широкий экран: на 1920px карточка выходит 901x350, и
   фиксированной картинке в 350px остаётся место для заголовка в две строки.
   На 1200px карточка уже 541px, картинка съедает те же 350px, и «Подбор цвета
   и фурнитуры» ломался на четыре строки, а карточка вырастала до 376px.
   Ниже картинка, кегль и отступы сжимаются вместе с карточкой; на 1920px
   значения совпадают с макетом (901x350, картинка 350, заголовок 44px).
   ========================================================================== */
@media (min-width: 992px) {
  .pick-card__text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pick-card__img {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 42%;
  }

  .pick-card__title {
    font-size: clamp(26px, 2.4vw, 44px);
  }

  .pick-card__sub {
    font-size: clamp(15px, 1.1vw, 20px);
  }

  /* те же отступы, что в макете (40 / 26 / 24 / 40), только сжимаются вместе с карточкой */
  .pick-card {
    padding:
      clamp(24px, 2.2vw, 40px)
      clamp(18px, 1.4vw, 26px)
      clamp(16px, 1.3vw, 24px)
      clamp(24px, 2.2vw, 40px);
  }
}

/* ==========================================================================
   Панель связи (веер кнопок у плавающей кнопки справа внизу)

   Повторяет .bottom-pannel со старого сайта: круглая кнопка раскрывает ряд
   иконок, у каждой подпись по наведению.

   Веер спозиционирован абсолютно: если оставить его в потоке, свёрнутая
   панель всё равно занимает его ширину (~320px) и кнопка уезжает от края
   экрана к центру. Сама панель стоит выше кнопки Jivo и, на мобильном,
   выше нижней панели навигации.
   ========================================================================== */
.contact-fab {
  position: fixed;
  right: 16px;
  bottom: 150px;
  z-index: 1045;
  width: 48px;
  height: 48px;
}

.contact-fab__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: .2s;
}

.contact-fab__toggle:hover {
  background: var(--green-dark);
}

.contact-fab__icon--close {
  display: none;
}

.contact-fab.is-open .contact-fab__icon {
  display: none;
}

.contact-fab.is-open .contact-fab__icon--close {
  display: inline-block;
}

/* сам веер — влево от кнопки */
.contact-fab__links {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translate(12px, -50%);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.contact-fab.is-open .contact-fab__links {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}

.contact-fab__item {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 19px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: .2s;
}

.contact-fab__item:hover {
  background: #000;
  color: #fff;
}

.contact-fab__item--wa:hover { background: #25d366; }
.contact-fab__item--tg:hover { background: #0088cc; }
.contact-fab__item--max:hover { background: #7c4dff; }

/* подпись над иконкой */
.contact-fab__hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 5px 10px;
  border-radius: 8px;
  background: #1f1f1f;
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: .18s;
  pointer-events: none;
}

.contact-fab__item:hover .contact-fab__hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* На узких экранах ряд из шести иконок в строку не помещается —
   раскрываем его вверх. Подписи там ни к чему: наведения нет. */
@media (max-width: 575.98px) {
  .contact-fab {
    right: 12px;
    bottom: 140px;
    width: 44px;
    height: 44px;
  }

  .contact-fab__links {
    top: auto;
    right: 0;
    bottom: calc(100% + 10px);
    flex-direction: column-reverse;
    transform: translate(0, 12px);
  }

  .contact-fab.is-open .contact-fab__links {
    transform: none;
  }

  .contact-fab__item {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .contact-fab__hint {
    display: none;
  }
}

/* Подстраховка к тому же случаю: если обёртка .mebel-legacy всё-таки осталась
   незакрытой и подвал оказался внутри, фон не должен становиться серым.
   Селектор с body — legacy.css подключается после темы и при равной
   специфичности выигрывал бы. */
body .mebel-legacy .footer {
  background: #000;
}

/* ==========================================================================
   Лента категорий под меню (.catbar)
   ========================================================================== */

/* Названия вроде «Спальные гарнитуры» не помещались: в макете у чипса
   фиксированные 168x74 и white-space:nowrap, а разделы там короче.
   Разрешаем перенос — по высоте две строки помещаются свободно. */
@media (min-width: 992px) {
  .catbar .chip {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}

/* Кнопка «назад» — зеркало макетной .catbar__next */
.catbar__prev {
  position: absolute;
  left: 40px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transform: translateY(-50%);
  transition: .2s;
}

.catbar__prev:hover {
  border-color: var(--green);
  color: var(--green);
}

/* у обеих кнопок display:flex, поэтому атрибут hidden сам по себе их не прячет */
.catbar .catbar__prev[hidden],
.catbar .catbar__next[hidden] {
  display: none;
}

@media (max-width: 991.98px) {
  .catbar__prev { display: none; }
}

/* кнопка «Применить», пока OCFilter пересчитывает выборку */
.btn-apply.is-busy {
  opacity: .75;
  cursor: progress;
}

.btn-apply:disabled {
  opacity: .6;
  cursor: default;
}

/* ==========================================================================
   Подсказка о прокрутке у лент категорий на мобильном

   Ленты (чипсы под шапкой, плитки, липкая лента на главной) прокручиваются
   пальцем, но если последний влезший элемент заканчивается ровно у края,
   кажется, что дальше ничего нет. Затеняем правый край — и убираем тень,
   когда лента домотана до конца (класс is-end вешает mebel-oc.js).
   ========================================================================== */
@media (max-width: 991.98px) {
  /* без стрелок хвост в 52px ни к чему — он только отодвигает последний чипс */
  .catbar__scroll {
    padding-right: 12px;
  }

  .catbar .container-fluid,
  .sticky-cats .container-fluid,
  .categories .container-fluid {
    position: relative;
  }

  .catbar .container-fluid::after,
  .sticky-cats .container-fluid::after,
  .categories .container-fluid::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0));
    opacity: 1;
    transition: opacity .2s ease;
    pointer-events: none;
  }

  .catbar .container-fluid.is-end::after,
  .sticky-cats .container-fluid.is-end::after,
  .categories .container-fluid.is-end::after {
    opacity: 0;
  }
}

/* ==========================================================================
   Лента категорий на мобильном: постоянная уступает место липкой

   В макете на мобильном под шапкой стоит широкая лента плиток, а узкая лента
   чипсов выезжает сверху при прокрутке вверх, когда плитки уже ушли за экран
   (.sticky-cats, «Все категории» в ней чёрная). Постоянная лента чипсов
   .catbar на мобильном дублировала её и занимала место — прячем.

   На десктопе всё как было: .catbar видна всегда и «Все категории» в ней
   зелёная, а липкая лента остаётся только на главной, как в макете.
   ========================================================================== */
@media (max-width: 991.98px) {
  .catbar {
    display: none;
  }
}

@media (min-width: 992px) {
  body:not(.mebel-home) .sticky-cats {
    display: none;
  }
}

/* ==========================================================================
   Выбор города (CityManager) в верхней строке

   Модуль подставляет свою разметку: .prmn-cmngr__title с подписью зоны,
   ссылкой .prmn-cmngr__city, иконкой-булавкой 30x30 и названием города.
   Приводим её к виду макета: маленькая булавка, название, шеврон.
   ========================================================================== */
.topbar__city.prmn-cmngr {
  padding: 0;         /* у макетной кнопки был свой отступ, контейнеру он не нужен */
  min-height: 13px;   /* чтобы строка не прыгала, пока модуль не ответил */
}

.topbar__city .prmn-cmngr__content,
.topbar__city .prmn-cmngr__title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* подпись зоны («Ваш город» и т.п.) в макете не предусмотрена */
.topbar__city .prmn-cmngr__title-text:empty,
.topbar__city .prmn-cmngr__title-text {
  display: none;
}

.topbar__city .prmn-cmngr__city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.topbar__city .prmn-cmngr__city:hover {
  color: var(--green);
}

/* Булавку модуль прячет своим css (.prmn-cmngr__city svg{display:none}),
   а в макете она есть — возвращаем и уменьшаем с 30px до 10px. */
.topbar__city .prmn-cmngr__city svg {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  vertical-align: baseline;
  opacity: .75;
}

/* верхняя строка ровно 25px — виджет не должен её распирать */
.topbar__city .prmn-cmngr__content,
.topbar__city .prmn-cmngr__title,
.topbar__city .prmn-cmngr__city {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* шеврон, как в макете */
.topbar__city .prmn-cmngr__city::after {
  content: '\f282';
  font-family: bootstrap-icons;
  font-size: 9px;
  line-height: 1;
  margin-left: 1px;
  margin-top: 5px;   /* шеврон рисуется выше базовой линии — опускаем к тексту */
}

/* Окно выбора города у модуля идёт с z-index 4 — этого хватало старой теме,
   но в новой выше лежат липкая лента (1035), нижняя панель (1040) и кнопка
   связи (1045), и они оказывались поверх окна. */
.modal.prmn-cmngr-cities,
body .prmn-cmngr-cities {
  z-index: 1060;
}

/* На мобильном верхний слайдер не показываем — по просьбе владельца сайта:
   на узком экране он занимает высоту, но ничего не сообщает. */
@media (max-width: 991.98px) {
  .hero {
    display: none;
  }
}

/* Список городов свёрстан на Bootstrap 3 (col-xs-4), в Bootstrap 5 такого
   класса нет — города выстраивались в одну длинную колонку. */
.prmn-cmngr-cities .col-xs-4 {
  width: 100%;
}

@media (min-width: 576px) {
  .prmn-cmngr-cities .col-xs-4 {
    float: left;
    width: 33.3333%;
  }

  .prmn-cmngr-cities .row.clearfix::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* Крестик закрытия у окна выбора города */
.prmn-cmngr-cities__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.prmn-cmngr-cities__close:hover {
  background: #e6e6e6;
}

/* --- CityManager: отменяем его собственную мобильную раскладку ---
   На ширине до 688px модуль уносит виджет из потока
   (.prmn-cmngr__title{position:fixed; left:22px; bottom:9px}) и прячет
   название города — так было задумано в старой теме, где на мобильном
   оставалась только булавка у нижней панели. В новой теме город живёт
   в верхней строке на всех экранах, поэтому возвращаем его на место.
   Селекторы с .topbar__city — css модуля подключается после темы. */
.topbar__city .prmn-cmngr,
.topbar__city .prmn-cmngr__title {
  position: relative;   /* не static: к .prmn-cmngr__title привязан вопрос «ваш город?» */
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  margin: 0;
}

.topbar__city .prmn-cmngr__city-name {
  display: inline;
  position: static;
  font-size: inherit;
  cursor: pointer;
}

/* у модуля свой маркер-квадратик рядом с названием — у нас шеврон из макета */
.topbar__city .prmn-cmngr__city-name::after {
  content: none;
}

.topbar__city .prmn-cmngr__city svg {
  font-size: inherit;
}

/* Вопрос «Ваш город — …? Да / Выбрать другой»: на мобильном модуль ставит его
   на bottom:50px, и он налезал на нижнюю панель навигации (её высота ~62px). */
@media (max-width: 991.98px) {
  /* селектор длиннее, чем у модуля: его css подключается после темы */
  .prmn-cmngr .prmn-cmngr__confirm,
  .topbar__city .prmn-cmngr__confirm {
    bottom: 74px;
    z-index: 1041;
    border-top: 1px solid var(--line);
  }
}

/* Окно выбора города должно прокручиваться: разметка модуля рассчитана на
   Bootstrap 3, где .modal сам был прокручиваемым. В Bootstrap 5 у .modal стоит
   overflow:hidden, и на невысоких экранах нижние города оказывались за краем
   без возможности до них добраться. */
.modal.prmn-cmngr-cities {
  overflow-y: auto;
}

.prmn-cmngr-cities .modal-dialog {
  margin: 20px auto;
}

@media (max-width: 991.98px) {
  .prmn-cmngr-cities .modal-dialog {
    margin: 12px;
  }

  /* список городов — со своей прокруткой, чтобы поиск и заголовок оставались на виду */
  .prmn-cmngr-cities .row.clearfix {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Вход в личный кабинет

   Макета для страницы не было — собрана на элементах темы: те же поля,
   кнопки, крошки и типографика, что на категории и в карточке товара.
   ========================================================================== */
.auth-page {
  padding: 18px 0 48px;
}

.auth-title {
  margin: 18px 0 24px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 980px;
}

.auth-card {
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.auth-card--muted {
  background: var(--bg-soft);
  border-color: transparent;
}

.auth-card__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.auth-card__lead {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.auth-card__text {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.auth-field {
  margin-bottom: 14px;
}

.auth-field .field-select {
  display: block;
  width: 100%;
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

.auth-actions .btn-call {
  padding: 12px 28px;
  font-size: 13px;
}

.auth-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
}

.auth-link:hover {
  color: var(--green);
}

.auth-register {
  display: inline-block;
  margin-top: 4px;
  text-decoration: none;
}

/* сообщения OpenCart (неверный пароль, «вы вышли» и т.п.) */
.auth-note {
  max-width: 980px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
}

.auth-note--ok {
  background: #eef7e3;
  color: #3d6b12;
}

.auth-note--error {
  background: #fdecea;
  color: #b3261e;
}

/* --------------------------------------------------------------------------
   Регистрация: та же карточка, что на входе, но форма шире и с сайдбаром.
   Селекты страны и региона оставлены нативными (список зон подгружается
   ajax'ом, обёртка .fselect осталась бы со старыми пунктами) — рисуем их
   под остальные поля вручную.
   -------------------------------------------------------------------------- */
.reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
  max-width: 1100px;
}

.reg-form {
  padding: 8px 30px 28px;
}

.reg-section {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.reg-section--last {
  border-bottom: 0;
  padding-bottom: 8px;
}

.reg-section__title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
}

.reg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 20px;
}

.reg-grid .auth-field {
  margin-bottom: 14px;
  min-width: 0;
}

.auth-field--wide {
  grid-column: 1 / -1;
}

.reg-req {
  color: #b3261e;
}

.reg-error {
  margin-top: 5px;
  font-size: 11px;
  color: #b3261e;
}

.reg-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 6px;
}

/* нативные select под вид полей .field-select--soft */
select.auth-native {
  display: block;
  width: 100%;
  height: auto;
  padding: 13px 42px 13px 18px;
  border: 1px solid var(--bg-soft);
  border-radius: 12px;
  background-color: var(--bg-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  font-size: 14px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

select.auth-native:focus {
  border-color: var(--green);
  background-color: #fff;
  outline: none;
  box-shadow: none;
}

.reg-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.reg-agree {
  align-items: flex-start;
  max-width: 460px;
  font-size: 12px;
  line-height: 1.45;
}

.reg-agree input {
  margin-top: 1px;
}

.reg-agree__link {
  color: var(--green);
  text-decoration: underline;
}

.reg-submit__btn {
  padding: 13px 34px;
  font-size: 13px;
  white-space: nowrap;
}

.reg-aside {
  position: sticky;
  top: 90px;
}

.reg-perks {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
}

.reg-perks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
}

.reg-perks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.reg-aside__note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.reg-aside__note a {
  color: var(--green);
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .reg-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-aside {
    position: static;
    order: -1;
  }
}

@media (max-width: 767.98px) {
  .reg-form {
    padding: 4px 18px 22px;
  }

  .reg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-submit {
    flex-direction: column;
    align-items: stretch;
  }

  .reg-submit__btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .auth-title {
    font-size: 24px;
    margin: 14px 0 18px;
  }

  .auth-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .auth-card {
    padding: 20px 18px 22px;
  }

  .auth-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* стрелки в липкой ленте категорий: она невысокая, кнопки поменьше */
.sticky-cats .cat-scroll__nav {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.sticky-cats .cat-scroll__nav--prev { left: 2px; }
.sticky-cats .cat-scroll__nav--next { right: 2px; }

/* чтобы чипсы не уезжали под кнопки */
.sticky-cats__scroll {
  padding: 0 32px;
}

/* стрелки прячутся тем же атрибутом hidden, а у кнопки display:flex */
.sticky-cats .cat-scroll__nav[hidden] {
  display: none;
}