/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

body.page-id-28608 .wd-content-layout {
  padding-block: 0px;
}

/* Aqui havia um `#main-content.container { padding-inline: 0 }` GLOBAL, escrito
   para as secoes full-bleed da home. Como `#main-content` e o mesmo elemento que
   `.wd-content-layout`, a regra da home logo abaixo ja cobre esse caso — a
   versao global so sobrava para as outras paginas, onde tirava a goteira lateral
   e colava a sidebar e a grade da loja na borda da janela. */

/* Layout aberto (home, blog, quiz, e qualquer pagina nova composta no
   Elementor do mesmo jeito): o wrapper do Woodmart acumula `.wd-content-layout`
   (padding-block 40px) e `.container` (max-width do tema, preso ao "Site
   width: Wide" = 1600px, + padding-inline 15px) no MESMO elemento. Isso
   desenhava uma faixa branca acima do hero e margens brancas nas laterais de
   toda secao full-bleed — a causa de toda pagina nova nascer "boxed" ao lado
   da home. O CSS da pagina no Elementor nao resolve sozinho: o wrapper e
   ancestral do `.elementor`, entao a regra tem que morar aqui, no tema.

   Isso ERA repetido por `body.page-id-<N>` a cada pagina nova (facil de
   esquecer — foi o que aconteceu com a pagina do quiz). Agora e uma classe
   so: qualquer pagina com o template "Full width — aberto (Matchii)"
   (templates/full-width-open.php) ganha `mt-open-layout` no body sozinha, e
   o CSS abaixo se aplica sem precisar editar este arquivo de novo. */
body.mt-open-layout .wd-content-layout {
  padding-block: 0px;
  max-width: 100%;
  padding-inline: 0px;
}

/* Post individual: NAO e composto no Elementor (e o template padrao do tema),
   entao nao tem padding proprio por secao como a home e o blog acima — zerar
   o padding-inline aqui colaria o texto na borda da janela. Em vez de tirar a
   goteira, so alargamos o teto de 1600px (herdado do "Site width: Wide" do
   tema) para caber mais perto do que a home usa; a largura de leitura do
   paragrafo continua travada em 68ch pela regra mais abaixo, entao o texto
   nao alarga — quem ganha espaco e a imagem destaque e a coluna da sidebar. */
.single-post .wd-content-layout {
  max-width: 1800px;
  padding-inline: 24px;
}

/* Header da Matchii (whb_header_matchii01) tem fundo marfim, entao o menu
   precisa de texto escuro. Isto vivia sem escopo (nav.wd-header-nav ul li a
   { color: white }) e vencia por especificidade qualquer cor que o proprio
   WHB calculasse a partir de `color_scheme` — o motivo real do menu ficar
   ilegivel nao era o valor errado em color_scheme, era este seletor. */
.whb-header_matchii01 nav.wd-header-nav ul li a {
  color: #2B2016;
}

.whb-header_matchii01 nav.wd-header-nav ul li a:hover {
  color: #B0701E;
}

.whb-header_matchii01 nav.wd-header-nav ul li a:active {
  color: #C98226;
}

.woodmart-nav-link .nav-link-text::after {
  height: 0px;
  background-color: unset !important;
}

.wd-nav[class*="wd-style-underline"] .nav-link-text:after {
  background-color: beige;
}

.wd-tools-icon {
  background-color: rgba(0, 0, 0, 0.59) !important;
}

.wd-tools-icon:hover {
  background-color: rgb(0 0 0 / 85%) !important;
}

/* CARROSSEL QUE TRAVA NO SEGUNDO SLIDE
   O Elementor imprime, em custom-frontend.min.css:
       @media (prefers-reduced-motion: reduce) {
         html * { transition-duration: 0s !important; transition-delay: 0s !important }
       }
   O carrossel do Woodmart e um swiper: ele marca `animating = true`, aplica o
   transform e espera o evento `transitionend` para liberar o proximo slide.
   Com duracao zerada a transicao nunca acontece, o evento nunca chega e o
   carrossel congela depois do primeiro movimento. Quem tem "reduzir animacao"
   ligado no sistema ve o slider parar no slide 2.
   Uma duracao minima mantem o movimento instantaneo (a preferencia do usuario
   continua respeitada) e devolve o evento que destrava o swiper. */
@media (prefers-reduced-motion: reduce) {
  html .wd-carousel-wrap {
    transition-duration: 10ms !important;
  }
}

/* HEADER MATCHII (whb_header_matchii01)
   O Header Builder guarda o CSS calculado de cada header num cache proprio
   (Styles_Storage) que so e regravado quando se salva pelo admin (ou pelo
   fluxo PHP completo de Header_Factory::update_header()->save()). Como o
   header e publicado direto no banco (scripts/wp_import_header.php, so
   update_option), esse cache nunca e recalculado: o JSON tem o
   background-color e as cores certas, mas o front continua servindo o CSS
   do header anterior — sintoma identico ao `_elementor_element_cache` do
   Elementor, so que sem comando de limpeza equivalente encontrado. Fixado
   aqui em CSS estatico, igual ao valor que o JSON ja declara. */
.whb-header_matchii01 .whb-general-header {
  background-color: #F7F2E9 !important;
}
.whb-header_matchii01 .whb-zzmatchiibtncomprar .btn {
  background-color: #B0701E !important;
  color: #FFFFFF !important;
}
.whb-header_matchii01 .whb-zzmatchiibtncomprar .btn:hover {
  background-color: #C98226 !important;
}
/* .wd-tools-icon ja tem uma regra escura global mais acima neste arquivo
   (pro carrinho sobre fundo claro de outras paginas) — aqui, sobre o
   header boxed claro da Matchii, precisa da paleta da marca. */
.whb-header_matchii01 .wd-tools-icon {
  background-color: rgba(176, 112, 30, 0.12) !important;
  color: #2B2016 !important;
}
.whb-header_matchii01 .wd-tools-icon:hover {
  background-color: rgba(176, 112, 30, 0.22) !important;
}
/* Cantos arredondados iguais aos outros elementos do site (radius.lg = 14px
   em docs/design-system.json), so no estado flutuante/boxed do topo — ao
   fixar no scroll o header vira uma barra full-width (CSS do proprio tema,
   .whb-boxed:not(.whb-sticked) e quem da a margem lateral), e uma barra
   full-width com cantos redondos destoaria. */
.whb-header_matchii01.whb-boxed:not(.whb-sticked) .whb-general-header {
  border-radius: 14px;
}

/* ======================================================================
   ARQUIVO DE PRODUTOS — /shop/ e paginas de categoria

   A diagramacao (4 colunas, sem sidebar, filtros no topo, faixa de titulo)
   vem de theme options, em scripts/apply_shop_archive.py. O que sobra aqui e
   so o que o painel do Woodmart nao expoe: alinhamento e tipografia do cartao,
   e o raio da foto.
   ====================================================================== */

/* Texto do cartao a esquerda, como na referencia aprovada (colecao Lorees).
   Centralizado, o olho volta ao meio a cada linha; alinhado, ele desce pela
   mesma margem da foto ate o nome e o preco. */
.woocommerce-shop .product-grid-item,
.tax-product_cat .product-grid-item,
.tax-product_tag .product-grid-item {
  text-align: left;
}

/* Nome do produto em sans, nao na serifa de titulo.
   `typography.roles.h4` do design-system.json e sans/md/semibold: a Fraunces e
   a serifa de H1-H3. Em 16px, num nome de duas linhas como "After Shave Bravio
   Cool pos barba natural de bolso", ela perde legibilidade e pesa demais contra
   a foto. */
.woocommerce-shop .product-grid-item .wd-entities-title,
.tax-product_cat .product-grid-item .wd-entities-title,
.tax-product_tag .product-grid-item .wd-entities-title {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Foto com `radius.byComponent.image` = md (8px). O `custom_rounding_size` do
   tema (14px) so alcanca botao, campo e cartao; a imagem do arquivo fica de
   fora. O overflow no link e necessario porque o raio vai no contêiner. */
.woocommerce-shop .product-grid-item .product-image-link,
.tax-product_cat .product-grid-item .product-image-link,
.tax-product_tag .product-grid-item .product-image-link {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

/* Preco com o ambar da marca e peso de `typography.roles.priceLarge` — e o
   segundo ponto de fixacao do cartao, depois da foto (Von Restorff: so o preco
   e a acao usam a cor da marca). */
.woocommerce-shop .product-grid-item .price,
.tax-product_cat .product-grid-item .price,
.tax-product_tag .product-grid-item .price {
  color: #B0701E;
  font-weight: 600;
  /* O tema centraliza o preco por regra propria, que vence o text-align
     herdado do cartao — por isso ele precisa ser declarado de novo aqui. */
  text-align: left;
}

/* No cartao estreito de 2 colunas, 1rem faz um nome como "Kit Casal Dualee com
   4 Perfumes Femininos e Masculinos" ocupar quatro linhas e empurrar o preco
   para fora da vista. `typography.scale.sm` (0.875rem) segura o mesmo nome em
   duas ou tres. O corte e 767px porque e ate ai que a grade fica em 2 colunas
   (medido: 2 col ate 768, 3 col a partir de ~900, 4 col em 1200). */
@media (max-width: 767px) {
  .woocommerce-shop .product-grid-item .wd-entities-title,
  .tax-product_cat .product-grid-item .wd-entities-title,
  .tax-product_tag .product-grid-item .wd-entities-title {
    font-size: 0.875rem;
    line-height: 1.45;
  }
}

/* ==================================================================
   BLOG — single post e arquivos de categoria/tag
   ================================================================== */

/* O cabecalho e flutuante e se sobrepoe ao inicio da pagina. Na home e no blog
   a folga vem do padding da primeira secao do Elementor; no post ela tem que
   vir daqui, ou o titulo nasce por baixo do menu. O arquivo de categoria fica
   de fora: ele mantem a faixa de titulo do tema, que ja abre o espaco.

   O numero: o header comeca em 30px e tem 110 de altura, terminando em 140.
   212 deixa ~72px de respiro, que e o mesmo que sobra abaixo do header nas
   paginas que mantem a faixa de titulo do tema. Com 148 sobravam 8px e a
   pagina parecia colada no menu. */
.single-post .wd-page-content {
  padding-top: 212px;
}

@media (max-width: 1024px) {
  .single-post .wd-page-content {
    padding-top: 140px;
  }
}

/* Imagem destaque do post: sem limite ela entra em tamanho `large` e ocupa a
   tela inteira, empurrando o texto para baixo da dobra. 460px deixa a foto
   grande e ainda mostra o comeco do artigo. */
.single-post .wd-post-image img {
  max-height: 460px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Meta do post: fica so a data. Autor sem nome publico rende um avatar cinza
   vazio; a data de modificacao repete a de publicacao; e o contador de
   respostas mostra zero com os comentarios fechados. */
.single-post .wd-post-meta .wd-post-author,
.single-post .wd-post-meta .wd-modified-date,
.single-post .wd-post-meta .wd-post-reply {
  display: none;
}

/* Corpo do artigo: medida de linha confortavel para leitura longa. O tema
   deixa o paragrafo esticar pela coluna inteira, o que em 1440px passa de 110
   caracteres por linha. */
.single-post .wd-entry-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.single-post .wd-entry-content h2 {
  margin-top: 2.2em;
  margin-bottom: .6em;
  letter-spacing: -.4px;
}

/* Primeiro paragrafo do post em corpo maior: e o resumo que decide se a pessoa
   continua lendo. */
.single-post .wd-entry-content .mt-lead {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: #3A2C1C;
}

.single-post .wd-entry-content ul {
  padding-left: 1.2em;
  margin-bottom: 1.6em;
}

.single-post .wd-entry-content ul li {
  margin-bottom: .5em;
}

/* Medida de linha. Na coluna de 1040px um paragrafo passa de 110 caracteres,
   bem acima dos 60 a 80 em que o olho acha a proxima linha sem se perder. O
   limite vai nos filhos (e nao no `.entry-content`) para a imagem destaque e
   os blocos largos continuarem usando a coluna inteira. */
.single-post .wd-entry-content > p,
.single-post .wd-entry-content > ul,
.single-post .wd-entry-content > ol,
.single-post .wd-entry-content > h2,
.single-post .wd-entry-content > h3 {
  max-width: 68ch;
}

/* O primeiro paragrafo abre o texto: corpo maior e um filete ambar a esquerda
   para separa-lo do corpo sem precisar de caixa nem de fundo. */
.single-post .wd-entry-content .mt-lead {
  border-left: 2px solid #B0701E;
  padding-left: 20px;
  margin-bottom: 1.8em;
}

/* ==================================================================
   RODAPE
   ================================================================== */

/* O container do rodape ainda carrega o azul-marinho do clone (#2B2D42) nas
   opcoes do tema, e ele aparece como uma faixa fina em volta do bloco do
   Elementor. Igualar ao marrom escuro da marca faz os dois virarem um so. */
.wd-footer.footer-container {
  background-color: #2B2016;
}

/* O tema envolve o bloco do rodape num `.container` com padding lateral
   proprio. O bloco ja tem o seu, boxed em 1280, entao o do tema so cria um
   degrau de 15px. */
.wd-footer .main-footer {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* ==================================================================
   PAGINA DE PRODUTO
   ================================================================== */

/* A pagina de produto ja nasce com folga (o breadcrumb comeca ~50px abaixo do
   cabecalho). Aqui basta completar o respiro, nao abrir o espaco inteiro como
   no post — que comeca colado. */
.single-product .wd-page-content {
  padding-top: 56px;
}

/* Titulo do produto no mesmo registro da home: serifa apertada, nao o tamanho
   solto do tema. */
.single-product .product_title {
  letter-spacing: -1px;
  line-height: 1.1;
}

/* Resumo curto: e o texto que decide a compra de algo que a pessoa nao pode
   cheirar. Ganha corpo e respiro. */
.single-product .woocommerce-product-details__short-description {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #4A3D2E;
}

/* Eixos olfativos — a ficha que substitui o cheirar. Duas colunas de rotulo e
   valor, separadas por filete, no lugar onde o olho procura ficha tecnica. */
.mt-eixos {
  list-style: none;
  margin: 26px 0 8px;
  padding: 0;
  border-top: 1px solid #DACFBE;
}

.mt-eixos .mt-eixo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #DACFBE;
}

.mt-eixos .mt-eixo-rotulo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7A6B58;
}

.mt-eixos .mt-eixo-valor {
  font-size: 15px;
  font-weight: 600;
  color: #2B2016;
  text-align: right;
}

/* Sem preco nao ha botao de compra. A linha abaixo ocupa o lugar dele com uma
   informacao honesta em vez de um vazio sem explicacao. */
.mt-sem-preco {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid #C4B69F;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7A6B58;
}

/* Descricao em aba: sem limite o paragrafo atravessa os 1400px do container e
   passa de 160 caracteres por linha. Mesmo criterio do post. */
.single-product .wd-tab-content > p,
.single-product .wd-tab-content > ul,
.single-product .wd-tab-content > h2,
.single-product .wd-tab-content > h3,
.single-product .woocommerce-Tabs-panel > p,
.single-product .woocommerce-Tabs-panel > ul,
.single-product .woocommerce-Tabs-panel > h2,
.single-product .woocommerce-Tabs-panel > h3 {
  max-width: 68ch;
}

.single-product .woocommerce-Tabs-panel h2 {
  margin-top: 2em;
  margin-bottom: .5em;
  letter-spacing: -.4px;
}

.single-product .woocommerce-Tabs-panel h3 {
  margin-top: 1.6em;
  margin-bottom: .3em;
  font-size: 1.0625rem;
}

/* Mesmo filete ambar do lead do post: o primeiro paragrafo da descricao abre o
   texto. */
.single-product .woocommerce-Tabs-panel .mt-lead {
  border-left: 2px solid #B0701E;
  padding-left: 20px;
  font-size: 1.1rem;
  line-height: 1.65;
  color: #3A2C1C;
}

/* ==================================================================
   SIDEBAR DO BLOG
   ================================================================== */

/* A sidebar herdada do clone e uma pilha de titulos soltos sobre o fundo da
   pagina: sem caixa, sem separacao, e com o mesmo peso visual do artigo. Vira
   um cartao marfim, que a separa do texto sem competir com ele. */
.single-post .wd-sidebar .widget,
.archive.category .wd-sidebar .widget,
.archive.tag .wd-sidebar .widget {
  background: #F7F2E9;
  border: 1px solid #E4D9C8;
  border-radius: 16px;
  padding: 22px 24px 24px;
  margin-bottom: 20px;
}

.single-post .wd-sidebar .widget-title,
.archive.category .wd-sidebar .widget-title,
.archive.tag .wd-sidebar .widget-title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A6B58;
  margin-bottom: 14px;
  padding-bottom: 0;
  border: none;
}

/* Lista de categorias: linha a linha, com o filete como unico separador. */
.wd-sidebar .widget_categories ul,
.wd-sidebar .widget_categories li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-sidebar .widget_categories li {
  padding: 10px 0;
  border-bottom: 1px solid #E4D9C8;
}

.wd-sidebar .widget_categories li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wd-sidebar .widget_categories a {
  font-size: 15px;
  font-weight: 600;
  color: #2B2016;
}

.wd-sidebar .widget_categories a:hover {
  color: #B0701E;
}

/* "Leia tambem": o titulo do post ja e link; o tamanho do tema o deixa quase
   do tamanho do H2 do artigo e a coluna disputa atencao com o texto. */
.wd-sidebar .wd-post-title,
.wd-sidebar .wd-entities-title {
  font-size: 15px;
  line-height: 1.35;
}

/* A sidebar acompanha a rolagem: num artigo de 4000px ela fica fora da tela
   durante quase toda a leitura, e o leitor perde o caminho para o proximo
   texto. */
@media (min-width: 1025px) {
  .single-post .wd-sidebar {
    position: sticky;
    top: 160px;
    align-self: flex-start;
  }
}

/* Cartoes da grade de produto em altura igual. As fotos do cliente vem em
   proporcoes diferentes (quadrada, retrato, paisagem) e a grade do tema
   respeita cada uma, o que deixa as linhas desencontradas e os titulos em
   alturas aleatorias. Recortar para 1:1 uniformiza sem distorcer. */
.products .product-grid-item .product-element-top img,
.wd-products .product-grid-item .product-element-top img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Ladrilho grande do bento "Um recorte da colecao" (home): a coluna estica
   por align-items:stretch pra bater a altura da grade 2x2 ao lado, mas a
   regra 1:1 acima trava a foto quadrada e sobra fundo liso atras do titulo.
   Aqui a foto cobre a coluna inteira (crop, sem distorcer) em vez de travar
   quadrada — resolve pra qualquer numero de linhas da grade vizinha. */
.mt-bento-destaque .product-grid-item .product-element-top img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}