/* ==================================================================
   Medicom Homepage — Featured Products image fit (UI only)
   Ownership: body.medicom .featured-area:not(.related-product-area) …

   HexFashion = quality benchmark only (not copied).
   Engineering principles:
     • Equal square stage → equal visual weight across aspect ratios
     • Quiet clinical mat (Medicom identity) — supports product, not empty field
     • Minimal inset; image FILLS inset box; object-fit: contain
     • Action icons stay Medicom hover overlays (not redesigned / not clipped)

   Does NOT affect: shop PLP, related products, Core, Plugins, other themes.
   ================================================================== */

body.medicom .featured-area:not(.related-product-area):not(.related-products-area) {
  --md-card-ratio: 1 / 1;
  --md-card-inset: 0.35rem;
  /* Quiet cool mat — Medicom clinical identity */
  --md-card-stage: #f3f5f7;
  --md-card-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --md-card-radius: 16px; /* matches theme .global-card-thumb a */
}

/* ------------------------------------------------------------------
   Slick slide / card column height consistency
   ------------------------------------------------------------------ */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .slick-slider-items {
  height: 100%;
}

body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .slick-slider-items .global-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ------------------------------------------------------------------
   Thumb shell — relative host for badge + hover action icons
   Aspect / clip belong on the image link only so icons are not cropped.
   ------------------------------------------------------------------ */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  background: transparent !important;
  isolation: isolate;
  z-index: 2 !important;
}

/* Equal square stage — neutralize theme max-height: 344px clamp */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb > a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--md-card-ratio) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: var(--md-card-radius) !important;
  background: var(--md-card-stage) !important;
  isolation: isolate;
  z-index: 1 !important;
}

/* Kill legacy theme inline-block / max-height on any nested link stage */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb a {
  display: block !important;
  max-height: none !important;
}

/*
  Fill the inset rectangle, then contain the bitmap.
  Deterministic frame occupancy across portrait / landscape / square.
*/
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb img,
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb > a img {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: var(--md-card-inset) !important;
  display: block !important;
  width: calc(100% - (var(--md-card-inset) * 2)) !important;
  height: calc(100% - (var(--md-card-inset) * 2)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: opacity 0.28s var(--md-card-ease) !important;
}

body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card:hover .global-card-thumb img,
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card:hover .global-card-thumb > a img {
  transform: none !important;
  filter: none !important;
}

/* Badges — peripheral on the stage */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb-badge {
  z-index: 5 !important;
}

/* ------------------------------------------------------------------
   Action icons — keep Medicom hover overlay language (do not redesign)
   Ensure they sit above the image stage and remain fully clickable.
   ------------------------------------------------------------------ */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-thumb-icons {
  z-index: 6 !important;
  pointer-events: auto !important;
}

body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card:hover .global-card-thumb-icons,
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card:focus-within .global-card-thumb-icons {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Contents stay below the media stack */
body.medicom .featured-area:not(.related-product-area):not(.related-products-area) .global-card-contents {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 767.98px) {
  body.medicom .featured-area:not(.related-product-area):not(.related-products-area) {
    --md-card-inset: 0.28rem;
  }
}