/* ==========================================================================
   Aletto - grade de categorias
   ========================================================================== */

.aletto-catgrid {
  margin: 0 0 3em;
}

.aletto-catgrid__titulo {
  color: var(--aletto-heading, #737b97);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 1.4em;
  padding: 0;
}

.aletto-catgrid__titulo::after {
  display: none;
}

.aletto-catgrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--aletto-catgrid-colunas, 3), 1fr);
  gap: 1.5em;
}

.aletto-catgrid__item {
  position: relative;
  display: block;
  aspect-ratio: 11 / 5;
  overflow: hidden;
  border-radius: var(--aletto-raio, 12px);
  background-color: #d9d9d9;
  text-decoration: none;
  isolation: isolate;
}

.aletto-catgrid__item:hover {
  text-decoration: none;
}

.aletto-catgrid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.aletto-catgrid__item:hover .aletto-catgrid__img {
  transform: scale(1.05);
}

.aletto-catgrid__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0.32) 100%
  );
  transition: background 0.25s ease;
}

.aletto-catgrid__item:hover .aletto-catgrid__veu {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.aletto-catgrid__nome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1em;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

@media (max-width: 1000px) {
  .aletto-catgrid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .aletto-catgrid__nome {
    font-size: 19px;
  }
}

@media (max-width: 560px) {
  .aletto-catgrid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9em;
  }
  .aletto-catgrid__item {
    aspect-ratio: 3 / 2;
  }
  .aletto-catgrid__nome {
    font-size: 15px;
  }
  .aletto-catgrid__titulo {
    font-size: 22px;
  }
}

/* ==========================================================================
   Filtros de marca e preco (loja/categoria de produto)
   ==========================================================================
   Mesma marcacao pra mobile e desktop - o CSS decide se aparece como
   painel/drawer (mobile, abaixo de 768px) ou como barra compacta sempre
   visivel acima da grade (768px+). Breakpoint 768px escolhido pra ficar
   consistente com o resto do checkout (mesmo ponto de corte ja usado em
   assets/aletto-checkout.css).
   ========================================================================== */

.aletto-filtros {
  margin: 0 0 1.5em;
  font-family: var(--aletto-fonte, "Poppins", sans-serif);
}

.aletto-filtros__abrir {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background-color: var(--aletto-branco, #fff);
  border: 1px solid var(--aletto-borda-form, #dadada);
  border-radius: var(--aletto-raio, 12px);
  padding: 0.75em 1.2em;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--aletto-texto, #000);
  cursor: pointer;
}

.aletto-filtros__abrir svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
}

.aletto-filtros__bolinha {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--aletto-verde-compra, #0fb930);
}

.aletto-filtros__fundo {
  display: none;
}

.aletto-filtros__painel-topo,
.aletto-filtros__fechar {
  display: none;
}

/* ---- Campos, compartilhados entre mobile/desktop ---- */
.aletto-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.aletto-filtros__campo label,
.aletto-filtros__campo-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.aletto-filtros__painel select,
.aletto-filtros__preco-linha input {
  font-family: inherit;
  font-size: 14px;
  color: var(--aletto-texto, #000);
  border: 1px solid var(--aletto-borda-form, #dadada);
  border-radius: var(--aletto-raio, 12px);
  padding: 0.6em 0.9em;
  background-color: var(--aletto-branco, #fff);
  height: 44px;
  width: 100%;
}

.aletto-filtros__painel select:focus,
.aletto-filtros__preco-linha input:focus {
  outline: none;
  border-color: var(--aletto-verde-agua, #24c7b8);
  box-shadow: 0 0 0 3px rgba(36, 199, 184, 0.18);
}

.aletto-filtros__preco-linha {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.aletto-filtros__preco-linha input {
  min-width: 0;
}

.aletto-filtros__preco-separador {
  color: var(--aletto-heading, #737b97);
  flex-shrink: 0;
}

.aletto-filtros__acoes {
  display: flex;
  align-items: center;
  gap: 1em;
}

.aletto-filtros__aplicar {
  background-color: var(--aletto-verde-compra, #0fb930);
  color: var(--aletto-branco, #fff);
  border: none;
  border-radius: var(--aletto-raio, 12px);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 0.7em 1.6em;
  height: 44px;
  cursor: pointer;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

.aletto-filtros__aplicar:hover {
  filter: brightness(1.08);
}

.aletto-filtros__limpar {
  font-size: 13px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
  text-decoration: underline;
  white-space: nowrap;
}

.aletto-filtros__limpar:hover {
  color: var(--aletto-verde-agua-hover, #18867c);
}

/* "Nenhum produto encontrado com esses filtros" */
.aletto-filtros__vazio {
  text-align: center;
  padding: 3em 1.5em;
  background-color: var(--aletto-branco, #fff);
  border: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: var(--aletto-raio, 12px);
}

.aletto-filtros__vazio p {
  font-size: 15px;
  color: var(--aletto-texto, #000);
  margin: 0 0 1em;
}

.aletto-filtros__limpar--vazio {
  display: inline-block;
  background-color: var(--aletto-verde-compra, #0fb930);
  color: var(--aletto-branco, #fff);
  border-radius: var(--aletto-raio, 12px);
  padding: 0.7em 1.6em;
  text-decoration: none;
  font-weight: 700;
}

.aletto-filtros__limpar--vazio:hover {
  filter: brightness(1.08);
  color: var(--aletto-branco, #fff);
}

/* ================= Mobile: painel/drawer, ate 767px ================= */
@media (max-width: 767px) {
  .aletto-filtros__painel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    background-color: var(--aletto-branco, #fff);
    border-radius: 16px 16px 0 0;
    padding: 1.4em 1.4em calc(1.4em + env(safe-area-inset-bottom, 0px));
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 1002;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.14);
  }

  .aletto-filtros__painel.is-aberto {
    transform: translateY(0);
  }

  .aletto-filtros__fundo {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .aletto-filtros__fundo.is-visivel {
    opacity: 1;
    pointer-events: auto;
  }

  .aletto-filtros__painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--aletto-borda, #e7e7e7);
  }

  .aletto-filtros__titulo {
    font-weight: 700;
    font-size: 16px;
  }

  .aletto-filtros__fechar {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0.3em;
    cursor: pointer;
    color: var(--aletto-texto, #000);
  }

  .aletto-filtros__fechar svg {
    width: 20px;
    height: 20px;
  }

  .aletto-filtros__form {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
  }

  .aletto-filtros__acoes {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.8em;
    margin-top: 0.4em;
  }

  .aletto-filtros__aplicar {
    width: 100%;
  }

  .aletto-filtros__limpar {
    text-align: center;
  }
}

/* ================= Desktop: barra compacta, 768px+ ================= */
@media (min-width: 768px) {
  .aletto-filtros__abrir {
    display: none;
  }

  .aletto-filtros__painel {
    display: block;
    background-color: var(--aletto-branco, #fff);
    border: 1px solid var(--aletto-borda, #e7e7e7);
    border-radius: var(--aletto-raio, 12px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    padding: 1.1em 1.4em;
  }

  .aletto-filtros__form {
    display: flex;
    align-items: flex-end;
    gap: 1.6em;
    flex-wrap: wrap;
  }

  .aletto-filtros__campo {
    min-width: 190px;
  }

  .aletto-filtros__campo--preco {
    min-width: 220px;
  }

  .aletto-filtros__painel select,
  .aletto-filtros__preco-linha input {
    height: 42px;
  }

  .aletto-filtros__acoes {
    margin-left: auto;
  }
}

/* ==========================================================================
   Topo da pagina de categoria/loja (breadcrumb, titulo, descricao, imagem)
   ==========================================================================
   Escopo: somente paginas de arquivo de produto (loja ou categoria) -
   nunca produto individual, carrinho, checkout ou qualquer outra pagina.
   Body classes nativas do WooCommerce, conferidas ao vivo antes de
   escrever qualquer regra: "woocommerce-shop" (loja), "tax-product_cat"
   (categoria) e "tax-product_brand" - essa terceira e necessaria porque,
   quando o filtro de marca esta combinado com uma categoria na URL, o
   WordPress troca o "queried object" pra marca e o body ganha
   "tax-product_brand" em vez de "tax-product_cat" (mesmo comportamento
   documentado em inc/aletto-filtros.php para o titulo/breadcrumb/
   descricao) - sem essa terceira classe, o topo "perderia" o estilo
   premium exatamente quando um filtro de marca esta ativo. Nenhuma
   dessas tres classes existe em produto/carrinho/checkout/conta.
   ========================================================================== */

body.woocommerce-shop .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_brand .woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--aletto-heading, #737b97);
  margin: 0 0 1.2em;
}

body.woocommerce-shop .woocommerce-breadcrumb a,
body.tax-product_cat .woocommerce-breadcrumb a,
body.tax-product_brand .woocommerce-breadcrumb a {
  color: var(--aletto-heading, #737b97);
}

body.woocommerce-shop .woocommerce-breadcrumb a:hover,
body.tax-product_cat .woocommerce-breadcrumb a:hover,
body.tax-product_brand .woocommerce-breadcrumb a:hover {
  color: var(--aletto-verde-agua-hover, #18867c);
}

body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_brand .woocommerce-products-header {
  margin: 0 0 1.8em;
  text-align: left;
}

body.woocommerce-shop .woocommerce-products-header__title.page-title,
body.tax-product_cat .woocommerce-products-header__title.page-title,
body.tax-product_brand .woocommerce-products-header__title.page-title {
  font-family: var(--aletto-fonte, "Poppins", sans-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--aletto-texto, #000);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-align: left;
}

/* Descricao real da categoria (quando existir) - largura de leitura
   confortavel, sem virar um bloco enorme; nenhum texto e inventado nem
   truncado, so a MEDIDA (largura) e controlada. */
body.woocommerce-shop .term-description,
body.tax-product_cat .term-description,
body.tax-product_brand .term-description {
  font-family: var(--aletto-fonte, "Poppins", sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--aletto-heading, #737b97);
  text-align: left;
  max-width: 680px;
}

body.woocommerce-shop .term-description p,
body.tax-product_cat .term-description p,
body.tax-product_brand .term-description p {
  margin: 0 0 0.6em;
}

body.woocommerce-shop .term-description p:last-child,
body.tax-product_cat .term-description p:last-child,
body.tax-product_brand .term-description p:last-child {
  margin-bottom: 0;
}

/* Logo nativa da marca (WC_Brands::brand_description(), <img
   class="brand-thumbnail">) - so aparece quando o filtro de marca fica
   sozinho como "queried object" (mesmo cenario documentado acima).
   Aparece solta, sem rotulo, e fica orfa/confusa agora que o topo desta
   pagina volta a mostrar a CATEGORIA (titulo, breadcrumb e descricao ja
   corrigidos em inc/aletto-filtros.php) - por isso e escondida aqui.
   "img.brand-thumbnail" e uma classe exclusiva desse elemento nativo do
   WooCommerce Brands, entao a regra nao afeta nenhuma outra imagem. */
img.brand-thumbnail {
  display: none;
}

/* Imagem da categoria (so aparece quando a categoria tem thumbnail
   cadastrada - inc/aletto-filtros.php ja garante isso no PHP, nenhum
   placeholder e criado aqui). "Manter proporcao" levado ao pe da letra:
   sem aspect-ratio fixo nem object-fit:cover (isso cortaria/distorceria
   a composicao real da imagem, que pode ser larga ou estreita - so uma
   das 23 categorias tem imagem hoje, entao nao da pra presumir um
   formato padrao). A imagem e exibida inteira, no tamanho natural dela,
   so limitada por max-width/max-height e centralizada. */
.aletto-categoria-topo__imagem-wrap {
  margin: 1.4em 0 0;
}

.aletto-categoria-topo__imagem {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--aletto-raio, 12px);
}

@media (max-width: 767px) {
  body.woocommerce-shop .woocommerce-breadcrumb,
  body.tax-product_cat .woocommerce-breadcrumb,
  body.tax-product_brand .woocommerce-breadcrumb {
    font-size: 11.5px;
    margin-bottom: 0.9em;
  }

  body.woocommerce-shop .woocommerce-products-header,
  body.tax-product_cat .woocommerce-products-header,
  body.tax-product_brand .woocommerce-products-header {
    margin-bottom: 1.3em;
  }

  body.woocommerce-shop .woocommerce-products-header__title.page-title,
  body.tax-product_cat .woocommerce-products-header__title.page-title,
  body.tax-product_brand .woocommerce-products-header__title.page-title {
    font-size: 26px;
    margin-bottom: 0.4em;
  }

  body.woocommerce-shop .term-description,
  body.tax-product_cat .term-description,
  body.tax-product_brand .term-description {
    font-size: 14px;
    line-height: 1.6;
  }

  .aletto-categoria-topo__imagem-wrap {
    margin-top: 1.1em;
  }

  .aletto-categoria-topo__imagem {
    max-height: 200px;
  }
}

/* ==========================================================================
   Colunas da grade de produtos (loja/categoria) - 4 em vez de 5 no
   desktop, a partir de 901px
   ==========================================================================
   A regra base de "ul.products" (display:grid, repeat(5,1fr) acima de
   1200px) mora em style.css e e GLOBAL/sem escopo - ela tambem e a unica
   regra que os "Produtos relacionados" da pagina de produto individual
   usam no desktop (nao tem nenhuma regra propria pra eles ali), entao
   ela NAO podia ser alterada diretamente sem mudar a pagina de produto
   tambem (fora do escopo desta tarefa). A solucao foi uma regra mais
   especifica (com as mesmas classes de body ja usadas nos filtros e no
   topo da categoria), que so entra em jogo em paginas de loja/categoria
   - Produtos relacionados, Home e qualquer outra grade continuam com o
   comportamento de sempre.

   Breakpoint escolhido: 901px (min-width) - reaproveita exatamente o
   ponto de corte que ja existe em style.css para a faixa "3 colunas ->
   4 colunas" (@media max-width: 900px), so trocando o que essa faixa
   passa a mostrar quando ela AUMENTA de novo. Testado especificamente
   em 1000px (largura pedida) antes de decidir: o card resultante nesse
   ponto (~223px) fica dentro do mesmo intervalo medido nos demais
   breakpoints desktop (227-321px) - nao ficou nem apertado nem
   desproporcional, entao nao foi necessario criar um breakpoint novo
   so para 1000px. Abaixo de 901px (tablet/mobile), nada muda - a
   grade continua herdando as mesmas regras de sempre (3 colunas ate
   900px, 2 colunas ate 640px, gap e largura identicos aos de antes). */
@media (min-width: 901px) {
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_brand ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}