/* ========================================================================== 
   Veridian Health 2.6.24 — Featured Collection equal-size product cards
   Scope: homepage Featured Collection Owl carousel only.

   Goals:
   - Every visible product card has the same height on desktop and mobile.
   - Every product image uses the same square media frame.
   - Product artwork remains proportional and fully visible (no stretching/crop).
   - Existing Owl swipe/navigation behaviour remains unchanged.
   ========================================================================== */

/* Owl 1.x normally floats each item, which allows different content heights.
   A flex wrapper keeps the carousel geometry intact while stretching all items
   to the height of the tallest card in the current product set. */
.featured-products .product-slider.owl-carousel .owl-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

.featured-products .product-slider.owl-carousel .owl-wrapper::after {
  display: none !important;
  content: none !important;
}

.featured-products .product-slider.owl-carousel .owl-item {
  display: flex !important;
  float: none !important;
  height: auto !important;
  align-self: stretch !important;
}

.featured-products .product-slider.owl-carousel .owl-item > .product-item,
.featured-products .product-slider.owl-carousel .product-item > .product-miniature,
.featured-products .product-slider.owl-carousel .product-miniature > .thumbnail-container {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.featured-products .product-slider.owl-carousel .owl-item > .product-item,
.featured-products .product-slider.owl-carousel .product-item > .product-miniature {
  flex-direction: column !important;
}

.featured-products .product-slider.owl-carousel .product-miniature > .thumbnail-container {
  flex-direction: column !important;
}

/* Fixed-ratio image stage: source images may have different dimensions, but
   their displayed media box is identical at every responsive card width. */
.featured-products .product-slider.owl-carousel .product-miniature .thumbnail-top {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

.featured-products .product-slider.owl-carousel .product-miniature .thumbnail-container .thumbnail-top > a.thumbnail.product-thumbnail,
.featured-products .product-slider.owl-carousel .product-miniature .thumbnail-container .thumbnail-top > .product-thumbnail {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #fff !important;
}

.featured-products .product-slider.owl-carousel .product-miniature .thumbnail-container .thumbnail-top > .product-thumbnail picture {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.featured-products .product-slider.owl-carousel .product-miniature .thumbnail-container .thumbnail-top > .product-thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: clamp(8px, 2.2vw, 14px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Let the details section consume the remaining equalized card height. */
.featured-products .product-slider.owl-carousel .product-miniature .product-description {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
}

/* Reserve the same title lane even when one product name is shorter. */
.featured-products .product-slider.owl-carousel .product-miniature .product-title {
  min-height: 2.8em !important;
}

/* Keep the purchase action aligned at the bottom of every equal-height card. */
.featured-products .product-slider.owl-carousel .product-miniature .vh-product-card-actions {
  margin-top: auto !important;
}

@media (max-width: 767.98px) {
  .featured-products .product-slider.owl-carousel .product-miniature .thumbnail-container .thumbnail-top > .product-thumbnail img {
    padding: 8px !important;
  }
}