.click-and-collect {
  &__product {
    margin: 20px 0 30px;

    .product-card-preview {
      margin-bottom: 20px;

      .card__inner {
        padding: 0;
        border: 0;
      }
    }

    // sass-lint:disable no-important
    .product-card__title_link {
      display: none !important;
    }

    .product-card__title_static {
      display: block !important;

      &:hover {
        color: $gray-dark;
      }
    }
  }

  &-toggler {
    margin-bottom: 10px;
    min-width: 150px;
  }

  &__locator {
    .form-row__error {
      padding: 0;
    }

    .map-container {
      margin: 0;
      display: none;
    }

    &-town {
      .tbx {
        margin-right: 0;
      }

      .input-group-append {
        .btn {
          width: 46px;
        }
      }
    }
  }

  &__pagination {
    padding: 20px;

    .btn {
      display: none;
    }
  }
}

@include media-breakpoint-up(lg) {
  .click-and-collect {
    &__product {
      .product-card-preview {
        @include make-col(2, 6);
      }
    }

    &__locator {
      @include make-col(4, 6);
    }

    &__locator-town {
      width: auto;

      input {
        width: 226px;
        margin-right: 20px;
      }
    }

    &__locator-checkbox {
      width: 100%;
    }
  }
}

@include media-breakpoint-only(lg) {
  .click-and-collect {
    &__description {
      // Wrapper width equal to 'xl' bp - to correlate with js width calculations for swiper elements
      width: 730px;
      margin: auto;

      .modal-box__inner-columns {
        @include make-col(6, 8);
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .click-and-collect {
    &__swiper {
      padding: 30px 0;
      background: $gray-bg;
    }

    &__product {
      @include make-row;

      .product-card-preview {
        @include make-col-ready;
      }

      // sass-lint:disable no-important
      .card__img-wrap_link {
        display: none !important;
      }

      .card__img-wrap_static {
        display: block !important;
      }
    }

    &__locator {
      @include make-col-ready;
    }
  }
}

@include media-breakpoint-only(md) {
  .click-and-collect {
    &__product {
      .product-card-preview {
        @include make-col(3, 10);
      }
    }

    &__locator {
      @include make-col(7, 10);
    }

    &__locator-town {
      @include make-col(5, 7);
    }

    &__locator-btn {
      @include make-col(2, 7);
    }
  }
}

@include media-breakpoint-down(md) {
  .click-and-collect {
    &__locator-btn {
      @include make-col-ready;
      padding-left: 0;
    }
  }
}

@include media-breakpoint-down(sm) {
  .click-and-collect {
    &__swiper {
      .swiper-wrapper {
        display: block;
      }
    }

    &__product {
      .product-card-preview {
        @include cc-view;
      }
    }

    &__locator-btn {
      margin-top: 20px;
    }

    &__pagination {
      .sort-products-list__section {
        display: none;
      }

      .btn {
        display: block;
        margin: 0 auto;
      }
    }
  }
}