/*Custom CSS to apply to Meilisearch enabled websites*/

/* Make the slide height match the image height */
.swiper-slide {
  height: auto !important;
  display: block !important;
  padding: 0 !important;
}

/* Ensure the wrapper doesn't force a height */
.swiper-wrapper {
  height: auto !important;
}

/* Make the image the layout driver */
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  /* ensures no cropping */
  object-position: top;
  /* THIS removes space at the top */
}

/* Card effect on normal product hover */
/* Card */
.ais-Hits-item,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: 0;
  box-shadow: none;
  border-radius: 30px;
  overflow: hidden;
  transition: box-shadow .12s ease, transform .12s ease;
  padding: 1rem;
}

.ais-Hits-item:hover,
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important;
  transform: translateY(-1px) !important;
}
@media screen and (max-width: 544px) {
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    border-radius: 0;
  }

  .woocommerce ul.products li.product:hover,
  .woocommerce-page ul.products li.product:hover {
    box-shadow: none !important;
    transform: none !important;
  }
}