/* HALWAHAS City · аккуратные кнопки карты · 2026-10-17
   Подключается последним на /city/. Действует только на экране карты
   (body.hw-city-ui:not(.in-shop)); комнаты и 3D не затрагивает.
   Раскладка поверх карты:
     слева сверху  — что ищем: область поиска, «Все места · проекты и ТЦ»
     справа сверху — где мы: город, инструменты карты (масштаб, север, весь мир, домой)
     снизу         — источники карты (слева) и помощник (справа, см. city-map-tidy.js) */

html body.hw-city-ui:not(.in-shop){
  --hwm-left:364px;               /* первый свободный x справа от панели */
  --hwm-top:14px;                 /* отступ от верха карты */
  --hwm-bottom:18px;              /* отступ от низа карты */
  --hwm-fab-bottom:24px;
  --hwm-h:40px;
  --hwm-r:12px;
  --hwm-ink:#242424;
  --hwm-muted:#6b6f73;
  --hwm-soft:#f2f3f4;
  --hwm-yellow:#ffe500;
  --hwm-shadow:0 0 0 1px rgba(36,36,36,.07),0 2px 6px -1px rgba(36,36,36,.16);
  --hwm-font:600 13px/1.2 Onest,Arial,sans-serif;
  --hwm-i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15.2 15.2 4.3 4.3'/%3E%3C/svg%3E");
  --hwm-i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --hwm-i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.6 12h16.8M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5s1.1-6 3.5-8.5Z'/%3E%3C/svg%3E");
  --hwm-i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.2 12 4.5l8 6.7'/%3E%3Cpath d='M6.3 9.6V19.5h11.4V9.6'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E");
  --hwm-i-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 7h15M4.5 12h15M4.5 17h9'/%3E%3C/svg%3E");
  --hwm-bg-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242424' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.4-5.6-6.4-11a6.4 6.4 0 0 1 12.8 0c0 5.4-6.4 11-6.4 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E");
  --hwm-bg-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --hwm-bg-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242424' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='6' height='6' rx='1.4'/%3E%3Crect x='13.5' y='4.5' width='6' height='6' rx='1.4'/%3E%3Crect x='4.5' y='13.5' width='6' height='6' rx='1.4'/%3E%3Crect x='13.5' y='13.5' width='6' height='6' rx='1.4'/%3E%3C/svg%3E");
}

/* ── Общий вид «плашки» поверх карты ───────────────────────────────── */
html body.hw-city-ui:not(.in-shop) .city-scope-toggle,
html body.hw-city-ui:not(.in-shop) .city-scope-cancel-drawing,
html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button,
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{
  box-sizing:border-box;
  height:var(--hwm-h);
  min-height:var(--hwm-h);
  border:0;
  border-radius:var(--hwm-r);
  background-color:#fff;
  box-shadow:var(--hwm-shadow);
  color:var(--hwm-ink);
  font:var(--hwm-font);
  white-space:nowrap;
}

/* ── Слева сверху: область поиска ─────────────────────────────────── */
html body.hw-city-ui:not(.in-shop) .city-search-scope{
  top:calc(var(--hw-city-header) + var(--hwm-top))!important;
  left:var(--hwm-left)!important;
  right:auto!important;
  max-width:min(340px,calc(100vw - var(--hwm-left) - 260px))!important;
  gap:8px;
  transition:opacity .18s ease;
}
html body.hw-city-ui:not(.in-shop) .city-scope-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:0 10px 0 11px;
  cursor:pointer;
}
html body.hw-city-ui:not(.in-shop) .city-scope-toggle::before{
  content:"";
  flex:none;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask:var(--hwm-i-search) center/18px no-repeat;
  mask:var(--hwm-i-search) center/18px no-repeat;
}
html body.hw-city-ui:not(.in-shop) .city-scope-toggle > span:first-child{color:var(--hwm-muted);font-weight:500}
html body.hw-city-ui:not(.in-shop) .city-scope-toggle > b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--hwm-ink)}
html body.hw-city-ui:not(.in-shop) .city-scope-toggle > span:last-child{
  flex:none;
  width:16px;
  height:16px;
  margin:0 0 0 -2px;
  font-size:0;
  color:var(--hwm-muted);
  background:currentColor;
  -webkit-mask:var(--hwm-i-chev) center/16px no-repeat;
  mask:var(--hwm-i-chev) center/16px no-repeat;
}
html body.hw-city-ui:not(.in-shop) .city-scope-cancel-drawing{padding:0 14px;background:var(--hwm-yellow)}

/* ── Слева сверху: «Все места · проекты и ТЦ» ─────────────────────── */
html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button{
  top:calc(var(--hwm-top) + var(--hwm-h) + 8px)!important;
  bottom:auto!important;
  left:var(--hwm-left)!important;
  right:auto!important;
  z-index:9;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - var(--hwm-left) - 72px);
  padding:0 14px 0 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button::before{
  content:"";
  flex:none;
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--hwm-yellow) var(--hwm-bg-grid) center/16px no-repeat;
}

/* ── Справа сверху: город и инструменты ───────────────────────────── */
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right{
  top:var(--hwm-top)!important;
  right:max(14px,env(safe-area-inset-right))!important;
  left:auto!important;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right > .hh-world-controls{display:contents!important}
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{order:1}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hh-world-controls){order:2}
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > button{order:3}

/* Город: одна плашка «⌖ Махачкала · 103 ⌄». */
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:block!important;
  width:auto!important;
  max-width:260px!important;
  height:var(--hwm-h)!important;
  margin:0!important;
  padding:0 30px 0 34px!important;
  border:0!important;
  border-radius:var(--hwm-r)!important;
  background:var(--hwm-bg-pin) no-repeat 11px 50%/18px 18px,var(--hwm-bg-chev) no-repeat right 9px center/16px 16px,#fff!important;
  color:var(--hwm-ink)!important;
  font:var(--hwm-font)!important;
  text-overflow:ellipsis;
  overflow:hidden;
  cursor:pointer;
}

/* Масштаб и север: вертикальная колонка. */
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hh-world-controls){
  display:flex;
  flex-direction:column;
  margin:0!important;
  border:0!important;
  border-radius:var(--hwm-r)!important;
  background:#fff!important;
  box-shadow:var(--hwm-shadow)!important;
  overflow:hidden;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hh-world-controls) button{
  width:var(--hwm-h)!important;
  height:var(--hwm-h)!important;
  min-height:var(--hwm-h)!important;
  border:0!important;
  background-color:transparent;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hh-world-controls) button + button{border-top:1px solid #eceef0!important}

/* «Весь мир» и «Махачкала»: две кнопки-значка одной колонкой. */
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > button{
  display:grid!important;
  place-items:center;
  width:var(--hwm-h)!important;
  min-width:var(--hwm-h)!important;
  height:var(--hwm-h)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:var(--hwm-r) var(--hwm-r) 0 0!important;
  background:#fff!important;
  box-shadow:var(--hwm-shadow)!important;
  color:var(--hwm-ink)!important;
  font-size:0!important;
  line-height:0!important;
  pointer-events:auto;
  cursor:pointer;
}
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > button + button{
  margin-top:-8px!important;
  border-radius:0 0 var(--hwm-r) var(--hwm-r)!important;
  border-top:1px solid #eceef0!important;
}
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > button::before{
  content:"";
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask:var(--hwm-i-globe) center/20px no-repeat;
  mask:var(--hwm-i-globe) center/20px no-repeat;
}
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > button + button::before{
  -webkit-mask-image:var(--hwm-i-home);
  mask-image:var(--hwm-i-home);
}

/* ── Время: тихая подпись по центру сверху ─────────────────────────── */
html body.hw-city-ui:not(.in-shop) #map-view .world-clock{
  top:calc(var(--hwm-top) + 6px)!important;
  bottom:auto!important;
  left:calc((100% + var(--hwm-left) - 20px) / 2)!important;
  right:auto!important;
  transform:translateX(-50%);
  max-width:none!important;
  white-space:nowrap;
  padding:6px 10px!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.84)!important;
  color:var(--hwm-ink)!important;
  font:500 12px/16px Onest,Arial,sans-serif!important;
  box-shadow:0 0 0 1px rgba(36,36,36,.06)!important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
/* ── Снизу слева: источники карты ─────────────────────────────────── */
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-scale{display:none!important}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right{
  top:auto!important;
  bottom:var(--hwm-bottom)!important;
  left:var(--hwm-left)!important;
  right:auto!important;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:left;margin:0!important}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib.maplibregl-compact{
  min-width:32px!important;
  min-height:32px!important;
  padding:0 0 0 32px!important;
  border-radius:16px;
  background:rgba(255,255,255,.84);
  box-shadow:0 0 0 1px rgba(36,36,36,.06);
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib-button{
  left:0;
  right:auto;
  width:32px!important;
  height:32px!important;
  min-height:32px!important;
  background-color:transparent!important;
  background-size:18px!important;
  opacity:.7;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib.maplibregl-compact-show{
  position:relative!important;
  left:0!important;
  right:auto!important;
  bottom:0!important;
  width:auto!important;
  max-width:min(420px,calc(100vw - var(--hwm-left) - 90px))!important;
  padding:7px 12px 7px 36px!important;
  border:0!important;
  background:#fff;
  box-shadow:var(--hwm-shadow)!important;
}

/* ── Карточка выбранного места ────────────────────────────────────── */
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-popup{
  width:252px;
  padding:14px;
  border:0!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 0 0 1px rgba(36,36,36,.06),0 14px 34px rgba(36,36,36,.20);
}
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-label{gap:4px}
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-kicker{font:600 10px/1.3 Onest,Arial,sans-serif;letter-spacing:.08em;color:var(--hwm-muted)}
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-name{font:700 16px/1.25 Onest,Arial,sans-serif;color:var(--hwm-ink)}
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-address{font:400 12px/1.4 Onest,Arial,sans-serif;color:var(--hwm-muted)}
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-presence{margin-top:2px;padding:3px 8px;border-radius:999px;font:500 11px/1.4 Onest,Arial,sans-serif}
html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-enter{min-height:44px;margin-top:12px;padding:0 14px;border:0;border-radius:12px;font:700 14px/1 Onest,Arial,sans-serif}

/* ── Панель слева (компьютер): тот же язык ────────────────────────── */
html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry{
  display:block!important;
  margin:0 0 8px;
  padding:11px 12px;
  border:0;
  border-radius:var(--hwm-r);
  background:#fff6c2!important;
  color:var(--hwm-ink)!important;
  font:600 13px/1.35 Onest,Arial,sans-serif;
  text-align:left!important;
  text-decoration:none;
}
html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry small{margin-top:2px!important;color:#5c5a4a;font-size:11px}
html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > button.surface-button{
  width:100%;
  min-height:40px;
  margin:10px 0 0;
  border:0;
  border-radius:var(--hwm-r);
  background:var(--hwm-soft);
  color:var(--hwm-ink);
  font:600 12px/1.3 Onest,Arial,sans-serif;
  box-shadow:none;
}

@media (hover:hover){
  html body.hw-city-ui:not(.in-shop) .city-scope-toggle:hover,
  html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button:hover,
  html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > :is(button,select):hover,
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right > .maplibregl-ctrl-group button:hover{background-color:#f6f7f8!important}
  html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button:hover{background-color:#fff!important;box-shadow:0 0 0 1px rgba(36,36,36,.14),0 4px 12px -2px rgba(36,36,36,.2)}
}

/* ════ Телефон ═══════════════════════════════════════════════════════ */
@media (max-width:760px),(max-width:1024px) and (max-height:600px),(pointer:coarse) and (max-height:600px){
  html body.hw-city-ui:not(.in-shop){
    --hwm-left:max(12px,env(safe-area-inset-left));
    --hwm-top:8px;
    --hw-city-mobile-panel:calc(270px + env(safe-area-inset-bottom));
    --hwm-bottom:calc(var(--hw-city-mobile-panel) + 12px);
    --hwm-fab-bottom:calc(var(--hw-city-mobile-panel) + 12px);
  }
  /* Ряд 1: «⌕ На видимой карте ⌄» слева, «⌖ Махачкала ⌄» справа. */
  html body.hw-city-ui:not(.in-shop) .city-search-scope{max-width:calc(54vw - 20px)!important}
  /* Когда открыта карточка места — плашка поиска не перекрывает её. */
  html body.hw-city-ui:not(.in-shop):has(#map-view .hh-shop-marker.is-selected) .city-search-scope{opacity:0;pointer-events:none}
  html body.hw-city-ui:not(.in-shop) .city-scope-toggle > span:first-child{display:none}
  html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{
    max-width:calc(46vw - 12px)!important;
    padding:0 26px 0 31px!important;
    background-position:9px 50%,right 7px center,0 0!important;
  }
  /* Время на телефоне не показываем — освещение карты остаётся. */
  html body.hw-city-ui:not(.in-shop) #map-view .world-clock{display:none!important}
  /* Подпись источников карты — тонкой строкой, не карточкой. */
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib.maplibregl-compact-show{
    max-width:calc(100vw - 96px)!important;
    padding:5px 10px 5px 34px!important;
    background:rgba(255,255,255,.86)!important;
    box-shadow:0 0 0 1px rgba(36,36,36,.06)!important;
    font-size:10px!important;
    line-height:14px!important;
  }

  /* Карточка места компактнее. */
  html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-popup{width:min(260px,calc(100vw - 32px));padding:12px}
  html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-kicker{display:none}
  html body.hw-city-ui:not(.in-shop) #map-view .hh-pin-enter{margin-top:10px}

  /* Нижняя панель: ряды без наложений. */
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:40px 40px auto auto;
    align-content:start;
    gap:8px;
    height:var(--hw-city-mobile-panel)!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
    border:0;
    box-shadow:0 -1px 0 rgba(36,36,36,.06),0 -8px 24px rgba(36,36,36,.08);
  }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > *{min-width:0;margin:0!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > .hw-city-destinations{
    grid-column:1;
    grid-row:1;
    position:static!important;
    border:0;
    border-radius:var(--hwm-r);
    background:var(--hwm-soft);
  }
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations > summary{
    display:flex;
    align-items:center;
    gap:7px;
    height:40px;
    min-height:40px!important;
    padding:0 13px 0 11px!important;
    border-radius:var(--hwm-r);
    list-style:none;
    font-size:0!important;
    line-height:40px!important;
    color:var(--hwm-ink);
    white-space:nowrap;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations > summary::-webkit-details-marker{display:none}
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations > summary::before{
    content:"";
    flex:none;
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:var(--hwm-i-menu) center/18px no-repeat;
    mask:var(--hwm-i-menu) center/18px no-repeat;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations > summary::after{
    content:"Направления";
    content:"Направления" / "";
    font:600 13px/1 Onest,Arial,sans-serif;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations[open] > summary{background:var(--hwm-yellow)}
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destination-links{
    left:12px!important;
    right:12px!important;
    bottom:calc(100% + 8px)!important;
    border:0!important;
    border-radius:16px!important;
    box-shadow:0 0 0 1px rgba(36,36,36,.06),0 14px 34px rgba(36,36,36,.2)!important;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry{
    grid-column:2;
    grid-row:1;
    display:block!important;
    height:40px;
    padding:0 10px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:center!important;
    font-size:12px;
    line-height:40px;
    letter-spacing:-.01em;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry small{display:none!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #filters{
    grid-column:1 / -1;
    grid-row:2;
    height:40px;
    min-height:40px;
    gap:6px;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #filters button{min-height:40px!important;height:40px;padding:0 13px!important;border-radius:var(--hwm-r)}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #store-list{
    grid-column:1 / -1;
    grid-row:3;
    height:auto!important;
    padding:1px 1px 2px!important;
    gap:8px;
  }
  html body.hw-city-ui:not(.in-shop) #map-view .store-card{height:116px!important;border-radius:14px}
  html body.hw-city-ui:not(.in-shop) #map-view .store-card-top{height:72px!important;min-height:72px!important;max-height:72px!important;padding:8px 10px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .store-card-top h2{-webkit-line-clamp:1!important;margin-bottom:2px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .store-card .enter-store{flex:0 0 42px!important;height:42px!important;min-height:42px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > button.surface-button{
    grid-column:1 / -1;
    grid-row:4;
    height:28px;
    min-height:28px;
    padding:0;
    background:transparent;
    color:var(--hwm-muted);
    font:500 12px/28px Onest,Arial,sans-serif;
  }
}

/* На сенсорных экранах масштаб жестами — кнопки «+ / −» убираем, «север» оставляем. */
@media (pointer:coarse){
  html body.hw-city-ui:not(.in-shop) #map-view :is(.maplibregl-ctrl-zoom-in,.maplibregl-ctrl-zoom-out){display:none!important}
  /* iPhone увеличивает страницу при нажатии на список с шрифтом меньше 16px.
     Шрифт 16px, а плашка визуально уменьшена до размера соседних (13px). */
  html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{
    --hwm-s:.8125;
    height:calc(var(--hwm-h) / var(--hwm-s))!important;
    max-width:calc((46vw - 12px) / var(--hwm-s))!important;
    margin-bottom:calc(var(--hwm-h) - var(--hwm-h) / var(--hwm-s))!important;
    padding:0 calc(26px / var(--hwm-s)) 0 calc(31px / var(--hwm-s))!important;
    border-radius:calc(var(--hwm-r) / var(--hwm-s))!important;
    background-position:calc(9px / var(--hwm-s)) 50%,right calc(7px / var(--hwm-s)) center,0 0!important;
    background-size:calc(18px / var(--hwm-s)) calc(18px / var(--hwm-s)),calc(16px / var(--hwm-s)) calc(16px / var(--hwm-s)),auto!important;
    font-size:16px!important;
    transform:scale(var(--hwm-s));
    transform-origin:100% 0;
  }
}

/* ── Телефон вертикально: список мест сворачивается, карте больше места ──
   Кнопку-ручку и атрибут <html data-hw-sheet="open|closed"> добавляет city-map-tidy.js.
   Свёрнуто: ручка + «Направления/Соседи» + фильтры. Развёрнуто: ещё карточки и «Показать ещё». */
html body.hw-city-ui:not(.in-shop) #map-view .hw-sheet-toggle{display:none}
@media (max-width:760px) and (orientation:portrait){
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop){--hw-city-mobile-panel:calc(300px + env(safe-area-inset-bottom))}
  html[data-hw-sheet="closed"] body.hw-city-ui:not(.in-shop){--hw-city-mobile-panel:calc(140px + env(safe-area-inset-bottom))}
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel{
    grid-template-rows:30px 40px 40px auto auto;
    padding-top:4px!important;
    transition:height .25s ease;
  }
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > .hw-sheet-toggle{
    position:relative;
    display:flex;
    grid-column:1 / -1;
    grid-row:1;
    align-items:flex-end;
    justify-content:center;
    gap:5px;
    height:30px;
    margin:0 -12px!important;
    padding:0 0 2px;
    border:0;
    background:transparent;
    color:var(--hwm-muted);
    font:500 12px/16px Onest,Arial,sans-serif;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .hw-sheet-toggle::before{
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    width:36px;
    height:4px;
    margin-left:-18px;
    border-radius:2px;
    background:#d4d7db;
  }
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .hw-sheet-toggle::after{
    content:"";
    width:14px;
    height:14px;
    background:currentColor;
    -webkit-mask:var(--hwm-i-chev) center/14px no-repeat;
    mask:var(--hwm-i-chev) center/14px no-repeat;
    transform:rotate(180deg);
    transition:transform .2s ease;
  }
  html[data-hw-sheet="open"] body.hw-city-ui:not(.in-shop) #map-view .hw-sheet-toggle::after{transform:none}
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > .hw-city-destinations,
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry{grid-row:2}
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #filters{grid-row:3}
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #store-list{grid-row:4}
  html[data-hw-sheet] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > button.surface-button{grid-row:5}
  html[data-hw-sheet="closed"] body.hw-city-ui:not(.in-shop) #map-view .explore-panel > :is(#store-list,button.surface-button){display:none!important}
}

/* Узкие ноутбуки и планшеты: время — во второй ряд, чтобы не теснить плашки. */
@media (min-width:761px) and (max-width:1180px){
  html body.hw-city-ui:not(.in-shop) #map-view .world-clock{top:calc(var(--hwm-top) + var(--hwm-h) + 14px)!important}
}
@media (min-width:761px) and (max-width:999px){
  html body.hw-city-ui:not(.in-shop) #map-view .world-clock{display:none!important}
}

/* Узкие телефоны (до 380px): плашки первого ряда чуть плотнее. */
@media (max-width:380px){
  html body.hw-city-ui:not(.in-shop) .city-scope-toggle{padding:0 8px 0 9px;gap:5px;font-size:12px}
  html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{font-size:12px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry{font-size:11.5px;padding:0 8px}
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations > summary{padding:0 11px 0 9px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .hw-city-destinations > summary::after{font-size:12px}
}
@media (max-width:380px) and (pointer:coarse){
  html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{--hwm-s:.75;font-size:16px!important}
}

/* ════ Телефон боком ═════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:600px){
  html body.hw-city-ui:not(.in-shop){
    --hwm-left:245px;
    --hwm-top:8px;
    --hwm-bottom:10px;
    --hwm-fab-bottom:12px;
  }
  html body.hw-city-ui:not(.in-shop) .city-search-scope{max-width:calc(100vw - 245px - 260px)!important}
  html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls > select{max-width:220px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel{display:flex!important;grid-template-columns:none;height:auto!important;padding:8px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #neighbours-entry{height:auto;padding:8px 12px;line-height:1.35;white-space:normal;text-wrap:balance;margin:0 0 6px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > .hw-city-destinations{margin:0 0 6px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > #filters{margin:0 0 6px!important}
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel > button.surface-button{flex:none;margin:6px 0 0!important}
}