/*
 * TecDoc Single Product – Gallery compatibility layer
 *
 * Goal:
 * - Stabilize Woo gallery/lightbox behavior across environments (theme-independent).
 * - Prevent hover zoom loops/flicker (common with wc zoom + theme overlays).
 * - Avoid double-lightbox issues (Elementor vs Woo/PhotoSwipe) via data attr + CSS stability.
 *
 * Scope: only when body has .tecdoc-single-gallery (added by plugin).
 */

body.tecdoc-single-gallery .woocommerce-product-gallery__wrapper {
    display: block !important; /* some themes force flex; flex can cause flicker/drift */
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Kill transitions/animations that can trigger re-init loops on hover/touch */
body.tecdoc-single-gallery .woocommerce-product-gallery__wrapper,
body.tecdoc-single-gallery .woocommerce-product-gallery__image,
body.tecdoc-single-gallery .woocommerce-product-gallery__image img {
    transition: none !important;
    animation: none !important;
}

/* Ensure main image stays stable and centered */
body.tecdoc-single-gallery .woocommerce-product-gallery__image {
    text-align: center;
}

body.tecdoc-single-gallery .woocommerce-product-gallery__image img {
    display: block;
    margin: 0 auto;
    max-width: 100% !important;
    max-height: 290px !important;
    object-fit: contain;
}

/* Disable any injected zoom overlay layer (even if a theme/plugin adds it) */
body.tecdoc-single-gallery .woocommerce-product-gallery__wrapper .zoomImg {
    display: none !important;
}

/* Extra: disable hover zoom effects some themes apply on product-image */
body.tecdoc-single-gallery .product-image img,
body.tecdoc-single-gallery .product-image img:hover {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* PhotoSwipe safety: keep UI clickable on mobile */
body.tecdoc-single-gallery .pswp {
    z-index: 2147483647 !important;
}

body.tecdoc-single-gallery .pswp__top-bar,
body.tecdoc-single-gallery .pswp__button {
    pointer-events: auto !important;
}

body.tecdoc-single-gallery .pswp__button {
    opacity: 1 !important;
}

/* ------------------------------------------------------------------
 * PhotoSwipe icon de-dupe
 *
 * In many themes (incl. XStore) PhotoSwipe buttons get custom ::before icons,
 * while Woo/PhotoSwipe still uses default-skin sprite as a background-image.
 * That results in "double" icons (e.g. white square behind X / small arrows behind large).
 *
 * To make the plugin theme-independent and avoid duplicates, we:
 *  - disable the sprite background-image for all PhotoSwipe buttons
 *  - render minimal unicode icons for close + arrows via ::before
 * ------------------------------------------------------------------ */
body.tecdoc-single-gallery .pswp__button {
    background-image: none !important;
    background: none !important;
}


/* Disable PhotoSwipe default-skin sprite on arrow pseudo elements too (Woo sets it on ::before). */
body.tecdoc-single-gallery .pswp__button--arrow--left::before,
body.tecdoc-single-gallery .pswp__button--arrow--right::before,
body.tecdoc-single-gallery .pswp__button--arrow--left,
body.tecdoc-single-gallery .pswp__button--arrow--right {
    background: none !important;
    background-image: none !important;
}

body.tecdoc-single-gallery .pswp__button::after {
    display: none !important;
}

body.tecdoc-single-gallery .pswp__button--close::before {
    content: '×' !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

body.tecdoc-single-gallery .pswp__button--arrow--left::before,
body.tecdoc-single-gallery .pswp__button--arrow--right::before {
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    text-align: center !important;
    font-size: 64px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

body.tecdoc-single-gallery .pswp__button--arrow--left::before {
    content: '‹' !important;
}

body.tecdoc-single-gallery .pswp__button--arrow--right::before {
    content: '›' !important;
}

body.tecdoc-single-gallery .pswp__button--close {
    display: block !important;
}

/* ------------------------------------------------------------------
 * PhotoSwipe UI de-dupe (XStore/third-party CSS can stack buttons).
 * We keep only the essentials to avoid "double controls" on mobile.
 * ------------------------------------------------------------------ */

/* Some themes make .pswp__button absolute top-right → buttons overlap.
   Force a sane, stable layout for top bar. */
body.tecdoc-single-gallery .pswp__top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 44px !important;
    padding: 0 8px !important;
}

/* Keep counter visible but out of the way */
body.tecdoc-single-gallery .pswp__counter {
    margin-right: auto !important;
    margin-left: 8px !important;
}

body.tecdoc-single-gallery .pswp__top-bar .pswp__button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    float: none !important;
    margin: 0 0 0 10px !important;
}

/* Enforce hiding of disabled UI elements (themes sometimes override default-skin CSS order).
   We already hard-disable optional controls via Woo/PhotoSwipe options in PHP; this is a small,
   generic guard that keeps any disabled UI from showing up as "duplicate controls". */
body.tecdoc-single-gallery .pswp__ui .pswp__element--disabled {
    display: none !important;
}


/* Ensure PhotoSwipe navigation arrows keep their default absolute positioning.
   Some themes apply generic button rules that can move both arrows to the same side. */
body.tecdoc-single-gallery .pswp__button--arrow--left,
body.tecdoc-single-gallery .pswp__button--arrow--right {
    position: absolute !important;
    top: 50% !important;
    margin-top: -50px !important;
    width: 70px !important;
    height: 70px !important;
}

body.tecdoc-single-gallery .pswp__button--arrow--left {
    left: 0 !important;
    right: auto !important;
}

body.tecdoc-single-gallery .pswp__button--arrow--right {
    right: 0 !important;
    left: auto !important;
}