/* ========================================================================== Galeria do produto: imagem principal 1:1, miniaturas embaixo Carregado por Views/Produto/Index.cshtml e Areas/HotSite/Views/Produto/Index.cshtml depois do Galeria-produto.css, que é quem tem os estilos base do swiper. O zoom é o Fancybox 6 (Assets/lib/fancybox) e usa o CSS próprio dele - nada aqui mexe no lightbox. ========================================================================== */ /* O Galeria-produto.css limita .swiper-fotos/.swiper-thumbs a 550px de altura e height:100% - isso vinha do layout de miniaturas em coluna. Com a imagem em 1:1 a altura sai da largura do slide, então o teto é removido aqui. */ .galeria-box .swiper-fotos, .galeria-box .swiper-thumbs { height: auto; max-height: none; } .galeria-box .swiper-fotos .swiper-slide { aspect-ratio: 1 / 1; } /* A imagem é centralizada com max-width/max-height em vez de object-fit:contain (que é o que o Galeria-produto.css aplica). O resultado visual é o mesmo, mas a caixa do passa a ter o tamanho da imagem visível - e é disso que o elevateZoom precisa para posicionar a lente da lupa externa. Com object-fit ele mapeia a caixa esticada e a lente sai deslocada da foto. */ .galeria-box .swiper-fotos .elemento-figure > a { display: flex; align-items: center; justify-content: center; height: 100%; } .galeria-box .swiper-fotos .detalhe-produto-main-image { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: unset; } /* o slide de vídeo ocupa o quadrado inteiro, igual aos de imagem */ .galeria-box .swiper-fotos > .swiper-wrapper > .swiper-slide > a, .galeria-box .swiper-fotos .product-video { display: block; width: 100%; height: 100%; } .galeria-box .product-video video { max-height: none; } /* Miniaturas centralizadas. No swiper quem centraliza é o centerInsufficientSlides; aqui fica só o modo "galeria aberta", que é uma grade de figures flutuadas (Produto-detalhe.css) e por isso encostava à esquerda. */ .galeria-box .detalhe-produto-image-gallery.aberta { display: flex; flex-wrap: wrap; justify-content: center; } .galeria-box .detalhe-produto-image-gallery.aberta figure { float: none; } /* -------------------------------------------------------------------------- Empilhamento da lupa interna (ZoomLupaProduto) O lensView cria a lente no fim do sem z-index. Como o wrapper e os slides do Swiper ficam em z-index 1, as setas em 10 e o header sticky em 99, a lente era pintada por baixo da própria foto - só aparecia a fatia que escapava do carrossel. O valor abaixo passa desses e continua sob o aviso de cookie (999), os dropdowns (1000), o offcanvas (1045) e os modais (1055). A lupa externa (elevateZoom) não entra aqui de propósito: a lente dela já sai com z-index 999 inline, e dar z-index ao .zoomContainer criaria um contexto de empilhamento que rebaixaria esse 999. -------------------------------------------------------------------------- */ .lensView { z-index: 100; } /* -------------------------------------------------------------------------- Setas da imagem principal O Swiper deixa os botões sem fundo, então a seta desaparecia sobre fotos claras ou de fundo agitado. Círculo claro + sombra garantem contraste em qualquer imagem. A cor do ícone continua vindo do tema (o main.css aplica var(--color-dark) no svg, que é desenhado com fill="currentColor"). -------------------------------------------------------------------------- */ .galeria-box .swiper-fotos .swiper-button-prev, .galeria-box .swiper-fotos .swiper-button-next { --swiper-navigation-size: 40px; --swiper-navigation-sides-offset: 12px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .06); transition: background-color .2s ease; } .galeria-box .swiper-fotos .swiper-button-prev:hover, .galeria-box .swiper-fotos .swiper-button-next:hover { background: #fff; } /* o ícone tem width/height fixos no atributo; o main.css força height 24px, então a largura precisa acompanhar para o chevron não achatar */ .galeria-box .swiper-fotos .swiper-navigation-icon { width: auto; } @media (max-width: 575.98px) { .galeria-box .swiper-fotos .swiper-button-prev, .galeria-box .swiper-fotos .swiper-button-next { --swiper-navigation-size: 34px; --swiper-navigation-sides-offset: 8px; } }