/* Capymapa — переключатель города в шапке сайта.
   Вставляется скриптом capymapa-city.js: на десктопе сразу после #logo
   внутри .left-side, на мобильной ширине — первым потомком
   #header .right-side .header-widget. Версия 3, 20.09.2026 — см.
   изменения ниже, в блоке "Позиция чипа". */

#header .cm-city{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-left:10px;
  vertical-align:middle;
  font-family:inherit;
}

/* сам чип */
#header .cm-city__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 10px 0 9px;
  border:0;
  border-radius:99px;
  background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.06);
  color:#465158;
  font-size:13px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:box-shadow .15s ease, color .15s ease, background .15s ease;
}
#header .cm-city__btn:hover{
  color:#047079;
  box-shadow:0 2px 6px rgba(16,24,40,.14), 0 0 0 1px rgba(4,112,121,.25);
}
#header .cm-city__btn:focus-visible{
  outline:2px solid #02b7bd;
  outline-offset:2px;
}
#header .cm-city__pin{ flex:0 0 auto; color:#047079; }
#header .cm-city__chev{
  flex:0 0 auto;
  transition:transform .18s ease;
  opacity:.55;
}
#header .cm-city.is-open .cm-city__chev{ transform:rotate(180deg); }

/* выпадающий список */
#header .cm-city__menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:190px;
  padding:6px;
  margin:0;
  list-style:none;
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(16,24,40,.16), 0 0 0 1px rgba(16,24,40,.06);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:1200;
}
#header .cm-city.is-open .cm-city__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
#header .cm-city__menu li{ margin:0; padding:0; }
#header .cm-city__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  color:#465158;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}
#header .cm-city__item:hover{ background:#f1f7f8; color:#047079; }
#header .cm-city__item--active{ color:#047079; }
#header .cm-city__item--soon{
  color:#98a2ad;
  cursor:default;
  pointer-events:none;
}
#header .cm-city__tag{
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#f79400;
}
#header .cm-city__check{ color:#047079; flex:0 0 auto; }

/* если тема рисует шапку тёмной — чип остаётся читаемым */
#header.transparent .cm-city__btn,
#header .transparent .cm-city__btn{ background:#fff; }

/* ==========================================================================
   Позиция чипа в шапке Listeo — ВЕРСИЯ 3, 20.09.2026.

   История:
   v1 — центрирование по центру экрана (left:50vw). Баг: чип считал
   "половину экрана" от края своего родителя (.left-side), а тот сам
   начинается не с 0, а с отступом шапки (~15px) — чип уезжал вправо от
   реального центра. Заодно список открывался от левого края чипа, почти
   в бургер.

   v2 — отказались от vw, чип стал иконкой и встал через
   position:absolute; right:46px относительно .left-side (расчёт: 38px
   сам бургер + 8px зазор). Идея была в том, что правый край .left-side
   всегда совпадает с правым краем бургера (бургер float:right внутри
   .left-side) — это верно и не зависит от ширины экрана. НО: расчёт не
   учитывал ширину .right-side (виджет входа/аккаунта) — а она разная:
   у гостя это узкая ссылка «Войти», у вошедшего пользователя — аватар
   пошире. В обоих случаях свободного места между .right-side и бургером
   оказалось только ~14–17px — меньше 34px иконки, и она наезжала на
   аватар у вошедших пользователей (баг, найденный Иваном 19.09.2026).

   v3 — не подбираем пиксельный отступ вообще. Скрипт capymapa-city.js
   на этой ширине переносит сам DOM-узел .cm-city внутрь
   #header .right-side .header-widget (первым потомком) — контейнера,
   который существует что при госте, что при вошедшем пользователе.
   Раскладка внутри — обычный flexbox с gap, поэтому сколько бы места ни
   занимал сосед (короткая ссылка или широкий аватар), браузер сам ставит
   их в ряд без наложения — без единого захардкоженного пикселя.

   Desktop (≥1025px, есть обычное меню, бургера нет) — без изменений:
   чип остаётся сразу после логотипа, как раньше (полный текст, не иконка).
   ========================================================================== */
#header .cm-city{ float:left; margin-top:13px; }

/* своя кнопка-аватар нужна только там, где шапка уходит в бургер;
   на десктопе работает родное меню аккаунта темы */
#header .cm-acct{ display:none; }

@media (max-width:1024px){
  /* .header-widget держит либо ссылку «Войти», либо блок аватара —
     кладём чип рядом с ними через flex, без абсолютного позиционирования */
  #header .right-side .header-widget{
    display:flex;
    align-items:center;
    gap:8px;
  }

  #header .cm-city{
    position:static;
    float:none;
    margin:0;
  }

  /* схлопнуто в иконку: только пин, без подписи и без стрелки */
  #header .cm-city__label,
  #header .cm-city__chev{ display:none; }

  #header .cm-city__btn{
    width:34px;
    height:34px;
    padding:0;
    gap:0;
    justify-content:center;
    border-radius:10px;
    background:#f1f5f6;
    box-shadow:none;
  }
  #header .cm-city__btn:hover{ background:#e7eef0; box-shadow:none; }

  /* список открывается влево от иконки (вправо уже некуда — рядом бургер) */
  #header .cm-city__menu{ left:auto; right:0; min-width:170px; }
}

/* ==========================================================================
   Единый вид и единый ряд трёх кнопок в шапке (город, аккаунт, бургер)
   — 20.09.2026, версия 3.2.

   Иван заметил на живом iPhone: три кнопки в ряду выглядели по-разному
   и «очень странно выравнены». Замеры на странице подтвердили: иконка
   города 34×34 на y=56, аватар 41×41 (35px + белая рамка 3px) на y=54,
   бургер 34×34 на y=49 — три размера и три высоты; зазор слева от
   аватара 5px, справа 33px. Причина в том, что это три разных
   контейнера: чип и аккаунт лежат в .right-side (абсолютный,
   right:70px — 70px как раз резервировались под бургер), а бургер —
   во .left-side как float:right, вообще без вертикального центрирования.

   В одобренном мокапе (capymapa-header-mockup-v1.html, .hdr-icon-btn)
   все кнопки шапки — один и тот же квадрат 34×34, скругление 10px,
   фон #f1f5f6, цвет значка #465158, зазор 8px.

   Решение — не подгонять пиксели, а собрать все три в ОДИН flex-ряд:
   capymapa-city.js переносит бургер в .header-widget (placeBurger), а
   .right-side прижимается к тому же правому отступу 15px, что и логотип
   слева (родной боковой отступ контейнера Listeo на этих ширинах).
   Дальше размеры, высоту и зазоры держит flexbox, а не расчёт.
   ========================================================================== */
@media (max-width:1024px){
  /* ВАЖНО, версия 3.3. Вся раскладка ряда висит на классе .cm-row,
     который capymapa-city.js ставит ТОЛЬКО когда ряд реально собран в
     видимой копии шапки (функция assembleRow). В версии 3.2 эти правила
     применялись безусловно, и когда скрипт собрал ряд не в той копии
     шапки (Listeo держит на странице несколько — обычную и клоны для
     липкого режима), у вошедших пользователей шапка осталась вообще
     без кнопок. Теперь, если скрипт по любой причине не собрал ряд,
     шапка просто выглядит как у родной темы — исчезнуть нечему. */

  /* весь ряд прижат к правому отступу шапки; 70px под бургер больше
     не нужны — бургер теперь внутри ряда */
  #header .right-side.cm-row-side{ right:15px !important; }

  #header .right-side .header-widget.cm-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  #header .header-widget.cm-row .cm-city{ flex:0 0 auto; }

  /* Бургер внутри ряда: снимаем float родной темы */
  #header .header-widget.cm-row .mmenu-trigger{
    float:none !important;
    margin:0 !important;
    flex:0 0 auto;
  }

  /* Аккаунт: родной .user-menu прячем — Listeo верстает его как
     .user-menu(width:0) > .user-name > span{position:absolute;left:-28px}
     > img, такой узел не занимает места во flex-ряду и висит абсолютом
     поверх соседей (отсюда и «наложение», и лишние 5px/33px зазоров).
     Вместо него capymapa-city.js ставит свою ссылку .cm-acct 34×34 с
     тем же аватаром, ведущую в профиль.
     Прячем строго по классу .cm-has-acct — то есть только когда своя
     кнопка действительно вставлена (см. mountAccount). */
  #header .header-widget.cm-has-acct .user-menu{ display:none !important; }

  #header .cm-acct{
    display:block;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    overflow:hidden;
    background:#f1f5f6;
  }
  #header .cm-acct img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
  }

  /* «Войти» — гость, ссылка родная тема, схлопываем в иконку */
  #header .right-side .sign-in{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin:0 !important;        /* родная тема даёт margin-left:-8px — в старой
                                    вёрстке компенсировал соседний отступ, а тут
                                    съедал весь flex-gap: город и «Войти»
                                    визуально слипались, а до бургера был
                                    нормальный зазор. Найдено при живом
                                    тестировании перед выкладкой 3.3. */
    padding:0 !important;
    border-radius:10px;
    background:#f1f5f6;
    color:#465158 !important;
    font-size:0 !important;     /* прячет текст "Войти", остаётся только иконка */
  }
  #header .right-side .sign-in:hover{ background:#e7eef0; }
  #header .right-side .sign-in i{ font-size:16px !important; }

  /* Бургер — родная кнопка темы, приводим к тому же квадрату.
     Сама кнопка становится flex-центровщиком, а коробка с полосками
     получает явные размеры: в версии 3.2 ей задали только ширину, и
     полоски рисовались не по центру квадрата (Иван заметил это на
     живом телефоне). В hamburgers.css полоски — это .hamburger-inner
     и его ::before/::after, позиционированные абсолютом внутри
     .hamburger-box, поэтому пересчитываем и их смещения. */
  #header .mmenu-trigger{
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    border-radius:10px !important;
    background:#f1f5f6 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #header .mmenu-trigger:hover{ background:#e7eef0 !important; }
  #header .mmenu-trigger .hamburger-box{
    width:16px !important;
    height:12px !important;
    display:block !important;
    position:relative !important;
    margin:0 !important;
  }
  #header .mmenu-trigger .hamburger-inner{
    top:50% !important;
    margin-top:-1px !important;
  }
  #header .mmenu-trigger .hamburger-inner::before{ top:-5px !important; }
  #header .mmenu-trigger .hamburger-inner::after{ bottom:-5px !important; }
  #header .mmenu-trigger .hamburger-inner,
  #header .mmenu-trigger .hamburger-inner::before,
  #header .mmenu-trigger .hamburger-inner::after{
    background-color:#465158 !important;
    width:16px !important;
    height:2px !important;
    border-radius:2px !important;
  }
}

/* ==========================================================================
   Мобильное меню (бургер) — редизайн по дизайн-системе, 20.09.2026.

   Была нестилизованная тема Listeo: сплошной бирюзовый фон (#03b8c0),
   шрифт Raleway, обычный список ссылок без акцентов — Иван назвал это
   «очень странно выглядит», задача была найти дизайнерское решение.

   Стало (тот вариант, что был одобрен в мокапе 19.09.2026): тёмная
   панель на базе --cm-teal-900, пункты меню — Unbounded, у активного
   пункта — акцентная точка (--cm-amber-500), наверху меню — встроенный
   блок выбора города (строит capymapa-city.js, см. mountMobileMenuExtras),
   внизу — акцентная кнопка «Войти»/«Мой профиль» и соцсети сплошными
   бирюзовыми кружками вместо голых иконок.

   Блок города (.mn-city) стоит СОСЕДОМ .mobile-navigation-list, а не
   внутри неё: Listeo сам меняет высоту .mobile-navigation-list через
   JS при открытии подменю языка (аккордеон), и если добавить что-то
   внутрь неё, расчёт высоты собьётся и подменю обрежется снизу
   overflow:hidden — эта ошибка была найдена и исправлена вживую перед
   выкладкой, см. комментарий в capymapa-city.js.
   ========================================================================== */
@media (max-width:1024px){
  .mobile-navigation-wrapper{
    background:linear-gradient(165deg, var(--cm-teal-900,#06383e) 0%, #042227 100%) !important;
  }

  /* шапка меню: лого + крестик закрытия */
  .mobile-navigation-wrapper .mobile-nav-header{
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mobile-navigation-wrapper .menu-icon-toggle{
    color:#fff !important;
    background:rgba(255,255,255,.08);
    border-radius:10px;
  }

  /* пункты меню — Unbounded, точка-индикатор активного пункта, разделители
     между строками (как в одобренном мокапе — .mn-list a border-bottom) */
  .mobile-navigation-wrapper .mobile-navigation-list{ margin-top:4px; }
  .mobile-navigation-wrapper #mobile-nav > li > a{
    font-family:'Unbounded', sans-serif !important;
    font-size:19px !important;
    font-weight:700 !important;
    letter-spacing:-.01em;
    color:#fff !important;
    padding:13px 25px 13px 41px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    position:relative;
  }
  .mobile-navigation-wrapper #mobile-nav > li > a::before{
    content:'';
    position:absolute;
    left:25px; top:50%;
    width:6px; height:6px;
    margin-top:-3px;
    border-radius:50%;
    background:transparent;
    transition:background .15s ease;
  }
  /* активный пункт — янтарный, как .mn-list a.active в мокапе */
  .mobile-navigation-wrapper #mobile-nav > li.current-menu-item > a{
    color:var(--cm-amber-500,#f79400) !important;
  }
  .mobile-navigation-wrapper #mobile-nav > li.current-menu-item > a::before{
    background:var(--cm-amber-500,#f79400);
  }

  /* переключатель языка — карточка со стрелкой, как .mn-lang в мокапе,
     а не обычный пункт списка (было "выглядит по-разному" — исправлено) */
  .mobile-navigation-wrapper .pll-parent-menu-item{
    margin:14px 0 0;
  }
  .mobile-navigation-wrapper .pll-parent-menu-item > a{
    margin:0 25px !important;
    padding:11px 14px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.06) !important;
    border-bottom:0 !important;
    display:flex !important;
    align-items:center;
    /* флаг и подпись языка идут слева вплотную, шеврон уезжает вправо
       через margin-left:auto — при space-between подпись вставала по
       центру карточки, чего в мокапе нет */
    justify-content:flex-start !important;
    gap:8px;
    font-family:'Manrope', sans-serif !important;
    font-size:14.5px !important;
    font-weight:600 !important;
    color:#fff !important;
  }
  .mobile-navigation-wrapper .pll-parent-menu-item > a::after{
    content:'\203A';
    margin-left:auto;
    color:rgba(255,255,255,.5);
    font-size:18px;
    line-height:1;
    margin-left:8px;
  }
  .mobile-navigation-wrapper .pll-parent-menu-item .sub-menu-back-btn,
  .mobile-navigation-wrapper .pll-parent-menu-item ul{
    background:#062a30 !important;
  }
  /* кнопка "Back" в открытом подменю языка — родная тема рисует её чёрным
     текстом (color не задан явно), на тёмном фоне почти не видна —
     Иван поймал это на живом телефоне, фиксируем цвет и стрелку */
  .mobile-navigation-wrapper .sub-menu-back-btn{
    color:rgba(255,255,255,.75) !important;
  }
  .mobile-navigation-wrapper .sub-menu-back-btn::before{
    color:rgba(255,255,255,.75) !important;
  }
  .mobile-navigation-wrapper .pll-parent-menu-item ul a{
    color:rgba(255,255,255,.82) !important;
    font-family:'Manrope', sans-serif !important;
  }

  /* низ меню: соцсети — сплошные бирюзовые кружки вместо голых иконок */
  .mobile-navigation-wrapper .mobile-nav-widgets{
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:10px;
    padding-top:20px !important;
  }
  .mobile-navigation-wrapper .new-footer-social-icons{
    display:flex !important;
    gap:10px;
  }
  .mobile-navigation-wrapper .new-footer-social-icons li{
    width:34px !important;
    height:34px !important;
    border-radius:50%;
    background:var(--cm-teal-500,#02b7bd);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-navigation-wrapper .new-footer-social-icons li a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    color:#fff !important;
  }
  .mobile-navigation-wrapper .new-footer-social-icons li i{
    font-size:16px !important;
    color:#fff !important;
  }
  .mobile-navigation-wrapper .new-footer-social-icons li svg{
    width:16px !important;
    height:16px !important;
    fill:#fff !important;
  }

  /* Строка города — вставлена скриптом сразу после .mobile-nav-header.
     Одна компактная строка «📍 Паттайя … Пхукет · скоро ›», ровно как
     блок .mn-city в мокапе. До версии 3.2 здесь был заголовок «ГОРОД»
     с чипами городов — в мокапе такого не было, Иван это и заметил. */
  .mobile-navigation-wrapper .mn-city{
    margin:4px 25px 8px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .mobile-navigation-wrapper .mn-city__cur{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-family:'Manrope', sans-serif;
    font-size:14.5px;
    font-weight:700;
  }
  .mobile-navigation-wrapper .mn-city__cur svg{
    flex:0 0 auto;
    color:var(--cm-teal-300,#5cc9ce);
  }
  .mobile-navigation-wrapper .mn-city__next{
    display:flex;
    align-items:center;
    gap:6px;
    color:#9db8ba;
    font-family:'Manrope', sans-serif;
    font-size:12px;
    text-decoration:none;
    white-space:nowrap;
  }
  .mobile-navigation-wrapper a.mn-city__next:hover{ color:#fff; }

  /* кнопка входа/профиля — вставлена скриптом перед соцсетями.
     Пилюля 46px, Manrope 800 — как .mn-cta в мокапе. */
  .mobile-navigation-wrapper .mn-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    margin:0 25px 18px;
    padding:0 18px;
    border-radius:999px;
    background:var(--cm-amber-500,#f79400);
    color:#06282e !important;
    font-family:'Manrope', sans-serif !important;
    font-size:14.5px;
    font-weight:800;
    text-decoration:none;
  }
  .mobile-navigation-wrapper .mn-cta:hover{
    background:var(--cm-amber-700,#e07b00);
  }
}

/* Карта: пробный компактный bottom sheet на телефонах.
   Один изолированный блок — можно откатить отдельным коммитом целиком. */
@media (max-width:860px){
  body.page-id-3828 #capymapa-v2 #cm-sidebar,
  body.page-id-4719 #capymapa-v2 #cm-sidebar{
    height:88vh !important;
    height:88dvh !important;
  }
  body.page-id-3828 #cm-sidebar .cm-sheet-handle,
  body.page-id-4719 #cm-sidebar .cm-sheet-handle{
    padding:7px 0 3px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-sheet-handle .cm-bar,
  body.page-id-4719 #cm-sidebar .cm-sheet-handle .cm-bar{
    margin-bottom:5px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-sidebar-header,
  body.page-id-4719 #cm-sidebar .cm-sidebar-header{
    padding:2px 14px 6px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-sidebar-title,
  body.page-id-4719 #cm-sidebar .cm-sidebar-title{
    margin-bottom:6px !important;
    font-size:17px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-search-box,
  body.page-id-4719 #cm-sidebar .cm-search-box{
    margin-bottom:6px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-search-box input,
  body.page-id-4719 #cm-sidebar .cm-search-box input{
    min-height:40px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-category-grid,
  body.page-id-4719 #cm-sidebar .cm-category-grid{
    grid-auto-columns:58px !important;
    column-gap:8px !important;
    padding:2px 0 6px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-cat-tile,
  body.page-id-4719 #cm-sidebar .cm-cat-tile{
    gap:4px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-cat-tile .cm-icon-circle,
  body.page-id-4719 #cm-sidebar .cm-cat-tile .cm-icon-circle{
    width:34px !important;
    height:34px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-cat-tile .cm-icon-circle svg,
  body.page-id-4719 #cm-sidebar .cm-cat-tile .cm-icon-circle svg{
    width:17px !important;
    height:17px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-cat-tile .cm-tile-label,
  body.page-id-4719 #cm-sidebar .cm-cat-tile .cm-tile-label{
    max-width:58px !important;
    font-size:9.5px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-sort-bar,
  body.page-id-4719 #cm-sidebar .cm-sort-bar{
    margin-bottom:6px !important;
    padding:0 14px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-sort-toggle,
  body.page-id-3828 #cm-sidebar .cm-filter-btn,
  body.page-id-4719 #cm-sidebar .cm-sort-toggle,
  body.page-id-4719 #cm-sidebar .cm-filter-btn{
    min-height:38px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-quick-bar,
  body.page-id-4719 #cm-sidebar .cm-quick-bar{
    gap:6px !important;
    padding:0 14px 6px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-quick,
  body.page-id-4719 #cm-sidebar .cm-quick{
    padding:6px 10px !important;
  }
  body.page-id-3828 #cm-sidebar #cm-listing-list,
  body.page-id-4719 #cm-sidebar #cm-listing-list{
    padding:2px 8px 24px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-list-item,
  body.page-id-4719 #cm-sidebar .cm-list-item{
    padding:8px !important;
  }
  body.page-id-3828 #cm-sidebar .cm-list-item .cm-thumb,
  body.page-id-4719 #cm-sidebar .cm-list-item .cm-thumb{
    width:64px !important;
    height:64px !important;
  }
  body.page-id-3828 #listeo-floating-welcome-bubble,
  body.page-id-4719 #listeo-floating-welcome-bubble{
    display:none !important;
  }
}

/* Карта: на планшете 16 категорий занимают два полных ряда по восемь. */
@media (min-width:600px) and (max-width:860px){
  body.page-id-3828 #cm-sidebar .cm-category-grid,
  body.page-id-4719 #cm-sidebar .cm-category-grid{
    grid-auto-flow:row !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,auto) !important;
    grid-auto-columns:unset !important;
    column-gap:8px !important;
    row-gap:8px !important;
    overflow-x:hidden !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
}

/* Карта: SVG категорий должен совпадать по центру со своей оболочкой. */
@media (max-width:860px){
  body.page-id-3828 #cm-sidebar .cm-cat-tile .cm-icon-circle > span,
  body.page-id-4719 #cm-sidebar .cm-cat-tile .cm-icon-circle > span{
    width:17px !important;
    height:17px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  body.page-id-3828 #cm-sidebar .cm-cat-tile .cm-icon-circle > span svg,
  body.page-id-4719 #cm-sidebar .cm-cat-tile .cm-icon-circle > span svg{
    display:block !important;
    width:100% !important;
    height:100% !important;
  }
}