

.shop-the-look .thb-hotspot-content, .shop-the-look .thb-hotspot-arrow, .shop-the-look .thb-hotspot-bubble {
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1); }

.shop-the-look--full-width-false, .shop-the-look .thb-hotspot-bubble {
  isolation: isolate;
  border-radius: var(--block-border-radius, 16px); }

.shop-the-look--area {
  box-shadow: var(--block-shadows); }



.shop-the-look {
  display: block; }
  .shop-the-look--area {
    position: relative; }
    .shop-the-look--area img {
      width: 100%; }
  @media only screen and (max-width: 767px) {
    .shop-the-look--full-width-false {
      overflow: hidden; } }
  .shop-the-look--mobile {
    display: block; }
    @media only screen and (min-width: 768px) {
      .shop-the-look--mobile {
        display: none; } }
    .shop-the-look--mobile .thb-placeholder {
      height: 500px; }
  .shop-the-look--desktop {
    display: none; }
    @media only screen and (min-width: 768px) {
      .shop-the-look--desktop {
        display: block; } }
    .shop-the-look--desktop .thb-placeholder {
      height: 600px; }
  .shop-the-look .thb-placeholder {
    background: var(--color-accent); }
    .shop-the-look .thb-placeholder svg {
      padding: 50px;
      fill: var(--bg-body, #fff);
      opacity: 0.5; }
  .shop-the-look .thb-hotspot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20; }
    .shop-the-look .thb-hotspot:hover, .shop-the-look .thb-hotspot.loading {
      z-index: 40; }
      .shop-the-look .thb-hotspot:hover .thb-hotspot-arrow,
      .shop-the-look .thb-hotspot:hover .thb-hotspot-bubble, .shop-the-look .thb-hotspot.loading .thb-hotspot-arrow,
      .shop-the-look .thb-hotspot.loading .thb-hotspot-bubble {
        opacity: 1;
        pointer-events: all; }
      .shop-the-look .thb-hotspot:hover .thb-hotspot-arrow, .shop-the-look .thb-hotspot.loading .thb-hotspot-arrow {
        transform: translateY(0px); }
      .shop-the-look .thb-hotspot:hover .thb-hotspot-bubble, .shop-the-look .thb-hotspot.loading .thb-hotspot-bubble {
        transform: translateX(-50%) translateY(0px); }
    .shop-the-look .thb-hotspot.loading .thb-hotspot-content {
      border-width: 12px; }
      .shop-the-look .thb-hotspot.loading .thb-hotspot-content .loading-overlay {
        display: flex; }
    .shop-the-look .thb-hotspot-content {
      width: 24px;
      height: 24px;
      border-radius: 100%;
      background: transparent;
      border: 8px solid var(--bg-body, #f5f5f5);
      flex-shrink: 0;
      cursor: pointer;
      user-select: none; }
      .shop-the-look .thb-hotspot-content .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        transform: none;
        align-items: center;
        justify-content: center; }
        .shop-the-look .thb-hotspot-content .loading-overlay svg {
          width: 14px; }
          .shop-the-look .thb-hotspot-content .loading-overlay svg circle {
            stroke: var(--color-body, #2c2d2e); }
      .shop-the-look .thb-hotspot-content.thb-pulsate:after, .shop-the-look .thb-hotspot-content.thb-pulsate:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 100%;
        z-index: -1;
        animation: pulsing 2s infinite; }
      .shop-the-look .thb-hotspot-content.thb-pulsate:after {
        animation-delay: -0.4s; }

@-moz-keyframes pulsing {
  100% {
    transform: scale(1.75);
    opacity: 0; } }

@-webkit-keyframes pulsing {
  100% {
    transform: scale(1.75);
    opacity: 0; } }

@-o-keyframes pulsing {
  100% {
    transform: scale(1.75);
    opacity: 0; } }

@-ms-keyframes pulsing {
  .shop-the-look .thb-hotspot-content 100% {
    transform: scale(1.75);
    opacity: 0; } }

@keyframes pulsing {
  100% {
    transform: scale(1.75);
    opacity: 0; } }
    .shop-the-look .thb-hotspot-arrow {
      position: absolute;
      top: calc(100% + 11px);
      left: 5px;
      width: 0;
      height: 0;
      border-width: 0 11px 10px 11px;
      border-color: transparent transparent var(--bg-body, #f5f5f5) transparent;
      border-style: solid;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none; }
      .shop-the-look .thb-hotspot-arrow:before {
        content: "";
        display: block;
        position: absolute;
        top: -11px;
        left: -26px;
        width: 52px;
        height: 22px; }
    .shop-the-look .thb-hotspot-bubble {
      position: absolute;
      top: calc(100% + 21px);
      left: 50%;
      padding: 16px;
      background: var(--bg-body, #f5f5f5);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      display: flex;
      width: max-content;
      max-width: 325px;
      align-items: center;
      opacity: 0;
      transform: translateX(-50%) translateY(20px);
      pointer-events: none; }
      .shop-the-look .thb-hotspot-bubble .thb-hotspot-product-image {
        width: 75px;
        height: 75px;
        margin-right: 16px;
        flex-shrink: 0;
        position: relative; }
        .shop-the-look .thb-hotspot-bubble .thb-hotspot-product-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: calc(var(--block-border-radius, 16px) / 2); }
    .shop-the-look .thb-hotspot-product-content .thb-hotspot-product-title {
      font-size: 0.875rem;
      line-height: 1.375rem; }
    .shop-the-look .thb-hotspot-product-content a {
      font-size: 0.75rem;
      font-weight: var(--font-body-medium-weight, 500); }
