/* TAZULA NATIVE GALLERY
   No FlexSlider — hide/show slides by class toggling.
   ========================================================= */

/* WooCommerce's own core script still runs its gallery init
   unconditionally and hands opacity control to FlexSlider's
   "start" callback — which, per tonight's findings, does not
   reliably fire in this environment. Without this, the whole
   .woocommerce-product-gallery container can be stuck invisible
   (opacity:0) forever, regardless of how correctly this script
   toggles the slides underneath it. Force it visible directly. */
.woocommerce-product-gallery {
    opacity: 1 !important;
}

/* Hide all slides except the active one */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    display: none !important;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide {
    display: block !important;
}

/* Lets vertical page scroll stay native/smooth while horizontal swipes
   are handled entirely by JS — avoids the browser and the swipe
   handler fighting each other over the same touch gesture. */
.woocommerce-product-gallery__wrapper {
    touch-action: pan-y;
}

/* Fix zoomImg opacity — G17's opacity:1 !important on all images
   overrides the zoom plugin's inline opacity:0 on .zoomImg.
   This restores the intended behavior. */
.woocommerce-product-gallery__image .zoomImg {
    opacity: 0 !important;
}

/* Thumbnail strip */
.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 12px !important;
}
.flex-control-thumbs li {
    list-style: none !important;
    width: 80px !important;
}
.flex-control-thumbs img {
    border: 2px solid transparent !important;
    border-radius: 10px !important;       /* sm */
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
.flex-control-thumbs img:hover {
    opacity: 0.9 !important;
}
.flex-control-thumbs img.flex-active {
    opacity: 1 !important;
    border-color: #e26d5c !important;     /* accent */
}

/* Full-screen lightbox */
.tazula-gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 15, 16, 0.94);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.tazula-gallery-lightbox.is-open {
    display: flex;
}
.tazula-lightbox-image-wrap {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tazula-lightbox-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    transform: scale(1);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
.tazula-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(253, 252, 248, 0.15);
    color: #FDFCF8;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.tazula-lightbox-close:hover {
    background: rgba(226, 109, 92, 0.5); /* accent, on hover only */
}