/* ============================================================
   amazon-products.css — Live product image & price styles
   Add <link rel="stylesheet" href="/css/amazon-products.css">
   to any page that uses Amazon product enrichment
   ============================================================ */

/* ── LOADING SKELETON ANIMATION ── */
@keyframes amzn-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.amzn-loading {
  background: linear-gradient(90deg, #f0ece4 25%, #e4e0d8 50%, #f0ece4 75%);
  background-size: 800px 100%;
  animation: amzn-shimmer 1.4s infinite linear;
  color: transparent !important;
  border-radius: 4px;
  min-height: 20px;
  pointer-events: none;
}

/* Card thumb loading state */
.card-thumb.amzn-loading,
.feat-card-thumb.amzn-loading {
  min-height: 140px;
}

/* ── ENRICHED CARD PRODUCT IMAGE ── */
.amzn-enriched .card-thumb,
.amzn-enriched .feat-card-thumb {
  background: #ffffff !important;
  padding: 0;
}

.amzn-enriched .card-thumb img,
.amzn-enriched .feat-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.3s ease;
}

.amzn-enriched:hover .card-thumb img,
.amzn-enriched:hover .feat-card-thumb img {
  transform: scale(1.04);
}

/* ── PRODUCT IMAGE SLOT (for review/roundup pages) ── */
.product-image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.product-image-slot img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-image-slot img:hover {
  transform: scale(1.03);
}

/* ── PRICE DISPLAY ── */
.price-amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--forest);
}

.price-was {
  font-size: 0.9rem;
  text-decoration: line-through;
  opacity: 0.5;
  font-family: var(--font-mono);
  margin-left: 4px;
}

.prime-badge {
  display: inline-block;
  background: #00A8E0;
  color: white;
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 6px;
}

/* ── PRODUCT CARD WITH IMAGE SLOT ── */
.product-card-with-image {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.product-card-with-image .product-image-slot {
  min-height: 180px;
  position: sticky;
  top: 100px;
}

@media (max-width: 640px) {
  .product-card-with-image {
    grid-template-columns: 1fr;
  }
  .product-card-with-image .product-image-slot {
    position: static;
    min-height: 160px;
  }
}

/* ── AMAZON ATTRIBUTION (required by TOS) ── */
.amazon-attribution {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--stone);
  text-align: center;
  margin-top: 6px;
  opacity: 0.6;
}