quick-add-modal {
  --modal-animation-name: quick-add-fade-in;
}
.quick-add-modal__content {
  top: 60px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgb(var(--color-page-background));
  overflow: hidden;
  max-width: calc(var(--page-width, 1400) - 200px);
  cursor: auto;
  padding: 50px 50px 50px 42px;
  max-height: 90vh;
}

@media (min-width: 1281px) {
  .quick-add-modal__content .product__media-wrappers {
    width: 585px !important;
  }
  .quick-add-modal__content .product--mobile-show {
    --grid-mobile-vertical-space: 0;
  }
  .quick-add-modal__content main-product-detail.product--large .product__info-wrapper {
    flex: 1;
    max-width: 100%;
    width: 100%;
  }
  .quick-add-modal__content .product-form__input input[type="radio"] + label.product-form--color-swatch.medium {
    --swatch-size: 36px;
  }
  .quick-add-modal__content .product-form button.product-form__submit {
    min-height: 52px;
  }
  .quick-add-modal__content .shopline-payment-button-wrapper .pay-button-common-item {
    height: 52px !important;
  }

}
.quick-product-info {
  display: none;
}
@media (max-width: 1280px) {
  .quick-add-modal__content .product__info-item.product__info-price,
  .quick-add-modal__content .product__title,
  .quick-add-modal__content .product__media-wrappers
  {
    display: none !important;
  }

  .quick-product-info {
    display: block;
  }

  .quick-add-modal__content .quick-product-box {
    display: block !important;
    overflow: hidden;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    background-color: #FFFFFF;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .quick-product-content {
    display: flex;
    gap: 10px;
  }
  .quick-product-content img {
    width: 100%;
    height: auto;
    vertical-align: top;
    position: relative;
    z-index: 3;
  }

  .quick-product-content .quick-product-image {
    max-width: 78px;
    width: 78px;
    min-width: 78px;
    position: relative;
    overflow: hidden;
    min-height: 104px;
  }

  .quick-product-content .quick-product-info {

  }

  .quick-product-content .quick-title {
    font-size: 14px;
    line-height: 16px;
    padding-right: 53px;
    margin-bottom: 10px;
  }

  .quick-product-content .quick-price {
    --sale-price-font-size: 18px;

  }
  .quick-product-content .quick-price .price {
    vertical-align: top;
  }

  .quick-product-content .quick-price .price__sale {
    flex-direction: row-reverse;
  }

  .quick-product-content .quick-price .price-item--regular {
    font-size: 15px;
  }
  .quick-product-content .quick-details-url {
    margin-top: 15px;
  }
  .quick-product-content .quick-details-url a {
    color: #8F8F8F;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: underline;
  }
  .quick-product-content .product-form button.product-form__submit {
    min-height: 45px;
  }
  .quick-product-content .shopline-payment-button-wrapper .pay-button-common-item {
    height: 45px !important;
  }

}

.quick-add-modal__content
  .product__info-item:not(.quick-add-hidden)
  .third-party-more-list {
  top: unset;
  bottom: 100%;
}
.quick-add-modal__toggle {
  background-color: rgb(var(--color-page-background));
  border: 0 none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px;
  z-index: 5;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  /* fix safari z-index not working */
  -webkit-transform: translate3d(0, 0, 0);
  color: inherit;
}
.quick-add-modal__content-info {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
@media (max-width: 959px) {
  .quick-add-modal__content {
    height: 88%;
    margin-bottom: 0;
    padding: 0;
    --start-transform: 100%;
    --end-transform: 0;
    left: 0;
    right: 0;
    transform: unset;
  }
  .quick-add-modal__content .product__info-wrapper,
  .quick-add-modal__content .thumbnail-slider {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0;
  }
  .quick-add-modal__content .product__info-wrapper {
    border-radius: 10px 10px 0 0;
  }
  .quick-add-modal__toggle {
    top: 14px;
    right: 12px;
  }
}
@keyframes quick-add-fade-in {
  0% {
    transform: var(--start-transform, translateY(30px));
  }

  100% {
    transform: var(--end-transform, translateY(0));
  }
}
quick-add-modal .quick-add-hidden {
  display: none !important;
}
quick-add-modal .quick-add-show {
  display: block !important;
}
quick-add-modal .product__modal-opener:not(.product__modal-opener--image) {
  display: none !important;
}
quick-add-modal .product__media-wrappers .product__media-list .deferred-media {
  display: block;
  width: 100%;
}
.quick-add-modal__content .quick-add-modal-hidden {
  display: none;
}
/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */