.map-box.has-gmap { position: relative; }
.map-box.is-gmap > svg.map { visibility: hidden; }
.map-box .gmap { position: absolute; inset: 0; }

.map-box .gmap .gpin { position: absolute; left: 0; top: 0; width: 0; height: 0; color: inherit; text-decoration: none; cursor: pointer; }
.map-box .gmap span.gpin { cursor: default; }
.map-box .gmap .gpin i {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; box-sizing: border-box;
  border: 2.5px solid #fff; border-radius: 50%; background: var(--red, #C01111);
  box-shadow: 0 1px 3px rgb(0 0 0 / .35), 0 0 0 0 rgb(46 139 87 / .3);
  transition: transform 300ms var(--ease, ease), box-shadow 300ms var(--ease, ease);
}
.map-box .gmap .gpin > span {
  position: absolute; left: var(--dx); top: var(--dy); translate: 0 -80%;
  white-space: nowrap; color: #151515; font: 700 14px/1 var(--fb, "DM Sans", Arial, sans-serif); letter-spacing: 0;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease, ease);
}
.map-box .gmap .gpin.l > span { translate: -100% -80%; }
.map-box .gmap .gpin.m > span { translate: -50% -80%; }
.map-box .gmap .gpin:is(:hover, .hl) { z-index: 1; }
.map-box .gmap .gpin:is(:hover, .hl) i { transform: scale(1.25); box-shadow: 0 1px 3px rgb(0 0 0 / .35), 0 0 0 9px rgb(46 139 87 / .3); }
.map-box .gmap .gpin:is(:hover, .hl) > span { opacity: 1; }

.map-box .gmap button.gm-control-active {
  min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: #fff; color: #666; font: inherit; text-transform: none; letter-spacing: 0;
}
.map-box .gmap button.gm-control-active:is(:hover, :focus) { background: #f1f1f1; }