.wpih { position: relative; }
.wpih__stage {
  position: relative;
  width: 100%;
  line-height: 0;
  /* aspect-ratio sätts inline från PHP med bildens verkliga ratio */
}
.wpih__stage::before {
  content: "";
  display: block;
  /* Fallback om aspect-ratio inte hinner gälla (justeras via inline i PHP normalt) */
  padding-top: 42.75%;
}
.wpih__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 40px;
}

/* Nollställ knappar i temat */
.wpih__hotspot { position: absolute; transform: translate(-50%, -50%); border: 0; background: transparent; padding: 0; cursor: pointer; outline: none;
  /* CSS-variabler för färg & storlek (default) */
  --pin-color: #e66a0a;
  --pin-scale: 1;
  --pin-base: 32px;   /* basdiameter (100%) */
  --pin-border: 4px;  /* basram (100%) */
  --pin-tri-h: 14px;  /* triangelhöjd (100%) */
  --pin-tri-w: 10px;  /* triangelbredd (100%) */
}
.wpih button { background: none !important; border: none !important; box-shadow: none !important; color: inherit !important; }
.wpih button:hover, .wpih button:focus { background: none !important; }
.wpih h3 { font-size: 20px; }

/* Rektangel-markering (oförändrad funktion) */
.wpih__hotspot--rect {
  transform: none;
  border: 2px dashed rgba(0,0,0,.35);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(1px);
}

/* DOT – storlek och färg styrs av variablerna */
.wpih__dot {
  display: inline-block;
  position: relative;
  width: calc(var(--pin-base) * var(--pin-scale));
  height: calc(var(--pin-base) * var(--pin-scale));
  background: #fff;
  border: calc(var(--pin-border) * var(--pin-scale)) solid var(--pin-color);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .15s ease;
}

/* Triangelspets under cirkeln */
.wpih__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--pin-tri-h) * var(--pin-scale));
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  calc(var(--pin-tri-w) * var(--pin-scale)) solid transparent;
  border-right: calc(var(--pin-tri-w) * var(--pin-scale)) solid transparent;
  border-top:   calc(var(--pin-tri-h) * var(--pin-scale)) solid var(--pin-color);
}

.wpih__hotspot:focus { outline: none; }
.wpih__hotspot:focus-visible { outline: 2px solid #000; }
.wpih__hotspot:focus .wpih__dot,
.wpih__hotspot:hover .wpih__dot { transform: scale(1.05); }

/* Tooltip */
.wpih__tooltip {
  position: absolute;
  max-width: min(320px, 70vw);
  background: #111;
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  z-index: 5;
  transform: translate(-50%, calc(-100% - 16px));
  display: none;
}
.wpih__tooltip:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: #111;
}
.wpih__tooltip-title { margin: 0 0 6px; font-size: 16px; line-height: 1.2; }
.wpih__tooltip-body { font-size: 14px; line-height: 1.45; }
.wpih__close { position: absolute; top: -14px; right: -10px; border: 0; background: transparent; color: #fff; font-size: 20px; font-weight:700; cursor: pointer; }

/* SR-text */
.wpih__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Debug-overlay */
.wpih--debug .wpih__label {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font: 12px/1.2 system-ui, sans-serif; background: rgba(0,0,0,.7); color: #fff;
  padding: 2px 6px; border-radius: 6px; pointer-events: none; white-space: nowrap;
}