/* Homepage Product Highlights: skeleton until CMS API hydrates the grid. */

html.if-home-highlights-pending [data-intrafit='home-product-highlights'] {
  visibility: visible;
  min-height: 16rem;
}

html.if-home-highlights-ready [data-intrafit='home-product-highlights'] {
  visibility: visible;
}

html.if-home-highlights-pending [data-intrafit='home-product-highlights'] .animate-pulse {
  animation: if-home-highlights-shimmer 1.4s ease-in-out infinite;
}

@keyframes if-home-highlights-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Keep Product Highlights image slots square so tall product photos
   cannot push the KEY FEATURES divider out of horizontal alignment. */
[data-intrafit='home-product-highlights'] .aspect-square {
  overflow: hidden;
  min-height: 0;
  flex-shrink: 0;
}

[data-intrafit='home-product-highlights'] .aspect-square > img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* CMS product detail shell: never flash template/demo content before API hydrate. */

html.if-product-pending body[data-cms-product-shell] main {
  visibility: hidden !important;
  opacity: 0 !important;
  min-height: 55vh;
  pointer-events: none;
}

html.if-product-ready body[data-cms-product-shell] main {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}