@charset "UTF-8";

.product-wrap {
  margin-bottom: 26px;
  text-align: center;



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

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

    .image-hover {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

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

      button {
        position: relative;

        >span {
          font-size: 11px;
          text-transform: none;
          line-height: 18px;
          transition: all .2s ease-in-out;
          opacity: 0;
          background-color: #000;
          padding: 0 5px;
          white-space: nowrap;
          position: absolute;
          bottom: calc(100% + 20px);
          left: 50%;
          transform: translate(-50%);
          visibility: hidden;

          &::before {
            content: "";
            border: 5px solid transparent;
            border-top-color: #000;
            position: absolute;
            bottom: -9px;
            left: 50%;
            margin-left: -5px;
          }
        }

        &:hover {
          background-color: rgba(0, 0, 0, 0.726);

          span {
            opacity: 1;
            bottom: calc(100% + 7px);
            z-index: 2;
            visibility: visible;
          }
        }
      }
    }

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

      .image-old {
        opacity: 0;
      }
    }
  }

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

  .product-name {
    margin-bottom: 6px;
  }

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

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