/* ==========================================================================
   JT7 Gallery — Galeria de Produto
   ========================================================================== */

/* ── Variáveis ── */
.jt7-gallery {
    --jt7-arrow-bg:      rgba(255,255,255,0.92);
    --jt7-arrow-shadow:  0 2px 10px rgba(0,0,0,0.15);
    --jt7-arrow-color:   #1d1d1d;
    --jt7-thumb-active:  #1a87c8;
    --jt7-radius:        4px;
    --jt7-thumb-size:    90px;
    --jt7-thumb-gap:     8px;
    font-size: 0; /* remove inline gaps */
}


/* ==========================================================================
   STAGE — imagem principal
   ========================================================================== */

.jt7-gallery__main {
    position: relative;
    width: 100%;
    border-radius: var(--jt7-radius);
    overflow: hidden;
}

.jt7-gallery__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}

/* Cada slide */
.jt7-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    cursor: zoom-in;
}

.jt7-gallery__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.jt7-gallery__slide--video {
    cursor: pointer;
}

/* Imagem principal */
.jt7-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Ícone de zoom no canto */
.jt7-gallery__zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--jt7-arrow-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    box-shadow: var(--jt7-arrow-shadow);
}

.jt7-gallery__zoom-hint svg {
    width: 16px;
    height: 16px;
    color: var(--jt7-arrow-color);
}

.jt7-gallery__slide:hover .jt7-gallery__zoom-hint {
    opacity: 1;
}

/* Placeholder vídeo no stage */
.jt7-gallery__video-placeholder {
    width: 100%;
    height: 100%;
    background: #1a1a2e;
}

/* Botão de play sobre o vídeo no stage */
.jt7-gallery__video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.jt7-gallery__video-play svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
    transition: transform .2s ease;
}

.jt7-gallery__slide--video:hover .jt7-gallery__video-play svg {
    transform: scale(1.08);
}


/* ── Setas do stage ── */

.jt7-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: var(--jt7-arrow-bg);
    border: none;
    border-radius: 50%;
    box-shadow: var(--jt7-arrow-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}

.jt7-gallery__arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.jt7-gallery__arrow--prev { left: 12px; }
.jt7-gallery__arrow--next { right: 12px; }

.jt7-gallery__arrow svg {
    width: 18px;
    height: 18px;
    color: var(--jt7-arrow-color);
}


/* ==========================================================================
   THUMBNAILS
   ========================================================================== */

.jt7-gallery__thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

.jt7-gallery__thumbs {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.jt7-gallery__thumbs-track {
    display: flex;
    gap: var(--jt7-thumb-gap);
    transition: transform .3s ease;
    will-change: transform;
}

/* Cada thumb */
.jt7-gallery__thumb {
    flex: 0 0 var(--jt7-thumb-size);
    width: var(--jt7-thumb-size);
    height: var(--jt7-thumb-size);
    border-radius: var(--jt7-radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s ease, opacity .2s ease;
    flex-shrink: 0;
    position: relative;
    background: #f0f0f0;
}

.jt7-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jt7-gallery__thumb.is-active {
    border-color: var(--jt7-thumb-active);
}

.jt7-gallery__thumb:hover {
    opacity: .85;
}

/* Thumb de vídeo */
.jt7-gallery__thumb-video {
    width: 100%;
    height: 100%;
    position: relative;
}

.jt7-gallery__thumb-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jt7-gallery__thumb-video-bg {
    width: 100%;
    height: 100%;
    background: #1a1a2e;
}

.jt7-gallery__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt7-gallery__thumb-play svg {
    width: 32px;
    height: 32px;
}

/* Setas do carrossel de thumbs */
.jt7-gallery__thumb-arrow {
    flex-shrink: 0;
    width: 28px;
    height: var(--jt7-thumb-size);
    background: none;
    border: 1px solid #ddd;
    border-radius: var(--jt7-radius);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}

.jt7-gallery__thumb-arrow:hover {
    background: #f0f0f0;
    color: #111;
}

.jt7-gallery__thumb-arrow.is-disabled {
    opacity: .3;
    pointer-events: none;
}


/* ==========================================================================
   LIGHTBOX — foto em tamanho real
   ========================================================================== */

.jt7-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility .3s ease;
}

.jt7-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}

.jt7-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.92);
    cursor: pointer;
}

.jt7-lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt7-lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    transform: scale(.97);
    transition: transform .3s ease;
}

.jt7-lightbox.is-open .jt7-lightbox__img {
    transform: scale(1);
}

/* Botão fechar — fixo no canto superior direito */
.jt7-lightbox__close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 100000;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.jt7-lightbox__close:hover { background: rgba(255,255,255,.28); }

/* Setas fixas nas laterais da tela, independente do tamanho da imagem */
.jt7-lightbox__arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100000;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.jt7-lightbox__arrow--prev { left: 20px; }
.jt7-lightbox__arrow--next { right: 20px; }
.jt7-lightbox__arrow:hover { background: rgba(255,255,255,.25); }

/* Esconde setas quando só há 1 imagem */
.jt7-lightbox__arrow.is-hidden { display: none; }


/* ==========================================================================
   MODAL DE VÍDEO
   ========================================================================== */

.jt7-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility .3s ease;
}

.jt7-video-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.jt7-video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.9);
    cursor: pointer;
}

.jt7-video-modal__content {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1000px;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    transform: scale(.96);
    transition: transform .3s ease;
}

.jt7-video-modal.is-open .jt7-video-modal__content {
    transform: scale(1);
}

.jt7-video-modal__content video {
    width: 100%;
    display: block;
    max-height: 82vh;
    outline: none;
}

.jt7-video-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.jt7-video-modal__close:hover { background: rgba(255,255,255,.3); }

/* Setas do modal de vídeo — fixas nas laterais, como o lightbox */
.jt7-video-modal__arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100001;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.jt7-video-modal__arrow--prev { left: 20px; }
.jt7-video-modal__arrow--next { right: 20px; }
.jt7-video-modal__arrow:hover { background: rgba(255,255,255,.25); }

/* Bloqueia scroll quando modal aberto */
body.jt7-modal-open { overflow: hidden; }


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 640px) {
    .jt7-gallery {
        --jt7-thumb-size: 68px;
        --jt7-thumb-gap:  6px;
    }

    .jt7-gallery__arrow {
        width: 32px;
        height: 32px;
    }

    .jt7-gallery__arrow svg {
        width: 14px;
        height: 14px;
    }

    .jt7-lightbox__arrow {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
}