/* Product cards: slate-50 well, 82% product, silhouette drop-shadow.
   Requires hero-*.png with edge-white knocked to alpha (JPEG drop-shadow is a rectangle).
   No mix-blend-multiply. PREVIEW until deploy confirm. */

.product-card-media,
.product-main-img-box,
.conn-frame-box,
.pp-img,
.sc-img,
.p-img-wrap,
.prod-card .pc-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: rgba(248, 250, 252, 0.92) !important; /* slate-50/80 */
  border: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
}

.p-img-wrap {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  min-height: 160px !important;
}

.p-img-wrap::before,
.prod-card .pc-media::before,
.product-card-media::before,
.pp-img::before,
.sc-img::before {
  content: none !important;
  display: none !important;
}

.product-card-media img,
.product-main-img-box img,
.conn-frame-box img,
.pp-img img,
.sc-img img,
.p-img-wrap img,
.p-img,
.prod-card .pc-media img,
.prod-card img.pc-media-img {
  position: relative !important;
  z-index: 1 !important;
  width: 82% !important;
  height: 82% !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.12)) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.p-card:hover .p-img,
.p-img-wrap:hover img,
.prod-card:hover .pc-media img,
.product-card-media:hover img,
.pp-img:hover img,
.sc-img:hover img {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18)) !important;
}

.p-img-badge {
  z-index: 3 !important;
}

.gallery-main,
.prod-gallery .gallery-main,
.prod-layout .gallery-main {
  background: #fff !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 640px) {
  .p-img-wrap { min-height: 120px !important; padding: 0.75rem !important; }
}