/* ReflectiveCard-inspired surface for existing product cards. */
.productGrid > .product {
  --reflect-x: 50%;
  --reflect-y: 50%;
  --reflect-tilt-x: 0deg;
  --reflect-tilt-y: 0deg;
  isolation: isolate;
  background: linear-gradient(145deg, #fff 0%, #f5f7fa 48%, #e9eef4 100%);
  border-color: #d9e2ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 17px rgba(17,38,67,.055);
  transform: perspective(900px) rotateX(var(--reflect-tilt-x)) rotateY(var(--reflect-tilt-y));
  transition: transform .36s cubic-bezier(.2,.75,.3,1), border-color .36s ease, box-shadow .36s ease;
}
.productGrid > .product:hover,
.siteVisual .productGrid > .product:hover,
.seoCategoryCard.product:hover {
  border-color: #b8cde3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 15px 30px rgba(23,61,105,.13);
  transform: perspective(900px) translateY(-2px) rotateX(var(--reflect-tilt-x)) rotateY(var(--reflect-tilt-y));
}
.productGrid > .product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--reflect-x) var(--reflect-y), rgba(255,255,255,.82), rgba(255,255,255,.12) 30%, transparent 57%),
    linear-gradient(112deg, transparent 20%, rgba(132,163,195,.10) 29%, rgba(255,255,255,.46) 38%, rgba(123,160,196,.08) 49%, transparent 62%);
  opacity: .24;
  transition: opacity .34s ease;
}
.productGrid > .product.is-reflecting::before { opacity: .68; }
.productGrid > .product::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), inset 0 2px 0 rgba(255,255,255,.54), inset 0 -1px 0 rgba(87,119,151,.12);
}
.productGrid > .product .pic {
  border: 1px solid rgba(126,157,188,.16);
  background: linear-gradient(155deg, #fff 0%, #f3f6fa 67%, #e4ebf3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.productGrid > .product .heart,
.productGrid > .product .cardCartButton { z-index: 4; }
.productGrid > .product.is-reflecting { will-change: transform; }

html[data-theme="dark"] .productGrid > .product {
  background: linear-gradient(145deg, #1c2a3d 0%, #142236 50%, #0d1b2c 100%);
  border-color: #324c67;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 7px 18px rgba(0,0,0,.22);
}
html[data-theme="dark"] .productGrid > .product:hover {
  border-color: #5c82ab;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 32px rgba(0,0,0,.28);
}
html[data-theme="dark"] .productGrid > .product::before {
  background:
    radial-gradient(circle at var(--reflect-x) var(--reflect-y), rgba(220,239,255,.42), rgba(70,144,222,.13) 33%, transparent 60%),
    linear-gradient(112deg, transparent 20%, rgba(76,132,196,.08) 29%, rgba(219,239,255,.20) 38%, rgba(58,132,206,.07) 49%, transparent 62%);
}
html[data-theme="dark"] .productGrid > .product::after {
  box-shadow: inset 0 0 0 1px rgba(174,210,243,.14), inset 0 2px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.18);
}
html[data-theme="dark"] .productGrid > .product .pic {
  background: linear-gradient(155deg, #24354c, #16253a);
  border-color: rgba(174,210,243,.12);
}

@media (hover:none) {
  .productGrid > .product,
  .productGrid > .product:hover,
  .siteVisual .productGrid > .product:hover { transform: none; }
  .productGrid > .product::before { opacity: .22; }
}
@media (prefers-reduced-motion:reduce) {
  .productGrid > .product,
  .productGrid > .product:hover,
  .siteVisual .productGrid > .product:hover,
  .productGrid > .product::before { transition: none !important; transform: none !important; }
  .productGrid > .product.is-reflecting::before { opacity: .24; }
}