.elementor-136 .elementor-element.elementor-element-83a1ae2{--display:flex;--margin-top:1px;--margin-bottom:1px;--margin-left:1px;--margin-right:1px;--padding-top:1px;--padding-bottom:1px;--padding-left:060px;--padding-right:60px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-136 .elementor-element.elementor-element-9fddd4b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:30px 0px 0px 0px;text-align:center;}.elementor-136 .elementor-element.elementor-element-9fddd4b .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:var( --e-global-color-d9a1cdd );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-136 .elementor-element.elementor-element-f2aa061{--divider-border-style:solid;--divider-color:var( --e-global-color-d9a1cdd );--divider-border-width:1px;}.elementor-136 .elementor-element.elementor-element-f2aa061 .elementor-divider-separator{width:16%;margin:0 auto;margin-center:0;}.elementor-136 .elementor-element.elementor-element-f2aa061 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-136 .elementor-element.elementor-element-7660c01{margin:0px -108px calc(var(--kit-widget-spacing, 0px) + -69px) -0px;padding:0px 0px -47px 0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-136 .elementor-element.elementor-element-7cfface .elementor-button{background-color:var( --e-global-color-d9a1cdd );font-family:"Roboto", Sans-serif;font-weight:500;transition-duration:0.2s;border-radius:60px 60px 60px 60px;padding:22px 22px 22px 22px;}.elementor-136 .elementor-element.elementor-element-7cfface .elementor-button:hover, .elementor-136 .elementor-element.elementor-element-7cfface .elementor-button:focus{background-color:#05AB64;}.elementor-136 .elementor-element.elementor-element-7cfface{margin:-54px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-136 .elementor-element.elementor-element-7cfface.elementor-element{--align-self:center;}.elementor-136 .elementor-element.elementor-element-037e7e1{--spacer-size:50px;padding:12px 12px 12px 12px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-136 .elementor-element.elementor-element-83a1ae2{--content-width:500px;--min-height:0px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:1px 1px;--row-gap:1px;--column-gap:1px;--margin-top:0px;--margin-bottom:0px;--margin-left:-0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-136 .elementor-element.elementor-element-9fddd4b{padding:0px 0px 0px 0px;}.elementor-136 .elementor-element.elementor-element-9fddd4b .elementor-heading-title{font-size:14px;}.elementor-136 .elementor-element.elementor-element-7660c01{margin:0px -62px calc(var(--kit-widget-spacing, 0px) + -62px) -62px;padding:0px 0px 0px 0px;}.elementor-136 .elementor-element.elementor-element-7cfface{padding:1px 1px 1px 1px;}.elementor-136 .elementor-element.elementor-element-7cfface .elementor-button{font-size:11px;padding:11px 11px 11px 11px;}.elementor-136 .elementor-element.elementor-element-037e7e1{padding:14px 14px 14px 14px;}}@media(min-width:768px){.elementor-136 .elementor-element.elementor-element-83a1ae2{--content-width:1600px;}}/* Start custom CSS for shortcode, class: .elementor-element-7660c01 *//* Força o container do plugin a não limitar a largura das linhas */
.wooco-component-products {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* Garante as 9 colunas no desktop */
@media (min-width: 1024px) {
    .wooco-component-product {
        flex: 0 0 calc(11.11% - 4px) !important;
        max-width: 11.11% !important;
    }
}

/* Ocultar a aba de Avaliações */
.woocommerce-tabs .reviews_tab,
#reviews {
    display: none !important;
}

/* Ocultar a seção de Produtos Relacionados e Vendas Cruzadas */
.related.products,
.upsells.products {
    display: none !important;
}

/* Ocultar apenas o botão original de Adicionar ao Carrinho (deixando o do WhatsApp) */
.woocommerce div.product form.cart button.single_add_to_cart_button {
    display: none !important;
}
/* Força a página do produto 82 a ser uma coluna única */
.post-82.product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Faz a imagem ocupar a largura total e descer naturalmente */
.post-82 .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 600px !important; /* Ajuste o tamanho da foto aqui */
    margin-bottom: 20px !important;
    float: none !important;
}

/* Faz as opções de biquíni ocuparem a largura total logo abaixo */
.post-82 .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Organiza as miniaturas em colunas para não ficar uma lista infinita */
.post-82 .wooco-component-products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 colunas */
    gap: 15px !important;
}

/* Força a grade de 9 colunas no Computador */
@media (min-width: 1024px) {
    /* Alvo direto na lista de produtos do biquíni 82 */
    .post-82 .wooco-component-products {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 5px !important; /* Espaço entre as miniaturas */
    }

    /* Calcula o tamanho para caber exatamente 9 produtos */
    .post-82 .wooco-component-product {
        flex: 0 0 calc(11.11% - 5px) !important; /* 100% dividido por 9 menos o gap */
        max-width: calc(11.11% - 5px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 2px !important;
        box-sizing: border-box !important;
    }
}

/* Ajuste das imagens para não estourarem o quadradinho de 9 colunas */
.id-82 .wooco-component-product-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
}

/* No Celular: 9 fica muito pequeno, então deixamos 4 ou 5 */
@media (max-width: 767px) {
    .post-82 .wooco-component-products {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important; /* 5 por linha no celular */
        gap: 4px !important;
    }
}

/* Esconder textos para manter o visual limpo com 9 colunas */
.post-82 .wooco-component-product-name,
.post-82 .wooco-component-product-price {
    display: none !important;
}

/* Força 7 produtos por linha em telas de computador e tablets grandes */
@media (min-width: 992px) {
    .wooco_component_product_selection_grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 10px !important; /* Controla o espaço entre os quadradinhos */
    }
    
    /* Garante que o item ocupe o espaço correto dentro da nova grade */
    .wooco_component_product_selection_grid_item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Centraliza as miniaturas e adiciona espaço entre elas */
ol.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    justify-content: center !important; /* Centraliza as fotos */
    gap: 15px !important; /* Espaçamento entre as duas fotos (pode alterar se quiser) */
    padding: 0 !important;
    margin-top: 15px !important; /* Dá um respiro entre a foto grandona e as pequenas */
}

/* Remove o alinhamento antigo do WooCommerce e ajusta as fotos */
ol.flex-control-nav.flex-control-thumbs li {
    float: none !important; /* Impede que elas colem na esquerda */
    margin: 0 !important; /* Remove as margens padrão para o 'gap' funcionar bem */
    width: 25% !important; /* Controla a largura das miniaturas. Pode aumentar para 30% ou 40% se quiser elas maiores */
}

/* Centraliza os produtos em telas menores (celulares e tablets) */
@media (max-width: 991px) {
    .wooco_component_product_selection_grid {
        display: flex !important;
        flex-wrap: wrap !important; /* Permite que os produtos "quebrem" para a linha de baixo */
        justify-content: center !important; /* É isso aqui que centraliza tudo! */
        gap: 10px !important; /* Espaço entre os quadradinhos */
    }
    
    .wooco_component_product_selection_grid_item {
        margin: 0 !important; /* Remove margens antigas que podiam deixar torto */
    }
}

/* Garante que as miniaturas fiquem por cima de camadas invisíveis que bloqueiam o clique */
ol.flex-control-nav.flex-control-thumbs {
    position: relative !important;
    z-index: 999 !important; /* Joga as fotos para a camada mais alta da tela */
}

/* Garante que a foto preencha 100% da área clicável dela mesma */
ol.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    cursor: pointer !important;
}

/* Centraliza os produtos em telas menores (celulares e tablets) */
@media (max-width: 350px) {
    .wooco_component_product_selection_grid {
        display: flex !important;
        flex-wrap: wrap !important; /* Permite que os produtos "quebrem" para a linha de baixo */
        justify-content: center !important; /* É isso aqui que centraliza tudo! */
        gap: 10px !important; /* Espaço entre os quadradinhos */
    }
    
    .wooco_component_product_selection_grid_item {
        margin: 0 !important; /* Remove margens antigas que podiam deixar torto */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-df1c1da */<style>
    /* Aqui o CSS apenas garante que o biquíni seja clicável e bonito */
    .wooco-component-product {
        cursor: pointer !important;
    }

    /* Evita que o plugin crie espaços gigantes que atrapalham o scroll */
    .wooco-components {
        scroll-behavior: smooth;
    }
</style>

<script>
jQuery(document).ready(function($) {
    // Escuta o clique nas miniaturas que estão dentro do shortcode
    $(document).on('click', '.wooco-component-product', function() {
        
        // Espera o plugin carregar a imagem (importante!)
        setTimeout(function() {
            // Tentamos encontrar a imagem principal por várias classes comuns do plugin
            var target = $('.wooco-component-product-image').first() || $('.woocommerce-product-gallery').first();
            
            if (target.length) {
                $('html, body').stop(true, false).animate({
                    scrollTop: target.offset().top - 150
                }, 800);
            } else {
                // Caso não ache a classe, ele sobe para o topo do biquíni (ID que criamos)
                var topoPadrao = $('#topo-biquini');
                if (topoPadrao.length) {
                    $('html, body').stop(true, false).animate({
                        scrollTop: topoPadrao.offset().top - 150
                    }, 800);
                }
            }
        }, 450); // Tempo para o "vai e vem" não acontecer
    });
});
</script>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83a1ae2 *//* 1. ESTRUTURA PRINCIPAL: Dividir em duas colunas (Esquerda e Direita) */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap;
    gap: 40px; /* Espaço entre a imagem e as opções */
    align-items: flex-start;
}

/* Coluna da Esquerda (Imagens Principais) */
.woocommerce div.product div.images {
    width: 48% !important;
    float: none !important;
}

/* Coluna da Direita (Textos e Seleção do Biquíni) */
.woocommerce div.product div.summary {
    width: 48% !important;
    float: none !important;
    clear: none !important;
}

/* 2. IMAGEM PRINCIPAL: Formato totalmente quadrado e limpo */
.woocommerce div.product div.images img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Força o quadrado perfeito */
    object-fit: cover !important; /* Garante que a foto não fique esticada */
    border-radius: 8px; /* Dá um toque levemente arredondado nas pontas (opcional) */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Sombra super sutil e elegante */
}

/* 3. MINIATURAS DOS COMPONENTES (Tops e Calcinhas) */
/* Deixa as imagens das opções bem pequenas na direita */
.wooco-components .wooco-component .wooco-item .wooco-item-thumb {
    width: 45px !important; /* Largura da miniatura */
    height: 45px !important; /* Altura da miniatura */
    flex: 0 0 45px !important;
    margin-right: 15px;
}

/* Garante que a miniatura pequena fique quadrada e bem cortada */
.wooco-components .wooco-component .wooco-item .wooco-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
}

/* Estilo clean para a lista de opções */
.wooco-components .wooco-component .wooco-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Destaque sutil quando a cliente seleciona uma opção */
.wooco-components .wooco-component .wooco-item.wooco-selected {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    background: #fafafa;
}


/* 5. RESPONSIVIDADE (Celulares) */
/* Empilha as colunas uma em cima da outra em telas menores */
@media (max-width: 768px) {
    .woocommerce div.product {
        flex-direction: column;
    }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
    }
}

/* Ocultar apenas Categoria e Tags */
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
    display: none !important;
}

.wooco-components .wooco-component .wooco-item .wooco-item-price,
.wooco-components .wooco-component .wooco-item .price {
    display: none !important;
}

/* Opcional: Dar um destaque maior para o preço TOTAL que aparece embaixo */
.wooco-total {
    font-size: 22px !important;
    font-weight: bold !important;
    margin-top: 15px !important;
    color: #000000 !important; /* Mude o código da cor se quiser que o total tenha a cor da sua marca */
}

/* Ocultar o preço principal padrão do WooCommerce no topo da página */
.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    display: none !important;
}

/* Garantir que o preço TOTAL do WPC Composite continue aparecendo embaixo */
.wooco-total .price {
    display: block !important; /* Força a exibição do preço total do conjunto */
}

.wooco_component_product_selection_grid_item {
    max-width: 110px !important; /* Define a largura máxima da pecinha */
    margin-bottom: 10px !important;
}

/* Forçar a imagem a ficar pequena e alinhada */
.wooco_component_product_selection_grid_item img {
    width: 90px !important;
    height: 70px !important;
    object-fit: cover !important; /* Corta a foto num quadrado perfeito sem distorcer */
    border-radius: 8px !important; /* Deixa os cantos arredondados e elegantes */
}

/* Ajustar o texto do nome para acompanhar o tamanho da foto */
.wooco_component_product_selection_grid_item_name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
    word-wrap: break-word !important;
}/* End custom CSS */
/* Start custom CSS *//* 1. ESTRUTURA PRINCIPAL: Dividir em duas colunas (Esquerda e Direita) */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap;
    gap: 40px; /* Espaço entre a imagem e as opções */
    align-items: flex-start;
}

/* Coluna da Esquerda (Imagens Principais) */
.woocommerce div.product div.images {
    width: 48% !important;
    float: none !important;
}

/* Coluna da Direita (Textos e Seleção do Biquíni) */
.woocommerce div.product div.summary {
    width: 48% !important;
    float: none !important;
    clear: none !important;
}

/* 2. IMAGEM PRINCIPAL: Formato totalmente quadrado e limpo */
.woocommerce div.product div.images img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Força o quadrado perfeito */
    object-fit: cover !important; /* Garante que a foto não fique esticada */
    border-radius: 8px; /* Dá um toque levemente arredondado nas pontas (opcional) */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Sombra super sutil e elegante */
}

/* 3. MINIATURAS DOS COMPONENTES (Tops e Calcinhas) */
/* Deixa as imagens das opções bem pequenas na direita */
.wooco-components .wooco-component .wooco-item .wooco-item-thumb {
    width: 45px !important; /* Largura da miniatura */
    height: 45px !important; /* Altura da miniatura */
    flex: 0 0 45px !important;
    margin-right: 15px;
}

/* Garante que a miniatura pequena fique quadrada e bem cortada */
.wooco-components .wooco-component .wooco-item .wooco-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
}

/* Estilo clean para a lista de opções */
.wooco-components .wooco-component .wooco-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Destaque sutil quando a cliente seleciona uma opção */
.wooco-components .wooco-component .wooco-item.wooco-selected {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    background: #fafafa;
}


/* 5. RESPONSIVIDADE (Celulares) */
/* Empilha as colunas uma em cima da outra em telas menores */
@media (max-width: 768px) {
    .woocommerce div.product {
        flex-direction: column;
    }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
    }
}/* End custom CSS */