/* ============================================================
   GLightbox custom — paleta editorial cream/marrom/bronze.
   Sobrescreve estilos default da lib pra alinhar com a marca.
   ============================================================ */

/* Overlay marrom profundo derivado do --fb-color-primary */
.glightbox-clean .goverlay,
.goverlay {
    background: rgba(74, 47, 31, 0.94);
}

/* Botão X de fechar — 44x44 cream, traço fino */
.glightbox-clean .gclose,
.gclose {
    width: 44px;
    height: 44px;
    top: 24px;
    right: 24px;
    background: transparent;
    border: 0;
    opacity: 0.85;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.glightbox-clean .gclose:hover,
.gclose:hover,
.gclose:focus-visible {
    opacity: 1;
    transform: scale(1.06);
    outline: none;
}
.glightbox-clean .gclose svg,
.gclose svg {
    width: 22px;
    height: 22px;
    stroke: #F5F1EA;
    stroke-width: 1.5;
    fill: none;
}

/* Setas navegação — finas, cream, 56x56 */
.glightbox-clean .gnext,
.glightbox-clean .gprev,
.gnext,
.gprev {
    width: 56px;
    height: 56px;
    background: transparent;
    border: 0;
    opacity: 0.7;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.gnext { right: 24px; }
.gprev { left: 24px; }
.gnext:hover, .gprev:hover,
.gnext:focus-visible, .gprev:focus-visible {
    opacity: 1;
    outline: none;
}
.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg,
.gnext svg, .gprev svg {
    width: 24px;
    height: 24px;
    stroke: #F5F1EA;
    stroke-width: 1.5;
    fill: none;
}

/* Esconder setas em mobile (swipe é o método natural) */
@media (max-width: 767px) {
    .gnext, .gprev { display: none; }
}

/* Counter — Inter 14px cream 70% opacity, top-center */
.glightbox-clean .gslide-description .gdesc-inner,
.glightbox-clean .gdesc-inner { display: none; }

.glightbox-container .gslide-description {
    background: transparent !important;
}

/* Counter custom no top-center via .gprev/gnext indicator (lib não expõe direto;
   posicionamos via .gcounter ou texto via JS). Default da lib expõe via [data-counter]. */
.gcounter,
.glightbox-clean .gcounter {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--fb-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(245, 241, 234, 0.7);
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 999999;
    pointer-events: none;
}

/* Container e foto — sem moldura, max 92vw/88vh, fade animation */
.glightbox-clean .gslide-image img,
.gslide-image img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Animação fade 250ms entre slides + open/close 300ms scale+fade */
.glightbox-container.glightbox-open {
    animation: gFadeScaleIn 300ms ease-out;
}
@keyframes gFadeScaleIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
.gslide.current,
.gslide.next-slide,
.gslide.prev-slide {
    transition: opacity 250ms ease-out;
}

/* Remover decorações default da lib que destoam */
.glightbox-clean .gslide-description,
.gslide-description {
    background: transparent !important;
    border-top: 0 !important;
}
.glightbox-clean .gdesc-inner h4 {
    display: none;
}