#product-add-popup {
  --max-width: 100vw;

  @media (min-width: 769px) {
    --max-width: 85vw;
  }

  .modal__outer {
    @media (max-width: 1024px) {
      padding: 0;
    }
  }

  .modal__wrapper {
    align-items: end;

    @media (min-width: 1024px) {
      align-items: center;
    }
  }

  .modal__info {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--gutter);
    max-height: 90vh;

    @media (min-width: 1024px) {
      max-height: unset;
      max-width: var(--max-width);
      padding: 41px 38px;
      border-radius: var(--base-radius);
    }
  }

  .modal__info__title:not(:empty),
  .modal__info__title--custom:not(:empty),
  .modal__info__text:not(:empty) {
    margin: 0 0 1rem;
  }

  .modal__info__title,
  .modal__info__title--custom {
    font-weight: var(--FONT-WEIGHT-HEADING);

    strong,
    b {
      font-weight: var(--FONT-WEIGHT-BODY-BOLD);
    }
  }

  .modal__info__title,
  .modal__info__title--custom,
  .modal__info__text {
    width: calc(100% - 40px);
  }

  .modal__info__title {
    @media (max-width: 769px) {
      font-size: 18px;
    }
  }

  .close {
    --icon-size: 40px;
    position: absolute;
    right: var(--gutter);
    top: var(--gutter);

    @media (min-width: 769px) {
      right: 38px;
      top: 41px;
    }
  }

  .modal__info__buttons {
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;

    .btn {
      flex: 1 1 auto;

      @media (min-width: 769px) {
        flex: unset;
      }
    }
  }

  .related__title {
    margin: 0 0 0.5em;
    text-transform: var(--FONT-UPPERCASE-SUBHEADING);
    font-family: var(--FONT-STACK-BODY);
    font-weight: var(--FONT-WEIGHT-BODY-BOLD);
    color: var(--theme-color-black-light);
    @media (max-width: 769px) {
      font-size: 18px;
    }
  }

  .related__products,
  .grid-outer {
    overflow: visible;
  }

  .related__wrapper {
    padding: var(--gutter) var(--outer);
    border-radius: var(--base-radius);
    transform: translate(calc(var(--gutter) * -1));
    width: calc(100% + var(--gutter) * 2);

    @media (min-width: 769px) {
      transform: unset;
      width: auto;
    }

    @media (max-width: 1024px) {
      margin: 0;
    }

    .related__products {
      height: calc(65vh - var(--PB, 0px) - var(--gutter));
      overflow-y: auto;
      border-radius: calc(var(--base-radius) / 2);
    }
  }

  .grid--mobile-slider .grid-item {
    @media (max-width: 1024px) {
      width: 100%;
    }
  }

  .grid--slider-disabled {
    width: 100%;
    --gap: 1rem;
    justify-content: start;

    @media (max-width: 1024px) {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }

  .product-item {
    display: grid;
    grid-template-columns: 40% auto;
    box-shadow: 0 0 10px 0 rgb(from var(--text) r g b / 0.2);
    border-radius: calc(var(--base-radius) / 2);

    @media (min-width: 769px) {
      grid-template-columns: 30% 1fr;
    }

    .product-item__image {
      min-width: 130px;
      height: max-content;
      aspect-ratio: 1 / 1;
      padding: 0;

      .btn--wishlist {
        display: none;
      }

      @media (max-width: 769px) {
        .badge-box-container{
          --FONT-SIZE-BADGE: 7px;
        }
      }
    }

    .product-information {
      width: 100%;
    }

    .product-item__info {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-between;
      align-items: stretch;

      .product-link {
        height: fit-content;
        min-height: 70px;

        *:not(.product-item__title, .product-item__actions) {
          display: none;
        }
      }

      .product-item__title,
      .price .new-price {
        font-weight: var(--FONT-WEIGHT-BOLD);
        font-size: var(--font-body-medium);
      }

      .product-item__title {
        @media (min-width: 769px) {
          font-size: 18px;
        }
      }

      .price .new-price {
        @media (min-width: 769px) {
          font-size: 20px;
        }
      }

      .product-item__actions {
        @media (max-width: 769px) {
          flex-direction: column;
          align-items: start;
          gap: 8px;
        }

        .btn {
          @media (max-width: 769px) {
            width: 50vw;
          }
        }
      }
    }
  }

  .discover {
    display: none;
  }

  quick-add-product {
    display: block;
  }
}