/* =========================================================
   PRODUCT.CSS — card microinteractions
   Base card layout lives in style.css.
   This file adds premium hover polish.
========================================================= */

/* Card lift + shine sweep */
.product-card::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -120%;
  width: 60%;
  height: 180%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.10),
    transparent
  );
  transform: rotate(18deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: 2;
}

.product-card:hover::before {
  left: 160%;
}

/* Subtle background radial on hover */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 55%),
    radial-gradient(circle at bottom, rgba(100, 255, 180, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.product-card:hover::after {
  opacity: 1;
}

/* Price emphasis on hover */
.product-card:hover .new-price {
  text-shadow: 0 0 16px rgba(100, 255, 180, 0.35);
}

.product-card:hover .old-price {
  opacity: 0.65;
}

/* Focus ring for a11y */
.product-card:focus-within {
  outline: 2px solid rgba(100, 255, 180, 0.45);
  outline-offset: 3px;
}

/* Deep shadow under product image on hover */
.product-image-wrap img {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
  transition: transform 0.5s ease, filter 0.3s ease;
}

.product-card:hover .product-image-wrap img {
  filter:
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 14px rgba(100, 255, 180, 0.15));
}

/* Sticky filter bar with proper blur */
.filter-bar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Catalog extra bottom padding */
.catalog {
  padding-bottom: 100px;
}