/*
 * LISTAGEM / CATEGORIA / RESULTADOS DE BUSCA.
 * Números MEDIDOS no gabarito (clone v1 — docs/b5-provas/medidas-gabarito.json).
 * Por cima, a regra de CONTROLE da v2 vence: alvo ≥44px e campo ≥16px.
 * Breakpoints da casa: 1023.98 / 767.98 (max-width).
 */

/* respiro lateral MEDIDO no gabarito: 12px no 390 (grade 177+12+177 = 366) e 15 no 1440 */
.elf-listagem .elf-conteudo { max-width: var(--elf-container); padding: 16px 12px 28px; }

/* ── descrição do termo: o H1 vem DENTRO dela (conteúdo do dono, lei 2) ── */
.term-description { font-size: 0.875rem; color: var(--elf-text-secondary); line-height: 1.6; margin: 0 0 25px; }
.term-description h1 { font-size: 1.375rem; font-weight: 700; line-height: 1.4; color: var(--elf-text); margin: 12px 0 8px; }
.term-description p { font-size: 0.8125rem; color: var(--elf-text-secondary); line-height: 1.6; margin: 0 0 8px; }
.elf-ler-mais { display: none; }

/* ── texto de baixo da categoria (B77): MEDIDO no clone (.wd-term-desc), igual no 390 e no 1536; o link
   vai no roxo de ação da D27 (o gabarito é o azul #6671FF do WoodMart) ── */
.elf-termo-extra { margin: 24px 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--elf-text-secondary); }
.elf-termo-extra h2, .elf-termo-extra h3, .elf-termo-extra h4 { font-weight: 600; line-height: 1.35; color: var(--elf-text); margin: 0 0 20px; }
.elf-termo-extra h2 { font-size: 1.5rem; }
.elf-termo-extra h3 { font-size: 1.375rem; }
.elf-termo-extra h4 { font-size: 1.125rem; }
.elf-termo-extra h5 { font-size: 1rem; font-weight: 600; line-height: 1.4; color: #242424; margin: 0 0 20px; }   /* o clone é Poppins; a casa é Inter */
.elf-termo-extra p { margin: 0 0 20px; }
.elf-termo-extra ul, .elf-termo-extra ol { margin: 0 0 20px; padding-left: 17px; }
.elf-termo-extra li { margin-bottom: 10px; }
.elf-termo-extra li:last-child { margin-bottom: 0; }
.elf-termo-extra li > ul, .elf-termo-extra li > ol { margin: 10px 0 0; }
.elf-termo-extra li > ul { list-style-type: disc; }
.elf-termo-extra > :last-child { margin-bottom: 0; }
.elf-termo-extra a { color: var(--elf-roxo); text-decoration: none; }
.elf-termo-extra a:hover { text-decoration: underline; }
.elf-termo-extra strong, .elf-termo-extra b { font-weight: 600; }

/* D7 (V78): no celular o texto recolhe no título + 3 linhas (o 4 conta a linha do título) com o "Ler mais"
   (listagem.php) e os respiros de cima apertam — o 1º card aparece na 1ª tela. Tablet e desktop não mudam. */
@media (max-width: 767.98px) {
  .term-description { margin-bottom: 0; }
  .term-description:not(.elf-aberta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .term-description h1 { margin: 0 0 4px; }
  .elf-ler-mais {
    display: block; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--elf-roxo); font-size: 0.875rem; text-decoration: underline;
  }
  .elf-loja-head { gap: 8px; padding: 8px 0; margin-bottom: 8px; }
  .elf-loja-head .elf-loja-linha1 { padding-bottom: 8px; }
}

/* ── barra de ferramentas (shop-loop-head): 2 linhas no 390, 1 no desktop ── */
.elf-loja-head {
  display: flex; flex-direction: column; gap: 15px;
  padding: 12px 0; margin: 0 0 20px;
  /* o gabarito fecha a barra com filete em CIMA e embaixo */
  border-top: 1px solid var(--elf-border-light); border-bottom: 1px solid var(--elf-border-light);
}
.elf-loja-linha1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.elf-loja-linha2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* na barra a migalha cresce pra 13px, sem o respiro de cima e sem o roxo no hover (como antes) */
.elf-loja-head .elf-bread { padding: 0; font-size: 0.8125rem; line-height: 1.6; }
.elf-loja-head .elf-bread a { color: var(--elf-text-tertiary); }
/* B72 (#98, dono): o "Exibindo 1–18 de 54 resultados" sai da tela e fica só pro leitor de tela (o .elf-sr-only do
   casco) — é ele que diz quantos produtos sobraram depois de filtrar e quando chega outra leva */
.elf-loja-head .woocommerce-result-count { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.elf-loja-head .woocommerce-ordering { margin: 0; }

/* as duas pílulas do gabarito (36px/13px) com o alvo e a fonte da regra v2: 44px/16px —
   o <select> precisa de ≥16px pra não disparar o auto-zoom do iOS, e a pílula ao lado
   acompanha pra dupla não ficar desemparelhada */
.elf-pill, .woocommerce-ordering select.orderby {
  height: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--elf-border-light); border-radius: var(--elf-radius-pill);
  background: var(--elf-bg); color: var(--elf-text); font-size: 1rem; line-height: 1;
}
.elf-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; text-decoration: none; }
.woocommerce-ordering select.orderby {
  appearance: none; font-weight: 400; padding-right: 40px; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: calc(100% - 12px) 50%;
}

/* ── gaveta de filtros: 300px da esquerda no 390, coluna fixa no desktop (como o gabarito) ── */
.elf-filtros-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.elf-filtros-overlay.elf-open { opacity: 1; visibility: visible; }
.elf-filtros {
  position: fixed; top: 0; left: 0; z-index: 401;
  width: 300px; max-width: 88vw; height: 100dvh;
  background: var(--elf-bg); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .25s ease;
}
.elf-filtros.elf-open { transform: none; }
/* o topo do gabarito não tem título: é só o "✕ Fechar" roxo, à direita, numa faixa de 66px
   com borda embaixo */
.elf-filtros-topo {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 66px; padding: 10px 15px; border-bottom: 1px solid rgba(0, 0, 0, .106);
}
.elf-filtros-x {
  min-height: 44px; padding: 0 4px; border: 0; background: none;        /* CONTROLE: alvo ≥44px */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 600; line-height: 1; color: #333; cursor: pointer;
}
.elf-filtros-corpo { flex: 1; overflow-y: auto; padding: 4px 30px 24px; }

/* ── o filtro (widgets nativos do Woo) com a cara e os números de antes (medidos no
      Product Filters que vestia esta gaveta — mesma caixa, mesmas linhas, mesmos vãos).
      O #elf-filtros nos seletores é de propósito: o woocommerce.css veste a lista com
      seletores de 3 classes (e um X vermelho no escolhido) que precisam perder. ── */
.elf-filtro-grupo { margin-bottom: 20px; }
.elf-filtro-grupo > summary {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 0; margin-bottom: 10px;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--elf-text); text-transform: uppercase;
  letter-spacing: .8px; list-style: none; cursor: pointer;
}
.elf-filtro-grupo > summary::-webkit-details-marker { display: none; }
/* o sinal da direita: − aberto, + recolhido (8px, 1px de traço, na posição do de antes) */
.elf-filtro-grupo > summary::after {
  content: ""; width: 8px; height: 8px; margin: 0 11.5px 1px 0;
  background: linear-gradient(#111, #111) center / 8px 1px no-repeat;
}
.elf-filtro-grupo:not([open]) > summary::after {
  background: linear-gradient(#111, #111) center / 8px 1px no-repeat, linear-gradient(#111, #111) center / 1px 8px no-repeat;
}
.elf-filtro-grupo > summary:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 2px; border-radius: 6px; }
/* o gabarito trava a caixa rolável em 303px (~7 opções de 44px, regra de toque em todas as larguras: V200) */
#elf-filtros .woocommerce-widget-layered-nav-list { max-height: 303px; overflow-y: auto; }
#elf-filtros .wc-layered-nav-term {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 4px 8px 4px 9px;
  font-size: 0.8125rem; line-height: 1.4;
}
#elf-filtros .wc-layered-nav-term::before, #elf-filtros .wc-layered-nav-term::after { content: none; }
/* a caixinha nativa (16px, accent roxo) é desenho: um pouco acima do centro, como a de antes */
#elf-filtros .wc-layered-nav-term input {
  flex: none; width: 16px; height: 16px; margin: 0 19px 4.9px 0; accent-color: var(--elf-roxo);
  box-shadow: -1px -1px #e5e5e5;       /* o fio claro que a caixa de antes tinha em cima e à esquerda */
}
#elf-filtros .wc-layered-nav-term a {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px;
  padding: 0; color: var(--elf-text-secondary); text-decoration: none; overflow-wrap: anywhere;   /* sem espaço (zoom 200%) o nome quebra e a contagem desce, em vez de cortar (V77) */
}
#elf-filtros .wc-layered-nav-term a::before { content: none; }
#elf-filtros .wc-layered-nav-term a::after { content: ""; position: absolute; inset: 0; }   /* a linha inteira é o alvo */
#elf-filtros .wc-layered-nav-term span { padding: 0; }
#elf-filtros .wc-layered-nav-term .count { flex: none; padding-left: 2px; font-size: 0.75rem; line-height: normal; color: var(--elf-text-tertiary); }
#elf-filtros .wc-layered-nav-term a:focus { outline: 0; }
#elf-filtros .wc-layered-nav-term:has(a:focus-visible) { outline: 2px solid var(--elf-roxo); outline-offset: 2px; border-radius: 6px; }
/* preço: trilho 7px #eee, faixa e pegador cinza #D5D5D5, pegador 14px. O alvo de toque de 44px
   vem de um retângulo invisível em volta (mesmo truque da lupa da galeria) */
#elf-filtros .price_slider_wrapper { padding-top: 22px; }
#elf-filtros .price_slider { height: 7px; margin: 0 6px 18px; background: #eee; border: 0; border-radius: 14px; }
#elf-filtros .ui-slider .ui-slider-range { background: #D5D5D5; border-radius: 14px; }
#elf-filtros .ui-slider .ui-slider-handle {
  width: 14px; height: 14px; top: -4px; margin-left: -7px;
  background: #fff; border: 1px solid #D5D5D5; border-radius: 50%; cursor: grab;
}
#elf-filtros .ui-slider .ui-slider-handle::after { content: ""; position: absolute; inset: -16px; }   /* 12 por dentro da borda + 32 = 44 (V55) */
#elf-filtros .ui-slider .ui-slider-handle:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 2px; }
/* os dois campos ficam À VISTA (o JS do Woo os esconde em linha, daí o !important) e o
   preço aplica sozinho ao soltar — o botão "Filtrar" só existe sem JS */
#elf-filtros .price_slider_amount { display: flex; flex-wrap: wrap; column-gap: 8px; }
#elf-filtros .price_slider_amount input {
  display: block !important; flex: 1 1 0; min-width: 0; height: 44px; font-size: 1rem; padding: 0 10px;
  border: 1px solid var(--elf-border-light); border-radius: var(--elf-radius); background: #fff;
}
#elf-filtros .price_label { flex-basis: 100%; }
#elf-filtros .price_label .from { margin-left: 4px; }      /* "Preço:  R$55": o respiro de antes */
.woocommerce-js #elf-filtros .price_slider_amount .button, #elf-filtros .price_slider_amount .clear { display: none; }
/* "Limpar Filtros": pílula roxa suave, 100% de largura, com os vãos de antes (8px sozinho no
   topo, como na busca vazia; 28px depois de um grupo, que a margem de 20 dele engoliria) */
.elf-filtros-limpa {
  min-height: 44px; display: flex; align-items: center; justify-content: center; margin: 8px 0 28px;
  padding: 0 16px; line-height: 1; background: var(--elf-roxo-suave); color: var(--elf-roxo);
  border-radius: var(--elf-radius); font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.elf-filtro-grupo + .elf-filtros-limpa { margin-top: 28px; }
/* troca em voo: a lista e a gaveta esmaecem e não aceitam o 2º toque */
.elf-filtros-corpo[aria-busy="true"], .elf-loja-corpo[aria-busy="true"] { opacity: .6; pointer-events: none; transition: opacity .2s; }

/* ── fim da lista (D42): o link da próxima leva, que a rolagem aciona (loop.js); sem números nem setas ── */
.woocommerce nav.woocommerce-pagination { margin: 16px 0 8px; }
.elf-infinito {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.8125rem; color: var(--elf-text-secondary); text-decoration: none;
}
.elf-infinito-loader { display: none; width: 22px; height: 22px; border: 2px solid var(--elf-border-light); border-top-color: var(--elf-roxo); border-radius: 50%; animation: elf-gira .7s linear infinite; }
.elf-infinito.elf-carregando .elf-infinito-loader { display: block; }
@keyframes elf-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .elf-infinito-loader { animation-duration: 3s; } }
/* aviso de rede (loop.js): acima do WhatsApp (que acaba a 117 do chão) e por cima da gaveta de filtros */
.elf-aviso-rede {
  position: fixed; left: 16px; right: 16px; bottom: calc(125px + var(--elf-safe-b)); z-index: 402;
  max-width: 420px; margin: 0 auto; padding: 0 4px 0 16px; display: flex; align-items: center; justify-content: space-between;
  background: var(--elf-dark); color: #fff; border-radius: var(--elf-radius); font-size: 0.875rem;
}
.elf-aviso-rede button { padding: 0 12px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ── busca sem resultado: aviso do Woo + o form de novo (contrato Área 3) ── */
/* o woocommerce.css põe uma tarja AZUL de 3px no topo do aviso; o gabarito usa a borda
   fina da casa. */
.woocommerce-info {
  margin: 18px 0; padding: 14px 16px; background: var(--elf-bg-secondary);
  border: 1px solid var(--elf-border-light); border-radius: var(--elf-radius);
  font-size: 0.875rem; color: var(--elf-text-secondary);
}
.woocommerce-info::before { content: none; }
.elf-busca-vazia { max-width: 420px; margin: 0 0 28px; }

@media (max-width: 1023.98px) {
  /* no 390 a barra vira duas linhas: o gabarito separa as duas com 15px de gap MAIS 15px
     de respiro e um filete */
  .elf-loja-linha1 { padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, .106); }
  .elf-filtros-corpo { padding-top: 30px; }        /* o gabarito abre o 1º grupo 30px abaixo da faixa */
  /* A gaveta fechada saía da TELA mas continuava no caminho do Tab: com ela fechada, do 31º
     Tab em diante o foco caía nos ~475 controles invisíveis (marcas, sabores, slider…).
     `visibility:hidden` tira do foco e do leitor de tela; volta junto com a animação. */
  .elf-filtros { visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .elf-filtros.elf-open { visibility: visible; }
}

@media (min-width: 1024px) {
  .term-description h1 { font-size: 1.5rem; }         /* gabarito: 22 no 390, 24 no 1440 */
  .elf-loja-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .elf-loja-linha1 { justify-content: flex-start; }
  .elf-loja-linha2 { justify-content: flex-end; flex: 0 0 auto; }
  .elf-filtros-abrir { display: none; }              /* no desktop a coluna já está aberta */
  .elf-filtros-overlay { display: none; }
  .elf-filtros-topo { display: none; }
  /* a coluna de filtros à esquerda: 203px + 30 de vão, como o gabarito no 1440.
     A grade tem DOIS filhos e só dois: a coluna de filtros e o invólucro do miolo. */
  .elf-listagem .elf-conteudo { padding: 16px 15px 40px; display: grid; grid-template-columns: 203px minmax(0, 1fr); gap: 30px; align-items: start; }
  .elf-filtros {
    position: static; z-index: auto; width: auto; max-width: none; height: auto;   /* o 401 é da gaveta: aqui cobria o menu e o topo (V01/V02) */
    transform: none; background: none; display: block;
  }
  .elf-filtros-corpo { overflow: visible; padding: 0; }
}