/* ============================================================================
   POOD — BLOG (FishPig_WordPress) NA DIREÇÃO A
   Tarefa 10 do Plano-Blog-WordPress-FishPig.md.

   ⚠️ REGISTRO IMPORTANTE, para quem retomar este arquivo:
   A Tarefa 9 produziu `direcao/tela-blog.html`, `tela-blog-post.html` e
   `tela-blog-categoria.html` no projeto de design (claude.ai/design,
   51e2b10c-7bb7-438c-9886-7bc2ff80dd3a) e foi CONCLUÍDA pelo Will. Nesta
   sessão, porém, a ferramenta de leitura do design system (DesignSync) não
   estava disponível e a extensão do Chrome usada como alternativa não tinha
   sessão autenticada — as três telas não puderam ser lidas diretamente.

   Este arquivo foi escrito, em vez disso, a partir de três fontes que SÃO
   verificáveis nesta sessão:
     1. Os tokens em pood-tokens.css (cor, tipografia, forma, layout).
     2. O padrão já em produção — pood-institucional.css (tipografia de
        leitura, `.inst__txt`) e pood-vitrine.css (grade de 2 colunas do
        Porto, cartão que só aparece no hover, cartões brancos da barra
        lateral em `.sidebar-main`).
     3. O HTML real da produção, lido por `curl` em `/blog/`, numa categoria,
        numa tag e no post `/blog/joelheiras-porque-e-quando-usar/` — para
        cada seletor abaixo existe uma ocorrência medida, não suposta.

   Antes de considerar a Tarefa 10 fechada, comparar esta folha com as três
   telas aprovadas (getComputedStyle contra o card, não screenshot — §29.6) e
   ajustar o que divergir. Ficou registrado no relatório da tarefa.

   ---------------------------------------------------------------------------
   ESCOPO — `.pood-blog`, uma classe NOSSA, gravada no <body> pelo handle
   `wordpress_default` sobrescrito em FishPig_WordPress/layout/.

   🔴 Por que não é mais a lista de classes do FishPig (corrigido 17/08/2026):
   o módulo grava um `wordpress-<view>-view` DIFERENTE por tipo de página, e
   são SEIS, não três. Este arquivo nasceu ancorado numa lista de três, e as
   outras três ficavam sem estilo nenhum — caíam no Porto cru:

     wordpress-posttype-view  → /blog/                        estava na lista
     wordpress-term-view      → /blog/category/*/ e /tag/*/   estava na lista
     wordpress-post-view      → um post                       estava na lista
     wordpress-search-view    → /blog/search/<termo>/         FICAVA DE FORA
     wordpress-archive-view   → /blog/<ano>/<mês>/            FICAVA DE FORA
     wordpress-user-view      → /blog/author/<autor>/         FICAVA DE FORA

   O levantamento original mediu quatro URLs (listagem, categoria, tag, post)
   e concluiu que o módulo tinha três views. Busca, arquivo por data e autor
   nunca foram abertas — e as duas últimas são links da própria barra lateral,
   a um clique de qualquer página do blog.

   Lista fechada de classes de terceiro é a armadilha aqui: ela quebra de novo
   a cada view que o fornecedor acrescentar, e o modo de falha é silencioso —
   a página responde 200 e só o estilo some. Com uma classe nossa no handle
   comum, view nova entra estilizada por padrão.

   Duas âncoras convivem neste arquivo, e a distinção é semântica:
     .pood-blog            qualquer página do blog (chassi, listagem, pager,
                           barra lateral)
     .wordpress-post-view  só a página de um post (seções 6, 7 e 8)

   A troca não mexeu em especificidade: `:is(.a, .b, .c) .x` e `.pood-blog .x`
   são ambos (0,2,0), e várias regras daqui vencem o Porto por empate.

   Nada aqui pode vazar para /, checkout, PDP ou categoria de produto.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Trilha (breadcrumbs)

   Fora do `.page-main`, como nas institucionais — por isso o próprio
   alinhamento (1236px, padding 40) é repetido aqui em vez de estender
   pood-base.css: a Tarefa 10 só autoriza tocar em pood-blog.css e
   pood-css.phtml, e duplicar 8 linhas custa menos do que abrir exceção nesse
   limite. Mesmos valores medidos nas outras famílias de página do site.
--------------------------------------------------------------------------- */
.pood-blog .breadcrumbs {
  padding: 40px 0 0;
  margin: 0 0 26px;
  background: transparent;
}
.pood-blog .breadcrumbs .items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 1236px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.pood-blog .breadcrumbs,
.pood-blog .breadcrumbs a,
.pood-blog .breadcrumbs li,
.pood-blog .breadcrumbs strong {
  font-size: 11.5px;
  font-weight: var(--pood-p-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--pood-tinta-2);
}
.pood-blog .breadcrumbs a:hover {
  color: var(--pood-tinta);
}
.pood-blog .breadcrumbs .items .item::after {
  content: "/" !important;
  font-family: var(--pood-fonte) !important;
  font-size: 11.5px !important;
  line-height: 1;
  margin: 0 0 0 7px;
  color: var(--pood-tinta-3);
}
.pood-blog .breadcrumbs .items .item:last-child::after {
  content: none !important;
}
.pood-blog .breadcrumbs .item.home a {
  width: auto !important;
  text-indent: 0 !important;
}
.pood-blog .breadcrumbs .item.home a::before,
.pood-blog .breadcrumbs .item.home a::after {
  content: none !important;
}

/* ---------------------------------------------------------------------------
   2. Fundo e título da página

   Mesmo mecanismo da vitrine: a página assenta em --pood-fundo, e só os
   cartões (post e barra lateral) ficam brancos — é o relevo sem sombra da
   Direção A.
--------------------------------------------------------------------------- */
.pood-blog,
.pood-blog .page-main,
.pood-blog .columns {
  background: var(--pood-fundo);
}
.pood-blog .page-main {
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 88px;
}
.pood-blog .page-title-wrapper {
  margin: 0 0 32px;
}
.pood-blog .page-title-wrapper .page-title {
  margin: 6px 0 0;
  font-size: var(--pood-t-display);
  font-weight: var(--pood-p-normal);
  line-height: var(--pood-lh-display);
  letter-spacing: var(--pood-ls-display);
  color: var(--pood-tinta);
}
/* a chamada do blog, só existe em /blog/ (post_list_description do FishPig) */
.pood-blog .post-list-description {
  margin: -20px 0 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pood-tinta-2);
  max-width: 68ch;
}

/* ---------------------------------------------------------------------------
   3. As duas colunas — mesma mecânica da vitrine (§32.1 do CLAUDE.md): o
   Porto ainda é float aqui, então a largura muda por px fixo, com
   !important porque o Porto define o padding das colunas com peso maior.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pood-blog .columns .sidebar.sidebar-main {
    width: 276px;
    padding-right: 40px !important;
    padding-left: 0 !important;
  }
  .pood-blog .columns .column.main {
    width: calc(100% - 276px);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   4. Listagem de posts — /blog/, categoria e tag (mesmo template do FishPig
   nas três views: post/list.phtml → post/list/renderer/default.phtml)

   O cartão só aparece no hover, como o card de produto da vitrine
   (product-item-info). Dentro do cartão, título em largura cheia no topo,
   depois imagem + resumo lado a lado, e a linha de meta embaixo — layout de
   leitura, não de vitrine de produto.
--------------------------------------------------------------------------- */
.pood-blog .post-list-wrapper {
  margin: 0;
}
.pood-blog ol.post-list.grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A GRADE DE PRODUTOS DO PORTO ESTAVA ESTREITANDO O POST PELA METADE.

   O FishPig emite `<ol class="post-list grid">`, e o `grid` do Porto é a classe da
   vitrine de produtos — a folha dele casa `.grid > .item` e aplica `float:left` com
   largura de ~49%. Num container flex o float é ignorado, mas a LARGURA não: o item
   ficava com 431px dentro de 880, e o resumo sobrava com **167px**, quebrando a cada
   três palavras com metade da coluna vazia à direita.

   Medido em 25/08/2026 antes e depois: item 431 -> 880, resumo 167 -> 616.

   Não precisa de `!important` — verificado aplicando a regra no navegador antes de
   escrevê-la aqui. Herdar a classe `grid` do FishPig é o que abre essa porta; se um dia
   o template mudar de classe, esta regra vira inócua em vez de errada. */
.pood-blog ol.post-list.grid > li.item {
  width: 100%;
  float: none;
  border-bottom: 1px solid var(--pood-linha);
}
.pood-blog ol.post-list.grid > li.item:last-child {
  border-bottom: 0;
}
.pood-blog .post-list-item {
  padding: 24px 20px;
  margin: 0 -20px;
  border-radius: var(--pood-r-cartao);
  transition: background .18s, box-shadow .18s;
}
.pood-blog .post-list-item:hover {
  background: var(--pood-papel);
  box-shadow: 0 0 0 1px var(--pood-linha);
}
.pood-blog .post-list-item h2 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: var(--pood-p-medio);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.pood-blog .post-list-item h2 a {
  color: var(--pood-tinta);
  text-decoration: none;
}
.pood-blog .post-list-item h2 a:hover {
  color: var(--pood-tinta-2);
}
.pood-blog .post-list-item .post-entry {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  margin: 0 0 16px;
}
/* 🔴 Post SEM capa: sem esta regra o texto vira o PRIMEIRO item do grid e cai
   na coluna de 240px reservada para a imagem — 240px de texto dentro de 880
   disponíveis, com 640 de vazio à direita.

   Não é caso raro: os posts de 2015 a 2017 em geral não têm imagem destacada.
   Passou despercebido até 17/08/2026 porque quem os lista são as páginas de
   arquivo por data, e elas estavam fora do escopo desta folha (ver o cabeçalho).
   A listagem de /blog/ mostra os 10 mais recentes, que têm capa.

   `:has()` porque o FishPig não marca o item de forma alguma quando o post não
   tem imagem: ele simplesmente não emite o `.post-image`. Sem seletor de pai
   não há como distinguir os dois casos em CSS. */
.pood-blog .post-list-item .post-entry:not(:has(.post-image)) {
  grid-template-columns: 1fr;
}
/* ⚠️ Corrigido em 15/08/2026, a pedido do coordenador — a versão anterior
   forçava `aspect-ratio:4/3` com `object-fit:cover`, e a origem NÃO é 4:3:
   medido em produção, `post/list/renderer/default.phtml` gera a imagem por
   `->resize(600, null)` a partir de um arquivo de origem de 1024×535 — a
   proporção é preservada (1024:535 ≈ 1,91:1), então quem cortava o texto das
   artes promocionais (ex.: a capa de "Estamos De Volta: Colete De Peso") era
   este CSS, não o gerador de imagem do FishPig.

   Sem acesso à tela aprovada (`direcao/tela-blog.html`) para saber se o
   corte 4:3 era intencional, a escolha mais segura é NÃO cortar: o box usa a
   proporção medida da origem (1024/535) e `object-fit:contain` — encaixe
   exato para as imagens que seguem essa proporção (a amostra inteira,
   quando medida), e nunca corta um outlier que fuja dela. Se a tela pedir
   um corte diferente de propósito, é uma troca de duas linhas aqui. */
.pood-blog .post-list-item .post-image {
  margin: 0;
  overflow: hidden;
  max-height: none;
  border-radius: var(--pood-r-caixa);
  background: var(--pood-bloco);
}
.pood-blog .post-list-item .post-image a {
  display: block;
  aspect-ratio: 1024 / 535;
}
.pood-blog .post-list-item .post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pood-blog .post-list-item .post-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--pood-tinta-2);
}
/* meta: categorias, marcadores, data, autor — uma linha com quebra */
.pood-blog .post-list-item .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.pood-blog .post-list-item .post-meta-item {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--pood-tinta-2);
}
.pood-blog .post-list-item .post-meta-item strong {
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
}
.pood-blog .post-list-item .post-meta-item a {
  color: var(--pood-tinta-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pood-blog .post-list-item .post-meta-item a:hover {
  color: var(--pood-tinta);
}
@media (max-width: 700px) {
  .pood-blog .post-list-item .post-entry {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   5. Paginação — o `Magento\Theme\Block\Html\Pager` de sempre (mesma marcação
   da paginação de categoria de produto), medido em `/blog/`: 176 posts, 18
   páginas. Cada item tem um <span class="label"> de acessibilidade repetido
   ("Página", "Você esta lendo a pagina") antes do texto visível — ele é
   escondido pela técnica padrão de visually-hidden, não por display:none,
   que apagaria do leitor de tela.
--------------------------------------------------------------------------- */
.pood-blog .pager {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--pood-linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.pood-blog .pager .toolbar-amount {
  margin: 0;
  font-size: 12px;
  color: var(--pood-tinta-2);
}
.pood-blog .pager .pages {
  margin: 0;
}
.pood-blog .pager .pages-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pood-blog .pager .pages-items .label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pood-blog .pager .pages-items .item .page,
.pood-blog .pager .pages-items .item .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--pood-r);
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
  text-decoration: none;
}
.pood-blog .pager .pages-items .item a:hover {
  background: var(--pood-papel);
  box-shadow: 0 0 0 1px var(--pood-linha);
}
.pood-blog .pager .pages-items .item.current .page {
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-weight: var(--pood-p-forte);
}
.pood-blog .pager .pages-items .item .page.jump {
  color: var(--pood-tinta-3);
}

/* ---------------------------------------------------------------------------
   6. Post único — /blog/<slug>/ (post/view.phtml)
--------------------------------------------------------------------------- */
.wordpress-post-view .post-view {
  max-width: 78ch;
}
.wordpress-post-view .post-view .post-image {
  margin: 0 0 32px;
}
.wordpress-post-view .post-view .post-image a {
  display: block;
}
.wordpress-post-view .post-view .post-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pood-r-cartao);
}
/* a barra de meta migrou para RODAPÉ do artigo por CSS puro (a ordem do DOM
   não muda: post-entry vem antes de post-meta no template do FishPig, e
   reordenar por flex/order arriscaria o layout de 2 colunas do Porto que
   envolve tudo isto por fora). É o mesmo padrão de "assinatura no fim do
   texto" que várias publicações usam — categoria, marcadores, data e autor
   como fecho, não como manchete repetida. */
.wordpress-post-view .post-view > .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 36px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--pood-linha);
  text-align: left;
}
.wordpress-post-view .post-view > .post-meta .post-meta-item {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
}
.wordpress-post-view .post-view > .post-meta .post-meta-item strong {
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta);
  margin-right: 2px;
}
.wordpress-post-view .post-view > .post-meta a {
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wordpress-post-view .post-view > .post-meta a:hover {
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   7. Corpo do post (.post-content) — tipografia de leitura

   Mesma escala do `.inst__txt` institucional (§4.3 do CLAUDE.md): é o padrão
   de leitura já aprovado no site, e a instrução da tarefa manda seguir o que
   já existe quando a tela não está disponível.
--------------------------------------------------------------------------- */
.wordpress-post-view .post-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--pood-tinta);
}
.wordpress-post-view .post-content::after {
  content: "";
  display: table;
  clear: both;
}
.wordpress-post-view .post-content > *:first-child {
  margin-top: 0;
}
.wordpress-post-view .post-content > *:last-child {
  margin-bottom: 0;
}
.wordpress-post-view .post-content h2 {
  margin: 40px 0 14px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--pood-tinta);
}
.wordpress-post-view .post-content h3 {
  margin: 28px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pood-tinta);
}
.wordpress-post-view .post-content h4 {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pood-tinta);
}
.wordpress-post-view .post-content p {
  margin: 0 0 16px;
}
.wordpress-post-view .post-content ul,
.wordpress-post-view .post-content ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.wordpress-post-view .post-content li {
  margin-bottom: 6px;
}
.wordpress-post-view .post-content strong,
.wordpress-post-view .post-content b {
  font-weight: 600;
}
.wordpress-post-view .post-content a {
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wordpress-post-view .post-content a:hover {
  color: var(--pood-tinta-2);
}
/* 2 dos 176 posts usam blockquote — mesmo tratamento do .aviso-inst */
.wordpress-post-view .post-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--pood-papel);
  border-left: 2px solid var(--pood-acento);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pood-tinta-2);
}
/* 9 posts usam tabela */
.wordpress-post-view .post-content table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 14px;
}
.wordpress-post-view .post-content table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pood-linha);
  background: var(--pood-fundo);
  text-align: left;
  font-weight: 600;
  color: var(--pood-tinta);
}
.wordpress-post-view .post-content table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pood-linha);
  color: var(--pood-tinta);
}
/* 9 posts embutem vídeo (iframe) — só o teto de largura, sem mexer na razão
   de aspecto: o vídeo já vem com width/height fixos do WordPress, e travar
   a proporção certa exigiria saber a largura original de cada embed. */
.wordpress-post-view .post-content iframe {
  max-width: 100%;
}
/* imagem solta (sem <figure>), com ou sem alinhamento do WordPress */
.wordpress-post-view .post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pood-r-caixa);
}
.wordpress-post-view .post-content img.alignleft {
  float: left;
  margin: 4px 24px 16px 0;
}
.wordpress-post-view .post-content img.alignright {
  float: right;
  margin: 4px 0 16px 24px;
}
.wordpress-post-view .post-content img.aligncenter {
  display: block;
  margin: 16px auto;
  float: none;
}
.wordpress-post-view .post-content img.alignnone {
  margin: 16px 0;
}

/* ---------------------------------------------------------------------------
   7b. `figure.wp-caption` + `figcaption.wp-caption-text`

   71 legendas convertidas de shortcode na Tarefa 6 (medido no banco: 69 no
   catálogo publicado — 67 aligncenter, 4 alignnone, 0 align{left,right}, mas
   as quatro classes recebem regra por robustez). O `style="max-width:NNNpx"`
   é inline e QUEM decide o teto de largura — a regra abaixo só preenche esse
   teto com `width:100%`, nunca substitui o valor.
--------------------------------------------------------------------------- */
.wordpress-post-view .post-content figure.wp-caption {
  margin: 24px 0;
  max-width: 100%;
}
.wordpress-post-view .post-content figure.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--pood-r-caixa);
}
.wordpress-post-view .post-content figure.wp-caption .wp-caption-text {
  margin: 8px 0 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
  text-align: center;
}
.wordpress-post-view .post-content figure.wp-caption.alignnone {
  margin-left: 0;
  margin-right: 0;
}
.wordpress-post-view .post-content figure.wp-caption.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.wordpress-post-view .post-content figure.wp-caption.alignleft {
  float: left;
  margin: 4px 24px 16px 0;
}
.wordpress-post-view .post-content figure.wp-caption.alignright {
  float: right;
  margin: 4px 0 16px 24px;
}
@media (max-width: 640px) {
  .wordpress-post-view .post-content figure.wp-caption.alignleft,
  .wordpress-post-view .post-content figure.wp-caption.alignright,
  .wordpress-post-view .post-content img.alignleft,
  .wordpress-post-view .post-content img.alignright {
    float: none;
    margin: 16px auto;
  }
}

/* ---------------------------------------------------------------------------
   7c. `.pood-descontinuado` + `.pood-descontinuado-nota`

   91 links de produto que não existem mais (Tarefa 6, `blog-links-mortos.txt`
   no servidor — 125 linhas, 6 posts amostrados aqui têm de 1 a 8 cada). O
   texto do produto continua legível — risco no meio da frase, não vermelho,
   não sublinhado de link. A nota entre parênteses é o que deixa claro que a
   ausência é intencional, e não erro de página: "(produto descontinuado)" ou
   "(material indisponível)".
--------------------------------------------------------------------------- */
.wordpress-post-view .post-content .pood-descontinuado {
  color: var(--pood-tinta-2);
  text-decoration: line-through;
  text-decoration-color: var(--pood-tinta-3);
  text-decoration-thickness: 1px;
}
.wordpress-post-view .post-content .pood-descontinuado-nota {
  font-size: .85em;
  font-style: italic;
  color: var(--pood-tinta-3);
}

/* ---------------------------------------------------------------------------
   8. Comentários — existem em produção (ex.: post "Quanto Custa a
   Depreciação dos Equipamentos", 1 comentário); o formulário de resposta NÃO
   aparece nas amostras medidas (fechado), então só a listagem é estilizada.
--------------------------------------------------------------------------- */
.wordpress-post-view .comments-wrapper {
  margin-top: 40px;
}
.wordpress-post-view .comments-wrapper > h2 {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--pood-tinta);
}
.wordpress-post-view .comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wordpress-post-view .comment-list .comment-list.children {
  margin: 16px 0 0;
  padding-left: 32px;
}
.wordpress-post-view .comment-list-item-wrapper {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
}
.wordpress-post-view .comment-image.gravatar {
  flex: none;
  float: none;
  margin: 0;
}
.wordpress-post-view .comment-image.gravatar img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.wordpress-post-view .comment-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
}
.wordpress-post-view .comment-author {
  display: inline;
  font-weight: 600;
}
.wordpress-post-view .comment-author .comment-url {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--pood-tinta);
  text-decoration: none;
}
.wordpress-post-view .comment-date .comment-when {
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  text-decoration: none;
}
.wordpress-post-view .comment-entry {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   9. Barra lateral — mesmo cartão branco da vitrine
   (.block-category-list / .layered-filter-block-container em pood-vitrine.css
   §9): borda 1px, raio 14, padding 18, título 13px/600 sem caixa alta.
--------------------------------------------------------------------------- */
.pood-blog .wp-sidebar {
  position: relative;
}
.pood-blog .wp-sidebar .block.block-blog {
  margin: 0 0 12px;
  padding: 18px;
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
}
.pood-blog .wp-sidebar .block.block-blog .block-title {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.pood-blog .wp-sidebar .block.block-blog .block-title > strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pood-tinta);
}
.pood-blog .wp-sidebar .block.block-blog .block-content {
  font-size: 12.5px;
  color: var(--pood-tinta-2);
}
.pood-blog .wp-sidebar .block.block-blog ul,
.pood-blog .wp-sidebar .block.block-blog ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pood-blog .wp-sidebar .block.block-blog li.item {
  margin: 0;
}
.pood-blog .wp-sidebar .block.block-blog li.item > a {
  display: block;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pood-tinta-2);
  text-decoration: none;
}
.pood-blog .wp-sidebar .block.block-blog li.item > a:hover {
  background: var(--pood-fundo);
  color: var(--pood-tinta);
}
/* texto puro do widget de comentários recentes ("Fulano on <a>Título</a>") —
   sem link no <a>, o mesmo padding/hover não se aplica; estilo mais simples */
.pood-blog .wp-sidebar .block-blog-comments li.item {
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
}
.pood-blog .wp-sidebar .block-blog-comments li.item a {
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* categorias e arquivos são listas longas (17 e 30+ itens, medido) — teto de
   altura com rolagem própria, para o cartão não esticar a coluna inteira */
.pood-blog .wp-sidebar .block-blog-archives .block-content,
.pood-blog .wp-sidebar .block-blog-categories .block-content {
  max-height: 260px;
  overflow-y: auto;
  /* overflow-x:hidden é obrigatório aqui, não decorativo: por regra do CSS
     (Overflow Module), overflow-y:auto sozinho faz o overflow-x IMPLÍCITO
     virar auto também — e a barra de rolagem vertical, sem
     scrollbar-gutter reservado, tira ~10px de largura útil e cria um
     scroll horizontal fantasma (sem conteúdo nenhum do lado). Medido no
     navegador antes desta linha: scrollWidth 193 × clientWidth 183. */
  overflow-x: hidden;
}
/* "Meta" é o widget nativo do FishPig com 2 links para fishpig.co.uk — não é
   conteúdo da Pood, é propaganda do plugin. Decisão de conteúdo tomada aqui
   por CSS (reversível, sem perder o bloco do template): confirmar com o Will
   se deve mesmo sumir ou só sair da tradução em inglês. */
.pood-blog .wp-sidebar .block-blog-meta {
  display: none;
}

/* busca da barra lateral: mesmo campo da Contato institucional */
.pood-blog .wp-sidebar .block-blog-search .fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.pood-blog .wp-sidebar .block-blog-search .field {
  margin: 0 0 10px;
}
.pood-blog .wp-sidebar .block-blog-search input.input-text {
  width: 100%;
  height: var(--pood-h);
  padding: 0 14px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-fundo);
  font-family: var(--pood-fonte);
  font-size: 13.5px;
  color: var(--pood-tinta);
  box-sizing: border-box;
}
.pood-blog .wp-sidebar .block-blog-search input.input-text:focus {
  outline: 2px solid var(--pood-acento);
  outline-offset: -1px;
  border-color: var(--pood-acento);
}
.pood-blog .wp-sidebar .block-blog-search .actions-toolbar {
  margin: 0;
}
.pood-blog .wp-sidebar .block-blog-search .action.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pood-h);
  padding: 0 22px;
  border: 0;
  border-radius: var(--pood-r);
  background: var(--pood-tinta);
  color: #FFFFFF;
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  cursor: pointer;
}
.pood-blog .wp-sidebar .block-blog-search .action.submit:hover {
  background: #000000;
}