/* ==========================================================================
   Chase — as duas telas de ausência: 404 e busca sem resultado

   São o fim da fila do redesenho, e as duas que o protótipo não tem por
   motivos opostos: o 404 porque protótipo nenhum desenha erro, e a busca vazia
   porque o mock tem produto para tudo.

   ── O QUE ELAS TÊM EM COMUM ──

   As duas aparecem quando a pessoa já errou o caminho, e as duas precisam
   fazer a mesma coisa: dizer o que aconteceu sem culpar ninguém, e oferecer a
   saída. O Storefront já oferece a saída no 404 — busca, categorias e produtos
   — e o que faltava era o desenho.

   A busca vazia da loja já herda quase tudo do `listagem.css`: contêiner,
   título e a linha "Nenhum produto". O que sobrava era a frase solta do
   WooCommerce, sem moldura nenhuma no meio de uma página de cartões.
   ========================================================================== */

/* ==========================================================================
   1. Contêiner do 404

   O 404 não passa pelo `chase_e_pagina_de_conteudo()` — ele não é `is_singular`
   — nem pelo `chase_e_listagem()`. Ficava com os 1265px e o recuo de 41,89 do
   Storefront, sozinho entre telas de 1240 e 24.
   ========================================================================== */

body.error404 #content > .col-full {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) 0;
}

body.error404 .site-main,
body.error404 .content-area {
  margin-bottom: 0;
}

/* ==========================================================================
   2. Título e recado

   O título já vinha em Outfit 36 pela ponte. O que muda é o ritmo e a medida
   do parágrafo: 42rem, a mesma coluna de leitura das páginas de conteúdo.
   ========================================================================== */

body.error404 .page-header {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

body.error404 .page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

body.error404 .page-content > p {
  max-width: 42rem;
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* Os blocos que o Storefront oferece como saída — busca, destaques,
   categorias, populares — são seções, e ganham o mesmo respiro entre si que a
   home usa entre as dela. */
body.error404 .page-content > section,
body.error404 .page-content > .fourohfour-columns-2 {
  margin-top: var(--section-gap);
}

body.error404 .page-content h2,
body.error404 .page-content .widget-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-transform: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}

/* ==========================================================================
   3. A busca do 404

   Do `Input.jsx`, no mesmo desenho do campo de busca do header: `radius-md`,
   borda `--border-default`, `padding: 12px 14px`, altura mínima de 44 e
   `line-height: normal` — sem isso o campo herda o 1,5 do corpo e estoura,
   que é a armadilha já paga três vezes neste redesenho.

   O botão ao lado é o `accent` no tamanho `md`.

   O Storefront desenha uma lupa como `::before` do formulário, em Font Awesome
   e posicionada para o campo antigo. Ela sai: aqui quem procura já tem o botão
   rotulado ao lado, e a lupa flutuante cairia sobre o texto digitado.
   ========================================================================== */

body.error404 .widget_product_search form {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  max-width: 42rem;
}

body.error404 .widget_product_search form::before {
  content: none;
}

body.error404 .widget_product_search input.search-field {
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: normal;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

body.error404 .widget_product_search input.search-field:focus {
  border-color: var(--border-brand);
  box-shadow: var(--ring);
  outline: none;
}

/* O BOTAO ESTAVA INVISIVEL, e nao por engano nosso.

   O Storefront esconde o `submit` da busca com o padrao de leitor de tela —
   `position: absolute`, `clip: rect(1px,1px,1px,1px)`, `overflow: hidden` — e
   deixa a lupa `::before` do formulario no lugar dele, contando com a tecla
   Enter para enviar.

   Como a lupa saiu daqui (ela foi desenhada para o campo antigo e cairia sobre
   o texto), o campo ficaria sem nenhuma pista visivel de como enviar. Numa
   pagina de erro, que e onde a pessoa ja esta perdida, isso e o oposto do que
   se quer.

   Entao o botao volta a ser botao: as tres propriedades do `clip` sao
   desfeitas e ele vira o `accent` no tamanho `md`. Medido antes: ele ocupava
   38x44 sobreposto ao campo, em x=61 contra os x=62 do input. */
body.error404 .widget_product_search button[type='submit'] {
  position: static;
  clip: auto;
  clip-path: none;
  overflow: visible;
  width: auto;
  height: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action-accent);
  color: var(--text-on-yellow);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  cursor: pointer;
}

body.error404 .widget_product_search button[type='submit']:hover,
body.error404 .widget_product_search button[type='submit']:focus-visible {
  background: var(--action-accent-hover);
  color: var(--text-on-yellow);
}

/* ==========================================================================
   4. A lista de categorias do 404

   Vem como lista de widget, com o quadrado Font Awesome do Storefront em cada
   item — a mesma armadilha já registrada para os filtros da loja. Aqui ela
   vira uma fila de etiquetas, que é o que o `Tag.jsx` do handoff faz com
   lista curta de navegação.
   ========================================================================== */

body.error404 .widget_product_categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.error404 .widget_product_categories li {
  margin: 0;
  padding: 0;
}

body.error404 .widget_product_categories li::before {
  content: none;
}

body.error404 .widget_product_categories li a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--neutral-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

body.error404 .widget_product_categories li a:hover,
body.error404 .widget_product_categories li a:focus-visible {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
  text-decoration: none;
}

/* A contagem ao lado do nome fica no tom secundário. */
body.error404 .widget_product_categories li .count {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ==========================================================================
   5. Busca da loja sem resultado

   A frase do WooCommerce vinha nua: sem fundo, sem recuo, sem borda, no meio
   de uma página onde tudo o mais é cartão. Vira o `Card` de tom afundado, o
   mesmo do simulador de frete da página de produto — afundado e não elevado,
   porque é um recado e não uma ação.

   O texto continua sendo o do WooCommerce. Trocá-lo por algo mais caloroso
   seria melhor, e é filtro de tradução, não CSS — fica anotado para quando o
   proprietário decidir a frase.
   ========================================================================== */

.woocommerce-no-products-found,
.woocommerce ul.products + .woocommerce-info:only-child {
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-8);
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* O WooCommerce embrulha a frase num `.woocommerce-info` com borda de topo
   colorida e um `::before` de ícone. Dentro do cartão os dois sobram. */
.woocommerce-no-products-found .woocommerce-info {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
}

.woocommerce-no-products-found .woocommerce-info::before {
  content: none;
}