.complete-the-look
  .product-form__buttons
  .product-form__submit.button-disabled {
  cursor: not-allowed;
  background-color: var(--color-gray-1) !important;
  color: var(--color-white-1) !important;
}
.complete-the-look
  .product-form__buttons
  .product-form__submit.button-disabled::after {
  box-shadow: unset;
}
.complete-the-look__products .product-form__input--pill input.active + label{
  background-color: rgba(var(--color-button-text));
  color: rgb(var(--color-button));
}
.complete-the-look .product-form__input--pill input:not(.active) + label{
  background-color: rgb(var(--color-button)) !important;
  color: rgba(var(--color-button-text)) !important;
}
.complete-the-look .product-form__input--pill input.disabled + label{
  color: rgba(var(--color-light), 1) !important;
}
.complete-the-look .product-form__submit:disabled span {
  opacity: 1;
}
.complete-the-look .product-form__submit:not(.disabled) button {
  cursor: pointer;
  background: rgb(var(--color-foreground)) !important;
  color: rgb(var(--color-background)) !important;
}
.complete-the-look {
  .complete-the-look__heading + * {
    margin-top: 3.2rem;
  }

  .complete-the-look__content {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: 1280px) {
      flex-direction: row;
      height: 68.8rem;
    }

    .complete-the-look__heading-image {
      flex: 0 0 33%;

      img {
        object-fit: cover;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;

        @media screen and (min-width: 1280px) {
          height: 100%;
          aspect-ratio: unset;
        }
      }
    }

    &,
    .complete-the-look__products {
      gap: 0.8rem;
      grid-template-rows: repeat(2, calc(50% - 0.4rem));

      @media screen and (min-width: 744px) {
        gap: 1.6rem;
        grid-template-rows: repeat(2, calc(50% - 0.8rem));
      }

      @media screen and (min-width: 1280px) {
        gap: 2.4rem;
        grid-template-rows: repeat(2, calc(50% - 1.2rem));
      }
    }

    .complete-the-look__products {
      flex: 0 0 66%;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(2, minmax(10px, 1fr));
      max-height: 68.8rem;

      .complete-the-look__product-container {
        position: relative;
        background-color: var(--color-white-3);
        display: flex;
        flex-direction: column;

        &.complete-the-look__product-container--row-span-2 {
          grid-row: span 2;
        }

        .complete-the-look__product-image {
          padding: 0 3rem;
          max-height: 75%;
          margin: auto;

          img {
            object-fit: contain;
            width: 100%;
            height: 100%;
          }
        }

        .complete-the-look__product-text-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.8rem;
          gap: 1.6rem;

          @media screen and (min-width: 744px) {
            padding: 1.6rem;
          }

          h3,
          .price {
            margin: 0;
          }

          .price.price--on-sale .price-item--regular {
            color: var(--color-gray-1);
          }
        }

        .complete-the-look__quick-add-dialog {
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;

          display: flex;
          align-items: end;
          padding: 0;
          border: 0;
          background-color: rgba(var(--color-foreground), 0.7);

          .complete-the-look__quick-add-dialog-content {
            flex: 1 1 100%;
            background-color: rgb(var(--color-background), 1);
            padding: 2.4rem 1.6rem;

            @media screen and (min-width: 1280px) {
              padding: 1.6rem 1.6rem 0 1.6rem;
            }

            h3,
            .price {
              margin: 0;
            }

            .complete-the-look__quick-add-dialog-subtitle {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 1.2rem;

              @media screen and (min-width: 1280px) {
                margin-top: 0.8rem;
              }

              .price.price--on-sale .price-item--regular {
                color: var(--color-gray-1);
              }
            }

            variant-selects {
              padding-bottom: 0;
            }

            variant-selects,
            .product-form__submit {
              margin-top: 1.6rem;

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

          &.complete-the-look__quick-add-dialog--desktop {
            position: absolute;
          }

          &.complete-the-look__quick-add-dialog--mobile {
            z-index: 999999;
            position: fixed;
            height: 85vh;


            .complete-the-look__quick-add-dialog-content {
              position: relative;

              .complete-the-look__product-image img {
                max-height: 50vh;
              }
            }
          }
        }

        &:not(:hover) .complete-the-look__quick-add-dialog[open] {
          display: none;
        }

        .button-open-modal,
        .button-close-modal {
          position: absolute;
          top: 0.8rem;
          right: 0.8rem;
          display: flex;
          align-items: center;
          justify-content: center;

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

          background-color: rgb(var(--color-foreground));
          border: none;
          cursor: pointer;
          line-height: 0;
          border-radius: 3rem;
          width: 4rem;
          height: 4rem;

          svg path {
            color: rgb(var(--color-background));
            stroke-width: 1.6;
          }

          &:hover {
            background-color: rgb(var(--color-background));

            svg path {
              color: rgb(var(--color-foreground));
            }
          }
        }
      }
    }
  }
}

.complete-the-look .product-form__submit {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}
.complete-the-look .product-form__submit:hover {
  background: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-foreground));
  color: rgb(var(--color-foreground));
}

.product-form__view-details {
  color: rgba(var(--color-foreground), 1);
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
  padding-right: 0;
  padding-left: 0;
  min-height: 0;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.2rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.complete-the-look__quick-add-dialog-content{
  height: 100%;
  overflow: scroll;
}
body.complete-look-dialog-visible{
  position: relative;
}
body.complete-look-dialog-visible:before{
  z-index: 100;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--currency-popup-overlay);
  display: block;
  opacity: .72;
  position: absolute;
}
@media screen and (min-width: 744px){
  dialog.complete-the-look__quick-add-dialog--mobile {
    height: 95vh!important;
  }
}