div#hotspot-section {
  position: relative;
  z-index: 1;
}

.image-hotspots--full-width .page-width {
  max-width: 100%;
  padding: 0;
}

.image-hotspots .grid {
  align-items: center;
}

.image-hotspots--full-width .grid-item.right {
  padding: 0 5rem;
}

.image-hotspots .grid-item.left {
  width: calc(75% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  max-width: calc(75% - var(--grid-desktop-horizontal-spacing) / 2);
}

.image-hotspots .grid-item.right {
  padding: 20px;
}

.image-hotspots .grid-item img {
  width: 200px;
  height: 200px;
  border-radius: var(--media-radius);
}

.image-hotspots .spotlight-product {
  background: none;
}

.image-hotspots .grid-item.right h1.heading-bold,
.image-hotspots .grid-item.right h2.heading-bold,
.image-hotspots .grid-item.right h3.heading-bold,
.image-hotspots .grid-item.right h4.heading-bold,
.image-hotspots .grid-item.right h5.heading-bold,
.image-hotspots .grid-item.right h6.heading-bold {
  margin-top: -10px;
  margin-bottom: 10px;
}

h4.column.product-title {
  margin: 0 0 10px 0;
}

.tooltips-section {
  position: relative;
}

.image-hotspots.desktop-text-first .tooltips-section {
  overflow: hidden;
}

.tooltips-figure {
  margin: 0;
  height: 100%;
}

.tooltips-img {
  display: block;
  width: 100%;
}

.tooltips-list {
  padding: 0 0 0 32px;
  list-style: none;
}

.tooltip-item {
  box-sizing: border-box;
  max-height: 0;
  padding: 0 12px;
}

.tooltip-button {
  font-family: var(--font-body-family);
  background: transparent;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  z-index: 1;
}

.tooltip-button:focus {
  outline: none;
}

.tooltip-index {
  border-radius: 50%;
  text-align: center;
  position: absolute;
  padding: 0;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: box-shadow-animation 2s infinite;
}

.tooltip-overlay {
  opacity: 1;
  overflow: hidden;
  will-change: height;
}

.tooltip-header {
  font-family: var(--font-heading-family);
  display: none;
}

.tooltip-text {
  font-size: calc(var(--font-heading-scale) * 1.6rem);
  margin-top: 0;
  word-break: break-word;
}

.tooltip-item .tooltip-overlay:empty {
  animation: none;
}

.tooltip-item .icon-arrow {
  width: 1rem;
}

[aria-expanded="true"] ~ .tooltip-overlay {
  animation: tooltip-expand 200ms both cubic-bezier(0.4, 0, 0.2, 1);
}

[aria-expanded="false"] ~ .tooltip-overlay {
  animation: tooltip-collapse 180ms both cubic-bezier(0.4, 0, 0.2, 1);
}

.image-hotspots .button {
  margin-top: 3rem;
}

.image-hotspots-grid--reverse {
  flex-direction: row-reverse;
}

.image-hotspots-content--bottom {
  justify-content: flex-end;
  align-self: flex-end;
}

.image-hotspots-content--top {
  justify-content: flex-start;
  align-self: flex-start;
}

.image-hotspots-content--middle {
  justify-content: center;
  align-self: center;
}

.image-hotspots-content--middle .spotlight-product img {
  margin: 0 auto;
}

.image-hotspots-content--left {
  text-align: left;
}

.image-hotspots-content--center {
  text-align: center;
}

.image-hotspots-content--right {
  text-align: right;
}

.image-hotspots svg.tooltips-picture {
  background: #e7e7e7;
  border-radius: calc(var(--media-radius));
  width: 100%;
  height: 500px;
}

.image-hotspots .tooltip-title {
  color: rgba(var(--color-foreground), 0.75);
  font-size: 16px;
  margin: 10px 0;
}

.image-hotspots .product-title {
  margin-bottom: 0;
}

.image-hotspots .product-price {
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.image-hotspots img.tooltips-img {
  border-radius: var(--media-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset)
    var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}

.image-hotspots .link {
  text-decoration: none;
  position: relative;
}

.image-hotspots .link:after {
  content: "";
  left: 50%;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: rgb(var(--color-base-background-accent-1), .4);
  transition: width .4s ease-in-out, left .4s ease-in-out;
}

.image-hotspots .link:hover:after {
  width: 100%;
  left: 0;
  padding-top: 3px;
}

.tooltip-header {
  color: rgb(var(--color-foreground));
}

.image-hotspots-content--middle .spotlight-product img {
  background: rgb(var(--color-background));
  border-radius: var(--media-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
  margin: 0 auto;
}

.image-hotspots .tooltip-index {
  text-indent: -9999px;
}

.image-hotspots .spotlight-price {
  display: flex;
  justify-content: center;
}

.image-hotspots-content--left .spotlight-price {
  justify-content: left;
}

.image-hotspots-content--right .spotlight-price {
  justify-content: right;
}

.image-hotspots .spotlight-price .sale {
  text-decoration: line-through;
  color: rgba(var(--color-foreground), .55);
  padding-left: 5px;
}

.image-hotspots .hide-content.grid-item.left {
  width: 100%;
  max-width: 100%;
}

.image-hotspots--full-width .grid .media img,
.on-scroll-animation .image-hotspots--full-width .grid .media img.visible{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.image-hotspots .hide-content.grid-item.left .media img,
.on-scroll-animation .image-hotspots .hide-content.grid-item.left .media img.visible {
  border-top-right-radius: calc(var(--media-radius) - var(--media-border-width));
  border-bottom-right-radius: calc(var(--media-radius) - var(--media-border-width));
  border-top-left-radius: calc(var(--media-radius) - var(--media-border-width));
  border-bottom-left-radius: calc(var(--media-radius) - var(--media-border-width));
}

.image-hotspots--full-width .hide-content.grid-item.left .media img,
.on-scroll-animation .image-hotspots--full-width .hide-content.grid-item.left .media img.visible {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

@keyframes tooltip-expand {
  0% {
    height: var(--start-h);
  }
  100% {
    height: var(--end-h);
  }
}

@keyframes tooltip-collapse {
  0% {
    height: var(--start-h);
  }
  100% {
    height: var(--end-h);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-overlay {
    animation-duration: 0s !important;
  }
}

@media screen and (max-width: 990px) {
  .image-hotspots aside {
    display: none;
  }
  .image-hotspots--full-width .grid-item.right {
    margin-top: -90px;
  }
  .image-hotspots.mobile-text-first .grid {
    flex-direction: column-reverse;
  } 
  .image-hotspots .grid-item,
  .image-hotspots .grid-item.left {
    width: 100%;
    max-width: 100%;
  }
  .image-hotspots--full-width .grid-item.right {
    padding: 0 1.5rem;
  }
  .tooltip-overlay.global-media-settings:after {
    box-shadow: none;
  }
  .image-hotspots .additional .grid-item.right,
  .image-hotspots .grid-item.right {
    margin-top: -2rem;
    padding: 0 1.5rem;
  }
  .image-hotspots--boxed .grid .media img, 
  .on-scroll-animation .image-hotspots--boxed .grid .media img.visible {
    border-radius: var(--media-radius);
  }
  .image-hotspots [aria-expanded=true]~.tooltip-overlay.global-media-settings {
    padding: 10px;
  }
  .image-hotspots [aria-expanded=false]~.tooltip-overlay.global-media-settings {
    background: none;
  }
  .tooltip-title {
    display: none;
  }
  .tooltips-section .tooltips-list {
    list-style: none!important;
  }
  ol.tooltips-list {
    max-height: 0;
  }
}

@media screen and (min-width: 990px) {
  .image-hotspots.desktop-text-first .grid {
    flex-direction: row-reverse;
  } 
  .image-hotspots .grid .media img {
    border-radius: var(--media-radius);
  }

  .tooltip-content-style-two .tooltip-overlay {
    border-radius: var(--media-radius);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
  }
}

@media screen and (min-width: 750px) {
  .tooltips-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tooltip-button .tooltip-index {
    font-size: 16px;
    position: static;
    transform: translate(0, 0);
  }

  .tooltip-button {
    position: absolute;
    padding: 0;
    font-size: 16px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .image-hotspots.tooltip-content-style-two .tooltip-button {
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
  }

  .tooltip-title {
    display: none;
  }

  .tooltip-item {
    padding: 0;
  }

  [aria-expanded="true"] ~ .tooltip-overlay {
    z-index: 3;
  }

  [aria-expanded="true"].tooltip-button {
    z-index: 4;
  }

  .tooltip-overlay:empty {
    padding: 0;
    opacity: 0;
    transform: scale(0, 0);
  }

  .tooltip-overlay {
    max-width: 320px;
    width: 320px;
    padding: 60px 30px 30px 30px;
    margin-left: -32px;
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset)
      var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
    transform-origin: top left;
    position: absolute;
    will-change: opacity, transform;
  }

  .tooltip-header {
    display: block;
    margin: 10px 0 0 0;
  }

  [aria-expanded="true"] ~ .tooltip-overlay {
    animation: tooltip-expand-large 200ms both cubic-bezier(0.4, 0, 0.2, 1);
  }

  [aria-expanded="false"] ~ .tooltip-overlay {
    animation: tooltip-collapse-large 180ms both cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes tooltip-expand-large {
    0% {
      opacity: 0;
      transform: scale(0.2, 0.2);
    }
    100% {
      opacity: 1;
      transform: scale(1, 1);
    }
  }

  @keyframes tooltip-collapse-large {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

@media (min-width: 990px) and (max-width: 1200px) {
  .image-hotspots .grid-item.tooltips-section{
    width: 25%;
  }
}

/* Ensure that the .dynamic-content-placeholder transitions smoothly */
.dynamic-content-placeholder {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}