/* Melhorar a exibição do Cart quando vazio */
#_desktop_cart a, 
#_mobile_cart a,
.blockcart a,
.cart a,
#header .cart a,
#header .blockcart a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

#_desktop_cart .cart-products-count, 
#_mobile_cart .cart-products-count,
.blockcart .cart-products-count,
.cart .cart-products-count,
#header .cart-products-count {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 3px !important;
}

/* Sobrescrever background das product flags com !important de alta prioridade */
html body .product-flags li.product-flag,
html body .product-flag,
html body li.product-flag,
html body .products .product-flag,
html body .product-miniature .product-flag,
html body .product-miniature .product-flags .product-flag,
html body article.product-miniature .product-flags .product-flag,
html body #products .product-flags .product-flag,
html body .featured-products .product-flags .product-flag,
html body .product-accessories .product-flags .product-flag,
html body li.product-flag.new,
html body .product-flag.new,
html body .product-flags .product-flag.new {
    background-color: inherit;
    background: inherit;
    background-image: none;
}

/* Estilo para o botão SUBSCRIBE no footer - com maior especificidade */
body #footer .btn-primary,
body #footer button.btn-primary,
body #footer input[type="submit"],
body #footer .block_newsletter button,
body #footer .ps_emailsubscription button,
body #footer .block_newsletter .btn,
body #footer button.btn-subscribe,
body #footer .newsletter-form-button,
body #blocknewsletter button,
body button.subscribe,
body .btn-subscribe,
body #submitNewsletter,
body #newsletter_subscribe,
body .newsletter-submit,
body .newsletter-button {
    color: inherit !important;
    border-color: inherit !important;
    background-color: transparent !important;
}

/* Garantir que o Contact Us mantenha a cor correta após o hover */
.contact-link a,
#_desktop_contact_link a,
#contact_link a,
#contact-link a,
a.contact-link,
.header_links a[href*="contact"],
#header a[href*="contact"] {
    color: inherit !important;
    transition: all 0.3s ease;
}

/* Garantir que o Contact Us volte para a cor correta após o hover */
.contact-link a:not(:hover),
#_desktop_contact_link a:not(:hover),
#contact_link a:not(:hover),
#contact-link a:not(:hover),
a.contact-link:not(:hover),
.header_links a[href*="contact"]:not(:hover),
#header a[href*="contact"]:not(:hover) {
    color: inherit !important;
}

#wrapper > .container,
#content-wrapper > .container,
.breadcrumb-container,
.container:has(.breadcrumb),
.container:has(nav.breadcrumb),
#main .container:first-child,
.page-header .container,
.breadcrumb-container,
.breadcrumb-parent,
.breadcrumb-wrapper {
    margin-top: 10px !important;
}

#_desktop_user_info, #_mobile_user_info,
#_desktop_cart, #_mobile_cart {
    padding-left: 10px !important;
    margin-left: 10px !important;
    text-align: right !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
}

/* Restaurar o tamanho e posicionamento dos elementos */
#_desktop_user_info a, #_mobile_user_info a,
#_desktop_cart a, #_mobile_cart a,
.user-info a, .cart a {
    font-size: 0.9rem !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Garantir que todos os textos nos links tenham a cor certa */
.hidden-sm-down,
.cart-products-count,
.user-info span,
.cart span {
    color: inherit !important;
    transition: color 0.3s ease !important;
}

/* Remover background-color específico para links e header do carrinho */
#header .cart-preview a,
#header .cart-preview .header {
    background-color: transparent !important;
    background: transparent !important;
}

/* Garantir que os elementos dentro dos links "Sign In" e "Cart" mudem de cor no hover */
#_desktop_user_info a:hover .hidden-sm-down,
#_desktop_cart a:hover .cart-products-count,
#_desktop_user_info a:hover span,
#_desktop_cart a:hover span {
    color: inherit !important;
}/**
 * Display Configuration Module
 * @author    Fabio Elias
 */

/* Estilos para a configuração de exibição */
#left-column.display-config-no-sidebar {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#content-wrapper.full-width-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Aplicar cores ao body */
body {
    background-color: inherit;
}

/* Abordagem conservadora para cores - apenas os principais containers */

/* Header */
#header {
    background-color: inherit;
    border-bottom-color: inherit !important;
}

.header-top, .header-nav, .header-bottom,
#header .header-top, #header .header-nav, #header .header-bottom {
    background-color: inherit;
    border-bottom-color: inherit !important;
}

/* Tratar todas as bordas dentro do header */
#header *, .header-top *, .header-nav *, .header-bottom * {
    border-bottom-color: inherit;
    border-top-color: inherit;
    border-left-color: inherit;
    border-right-color: inherit;
}

/* Classes para efeitos de hover dos links do menu */
/* .invert-color-hover-enabled #header a,
.invert-color-hover-enabled #header .menu > ul > li > a,
.invert-color-hover-enabled #header a.dropdown-item,
.invert-color-hover-enabled #header .user-info a,
.invert-color-hover-enabled #header .account a,
.invert-color-hover-enabled #header .contact-link a,
.invert-color-hover-enabled #header .blockcart a,
.invert-color-hover-enabled .top-menu a,
.invert-color-hover-enabled #mobile_top_menu_wrapper a,
.invert-color-hover-enabled #_desktop_top_menu a,
.invert-color-hover-enabled #_mobile_top_menu a,
.invert-color-hover-enabled #_desktop_user_info a,
.invert-color-hover-enabled #_mobile_user_info a,
.invert-color-hover-enabled #_desktop_contact_link a,
.invert-color-hover-enabled #_mobile_contact_link a,
.invert-color-hover-enabled #_desktop_cart a,
.invert-color-hover-enabled #_mobile_cart a {
    transition: all 0.3s ease;
} */

/* Garantir que os ícones no header tenham a cor correta */
#header i, #header .material-icons, #header svg, 
#_desktop_user_info i, #_desktop_cart i,
#header .user-info i, #header .cart i,
.contact-link i {
    color: inherit !important;
}

/* Main content */
#wrapper, 
#main, 
#content, 
#content-wrapper,
.js-product-list-header,
.page-header,
#main-section, 
main, 
.page-content, 
#wrapper > .container, 
#content-wrapper > .container,
section#content {
    background-color: inherit;
}

/* Tratamento da sessão principal */
body #wrapper {
    background-color: inherit !important;
    padding-top: 1rem;
}

body #content-wrapper,
body #content,
/* body #js-product-list-header, */
body #main,
body #main .container,
body #products {
    background-color: inherit !important;
}

body #js-product-list-header {
    display: none !important;
}

/* Sobrescrever a classe .card que está forçando o background branco */
body .card,
body #main .card,
body #wrapper .card,
body #content .card,
body #content-wrapper .card {
    background-color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

/* Outros elementos que podem estar forçando o background branco */
body .page-content.card,
body .product-container .card,
body .product-list .card,
body .products .card,
body .featured-products .card,
body .product-miniature .card,
body #products .card {
    background-color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

/* Trata corretamente os submenus */
#header .sub-menu,
#header .dropdown-menu,
.top-menu .sub-menu,
.top-menu .dropdown-menu {
    background-color: inherit !important;
}

#header .sub-menu a,
#header .dropdown-menu a,
.top-menu .sub-menu a,
.top-menu .dropdown-menu a {
    color: inherit !important;
}

/* Footer */
#footer, 
footer.page-footer {
    background-color: inherit;
}

/* Custom Text Block */
#custom-text,
.custom-text,
.custom-text-block {
    background-color: inherit;
}

/* Bloco de Newsletter */
#footer .block_newsletter,
#footer #block_newsletter,
#block_newsletter,
.block_newsletter,
.ps_emailsubscription {
    background-color: inherit;
}

#footer .block_newsletter h1, 
#footer .block_newsletter h2, 
#footer .block_newsletter h3, 
#footer .block_newsletter h4, 
#footer .block_newsletter p, 
#footer .block_newsletter span, 
#footer .block_newsletter label {
    color: inherit;
}

/* Garantir que o campo de input do newsletter tenha a cor correta */
#footer .block_newsletter form input[type=email],
#footer .block_newsletter form input[type=text],
#block_newsletter form input[type=email],
#block_newsletter form input[type=text],
.block_newsletter form input[type=email],
.block_newsletter form input[type=text] {
    background-color: white !important;
    color: #000000 !important;
}

/* Tratamento para elementos específicos */
.product-title, .category-title, 
.page-title, .page-heading, 
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
p {
    color: inherit;
}

/* SOLUÇÃO GENÉRICA PARA TODOS OS BOTÕES NO CONTEÚDO PRINCIPAL */

/* 1. REMOVER COMPLETAMENTE A REGRA QUE PRESERVA BOTÕES */
/* Remova ou comente esta regra completamente:
a.btn, button.btn, input.btn {
    color: initial !important;
    background-color: initial !important;
}
*/

/* 2. SUBSTITUIR POR UMA REGRA GENÉRICA PARA BOTÕES NO CONTEÚDO PRINCIPAL */
/* Isto aplica as cores a TODOS os botões dentro do conteúdo principal */
/* Solução genérica para botões no conteúdo principal */
#content-wrapper .btn,
#content-wrapper button.btn,
#content-wrapper a.btn,
#content-wrapper input.btn,
#wrapper .btn, 
#wrapper button.btn,
#wrapper a.btn,
#wrapper input.btn,
#main .btn,
#main button.btn,
#main a.btn,
#main input.btn,
#content .btn,
#content button.btn,
#content a.btn,
#content input.btn,
.product-container .btn,
.product-container button.btn,
.product-container a.btn,
.product-container input.btn,
.product-actions .btn,
.product-actions button.btn,
.product-actions a.btn,
.product-actions input.btn {
    /* Usar a cor do texto principal do módulo */
    color: var(--main-text-color, rgb(230, 190, 116)) !important;
    background-color: transparent !important;
    border-color: var(--main-text-color, rgb(230, 190, 116)) !important;
    transition: all 0.3s ease !important;
}

/* Hover state com inversão de cores */
#content-wrapper .btn:hover,
#content-wrapper button.btn:hover,
#content-wrapper a.btn:hover,
#content-wrapper input.btn:hover,
#wrapper .btn:hover, 
#wrapper button.btn:hover,
#wrapper a.btn:hover,
#wrapper input.btn:hover,
#main .btn:hover,
#main button.btn:hover,
#main a.btn:hover,
#main input.btn:hover,
#content .btn:hover,
#content button.btn:hover,
#content a.btn:hover,
#content input.btn:hover,
.product-container .btn:hover,
.product-container button.btn:hover,
.product-container a.btn:hover,
.product-container input.btn:hover,
.product-actions .btn:hover,
.product-actions button.btn:hover,
.product-actions a.btn:hover,
.product-actions input.btn:hover {
    color: var(--main-bg-color, #ffffff) !important;
    background-color: var(--main-text-color, rgb(230, 190, 116)) !important;
    border-color: var(--main-text-color, rgb(230, 190, 116)) !important;
}

/* 5. ESTILO PARA OS ÍCONES NO HOVER */
#content-wrapper .btn:hover i,
#content-wrapper button.btn:hover i,
#content-wrapper a.btn:hover i,
#content-wrapper input.btn:hover i,
#wrapper .btn:hover i, 
#wrapper button.btn:hover i,
#wrapper a.btn:hover i,
#wrapper input.btn:hover i,
#main .btn:hover i,
#main button.btn:hover i,
#main a.btn:hover i,
#main input.btn:hover i,
#content .btn:hover i,
#content button.btn:hover i,
#content a.btn:hover i,
#content input.btn:hover i,
.product-container .btn:hover i,
.product-container button.btn:hover i,
.product-container a.btn:hover i,
.product-container input.btn:hover i,
.product-actions .btn:hover i,
.product-actions button.btn:hover i,
.product-actions a.btn:hover i,
.product-actions input.btn:hover i,
#content-wrapper .btn:hover .material-icons,
#content-wrapper button.btn:hover .material-icons,
#content-wrapper a.btn:hover .material-icons,
#content-wrapper input.btn:hover .material-icons,
#wrapper .btn:hover .material-icons, 
#wrapper button.btn:hover .material-icons,
#wrapper a.btn:hover .material-icons,
#wrapper input.btn:hover .material-icons,
#main .btn:hover .material-icons,
#main button.btn:hover .material-icons,
#main a.btn:hover .material-icons,
#main input.btn:hover .material-icons,
#content .btn:hover .material-icons,
#content button.btn:hover .material-icons,
#content a.btn:hover .material-icons,
#content input.btn:hover .material-icons,
.product-container .btn:hover .material-icons,
.product-container button.btn:hover .material-icons,
.product-container a.btn:hover .material-icons,
.product-container input.btn:hover .material-icons,
.product-actions .btn:hover .material-icons,
.product-actions button.btn:hover .material-icons,
.product-actions a.btn:hover .material-icons,
.product-actions input.btn:hover .material-icons {
    color: var(--main-bg-color, #ffffff) !important;
    background-color: var(--main-text-color, rgb(230, 190, 116)) !important;
    border-color: var(--main-text-color, rgb(230, 190, 116)) !important;
}

/* 6. DEFINIR A VARIÁVEL CSS PARA A COR DO TEXTO */
:root {
    --main-text-color: rgb(230, 190, 116);
}

/* 7. EXCEÇÕES PARA BOTÕES QUE NÃO DEVEM TER ESTILO ALTERADO */
/* Se houver botões específicos que devem manter o estilo original, adicione-os aqui */
/* Exemplo: botões de pagamento, botões de checkout, etc. */
.stripe-payment-button,
.paypal-button,
#checkout-payment-step .btn,
.checkout-step.-current .btn,
#payment-confirmation .btn
{
    color: initial !important;
    background-color: initial !important;
    border-color: initial !important;
}

/* Para ícones dentro desses botões específicos */
.stripe-payment-button i,
.paypal-button i,
#checkout-payment-step .btn i,
.checkout-step.-current .btn i,
#payment-confirmation .btn i
{
    color: initial !important;
}



/* Solução para as áreas brancas restantes - Product Details e Comments */

/* 1. SELETORES ESPECÍFICOS PARA PRODUCT DETAILS */
/* Aplicar a cor de fundo a todas as áreas de detalhes do produto */
.product-details,
.product-details-tab,
.product-tabs,
.tabs,
.product-information,
.product-description,
#product-details,
#product-description,
.tabs .tab-content,
.tabs .tab-pane,
.product-detail,
.product-description,
.product-information,
.product-features,
.product-reference,
.product-quantities,
.product-out-of-stock,
/* .product-additional-info, */
.product-manufacturer,
.js-product-details,
/* .product-variants, */
#product-detail-tabs,
/* Seletores mais específicos baseados na imagem */
.nav-tabs,
.nav-tabs .nav-item,
.nav-tabs .nav-link,
.product-tabs .nav-tabs,
.tabs .nav-tabs,
.product-tabs .tab-content,
.tabs .tab-content,
.tab-content > .tab-pane,
.product-tabs .tab-pane,
.product-details-card,
.card.product-details,
.product-information-card,
.card.product-information,
/* Seletor específico para a tab de detalhes do produto */
[role="tabpanel"],
[aria-labelledby="product-details-tab"],
[aria-labelledby="description-tab"],
/* Novos seletores específicos vistos na imagem */
.nav.nav-tabs .nav-item .nav-link,
.product-container .tabs,
.product-container .card,
.product-container .nav-tabs,
.product-container .tab-content,
.product-detail-tabs,
.product-detail-tab-content,
.product-info,
.product-tabs-container,
.product-accordion,
.product-accordion-item,
/* Específico para a área Product Details vista na imagem */
.card,
.card-header,
.card-body,
.card-block,
.card-title,
.card-text,
.tab-content {
    background-color: var(--main-bg-color, inherit) !important;
}

/* 2. SELETORES ESPECÍFICOS PARA COMMENTS/REVIEWS */
/* Aplicar a cor de fundo a todas as áreas de comentários/reviews */
.product-comments,
.product-comment,
.comments,
.comment,
.reviews,
.review,
.product-reviews,
.product-review,
.review-list,
.review-item,
.comment-list,
.comment-item,
#product-comments-list,
#product-reviews-list,
.product-comment-list,
.product-review-list,
#reviews,
#comments,
#product-comments,
#product-reviews,
.comments-container,
.reviews-container,
/* Seletores mais específicos baseados na imagem */
.comments-block,
.comment-form,
.review-form,
.write-review-button,
.write-comment-button,
.comment-form-container,
.review-form-container,
.comment-item,
.review-item,
.comment-header,
.review-header,
.comment-content,
.review-content,
.comment-footer,
.review-footer,
.comment-meta,
.review-meta,
.comment-author,
.review-author,
.comment-date,
.review-date,
.comment-body,
.review-body,
/* Específico para a área de comentários vista na imagem */
.comments-block,
.product-comment-block,
.review-button,
/* Novos seletores baseados na imagem */
[data-toggle="tab"],
.product-comments-header,
.product-comments-list,
.product-comments-footer,
.product-comments-pagination,
.product-reviews-header,
.product-reviews-list,
.product-reviews-footer,
.product-reviews-pagination,
.comment-respond,
.write-review-form,
.product-comment-form,
/* Selector específico para o botão de review mostrado na imagem */
.btn-comment,
.post-product-comment,
.write-your-review,
.write-review-button,
.be-first-to-write,
a[href*="write-review"],
button[data-toggle="modal"][data-target*="review"],
button[data-toggle="modal"][data-target*="comment"] {
    background-color: var(--main-bg-color, inherit) !important;
    border-color: var(--main-bg-color, inherit) !important;
    box-shadow: none !important;
}

/* 3. SUPER SELETORES GERAIS PARA QUALQUER ELEMENTO BRANCO */
/* Use isso com cuidado, pois pode afetar elementos que você não quer modificar */
.bg-white,
.bg-light,
.white-bg,
.light-bg,
[class*="bg-white"],
[class*="white-bg"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
    background-color: var(--main-bg-color, inherit) !important;
    border-color: var(--main-bg-color, inherit) !important;
    box-shadow: none !important;
}

/* 4. SELETORES ESPECÍFICOS PARA ELEMENTOS VISTOS NA IMAGEM */
/* Estes são baseados diretamente na sua captura de tela */
.product-details-tab,
.product-details-container,
.tab-pane.active,
#product-details-tab-content,
.product-detail-name,
.comments-container,
[data-toggle="tab"][href="#product-details"],
.product-details-label,
.product-details-value,
.product-stock-container,
.product-availability,
.product-available,
.product-last-items,
.product-out-of-stock,
.product-unavailable,
.in-stock,
.product-quantity-available,
.stock-information,
.comments-note,
.comments-collapse-toggle,
.no-comments,
.be-first-to-write,
/* Elementos específicos da sua imagem */
.product-detail-tabs,
.nav-tabs-container,
.tab-content-container,
/* O contêiner branco principal dos detalhes do produto */
.white-container,
.bg-white-container,
.product-white-container,
.product-info-container,
.product-tab-container,
/* Contêiner do botão de comentário */
.product-comment-modal,
.write-your-review,
.review-button-container {
    background-color: var(--main-bg-color, inherit) !important;
    border-color: var(--main-bg-color, inherit) !important;
    box-shadow: none !important;
}

/* 5. SELETORES ESPECÍFICOS BASEADOS NOS IDS/CLASSES EXATOS DA IMAGEM */
/* Se você puder me fornecer os IDs/classes exatos, podemos tornar isso ainda mais preciso */
#product-details,
#comments,
.product-details,
.comments-container,
/* IDs/classes vistos na imagem */
.product-detail-name,
.product-manufacturer,
.product-reference,
.product-quantities,
.product-out-of-stock,
.product-features,
.product-specific-references,
.product-customization,
/* Contêiner branco com "Product Details" e "In stock 3 items" */
.product-details-card,
.product-info-card,
.product-detail-container,
.product-info-container,
/* Contêiner branco dos comentários */
.comments-card,
.comments-container,
.product-comments-card,
.product-comments-container {
    background-color: var(--main-bg-color, inherit) !important;
    border-color: var(--main-bg-color, inherit) !important;
    box-shadow: none !important;
}

/* Definir a variável CSS com a cor de fundo do conteúdo principal */
:root {
    --main-bg-color: inherit; /* Será substituído pelo JavaScript */
}