/* === Nexo Shoppable Image === */

.nexo-shop{
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: #fff;
}

/* aspect ratios */
.nexo-shop--ratio-16-9{ aspect-ratio: 16/9; }
.nexo-shop--ratio-4-3 { aspect-ratio: 4/3;  }
.nexo-shop--ratio-3-2 { aspect-ratio: 3/2;  }
.nexo-shop--ratio-1-1 { aspect-ratio: 1/1;  }
.nexo-shop--ratio-21-9{ aspect-ratio: 21/9; }

/* Texto sobreposto */
.nexo-shop__caption{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5%;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 1;
}
.nexo-shop--align-center .nexo-shop__caption{ align-items: center; text-align: center; }
.nexo-shop--align-left   .nexo-shop__caption{ align-items: flex-start; text-align: left; }
.nexo-shop--align-right  .nexo-shop__caption{ align-items: flex-end; text-align: right; }

.nexo-shop__title{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 .4em;
  max-width: 800px;
}
.nexo-shop__title em{ font-style: italic; color: #B08A4A; }

.nexo-shop__subtitle{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: .04em;
  opacity: .9;
  margin: 0;
  max-width: 520px;
}

/* HOTSPOT — pin + card */
.nexo-shop__hotspot{
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.nexo-shop__pin{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #B08A4A;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25), 0 0 0 0 rgba(176,138,74,.55);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  z-index: 2;
  padding: 0;
  animation: nexo-shop-pulse 2.4s infinite;
}
.nexo-shop__pin:hover{
  transform: scale(1.15);
  animation-play-state: paused;
}
@keyframes nexo-shop-pulse{
  0%   { box-shadow: 0 2px 10px rgba(0,0,0,.25), 0 0 0 0   rgba(176,138,74,.55); }
  70%  { box-shadow: 0 2px 10px rgba(0,0,0,.25), 0 0 0 14px rgba(176,138,74,0);   }
  100% { box-shadow: 0 2px 10px rgba(0,0,0,.25), 0 0 0 0   rgba(176,138,74,0);   }
}

/* CARD — aparece no hover do hotspot */
.nexo-shop__card{
  position: absolute;
  width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  color: #111;
  text-decoration: none;
  border: 1px solid rgba(176,138,74,.4);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 1;
  pointer-events: none;
}
.nexo-shop__hotspot:hover .nexo-shop__card,
.nexo-shop__hotspot:focus-within .nexo-shop__card,
.nexo-shop__hotspot.is-open .nexo-shop__card{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* posições do card relativo ao pin */
.nexo-shop__hotspot--top-right    .nexo-shop__card{ left: 26px;  bottom: 26px; }
.nexo-shop__hotspot--top-left     .nexo-shop__card{ right: 26px; bottom: 26px; }
.nexo-shop__hotspot--bottom-right .nexo-shop__card{ left: 26px;  top: 26px;    }
.nexo-shop__hotspot--bottom-left  .nexo-shop__card{ right: 26px; top: 26px;    }

/* linha conectando pin e card */
.nexo-shop__card::before{
  content: "";
  position: absolute;
  width: 24px;
  height: 1px;
  background: rgba(176,138,74,.7);
}
.nexo-shop__hotspot--top-right    .nexo-shop__card::before{ left: -24px;  bottom: 14px; }
.nexo-shop__hotspot--top-left     .nexo-shop__card::before{ right: -24px; bottom: 14px; }
.nexo-shop__hotspot--bottom-right .nexo-shop__card::before{ left: -24px;  top: 14px;    }
.nexo-shop__hotspot--bottom-left  .nexo-shop__card::before{ right: -24px; top: 14px;    }

.nexo-shop__card-img{
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #ECE6DA;
}
.nexo-shop__card-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: 'Inter', sans-serif;
}
.nexo-shop__card-name{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  line-height: 1.25;
}
.nexo-shop__card-price{
  font-size: 12px;
  color: #6B6357;
}
.nexo-shop__card-price .amount,
.nexo-shop__card-price bdi{
  font-weight: 500;
  color: #B08A4A;
}

/* mobile: card sempre visível, posicionado abaixo do pin */
@media (max-width: 640px){
  .nexo-shop__card{
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 180px;
    pointer-events: auto;
  }
  .nexo-shop__card,
  .nexo-shop__card::before { display: none; }
}