@charset "UTF-8";
@keyframes apr-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
/* hero-фон: при загрузке размывать аккуратно */
.hero-city{background-position:right center;background-size:cover}
/* AP-R 08.10.2026: акцент H1 отдельной строкой (в city-v2.css он inline-block — переносился только когда не влезал) */
.hero-city h1 em.hero-acc{display:block}
/* Контейнер карты: убираем декорации мокапа, оставляем чистый Я.Карты */
.map-pane{position:sticky; top:160px; min-height:560px; height:calc(100vh - 200px); max-height:760px; border-radius:18px; overflow:hidden; box-shadow:0 4px 24px rgba(19,55,79,.10)}
.map-pane .ymaps-2-1-79-map{border-radius:18px}
/* Карточка в списке: подсветка активной */
.list-pane .zk-list-card{transition:box-shadow .18s, transform .18s, border-color .18s; scroll-margin-top:160px}
.list-pane .zk-list-card.highlighted{box-shadow:0 0 0 2px #a3d977,0 4px 24px rgba(19,55,79,.10); transform:translateY(-1px)}
/* ===== Mobile/Tablet: toggle Список ↔ Карта ===== */
.cat-toggle{display:none}
.map-back{display:none}
@media (max-width:1023px){
  .map-pane{position:relative; top:0; height:380px; min-height:0; max-height:none}
  /* Toggle pill */
  .cat-toggle{
    display:flex; gap:4px;
    margin:6px 16px 14px;
    background:#eef2f6; border-radius:999px; padding:4px;
    position:sticky; top:62px; z-index:40;
    box-shadow:0 1px 2px rgba(19,55,79,.06);
  }
  body.scrolled .cat-toggle{top:62px}
  .cat-toggle .ct-btn{
    flex:1; padding:8px 12px; border:0;
    background:transparent; border-radius:999px;
    cursor:pointer; font-family:inherit;
    font-weight:700; font-size:13.5px; color:#5b6b7a;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:background .15s, color .15s;
  }
  .cat-toggle .ct-btn.active{
    background:#fff; color:#13374f;
    box-shadow:0 1px 4px rgba(19,55,79,.12);
  }
  .cat-toggle .ct-svg{width:15px; height:15px}
  .cat-toggle .ct-cnt{
    font-weight:500; font-size:12px; color:#7a8a9c;
    margin-left:1px;
  }
  .cat-toggle .ct-btn.active .ct-cnt{color:#13374f; opacity:.6}
  /* По умолчанию — режим Список: карту скрываем */
  .map-pane{display:none}
  /* Режим Карта: full-screen overlay */
  body.cat-mode-map{overflow:hidden}
  body.cat-mode-map .map-pane{
    display:block !important;
    position:fixed; inset:0;
    height:100dvh; max-height:none; min-height:0;
    width:100vw;
    z-index:90; border-radius:0;
    box-shadow:none;
  }
  body.cat-mode-map .list-pane{display:none}
  body.cat-mode-map .cat-toggle{display:none}
  body.cat-mode-map .header,
  body.cat-mode-map .filter-bar,
  body.cat-mode-map .m-stickybar{display:none !important}
  /* Кнопка «К списку» поверх карты */
  body.cat-mode-map .map-back{
    display:inline-flex; align-items:center; gap:6px;
    position:fixed; top:14px; left:14px; z-index:95;
    padding:9px 14px; border-radius:999px;
    background:#fff; box-shadow:0 4px 16px rgba(19,55,79,.20);
    border:0; cursor:pointer; font-family:inherit;
    font-size:14px; font-weight:700; color:#13374f;
  }
  body.cat-mode-map .map-back svg{width:14px; height:14px}
  /* ===== Округ-чипы: плашка снизу, чипы в 2 ряда (grid + h-scroll если много) ===== */
  body.cat-mode-map .map-okrug-legend{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:none;
    z-index:94;
    background:#fff;
    border:0;
    border-radius:18px 18px 0 0;
    box-shadow:0 -6px 24px rgba(19,55,79,.18);
    backdrop-filter:none;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display:flex; align-items:stretch; gap:8px;
    overflow:hidden;
  }
  body.cat-mode-map .map-okrug-legend[hidden]{ display:none !important }
  body.cat-mode-map .map-okrug-legend .mol-label{ display:none }
  /* Fade-маски слева/справа — подсказка что есть ещё чипы за краем */
  body.cat-mode-map .map-okrug-legend::before,
  body.cat-mode-map .map-okrug-legend::after{
    content:''; position:absolute; top:10px; bottom:10px;
    width:28px; z-index:3; pointer-events:none;
    opacity:0; transition:opacity .18s ease-out;
  }
  body.cat-mode-map .map-okrug-legend::before{
    left:0;
    background:linear-gradient(90deg, #fff 30%, rgba(255,255,255,0));
  }
  body.cat-mode-map .map-okrug-legend::after{
    right:0;
    background:linear-gradient(-90deg, #fff 30%, rgba(255,255,255,0));
  }
  body.cat-mode-map .map-okrug-legend.has-overflow-left::before{ opacity:1 }
  body.cat-mode-map .map-okrug-legend.has-overflow-right::after{ opacity:1 }
  /* Grid 2 ряда × auto-flow column: при 8 чипах = 2×4, скролл вправо */
  body.cat-mode-map .map-okrug-legend .mol-chips{
    display:grid;
    grid-template-rows:repeat(2, minmax(0, 1fr));
    grid-auto-flow:column;
    grid-auto-columns:calc(50% - 3px);
    gap:6px;
    flex:1 1 auto; min-width:0;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    scroll-padding-left:0;
  }
  body.cat-mode-map .map-okrug-legend .mol-chips::-webkit-scrollbar{ display:none }
  body.cat-mode-map .mo-chip{
    width:100%; min-width:0;
    justify-content:center;
    scroll-snap-align:start;
  }
  body.cat-mode-map .mo-chip .mo-name{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    min-width:0;
  }
  body.cat-mode-map .map-okrug-legend .mol-reset{
    flex:0 0 auto; padding:4px 8px;
    align-self:center;
  }
  /* ===== /Плашка-чипы 2 ряда + h-scroll fade ===== */
}
/* ===== /Toggle Список ↔ Карта ===== */
/* ===== 16.10.2026 Выключатель карты в каталоге (компьютер): выключена — карта скрыта, карточки во всю ширину ===== */
.cat-mapsw{display:none}
@media (min-width:1024px){
  #catalog .head .sort{flex:1 1 100%; align-items:center}
  #catalog .cat-mapsw{display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:6px 2px 6px 12px;
    background:none; border:0; cursor:pointer; font:600 14px/1 Manrope,system-ui,sans-serif; color:#13374f}
  #catalog .cat-mapsw .apr-ic{width:16px; height:16px}
  #catalog .cat-mapsw-track{position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:999px; background:#17B7BF; transition:background .15s}
  #catalog .cat-mapsw-knob{position:absolute; top:3px; left:21px; width:18px; height:18px; border-radius:50%; background:#fff;
    box-shadow:0 1px 3px rgba(19,55,79,.25); transition:left .15s}
  #catalog.cat-nomap .cat-mapsw-track{background:#c8d4dc}
  #catalog.cat-nomap .cat-mapsw-knob{left:3px}
  #catalog .cat-mapsw:focus-visible{outline:2px solid #17B7BF; outline-offset:3px; border-radius:8px}
  #catalog.cat-nomap .catalog-grid{grid-template-columns:1fr}
  #catalog.cat-nomap .map-pane{display:none}
  /* 26.10.2026 (Сергей): планшет 1024–1199 — тоже 3 в ряд, как на компьютере (было 2 во всю ширину) */
  #catalog.cat-nomap .list-pane{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
}
@media (min-width:1200px){
  #catalog.cat-nomap .list-pane{grid-template-columns:repeat(3,1fr); gap:18px}
  #catalog.cat-nomap .zk-list-img{height:200px}
}
/* ===== /Выключатель карты ===== */
/* ===== 26.10.2026 (Сергей) Планшет 1024–1199, карта включена: карта не уже 330 px, округа — компактной плашкой =====
   Было: список всегда 720 px, карте — остаток (216 px на iPad 1024): чипы округов шли по одному в строку, обрезались
   и закрывали до половины карты. Стало: список уступает карте до 330 px (на 1024 карточки 2×296, с 1138 — как раньше);
   чипы — в 2 ряда с прокруткой вбок и затуханием у края, где есть ещё чипы (как на телефоне), подпись «Округа:» скрыта.
   Классы has-overflow-left/right ставит renderOkrugLegend (updateFades). */
@media (min-width:1024px) and (max-width:1199px){
  #catalog .catalog-grid{grid-template-columns:minmax(330px,1fr) minmax(0,720px)}
  #catalog .map-okrug-legend{left:8px; right:8px; bottom:8px; padding:6px 8px; gap:8px}
  #catalog .map-okrug-legend .mol-label{display:none}
  #catalog .map-okrug-legend .mol-chips{display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:max-content;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain}
  #catalog .map-okrug-legend .mol-chips::-webkit-scrollbar{display:none}
  #catalog .mo-chip{padding:4px 9px 4px 7px; font-size:11px}
  #catalog .mo-chip .mo-cnt{font-size:10px; padding:2px 5px}
  #catalog .map-okrug-legend.has-overflow-right .mol-chips{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  #catalog .map-okrug-legend.has-overflow-left .mol-chips{
    -webkit-mask-image:linear-gradient(-90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(-90deg,#000 calc(100% - 28px),transparent)}
  #catalog .map-okrug-legend.has-overflow-left.has-overflow-right .mol-chips{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
}
/* ===== /Планшет: карта и округа ===== */