.shopify-section--hot-spots,
.collection-hotspot {
  --_product-wrapper-padding: 0.5rem;
  .swym-wishlist-collections-v2-container {
    display: none;
  }

  .content-box {
    --content-box-spacing: 8px;
  }

  .content-box__background-media {
    &:after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(294.5deg, rgba(0, 0, 0, 0) 86.84%, rgba(0, 0, 0, 0.15) 95.14%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    }
  }

  .hot-spots-section-heading {
    color: var(--theme-color-white);
    width: fit-content;
    height: fit-content;
    max-width: 50%;
    z-index: 2;
  }

  .hot-spot {
    --hot-spot-dot-size: 24px;
    --hot-spot-dot-shadow-size: calc(var(--hot-spot-dot-size) + 16px);
    left: calc(var(--hot-spot-mobile-horizontal-position) - var(--hot-spot-dot-size) / 2);
    top: calc(var(--hot-spot-mobile-vertical-position) - var(--hot-spot-dot-size) / 2);
    grid-area: 1 / 1 / -1 / -1;
    transition: z-index 0.2s ease-in-out;
    position: absolute;
  }

  .hot-spot-product-wrapper {
    padding: var(--_product-wrapper-padding);
  }

  .hot-spots-section--full-screen {
    .content-box {
      --content-box-spacing: 0px;
    }

    .image-wrapper {
      border-radius: 0;
    }
  }

  .hot-spots-section:not(.hot-spots-section--full-screen) {
    .content-box {
      --content-box-spacing: calc(0.75rem + 1rem);
      padding: 1rem;
    }

    .content-box__background-media {
      overflow: hidden;
      border-radius: 0.5rem;
    }
  }

  .hot-spots-section--multiple-images {
    .content-box__background-media {
      display: flex;
      flex-direction: column;

      picture {
        overflow: hidden;
      }
    }
  }

  .hot-spot__dot {
    width: var(--hot-spot-dot-size);
    height: var(--hot-spot-dot-size);
    background: var(--theme-color-white);
    color: var(--theme-color-black);
    border-radius: 6px;
    place-items: center;
    display: grid;
    position: relative;
    transition: all 0.2s ease-in-out;

    &::after {
      content: '';
      position: absolute;
      width: var(--hot-spot-dot-shadow-size);
      height: var(--hot-spot-dot-shadow-size);
      background: var(--theme-color-white-blur-1);
      z-index: -1;
      border-radius: 6px;
      backdrop-filter: blur(20px);
      transition: all 0.2s ease-in-out;
    }

    &:hover,
    &:focus,
    &[aria-expanded='true'] {
      background: var(--theme-color-black);
      color: var(--theme-color-white);

      &::after {
        background: var(--theme-color-white);
      }
    }
  }

  .hot-spot__dot--content svg {
    transition: rotate 0.2s ease-in-out;
  }

  .hot-spot__dot--content[aria-expanded='true'] svg {
    rotate: 45deg;
  }

  .hot-spot-product-block {
    opacity: 0;
    visibility: hidden;
    isolation: isolate;

    &.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}

.collection-hotspot {
  --_link-margin-top: 0.75rem;
  --_link-margin-left: 1rem;
  --_image-aspect-ratio: 1;
  --_product-wrapper-padding: 0;

  display: block;

  .collection-hotspots__link {
    margin-top: var(--_link-margin-top);
    margin-left: var(--_link-margin-left);
  }
}

.shopify-section--hot-spots,
.collection-hotspot {
  .content-box__background-media img {
    display: block;
    height: auto;
    width: 100%;
    aspect-ratio: var(--_image-aspect-ratio);
  }
}

@media screen and (min-width: 1000px) {
  .shopify-section--hot-spots,
  .collection-hotspot {
    --_product-wrapper-padding: 0.75rem;
    --_link-margin-top: 1rem;
    --_link-margin-left: 0.75rem;
    --_image-aspect-ratio: 4 / 3;

    .hot-spot {
      left: calc(var(--hot-spot-desktop-horizontal-position) - var(--hot-spot-dot-size) / 2);
      top: calc(var(--hot-spot-desktop-vertical-position) - var(--hot-spot-dot-size) / 2);
    }

    .content-box {
      --content-box-spacing: 12px;
    }

    .hot-spots-section--multiple-images {
      --_image-aspect-ratio: 2 / 3;

      .content-box__background-media {
        flex-direction: row;
      }
    }
  }

  .collection-hotspot {
    --_product-wrapper-padding: 0;
  }
}