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

.quick-add-modal {
  box-sizing: border-box;
  position: fixed;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  background: rgb(var(--color-foreground-rgb) / 0.3);
  height: 100%;
  opacity: 0;
  visibility: hidden;

  & .shopify-app-block .spr-starrating .spr-stars {
    margin-right: 1.6rem;
  }

  &[open] {
    z-index: 101;
    opacity: 1;
    visibility: visible;

    & .quick-add-modal__content {
      transform: translate(-50%,-50%) scale(1);
      opacity: 1;
    }
  }

  & .slider-buttons {
    position: relative;
    z-index: 2;
  }

  & .slider-buttons .slider-button:focus-visible {
    box-shadow: 0 0 0 .3rem rgb(var(--color-background-rgb) / 0.2),0 0 .5rem .4rem rgb(var(--color-foreground-rgb) / 0.3);
  }

  & .scroll-trigger.scroll-trigger {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }

  & .product__media-item {
    width: 100%;
    max-width: 100%;
  }

  @media screen and (min-width: 750px) {
    & .product__info-container .product-form,
    & .product-form-wrap {
      margin-bottom: 0;
    }
  }
}

.quick-add-modal__content {
  --modal-height-offset: 3.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 100%;
  background-color: var(--color-background);
  overflow: hidden;
  max-width: var(--page-width);
  width: calc(100% - 3rem);
  transform: translate(-50%,-50%) scale(0.85);
  transition: all var(--duration-longest) cubic-bezier(.7,0,.2,1);
  transition-property: transform, opacity;
  opacity: 0;

  @media screen and (min-width: 750px) {
    width: 97%;
    max-width: 131rem;
  }

  @media screen and (min-width: 1025px) {
    width: 86%;
  }

  @media screen and (max-width: 749px) {
    bottom: var(--modal-height-offset);
    height: 90vh;
  }

  & img {
    max-width: 100%;
  }
}

.quick-add-modal__content-info {
  --modal-padding: 1rem;
  padding: 4rem 1rem;
  display: flex;
  overflow-y: auto;
  height: 100%;
  max-height: 90vh;

  @media screen and (min-width: 750px) {
    --modal-padding: 5rem;
    padding: 5.5rem 2rem;
  }

  @media screen and (min-width: 1025px) {
    --modal-padding: 7rem;
    padding: 7rem;
  }

  & > * {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    height: 100%;
    column-gap: 4rem;

    @media screen and (max-width: 749px) {
      max-height: 100%;
    }
  }
}

quick-add-modal .product__media-list .product__media-item {
    width: 100%;
}

quick-add-modal .slider-component-full-width .slider .slider__slide:first-child {
    margin-left: 0;
}

quick-add-modal .slider-component-full-width .slider:after {
  padding-left: 2.4rem;
}

quick-add-modal .product--stacked .product__media-item {
  max-width: 100%;
  width: 100%;
}

quick-add-modal .slider--desktop.grid--1-col-desktop .grid__item {
  width: 100%;
}

quick-add-modal .slider-buttons-tablet .slider-counter {
  display: none;
}

.quick-add-modal__toggle {
  color: var(--color-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1.4rem 1.2rem;
  z-index: 5;
  width: 4.4rem;
  height: 4.4rem;
  position: fixed;
  top: 0;
  right: 0.3rem;

  @media screen and (min-width: 750px) {
    padding: 1.2rem;
    top: 0.5rem;
    right: 1rem;
  }

  @media screen and (min-width: 1025px) {
    padding: 1.2rem;
    top: 1.2rem;
  }

  & .line {
    background: var(--color-foreground);
  }
}

quick-add-modal .slider-buttons:not(.quick-add-hidden) {
  display: flex !important;
}

quick-add-modal .slider-buttons .slider-button {
  background: var(--color-foreground);
  color: var(--color-background);
  border-radius: 50%;
  position: absolute;
  bottom: 2rem;
}

quick-add-modal .slider-buttons .slider-button--prev {
  left: 2.5rem;
}

quick-add-modal .slider-buttons .slider-button--next {
  right: 2.5rem;
}

quick-add-modal .slider-buttons:not(.slideshow__controls) .slider-counter:not(.dis-none),
quick-add-modal .quick-add-hidden {
  display: none;
}

quick-add-modal .product .product__view-details {
  display: block;
  margin-bottom: 3rem;
  margin-top: 2rem;
}

quick-add-modal .quick-add-hidden,
quick-add-modal .product__modal-opener:not(.product__modal-opener--image) {
  display: none !important;
}

quick-add-modal .product__column-sticky .product__media-list {
  margin-bottom: 0;
  scroll-padding-left: 0;
}

quick-add-modal .product__media-wrapper {
  overflow: hidden;
}

quick-add-modal .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
  margin-left: 0;
  margin-right: 0;
}

quick-add-modal .product__media-list .deferred-media {
  display: block;
  width: 100%;
}

quick-add-modal .product__column-sticky {
  top: 0;
  position: relative;
}

@media screen and (min-width: 750px) {
  quick-add-modal .product:not(.product--no-media) .product__media-wrapper,
  quick-add-modal .product:not(.product--no-media) .product__info-wrapper {
    max-width: calc(50% - 1.6rem);
    width: calc(50% - 1.6rem);
  }

  quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
  }

  quick-add-modal .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: none;
  }
}

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

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

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

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

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

.quick-add__submit {
  padding: 1.2rem;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: all .4s ease-out;
  border-radius: var(--quick-add-button-corner-radius);
  color: var(--color-button-text);
  background: var(--color-button);

  @media screen and (min-width: 1025px) {
    transform: translateY(150%);
    opacity: 0;
    padding: 0;
    pointer-events: none;
  }

  & .loading-overlay__spinner .spinner .path {
    stroke: var(--color-button-text);
  }

  &.loading .icon {
    display: none;
  }

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-button);
    border-radius: var(--quick-add-button-corner-radius);
  }

  &:hover:after {
    animation: beat 3s linear 0s infinite normal none running;
  }
}

.product-form__submit,
.product-form__soldout {
  font-size: calc(var(--font-body-scale) * 2rem);
  padding: 1.5rem;

  @media screen and (min-width: 750px) {
    font-size: calc(var(--font-body-scale) * 2.2rem);
    padding: 1.5rem 3.2rem;
  }
}

@media screen and (min-width: 1025px) {
  .product-form__submit:not(:focus-visible):not(.focused):focus,
  .product-form__soldout:not(:focus-visible):not(.focused):focus {
    box-shadow: 0 0 0 .3rem var(--color-background),0 0 0 .5rem rgb(var(--color-foreground-rgb) / 0.5),0 0 .5rem .4rem rgb(var(--color-foreground-rgb) / 0.3);
  }

  .card-wrapper:hover .quick-add__submit,
  .product-grid .grid__item:focus-within .quick-add__submit {
    opacity: 1;
    transform: translateY(0);
    padding: 0.8rem;
    height: var(--hei-a-lg);
    visibility: visible;
    pointer-events: auto;
  }
}

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

  @media screen and (min-width: 750px) {
    --constrained-min-height: 400px;
  }
}

@media screen and (min-width: 750px) and (max-width: 1024px) {
  quick-add-modal .product-badge {
    left: 0;
  }

  quick-add-modal .slider-buttons .slider-button .icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}
@media screen and (max-width: 749px) {
  quick-add-modal .product-badge {
    left: 1rem;
  }
}