.checkout-header {
  @include make-col-ready;
  padding: 0 0 25px;

  &__continue {
    display: block;
    font-size: 1rem;
    color: $gray-dark;
    margin-bottom: 20px;
  }

  &__heading {
    display: flex;
    color: $blue-dark;
    font-weight: 500;
  }

  &__logo {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid $blue-dark;
    border-radius: 50%;
    margin-right: 10px;

    & .icon {
      font-size: 1.125rem;
    }
  }

  &__title {
    font-size: 1.625rem;
  }

  &__promo {
    @include make-col-ready;
    @include make-col(12);
    min-height: 0;
    padding: 0;

    & .p-promotion:last-child {
      margin-bottom: 20px;
    }
  }

  &--instore {
    flex-direction: column;
    align-items: center;

    .add-list-id {
      margin-top: 25px;
      width: 100%;

      &__form {
        margin-top: 0;
        flex-direction: column;

        .btn--add-to-basket {
          margin-left: 0;
          margin-top: 10px;
          width: 100%;
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .checkout-header {
    margin-top: 0;
    display: flex;
    justify-content: center;
    min-width: 100%;
    border-bottom: 1px solid $gray;
    margin-bottom: 20px;

    &__continue {
      position: absolute;
      left: 0;
      top: 0;
    }

    &__heading {
      align-items: center;
    }

    &__title {
      font-size: 2.1875rem;
    }

    &__logo {
      & .icon {
        font-size: 1.125rem;
      }
    }

    &--instore {
      padding-bottom: 30px;

      .add-list-id {
        margin-top: 30px;

        &__form {
          max-width: 405px;
          flex-direction: row;

          .btn--add-to-basket {
            margin-left: 10px;
            margin-top: 0;
            width: auto;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .checkout-header--instore {
    .add-list-id__form {
      .btn--add-to-basket {
        min-width: 198px;
      }
    }
  }
}