/* Costura do WooCommerce no estilo do site. [CONSTRUA 27/08/2026]
   O site.css acima é o do lojaconstrua.com.br, sem alteração. Aqui embaixo só o
   que faz a grade, o card e os botões do Woo caírem dentro daquele desenho —
   traduzindo classe do Woo para o visual que o card-prod do site já tinha. */

.conteudo-loja { display: block; }

/* Sem o CSS do Storefront não existe mais quem segure a largura do conteúdo: o
   wrapper que sobra é o #primary.content-area, e é nele que entra o mesmo
   container de 1200px do site. Sem isto a grade sangra até a borda da tela.
   A home não passa por aqui de propósito — lá o hero é full por desenho. */
.conteudo-loja #primary.content-area,
.conteudo-loja > .woocommerce {
  max-width: 1200px; margin: 0 auto; padding: 34px 20px 46px; width: 100%;
}
.woocommerce-products-header { text-align: center; }
.woocommerce .woocommerce-result-count { color: var(--suave); font-size: .88rem; }
.woocommerce .woocommerce-ordering { float: right; }
.woocommerce nav.woocommerce-pagination { margin-top: 30px; text-align: center; clear: both; }
.woocommerce .page-title,
.conteudo-loja h1.entry-title {
  font-family: var(--f-tit); color: var(--azul); font-weight: 800; font-size: 2rem;
  text-align: center; margin: 4px 0 26px;
}
.woocommerce-breadcrumb { font-size: .82rem; color: var(--suave); margin-bottom: 18px; }
.woocommerce-breadcrumb a { color: var(--azul); }

/* --- grade: a mesma do site (auto-fill, 210px) --- */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: #fff; border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; transition: .18s;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--sombra2); transform: translateY(-3px); }
.woocommerce ul.products li.product a img {
  aspect-ratio: 1; object-fit: contain; background: #fff; margin-bottom: 10px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-txt); font-size: .9rem; font-weight: 500; color: var(--texto);
  line-height: 1.3; padding: 0; margin: 0 0 6px;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .amount {
  font-family: var(--f-tit); font-weight: 800; font-size: 1.18rem; color: var(--azul) !important;
  margin: 2px 0 2px; display: block;
}

/* --- pagamento: o à vista manda, o parcelado acompanha (02/09/2026) --- */
.cs-pgto {
  font-size: .74rem; color: var(--texto2, #6b7280); line-height: 1.3; margin: 0 0 10px;
}
.cs-pgto b { font-weight: 700; color: var(--texto); }
.cs-pgto .cs-juros { opacity: .8; }
.cs-avista {
  font-size: .82rem; color: var(--texto2, #6b7280); margin: -2px 0 4px; line-height: 1.3;
}
.woocommerce div.product .cs-pgto-ficha { font-size: .84rem; margin: 0 0 14px; }
@media (max-width: 600px) {
  .woocommerce ul.products li.product .cs-pgto .cs-onde { display: none; }
}
.construa-prazo {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; padding: .2em .6em; border-radius: 6px;
  background: var(--cinza2); color: var(--azul); margin-bottom: 6px; align-self: flex-start;
}

/* --- as duas ações: comprar manda, orçar acompanha --- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin: auto 0 0; padding: 11px 14px; border-radius: 10px;
  font-family: var(--f-tit); font-weight: 700; font-size: .92rem;
  background: var(--laranja); color: #fff; border: 0; transition: .18s;
}
.woocommerce ul.products li.product .button:hover { background: var(--laranja2); color: #fff; }
.woocommerce ul.products li.product .added_to_cart { background: var(--azul); margin-top: 6px; }
.add-orc { margin-top: 8px; }

/* botão de orçamento na página do produto, ao lado do comprar */
.add-orc.single {
  width: auto; margin: 10px 0 0 10px; vertical-align: top; display: inline-flex;
}
.woocommerce div.product form.cart .button {
  background: var(--laranja); font-family: var(--f-tit); font-weight: 700;
  border-radius: 10px; padding: 13px 26px;
}
.woocommerce div.product form.cart .button:hover { background: var(--laranja2); }
.woocommerce div.product .product_title { font-family: var(--f-tit); color: var(--azul); font-weight: 800; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--azul); font-family: var(--f-tit); font-weight: 800; font-size: 1.8rem;
}

/* --- carrinho, checkout e conta: só o suficiente para não destoar --- */
.woocommerce table.shop_table { border-radius: 12px; border-color: var(--linha); }
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 { font-family: var(--f-tit); color: var(--azul); font-weight: 700; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce .button.alt {
  background: var(--azul); color: #fff; font-family: var(--f-tit); font-weight: 700;
  border-radius: 10px; padding: 12px 22px;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--azul-esc); color: #fff; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info {
  border-top-color: var(--azul); border-radius: 10px;
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--azul); }

/* --- ordenação e paginação --- */
.woocommerce .woocommerce-ordering select, .woocommerce .orderby {
  font-family: var(--f-txt); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px;
}
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: inline-flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--linha); border-radius: 8px; padding: 8px 14px; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--azul); color: #fff; border-color: var(--azul);
}

/* --- carrinho no topo, ao lado do orçamento --- */
.carrinho-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px;
  background: var(--azul); color: #fff; font-family: var(--f-tit); font-weight: 700; font-size: .92rem;
  position: relative; transition: .18s;
}
.carrinho-btn:hover { background: var(--azul-esc); color: #fff; }
.carrinho-btn .car-count {
  background: #fff; color: var(--azul); min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800;
}
@media (max-width: 980px) { .carrinho-btn .lbl { display: none; } }

@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .woocommerce ul.products li.product { padding: 10px; }
}

/* O Storefront imprime a barra de ordenação DUAS vezes — antes e depois da
   grade — e cada uma carrega uma paginação. Quem escondia a de cima era o CSS
   dele, que saiu daqui. Então: em cima ficam só a contagem e a ordenação;
   a paginação aparece uma vez só, embaixo, que é onde se procura por ela. */
.storefront-sorting { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.storefront-sorting:first-of-type .woocommerce-pagination { display: none; }
.storefront-sorting:last-of-type { margin: 26px 0 0; justify-content: center; }
.storefront-sorting:last-of-type .woocommerce-result-count,
.storefront-sorting:last-of-type .woocommerce-ordering { display: none; }
.woocommerce .woocommerce-ordering { float: none; margin: 0; }
/* No DOM a ordenação vem antes da contagem; na tela o esperado é o contrário. */
.storefront-sorting .woocommerce-result-count { order: 1; }
.storefront-sorting .woocommerce-ordering { order: 2; }

/* ============================================================
   GRADE — 4 por linha no desktop.
   Estava em auto-fill de 210px, o que dava 5 colunas em 1200px e deixava o card
   estreito demais para o nome comprido que vem da Cofema. Quatro respiram melhor.
   ============================================================ */
.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   BUSCA NO TOPO
   O site nasceu sem busca porque o catálogo era pequeno e navegável por
   segmento. Com a loja, procurar por nome é o primeiro gesto de quem chega.
   Vai para o post_type=product, então o resultado é produto — não página.
   ============================================================ */
.busca-topo { display: flex; align-items: center; flex: 1; max-width: 300px; margin: 0 4px; position: relative; }
.busca-topo input[type="search"] {
  width: 100%; border: 1px solid var(--linha); border-radius: 12px; background: var(--cinza);
  padding: 11px 40px 11px 15px; font-family: var(--f-txt); font-size: .92rem; color: var(--texto);
  transition: .18s; -webkit-appearance: none;
}
.busca-topo input[type="search"]:focus {
  outline: 0; border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(18,51,107,.09);
}
.busca-topo button {
  position: absolute; right: 6px; background: transparent; border: 0; cursor: pointer;
  color: var(--azul); display: flex; padding: 6px;
}
.busca-topo button svg { width: 19px; height: 19px; }
@media (max-width: 1180px) {
  .topo-in { flex-wrap: wrap; }
  .busca-topo { order: 9; max-width: none; flex-basis: 100%; margin: 10px 0 2px; }
}

/* ============================================================
   PÁGINA DO PRODUTO
   O layout de duas colunas volta do CSS do Woo; aqui é só vestir com a
   identidade e dar ar ao que ficava espremido.
   ============================================================ */
.woocommerce div.product { padding-top: 10px; }
.woocommerce div.product div.images { margin-bottom: 2em; }
.woocommerce div.product div.images img { border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.woocommerce div.product .product_title {
  font-family: var(--f-tit); color: var(--azul); font-weight: 800; font-size: 1.7rem; line-height: 1.25;
}
.woocommerce div.product .summary > .price { margin: 14px 0 2px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--suave); font-size: .95rem; }
.woocommerce div.product form.cart { margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce div.product form.cart .qty {
  width: 74px; padding: 12px 8px; border: 1px solid var(--linha); border-radius: 10px;
  font-family: var(--f-txt); font-weight: 600; text-align: center;
}
.add-orc.single { margin: 0; }
.woocommerce div.product .product_meta {
  border-top: 1px solid var(--linha); margin-top: 16px; padding-top: 14px;
  font-size: .85rem; color: var(--suave);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .product_meta a { color: var(--azul); font-weight: 600; }

/* abas: o Woo desenha como lista; aqui viram abas de verdade */
.woocommerce div.product .woocommerce-tabs { margin-top: 30px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 0 0 4px; margin: 0 0 18px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--linha); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--cinza); border: 1px solid var(--linha); border-radius: 10px 10px 0 0;
  font-family: var(--f-tit); font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--azul); padding: 10px 18px; }
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--f-tit); color: var(--azul); font-size: 1.15rem; font-weight: 700;
}

/* relacionados: a mesma grade da vitrine, com folga em cima */
.woocommerce .related, .woocommerce .upsells { margin-top: 44px; clear: both; }
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  font-family: var(--f-tit); color: var(--azul); font-weight: 800; font-size: 1.35rem; margin-bottom: 18px;
}
.woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns: repeat(4, 1fr); }
/* ⚠️ E os relacionados precisam DESCER de coluna junto com a vitrine. A regra de
   4 colunas acima não tem media query e é mais específica que a da grade geral,
   então ela vencia em qualquer largura: no celular, quatro cards de 147px dentro
   de 335px empurravam a página inteira 110px para o lado.
   [CONSTRUA 30/08/2026, achado pelo JP] */
@media (max-width: 1024px) {
  .woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* --- acertos de 27/08, depois de ver a página de produto pronta --- */

/* O título do produto herdava o text-align:center que vale para o título de
   arquivo (Loja, categoria). Em ficha de produto o nome é leitura, não cabeçalho
   de seção — e leitura começa na esquerda. */
.woocommerce div.product .product_title,
.woocommerce div.product h1.entry-title { text-align: left; }

/* O topo ganhou a busca e ficou sem folga: o menu quebrava "Sobre nós" e
   "Como chegar" em duas linhas, e a busca era espremida até virar só a lupa. */
.topo-in { gap: 14px; }
.menu { flex-shrink: 0; }
.menu a { white-space: nowrap; }
.busca-topo { min-width: 210px; }
.topo-acoes { flex-shrink: 0; gap: 8px; }
@media (max-width: 1320px) {
  .topo-in { flex-wrap: wrap; }
  .busca-topo { order: 9; max-width: none; flex-basis: 100%; margin: 12px 0 2px; }
}

/* Com a busca no topo, o flex passou a espremer o logo até virar um selo.
   Ele é a única peça do topo que não pode ceder espaço. */
.logo-box { flex-shrink: 0; }
.logo-box img { height: 48px; width: auto; max-width: none; }
@media (max-width: 700px) { .logo-box img { height: 38px; } }

/* Como o item é vendido — informação de atacado traduzida para o cliente final.
   Fica discreta: quem compra 1 não precisa pensar nisso, e quem vai levar caixa
   fechada precisa saber ANTES de chegar no carrinho. */
.construa-venda { display: block; font-size: .78rem; color: var(--suave); margin: 2px 0 6px; }
.product_meta .forma_venda_wrapper { display: block; margin-bottom: 4px; }
.product_meta .forma-venda { color: var(--texto); font-weight: 600; }
.product_meta .sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto); }

/* ============================================================
   TARJA DE DESTAQUES — cinza metálico, no lugar da barra de contatos.
   O gradiente de três paradas com a borda mais escura embaixo é o que dá a
   leitura de metal escovado sem usar imagem. Texto em Sora, caixa alta com
   tracking, como o resto dos rótulos da casa.
   ============================================================ */
.barra-destaques {
  /* Degradê com mais curso do que o de 27/08 (#f7f8fa→#d4d9e1): claro quase
     branco em cima, cinza definido embaixo. Assim a tarja termina onde o branco
     do topo começa, em vez de escorrer para dentro dele — era o que fazia a
     divisão sumir. [CONSTRUA 30/08/2026] */
  background: linear-gradient(180deg, #fcfdfe 0%, #f0f3f7 38%, #dfe4ec 78%, #ccd3de 100%);
  border-bottom: 1px solid #bcc5d2;
  /* a luz na aresta de cima é o que dá o metal; a sombra embaixo é a separação */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 9px rgba(12,35,80,.07);
  /* acima do header (z-index 50) só para a sombra pousar sobre ele */
  position: relative; z-index: 51;
}
.barra-destaques .container {
  display: flex; align-items: stretch; justify-content: space-between; gap: 0;
  padding-top: 0; padding-bottom: 0;
}
.bd-item {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex: 1; padding: 11px 8px; position: relative;
}
/* divisória fininha entre um destaque e outro, no gosto de placa metálica */
.bd-item + .bd-item::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  border-left: 1px solid rgba(44,53,66,.16); box-shadow: 1px 0 0 rgba(255,255,255,.7);
}
.bd-item span {
  font-family: var(--f-tit); font-weight: 700; font-size: .73rem;
  letter-spacing: .07em; text-transform: uppercase; color: #2c3542; white-space: nowrap;
}
.bd-curto { display: none; }   /* a versão curta só existe no celular */
.bd-ico { width: 19px; height: 19px; color: var(--laranja); flex-shrink: 0; }

@media (max-width: 900px) {
  /* Uma tarja só, sem andar de baixo e sem divisória: no celular a faixa tem que
     ser uma linha que se lê de relance, não um quadro com quatro frases. Os dois
     destaques que ficam estão marcados em DESTAQUES_TOPO. */
  .barra-destaques .container { display: flex; justify-content: center; gap: 26px; }
  .bd-fora-do-cel { display: none; }
  .bd-item { flex: 0 0 auto; padding: 9px 0; }
  .bd-item + .bd-item::before { display: none; }
  .bd-longo { display: none; }
  .bd-curto { display: inline; }
  .bd-item span { font-size: .68rem; letter-spacing: .04em; white-space: nowrap; }
  .bd-ico { width: 16px; height: 16px; }
  /* trava de segurança: a tarja jamais empurra a página para o lado */
  .barra-destaques { overflow: hidden; }
}

/* ============================================================
   HERO — altura pela PROPORÇÃO da arte, não por pixel fixo.
   O site vinha com .hc-slide{height:560px} e object-fit:cover, o que corta as
   laterais da imagem para preencher. Isso funcionava com foto de fachada, onde
   perder um pedaço não faz falta. Com banner de campanha NÃO serve: o texto está
   dentro da arte e some no corte. Então o slide passa a ter a mesma proporção
   dos arquivos — 3:1 no desktop, 2:1 no celular — e nada é cortado.
   Trocar a proporção das artes = trocar estes dois aspect-ratio.
   ============================================================ */
.hero-carousel .hc-slide { height: auto; aspect-ratio: 3 / 1; }
.hero-carousel .hc-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  /* O site.css tem `.hc-slide{min-height:70vh}` neste mesmo breakpoint: com o
     banner retrato antigo (1080x1350), ocupar 70% da tela era o efeito desejado.
     Com arte 2:1 esse mínimo estica o slide e o object-fit:cover come as
     laterais — foi o que cortou o "Araldite". Zerar o mínimo devolve o comando
     para a proporção da arte. */
  .hero-carousel .hc-slide { aspect-ratio: 2 / 1; min-height: 0; }
}

/* ============================================================
   RESPIRO DO TOPO
   A tarja estava encostada no logo e o cabeçalho ficava apertado; e no celular
   a busca, que cai numa linha própria, encostava no banner. Um pouco de ar em
   cada emenda resolve os dois — é o mesmo defeito visto de dois lugares.
   ============================================================ */
.topo { padding: 6px 0; }
.topo-in { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 1320px) {
  .busca-topo { margin: 12px 0 6px; }
}
@media (max-width: 860px) {
  .topo-in { padding-bottom: 10px; }
  .busca-topo { margin: 10px 0 4px; }
  .hero-carousel { margin-top: 4px; }
}

/* ============================================================
   FAIXA DE CONFIANÇA + NEWSLETTER  ·  [CONSTRUA 27/08/2026]
   Entrou no lugar da faixa "Precisa de ajuda ou um orçamento?".
   Fundo claro de propósito: é a emenda entre a loja (branca) e o rodapé
   (escuro), e serve de respiro antes do bloco pesado.
   ============================================================ */
.faixa-confianca {
  background: linear-gradient(180deg, #fbfcfd 0%, #eef1f6 100%);
  border-top: 1px solid var(--linha);
}
.faixa-confianca .container {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
  align-items: center; padding-top: 40px; padding-bottom: 40px;
}

.fc-news h3 {
  font-family: var(--f-tit); font-weight: 800; font-size: 1.5rem;
  color: var(--azul); margin: 0 0 6px;
}
.fc-news p { color: var(--suave); margin: 0 0 16px; font-size: .95rem; }
.news-form { display: flex; gap: 10px; max-width: 460px; }
.news-form input[type="email"] {
  flex: 1; border: 1px solid var(--linha); border-radius: 12px; background: #fff;
  padding: 13px 16px; font-family: var(--f-txt); font-size: .95rem; color: var(--texto);
}
.news-form input[type="email"]:focus {
  outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,51,107,.1);
}
.news-form button {
  border: 0; border-radius: 12px; background: var(--laranja); color: #fff; cursor: pointer;
  font-family: var(--f-tit); font-weight: 700; font-size: .95rem; padding: 13px 22px;
  transition: .18s; white-space: nowrap;
}
.news-form button:hover { background: var(--laranja2); }
.news-aviso { margin-top: 10px; font-size: .88rem; font-weight: 600; }
.news-aviso.ok { color: #1c7a3f; }
.news-aviso.erro { color: var(--laranja); }

/* --- selos --- */
.fc-selos { display: flex; flex-direction: column; gap: 12px; }
.selo {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--linha); border-radius: 14px; padding: 14px 18px;
}
.selo-icones { display: flex; gap: 8px; color: var(--azul); flex-shrink: 0; }
.sl-ico { width: 26px; height: 26px; }
.selo-txt { display: flex; flex-direction: column; line-height: 1.35; }
.selo-txt b { font-family: var(--f-tit); font-weight: 700; font-size: .95rem; color: var(--texto); }
.selo-txt span { font-size: .82rem; color: var(--suave); }

/* ============================================================
   SELO DO GOOGLE
   Desenho próprio: barra da marca na LATERAL (não tarja no topo), leitura na
   horizontal e botão discreto — o card de referência que o JP mandou é vertical,
   centralizado e com botão grande vermelho. Mesma informação, cara da casa.
   As estrelas são duas camadas: as vazias por baixo, as cheias por cima com a
   largura em % da nota — é assim que meia estrela aparece sem SVG extra.
   ============================================================ */
.selo-google {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas:
    "logo titulo btn" "logo linha btn" "logo total btn";
  gap: 2px 16px; align-items: center;
  background: #fff; border: 1px solid var(--linha); border-left: 5px solid var(--azul);
  border-radius: 14px; padding: 16px 18px; transition: .18s;
}
.selo-google:hover { border-color: var(--linha); border-left-color: var(--laranja); box-shadow: var(--sombra); }
.sg-logo { grid-area: logo; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: #f4f6fa; }
.sg-g { width: 22px; height: 22px; }
.sg-titulo { grid-area: titulo; font-family: var(--f-tit); font-weight: 700; font-size: .95rem;
  color: var(--texto); line-height: 1.2; }
.sg-linha { grid-area: linha; display: flex; align-items: center; gap: 10px; }
.sg-nota { font-family: var(--f-tit); font-weight: 800; font-size: 1.5rem; color: var(--azul); line-height: 1; }
.sg-estrelas { position: relative; display: inline-block; height: 15px; }
.sg-estrelas .sg-vazias { display: flex; color: #d8dee8; }
.sg-estrelas .sg-cheias { position: absolute; inset: 0; display: flex; overflow: hidden; color: #f2b01e; }
/* as duas classes: o helper ico_estrela() nasceu com o prefixo sl- (de selo) e o
   card usa sg- (de selo google). Sem casar os dois, o SVG fica sem tamanho e as
   estrelas somem — foi o que aconteceu. */
.sg-estrela, .sl-estrela { width: 15px; height: 15px; flex-shrink: 0; }
.sg-total { grid-area: total; font-size: .8rem; color: var(--suave); }
.sg-btn {
  grid-area: btn; align-self: center; white-space: nowrap;
  font-family: var(--f-tit); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--azul);
  border: 1px solid var(--azul); border-radius: 10px; padding: 9px 14px; transition: .18s;
}
.selo-google:hover .sg-btn { background: var(--azul); color: #fff; }
.selo-google.sem-nota { grid-template-areas: "logo titulo btn" "logo total btn"; }

@media (max-width: 900px) {
  .faixa-confianca .container { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; padding-bottom: 30px; }
  .news-form { flex-direction: column; max-width: none; }
  .news-form button { width: 100%; }
  .selo-google { grid-template-columns: auto 1fr; grid-template-areas: "logo titulo" "logo linha" "total total" "btn btn"; }
  .selo-google.sem-nota { grid-template-areas: "logo titulo" "total total" "btn btn"; }
  .sg-btn { text-align: center; margin-top: 8px; }
}

/* ============================================================
   FRETE NA FICHA DO PRODUTO — [CONSTRUA 30/08/2026]
   Fica logo abaixo do meta (código de barras, forma de venda, categoria),
   porque a pergunta "chega quando e por quanto?" vem depois de conferir o
   item e antes de decidir. Card cinza, para se ler como uma ferramenta dentro
   da ficha e não como mais um bloco de texto.
   O botão é AZUL de propósito: o vermelho da casa é do "Comprar agora", e dois
   botões vermelhos lado a lado disputariam o mesmo gesto.
   ============================================================ */
.frete-calc {
  margin-top: 16px; padding: 16px 18px 14px;
  background: var(--cinza); border: 1px solid var(--linha); border-radius: var(--radius);
}
.frete-topo {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-family: var(--f-tit); font-weight: 700; font-size: .95rem; color: var(--azul);
}
.frete-ico { width: 19px; height: 19px; color: var(--laranja); flex: none; }
.frete-linha { display: flex; gap: 8px; }
.frete-cep {
  width: 135px; flex: none; border: 1px solid var(--linha); border-radius: 10px; background: #fff;
  padding: 11px 13px; font-family: var(--f-txt); font-size: .95rem; font-weight: 600;
  color: var(--texto); letter-spacing: .02em; transition: .18s; -webkit-appearance: none;
}
.frete-cep:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,51,107,.09); }
.frete-cep::placeholder { font-weight: 400; color: #a9b2c0; letter-spacing: normal; }
.frete-btn {
  background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 11px 20px; cursor: pointer;
  font-family: var(--f-tit); font-weight: 700; font-size: .92rem; transition: .18s;
}
.frete-btn:hover { background: var(--azul2); }
.frete-btn:disabled { opacity: .6; cursor: default; }

.frete-saida:not(:empty) { margin-top: 12px; }
.frete-aviso { font-size: .88rem; color: var(--suave); margin: 0; }
.frete-lista { list-style: none; margin: 0; padding: 0; }
.frete-op {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--cinza2);
}
.frete-op:last-child { border-bottom: 0; padding-bottom: 0; }
.frete-op-nome { font-size: .92rem; font-weight: 600; color: var(--texto); }
/* o prazo desce para a segunda linha: transportadora e prazo são duas respostas
   diferentes, e lidas em sequência a linha fica mais rápida de varrer. */
.frete-op-prazo { display: block; font-size: .8rem; font-weight: 400; color: var(--suave); }
.frete-op-preco {
  font-family: var(--f-tit); font-weight: 700; font-size: 1rem; color: var(--azul); white-space: nowrap;
}
/* [CONSTRUA 31/08/2026] A caixa passou a mostrar também a entrega da loja e a
   retirada, que costumam sair de graça: "Grátis" em verde separa na hora o que
   não custa nada do que custa, sem o cliente ter que ler R$ 0,00 e traduzir. */
.frete-op-gratis { color: #1a7f4b; }
.frete-ajuda {
  display: inline-block; margin-top: 11px; font-size: .8rem; color: var(--suave);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cinza2);
}
.frete-ajuda:hover { color: var(--azul); text-decoration-color: var(--azul); }

@media (max-width: 480px) {
  .frete-linha { flex-wrap: wrap; }
  .frete-cep { flex: 1 1 auto; width: auto; }
}

/* ============================================================
   CARRINHO — [CONSTRUA 30/08/2026]
   A página voltou para o carrinho clássico ([woocommerce_cart]): o carrinho de
   blocos do Woo 11 não tem onde digitar o CEP nem onde escolher a transportadora
   — passou as duas coisas para o checkout. Em loja de material de construção o
   frete é parte da decisão, não do arremate: quem monta um carrinho de itens
   pesados precisa ver o valor da entrega antes de ir para o cadastro.
   O clássico traz de volta o cálculo aqui, e o resto da loja já é clássico —
   ficha de produto e vitrine —, então é também o que estava fora do lugar.
   ============================================================ */
.woocommerce-cart .entry-content > .woocommerce {
  display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 26px; align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* a tabela dos itens */
.woocommerce-cart table.shop_table {
  border: 1px solid var(--linha); border-radius: var(--radius); border-collapse: separate;
  border-spacing: 0; overflow: hidden; margin: 0;
}
.woocommerce-cart table.shop_table thead th {
  background: var(--cinza); border-bottom: 1px solid var(--linha);
  font-family: var(--f-tit); font-weight: 700; font-size: .78rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--suave); padding: 13px 12px;
}
.woocommerce-cart table.shop_table td { border-top: 1px solid var(--linha); padding: 14px 12px; vertical-align: middle; }
.woocommerce-cart table.shop_table tbody tr:first-child td { border-top: 0; }
.woocommerce-cart .product-thumbnail img { width: 58px; border: 1px solid var(--linha); border-radius: 9px; }
.woocommerce-cart .product-name a { font-weight: 600; color: var(--texto); }
.woocommerce-cart .product-name a:hover { color: var(--azul); }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal { white-space: nowrap; }
.woocommerce-cart td.product-subtotal { font-family: var(--f-tit); font-weight: 700; color: var(--azul); }
.woocommerce-cart .product-quantity .qty {
  width: 68px; padding: 9px 6px; border: 1px solid var(--linha); border-radius: 9px;
  font-family: var(--f-txt); font-weight: 600; text-align: center;
}
.woocommerce-cart td.product-remove a.remove {
  color: var(--suave) !important; font-size: 1.3rem; line-height: 1;
}
.woocommerce-cart td.product-remove a.remove:hover { color: var(--laranja) !important; background: transparent; }

/* a linha de baixo: cupom de um lado, atualizar do outro */
.woocommerce-cart td.actions { background: var(--cinza); padding: 14px 12px; }
.woocommerce-cart td.actions .coupon { display: flex; gap: 8px; float: none; }
.woocommerce-cart td.actions .coupon label { display: none; }
.woocommerce-cart td.actions #coupon_code {
  width: 190px; padding: 11px 13px; border: 1px solid var(--linha); border-radius: 10px;
  font-family: var(--f-txt); font-size: .92rem; background: #fff;
}
.woocommerce-cart td.actions #coupon_code:focus {
  outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,51,107,.09);
}
.woocommerce-cart td.actions .button {
  background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 11px 18px;
  font-family: var(--f-tit); font-weight: 700; font-size: .9rem; transition: .18s;
}
.woocommerce-cart td.actions .button:hover { background: var(--azul2); color: #fff; }
/* "Atualizar carrinho" só acorda quando a quantidade muda — e precisa PARECER
   dormindo até lá: cinza sobre cinza, sem borda, era ilegível. */
.woocommerce-cart td.actions .button[disabled],
.woocommerce-cart td.actions .button:disabled {
  background: #fff; color: var(--suave); border: 1px solid var(--linha); opacity: 1; cursor: default;
}

/* o resumo, à direita */
.woocommerce-cart .cart-collaterals { width: auto; float: none; }
.woocommerce-cart .cart_totals { width: auto !important; float: none; }
.woocommerce-cart .cart_totals > h2 {
  font-family: var(--f-tit); color: var(--azul); font-weight: 800; font-size: 1.2rem; margin-bottom: 12px;
}
.woocommerce-cart .cart_totals table.shop_table { background: var(--cinza); }
.woocommerce-cart .cart_totals th {
  font-family: var(--f-tit); font-weight: 700; font-size: .9rem; color: var(--texto);
  border-top: 1px solid var(--linha); padding: 13px 14px; width: 27%; vertical-align: top;
}
.woocommerce-cart .cart_totals td { padding: 13px 14px; }
.woocommerce-cart .cart_totals tr:first-child th, .woocommerce-cart .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { font-size: 1.05rem; }
.woocommerce-cart .cart_totals .order-total .amount { font-family: var(--f-tit); font-weight: 800; color: var(--azul); }

/* as transportadoras: uma escolha por linha, valor destacado */
.woocommerce-cart #shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce-cart #shipping_method li {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 0;
  border-bottom: 1px solid var(--cinza2);
}
.woocommerce-cart #shipping_method li:last-child { border-bottom: 0; }
.woocommerce-cart #shipping_method input.shipping_method { margin: 3px 0 0; flex: none; accent-color: var(--azul); }
.woocommerce-cart #shipping_method label { font-size: .88rem; line-height: 1.4; color: var(--texto); cursor: pointer; }
.woocommerce-cart #shipping_method label .amount { font-weight: 700; color: var(--azul); white-space: nowrap; }
.woocommerce-cart .woocommerce-shipping-destination { font-size: .82rem; color: var(--suave); margin: 9px 0 4px; }
.woocommerce-cart .shipping-calculator-button {
  display: inline-block; font-size: .85rem; font-weight: 600; color: var(--azul);
  text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-cart .shipping-calculator-form { margin-top: 10px; }
.woocommerce-cart .shipping-calculator-form input, .woocommerce-cart .shipping-calculator-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px;
  font-family: var(--f-txt); font-size: .9rem; background: #fff;
}
.woocommerce-cart .shipping-calculator-form .button {
  background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px;
  font-family: var(--f-tit); font-weight: 700; font-size: .88rem; margin-top: 8px;
}

/* O CSS do Woo pendura um glifo da fonte de ícones dele depois do link, e essa
   fonte não carrega aqui — saía um quadradinho solto ao lado de "Mudar endereço". */
.woocommerce-cart .shipping-calculator-button::after { display: none; }

/* o botão que leva ao pagamento: é o CTA da página, então é o vermelho da casa
   (o Woo entrega roxo #a46497, que não é de lugar nenhum daqui). */
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block; width: 100%; text-align: center;
  background: var(--laranja); color: #fff; border-radius: 12px; padding: 15px 20px;
  font-family: var(--f-tit); font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  box-shadow: var(--sombra); transition: .18s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--laranja2); box-shadow: var(--sombra2); transform: translateY(-1px);
}

/* carrinho vazio: o convite é voltar para a vitrine */
.woocommerce-cart .cart-empty { font-size: 1.05rem; color: var(--suave); }
.woocommerce-cart .return-to-shop .button {
  background: var(--azul); color: #fff; border-radius: 11px; padding: 12px 22px;
  font-family: var(--f-tit); font-weight: 700;
}

@media (max-width: 980px) {
  .woocommerce-cart .entry-content > .woocommerce { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .woocommerce-cart td.actions .coupon { flex-wrap: wrap; }
  .woocommerce-cart td.actions #coupon_code { width: 100%; }
  .woocommerce-cart td.actions .coupon .button { width: 100%; }
}

/* ============================================================
   BARRA DE CATEGORIAS DA HOME — [CONSTRUA 30/08/2026]
   No lugar dos oito cards de foto, que ocupavam duas telas de rolagem para
   dizer nove palavras. Aqui o mapa da loja cabe numa faixa: ícone em cima,
   nome embaixo, contagem discreta. Ícone ACIMA e não ao lado porque
   "Jardinagem & Acessórios" em uma linha só empurraria a faixa para fora
   da largura do site.
   ============================================================ */
/* Vem ANTES do banner desde 30/08. Colada ao topo ela fecha o bloco de
   navegação; a sombra na base é o que faz esse bloco pousar sobre o banner em
   vez de encostar nele. */
.cats-faixa {
  background: #fff; border-bottom: 1px solid var(--linha); padding: 18px 0;
  position: relative; z-index: 2;
  box-shadow: 0 5px 14px rgba(12,35,80,.07);
}

.cats-lista {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
}
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 6px 12px; border-radius: 12px; position: relative;
  text-align: center; transition: .2s;
}
.cat-ico-box {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
  background: var(--cinza); color: var(--azul); transition: .2s;
}
.cat-ico-box .cat-ico { width: 26px; height: 26px; transition: .2s; }
.cat-nome {
  font-family: var(--f-tit); font-weight: 600; font-size: .8rem; line-height: 1.25;
  color: var(--texto); transition: .18s;
  /* dois nomes cabem em uma linha e sete em duas. Sem esta altura mínima a
     contagem sobe nesses dois e a faixa fica com o rodapé serrilhado. */
  display: flex; align-items: center; min-height: 2.5em;
}
.cat-qtd { font-size: .7rem; font-weight: 600; color: var(--suave); transition: .18s; }
/* o risco da marca cresce da esquerda, como no menu do topo */
.cat-item::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--laranja); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: .24s;
}
.cat-item:hover { background: var(--cinza); transform: translateY(-3px); }
.cat-item:hover::after { transform: scaleX(1); }
.cat-item:hover .cat-ico-box {
  background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(18,51,107,.22);
}
.cat-item:hover .cat-ico-box .cat-ico { transform: scale(1.08); }
.cat-item:hover .cat-nome { color: var(--azul); }
.cat-item:hover .cat-qtd { color: var(--laranja); }
.cat-item:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* o botão só existe no celular */
.cats-btn { display: none; }

@media (max-width: 1100px) {
  .cats-lista { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 860px) {
  /* No celular a faixa vira um botão. Nove itens lado a lado ali seriam uma
     tira de rolagem lateral — e o que fica fora da primeira tela numa tira
     dessas praticamente não é clicado. */
  .cats-faixa { padding: 14px 0; }
  .cats-btn {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: #fff; border: 1.5px solid var(--linha); border-radius: 12px;
    padding: 13px 16px; cursor: pointer; transition: .18s;
    font-family: var(--f-tit); font-weight: 700; font-size: .95rem; color: var(--azul);
  }
  .cats-btn:hover { border-color: var(--azul); background: var(--cinza); }
  .cb-esq { display: inline-flex; align-items: center; gap: 10px; }
  .cb-ico { width: 19px; height: 19px; color: var(--laranja); }
  .cb-seta {
    width: 9px; height: 9px; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
    transform: rotate(45deg) translate(-2px, -2px); transition: .22s;
  }
  .cats.aberto .cb-seta { transform: rotate(-135deg) translate(-3px, -3px); }
  .cats.aberto .cats-btn { border-color: var(--azul); border-radius: 12px 12px 0 0; }

  .cats-lista {
    display: none; grid-template-columns: 1fr; gap: 0;
    border: 1.5px solid var(--azul); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden;
  }
  .cats.aberto .cats-lista { display: grid; }
  .cat-item {
    flex-direction: row; align-items: center; gap: 12px; text-align: left;
    padding: 12px 14px; border-radius: 0; border-bottom: 1px solid var(--linha);
  }
  .cat-item:last-child { border-bottom: 0; }
  .cat-item:hover { transform: none; }
  .cat-item::after { display: none; }
  .cat-ico-box { width: 38px; height: 38px; border-radius: 11px; flex: none; }
  .cat-ico-box .cat-ico { width: 21px; height: 21px; }
  .cat-nome { flex: 1; font-size: .92rem; min-height: 0; }
  .cat-qtd {
    background: var(--cinza); border-radius: 20px; padding: 3px 10px; font-size: .75rem;
  }
}

/* ============================================================
   AS TRÊS VITRINES DA HOME — [CONSTRUA 30/08/2026]
   Título à esquerda com o risco da marca, no lugar do bloco centralizado com
   sobretítulo: em três seções seguidas o centralizado vira eco. A alternância
   branco/cinza é o que separa uma vitrine da outra sem precisar de moldura.
   ============================================================ */
section.bloco.vitrine { padding: 46px 0; }
.sec-tit { margin-bottom: 24px; }
.sec-tit h2 {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--f-tit); font-weight: 800; font-size: 1.55rem; color: var(--azul);
}
.sec-tit h2::before {
  content: ""; width: 5px; height: 27px; border-radius: 3px; background: var(--laranja); flex: none;
}
@media (max-width: 700px) {
  section.bloco.vitrine { padding: 34px 0; }
  .sec-tit h2 { font-size: 1.3rem; }
}

/* ============================================================
   BOTÃO + QUANTIDADE NO CARD — [CONSTRUA 30/08/2026]
   Adicionou, o botão encolhe para o ícone e o controle de quantidade entra ao
   lado. Vale para as duas frentes: comprar (carrinho do Woo) e orçar
   (localStorage). Em material de construção quase nada se leva em 1 unidade —
   são 6 metros de cano, 12 lâmpadas, 20 parafusos —, e mandar o cliente ao
   carrinho para corrigir isso é onde ele desiste.
   ============================================================ */
.acao { display: flex; align-items: stretch; gap: 8px; }
/* o `margin:auto 0 0` que colava o botão no fim do card passa para a linha */
.acao-cart { margin: auto 0 0; }
.acao-orc  { margin-top: 8px; }
.woocommerce ul.products li.product .acao > .button,
.acao > .add-orc { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }

/* O Woo pendura um "Ver carrinho" logo depois do botão. Com o botão encolhido
   levando ao carrinho, ele vira o mesmo link duas vezes na mesma linha. */
.acao .added_to_cart { display: none !important; }

/* encolhido: fica o ícone, sai a palavra */
.woocommerce ul.products li.product .acao.com-qtd > .button,
.acao.com-qtd > .add-orc { flex: 0 0 46px; padding-left: 0; padding-right: 0; gap: 0; }
.acao.com-qtd .acao-txt { display: none; }
.acao.com-qtd > .button svg,
.acao.com-qtd > .add-orc svg { width: 19px; height: 19px; }

.qtd-ctrl {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1.5px solid var(--linha); border-radius: 10px; overflow: hidden;
}
.qc-btn {
  width: 40px; align-self: stretch; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: .15s;
  font-family: var(--f-tit); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--azul);
}
.qc-btn:hover { background: var(--cinza); }
.qc-btn svg { width: 17px; height: 17px; }
/* a lixeira só aparece quando resta 1: tirar do carrinho é um clique, não uma
   descoberta de que o "menos" também remove */
.qc-btn.qc-lixo { color: var(--laranja); }
.qc-btn.qc-lixo:hover { background: rgba(193, 53, 42, .10); }
.qc-num {
  font-family: var(--f-tit); font-weight: 800; font-size: .98rem; color: var(--texto);
  min-width: 1.6em; text-align: center;
}
/* enquanto o servidor responde: não dá para contar dois cliques como um */
.qtd-ctrl.ocupado { opacity: .5; pointer-events: none; }

/* O botão encolhido do carrinho é <a> do Woo com a classe trocada pelo JS —
   herda o vermelho do card, mas precisa centrar o ícone sozinho. */
.woocommerce ul.products li.product .acao-btn-min {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 0; border-radius: 10px; background: var(--laranja); color: #fff;
}
.woocommerce ul.products li.product .acao-btn-min:hover { background: var(--laranja2); color: #fff; }

/* Encolhido, o botão do orçamento é o atalho para a lista — e é azul, não verde.
   O verde do `.add-orc.in` era o sinal de "já está no orçamento"; quem dá esse
   sinal agora é o próprio controle de quantidade ao lado, e verde ali só lembra
   o WhatsApp, que não tem nada a ver com o gesto. */
.acao.com-qtd > .add-orc,
.acao.com-qtd > .add-orc.in {
  background: var(--azul); color: #fff; border-color: transparent;
}
.acao.com-qtd > .add-orc:hover { background: var(--azul2); }

/* ============================================================
   RODAPÉ — [CONSTRUA 30/08/2026]
   Era um azul-carvão quase preto (#101a2c→#0b1220) e pesava o fim da página:
   lido de longe, parecia bloco de aviso legal, não o fecho da loja. Agora é o
   AZUL DA MARCA — a mesma cor do logo, do preço e dos títulos —, com o degradê
   escurecendo só o suficiente para dar chão. Uma linha laranja no topo assina.
   ============================================================ */
footer.rodape {
  background: linear-gradient(180deg, #16407f 0%, #12336b 44%, #0d2856 100%);
  border-top: 3px solid var(--laranja);
  color: #c3d2e8;
  padding: 48px 0 22px;
}

.rod-grid {
  display: grid; grid-template-columns: 1.25fr .95fr .8fr 1.25fr; gap: 38px;
}

footer.rodape h4 {
  color: #fff; font-family: var(--f-tit); font-weight: 700; font-size: 1rem;
  margin-bottom: 16px; letter-spacing: .01em;
}
footer.rodape h4 span { color: var(--laranja); }

/* --- coluna da marca --- */
.rod-logo { height: 46px; width: auto; margin-bottom: 13px; }
.rod-slogan {
  font-family: var(--f-tit); font-weight: 600; font-size: .98rem; color: #fff;
  margin-bottom: 18px;
}
.rod-contato { display: flex; flex-direction: column; gap: 9px; }
.rod-contato a {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  color: #c3d2e8; font-size: .9rem; transition: .16s;
}
.rod-contato a span { overflow-wrap: anywhere; }
/* o ícone em caixinha: dá alinhamento à coluna e um alvo maior no celular */
.rc-ico {
  width: 32px; height: 32px; padding: 7px; flex: none; border-radius: 9px;
  background: rgba(255,255,255,.09); color: #dbe5f3; transition: .16s;
}
.rod-contato a:hover { color: #fff; }
.rod-contato a:hover .rc-ico { background: var(--laranja); color: #fff; }
.rod-contato a.rc-wa:hover .rc-ico { background: var(--wpp); color: #fff; }

/* --- listas de links --- */
.rod-links { display: flex; flex-direction: column; gap: 9px; }
/* nove categorias em fila única viravam uma tira que desequilibrava o rodapé */
/* `columns` e não grid de duas colunas: com nomes de uma e de duas linhas, o
   grid abre buracos: a lista flui e a ordem alfabética continua legível de cima
   para baixo. */
.rod-links.duas { display: block; columns: 2; column-gap: 20px; }
.rod-links.duas a { display: block; margin-bottom: 9px; break-inside: avoid; }
footer.rodape .rod-links a {
  color: #c3d2e8; font-size: .89rem; line-height: 1.35; transition: .16s;
}
footer.rodape .rod-links a:hover { color: #fff; transform: translateX(3px); }

/* --- as três lojas --- */
footer.rodape .loja-r {
  margin-bottom: 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px;
  overflow: hidden; background: rgba(255,255,255,.05); transition: .18s;
}
footer.rodape .loja-r:hover { border-color: rgba(255,255,255,.3); }
footer.rodape .loja-r summary { padding: 12px 15px; gap: 1px; }
footer.rodape .loja-r summary b { font-size: .88rem; }
footer.rodape .loja-r summary span { font-size: .8rem; color: #a9bcd6; }
footer.rodape .loja-r summary .lr-tel { color: #c3d2e8; font-weight: 600; }
/* o site.css põe um emoji no ::after ("📍 ver mapa"); aqui o rótulo é texto */
footer.rodape .loja-r summary::after { content: "Ver no mapa →"; font-size: .76rem; margin-top: 5px; }
footer.rodape .loja-r[open] summary::after { content: "Ocultar mapa ↑"; }
footer.rodape .loja-r iframe { height: 165px; }

/* --- redes --- */
footer.rodape .rodape-redes { display: flex; gap: 10px; margin-top: 18px; }
footer.rodape .rodape-redes a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 8px 14px;
  font-family: var(--f-tit); font-weight: 600; font-size: .85rem; color: #dbe5f3; transition: .16s;
}
footer.rodape .rodape-redes a:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.38); color: #fff; transform: none;
}

/* --- a linha de baixo --- */
footer.rodape .rodape-fim {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 22px;
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 18px;
  font-size: .8rem; color: #8fa4c4; text-align: left;
  /* o botão flutuante do WhatsApp mora no canto de baixo à direita e comia o
     fim da linha dos CNPJs */
  padding-right: 74px;
}
.rod-cnpjs { font-size: .76rem; color: #7f95b8; }

@media (max-width: 1040px) {
  .rod-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  footer.rodape { padding: 36px 0 20px; }
  .rod-grid { grid-template-columns: 1fr; gap: 28px; }
  footer.rodape .rodape-fim { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   TOPO SEM MENU — [CONSTRUA 30/08/2026]
   Com os links de texto fora, a largura que eles ocupavam foi para a busca:
   numa loja, procurar é o gesto mais repetido do topo, e um campo estreito
   esconde o nome do produto enquanto a pessoa digita.
   ============================================================ */
.busca-topo { max-width: 620px; min-width: 260px; margin: 0 18px; }
.busca-topo input[type="search"] { padding: 13px 44px 13px 17px; font-size: .96rem; }

/* acesso à conta, ao lado do orçamento */
.conta-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--azul); border: 1.5px solid var(--cinza2);
  padding: 10px 16px; border-radius: 11px;
  font-family: var(--f-tit); font-weight: 700; font-size: .9rem; transition: .18s; cursor: pointer;
}
.conta-btn:hover { background: var(--cinza); border-color: var(--azul); }
.conta-btn .ico { width: 18px; height: 18px; }
/* logado, o botão fica com a marca da casa: é o sinal de que há uma sessão */
.conta-btn.logado { border-color: var(--azul); color: var(--azul); }
.conta-btn.logado .ico { color: var(--laranja); }
.conta-btn .lbl { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .busca-topo { max-width: none; }
}
@media (max-width: 980px) {
  /* no celular as três ações viram ícone: o nome de cada uma cabe na barra de
     baixo, que é onde a navegação do celular já mora */
  .conta-btn .lbl { display: none; }
  .conta-btn { padding: 10px 12px; }
}

/* A busca volta para a MESMA linha do logo.
   As quebras de 1180px e 1320px foram escritas quando o menu de texto disputava
   o meio do topo; sem ele, cabe tudo lado a lado — que é onde a busca deve
   estar numa loja: no centro, do tamanho do que se digita nela. */
@media (min-width: 901px) {
  .topo-in { flex-wrap: nowrap; }
  .busca-topo { order: 0; flex-basis: auto; flex: 1 1 auto; margin: 0 18px; }
}

/* ============================================================
   ENTRAR COM CÓDIGO — [CONSTRUA 30/08/2026]
   O formulário de senha do Woo continua na página, escondido: é o caminho de
   quem administra a loja (que não entra por código, de propósito) e de quem
   prefere. Um clique o revela.
   ============================================================ */
/* o "Entrar" do Woo é um <h2> filho direto de .woocommerce, irmão do formulário
   — some junto com ele, e volta junto com ele */
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .u-column2 { display: none; }
body.mostra-login-senha .woocommerce-account .woocommerce > h2,
body.mostra-login-senha .woocommerce-form-login { display: block; }

.login-codigo {
  max-width: 430px; margin: 10px auto 30px; padding: 30px 32px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  box-shadow: var(--sombra);
}
.login-codigo h2 {
  font-family: var(--f-tit); font-weight: 800; font-size: 1.4rem; color: var(--azul); margin: 0 0 6px;
}
.lc-sub { color: var(--suave); font-size: .92rem; margin: 0 0 20px; }

.lc-form { display: flex; flex-direction: column; gap: 10px; }
.lc-form input {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--linha); border-radius: 11px;
  font-family: var(--f-txt); font-size: .98rem; background: #fff; transition: .18s;
}
.lc-form input:focus {
  outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,51,107,.09);
}
/* seis dígitos merecem caber na tela como seis dígitos, não como texto corrido */
.lc-codigo {
  text-align: center; font-family: var(--f-tit); font-weight: 800; font-size: 1.7rem;
  letter-spacing: .5em; text-indent: .5em; padding: 14px 15px !important;
}
.lc-btn {
  background: var(--laranja); color: #fff; border: 0; border-radius: 11px; padding: 14px 20px;
  font-family: var(--f-tit); font-weight: 800; font-size: .98rem; cursor: pointer; transition: .18s;
}
.lc-btn:hover { background: var(--laranja2); }

.lc-msg { font-size: .89rem; border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; }
.lc-msg.ok   { background: #eef6ee; color: #2c6b34; border: 1px solid #cde3cf; }
.lc-msg.erro { background: #fdeeed; color: var(--laranja2); border: 1px solid #f3cfcc; }

.lc-volta { font-size: .86rem; color: var(--suave); margin: 14px 0 0; }
.lc-senha { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); text-align: center; }
.lc-link {
  background: 0; border: 0; padding: 0; cursor: pointer; color: var(--azul);
  font-family: var(--f-txt); font-size: .86rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.lc-link:hover { color: var(--laranja); }

/* ============================================================
   A CONTA DO CLIENTE — [CONSTRUA 30/08/2026]
   O painel e o "meus dados" do Woo vinham crus: parágrafo solto, campo de
   senha, e o telefone de quem entra pelo WhatsApp estampado como nome.
   Aqui a conta ganha a mesma casca das outras telas da loja.
   ============================================================ */
.conta-painel { margin: 0 0 8px; }

.conta-ola {
  font-size: 1.02rem; color: var(--texto); margin: 0 0 18px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.conta-ola strong { font-family: var(--f-tit); font-weight: 800; color: var(--azul); }
.conta-como { color: var(--suave); font-size: .89rem; }
.conta-sair {
  margin-left: auto; color: var(--suave); font-size: .86rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.conta-sair:hover { color: var(--laranja); }

.conta-aviso {
  background: #fff8ec; border: 1px solid #f0dcbb; border-radius: 12px;
  padding: 13px 16px; font-size: .92rem; color: #7a5312; margin: 0 0 20px;
}
.conta-aviso a { color: var(--azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Três atalhos: é tudo o que a conta desta loja faz. */
.conta-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .conta-atalhos { grid-template-columns: 1fr; } }

.conta-card {
  display: block; padding: 18px 20px; background: #fff; text-decoration: none;
  border: 1px solid var(--linha); border-radius: var(--radius); transition: .18s;
}
.conta-card:hover { border-color: var(--azul); box-shadow: var(--sombra); transform: translateY(-2px); }
.cc-tit {
  display: block; font-family: var(--f-tit); font-weight: 800; font-size: 1.05rem;
  color: var(--azul); margin-bottom: 4px;
}
.cc-sub { display: block; font-size: .88rem; color: var(--suave); line-height: 1.45; }

/* --- meus dados --- */
.conta-form .conta-ajuda {
  display: block; margin-top: 5px; font-size: .84rem; color: var(--suave); line-height: 1.45;
}
.conta-form input[readonly] { background: var(--cinza); color: var(--suave); cursor: default; }
.conta-acoes { margin-top: 6px; }

/* ============================================================
   A BUSCA CAÍA EM CIMA DAS CATEGORIAS — [CONSTRUA 30/08/2026, achado pelo JP]

   No celular a busca vai para a segunda linha do topo (`order: 9`,
   `flex-basis: 100%`), mas `.topo-in` tem ALTURA FIXA herdada do site
   institucional — 98px, 80px abaixo de 860 —, de quando ela dividia a linha com
   o logo. O conteúdo passava da caixa e vazava 20px para fora do `.topo`,
   pousando sobre o botão "Categorias", que abre logo abaixo.

   A altura passa a ser a que o conteúdo pede, em toda largura onde a busca
   quebra (abaixo de 901px). `site.css` não se toca: a emenda vive aqui.
   ============================================================ */
@media (max-width: 900px) {
  .topo-in { height: auto; }
}

/* Carrinho na barra de baixo: o contador precisa do mesmo tratamento do
   orçamento — só aparece quando há algo dentro. Quem escreve a classe é o
   carrinho.js (e o PHP, no primeiro carregamento). */
.tabbar a .tb-badge.car-count { background: var(--laranja); color: #fff; }

/* ============================================================
   A LUPA PASSAVA POR CIMA DO TOPO — [CONSTRUA 30/08/2026, achado pelo JP]
   O botão de ampliar a foto vem do WooCommerce com z-index 99, contra os 50 do
   topo fixo: rolando a ficha do produto, a foto passava por baixo do cabeçalho
   (certo) e a lupa por cima (errado). Ela só precisa ficar acima da própria
   imagem — 3 basta, e qualquer número abaixo de 50 preserva o topo.
   ============================================================ */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { z-index: 3; }

/* ============================================================
   CHECKOUT — a cara da loja no lugar da cara do WooCommerce
   [CONSTRUA 31/08/2026] O checkout em blocos chega com estilo próprio: campo
   quadrado, botão preto, título cinza. Ao lado do resto do site parecia outra
   loja — foi o "arcaico" que o JP viu. Aqui ele veste o mesmo azul, o mesmo
   raio de canto e a mesma fonte de título das outras telas.

   Nada de esconder campo que o pedido precisa: o que sai da tela é só o que
   tem uma resposta possível (o país).
   ============================================================ */

/* País: a loja vende no Brasil. O campo continua no formulário, com o valor
   certo, mas não ocupa uma linha para dizer o óbvio. */
.wc-block-checkout .wc-block-components-country-input { display: none; }

/* Títulos das seções: fonte e cor de título do site. */
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout__form h2 {
  font-family: var(--f-tit); color: var(--azul); font-weight: 700;
}

/* Campos: canto arredondado e borda do site; foco azul, como nos formulários
   do resto da loja. */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-blocks-components-select__select {
  border-radius: 11px; border: 1.5px solid var(--cinza2);
  font-family: var(--f-txt); color: var(--texto); background: #fff;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus {
  border-color: var(--azul2); box-shadow: 0 0 0 3px rgba(28,74,146,.12); outline: none;
}
.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-text-input input:focus + label { color: var(--azul); }

/* Blocos de escolha (entrega e pagamento): cartão, não tabela. */
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control__option {
  border-radius: 11px;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option {
  border: 1.5px solid var(--cinza2); margin-bottom: 8px;
}
.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18,51,107,.08);
}

/* O botão que fecha a compra é o botão mais importante da loja: azul da marca,
   não o preto de fábrica. */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  background: var(--azul); border-radius: 12px; font-family: var(--f-tit);
  font-weight: 700; font-size: 1.02rem; padding: 16px 22px;
  transition: background .15s;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
  background: var(--azul2);
}

/* Resumo do pedido: mesmo cartão do resto do site. */
.wc-block-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-order-summary {
  border-radius: var(--radius);
}
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--azul); font-family: var(--f-tit);
}

/* "GRÁTIS" é boa notícia: verde, como na caixa de frete da ficha. */
.wc-block-checkout .wc-block-components-shipping-rates-control__package
  .wc-block-components-radio-control__option-layout .wc-block-components-radio-control__secondary-label {
  color: #1a7f4b; font-weight: 700;
}

/* Convite para entrar, no topo do checkout. [CONSTRUA 31/08/2026] */
.ck-convite {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--cinza); border: 1.5px solid var(--cinza2); border-left: 4px solid var(--azul);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 18px;
}
.ck-convite-txt { flex: 1; min-width: 220px; font-size: .92rem; color: var(--texto); line-height: 1.45; }
.ck-convite-txt b { color: var(--azul); }
.ck-convite-bt {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul); color: #fff; font-family: var(--f-tit); font-weight: 700;
  padding: 10px 22px; border-radius: 11px; white-space: nowrap; transition: background .15s;
}
.ck-convite-bt:hover { background: var(--azul2); }

/* Destaque do topo que leva a algum lugar (telefone, nossas lojas) — 06/09/2026.
   Herda tudo do .bd-item; só ganha o sinal de que é clicável. Sem cor nova: a
   tarja é institucional e um link colorido ali brigaria com o logo. */
.barra-destaques .bd-link{text-decoration:none;color:inherit;cursor:pointer;
  border-radius:6px;transition:background-color .15s,opacity .15s}
.barra-destaques .bd-link:hover{background:rgba(255,255,255,.10);opacity:1}
.barra-destaques .bd-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}