/* product-data.css - 動態載入骨架屏脈動動畫 (對齊 Version A 設計效果) */

.prod-card.is-skeleton,
.article-card.is-skeleton {
  pointer-events: none !important;
  user-select: none !important;
}

.prod-card.is-skeleton .prod-card__img,
.prod-card.is-skeleton .prod-card__shop,
.prod-card.is-skeleton .prod-card__name,
.prod-card.is-skeleton .prod-card__price,
.article-card.is-skeleton .article-card__img,
.article-card.is-skeleton .article-card__title,
.article-card.is-skeleton .article-card__tag,
.article-card.is-skeleton .article-card__btn {
  background: linear-gradient(90deg, #eeeeee 25%, #dddddd 50%, #eeeeee 75%) !important;
  background-size: 200% 100% !important;
  animation: skeletonPulse 1.5s ease-in-out infinite !important;
  color: transparent !important;
  border-color: transparent !important;
  border-radius: 4px;
}

.prod-card.is-skeleton .prod-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 180px;
}
.prod-card.is-skeleton .prod-card__shop {
  display: block;
  width: 50%;
  height: 14px;
  margin-top: 10px;
}
.prod-card.is-skeleton .prod-card__name {
  display: block;
  width: 85%;
  height: 18px;
  margin-top: 8px;
}
.prod-card.is-skeleton .prod-card__price {
  display: block;
  width: 35%;
  height: 16px;
  margin-top: 8px;
}

.article-card.is-skeleton .article-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 160px;
}
.article-card.is-skeleton .article-card__title {
  display: block;
  width: 80%;
  height: 20px;
  margin-top: 10px;
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}