html, body {
  margin: 0;
  padding: 0;
  background: #000;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

.site-shell {
  position: relative;
  width: min(100%, 1600px);
  margin: 0 auto;
  background: #000;
}

.site-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 5;
}

.home { left: 35.8%; top: 2.1%; width: 6%; height: 2.6%; }
.shop { left: 45.2%; top: 2.1%; width: 6%; height: 2.6%; }
.coas { left: 55.1%; top: 2.1%; width: 6.5%; height: 2.6%; }
.about { left: 64.2%; top: 2.1%; width: 8.4%; height: 2.6%; }
.contact { left: 76.2%; top: 2.1%; width: 8%; height: 2.6%; }

.hero-button { left: 16.2%; top: 31.9%; width: 27.5%; height: 3.1%; }
.view-all { left: 35.5%; top: 72.3%; width: 28.8%; height: 2.6%; }
.coa-button { left: 5.4%; top: 82.9%; width: 15.5%; height: 3%; }

.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

#top { top: 0; }
.shop-anchor { top: 46%; }
.coas-anchor { top: 77%; }
.about-anchor { top: 88%; }
.contact-anchor { top: 88%; }

@media (max-width: 700px) {
  .site-shell {
    width: 100%;
  }
}