/* Product card FX - additive. Targets cards: <a> whose direct child is .thumbnail-holder */
a.pfx{position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background-color .35s;will-change:transform;border-radius:12px}
a.pfx .thumbnail{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
a.pfx .pfx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;z-index:2}
a.pfx .pfx-chip{position:absolute;left:50%;bottom:8px;transform:translate(-50%,12px);opacity:0;transition:all .3s;pointer-events:none;
  background:#111;color:#fff;font-size:11px;padding:5px 12px;border-radius:999px;white-space:nowrap;z-index:3}
@media (hover:hover) and (pointer:fine){
  a.pfx:hover{box-shadow:0 18px 40px -12px rgba(0,0,0,.28);z-index:5}
  a.pfx:hover .thumbnail{transform:scale(1.1) translateZ(30px)}
  a.pfx:hover .pfx-glow{opacity:1}
  a.pfx:hover .pfx-chip{opacity:1;transform:translate(-50%,0)}
}
/* touch: soft press */
@media (hover:none){
  a.pfx:active{transform:scale(.96);box-shadow:0 8px 20px -10px rgba(0,0,0,.25)}
  a.pfx:active .thumbnail{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  a.pfx,a.pfx .thumbnail,a.pfx .pfx-glow,a.pfx .pfx-chip{transition:none!important;transform:none!important}
}