/* 🔸 Texto geral */
body, p, span, h1, h2, h3, h4, h5, h6 {
    color: #5C4433;
}

/* 🔸 Links */
a {
    color: #5C4433;
}
a:hover {
    color: #C97D60;
}

/* 🔸 Ícones do cabeçalho e rodapé */
svg, .icon, .header__cart svg, .header__search svg, .header__contact svg {
    fill: #5C4433;
}

/* 🔸 Botões padrão */
button, .btn, input[type="submit"] {
    background-color: #5C4433;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
button:hover, .btn:hover, input[type="submit"]:hover {
    background-color: #C97D60;
    color: #FFFFFF;
}

/* 🔸 Carrinho, lupa, telefone */
.header__cart svg,
.header__search svg,
.header__contact svg {
    fill: #5C4433;
}

/* 🔸 Preço dos produtos */
.price, .product__price, .product__price-value {
    color: #5C4433;
}

/* 🔸 Botões de compra */
.product__buy-button {
    background-color: #5C4433;
    color: #FFFFFF;
}
.product__buy-button:hover {
    background-color: #C97D60;
}

/* 🔸🔸🔸 Rodapé 🔸🔸🔸 */
.footer, 
.footer a, 
.footer p, 
.footer span, 
.footer li, 
.footer h3, 
.footer h4, 
.footer h5 {
    color: #5C4433 !important;
}

.footer a:hover {
    color: #C97D60 !important;
}

.footer h3, .footer h4 {
    color: #5C4433 !important;
    font-weight: bold;
}

.footer input[type="text"], 
.footer input[type="email"] {
    border: 1px solid #5C4433;
    color: #5C4433;
}

.footer input::placeholder {
    color: #5C4433;
}

/* 🔸 Corrige qualquer texto claro no rodapé */
.footer * {
    color: #5C4433 !important;
}

/* 🔸 Barra de frete grátis (ajustada para R$500) */
body::before {
    content: "FRETE GRÁTIS PARA TODO O BRASIL EM COMPRAS ACIMA DE R$500,00 COM O CUPOM 500WP";
    display: block;
    background-color: #5C4433;
    color: white;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    font-size: 14px;
    z-index: 999;
    position: relative;
}

/* 🔸 Reposicionamento da barra de busca */
.header__search {
    order: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
}
.header__search input {
    border: 1px solid #5C4433;
    padding: 5px 10px;
}
.header__search input::placeholder {
    color: #5C4433;
}
.header__search button, .header__search input[type="submit"] {
    background-color: #5C4433;
    color: #fff;
    border: none;
}
.header__search button:hover {
    background-color: #C97D60;
}

/* 🔸 Menu horizontal com todas as páginas */
.header__navigation, .menu__list {
    display: flex !important;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}
.menu__item {
    list-style: none;
}
.menu__item a {
    color: #5C4433 !important;
    text-decoration: none;
    font-weight: bold;
}
.menu__item a:hover {
    color: #C97D60 !important;
}

/* 🔸 Remove dropdown "Páginas" e deixa todos como links */
.menu__item.dropdown > .submenu {
    display: flex !important;
    position: static !important;
    box-shadow: none !important;
    background: none !important;
    gap: 30px;
}
.menu__item.dropdown > a::after {
    display: none;
}

/* 🔸 Layout Full Width */
body, 
.layout, 
.container, 
.wrapper, 
.l-container, 
.main-content, 
.page-content {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 🔸 Banners e imagens full width */
.banner, 
.banners, 
.banner img, 
.banners img, 
.l-banner, 
.l-banner img {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block;
    margin: 0 auto !important;
}

/* 🔸 Ajustes gerais de espaçamento */
.section, 
.page-section, 
.page-content, 
.content-area {
    padding: 60px 20px !important;
}

.product-list, 
.product-grid, 
.vitrine, 
.vitrine .listagem-item {
    gap: 30px !important;
}

.vitrine .listagem-item, 
.product-card, 
.box, 
.box-content {
    box-shadow: none !important;
    border: none !important;
}

/* 🔸 Header limpo e alinhado */
.header {
    border-bottom: 1px solid #eaeaea;
    background-color: #ffffff;
}
.header__content, 
.header__navigation {
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 🔸 Footer responsivo */
.footer__content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}
.footer__content > div {
    flex: 1 1 200px;
}

/* 🔸 Títulos centralizados */
h1, h2, h3.page-title {
    text-align: center;
}
/* 🔸 Remove todas as restrições de largura */
body, 
.layout, 
.container, 
.wrapper, 
.l-container, 
.main-content, 
.page-content, 
#layout, 
#page, 
#main, 
.l-page, 
.l-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 🔸 Remove fundo lateral que aparece */
body {
    background-color: #ffffff !important;
}

/* 🔸 Banners, imagens e seções */
.banner, 
.banners, 
.banner img, 
.banners img, 
.l-banner, 
.l-banner img {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto !important;
}

/* 🔸 Conteúdo central também ocupa toda largura */
.section, 
.page-section, 
.page-content, 
.content-area, 
.vitrine, 
.product-list, 
.product-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 60px 20px !important;
}

/* 🔸 Footer, header, menu e topo ocupando largura total */
.footer, 
.header, 
.header__content, 
.header__navigation, 
.footer__content {
    width: 100% !important;
    max-width: 100% !important;
}

/* 🔸 Remove sombras ou bordas que possam gerar divisões */
.vitrine .listagem-item, 
.product-card, 
.box, 
.box-content {
    box-shadow: none !important;
    border: none !important;
}

/* 🔸 Garante que não apareçam barras laterais */
html, body {
    overflow-x: hidden !important;
}
.product-variations select {
    background-color: #ffffff; /* Fundo branco */
    border: 1px solid #5C4433; /* Borda marrom */
    color: #5C4433; /* Texto marrom */
    padding: 8px;
    border-radius: 4px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Remove o cinza de opções internas no Chrome */
.product-variations select option {
    background-color: #ffffff;
    color: #5C4433;
}

/* Efeito no hover para dar leveza */
.product-variations select:hover {
    border-color: #C97D60;
    background-color: #ffffff;
}

/* Quando está selecionado */
.product-variations select:focus {
    outline: none;
    border-color: #C97D60;
    box-shadow: 0 0 0 2px rgba(201, 125, 96, 0.2);
}