/* ═══════════════════════════════════════════════════════════
   TPF Image Zoom — Styles
   ═══════════════════════════════════════════════════════════
   Desktop: hover-to-zoom with pan (inner zoom, no separate window)
   Mobile:  no hover zoom — just native WooCommerce lightbox + pinch
   ═══════════════════════════════════════════════════════════ */

/* ── ZOOM CONTAINER ────────────────────────────────────── */

/* The WooCommerce gallery wrapper becomes our zoom container */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}

/* The zoomed layer — sits on top of the regular image */
.tpf-zoom-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

/* When hovering, show the zoomed layer */
.tpf-zoom-active .tpf-zoom-lens {
    opacity: 1;
}

/* Keep the original image visible underneath (for smooth transition) */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── ZOOM INDICATOR ────────────────────────────────────── */

/* Small icon in bottom-right to hint that zoom is available */
.tpf-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tpf-zoom-hint svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hide the hint when actively zooming */
.tpf-zoom-active .tpf-zoom-hint {
    opacity: 0;
}

/* ── LOCATION BADGE (optional debug/dev) ───────────────── */

/* Shows the location code on each image — disable for production */
.tpf-zoom-loc-badge {
    display: none;  /* Change to 'block' to debug */
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    font-family: monospace;
    padding: 2px 8px;
    border-radius: 3px;
    z-index: 5;
    pointer-events: none;
}

/* ── MOBILE — DISABLE HOVER ZOOM ───────────────────────── */

@media (max-width: 768px), (hover: none) {
    .woocommerce-product-gallery .woocommerce-product-gallery__image {
        cursor: default;
    }

    .tpf-zoom-lens,
    .tpf-zoom-hint {
        display: none !important;
    }
}

/* ── THUMBNAIL GALLERY STRIP ───────────────────────────── */

/* Ensure thumbnails don't get zoom behavior */
.woocommerce-product-gallery .flex-control-thumbs li {
    cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs .tpf-zoom-lens {
    display: none;
}