.product__shipping-calculator-wrap{
  padding: 14px 0;
  border-top: #E7E7E7 solid 1px;
  border-bottom: #E7E7E7 solid 1px;
   #product__shipping-product-json{
    display: none;
  } 
  .shipping__header{
    text-transform: uppercase;
    font-size: 18px;
    padding: 14px 0;
    font-weight: bold;
    cursor: pointer;
    &.open{
      .open-icon{
        transform: rotate(0);
      }
    }
    .open-icon{
      float: right;
      transition: .2s;
      transform: rotate(-45deg);

    }
  }
  .shipping__content{
    font-size: 16px;
    .form-wrap{
      display: flex;
    }
    input, button{
      height: 40px;
      padding: 6px 15px;
    }
    input{
      border: 1px solid #D6D6D6;
      color: black;
      font-size: 16px;
      font-weight: 400;
      width: calc(100% - 30px);
      margin-right: 10px;
    }
    button{
      font-size: 12px;
      font-weight: 700;
      border-radius: 2px;
      background: #1A1A1A;
      color: white;
      text-transform: uppercase;
      width: 115px;
      transition: .3s;
      cursor: pointer;
      .btn-loading{
        display: none;
        margin: 0 auto;
      }
      &:hover, &:disabled{
        opacity: .7;
      }
      &.loading{
        .btn-loading{
          display: block;
          height:20px;
          width:20px;
        }
        .btn-text{
          display: none;
        }
      }
    }
    #shipping_result{
      display: none;
      .shipping__item{
        span{
          font-weight: bold;
        }
        .info-icon{
          margin-left: 8px;
          display: inline-block;
          vertical-align: middle;
          cursor: pointer;
        }
      }
      .shipping_page{
        font-size: 12px;
        margin-top: 5px;
        a{
          text-decoration: underline;
          font-weight: bold;
        }
      }
    }
  }
  .free-info{
    display: flex;
    align-items: flex-start;
    padding: 16px 0;
    .icon{
      margin-right: 10px;
    }
    p{
      margin: 0;
      line-height: 140%;
    }
  }
}


 /* === PS MODAL === */
 .ps-modal-link{
   .modal-content{
     display: none;
   }
 }
 .modal-wrap{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: none;
   .backdrop{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     background: rgba($color: #000000, $alpha: .5);
   }
   .modal-container{
     width: 90%;
     max-width: 580px;
     height: auto;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     padding: 30px;
     background: white;
     z-index: 2;
     color: black;
     font-size: 1.1em;
     display: none;
     h4{
       padding-bottom: 15px;
       border-bottom: 1px solid black;
       margin-bottom: 15px;
       font-size: 1.4em;
       font-weight: bold;
     }
   }
   .close-modal{
     position: absolute;
     top: 0;
     right: 2px;
     padding: 10px;
     color: black;
     cursor: pointer;
     z-index: 3;
     font-weight: 200;
     font-size: 1.8em;
     line-height: 100%;
   }
   &.show-modal{
     display: block;
   }
 }