// =============================================================================
// Shop Display List
// =============================================================================

ul.products.product-list-display {
  margin-left: auto !important;
  margin-right: auto !important;

  .product:not(.product-category) {
    width: 100%;
    padding: 0 rem-calc($grid-column-gutter/2);
    text-align: left;
    margin-bottm: 0;
    position: relative;
    margin: 0 0 rem-calc(30) 0;
    border: solid 1px;
    border-color: v(site-border-color);
    @include shop_product_badges(18px, 18px);

    &:nth-child(2) {
      margin-top: 0 !important;
    }
    @include breakpoint(medium) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      flex-direction: row;
      overflow: visible;
      padding: 0;
      @include shop_product_badges(18px, 18px);
    }
    &.outofstock {
      @include tooltip('product-item__description--actions', button, 18, 19);
    }

    &.outofstock,
    &.product-type-variable {
      .product-item__description--actions {
        .button {
          &:after {
            font-size: 14px;
          }
        }
      }
    }

    .product-item {
      display: flex;
      align-items: center;
      width: 100%;
      position: relative;
      padding: rem-calc(10) 0;
      @include breakpoint(medium) {
        padding: rem-calc(20);
      }

      .product-item__thumbnail:hover {
        .product-item__thumbnail-placeholder.second_image_enabled.second_image_loaded {
          img {
            opacity: 0;
            transition: opacity 300ms ease-in-out 0.05s;
          }

          .product_second_image {
            opacity: 1;
            transition: opacity 300ms ease-in-out 0.05s;
          }
        }
      }

      .product-item__thumbnail-placeholder.second_image_enabled.second_image_loaded {
        img {
          opacity: 1;
          transition: opacity 300ms ease-in-out 0.05s;
        }

        .product_second_image {
          opacity: 0;
          transition: opacity 300ms ease-in-out 0.05s;
        }
      }

      .product-item__thumbnail {
        width: auto;
        position: relative;
        margin-right: rem-calc(15);
        margin-bottom: 0;
        @include breakpoint(small down) {
          width: 50%;
        }
        @include breakpoint(medium) {
          margin-right: rem-calc(40);
          width: 260px;
        }
      }

      .product-item__thumbnail-placeholder {
        width: 100%;
        position: relative;

        &.second_image_enabled {
          .product_second_image {
            width: 100%;
            height: 100%;
            opacity: 0;
            display: block;
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            transition: opacity 0 ease 0.05s;
          }
        }

        a {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          flex-direction: column;

          .out-of-stock {
            position: absolute;
            background-color: v(site-border-color);
            @include product_badge();
            top: 50%;
            margin-top: -8px;
          }
        }

        .wp-post-image {
          transition: transform 0.3s ease-in-out, transform 0.3s ease-in-out;
          will-change: transform;
          width: 100%;
        }

        img {
          position: relative;
        }

        &:hover {
          @include breakpoint(medium) {
            .wp-post-image {
              transform: scale3d(0.98, 0.98, 0.98);
            }
          }
        }
      }

      .product-item__description {
        width: 50%;
        @include global-transition();
        @include breakpoint(medium) {
          display: flex;
          justify-content: space-between;
          width: 100%;
        }

        .product-item__description--info {
          position: relative;
          margin-bottom: rem-calc(16);
          padding-bottom: rem-calc(16);
          @include breakpoint(medium) {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            width: 75%;
            margin-bottom: 0;
            border-bottom: 0;
            padding-bottom: 0;
          }

          a.title {
            @include breakpoint(medium) {
              width: 100%;
              max-width: rem-calc(170);
            }
            @include breakpoint(large) {
              width: 100%;
              max-width: rem-calc(210);
            }

            .woocommerce-loop-product__title {
              @include global-transition();
              @include product_title(13, 4);
              @include breakpoint(medium) {
                @include product_title(14, 4);
              }

              &:hover {
                color: v(site-accent-color);
              }
            }
          }

          span.price {
            margin-left: auto;
            display: block;
            @include product_price(13, 0);
            @include breakpoint(medium) {
              border-bottom: none;
              @include product_price(14, 0);
            }
          }

          .star-rating {
            @include breakpoint(medium) {
              position: absolute;
              top: 100%;
            }
            font-size: rem-calc(13);
            left: 0;
            opacity: 1;
            visibility: visible;
          }
        }
        .product-item__description--actions {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          opacity: 1;
          visibility: visible;
          height: auto !important;
          @include global-transition();
          @include breakpoint(medium) {
            padding-left: rem-calc(32);
            justify-content: center;
          }

          .nova_product_quick_view_btn {
            display: none;
            @include breakpoint(medium) {
              display: flex;
            }
          }

          > a {
            position: relative;

            &.clicked {
              &:after {
                animation: shop_tooltip_clicked 0.3s ease-out;
                @include breakpoint(medium) {
                  animation: shop_tooltip_clicked_desktop 0.3s ease-out;
                }
              }
            }

            &.loading {
              @include loader(50px, 50px);

              &:before {
                border-top: 1px solid;
                border-color: v(site-accent-color) #FFF #FFF #FFF;
                position: absolute;
                left: -3px;
                top: -3px;
                z-index: 1;
              }
            }
            @include breakpoint(medium) {
              margin-right: rem-calc(8);
              overflow: visible;
            }

            &:last-child {
              margin-right: 0;
            }

            .tooltip {
              top: -70px;
              left: 50%;
              transform: translate(-50%, 30%);
              opacity: 0;
              visibility: hidden;
              white-space: nowrap;
              @include breakpoint(medium) {
                animation: none;
              }

              &:after {
                bottom: -10px !important;
                top: auto;
                left: 50%;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                border-width: 6px;
                margin-left: -6px;
              }
            }

            i {
              font-style: normal;
            }

            &:hover {
              transition: all 0.3s ease-out;

              &:after {
                @include breakpoint(medium) {
                  transform: scale3d(1.1, 1.1, 1.1);
                }
              }

              .tooltip {
                overflow: visible;
                top: -45px;
                @include breakpoint(medium) {
                  opacity: 1;
                  visibility: visible;
                }
              }
            }
          }
        }
      }
    }
  }

  .product.product-category {
    text-align: left;
  }
}
