@charset "UTF-8";

/**
 * @copyright     2022 beikeshop.com - All Rights Reserved.
 * @link          https://beikeshop.com
 * @Author        pu shuo <pushuo@guangda.work>
 * @Date          2022-09-03 22:32:29
 * @LastEditTime  2022-09-16 20:56:27
 */

.product-list-wrap {
  .col-12:not(:last-of-type) {
    .product-wrap {
      border-bottom: 1px solid #E6E6E6;
      margin-bottom: 1.4rem;
      padding-bottom: 1.4rem;

      &:hover {
        box-shadow: none;
        .image {
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .button-wrap {
          bottom: 10px;
          opacity: 1;
        }
      }
    }
  }
}

.product-wrap {
  margin-bottom: 20px;
  text-align: center;
  padding-bottom: .7rem;
  transition: all 0.3s ease-in-out;
  background-color: #fff;

  &.list {
    display: flex;
    padding-bottom: 0;

    .image {
      width: 200px;
      margin-bottom: 0;
      transition: all 0.3s ease-in-out;
    }

    .product-name {
      height: auto;
      margin-bottom: 20px;
    }

    .product-bottom-info {
      padding-top: 10px;
      padding-left: 20px;
      flex: 1;
      text-align: left;

      .product-name {
        font-size: 14px;
      }
    }
  }

  .image {
    margin-bottom: 10px;
    position: relative;

    .image-old {
      opacity: 1;
      transition: all ease-out .4s;
    }

    .button-wrap {
      width: 100%;
      position: absolute;
      z-index: 40;
      bottom: -30px;
      opacity: 0;
      transition: all .3s ease-out;
      display: flex;
      justify-content: center;

      button {
        &:hover {
          background-color: rgb(70, 70, 70);
        }
      }
    }
  }

  @media (min-width: 768px) {
    &:hover {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

      .button-wrap {
        bottom: 10px;
        opacity: 1;
      }
    }
  }

  .product-name {
    height: 39px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    color: #3d3d3d;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-price {
    .price-new {
      color: $primary;
      font-size: 1.1rem;
      font-weight: bold;
    }

    .price-old {
      color: #aaa;
      margin-left: 4px;
      text-decoration:line-through;
    }
  }
}
