/* ==========================================================================
 * KAMAR Card Gallery — swipeable mini gallery on grid cards
 *
 * The script adds class `kamar-cg` to each enhanced thumbnail wrapper and only
 * adds `is-ready` once at least one gallery image is known, so nothing visual
 * changes for single-photo products. All gallery layers are absolutely
 * positioned over the existing featured image, so the card layout / aspect
 * ratio is unchanged (no CLS).
 * ========================================================================== */

.kamar-cg {
    position: relative;
}

/* Slides layer sits on top of the existing featured <img>, which stays in
   normal flow and defines the box size. `overflow:hidden` clips slides that are
   translated off the box edges so the slide-in / slide-out never spills outside
   the photo. Arrows and dots live on `.kamar-cg` (not here), so they are not
   clipped. */
.kamar-cg__slides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Each gallery photo is positioned horizontally by `show()` via an inline
   translateX (offset = (slideIndex - activeIndex) * 100%). At rest (activeIndex
   0 = featured) every gallery slide sits off to the right (translateX ≥ 100%),
   so only the featured base image shows. Sliding animates the transform. */
.kamar-cg__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* match WooCommerce thumbnail behaviour */
    transform: translateX(100%);
    transition: transform 0.3s ease;
    background: #fff;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .kamar-cg__slide {
        transition: none;
    }
}

/* ── Navigation arrows ───────────────────────────────────────────────────── */
/* The photo box (.kamar-cg) is forced square (aspect-ratio 1/1) by the theme's
   CLS CSS, so top:50% is the photo's true vertical centre. We push the buttons
   outward with a negative offset (half their width) so they straddle the photo's
   left/right edges and sit in the card's padding — off the photo, near the card
   edges. Elegant translucent-white fill; `color`/`background` are forced with
   !important because the theme's generic `button:hover` rule otherwise turns the
   glyph white (invisible on the white button). */
.kamar-cg__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: #222222 !important;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Negative offset = half the button width → button centre lands on the photo edge. */
.kamar-cg__nav--prev {
    left: -15px;
}
.kamar-cg__nav--next {
    right: -15px;
}

.kamar-cg__nav:hover,
.kamar-cg__nav:focus-visible {
    background: #ffffff !important;
    color: #222222 !important;
}

/* Show arrows on hover (pointer devices) … */
.kamar-cg:hover .kamar-cg__nav {
    opacity: 1;
}

/* On touch devices there is no hover, and the arrows only clutter the card
   (swipe / the carousel gesture is the interaction), so hide them entirely. */
@media (hover: none) {
    .kamar-cg__nav {
        display: none !important;
    }
}

.kamar-cg__nav:focus-visible {
    outline: 2px solid #103547;
    outline-offset: 1px;
    opacity: 1;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */
/* Sit just BELOW the photo, in the gap between the image and the product title
   (top:100% = bottom edge of the photo box). */
.kamar-cg__dots {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 3;
    display: flex;
    gap: 5px;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kamar-cg:hover .kamar-cg__dots,
.kamar-cg.is-dragging .kamar-cg__dots {
    opacity: 1;
}

@media (hover: none) {
    .kamar-cg__dots {
        opacity: 0.9;
    }

    /* Inside a carousel/slider on touch the whole gallery is pointless: a
       horizontal swipe drives the carousel (as it should), not the gallery.
       Arrows are already hidden above; hide the dots too so the feature is
       effectively disabled in carousel rows (homepage, related products). */
    .jet-listing-grid__slider .kamar-cg__dots,
    .slick-slider .kamar-cg__dots,
    .slick-slide .kamar-cg__dots,
    .swiper .kamar-cg__dots,
    .swiper-container .kamar-cg__dots,
    .swiper-slide .kamar-cg__dots {
        display: none !important;
    }
}

.kamar-cg__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cccccc; /* bladoszary */
    transition: background 0.2s ease, transform 0.2s ease;
}

.kamar-cg__dot.is-active {
    background: #103547; /* ciemny granat */
    transform: scale(1.25);
}