/* Animation */
@-webkit-keyframes ripple {
    70% {
      -webkit-box-shadow: 0 0 0 20px 0 0 20px 0 #fff;
      box-shadow: 0 0 0 20px 0 0 20px 0 #fff
    }
  
    100% {
      -webkit-box-shadow: 0 0 0 0 #fff;
      box-shadow: 0 0 0 0 #fff
    }
  }
  
  @keyframes ripple {
    70% {
      -webkit-box-shadow: 0 0 0 20px rgb(255, 255, 255, .2);
      box-shadow: 0 0 0 20px rgb(255, 255, 255, .2)
    }
  
    100% {
      -webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255, 0);
      box-shadow: 0 0 0 0 rgb(255, 255, 255, 0)
    }
  }
  


/* Hotspot */

.woodly__hotspot__circle {
	display: block;
	position: absolute;
	top: 45%;
	left: 45%;
	width: 2em;
	height: 2em;
	margin: -1em auto auto -1em;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	border-radius: 50%;
	border: 1px solid #E5008A;
	opacity: 0;
	-webkit-animation: pulsate 3s ease-out infinite;
	animation: pulsate 3s ease-out infinite;
}
.woodly_hotspot_container {
  position: relative;
  max-width: 1100px;
  margin: auto;
  background-color: #ccc;
}


.woodly--hotspot--popup {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 99;
  width: 60%;
  padding: 0;
  background-color: #fff;
  transition: all 300ms ease-in;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 24px rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  border-radius: 4px;
}

.woodly--hotspot--popup > *:first-child { margin-top: 0; }
.woodly--hotspot--popup > *:last-child { margin-bottom: 0; }

.woodly--hotspot--popup.open {
  opacity: 1;
  visibility: visible;
}

.woodly--hotspot--marker {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #fff;
  line-height:40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 61%);
  transition: all 300ms;
  
}
.woodly--hotspot--marker:visited{
    color: #fff;
}

.woodly--hotspot--marker::before, .woodly--hotspot--marker::after {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
    content: "";
    position: absolute;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 60%);
   -webkit-animation: ripple 3s infinite; */
    animation: ripple 3s infinite;
    transition: all .4s ease;
}

.woodly--hotspot--marker1 {
  top: 30%;
  left: 20%;
}
.woodly--hotspot--marker2 {
  top: 50%;
  left: 64%;
}
.woodly-extra-tooltip{
    position: absolute;
    top: -200%;
    left: 100%;
    width:183px;
    height:73px;
    display: inline-flex;
    gap:16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='183' height='74' viewBox='0 0 183 74' fill='none'%3E%3Cpath d='M183 0H0.0703125V73.5L14.0703 63H183V0Z' fill='white'/%3E%3C/svg%3E");
    background-size:cover;
    background-repeat:no-repeat;
    padding: 15px 12px;
    justify-content: center;
}
.woodly-extra-tooltip p,
.woodly-extra-tooltip h5{
    margin:0;
    color: #1F2826;
    font-family: Libre Baskerville;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}
.woodly--hotspot--content{
    padding: 44px 20px 20px 20px;
}
.woodly--hotspot--content h3{
    color:#1F2826;
    font-size: 18px;
font-style: normal;
font-weight: 400;
margin:0;
}
.woodly--hotspot--content h3 a{
    color:#1F2826;
}
.woodly-hot-spot-img-box, .woodly-hot-spot-img-box img{
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
.woodly__hotstop-review-count {
    color: #7C8381;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.star-rating.woodly__hotstop-review-avarage {
    font-size: 15px;
}

.woodly--hotspot-product_rating {
    display: flex;
    align-items: center;
    gap: 2px;
}
.woodly--hotspot--product-title{
    color: #1F2826;
    font-family: Libre Baskerville;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.woodly__hotspot-price {
    color: #3C9581;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.woodly__hotspot-price del {
    color: #7C8381;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.woodly__hotspot-price ins {
    background: none;
}

.woodly--hotspot--content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
@media only screen and (min-width:48em) {
  .woodly--hotspot--item {
    position: absolute;
    width: 36px;
    height: 36px;
    }
    .woodly--hotspot--item .woodly--hotspot--marker {
      top: auto;
      left: auto;
    }
  
  .woodly--hotspot--item1 {
    top: 30%;
    left: 20%;
  }
  .woodly--hotspot--item2 {
    top: 50%;
    left: 64%;
  }
  
  .woodly--hotspot--popup {
    position: absolute;
    left: 58px;
    width: 280px;
    transform: translateY(-50%);
  }
  .woodly--hotspot--popup:before {
    content: "";
    position: absolute;
    display:none;
    top: 50%;
    left: -16px;
    margin-top: -16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 16px 0;
    border-color: transparent #fff transparent transparent;
  }
  
  .woodly--hotspot--popup.edge {
    left: auto;
    right: calc(100% + 24px);
  }
  .woodly--hotspot--popup.edge:before {
    left: auto;
    right: -16px;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #fff;
  }
}