/* ========================================================
   Custom WC Product Gallery  –  gallery.css
   ======================================================== */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --cwg-accent     : #ff6b81;
    --cwg-radius-lg  : 20px;
    --cwg-radius-md  : 12px;
    --cwg-shadow     : 0 3px 15px rgba(0,0,0,.15);
    --cwg-transition : .25s ease;
}

/* ── Gallery wrapper ────────────────────────────────────── */
.cwg-gallery {
    display        : flex;
    gap            : 25px;
    align-items    : flex-start;
    position       : relative;
}

/* ── Thumbnails ─────────────────────────────────────────── */
.cwg-thumbs-wrapper {
    width           : 110px;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 10px;
    flex-shrink     : 0;
}

.cwg-thumbs {
    display         : flex;
    flex-direction  : column;
    gap             : 15px;
    overflow        : hidden;
}

.cwg-thumb-item {
    border          : 2px solid #e5e5e5;
    border-radius   : var(--cwg-radius-md);
    overflow        : hidden;
    cursor          : pointer;
    transition      : border-color var(--cwg-transition),
                      transform     var(--cwg-transition);
    flex            : 0 0 auto;
}

.cwg-thumb-item:hover {
    border-color : var(--cwg-accent);
    transform    : scale(1.04);
}

.cwg-thumb-item.active {
    border-color : var(--cwg-accent);
}

.cwg-thumb-item img {
    display      : block;
    width        : 100px;
    height       : 100px;
    object-fit   : cover;
}

/* thumb nav arrows */
.cwg-thumb-nav {
    width           : 42px;
    height          : 42px;
    border          : 1px solid #e5e5e5;
    border-radius   : 50%;
    background      : #fff;
    cursor          : pointer;
    box-shadow      : 0 2px 8px rgba(0,0,0,.08);
    font-size       : 18px;
    line-height     : 1;
    transition      : background var(--cwg-transition);
}

.cwg-thumb-nav:hover {
    background : var(--cwg-accent);
    color      : #fff;
    border-color : var(--cwg-accent);
}

/* ── Main image area ────────────────────────────────────── */
.cwg-main {
    flex         : 1;
    position     : relative;
    overflow     : hidden;
    border-radius: var(--cwg-radius-lg);
    background   : #f5f5f5;
    cursor       : zoom-in;
}

.cwg-main-img {
    width      : 100%;
    display    : block;
    transition : opacity var(--cwg-transition);
}

.cwg-main-img.cwg-fade {
    opacity : 0;
}

/* prev / next buttons */
.cwg-prev,
.cwg-next {
    position      : absolute;
    bottom        : 25px;
    width         : 50px;
    height        : 50px;
    border        : none;
    border-radius : 50%;
    background    : #fff;
    cursor        : pointer;
    font-size     : 30px;
    box-shadow    : var(--cwg-shadow);
    z-index       : 2;
    transition    : background var(--cwg-transition);
}

.cwg-prev { right: 90px; }
.cwg-next { right: 25px; }

.cwg-prev:hover,
.cwg-next:hover {
    background : var(--cwg-accent);
    color      : #fff;
}

/* zoom button */
.cwg-zoom-btn {
    position      : absolute;
    top           : 15px;
    right         : 15px;
    width         : 40px;
    height        : 40px;
    border        : none;
    border-radius : 50%;
    background    : rgba(255,255,255,.9);
    cursor        : pointer;
    box-shadow    : var(--cwg-shadow);
    display       : flex;
    align-items   : center;
    justify-content: center;
    z-index       : 2;
    transition    : background var(--cwg-transition);
}

.cwg-zoom-btn:hover { background : #fff; }

/* dot indicators */
.cwg-dots {
    position        : absolute;
    bottom          : 15px;
    left            : 50%;
    transform       : translateX(-50%);
    display         : flex;
    gap             : 6px;
    z-index         : 2;
}

.cwg-dot {
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    background    : rgba(255,255,255,.55);
    cursor        : pointer;
    transition    : background var(--cwg-transition), transform var(--cwg-transition);
}

.cwg-dot.active {
    background : #fff;
    transform  : scale(1.35);
}

/* ── Lightbox ───────────────────────────────────────────── */
.cwg-lightbox {
    display         : none;
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.92);
    z-index         : 99999;
    align-items     : center;
    justify-content : center;
}

.cwg-lightbox.open {
    display : flex;
}

.cwg-lb-inner {
    position   : relative;
    max-width  : 90vw;
    max-height : 88vh;
    display    : flex;
    flex-direction : column;
    align-items    : center;
}

.cwg-lb-img {
    max-width  : 90vw;
    max-height : 80vh;
    object-fit : contain;
    border-radius : var(--cwg-radius-md);
    box-shadow    : 0 8px 40px rgba(0,0,0,.5);
    transition    : opacity .2s ease;
}

.cwg-lb-img.cwg-lb-fade { opacity: 0; }

.cwg-lb-counter {
    margin-top  : 12px;
    color       : rgba(255,255,255,.7);
    font-size   : 14px;
    font-family : sans-serif;
}

/* lightbox close */
.cwg-lb-close {
    position   : absolute;
    top        : 20px;
    right      : 20px;
    width      : 44px;
    height     : 44px;
    border     : none;
    border-radius : 50%;
    background : rgba(255,255,255,.15);
    color      : #fff;
    font-size  : 20px;
    cursor     : pointer;
    z-index    : 3;
    transition : background var(--cwg-transition);
}

.cwg-lb-close:hover { background : rgba(255,255,255,.3); }

/* lightbox arrows */
.cwg-lb-prev,
.cwg-lb-next {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    width         : 54px;
    height        : 54px;
    border        : none;
    border-radius : 50%;
    background    : rgba(255,255,255,.15);
    color         : #fff;
    font-size     : 36px;
    cursor        : pointer;
    z-index       : 3;
    transition    : background var(--cwg-transition);
}

.cwg-lb-prev { left : 20px; }
.cwg-lb-next { right: 20px; }

.cwg-lb-prev:hover,
.cwg-lb-next:hover { background: rgba(255,255,255,.3); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {

    .cwg-gallery {
        flex-direction : column;
    }

    .cwg-main {
        order : 1;
        width : 100%;
    }

    .cwg-thumbs-wrapper {
        order  : 2;
        width  : 100%;
    }

    .cwg-thumbs {
        flex-direction : row;
        overflow-x     : auto;
        width          : 100%;
        gap            : 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .cwg-thumb-item {
        min-width : 80px;
        scroll-snap-align: start;
    }

    .cwg-thumb-item img {
        width  : 80px;
        height : 80px;
    }

    .cwg-thumb-nav { display: none; }

    .cwg-prev,
    .cwg-next {
        width     : 40px;
        height    : 40px;
        font-size : 22px;
    }

    .cwg-prev { right: 70px; }
    .cwg-next { right: 20px; }

    .cwg-lb-prev { left : 8px; }
    .cwg-lb-next { right: 8px; }
}