.rm {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.35s ease;
}

.rm::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(42, 24, 18, 0.04);
  z-index: 25;
}

.rm__frame {
  position: relative;
  width: 100%;
}

.rm__base {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.rm--base-error::before {
  content: 'Карта временно недоступна';
  display: block;
  padding: 12px;
  font: 14px/1.4 system-ui, sans-serif;
  color: #b00020;
  background: #fff3f3;
}

.rm__regions {
  position: absolute;
  inset: 0;
}

.rm__hit {
  position: absolute;
  inset: 0;
  z-index: 15;
  cursor: pointer;
  background: transparent;
}

.rm--pixel-hit .rm-region {
  pointer-events: none;
}

.rm-region {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: z-index 0s;
}

.rm-region:focus-visible {
  outline: 2px solid rgba(155, 44, 44, 0.55);
  outline-offset: 2px;
}

.rm-region:focus:not(:focus-visible) {
  outline: none;
}

.rm-region.is-hovered {
  z-index: 20;
}

.rm-region.is-selected {
  z-index: 18;
}

/* Выбранный район (привязка костюмов в футере) */
.rm-region.is-selected .rm-region__sprite {
  opacity: 1;
  visibility: visible;
}

.rm--has-selection .rm-region.is-hovered:not(.is-selected) {
  z-index: 22;
}

/* Спрайт района (Additional milestone) — цветной, виден поверх базы */
.rm-region__sprite {
  position: absolute;
  display: block;
  width: calc(100% * var(--sw, 1) / var(--cw, 1));
  height: calc(100% * var(--sh, 1) / var(--ch, 1));
  left: calc(-100% * var(--cx, 0) / var(--cw, 1));
  top: calc(-100% * var(--cy, 0) / var(--ch, 1));
  max-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, filter 0.2s ease;
}

/* Hover: спрайт Additional milestone */
.rm-region.is-hovered .rm-region__sprite,
.rm-region:focus-visible .rm-region__sprite {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease, filter 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rm-region__sprite {
    transition: none;
  }
}

@media (max-width: 640px) {
  .rm-region:focus-visible {
    outline-width: 3px;
    outline-offset: 1px;
  }
}