/* ==============================================
   CWF Product Gallery  v9.12.2
   Desktop: image grid
   Mobile:  full-width swipe slider
   ============================================== */

.cwf-gal {
    --cwf-gal-gap:   8px;
    --cwf-gal-cols:  4;
    --cwf-gal-ratio: 1;
    width:           100%;
    display:         block;
    position:        relative;
    z-index:         1;
}

/* ════════════════════════
   DESKTOP GRID
   ════════════════════════ */
.cwf-gal-grid {
    display:               grid;
    grid-template-columns: repeat(var(--cwf-gal-cols), 1fr);
    gap:                   var(--cwf-gal-gap);
}

/* Each image cell */
.cwf-gal-img-wrap {
    display:          block;
    position:         relative;
    overflow:         hidden;
    border-radius:    10px;
    background:       #f3f3f3;
    cursor:           pointer;
    text-decoration:  none;
    transition:       transform .2s, box-shadow .2s;
    /* Enforce aspect ratio via padding trick — works on all browsers */
    width:            100%;
    padding-top:      calc(100% / var(--cwf-gal-ratio, 1));
}
.cwf-gal-img-wrap:hover {
    transform:  scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.cwf-gal-img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform .35s ease;
}
.cwf-gal-img-wrap:hover .cwf-gal-img {
    transform: scale(1.06);
}

/* ════════════════════════
   MOBILE SLIDER
   (hidden on desktop, shown only ≤767px)
   ════════════════════════ */
.cwf-gal-slider {
    display: none;
}

@media (max-width: 767px) {

    /* Hide the grid on mobile */
    .cwf-gal-grid   { display: none !important; }

    /* Show the slider */
    .cwf-gal-slider {
        display:          block;
        position:         relative;
        overflow:         hidden;
        width:            100%;
        border-radius:    10px;
        background:       #f3f3f3;
        user-select:      none;
        -webkit-user-select: none;
        /* Prevent WC theme elements from overlapping */
        isolation:        isolate;
        z-index:          1;
    }

    /* Track — contains slides, must have height */
    .cwf-gal-track {
        display:    block;
        position:   relative;
        width:      100%;
        /* Height = width / ratio (padding-top trick) */
        padding-top: calc(100% / var(--cwf-gal-ratio, 1));
    }

    /* Each slide — absolutely fill the track */
    .cwf-gal-slide {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        overflow:   hidden;
        display:    none;
    }
    .cwf-gal-slide--active {
        display: block;
    }
    .cwf-gal-slide .cwf-gal-img {
        position:        absolute;
        inset:           0;
        width:           100%;
        height:          100%;
        object-fit:      cover;
        object-position: center;
        display:         block;
    }

    /* Counter badge (top-right) */
    .cwf-gal-counter {
        position:      absolute;
        top:           10px;
        right:         12px;
        background:    rgba(0,0,0,.50);
        color:         #fff;
        font-size:     12px;
        font-weight:   600;
        padding:       3px 10px;
        border-radius: 30px;
        pointer-events:none;
        z-index:       4;
        letter-spacing:.04em;
        line-height:   1.6;
    }

    /* Dots */
    .cwf-gal-dots {
        display:         flex;
        justify-content: center;
        gap:             6px;
        padding:         10px 0 4px;
        position:        relative;
        z-index:         2;
        background:      transparent;
    }
    .cwf-gal-dot {
        width:         7px;
        height:        7px;
        border-radius: 50%;
        background:    #d1d5db;
        transition:    background .2s, transform .2s;
        cursor:        pointer;
        flex-shrink:   0;
    }
    .cwf-gal-dot--active {
        background: #111;
        transform:  scale(1.3);
    }

    /* Prev/Next arrows */
    .cwf-gal-arrow {
        position:        absolute;
        top:             50%;
        transform:       translateY(-50%);
        width:           36px;
        height:          36px;
        background:      rgba(0,0,0,.40);
        border:          none;
        border-radius:   50%;
        color:           #fff;
        font-size:       20px;
        line-height:     1;
        display:         flex;
        align-items:     center;
        justify-content: center;
        cursor:          pointer;
        z-index:         4;
        padding:         0;
        touch-action:    manipulation;
    }
    .cwf-gal-arrow--prev { left:  8px; }
    .cwf-gal-arrow--next { right: 8px; }

    /* Slide transition animations */
    .cwf-gal-slide--leaving-left   { animation: cwfGalOutLeft  .22s ease forwards; }
    .cwf-gal-slide--leaving-right  { animation: cwfGalOutRight .22s ease forwards; }
    .cwf-gal-slide--entering-left  { animation: cwfGalInLeft   .22s ease forwards; }
    .cwf-gal-slide--entering-right { animation: cwfGalInRight  .22s ease forwards; }

    @keyframes cwfGalOutLeft   { from{opacity:1;transform:translateX(0)}   to{opacity:0;transform:translateX(-25px)} }
    @keyframes cwfGalOutRight  { from{opacity:1;transform:translateX(0)}   to{opacity:0;transform:translateX( 25px)} }
    @keyframes cwfGalInLeft    { from{opacity:0;transform:translateX(25px)} to{opacity:1;transform:translateX(0)} }
    @keyframes cwfGalInRight   { from{opacity:0;transform:translateX(-25px)} to{opacity:1;transform:translateX(0)} }
}