/*
 * Ampliação de fotos do produto: uma foto por vez.
 *
 * O visual segue o padrão de loja de moda: véu claro, foto centralizada em cartão
 * branco, contador no topo, setas nas laterais e fechar no canto. Para trocar o véu
 * para escuro basta mudar --fpl-veu e --fpl-tinta.
 */

:root {
    --fpl-veu: rgba(248, 248, 248, .97);
    --fpl-tinta: #111;
    --fpl-controle-fundo: rgba(255, 255, 255, .92);
    --fpl-controle-borda: rgba(0, 0, 0, .12);
}

/* 1. A ampliação nativa do WooCommerce (que empilha as fotos) sai de cena. */
dialog.wc-block-product-gallery-dialog {
    display: none !important;
}

/* 2. Devolve o clique à foto.
   O for-custom-badges isola o __inner-blocks e o põe em z-index 1 quando há badge
   dentro, e esse div é absoluto sobre a foto inteira: ele passou a receber o clique
   no lugar da <img>. O wrapper do badge já é pointer-events:none; aqui o div que o
   contém também passa a ser, e qualquer link ou botão dentro dele volta a ser
   clicável, para não derrubar bloco que alguém venha a pôr ali. */
.wc-block-product-gallery-large-image__inner-blocks {
    pointer-events: none;
}

.wc-block-product-gallery-large-image__inner-blocks a,
.wc-block-product-gallery-large-image__inner-blocks button,
.wc-block-product-gallery-large-image__inner-blocks input,
.wc-block-product-gallery-large-image__inner-blocks select {
    pointer-events: auto;
}

.wc-block-product-gallery-large-image img {
    cursor: zoom-in;
}

/* 3. O visualizador. */
.fpl-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    background: var(--fpl-veu);
    color: var(--fpl-tinta);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.fpl-overlay[data-aberto="1"] {
    display: block;
}

.fpl-palco {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 72px;
    box-sizing: border-box;
    overflow: hidden;
}

.fpl-foto {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
    box-shadow: 0 2px 24px rgba(0, 0, 0, .10);
    cursor: zoom-in;
    transition: transform .18s ease-out;
    will-change: transform;
    /* O gesto e todo nosso: com pan-y o navegador assume a pinca como rolagem e o
       touchmove de dois dedos nem chega ao JS. A rolagem do fundo ja fica travada
       pelo body.fpl-travado enquanto a foto esta aberta. */
    touch-action: none;
}

.fpl-overlay[data-zoom="1"] .fpl-foto {
    cursor: grab;
    transition: none;
}

.fpl-overlay[data-arrastando="1"] .fpl-foto {
    cursor: grabbing;
}

.fpl-contador {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    letter-spacing: .02em;
    opacity: .75;
    user-select: none;
    pointer-events: none;
}

.fpl-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--fpl-controle-borda);
    border-radius: 50%;
    background: var(--fpl-controle-fundo);
    color: var(--fpl-tinta);
    cursor: pointer;
    line-height: 0;
    transition: background .15s, opacity .15s;
}

.fpl-btn:hover {
    background: #fff;
}

.fpl-btn:focus-visible {
    outline: 2px solid var(--fpl-tinta);
    outline-offset: 2px;
}

.fpl-btn[hidden] {
    display: none;
}

.fpl-fechar {
    top: 14px;
    right: 14px;
}

.fpl-ant {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.fpl-prox {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.fpl-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Trava a rolagem do fundo enquanto a foto está ampliada. */
body.fpl-travado {
    overflow: hidden;
}

/* Com a foto ampliada as setas saem da frente: o dedo que comeca em cima delas
   nao arrastaria a foto, e a seta vira toque errado no lugar do arrasto. */
.fpl-overlay[data-zoom="1"] .fpl-ant,
.fpl-overlay[data-zoom="1"] .fpl-prox {
    display: none;
}

@media (max-width: 782px) {
    .fpl-palco {
        padding: 56px 12px;
    }

    /* As setas ficam no celular tambem: deslizar o dedo nao e descoberto por quem
       abriu a foto, e quem esta de uma mao so precisa do alvo para tocar. */
    .fpl-btn {
        width: 40px;
        height: 40px;
    }

    .fpl-ant {
        left: 8px;
    }

    .fpl-prox {
        right: 8px;
    }

    .fpl-foto {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fpl-foto {
        transition: none;
    }
}