/* Блок «Точки на фото» (module: hotspots).
   Разметка: .hs[data-hotspots] > img + кнопки .hs-pt и подсказка .hs-tip рисуются js/hotspots.js.
   SW: data-hotspots = {$product.features.hotspots|escape}: строки «x;y;текст», x и y в процентах от фото. */
.hs {
  --hs-color: var(--red);
  position: relative;
  line-height: 0;
}
.hs > img {
  width: 100%;
  height: auto;
  display: block;
}
.hs-pt {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 0;
  border-radius: 50%;
  background: var(--hs-color);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(18, 20, 23, 0.28);
  transition: transform 0.15s, background 0.15s;
  z-index: 2;
  padding: 0;
}
.hs-pt::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--hs-color);
  opacity: 0;
  animation: hs-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.hs-pt svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2.6;
  fill: none;
  transition: transform 0.2s;
  pointer-events: none;
}
.hs-pt:hover {
  transform: scale(1.1);
}
.hs-pt:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.hs-pt[aria-expanded="true"] {
  background: var(--ink);
  z-index: 4;
}
.hs-pt[aria-expanded="true"]::before {
  animation: none;
}
.hs-pt[aria-expanded="true"] svg {
  transform: rotate(45deg); /* плюс становится крестиком */
}
.hs-tip {
  position: absolute;
  z-index: 3;
  width: 300px;
  max-width: 78%;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  font: 500 15px/1.4 "Onest", sans-serif;
  box-shadow: 0 18px 40px rgba(18, 20, 23, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.hs-tip.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hs-tip b {
  display: block;
  font: 700 12px/1 "Onest", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff6b70;
  margin-bottom: 8px;
}
.hs-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.3;
}
.hs-hint i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 700 15px/22px "Onest";
  text-align: center;
  font-style: normal;
}
@keyframes hs-pulse {
  0% { opacity: 0.7; transform: scale(0.8); }
  70%, 100% { opacity: 0; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-pt::before { animation: none; }
}
@media (max-width: 760px) {
  .hs-pt {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
  }
  /* на телефоне подсказка встаёт в поток страницы ПОД фото (js переносит её после .hs), не закрывая байк и соседние «+» */
  .hs-tip,
  .hs-tip.hs-tip--below {
    position: relative;
    display: none;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    padding: 14px 16px;
    transform: none;
  }
  .hs-tip.on {
    display: block;
  }
}