.quick-add {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card--card .quick-add {
  margin: 0 1.3rem 1rem;
}

.quick-add-modal .scroll-trigger.scroll-trigger {
  animation: none;
  opacity: 1;
}

.popup-modal.quick-add-modal[open] {
  overflow: visible;
  z-index: 1000;
}

.popup-modal__content.quick-add-modal__content {
  --modal-height-offset: 3.2rem;
  margin: auto 0;
  overflow: hidden;
  max-width: 1024px;
  width: 100%;
  padding: 0;
}

.quick-add-modal__content.quick-add-modal__content--bulk {
  height: auto;
}

body:not(.side-drawers-inset) .popup-modal--side .quick-add-modal__content.quick-add-modal__content--bulk {
  height: 100%;
}

.quick-add-modal .product__modal-opener--image .product__media-toggle:hover,
.quick-add-modal .media-modal,
.quick-add-modal .image-magnify-full-size,
.quick-add-modal .product__media-zoom-lightbox::after {
  cursor: default;
}

@media screen and (min-width: 750px) {
  .popup-modal__content.quick-add-modal__content {
    --modal-height-offset: 10rem;
    width: calc(100% - var(--px-mobile));
    padding: 0;
  }

  .popup-modal__content.quick-add-modal__content--bulk {
    overflow-y: auto;
  }

  .quick-add-modal:not(.popup-modal--side) .popup-modal__content.quick-add-modal__content {
    max-height: calc(100% - var(--modal-height-offset) * 2);
    margin-top: var(--modal-height-offset);
  }

  .quick-add-modal.popup-modal--side .popup-modal__content.quick-add-modal__content {
    max-width: min(950px, calc(100% - (var(--modal-gutter, 0px) * 2))) !important;
    min-width: calc(100% - (var(--modal-gutter, 0px) * 2));
  }
}

@media screen and (min-width: 990px) {
  .popup-modal__content.quick-add-modal__content {
    width: 80%;
  }
}

@media screen and (min-width: 1000px) {
  .quick-add-modal.popup-modal--side .popup-modal__content.quick-add-modal__content {
    min-width: 950px;
  }
}

.popup-modal__content.quick-add-modal__content img {
  max-width: 100%;
}

.quick-add-modal__content-info--bulk .quick-order__title {
  display: none;
}

.quick-add-modal__content-info--bulk h3 {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.quick-add-modal__content-info--bulk .price,
.quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
  display: inline-block;
}

@media screen and (min-width: 750px) {
  .quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
    padding-inline-start: 1.6rem;
  }

  .quick-add-modal__content-info .product--no-media .product__media-submedia-wrapper {
    min-width: 300px;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    overflow-y: initial;
  }

  .quick-add-modal__content-info--bulk thead {
    position: sticky;
    z-index: 3;
    top: 0;
    background-color: rgb(var(--color-background));
  }

  .quick-add-modal__content-info .product--no-media .product__media-submedia-wrapper {
    min-width: calc(475px - (var(--modal-padding)* 2));
  }
}

.quick-add-modal__content-info--bulk .quick-add__product-media,
.quick-add-modal__content-info--bulk .quick-add__product-container,
.quick-add-modal__content-info--bulk .quick-add__info {
  width: 4.8rem;
  height: 7rem;
}

.quick-add-modal__content-info--bulk-details {
  padding-inline-start: 1rem;
}

.quick-add-modal__content-info--bulk-details .h3 {
  text-wrap: balance;
}

quick-add-bulk {
  --color-foreground: var(--color-secondary-button-text);
}

quick-add-bulk .quantity::after {
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground));
}

.button--hover-grow quick-add-bulk .quantity::after {
  transition: box-shadow var(--duration-default) ease
}

.button--hover-grow quick-add-bulk .quantity:hover::after {
  box-shadow: 0 0 0 calc(var(--inputs-border-width) + 1px) rgba(var(--color-foreground));
}

quick-add-bulk .quantity__input {
  padding: 1em 0;
  font-size: var(--font-button-text-size);
  font-weight: var(--font-button-font-weight);
  opacity: 1;
  transition: opacity .3s, transform .3s var(--cubic-bezier-ease-out-slow);
  will-change: transform;
}

quick-add-bulk:has(.loading__spinner:not(.hidden)) .quantity__input {
  opacity: 0;
  transform: scale(0.3);
}

quick-add-bulk:has(.loading__spinner.spinning-complete) .quantity__input {
  animation: pop 250ms ease-out;
}

.quick-add-modal__content-info--bulk .quick-add__product-media:has(.media--no-photo) {
  position: relative;
}

.quick-add-modal__content-info--bulk .media--no-photo svg {
  position: absolute;
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__product-media,
  .quick-add-modal__content-info--bulk .quick-add__product-container,
  .quick-add-modal__content-info--bulk .quick-add__info {
    width: 11rem;
    height: auto;
  }

  .quick-add-modal__content-info--bulk-details {
    padding: 0 2.5rem;
  }

  .quick-add-modal__content-info--bulk quick-order-list {
    padding: 0;
  }
}

.quick-add__product-media {
  margin-bottom: 1rem;
}

.quick-add-modal__content-info--bulk .quick-add__product-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-add-modal__content-info--bulk .quick-add__info {
  display: flex;
}

.quick-add-modal__content-info--bulk .quick-add__content-info__media {
  width: auto;
}

@media screen and (max-width: 989.98px) {
  .quick-add-modal__content-info--bulk .quick-add__content-info__media {
    display: flex;
    margin: 0;
  }

  .quick-add-modal__content-info--bulk quick-order-list {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    --modal-padding: 1.5rem;
  }
}

@media screen and (min-width: 989px) {
  .quick-add-modal__content-info--bulk .quick-add__info {
    flex-direction: column;
    position: sticky;
    top: 0;
    margin-top: -2.5rem;
    padding-top: 2.5rem;
  }
}

@media screen and (max-width: 989.98px) {
  .quick-add-modal__content-info--bulk {
    flex-direction: column;
  }
}

.quick-add-modal__content-info {
  --modal-padding: 2.5rem;
  padding-inline-end: 4.4rem;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--modal-padding);
  height: 100%;
}

.quick-add-modal__content-info .product__info-container {
  transform: translateZ(0);
}

.quick-add-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

quick-add-bulk {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card__content quick-add-bulk .quantity {
  width: 100%;
}

quick-add-bulk quantity-input {
  justify-content: space-between;
}

quick-add-bulk .quantity__input {
  max-width: none;
  text-indent: 1ch;
  flex-grow: 0;
}

.quantity__input-disabled {
  pointer-events: none;
}

.quick-add-modal__content-info--bulk .quick-order-list__total {
  margin-inline-start: calc(-1 * var(--modal-padding));
  margin-inline-end: calc(-1 * var(--modal-padding));
}

.quick-add-modal__content-info quick-order-list {
  margin-top: 2rem;
  padding-bottom: 2rem;
}

@media screen and (max-width: 749.98px) {
  .quick-add-modal .product-form__input .variant-form__label > span.grow {
    min-width: 150px;
  }

  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    padding: var(--modal-padding);
  }

  .quick-add-modal[open]:not(.popup-modal--closing):not(.popup-modal--side) .popup-modal__content {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .quick-add-modal .popup-modal__content.quick-add-modal__content {
    bottom: 0;
    inset-inline-start: 0;
    top: auto;
    border-radius: var(--popup-corner-radius) var(--popup-corner-radius) 0 0;
    height: 75vh;
    transform: translate3d(0, 400px, 0) scale(1);
    transition: transform var(--duration-long) var(--cubic-bezier-ease-out-slow);
  }

  .quick-add-modal__content-info {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .quick-add-modal__content-info:has(.product__slider-full-width-mobile) {
    padding-top: 0;
  }

  .quick-add-modal__content-info > * {
    max-height: 100%;
  }
}

.quick-add-modal__toggle {
  position: fixed;
  inset-inline-end: 1.5rem;
  top: 1.5rem;
  z-index: 4;
}

.quick-add-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

.product__read-more {
  line-height: 2.5em;
}

quick-add-modal .quick-add-hidden {
  display: none !important;
}

quick-add-modal .product__column-sticky {
  top: 0;
  padding-bottom: 1rem;
}

quick-add-modal .product.grid:has(.product__info-padded-main) {
  padding-bottom: var(--modal-padding);
}

@media screen and (min-width: 750px) {
  .quick-add-modal .product.grid {
    --product-info-width: 50%;
    --grid-desktop-horizontal-spacing: calc(var(--px-mobile) * 2) !important;
  }

  .quick-add-modal .product.grid:has(.product__info-padded-main) {
    --grid-desktop-horizontal-spacing: var(--px-mobile) !important;
  }

  .quick-add-modal .product__info-padded {
    --grid-desktop-horizontal-spacing: 3rem !important;
    --info-padding-y: 3rem !important;
    --info-padding-x: 3rem !important;
  }

  .popup-modal__toggle {
    margin-inline-end: -1.6rem;
  }

  .quick-add-modal .product--slider .product__media-wrapper .slider-buttons .slider-button {
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
  }

  .quick-add-modal .product--slider .product__media-wrapper .slider-buttons .slider-button--prev {
    inset-inline-end: calc(var(--tap-target) + 1rem);
  }
}

@media screen and (min-width: 900px) {
  .quick-add-modal .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: calc(25% - 0.8rem);
  }
}

quick-add-modal .product__title > h1 {
  display: none;
}

quick-add-modal .product__title > a {
  display: block !important;
  text-decoration: none;
}

quick-add-modal .product__title > a:hover h2 {
  color: rgb(var(--color-link));
}

quick-add-modal .product-form__buttons {
  max-width: initial;
}

.quick-add__submit {
  padding: 1em;
  min-width: 100%;
  box-sizing: border-box;
}

.product-card:not(.card--horizontal) .quick-add__submit {
  min-height: 49px;
}

quick-add-modal .product-media-container.constrain-height {
  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
}

@media screen and (min-width: 750px) {
  .quick-add-modal .product-media-container.constrain-height {
    --constrained-min-height: 400px;
  }

  .quick-add-modal .page-width {
    padding: 0;
  }
}

@media screen and (max-width: 749.98px) {
  .quick-add__submit {
    font-size: 0.9em;
  }

  .grid--2-col-tablet-down .quick-add__submit,
  .grid--2-col-tablet-down .quick-add-bulk .quantity__input {
    padding: 0.8em;
  }

  .grid--2-col-tablet-down .quick-add-bulk .quantity__input {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}
