/* =====================================================================
   TOPLOFT · шапка, меню, подвал — своя вёрстка
   Все классы с префиксом .tl-, чтобы не пересекаться со стилями платформы.
   Токены снимались с toploft.shop (Chromium, 1440 / 390).
   ===================================================================== */

.vz-theme-85 {
  /* шрифт */
  --tl-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* толщина шрифта: основной текст плотнее тонкого 400 */
  --tl-fw: 500;                            /* обычный текст */
  --tl-fw-mid: 600;                        /* пункты меню, подписи, заголовки колонок */
  --tl-fw-bold: 700;                       /* активный пункт, акценты */

  /* цвета */
  --tl-c-topbar: rgb(0 0 0 / 80%);         /* поверх светлого фона даёт #2e2e2e */
  --tl-c-topbar-solid: #2e2e2e;
  --tl-c-nav: #a3a3a3;
  --tl-c-nav-active: #ffffff;
  --tl-c-icon-opacity: .75;
  --tl-c-line-dark: rgb(255 255 255 / 18%);
  --tl-c-promo-bg: #000000;
  --tl-c-accent: #fffd00;                  /* жёлтый акцентов промо */
  --tl-c-accent-soft: #ffe14a;             /* жёлтый телефона */
  --tl-c-count: #dc3545;                   /* счётчик корзины */
  --tl-c-page: #e5e5e5;                    /* фон страницы и ленты разделов */
  --tl-c-strip-text: #696969;
  --tl-c-strip-text-hover: #000000;
  --tl-c-dd-top: #373839;                  /* выпадашки: градиент сверху вниз */
  --tl-c-dd-bottom: #191a1c;
  --tl-c-dd-text: #dee2e6;
  --tl-c-footer-bg: #000000;
  --tl-c-footer-text: rgb(255 255 255 / 50%);
  --tl-c-footer-title: rgb(255 255 255 / 70%);
  --tl-c-footer-line: rgb(255 255 255 / 25%);
  --tl-c-tile-border: #dee2e6;
  --tl-c-text: #212529;

  /* размеры */
  --tl-container: 2560px;                  /* предел ширины; до него всё резиновое, 100% экрана */
  --tl-topbar-h: 50px;
  --tl-topbar-h-m: 56px;
  --tl-tabbar-h: 60px;                     /* высота нижней панели (во всю ширину, у нижнего края) */
  --tl-tabbar-gap: 10px;                   /* отступ карточки консультации от краёв экрана */
  --tl-tabbar-space: calc(var(--tl-tabbar-h) + env(safe-area-inset-bottom));
  --tl-gutter: 48px;
  --tl-gutter-m: 16px;
  --tl-space: 40px;                        /* единый отступ между блоками страницы (телефон — 24) */
  --tl-title-size: clamp(26px, 1rem + 1.4vw, 42px);   /* единый заголовок блока/раздела (телефон — 20) */
  --tl-radius-dd: 32px;
  --tl-radius-tile: 16px;
  --tl-radius-btn: 8px;

  /* слои */
  --tl-z-topbar: 1000;
  --tl-z-layer: 1090;
  --tl-z-tabbar: 1100;

  --tl-ease: cubic-bezier(.2, .7, .2, 1);
}


/* Сброс — через :where(), нулевая специфичность: компоненты ниже его всегда перебивают */
:where(.tl-topbar, .tl-promo, .tl-catstrip, .tl-footer, .tl-tabbar, .tl-sheet, .tl-consult),
:where(.tl-topbar, .tl-promo, .tl-catstrip, .tl-footer, .tl-tabbar, .tl-sheet, .tl-consult) * {
  box-sizing: border-box;
}
:where(.tl-topbar, .tl-catstrip, .tl-footer, .tl-sheet) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.tl-topbar, .tl-catstrip, .tl-tabbar, .tl-sheet) :where(button) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
:where(.tl-topbar, .tl-catstrip, .tl-footer, .tl-tabbar, .tl-sheet, .tl-consult) :where(a) { text-decoration: none; }
:where(.tl-topbar, .tl-catstrip, .tl-footer, .tl-tabbar, .tl-sheet, .tl-consult) :where(img) { display: block; }
:where(.tl-topbar, .tl-catstrip, .tl-footer, .tl-tabbar, .tl-sheet, .tl-consult) :where(a, button, [tabindex]):focus,
:where(.tl-topbar, .tl-catstrip, .tl-footer, .tl-tabbar, .tl-sheet, .tl-consult) :where(a, button, [tabindex]):focus-visible {
  outline: none;                           /* обводку не показываем — решение владельца */
}
.tl-iconbtn:focus-visible, .tl-burger:focus-visible, .tl-sheet__close:focus-visible { background: rgb(255 255 255 / 10%); }

/* Закрыто по умолчанию: всё, что открывает скрипт, скрыто классом, а открывает его .is-open. */
.tl-search:not(.is-open), .tl-mnav:not(.is-open), .tl-sheet:not(.is-open), .tl-consult:not(.is-open),
.tl-dd__menu:not(.is-open), .tl-catstrip__arrow:not(.is-open) {
  display: none;
}
/* В корзине, избранном, кабинете и оформлении платформа не запускает наши скрипты и срезает data-*. Там панели
   открывает ключ платформы vz-toggle на кнопке: он ставит панели vz-state="open" (закрывает — повторное нажатие).
   На остальных страницах нажатие перехватывает tl-chrome.js, и vz-toggle не срабатывает.
   Атрибута hidden у этих панелей в разметке нет: правило витрины [hidden]{display:none!important} лежит в @layer base,
   а важное из слоя сильнее любого нашего !important — открыть такую панель стилем было бы нельзя. */
.tl-dd__menu[vz-state="open"], .tl-mnav[vz-state="open"], .tl-sheet[vz-state="open"], .tl-consult[vz-state="open"] {
  display: block !important;
}

/* Единые правила контейнера для блоков платформы (крошки, заголовки, список товаров, карточка): те же поля
   и тот же предел ширины, что у шапки и подвала. Переменные обёртки — из /docs/widgets (wrapper.elements).
   Блоки на всю ширину (.vz-edge) и блоки с заданными в админке полями (inline-стиль) не трогаем. */
.tl-site .vz-box:not(.vz-edge) {
  --vz-px-auto: var(--tl-gutter);
  --vz-inner-max: calc(var(--tl-container) - 2 * var(--tl-gutter));
}
@media (max-width: 767.98px) {
  .tl-site .vz-box:not(.vz-edge) {
    --vz-px-auto: var(--tl-gutter-m);
    --vz-inner-max: calc(var(--tl-container) - 2 * var(--tl-gutter-m));
  }
}

/* =========================== ВЕРХНЯЯ ПОЛОСА =========================== */
.tl-topbar {
  position: relative;         /* шапка не липкая — нигде (владелец, 2026-09-27); relative — опора выпадашкам и поиску */
  z-index: var(--tl-z-topbar);
  font-family: var(--tl-font);
  background: var(--tl-c-topbar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.tl-topbar__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--tl-topbar-h);
  max-width: var(--tl-container);
  margin-inline: auto;
  padding: 0 var(--tl-gutter);
}

/* логотип из двух частей: надпись + «I LOFT HOUSE» */
.tl-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
  margin-right: auto;
}
.tl-logo__word { width: 155px; height: 24px; }
.tl-logo__desc { width: 68px; height: 24px; }

/* меню */
.tl-nav { flex: 0 1 auto; }
.tl-nav__list { display: flex; align-items: center; gap: 4px; }
.tl-nav__link {
  display: block;
  padding: 8px;
  font-size: 12px;
  font-weight: var(--tl-fw-mid);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tl-c-nav);
  transition: color .2s;
}
/* «где я» размечает сервер: aria-current="page" — эта страница, "true" — раздел выше; без скрипта и без моргания */
.tl-nav__link:hover, .tl-nav__link[aria-current] { color: var(--tl-c-nav-active); }
.tl-nav__link[aria-current] { font-weight: var(--tl-fw-bold); }

/* иконки справа */
.tl-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-left: auto;
}
.tl-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: var(--tl-radius-btn);
}
.tl-iconbtn img { opacity: var(--tl-c-icon-opacity); transition: opacity .2s; }
.tl-iconbtn:hover img, .tl-iconbtn[aria-expanded="true"] img { opacity: 1; }

.tl-cart__count {
  position: absolute;
  top: 0;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--tl-c-count);
  color: #fff;
  font-size: 11px;
  font-weight: var(--tl-fw-bold);
  line-height: 18px;
  text-align: center;
}
/* Числа пишет платформа (vz-cart-count, vz-fav-count) на всех страницах, включая корзину; при нуле узел пуст. */
.tl-cart__count:empty { display: none; }

/* Вход: vz-auth получает vz-state="in|out", vz-user-initial — инициал. До ответа платформы атрибута нет — видно «гостя». */
.tl-acc__initial {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font: var(--tl-fw-bold) 14px/30px var(--tl-font);
  text-align: center;
  text-transform: uppercase;
}
[vz-auth][vz-state="in"] .tl-acc__initial:not(:empty) { display: block; }
[vz-auth][vz-state="in"] .tl-acc:has(.tl-acc__initial:not(:empty)) .tl-acc__icon { display: none; }
[vz-auth][vz-state="in"] .tl-acc--out,
[vz-auth]:not([vz-state="in"]) .tl-acc--in { display: none; }

/* ---------- выпадашки (консультация, кабинет): компактная тёмная карточка ---------- */
.tl-dd { position: relative; }
.tl-dd__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -6px;
  min-width: 190px;
  padding: 6px;
  font-size: 13.5px;
  font-weight: var(--tl-fw);
  color: var(--tl-c-dd-text);
  background: linear-gradient(180deg, var(--tl-c-dd-top), var(--tl-c-dd-bottom));
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgb(0 0 0 / 32%);
  animation: tl-pop-in .16s ease;
}
.tl-dd__menu[hidden] { display: none; }
.tl-dd__menu--consult { width: 256px; }
.tl-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--tl-c-dd-text);
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.tl-dd__item img { width: 20px; height: 20px; opacity: .8; }
.tl-dd__item:hover, .tl-dd__item:focus-visible { background: rgb(255 255 255 / 8%); color: #fff; }

@keyframes tl-pop-in {
  from { opacity: 0; }
  to   { opacity: 1; transform: none; }
}

/* ---------- поиск: полоса под верхней полосой, как у шапки платформы ---------- */
.tl-search {
  position: relative;                      /* под ним — выпадающие подсказки */
  max-width: var(--tl-container);
  margin-inline: auto;
  padding: 2px var(--tl-gutter) 12px;
  animation: tl-fade .16s ease;
}
.tl-search[hidden] { display: none; }
.tl-search__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 5px 0 16px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  transition: border-color .2s;
}
.tl-search__bar:focus-within { border-color: rgb(255 255 255 / 32%); }
.tl-search__icon { flex: 0 0 auto; width: 18px; height: 18px; opacity: .6; }
.tl-search__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  color: rgb(255 255 255 / 45%);   /* текст узла — подсказка, пока платформа не вставила поле */
}
.tl-search__field input, .tl-search .vz-search__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: var(--tl-fw) 14px var(--tl-font);
  -webkit-appearance: none;
  appearance: none;
}
.tl-search .vz-search__input::placeholder, .tl-search__field input::placeholder { color: rgb(255 255 255 / 45%); }
.tl-search .vz-search__input::-webkit-search-cancel-button, .tl-search__field input::-webkit-search-cancel-button { display: none; }
.tl-search__go {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: var(--tl-fw-mid) 13px var(--tl-font);
  cursor: pointer;
  transition: background-color .2s;
}
.tl-search__go:hover { background: #e6e6e6; }

/* ---------- компактная шапка: корзина + бургер ---------- */
.tl-only-compact { display: none; }

/* Иконки компактной шапки — один набор (Heroicons, контур 1.5, как у шапки-виджета Vizen), 24 px в поле 44×44.
   Бургер — те же пропорции, что Heroicons bars-3 (18 × 1.5, шаг 5.25), без рамки; открыт — крестик. */
.tl-only-compact.tl-iconbtn { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; justify-content: center; }
.tl-only-compact.tl-cart .tl-cart__count { top: 3px; right: 1px; }
.tl-burger {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--tl-radius-btn);
  flex: 0 0 auto;
}
.tl-burger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  margin-left: -9px;
  border-radius: 1px;
  background: rgb(255 255 255 / 75%);   /* как у иконок: белые с непрозрачностью --tl-c-icon-opacity */
  transition: transform .25s var(--tl-ease), opacity .2s, top .25s var(--tl-ease), background-color .2s;
}
.tl-burger:hover span, .tl-burger[aria-expanded="true"] span { background: #fff; }
.tl-burger span:nth-child(1) { top: 16px; }
.tl-burger span:nth-child(2) { top: 21.25px; }
.tl-burger span:nth-child(3) { top: 26.5px; }
.tl-burger[aria-expanded="true"] span:nth-child(1) { top: 21.25px; transform: rotate(45deg); }
.tl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tl-burger[aria-expanded="true"] span:nth-child(3) { top: 21.25px; transform: rotate(-45deg); }

/* выпадающее мобильное меню */
.tl-mnav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100dvh - var(--tl-topbar-h-m));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--tl-gutter-m) 24px;
  background: var(--tl-c-topbar-solid);
  box-shadow: 0 24px 40px rgb(0 0 0 / 30%);
  animation: tl-slide-down .22s var(--tl-ease);
}
.tl-mnav[hidden] { display: none; }
.tl-mnav__list { padding: 12px 0; border-top: 1px solid var(--tl-c-line-dark); }
.tl-mnav__list a {
  display: block;
  padding: 11px 0;
  font-size: 13px;
  font-weight: var(--tl-fw-mid);
  text-transform: uppercase;
  color: var(--tl-c-nav);
}
.tl-mnav__list a:hover, .tl-mnav__list a[aria-current] { color: var(--tl-c-nav-active); }
.tl-mnav__list a[aria-current] { font-weight: var(--tl-fw-bold); }
.tl-mnav__list--big a { font-size: 16px; padding: 12px 0; }
.tl-mnav__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--tl-c-line-dark);
}
.tl-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--tl-c-line-dark);
  border-radius: 999px;
  font-size: 14px;
  color: var(--tl-c-dd-text);
}
.tl-pill img { width: 22px; height: 22px; }

@keyframes tl-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================ ПРОМО-ПОЛОСА ============================ */
.tl-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 33px;
  padding: 4px var(--tl-gutter-m);
  font-family: var(--tl-font);
  font-size: 16px;
  font-weight: var(--tl-fw-mid);
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: var(--tl-c-promo-bg);
}
.tl-promo b { font-weight: var(--tl-fw-bold); color: var(--tl-c-accent); }
.tl-promo__arr { font-weight: var(--tl-fw-mid); letter-spacing: .04em; }
.tl-promo__plus { margin: 0 4px; font-weight: var(--tl-fw-bold); }

/* ========================= ЛЕНТА РАЗДЕЛОВ =========================
   Размеры идут по экрану вниз от 2560. От 1280 (MacBook и шире) все 14 разделов стоят
   в одну строку сеткой; ниже — прокрутка вбок с компактными иконками.
   Наведение меняет только цвет — без увеличений и сдвигов.                              */
.tl-catstrip {
  --strip-cols: 14;          /* сколько разделов в ряду в режиме «всё помещается» */
  --strip-icon: 56px;        /* ширина иконки; высота = 0.65 ширины (картинки 240×156) */
  --strip-font: 11px;
  --strip-label-gap: 8px;
  --strip-item: 86px;        /* ширина пункта в режиме прокрутки */
  --strip-pad-x: 12px;
  --strip-pad-y: 14px;

  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--tl-font);
  background: var(--tl-c-page);
}
.tl-catstrip__list {
  display: flex;
  width: 100%;
  padding: var(--strip-pad-y) var(--strip-pad-x);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--strip-pad-x);   /* иначе привязка съедает левый отступ и стрелка «назад» видна на старте */
  scrollbar-width: none;
  max-width: var(--tl-container);
  margin-inline: auto;
}
.tl-catstrip__list::-webkit-scrollbar { display: none; }
.tl-catstrip__list > li { flex: 0 0 var(--strip-item); min-width: 0; scroll-snap-align: start; }
.tl-catstrip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 2px;
  color: var(--tl-c-strip-text);
  transition: color .2s;
}
.tl-catstrip__item img {
  width: var(--strip-icon);
  height: calc(var(--strip-icon) * .65);
  object-fit: contain;
  object-position: bottom center;
}
.tl-catstrip__item span {
  margin-top: var(--strip-label-gap);
  font-size: var(--strip-font);
  font-weight: var(--tl-fw-mid);
  line-height: 1.3;
  letter-spacing: -.005em;
  text-align: center;
}
.tl-catstrip__item:hover { color: var(--tl-c-strip-text-hover); }
.tl-catstrip__item[aria-current] { color: var(--tl-c-strip-text-hover); }
.tl-catstrip__item[aria-current] span { font-weight: var(--tl-fw-bold); }

.tl-catstrip__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  color: #000;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}
.tl-catstrip__arrow[hidden] { display: none; }
.tl-catstrip__arrow--prev { left: 8px; }
.tl-catstrip__arrow--next { right: 8px; }

/* планшет: прокрутка, иконки крупнее; стрелок нет — листают пальцем */
@media (min-width: 768px) {
  .tl-catstrip { --strip-icon: 68px; --strip-font: 12px; --strip-label-gap: 10px; --strip-item: 92px; --strip-pad-x: 16px; --strip-pad-y: 18px; }
}
@media (max-width: 1023.98px) {
  .tl-catstrip__arrow { display: none; }
}
/* небольшой ноутбук 1024–1279: прокрутка со стрелками */
@media (min-width: 1024px) {
  .tl-catstrip { --strip-icon: 72px; --strip-item: 96px; }
}
/* от 1280: все разделы в одну строку */
@media (min-width: 1280px) {
  .tl-catstrip__list {
    display: grid;
    grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }
  .tl-catstrip__arrow { display: none; }
  .tl-catstrip { --strip-icon: 72px; --strip-font: 11.5px; --strip-pad-x: 16px; --strip-pad-y: 18px; }
}
@media (min-width: 1366px) {
  .tl-catstrip { --strip-font: 12px; }
}
/* MacBook Air / Pro 14: 1440–1679 */
@media (min-width: 1440px) {
  .tl-catstrip { --strip-icon: 80px; --strip-font: 12.5px; --strip-label-gap: 12px; --strip-pad-x: 24px; --strip-pad-y: 20px; }
}
/* MacBook Pro 16, большие ноутбуки: 1680–1919 */
@media (min-width: 1680px) {
  .tl-catstrip { --strip-icon: 92px; --strip-font: 14px; --strip-pad-x: 32px; --strip-pad-y: 22px; }
}
/* Full HD: 1920–2559 */
@media (min-width: 1920px) {
  .tl-catstrip { --strip-icon: 108px; --strip-font: 15px; --strip-label-gap: 14px; --strip-pad-x: 48px; --strip-pad-y: 24px; }
}
/* 2560 (предел ширины) */
@media (min-width: 2560px) {
  .tl-catstrip { --strip-icon: 136px; --strip-font: 16px; --strip-label-gap: 16px; --strip-pad-x: 64px; --strip-pad-y: 28px; }
}

/* ================= МЕНЮ УСЛУГ: второй ряд «Шапки Услуг» =================
   Сервер разворачивает всё дерево меню (vz-for), видны только дети узла «Услуги» (адрес …/services).
   Без скрипта — работает и в корзине. Пункты — как в ленте разделов, но по центру, без сетки на 14. */
.tl-svcstrip .tl-svcstrip__tree li,
.tl-svcstrip .tl-svcstrip__sub { display: contents; }
.tl-svcstrip .tl-catstrip__item { display: none; flex: 0 0 var(--strip-item); width: var(--strip-item); }
.tl-svcstrip li[data-url$="/services"] > .tl-svcstrip__sub > li > .tl-catstrip__item { display: flex; }
.tl-svcstrip .tl-catstrip__list { display: flex; justify-content: center; gap: 8px; overflow-x: auto; }
@media (min-width: 1280px) {
  .tl-svcstrip { --strip-item: 150px; }
}

/* ================= Контейнер: резиновый, до 2560, по центру ================= */
.tl-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tl-container);
  margin-inline: auto;
  padding-inline: var(--tl-gutter);
}
@media (max-width: 767.98px) {
  .tl-container { padding-inline: var(--tl-gutter-m); }
}

/* ================================ ПОДВАЛ ================================ */
.tl-footer {
  padding: 48px var(--tl-gutter) 56px;
  font-family: var(--tl-font);
  font-size: 12px;
  font-weight: var(--tl-fw);
  color: var(--tl-c-footer-text);
  background: var(--tl-c-footer-bg);
}
.tl-footer__in, .tl-footer__bottom { max-width: calc(var(--tl-container) - 2 * var(--tl-gutter)); margin-inline: auto; }
.tl-footer__in {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 24px;
}
.tl-footer__title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: var(--tl-fw-mid);
  color: var(--tl-c-footer-title);
  border-bottom: 1px solid var(--tl-c-footer-line);
}
.tl-footer__links { display: grid; gap: 12px; }
.tl-footer__links--2col { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.tl-footer a { color: var(--tl-c-footer-text); transition: color .2s; }
.tl-footer a:hover { color: #fff; }

.tl-footer__contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 8px 24px;
}
.tl-footer__contacts a { display: inline-flex; align-items: center; gap: 8px; }
.tl-ficon { width: 24px; height: 24px; opacity: .55; transition: opacity .2s; flex: 0 0 auto; }
.tl-footer__contacts a:hover .tl-ficon { opacity: 1; }

.tl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding: 8px 0;
  border-top: 1px solid var(--tl-c-footer-line);
  border-bottom: 1px solid var(--tl-c-footer-line);
  font-size: 12px;
  text-transform: uppercase;
}
.tl-footer__copy { margin: 0; }
.tl-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tl-footer__legal a { color: rgb(255 255 255 / 75%); }

/* ================= НИЖНЯЯ ПАНЕЛЬ: во всю ширину у нижнего края, тёмное стекло (владелец: без отступов) ================= */
.tl-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--tl-z-tabbar);
  display: none;
  align-items: center;
  justify-content: space-around;
  height: var(--tl-tabbar-space);
  padding: 0 6px env(safe-area-inset-bottom);
  font-family: var(--tl-font);
  background: rgb(22 22 22 / 92%);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.tl-tabbar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  color: rgb(255 255 255 / 62%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.tl-tabbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 30px;
  border-radius: 15px;
  transition: background-color .2s;
}
.tl-tabbar__icon img { width: 26px; height: 26px; opacity: .62; transition: opacity .2s; }
.tl-tabbar__label { font-size: 10.5px; font-weight: var(--tl-fw-mid); line-height: 1.1; white-space: nowrap; }

/* текущая страница или открытая панель — только цветом (без подложки — владелец). Ссылки размечает сервер
   (aria-current); «Каталог» — кнопка, он текущий, когда пункт «Каталог» меню шапки помечен сервером. */
.tl-tabbar__item[aria-current="page"], .tl-tabbar__item[aria-expanded="true"],
body:has(.tl-nav__link[href="/catalog"][aria-current]) .tl-tabbar__item[aria-controls="tl-catalog"] { color: #fff; }
.tl-tabbar__item[aria-current="page"] img, .tl-tabbar__item[aria-expanded="true"] img,
body:has(.tl-nav__link[href="/catalog"][aria-current]) .tl-tabbar__item[aria-controls="tl-catalog"] img { opacity: 1; }

.tl-tabbar:has([aria-expanded="true"]) .tl-tabbar__item[aria-current="page"]:not([aria-expanded="true"]),
body:has(.tl-nav__link[href="/catalog"][aria-current]) .tl-tabbar:has([aria-expanded="true"]) .tl-tabbar__item[aria-controls="tl-catalog"]:not([aria-expanded="true"]) { color: rgb(255 255 255 / 62%); }
.tl-tabbar:has([aria-expanded="true"]) .tl-tabbar__item[aria-current="page"]:not([aria-expanded="true"]) img,
body:has(.tl-nav__link[href="/catalog"][aria-current]) .tl-tabbar:has([aria-expanded="true"]) .tl-tabbar__item[aria-controls="tl-catalog"]:not([aria-expanded="true"]) img { opacity: .62; }

/* «Консультация» — акцент: крупный жёлтый круг над панелью, при открытии в нём крестик */
.tl-tabbar__item--accent { color: #fff; }
.tl-tabbar__item--accent .tl-tabbar__icon {
  width: 52px;
  height: 52px;
  margin-top: -22px;                       /* 52 − 22 = 30 — как у остальных иконок: подписи на одной линии */
  border-radius: 50%;
  color: #000;
  background: var(--tl-c-accent);
  box-shadow: 0 0 0 5px rgb(22 22 22), 0 6px 16px rgb(0 0 0 / 30%);
}
.tl-tabbar__item--accent .tl-tabbar__icon img { width: 28px; height: 28px; opacity: 1; }
.tl-tabbar__item--accent .tl-tabbar__i-close { width: 24px; height: 24px; }
.tl-tabbar__item--accent[aria-expanded="true"] .tl-tabbar__icon { background: var(--tl-c-accent); }
.tl-tabbar__i-close { display: none; }
.tl-tabbar__item--accent[aria-expanded="true"] .tl-tabbar__i-open { display: none; }
.tl-tabbar__item--accent[aria-expanded="true"] .tl-tabbar__i-close { display: block; animation: tl-fade .18s ease; }

/* ============ КАТАЛОГ МЕБЕЛИ: во весь экран над панелью, 3 колонки ============ */
.tl-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--tl-z-layer);
  font-family: var(--tl-font);
}
.tl-sheet[hidden] { display: none; }
.tl-sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tl-tabbar-space) + 28px);   /* + место под поднятый круг консультации */
  background: #fff;
  animation: tl-rise .26s var(--tl-ease);
}
.tl-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 10px 6px 8px 14px;
}
.tl-sheet__title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--tl-fw-bold);
  color: var(--tl-c-text);
}
.tl-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; color: #000; }

/* сетка сама делит высоту экрана на 5 рядов — все разделы видны без прокрутки */
.tl-tiles {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(84px, 1fr));
  gap: 6px;
  padding: 0 6px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tl-tiles > li { min-height: 0; }
.tl-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px 4px 9px;
  border: 1px solid #ececec;
  border-radius: 14px;
  color: #111;
  background: #fff;
  transition: border-color .2s;
}
.tl-tile:hover, .tl-tile[aria-current] { border-color: #bdbdbd; }
.tl-tile img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 70px;
  object-fit: contain;
}
.tl-tile span {
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.tl-tile--promo { border-color: transparent; background: var(--tl-c-accent); }
.tl-tile--promo:hover { border-color: #000; }
.tl-tile__mark {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  margin: 0 !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@keyframes tl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ========== БЫСТРАЯ КОНСУЛЬТАЦИЯ: карточка выезжает над панелью ========== */
.tl-consult {
  position: fixed;
  inset: 0;
  z-index: var(--tl-z-layer);
  font-family: var(--tl-font);
  font-weight: var(--tl-fw);
}
.tl-consult[hidden] { display: none; }
.tl-consult__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 40%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: tl-fade .2s ease;
}
.tl-consult__card {
  position: absolute;
  left: var(--tl-tabbar-gap);
  right: var(--tl-tabbar-gap);
  bottom: calc(var(--tl-tabbar-space) + 34px);   /* над панелью и над поднятым кругом консультации */
  padding: 6px;
  color: var(--tl-c-dd-text);
  background: linear-gradient(180deg, var(--tl-c-dd-top), var(--tl-c-dd-bottom));
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 40%);
  animation: tl-rise .24s var(--tl-ease);
}
.tl-consult__card .tl-consult__btn { padding: 9px 8px; }
.tl-consult__card .tl-consult__title { font-size: 15px; }
.tl-consult__card .tl-consult__txt b { font-size: 14.5px; }
.tl-consult__head { padding: 8px 10px 10px; }
.tl-consult__title { font-size: 14px; font-weight: var(--tl-fw-bold); color: #fff; }
.tl-consult__sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 12px;
  color: rgb(255 255 255 / 55%);
}
.tl-consult__dot { width: 6px; height: 6px; border-radius: 50%; background: #3ecf6e; box-shadow: 0 0 0 3px rgb(62 207 110 / 18%); }
.tl-consult__btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 8px;
  border-radius: 12px;
  color: #fff;
  transition: background-color .15s;
}
.tl-consult__btn + .tl-consult__btn { margin-top: 2px; }
.tl-consult__btn:hover, .tl-consult__btn:focus-visible { background: rgb(255 255 255 / 8%); }
.tl-consult__ic {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
}
.tl-consult__ic--max { background: none; }
.tl-consult__ic--max img { width: 36px; height: 36px; }
.tl-consult__ic--call { background: var(--tl-c-accent); }
.tl-consult__ic--call img { width: 22px; height: 22px; }
.tl-consult__txt { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.25; }
.tl-consult__txt b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tl-consult__txt small { font-size: 11.5px; color: rgb(255 255 255 / 50%); }
.tl-consult__go { flex: 0 0 auto; opacity: .45; }

/* ================================ АДАПТИВ ================================ */

/* до 1100 (планшет, небольшой ноутбук): меню прячется в бургер — пять иконок и меню не помещаются */
@media (max-width: 1099.98px) {
  .tl-nav, .tl-actions { display: none; }
  .tl-only-compact { display: inline-flex; }
  .tl-topbar__in { gap: 4px; }
  .tl-logo { margin-right: 8px; }
  .tl-search-compact.tl-only-compact { margin-left: auto; }
}

/* телефон */
@media (max-width: 767.98px) {
  .tl-topbar__in { height: var(--tl-topbar-h-m); padding: 0 var(--tl-gutter-m); }
  .tl-logo { gap: 16px; }
  .tl-logo__word { width: 170px; height: auto; }
  .tl-logo__desc { width: 75px; height: auto; }
  .tl-promo__extra { display: none; }
  /* промо на телефоне — компактная строка: шапка стала ниже, акция не должна «бить» (владелец) */
  .tl-promo { min-height: 24px; padding: 4px var(--tl-gutter-m); gap: 2px 6px; font-size: 11px; line-height: 1.2; letter-spacing: .01em; }
  .tl-search { padding: 2px var(--tl-gutter-m) 10px; }
  .tl-tabbar { display: flex; }
  .tl-mnav { max-height: calc(100dvh - var(--tl-topbar-h-m) - var(--tl-tabbar-space)); }

  .tl-footer { padding: 36px var(--tl-gutter-m) calc(32px + var(--tl-tabbar-space)); font-size: 14px; }  /* место под нижнюю панель */
  .tl-footer__in { grid-template-columns: 1fr; gap: 28px; }
  .tl-footer__title { font-size: 16px; }
  .tl-footer__links--2col { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .tl-footer__contacts { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 10px; }
  .tl-footer__bottom { flex-direction: column; align-items: flex-start; }
  .tl-footer__legal { flex-direction: column; }
}

/* логотип поджимается по ширине экрана, чтобы поиск, корзина и бургер оставались 44×44 */
@media (max-width: 479.98px) {
  .tl-logo { gap: 12px; }
  .tl-logo__word { width: 150px; }
  .tl-logo__desc { width: 66px; }
}
@media (max-width: 419.98px) {
  .tl-logo { gap: 8px; }
  .tl-logo__word { width: 132px; }
  .tl-logo__desc { width: 58px; }
}
@media (max-width: 389.98px) {
  .tl-logo__word { width: 124px; }
  .tl-logo__desc { width: 54px; }
}
@media (max-width: 369.98px) {
  .tl-logo__desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-topbar *, .tl-sheet *, .tl-consult *, .tl-dd__menu, .tl-mnav { animation: none !important; transition: none !important; }
  .tl-catstrip__list { scroll-behavior: auto; }
}

/* ============== ЕДИНЫЙ РИТМ И ЗАГОЛОВКИ БЛОКОВ (для всех своих виджетов и компонентов) ==============
   .tl-section — обёртка блока: одинаковый отступ сверху (--tl-space) и поля по краям, ширина контейнера.
   .tl-section--bleed-m — на телефоне во всю ширину экрана и без отступа сверху (баннеры).
   .tl-title (+ __main жирная заглавными, __sub тонкая) — заголовок блока. Правка здесь меняет все блоки сразу. */
.tl-section {
  box-sizing: border-box;
  max-width: var(--tl-container);
  margin-inline: auto;
  padding: var(--tl-space) var(--tl-gutter) 0;
}
.tl-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--tl-font);
  font-size: var(--tl-title-size);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--tl-c-text);
}
.tl-title__main { font-weight: 900; letter-spacing: -.01em; }
.tl-title__sub { font-weight: 400; }
.tl-title span:empty { display: none; }
@media (max-width: 767.98px) {
  .vz-theme-85 { --tl-space: 24px; --tl-title-size: 20px; }
  .tl-section { padding-inline: var(--tl-gutter-m); }
  .tl-section--bleed-m { padding-inline: 0; padding-top: 0; }   /* баннер на телефоне — вплотную к шапке, во всю ширину */
}