/* =============================================================================
   PRODUCT CARD GALLERY — swipe / dots / hover auto-advance
   Companion to: resources/views/front/components/product-card.blade.php
   Engine:        public/front/js/product-card-gallery.js

   Progressive-enhancement contract:
   .pcg-on is added by JS only. Without JS the card renders exactly as it
   always has — one server-rendered <img> in static flow, zoom on hover.
   With JS, every slide (incl. the server-rendered first one) is absolutely
   stacked and the active one crossfades in via opacity.
============================================================================= */

/* ── Stacked image mode (JS-on only) ─────────────────────────────────────── */
.product-image-wrapper.pcg-on {
    position: relative;
    /* Horizontal swipes belong to the gallery; vertical drags fall through
       to the browser's page scroll. Set before any pointer gesture starts. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* All slides absolutely stacked; the active one crossfades in.
   NOTE: transform is KEPT in the transition list so the existing hover zoom
   (.product-card:hover .product-image-wrapper img { transform: scale(1.04) }
   from style1.css) keeps animating exactly as before — crossfade and zoom
   compose instead of one killing the other. */
.product-image-wrapper.pcg-on img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.3s ease;
    /* The wrapper owns all pointer gestures (swipe/dots/click-suppression);
       slides themselves are pure paint. */
    pointer-events: none;
    /* Belt to the JS draggable=false suspenders: never let a slide become
       the source of a native HTML5 image drag (it pointercancels swipes). */
    -webkit-user-drag: none;
    user-drag: none;
}

.product-image-wrapper.pcg-on img.is-active {
    opacity: 1;
}

/* ── Dots ─────────────────────────────────────────────────────────────────── */
.pcg-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    /* Above the admin tag strip (z-5) and discount badge (z-5). */
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    opacity: 0;
    /* visibility (not just opacity) so hidden dots can never be tap targets */
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.pcg-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    /* Drop shadow = visibility on white/light packshots (lab QA finding). */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.pcg-dot.is-active {
    width: 18px;
    background: #ffffff;
}

/* Desktop (fine pointer + real hover): dots appear while the card is hovered
   or keyboard-focused. Hover is the autoplay trigger there, so the dots and
   the slideshow appear together. */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover .pcg-dots,
    .product-card:focus-within .pcg-dots {
        opacity: 1;
        visibility: visible;
    }
}

/* Touch devices: there is no hover state, and autoplay never runs — dots are
   the only affordance telling the shopper more photos exist. Always visible,
   slightly larger for finger taps. */
@media (hover: none), (pointer: coarse) {
    .pcg-dots {
        opacity: 1;
        visibility: visible;
    }
    .pcg-dot {
        width: 8px;
        height: 8px;
    }
    .pcg-dot.is-active {
        width: 20px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   The engine also refuses to autoplay when this is set; here we just kill
   the crossfade / dot-stretch animations so swaps are instant. */
@media (prefers-reduced-motion: reduce) {
    .product-image-wrapper.pcg-on img,
    .pcg-dot,
    .pcg-dots {
        transition: none;
    }
}