.thb-hotspot-wrapper {
  background: #fbf8f7;

  .row .columns.thb-hotspots-products {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

    .thb-carousel.products {
      max-width: 250px;
      min-width: 200px;
      width: 100%;

			.product {
				margin-bottom: 0;
			}
    }
  }
}
.thb-hotspot-container {
  position: relative;

  img {
    width: 100%;
  }
  &.hover {
    .thb-hotspot:hover {
      z-index: 20;
      .thb-hotspot-tooltip {
        opacity: 1;
        pointer-events: all;
      }
    }
  }
  &.click {
    .thb-hotspot.active {
      z-index: 20;
      .thb-hotspot-tooltip {
        opacity: 1;
        pointer-events: all;
      }
    }
    .thb-hotspot .thb-hotspot-content {
      cursor: pointer;
    }
  }
  .thb-hotspot {
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: #fff;
    border: 5px solid $black;
    @include box-shadow(0 2px 6px rgba(#000,0.2));
    &.pin-white {
      border-color: #fff;
    }
    &.pin-accent {
      border-color: $accent;
    }
    .thb-hotspot-content {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
      position: absolute;
      top: -5px;
      left: -5px;
      cursor: default;
      @include user-select(none);

      &.thb-pulsate {
        @include animation(thb-hotspot-pulse 2s infinite);
      }
      @include keyframes('thb-hotspot-pulse') {
        0% {
          @include box-shadow(0 0 0 0 rgba(#fff, 0.7));
        }
        70% {
          @include box-shadow(0 0 0 12px rgba(#fff, 0));
        }
        100% {
          @include box-shadow(0 0 0 0 rgba(#fff, 0));
        }
      }
    }
  } // .thb-hotspot
}