/* Product card image wireframe: shimmer shows until the image loads (gated by html.hh-skel-on from hh-card-skeleton.js). */
.hh-skel-on .hh-skel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 45%) 50%, transparent 70%) var(--color-soft);
    background-size: 220% 100%;
    animation: hh-skel-shimmer 1.4s ease-in-out infinite;
    transition: opacity .35s ease;
}
.hh-skel-on .hh-skel .hh-product-img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity .35s ease, transform .5s ease;
}
.hh-skel-on .hh-skel.is-loaded::before { opacity: 0; animation: none; }
.hh-skel-on .hh-skel.is-loaded .hh-product-img { opacity: 1; }
@keyframes hh-skel-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
    .hh-skel-on .hh-skel::before { animation: none; }
}