/* Product entrance depth: the button grid remains the stable hit area. */
.products .product-card.has-product-depth {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  background: #29363b;
  --product-tilt-x: 0deg;
  --product-tilt-y: 0deg;
  --product-lift: 0px;
  --product-light-x: 50%;
  --product-light-y: 35%;
  --product-light-strength: 0;
}

.products .product-card.has-product-depth > .product-surface {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  padding: inherit;
  isolation: isolate;
  transform-style: preserve-3d;
  transform-origin: 50% 65%;
  transform: translateZ(var(--product-lift)) rotateX(var(--product-tilt-x)) rotateY(var(--product-tilt-y));
  transition: transform .48s cubic-bezier(.22, 1, .36, 1), box-shadow .48s ease;
  backface-visibility: hidden;
  box-shadow: 0 0 0 1px #dbe1dd55, 0 2px 0 #81909175;
}

.products .product-card.has-product-depth[data-depth-active] > .product-surface {
  transition-duration: .12s;
  box-shadow: 0 0 0 1px #ecf0e6a0, 1px 4px 0 #7c8a8f, 0 12px 24px #0b141b3d;
  will-change: transform;
}

.products .product-card.has-product-depth[data-depth-entering] > .product-surface {
  will-change: transform;
}

.products .product-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--product-light-x) var(--product-light-y), #f8fff149 0, #ffffff12 32%, transparent 70%);
  opacity: var(--product-light-strength);
  transition: opacity .35s ease;
}

.products .product-surface > img {
  border-radius: 0;
  pointer-events: none;
}

.products .product-surface > .product-number,
.products .product-surface > .product-bottom {
  position: relative;
  z-index: 2;
}

.products .product-card.has-product-depth:focus-visible {
  outline-offset: -4px;
}

@media (max-width: 800px) {
  .products .product-card.has-product-depth { perspective: 800px; }
}

@media (prefers-reduced-motion: reduce) {
  .products .product-card.has-product-depth > .product-surface {
    transform: none !important;
    transition: none;
    box-shadow: none;
    will-change: auto;
  }
  .products .product-surface::after { display: none; }
}