/* Главная: стопка этажей и карта этажа */
.mp { display: grid; grid-template-columns: var(--side) minmax(0, 1fr) 100px 340px; min-height: calc(100vh - 77px); background: var(--page); transition: grid-template-columns .25s ease; }
.mp-cats { border-right: 1px solid var(--line); }
.mp-cats .cats button { all: unset; }
.mp-main { position: relative; min-width: 0; padding: 20px 0 20px 16px; display: flex; flex-direction: column; } /* справа отступ даёт сама карта — 24 px до лифта */
.mp-legend { margin: 0; font-size: 13px; color: var(--grey); display: flex; align-items: center; gap: 8px; }
.mp-legend span { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }

/* Стопка */
.mp-stack { flex: 1 1 auto; display: flex; flex-direction: column; }
.mp-stack[hidden] { display: none; }
/* Пока открыт этаж, стопка остаётся на странице невидимой — чтобы при возврате не собирать её заново (без паузы) */
.mp-stack.off { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
/* Прозрачность этажа — через слои (--fo), а не у этажа целиком: иначе браузер «схлопывает» объём */
@property --fo { syntax: '<number>'; inherits: true; initial-value: 1; }
.mp-viewport { position: relative; flex: 1 1 auto; min-height: 640px; perspective: 3200px; overflow: hidden; }
.mp-scene { --gap: 86px; --wall: 4px; position: absolute; left: 50%; top: 50%; width: 520px; height: 295px; margin: -148px 0 0 -260px; transform-style: preserve-3d;
  transform: scale(var(--k, 1)) rotateX(57deg) rotateZ(-46deg) translateZ(calc(var(--gap) * -2.5)); }
.mp-fl { --fo: 1; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--z) * var(--gap))); cursor: pointer; transition: transform .25s ease; outline: none; } /* --fo без плавности: выбранный этаж прячется мгновенно */
.mp-fl > span, .mp-art img, .mp-dot { opacity: var(--fo); }
/* Пол этажа: тень, два слоя толщины и светлая плита с обводкой — как на макете */
.mp-shadow { position: absolute; inset: 10px; border-radius: 10px; background: rgba(43,42,41,.18); filter: blur(14px); transform: translateZ(-36px); }
.mp-slab { position: absolute; inset: 0; border-radius: 8px; }
.mp-slab1 { background: #B3A996; transform: translateZ(-12px); }
.mp-slab2 { background: #C6BEAF; transform: translateZ(-6px); }
.mp-plate { position: absolute; inset: 0; border-radius: 8px; background: #F4F1EB; border: 1px solid #C6BEAF; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.mp-fl.hl .mp-plate, .mp-fl:hover .mp-plate { border: 2px solid var(--ring); }
/* Магазины поверх пола: картинки этажа с отступом 8 px от края плиты */
.mp-art { position: absolute; inset: 8px; transform-style: preserve-3d; }
.mp-art img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.mp-wall { transform: translateZ(calc(var(--wall) * var(--w) / 6.6)); filter: brightness(calc(.74 + var(--w) * .043)); }
.mp-cap { transform: translateZ(var(--wall)); }
.mp-fl.hl, .mp-fl:hover { transform: translateZ(calc(var(--z) * var(--gap) + 14px)); }
.mp-fl.dim { opacity: .28; } /* притушенный этаж стоит на месте — здесь прозрачность целиком допустима */
.mp-dots { position: absolute; inset: 0; transform: translateZ(calc(var(--wall) + 2px)); transform-style: preserve-3d; }
.mp-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pink); border: 2px solid #FFF; box-shadow: 0 0 0 1px rgba(201,28,80,.35); }

/* Правая колонка этажей */
/* Правая колонка — всегда «лифт»: шахта 4 … −2 с числом мест; кабина цвета выбранного этажа.
   На стопке и на открытом этаже блок один и тот же — при анимации он не меняется. */
.mp-rail { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 40px 24px 20px 0; } /* лифт 76 px + 24 px до правого блока (слева от лифта карта отступает тоже на 24 px) */
.mp-lift-t { display: block; font-size: 11px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .06em; }
.mp-lift-arr { display: flex; align-items: center; justify-content: center; width: 76px; height: 36px; border: 1px solid var(--line); border-radius: 12px; background: #FFF; color: var(--dark); cursor: pointer; transition: opacity .3s; }
.mp-lift-arr:hover:not(:disabled) { border-color: var(--line-d); }
.mp-lift-arr:disabled { opacity: .35; cursor: default; }
.mp-shaft { position: relative; display: flex; flex-direction: column; width: 76px; padding: 6px; gap: 4px; background: var(--beige); border-radius: 16px; box-sizing: border-box; }
.mp-car { position: absolute; left: 0; top: 0; border-radius: 12px; background: var(--pink); box-shadow: 0 4px 12px rgba(43,42,41,.18); transition: transform .55s cubic-bezier(.65,0,.25,1), background-color .55s ease, width .3s, height .3s, opacity .3s; z-index: 0; pointer-events: none; opacity: 0; }
.mp-shaft button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--dark); font: inherit; cursor: pointer; transition: color .3s, background-color .2s; }
.mp-shaft button:hover:not(.on):not(:disabled), .mp-shaft button.hl:not(.on) { background: #FFF; color: var(--ring); }
.mp-shaft button.on { color: #FFF; }
.mp-shaft button.on.light { color: var(--dark); }      /* светлый цвет этажа (салатовый) — тёмная цифра */
.mp-shaft button[disabled] { opacity: .4; cursor: default; }
.mp-rk { display: block; font-size: 18px; font-weight: 800; }
.mp-rc { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: var(--pink); color: #FFF; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mp-rc:empty { display: none; }
/* этаж, где есть точки открытого в панели места — графитовая метка слева от цифры */
.mp-shaft button.has-sel::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--dark); }
.mp-shaft button.has-sel.on::before { background: #FFF; }
.mp-shaft button.has-sel.on.light::before { background: var(--dark); }
.mp-shaft button.on .mp-rc { background: #FFF; color: var(--dark); }

/* Правая информационная колонка */
.mp-info { background: var(--soft); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line); }
.mp-info .ttl { font-size: 22px; }
.mp-big { background: var(--pink); color: #FFF; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; }
.mp-big span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mp-big b { font-size: 46px; font-weight: 800; line-height: 1.1; margin-top: 8px; }
.mp-big small { font-size: 13px; font-weight: 600; }
.mp-st { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-st div { background: #FFF; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.mp-st b { display: block; font-size: 22px; font-weight: 800; color: var(--pink); }
.mp-st span { display: block; font-size: 12px; color: var(--grey); margin-top: 4px; }
.mp-info h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; margin-top: 4px; }
.mp-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-how li { display: flex; align-items: center; gap: 14px; background: #FFF; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.4; }
.mp-how b { font-size: 30px; font-weight: 800; color: var(--pink); width: 22px; flex: 0 0 22px; }
.mp-about { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; border: 2px solid var(--dark); border-radius: 14px; background: #FFF; color: var(--dark); text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.mp-about:hover { background: var(--dark); color: #FFF; }

/* Плоская карта этажа — как в макете: этажи сверху, бежевая плашка, масштаб */
.mp-flat { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.mp-flat[hidden] { display: none; }
.mp-flat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-back { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--dark); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mp-back:hover { color: var(--pink-d); }

.mp-board { position: relative; flex: 0 0 auto; height: clamp(460px, calc(100vh - 230px), 760px); overflow: hidden; }
.mp-vp { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: default; }
.mp-vp.zoomed { touch-action: none; cursor: grab; }
.mp-vp.drag { cursor: grabbing; }
.mp-map { position: absolute; left: 0; top: 0; aspect-ratio: 1122 / 636; }
.mp-map img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Объём: помещения приподняты — плотная тень снизу + мягкая */
.mp-rooms { filter: drop-shadow(0 3px 0 #C6BEAF) drop-shadow(0 6px 8px rgba(43,42,41,.16)); }
.mp-pins { position: absolute; inset: 0; }
.mp-hint { position: absolute; left: 20px; bottom: 16px; margin: 0; font-size: 12px; color: var(--grey); pointer-events: none; }
.mp-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.mp-zoom button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #FFF; color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mp-zoom button:hover:not(:disabled) { border-color: var(--line-d); }
.mp-zoom button:disabled { opacity: .4; cursor: default; }

/* Анимация перехода: пока карта поворачивается, ничего не обрезаем и прячем точки и кнопки */
.mp-flat.anim .mp-board, .mp-flat.anim .mp-vp { overflow: visible; }
.mp-flat.anim .mp-hint, .mp-flat.anim .mp-zoom, .mp-flat.anim .mp-flat-top { opacity: 0; }
/* точки во время анимации остаются на карте и поворачиваются вместе с ней; подписи прячем */
.mp-flat.anim .mp-tip, .mp-flat.swap .mp-tip { display: none; }
.mp-flat.anim .mp-pin, .mp-flat.swap .mp-pin { transition: none; }
.mp-pins, .mp-hint, .mp-zoom, .mp-flat-top { transition: opacity .3s ease; }
.mp-map { transform-origin: 50% 50%; will-change: auto; }
.mp-tplate { position: absolute; border-radius: 8px; background: #F4F1EB; border: 1px solid #C6BEAF; box-sizing: border-box; pointer-events: none; }
.mp-ghost { pointer-events: none; }
.mp-flat.swap .mp-board, .mp-flat.swap .mp-vp { overflow: visible; }

/* Точки — кружки, как на стопке этажей */
.mp-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 3px solid #FFF; border-radius: 50%; background: var(--pink); color: #FFF; cursor: pointer; box-shadow: 0 2px 6px rgba(43,42,41,.3); transition: transform .15s, background .15s; font: inherit; }
.mp-pin:hover, .mp-pin:focus-visible { transform: scale(1.2); z-index: 3; }
.mp-pin.grp { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.mp-pin.in { background: var(--pink-d); border-color: transparent; border-width: 0; }   /* уже в корзине: тёмно-розовая, без обводки, с галочкой */
.mp-pin .mp-ck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFF; }
.mp-pin .mp-ck svg { width: 62%; height: 62%; }
/* Выбранная точка: крупнее, темнее, розовое свечение и подпись */
/* выбранная точка — графитовая, крупнее, с мягким графитовым свечением; без постоянной подписи */
.mp-pin.sel { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-width: 4px; background: var(--dark); box-shadow: 0 0 0 10px rgba(43,42,41,.16), 0 2px 6px rgba(43,42,41,.35); transform: none; z-index: 4; }
.mp-pin.sel.in { background: var(--dark); border-color: #FFF; border-width: 4px; }
.mp-tip { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -10px); background: var(--dark); color: #FFF; font-size: 13px; font-weight: 700; line-height: 1.2; padding: 8px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.mp-pin.low .mp-tip { bottom: auto; top: 100%; transform: translate(-50%, 10px); }
.mp-pin.sel .mp-tip { transform: translate(-50%, -16px); }
.mp-pin.sel.low .mp-tip { transform: translate(-50%, 16px); }
.mp-pin.tl .mp-tip { left: -6px; transform: translate(0, -10px); }
.mp-pin.tr .mp-tip { left: auto; right: -6px; transform: translate(0, -10px); }
.mp-pin.low.tl .mp-tip, .mp-pin.low.tr .mp-tip { transform: translate(0, 10px); }
.mp-pin:hover .mp-tip, .mp-pin:focus-visible .mp-tip { opacity: 1; }

/* Несколько мест в одной точке: число внутри кружка и список по нажатию */
.mp-n { font-size: 12px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mp-pop { position: absolute; transform: translate(-50%, 20px); z-index: 10; background: #FFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(43,42,41,.18); padding: 6px; min-width: 240px; max-width: 320px; display: flex; flex-direction: column; }
.mp-pop[hidden] { display: none; }
.mp-pop.r { transform: translate(-100%, 20px); }
.mp-pop.l { transform: translate(0, 20px); }
.mp-pop.up { transform: translate(-50%, calc(-100% - 20px)); }
.mp-pop.up.r { transform: translate(-100%, calc(-100% - 20px)); }
.mp-pop.up.l { transform: translate(0, calc(-100% - 20px)); }
.mp-pop button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.mp-pop button:hover, .mp-pop button:focus-visible { background: var(--pink-bg); }
.mp-pop b { font-size: 14px; font-weight: 700; }
.mp-pop span { font-size: 12px; color: var(--grey); }

/* Панель на карте открывается поверх, освобождаем место справа */
.page-map.panel-open .mp { grid-template-columns: var(--side) minmax(0, 1fr) 100px 460px; }
/* Панель места: правая колонка плавно расширяется до ширины панели — лифт сдвигается левее и остаётся виден,
   карта плавно уменьшается ровно настолько, насколько стало меньше места (время то же, что у выезда панели) */
.mp-info { transition: visibility 0s; }
.page-map.panel-open .mp-info { visibility: hidden; transition: visibility 0s .25s; }

@media (max-width: 1500px) {
  .mp { grid-template-columns: var(--side) minmax(0, 1fr) 100px 0px; }
  .page-map.panel-open .mp { grid-template-columns: var(--side) minmax(0, 1fr) 100px 460px; }
  .page-map.panel-open .mp-info { visibility: visible; }
  .mp-rail { grid-column: 3; grid-row: 1; }
  .mp-info { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; align-items: start; border-left: 0; border-top: 1px solid var(--line); }
  .mp-info .ttl, .mp-info h3 { grid-column: 1 / -1; }
  .mp-st { grid-column: span 1; }
  .mp-how { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .mp { grid-template-columns: minmax(0, 1fr); }
  .mp-cats { border-right: 0; }
  .mp-cats h1 { display: none; }
  /* Лифт на телефоне: строка этажей над картой */
  .mp-rail { order: -1; grid-column: auto; grid-row: 2; flex-direction: row; padding: 8px 16px 0; }
  .mp-lift-t, .mp-lift-arr { display: none; }
  .mp-shaft { flex-direction: row; width: 100%; gap: 2px; padding: 4px; border-radius: 14px; }
  .mp-shaft button { flex: 1 1 0; min-height: 44px; }
  .mp-rk { font-size: 15px; }
  .mp-main { padding: 12px 16px; }
  .mp-viewport { min-height: 460px; }
  .mp-info { display: flex; }
  .page-map.panel-open .mp { grid-template-columns: minmax(0, 1fr); }
  .page-map.panel-open .mp-main { padding-right: 16px; }
}
@media (max-width: 640px) {
  .mp-viewport { min-height: 380px; }
  .mp-board { height: 320px; }
  .mp-hint { left: 12px; right: 70px; bottom: 12px; }
  .mp-zoom { right: 12px; bottom: 12px; }
  .mp-tip { display: none; }
}

/* Левая колонка на открытом этаже: сводка, фильтр по категориям, список мест (как в макете «1 этаж») */
.mp-side-all, .mp-side-fl { display: flex; flex-direction: column; gap: 22px; }
.mp-side-all[hidden], .mp-side-fl[hidden] { display: none; }
.mp-side-fl { animation: flIn .35s ease both; }
@keyframes flIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-chip { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #FFF; color: var(--dark); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fl-chip:hover { border-color: var(--line-d); }
.fl-chip.on { background: var(--pink); border-color: var(--pink); color: #FFF; font-weight: 700; }
.fl-list { list-style: none; margin: 0 -10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--dark); font: inherit; text-align: left; cursor: pointer; }
.fl-row:hover, .fl-row:focus-visible { background: var(--soft); }
.fl-row.sel { background: var(--pink-bg); }
.fl-dot { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--pink); border: 3px solid #FFF; box-shadow: 0 1px 4px rgba(43,42,41,.3); box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: #FFF; }
.fl-dot.in { background: var(--pink-d); border: 0; }
.fl-dot.in svg { width: 70%; height: 70%; }
.fl-dot.sel { background: var(--dark); border: 3px solid #FFF; }
.fl-t { flex: 1 1 auto; min-width: 0; }
.fl-t b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.fl-t span { display: block; font-size: 12px; color: var(--grey); margin-top: 2px; }
.fl-empty { padding: 10px; font-size: 13px; color: var(--grey); }
/* точка на карте, когда навели на строку списка */
.mp-pin.hov { transform: scale(1.35); z-index: 6; }
.mp-pin.hov .mp-tip { opacity: 1; }
@media (max-width: 1100px) {
  /* на телефоне колонка этажа не нужна — категории лентой остаются */
  .mp-side-fl { display: none !important; }
  .mp-side-all[hidden] { display: flex; }
}

/* На сенсорных экранах точку легче попасть пальцем: невидимая зона нажатия вокруг кружка */
@media (pointer: coarse) {
  .mp-pin::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
}