:root {
  --page-max-width: 1672px;
  --focus: rgba(20, 79, 184, .9);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.cedex-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
}

.cedex-visual {
  position: relative;
  width: min(100%, var(--page-max-width));
  margin: 0 auto;
  line-height: 0;
  background: #fff;
}

.cedex-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.shop-hotspot {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 1.8%;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/*
  Współrzędne w procentach względem obrazu 1672 × 847.
  Hotspot obejmuje całą kartę sklepu, więc klikalny jest również widoczny
  adres domeny i przycisk „Przejdź do sklepu”.
*/
.shop-hotspot--garden {
  left: 10.8%;
  top: 56.4%;
  width: 35.0%;
  height: 27.8%;
}

.shop-hotspot--cd {
  left: 51.9%;
  top: 56.4%;
  width: 31.0%;
  height: 27.8%;
}

/* Dyskretny feedback bez zmiany zatwierdzonej grafiki. */
.shop-hotspot:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .20),
              0 8px 28px rgba(32, 59, 109, .08);
}

.shop-hotspot:focus-visible {
  box-shadow: 0 0 0 4px var(--focus);
}

@media (max-width: 760px) {
  /* Zachowujemy identyczny układ również na telefonie — całość skaluje się proporcjonalnie. */
  .cedex-page {
    min-height: auto;
  }
}

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