/**
 * Unified product cards for /shop and /extras — same look and hover behaviour
 * as the phone cards on /telefoon (.smartphone-card in main.css): white card,
 * lift on hover, and a primary -> hover image swap.
 *
 * Markup per card:
 *   <div class="product-card">
 *     <div class="product-img">
 *       <img class="primary-image" src="...">
 *       <img class="hover-image" src="...">   <- optional (enables the swap)
 *     </div>
 *     ... category-tag / h3 / p / price / price-note / buttons ...
 *   </div>
 * A card with no photos uses <div class="icon-placeholder">...</div> instead.
 * Button styles stay per-page (they differ); this file owns the card shell.
 */

.product-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Image frame (square, so square uploads drop straight in) */
.product-card .product-img,
.product-card .icon-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.product-card .icon-placeholder {
  background: #f2f4f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa3af;
  font-size: 14px;
}
.product-card .product-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
/* Hover image sits on top of the primary and fades in on card hover. */
.product-card .product-img .hover-image {
  opacity: 0;
}
.product-card:hover .product-img .primary-image {
  opacity: 0;
}
.product-card:hover .product-img .hover-image {
  opacity: 1;
}

/* Name tile: used instead of a photo (e.g. the GrapheneOS package cards).
   Blue name on the white image frame, in the site font used for the /telefoon
   pricing-table column headers (.name_p). */
.product-card .product-name-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}
.product-card .product-name-tile span {
  color: #165df5;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

/* Text — matches the /telefoon card palette */
.product-card .category-tag {
  font-size: 11px;
  color: #8a94a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.product-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  margin-bottom: 10px;
}
.product-card p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 12px;
  flex-grow: 1;
}
.product-card .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #165df5;
  margin-bottom: 2px;
}
.product-card .price-note {
  font-size: 11px;
  color: #888;
  margin-bottom: 15px;
}
.product-card .product-warning {
  color: #b26a00;
  background: rgba(255, 152, 0, 0.12);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 15px;
  flex-grow: 0;
}