/* ================= GLASSY CARD EFFECT ================= */
.store-products-section .product-card {
  background: rgba(255, 255, 255, 0.15);
  /* Semi‑transparent white */
  backdrop-filter: blur(12px);
  /* Frosted glass blur */
  -webkit-backdrop-filter: blur(12px);
  /* Safari support */

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  /* Match your existing radius */

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease;
}

/* Hover – lift and intensify the glass effect */
.store-products-section .product-card:hover {
  transform: translateY(-8px);

  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Optional: inner content adjustments for readability */
.store-products-section .product-card .card-body {
  color: #fff;
  /* Ensure text is readable on glass background */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ================= DARK BACKGROUND ADAPTATION ================= */
/* If your section has a dark background, use a darker glass variant */
.store-products-section[style*="dark"] .product-card,
.store-products-section.bg-dark .product-card {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.store-products-section[style*="dark"] .product-card:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 991px) {
  .store-products-section .product-card {
    backdrop-filter: blur(8px);
    /* Slightly less blur for performance */
    -webkit-backdrop-filter: blur(8px);
  }

  .store-products-section .product-card:hover {
    transform: translateY(-4px);
    /* Gentler lift on mobile */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ================= ACCESSIBILITY (reduced motion) ================= */
@media (prefers-reduced-motion: reduce) {

  .store-products-section .product-card,
  .store-products-section .product-card:hover {
    transition: none;
    transform: none;
  }
}