/* Equal image frames and title rows for product-page recommendations only. */
.related-products .eu-related-card {
  overflow: hidden;
  border: 1px solid #e5ece7;
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.related-products .eu-related-image {
  aspect-ratio: 5 / 4;
  background: #f4f7f5;
  overflow: hidden;
}
.related-products .eu-related-image a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.related-products .eu-related-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.related-products .eu-related-card .product-content {
  padding: 18px 14px;
  background: #fff;
}
.related-products .eu-related-card .product-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  height: 4.2em;
}
.related-products .eu-related-card .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.related-products .eu-related-card:hover,
.related-products .eu-related-card:focus-within {
  border-color: #a7d9af;
  box-shadow: 0 5px 16px rgba(18, 59, 43, .07);
}
@media (prefers-reduced-motion: reduce) {
  .related-products .eu-related-card { transition: none; }
}

/* Keep touch controls visible below the cards, clear of the product image. */
@media (max-width: 767px) {
  .related-products #productSlide { padding-bottom: 64px; }
  .related-products #productSlide .slick-arrow,
  .related-products #productSlide .slick-arrow:hover {
    position: absolute;
    top: auto;
    bottom: 4px;
    left: calc(50% - 54px);
    right: auto;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #2db742;
    border-radius: 50%;
    background: #fff;
    color: #239a35;
    opacity: 1;
    visibility: visible;
    line-height: 42px;
  }
  .related-products #productSlide .slick-next,
  .related-products #productSlide .slick-next:hover { left: calc(50% + 10px); }
  .related-products #productSlide .slick-arrow i { display: none; }
  .related-products #productSlide .slick-prev::before { content: "\2190"; }
  .related-products #productSlide .slick-next::before { content: "\2192"; }
  .related-products #productSlide .slick-arrow::before { font: 22px/42px Arial, sans-serif; }
  .related-products #productSlide .slick-arrow:focus-visible { outline: 2px solid #123b43; outline-offset: 3px; }
}