SASS for product preview hover card to tie together product image and match the timing for the alternate on model shot with hover

plp-hover-desc-layout-ab-test.scss

$boxshadow: 0 0 13px 0 #e0e0e0;
$hoverDelay: 600ms;

@media (min-width: $medium) {
  .catalog-container {
    div.product-block {
      position: relative;
      border: 1px solid transparent;
      border-bottom: 0;
      margin-top: 2em;
      z-index:11;
      transition: all 0s $hoverDelay linear;

      .info {
        z-index: 12;
        height: auto !important;
        background: white;
        margin: -4px -4px; 
      }

      .product-addl-info {
        visibility: hidden;
        opacity: 0;
        left: -1px;
        right: -1px;
        position:absolute;
        display: block !important;
        height:0;
        z-index: 10;
        transition: visibility $hoverDelay, opacity 1s $hoverDelay linear;
        box-shadow: $boxshadow;

        &-details {
          display: block !important;
          font-size: 1.23077rem;
          font-weight: 300;
          letter-spacing: 0.04rem;
          line-height: 1.5;
          padding: 0.5em 1.5em 1.5em;
          text-align: center;
          background: white;
          margin-top: 0;
          box-shadow: $boxshadow;
        }

        &-FILTER_BENEFIT {
          display: none;
        }
        &-FEATURE {
          display: none;
        }
        &-SPEC {
          display: none;
        }
      }

      &:hover {
        box-shadow: $boxshadow;
        z-index:12;

        .product-addl-info {
          position: absolute;
          height:auto;
          display: block !important;
          box-shadow: $boxshadow;
          visibility: visible;
          opacity: 1;
          transition: visibility 0s, opacity 0s $hoverDelay linear;
          z-index: 0;
          
        }
      }
    }
    .product-lane .button {
      transform: translateY(0) !important;
      margin-bottom: 2em;
    }
  }
}