/**
 * Skeleton minimal des miniatures produit affichées pendant le chargement différé
 * La structure HTML reprend celle des miniatures PrestaShop (catalog/_partials/productlist.tpl)
 * afin d'hériter de la grille et des marges du thème
 */

.nkmprestashopconnector-skeleton .nkmprestashopconnector-skeleton-block {
  display: block;
  background-color: #ececec;
  border-radius: 4px;
  animation: nkmprestashopconnector-skeleton-pulse 1.5s ease-in-out infinite;
}

.nkmprestashopconnector-skeleton .nkmprestashopconnector-skeleton-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

.nkmprestashopconnector-skeleton .nkmprestashopconnector-skeleton-title {
  width: 80%;
  height: 1em;
  margin: 0 auto;
}

.nkmprestashopconnector-skeleton .nkmprestashopconnector-skeleton-price {
  width: 40%;
  height: 1em;
  margin: 0 auto;
}

@keyframes nkmprestashopconnector-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nkmprestashopconnector-skeleton .nkmprestashopconnector-skeleton-block {
    animation: none;
  }
}