/* ============================================================
   MANTA — Shop the bike (photo + markers). Shared by index.html
   and shop-the-bike.html. Tokens/components come from manta.css.
   ============================================================ */

.bikemap {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #101012;
  /* edge-to-edge on phones so the markers stay tappable */
  margin: 0 calc(-1 * var(--gutter));
  border-radius: 0;
}
@media (min-width: 700px) { .bikemap { margin: 0; border-radius: var(--r-card); } }
.bikemap-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.bikemap-spots { position: absolute; inset: 0; }

/* Marker: 44px touch target around a 22px dot. Labels appear on
   hover/focus/active only, so fifteen of them never overlap at rest. */
.bikemap-spot {
  position: absolute;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  color: #fff;
  z-index: 1;
}
.bikemap-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--volt);
  border: 3px solid #0A0A0B;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .45);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.bikemap-spot:hover .bikemap-dot, .bikemap-spot:focus-visible .bikemap-dot { transform: scale(1.18); }
.bikemap-spot.is-active .bikemap-dot { background: #fff; transform: scale(1.18); }
.bikemap-spot.is-empty .bikemap-dot { background: rgba(255, 255, 255, .35); border-color: rgba(10, 10, 11, .6); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.bikemap-spot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bikemap-spot.is-active { z-index: 2; }

.bikemap-tag {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, 2px);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  background: rgba(10, 10, 11, .9);
  color: #fff;
  font-size: .75rem; font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.bikemap-spot:hover .bikemap-tag, .bikemap-spot:focus-visible .bikemap-tag, .bikemap-spot.is-active .bikemap-tag { opacity: 1; }
/* Markers near the right edge: pin the tag to the right instead of centring */
.bikemap-spot[style*="left: 9"] .bikemap-tag, .bikemap-spot[style*="left: 8"] .bikemap-tag { left: auto; right: 0; transform: translate(0, 2px); }
.bikemap-spot[style*="left: 9%"] .bikemap-tag, .bikemap-spot[style*="left: 8%"] .bikemap-tag { left: 0; right: auto; transform: translate(0, 2px); }

/* The card that opens under the photo */
.bikemap-pop {
  margin-top: var(--s3);
  padding: var(--s4) var(--s4) var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--r-card);
  background: var(--paper);
}
.bikemap-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.bikemap-pop-head strong { font-size: 1.0625rem; }
.bikemap-pop-close { width: 36px; height: 36px; }
.bikemap-pop-close svg { width: 18px; height: 18px; }
.bikemap-pop-types { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bikemap-pop-types .chip { min-height: 40px; gap: 6px; }
.bikemap-pop .chip-n, .bikemap-item-n { font-size: .6875rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bikemap-pop-all { display: inline-block; margin-top: var(--s3); font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bikemap-pop a:not(.chip):not(.bikemap-pop-all) { text-decoration: underline; }

/* Equivalent text list */
.bikemap-list { margin-top: var(--s5); }
.bikemap-list .eyebrow { margin-bottom: var(--s3); }
.bikemap-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@media (min-width: 700px) { .bikemap-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bikemap-items { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bikemap-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  font-size: .8125rem;
  transition: border-color .18s var(--ease);
}
a.bikemap-item:hover { border-color: var(--ink); }
.bikemap-item-name { font-weight: 600; }
.bikemap-item.is-empty { color: var(--faint); border-style: dashed; }
.bikemap-item.is-empty .bikemap-item-n { color: var(--faint); }
.bikemap-note { margin-top: var(--s3); }

/* Standalone page */
.bikemap-page-head { padding: var(--s5) 0 var(--s4); }
.bikemap-page-head h1 { font-size: var(--text-h2); }
.bikemap-page-head p { color: var(--muted); max-width: var(--max-prose); margin-top: var(--s2); }
.bikemap-page-back { margin-top: var(--s6); }