/* ── Auto-cycle product image slideshow (homepage cards) ────────
   Wrap = the theme's .product-image div, which we tag with
   .cel-slideshow via JS. First <img> stays in normal flow so the
   wrapper keeps its intrinsic size; extra imgs are stacked on top
   and their opacity is toggled to crossfade. */
.cel-slideshow {
    position: relative !important;
    overflow: hidden;
}
.cel-slideshow .cel-slide {
    transition: opacity .6s ease-in-out;
    opacity: 0;
}
.cel-slideshow .cel-slide.is-active {
    opacity: 1;
}
/* First slide holds layout — the theme's original <img>. */
.cel-slideshow .cel-slide-1 {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
/* Additional slides stack over the first one. */
.cel-slideshow .cel-slide:not(.cel-slide-1) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Pause when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .cel-slideshow .cel-slide { transition: none; }
}