#products .card{--ambient-alpha:0;--ambient-play:paused;--frost-top:rgba(246,246,243,.40);--frost-body:rgba(246,246,243,.62);--frost-bottom:rgba(246,246,243,.56);border-color:color-mix(in srgb,var(--text) 14%,transparent);box-shadow:none}
#products .card::before{inset:-48px;z-index:0;background:var(--product-image) center/cover no-repeat;filter:blur(32px) saturate(1.8) brightness(1.5);opacity:var(--ambient-alpha);transition:opacity .38s ease}
#products .card>.card-frost{position:absolute;z-index:0;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--frost-top),var(--frost-body) 46%,var(--frost-bottom));pointer-events:none}
#products .card::after{display:none}
#products .card .cdesc,#products .card .tag{color:color-mix(in srgb,var(--text) 92%,var(--bg))}
#products .price{background:color-mix(in srgb,var(--bg) 68%,transparent)}
html.dark #products .card{--frost-top:rgba(16,18,14,.52);--frost-body:rgba(16,18,14,.70);--frost-bottom:rgba(16,18,14,.64)}
#products .card:has(:focus-visible){--ambient-alpha:1;--ambient-play:running}
@media(hover:hover) and (pointer:fine){#products .card:is(:hover,.is-hovered){--ambient-alpha:1;--ambient-play:running}#products .grid:has(.card:is(:hover,.is-hovered)) .card:not(:hover):not(.is-hovered){filter:none;opacity:1}}
@media(max-width:620px){#products .card::before{inset:-36px;filter:blur(24px) saturate(1.8) brightness(1.5)}}
/* Move the blurred cover only; pausing preserves its position during fade-out. */
@media(prefers-reduced-motion:no-preference){#products .card::before{animation:card-ambient-flow 9s ease-in-out infinite;animation-play-state:var(--ambient-play)}}
@keyframes card-ambient-flow{0%,100%{transform:translate3d(-3%,2%,0) rotate(-2deg) scale(1.08)}35%{transform:translate3d(4%,-3%,0) rotate(2deg) scale(1.15)}70%{transform:translate3d(-1%,-4%,0) rotate(-1deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){#products .card::before{animation:none;transform:none;transition:none}}