/**
 * WooCommerce - Estilos de Produto
 * Configurações visuais para elementos de produto, carrinho e checkout.
 */
/* ==========================================================================
   1. Swatches e Seletores de Variação
   ========================================================================== */

/* Remove tooltip nativo do TP Swatches */
.tp-swatches.tp-swatches-button .tp-swatches-tooltip {
    display: none;
}

/* ==========================================================================
   2. Mensagens do Sistema
   ========================================================================== */

/* Container das mensagens */
.woocommerce-notices-wrapper {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Estilos base para todas as caixas de mensagem (Sucesso, Erro, Info) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border-radius: 5px !important;
    /* Bordas arredondadas */
    padding: 15px 20px 15px 60px !important;
    /* Espaçamento interno */
    margin-bottom: 20px !important;
    /* Espaçamento abaixo da mensagem */
    box-sizing: border-box !important;
    display: flex !important;
    /* Usa Flexbox para alinhamento */
    align-items: center !important;
    /* Alinha itens verticalmente ao centro */
    flex-wrap: wrap !important;
    /* Permite que o conteúdo quebre a linha em telas menores */
    gap: 15px !important;
    /* ADICIONADO: Espaçamento entre os itens flex (ícone, texto, botão) */
}

/* Ícones das mensagens */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    font-family: "WooCommerce" !important;
    font-size: 20px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

/* Mensagem de Sucesso */
.woocommerce-message {
    background-color: var(--e-global-color-90e1d4d) !important;
    color: var(--e-global-color-text) !important;
}

.woocommerce-message::before {
    content: "\e015" !important;
    color: var(--e-global-color-accent) !important;
}

/* Mensagem de Erro */
.woocommerce-error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

.woocommerce-error::before {
    content: "\e016" !important;
    color: #721c24 !important;
}

/* Mensagem de Informação */
.woocommerce-info {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
}

.woocommerce-info::before {
    content: "\e017" !important;
    /* Ícone de 'i' em círculo */
    color: #0c5460 !important;
    /* Cor do ícone */
}

/* Garante que parágrafos dentro das mensagens não tenham margens extras e se ajustem ao flexbox */
.woocommerce-message p,
.woocommerce-error p,
.woocommerce-info p {
    margin: 0 !important;
    /* Remove margens padrão */
    flex-grow: 1 !important;
    /* Permite que o texto ocupe o espaço disponível */
}

/* ==========================================================================
   3. Estilos para Botões (Revertidos para o estado anterior, com a correção do 'gap')
   ========================================================================== */
/*Alinhamento do botão Ver carrio na parte de cima do label alert*/
.woocommerce-notices-wrapper ul li a {
    right: -60px !important;
}


/* Estilo para o botão "Ver Carrinho" (wc-forward) dentro das mensagens */
.woocommerce-message .wc-forward,
.woocommerce-error .wc-forward,
.woocommerce-info .wc-forward {
    /* Formato e espaçamento */
    border-radius: 25px !important;
    /* Bordas arredondadas, consistente com outros botões */
    border: none !important;
    /* Sem borda */
    padding: 8px 20px !important;
    /* Padding ajustado para o botão */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /* Garante que se comporte como um botão */
    font-size: 15px;
    line-height: 1.5;
    flex-shrink: 0 !important;
    /* Impede que o botão diminua em telas pequenas */
    /* AQUI ESTÁ A MUDANÇA PRINCIPAL PARA ALINHAR À DIREITA */
    margin-left: auto !important;
    /* Empurra o botão para a direita, consumindo o espaço restante */
    /* Cores no estado normal */
    background-color: var(--e-global-color-213a9b3) !important;
    /* Seu cinza mais escuro */
    color: var(--e-global-color-81889ba) !important;
    /* Branco para o texto */
    /* Transição suave para efeitos de hover */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Estilos HOVER para o botão "Ver Carrinho" */
.woocommerce-message .wc-forward:hover {
    background-color: var(--e-global-color-accent) !important;
    /* Cor de fundo no hover */
    color: var(--e-global-color-81889ba) !important;
    /* Mantém o texto branco */
}

/* Estilos para os swatches de produto */
.tp-swatches-button {
    width: auto !important;
    height: fit-content !important;
    border-radius: 25px !important;
    border: none !important;
    padding: 5px 20px 5px 20px;
}

/* Estilos para swatches NÃO selecionados */
.tp-swatches.tp-swatches-button:not(.selected) {
    background-color: var(--e-global-color-3484d69);
    color: var(--e-global-color-ca5c921);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Estilos HOVER para swatches NÃO selecionados */
.tp-swatches.tp-swatches-button:not(.selected):hover {
    background-color: var(--e-global-color-de28420);
    color: var(--e-global-color-primary);
}

/* Estilos para swatches SELECIONADOS */
.tp-swatches.tp-swatches-button.selected {
    background-color: var(--e-global-color-accent);
    color: var(--e-global-color-81889ba);
    border: none;
    transition: all 0.3s ease;
    cursor: default;
}

/* Estilos HOVER para swatches SELECIONADOS */
.tp-swatches.tp-swatches-button.selected:hover {
    background-color: #7C621D;
    color: var(--e-global-color-81889ba);
}


/*Botão de quantidade de produto*/
.input-text.qty.text {
    border-radius: 25px !important;
    border: none !important;

}

/* Oculta o elemento .codigoSku para produtos variáveis por padrão */
.product-type-variable .codigoSku {
    display: none;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}


/**Estilos para galeria de imagens**/

/* Garante que a imagem principal não estoure */
.woocommerce-product-gallery.custom-gallery-layout .custom-main-image-column .flex-viewport img {
    max-width: 100%;
    /* Garante que a imagem não exceda a largura do seu contêiner */
    height: auto;
    /* Mantém a proporção da imagem */
    display: block;
    /* Remove qualquer espaço extra abaixo da imagem */
}

/* Adicional: Garanta que o próprio flex-viewport não tenha uma altura fixa que o impeça de se ajustar */
.woocommerce-product-gallery.custom-gallery-layout .custom-main-image-column .flex-viewport {
    height: auto !important;
    /* Sobrescreve qualquer altura fixa que possa estar sendo aplicada */
    max-height: none !important;
    /* Garante que não haja um limite de altura que impeça o ajuste */
    overflow: hidden;
    /* Mantém o conteúdo dentro dos limites */
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
}

.custom-main-image-column {
    height: 550px !important;
}

.custom-main-image-column img {
    height: auto !important;
    max-width: 380px !important;
    max-height: 550px !important;
}

.custom-main-image-column img:hover {
    max-width: none !important;
    /* Remove o limite de largura ao passar o mouse */
    max-height: none !important;
    /* Remove o limite de altura ao passar o mouse */
}



/* Estilos para a galeria de produtos customizada */
.woocommerce-product-gallery.custom-gallery-layout {
    display: flex;
    /* Para colocar thumbnails e imagem principal lado a lado */
    gap: 20px;
    /* Espaçamento entre as colunas */
    align-items: flex-start;
    /* Alinha o topo das colunas */
    flex-wrap: wrap;
    /* Permite quebrar linha em telas menores */
}

/* Novo wrapper para thumbnails e setas */
.custom-thumbnail-wrapper {
    display: flex;
    flex-direction: column;
    /* Setas acima/abaixo da lista de thumbnails */
    align-items: center;
    /* Centraliza as setas horizontalmente */
    width: 150px;
    /* Mesma largura da coluna de thumbnails */
    flex-shrink: 0;
    position: relative;
}

/* Estilo para as setas de rolagem */
.thumb-scroll-arrow {
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #555;
    font-size: 0.8em;
    width: 40px;
    /* Largura para a "bolinha" */
    height: 40px;
    /* Altura para a "bolinha" */
    border-radius: 50%;
    /* Torna o elemento circular */
    display: flex;
    /* Usa flexbox para centralizar o conteúdo */
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
    padding: 0;
    /* Remove padding padrão, pois width/height já definem o tamanho */
    cursor: pointer;
    margin: 5px auto;
    /* Centraliza horizontalmente e adiciona espaçamento vertical */
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}


.thumb-scroll-arrow:hover:not(:disabled) {
    background-color: var(--e-global-color-accent);
    color: #333;
}

.thumb-scroll-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Coluna de thumbnails (agora é o flex-control-nav com a nova classe, dentro do wrapper) */
.custom-thumbnail-wrapper .custom-thumbnail-column {
    /* Seletor mais específico */
    width: 100%;
    /* Ocupa a largura total do seu wrapper */
    max-height: 450px;
    /* Altura máxima ajustada para dar espaço às setas, ajuste conforme necessário */
    overflow-y: auto;
    /* Adiciona barra de rolagem vertical se o conteúdo exceder a altura */
    flex-shrink: 0;

    /* Estilo da barra de rolagem (opcional, para navegadores Webkit e Firefox) */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #ccc #f1f1f1;
    /* Firefox */
}

.custom-thumbnail-wrapper .custom-thumbnail-column::-webkit-scrollbar {
    width: 8px;
    /* Largura da barra de rolagem para Webkit */
}

.custom-thumbnail-wrapper .custom-thumbnail-column::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-thumbnail-wrapper .custom-thumbnail-column::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Estilos para a lista de thumbnails dentro da coluna */
.custom-thumbnail-wrapper .custom-thumbnail-column .flex-control-nav {
    /* Seletor mais específico */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-thumbnail-wrapper .custom-thumbnail-column li {
    /* Seletor mais específico */
    margin: 0;
    width: 100%;
    /* Faz o item da lista (li) preencher 100% da largura da coluna */
}

.custom-thumbnail-wrapper .custom-thumbnail-column img {
    /* Seletor mais específico */
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #eee;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.custom-thumbnail-wrapper .custom-thumbnail-column img.flex-active,
.custom-thumbnail-wrapper .custom-thumbnail-column img:hover {
    border-color:  var(--e-global-color-accent);
}

/* Coluna da imagem principal */
.woocommerce-product-gallery.custom-gallery-layout .custom-main-image-column {
    flex-grow: 1;
    max-width: calc(100% - 150px - 20px);
    /* (100% - largura do wrapper - gap) */
}

/* Ajustes para o FlexSlider dentro da coluna principal */
.woocommerce-product-gallery.custom-gallery-layout .custom-main-image-column .flex-viewport {
    margin: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* NOVO: Garante que a imagem principal não estoure */
.woocommerce-product-gallery.custom-gallery-layout .custom-main-image-column .flex-viewport img {
    max-width: 100%;
    /* Garante que a imagem não exceda a largura do seu contêiner */
    height: auto;
    /* Mantém a proporção da imagem */
    display: block;
    /* Remove qualquer espaço extra abaixo da imagem */
}

/* NOVO: Garante que a imagem principal não estoure */
.woocommerce-product-gallery.custom-gallery-layout .custom-main-image-column .flex-viewport img {
    max-width: 100%;
    /* Garante que a imagem não exceda a largura do seu contêiner */
    height: auto;
    /* Mantém a proporção da imagem */
    display: block;
    /* Remove qualquer espaço extra abaixo da imagem */
}

@media (max-width: 767px) {

    /* --- Reset geral --- */
    .woocommerce-product-gallery.custom-gallery-layout {
        flex-direction: column;
        gap: 12px !important;
        align-items: stretch;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* --- Imagem principal --- */
    .custom-main-image-column,
    .flex-viewport.custom-main-image-column {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto;
        padding: 0;
        order: 2;
        height: auto !important;
        border-radius: 0;
        box-sizing: border-box;
        background-color: var(--e-global-color-291972e);
    }

    .custom-main-image-column img,
    .woocommerce-product-gallery__image img {
      /*  width: 100% !important;
        max-width: 100vw !important;*/
        height: auto !important;
      /*  object-fit: contain !important;*/
        display: block;
      /*  padding: 0;
        box-sizing: border-box;*/
        border-radius: 0 !important;
    }

        /* --- Setas verticais (up/down) FICAM ESCONDIDAS no mobile --- */
    .thumb-scroll-arrow.up,
    .thumb-scroll-arrow.down {
        display: none !important;
    }


    /* --- Setas horizontais (left/right) aparecem centralizadas verticalmente na faixa de thumbs --- */
    .thumb-scroll-arrow.left,
    .thumb-scroll-arrow.right {
        display: flex !important;
        position: absolute;
        transform: translateY(-50%);
        z-index: 20;
        width: 36px;
        height: 36px;
        font-size: 1.0em;
        border: 1.5px solid #ddd;
        border-radius: 50%;
        color: #555;
        box-shadow: 0 1px 4px #0001;
        cursor: pointer;
        opacity: 0.93;
        align-items: center;
        justify-content: center;
        transition: background .15s, color .15s, opacity .12s;
        pointer-events: auto;
        user-select: none;
        padding: 0;
        margin: 0;
    }

    .thumb-scroll-arrow.left {
        left: 4px;
        rotate: -90deg;
    }

    .thumb-scroll-arrow.right {
        right: -36px;
        rotate: -90deg;
    }

    .thumb-scroll-arrow.left:disabled,
    .thumb-scroll-arrow.right:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #f7f7f7;
        color: #bbb;
    }



    /* --- Wrapper dos thumbs --- */
    .custom-thumbnail-wrapper {
        position: relative;
        width: calc(100% - 40px);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 110px;
        box-sizing: border-box;
        padding: 0 10px 4px 10px;
        left: 10px;
    }

    /* --- Carrossel de thumbs --- */
    .flex-control-nav.custom-thumbnail-column {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        min-width: 0;
        width: 100%;
        margin: 0 44px 0 44px;
        padding: 0;
        list-style: none;
        align-items: center;
        box-sizing: border-box;
        height: 96px;
        border-radius: 6px;
        z-index: 1;
    }

    .flex-control-nav.custom-thumbnail-column::-webkit-scrollbar {
        display: none;
    }

    .flex-control-nav.custom-thumbnail-column li {
        flex: 0 0 85px;
        width: 85px;
        height: 85px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        box-sizing: border-box;
    }

    .flex-control-nav.custom-thumbnail-column img {
        width: 82px;
        height: 82px;
        object-fit: cover;
        border-radius: 7px;
        border: 2px solid #eee;
        background: #fafbfc;
        display: block;
        cursor: pointer;
        transition: border 0.22s, filter 0.15s;
        filter: brightness(98%);
        box-sizing: border-box;
    }

    .flex-control-nav.custom-thumbnail-column img.flex-active,
    .flex-control-nav.custom-thumbnail-column img:hover {
        border: 2px solid  var(--e-global-color-accent);
        filter: brightness(1);
        z-index: 2;
    }

    /* Remove qualquer seta fora do padrão que venha extra */
    .custom-thumbnail-wrapper button:not(.left):not(.right) {
        display: none !important;
    }
}



/*RETIRADO MENSAGEM DE ADICIONADO AO CARRINHO*/
.added_to_cart.wc-forward {
    display: none !important;
}