/* category cards */
.cat{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.mo-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,77,94,.3),transparent 60%);z-index:0}
.cat:hover .mo-spot,.card:hover .mo-spot{opacity:1}
.cat:hover{box-shadow:0 34px 70px -34px rgba(200,50,60,.75),inset 0 0 0 1px rgba(255,77,94,.55)}
.cat h3{transition:transform .35s var(--mo-ease)}
.cat:hover h3{transform:translateX(4px)}

/* product cards */
.card{position:relative}
.card .media{position:relative;overflow:hidden}
.card .media img{transition:transform .7s var(--mo-ease),filter .5s}
.card:hover .media img{transform:translateY(-8px) scale(1.07) rotate(-2deg);filter:drop-shadow(0 26px 26px rgba(200,50,60,.35))}
.card .media .mo-spot{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),transparent 62%);mix-blend-mode:soft-light}
.card .mo-sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);transition:none}
.card:hover .mo-sweep{transform:translateX(120%);transition:transform .9s var(--mo-ease)}
.card:hover{box-shadow:0 34px 70px -36px rgba(10,16,17,.5),0 0 0 1px rgba(200,50,60,.35)}
.card .add{position:relative;overflow:hidden;transition:transform .25s var(--mo-ease),background .25s,box-shadow .25s}
.card .add:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(200,50,60,.75);background:var(--mo-red)}
.card .add svg{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card .add:hover svg{transform:translateX(-2px) rotate(-12deg) scale(1.15)}
.card .sizes>*{transition:transform .2s var(--mo-ease)}
.card .sizes>*:hover{transform:translateY(-2px)}