.card.zones-card{display:flex;flex-direction:column;gap:.75rem;background:transparent;border:0;padding-inline:0}.zones-card p{margin:0}
#zones-map{height:340px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.zone-legend{margin:0;padding:0;display:flex;flex-flow:row nowrap;gap:1rem}
.zone-legend-column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.75rem}
.zones-title{color:#198658}
.zones-card p.sub{font-size:10px;text-align:right}
.zone-legend-item{min-width:0;overflow-wrap:anywhere}
.zone-areas [data-area].is-home{background:#e7f5e9;border:1px solid #198658;color:#125735;font-weight:600}
.zone-areas [data-area].is-selected{background:#e3efff;border:1px solid #1565c0;color:#124a8b;font-weight:600}
.zone-legend-item{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;font-size:12px;line-height:1.35}
.zone-swatch{width:10px;height:10px;border-radius:3px;background:var(--zone,#999);flex:none}
.zone-areas{display:flex;flex-wrap:wrap;gap:.25rem;font-size:11px}
.zone-areas a{padding:1px 6px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--dark)}
.zone-areas > span{padding:1px 6px;color:var(--muted)}
.zone-popup{z-index:3}
.zone-popup .maplibregl-popup-content{padding:0;background:none;box-shadow:none}
.zone-popup-card{position:relative;box-sizing:border-box;background:#fff;color:var(--dark);border-radius:10px;padding:10px;overflow:auto;overscroll-behavior:contain;box-shadow:0 3px 14px #0003;font:14px/1.35 system-ui,sans-serif;overflow-wrap:anywhere}
.zone-popup-card h2{font-size:16px;line-height:22px;margin:0 34px 6px 0;color:#198658}
.zone-popup-card p{margin:0}
/* Стандартная .btn — padding 14px 16px; здесь в 1.5 раза меньше. Компактная
   высота нужна, чтобы карточка целиком помещалась в половину высоты карты. */
.zone-popup-card .zone-popup-more{margin-top:6px;padding:9.33px 10.67px;line-height:1.2;border:none}
.zones-card .zone-popup-close{position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:#345044;font:24px/1 system-ui;cursor:pointer}
.zones-card .zone-popup-close:hover{background:#e7f5e9}
.zones-card .zone-popup-close:focus-visible{outline:2px solid #198658;outline-offset:-4px}
/* Карта того же размера, что и на десктопе: карточка с кнопкой «Подробнее»
   должна помещаться целиком в половину высоты карты и на телефоне. */
@media(max-width:480px){#zones-map{height:340px}}