/* Listagem de categoria e busca do redesign da Floricultura Xara.
   A grade de cards (.xara-grade-produtos) vem de home.css, que carrega em
   toda pagina; aqui ficam o cabecalho da listagem, o trilho de chips das
   subcategorias, o formulario da busca e a casca que neutraliza o layout do
   Journal 2 em volta (#container, .row, #content, .product-filter). */

/* --- casca: o #container do Journal 2 vira uma secao creme de largura cheia --- */
#container.xara-listagem {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 16px 0 64px;
  background: var(--xara-surface);
  color: var(--xara-ink);
  font-family: var(--xara-fonte-corpo);
}
.xara-listagem > .xara-container > .row { margin: 0; }
/* dois ids: o Journal 2 da padding ao #content em .extended-layout com a
   mesma especificidade de .xara-listagem #content */
#container.xara-listagem #content { padding: 0; }

/* --- migalhas de pao --- */
.xara-listagem .xara-migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: .82rem;
  color: var(--xara-sage);
}
.xara-listagem .xara-migalhas li { display: inline; padding: 0; float: none; }
.xara-listagem .xara-migalhas li + li::before { content: "\203A"; padding-right: 8px; color: var(--xara-sage); }
.xara-listagem .xara-migalhas a { color: inherit; text-decoration: none; }
.xara-listagem .xara-migalhas a:hover { color: var(--xara-accent-texto); text-decoration: underline; }

/* --- cabecalho da listagem --- */
.xara-listagem__cabecalho { margin: 0 0 20px; }
.xara-listagem__cabecalho .xara-h1 { text-transform: none; }
.xara-listagem__contagem {
  margin: 8px 0 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--xara-gold-escuro); /* 5,00:1 sobre o creme da pagina; --xara-sage dava 4,25 */
}
.xara-listagem__subtitulo {
  margin: 0 0 16px;
  padding: 0;
  background: none;
  font-family: var(--xara-fonte-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
}
.xara-listagem .category-info { margin: 0 0 20px; line-height: 1.6; }

/* --- trilho de subcategorias (chips) ---
   No celular herda de .xara-trilho a rolagem horizontal sangrando o gutter;
   no desktop .xara-trilho vira grade de 5 colunas, e aqui volta a ser flex. */
.xara-trilho--sub {
  margin-bottom: 24px;
  /* sem isso o snap alinha o primeiro chip na borda da tela, ignorando o gutter */
  scroll-padding-left: var(--xara-gutter);
}
.xara-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--xara-toque);
  padding: 0 18px;
  border: 1px solid var(--xara-border);
  border-radius: var(--xara-raio-pill);
  background: var(--xara-surface-panel);
  color: var(--xara-ink);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.xara-chip:hover { border-color: var(--xara-accent); color: var(--xara-accent-texto); }
.xara-chip:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }
.xara-chip--ativo,
.xara-chip[aria-current="page"] {
  background: var(--xara-accent);
  border-color: var(--xara-accent);
  color: #FFF;
}

/* --- barra de ordenacao do Journal 2 ---
   Continua funcional (limite e ordenacao); o alternador grade/lista e o
   "comparar" nao fazem sentido com o card novo e ficam ocultos. */
.xara-listagem .product-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 16px;
  position: static;
  height: auto;
  width: auto;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: var(--xara-ink);
}
.xara-listagem .product-filter .display,
.xara-listagem .product-filter .product-compare { display: none; }
/* o Journal 2 posiciona .limit e .sort por absoluto no celular; aqui os dois
   voltam ao fluxo e viram itens flex */
.xara-listagem .product-filter .limit,
.xara-listagem .product-filter .sort {
  display: flex;
  align-items: center;
  gap: 8px;
  position: static;
  float: none;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1.3;
  font-size: .85rem;
}
.xara-listagem .product-filter b { display: inline; font-weight: 600; color: var(--xara-sage); }
.xara-listagem .product-filter select,
.xara-busca-form .form-control {
  width: auto;
  min-height: var(--xara-toque);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--xara-border);
  border-radius: 12px;
  background: var(--xara-surface-panel);
  color: var(--xara-ink);
  font-family: var(--xara-fonte-corpo);
  font-size: .9rem;
  box-shadow: none;
}
.xara-listagem .product-filter select:focus-visible,
.xara-busca-form .form-control:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }

/* --- grade: cada item estica o card ate a altura da linha ---
   min-width: 0 deixa a coluna encolher abaixo do min-content do card no
   celular (o card sozinho ja tem overflow: hidden; o invólucro nao). */
.xara-grade-produtos__item { display: flex; flex-direction: column; min-width: 0; }
.xara-grade-produtos__item > .xara-card-produto { flex: 1; }

/* --- paginacao --- */
.xara-listagem .row.pagination { margin: 24px 0 0; }
.xara-listagem .pagination .results { font-size: .85rem; color: var(--xara-sage); }
.xara-listagem .pagination .links a { color: var(--xara-ink); }
.xara-listagem .pagination .links b { color: var(--xara-accent-texto); }

/* --- formulario da busca ---
   E o unico campo de busca do site nesta etapa (o header do Journal 2 esta
   oculto), por isso continua na pagina, so com a cara do redesign. */
.xara-busca-form {
  margin: 0 0 32px;
  padding: 20px;
  border: 1px solid var(--xara-border);
  border-radius: var(--xara-raio);
  background: var(--xara-surface-panel);
}
.xara-busca-form h2 {
  margin: 0 0 14px;
  padding: 0;
  background: none;
  font-family: var(--xara-fonte-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
}
.xara-busca-form .row.content { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.xara-busca-form .row.content > div {
  flex: 1 1 100%;
  float: none;
  width: auto;
  padding: 0;
}
.xara-busca-form .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--xara-toque);
  margin: 0;
  padding: 0;
  font-size: .9rem;
}
.xara-busca-form .checkbox-inline input { position: static; margin: 0; width: 18px; height: 18px; }
/* o Journal 2 fixa 250px em #content.search-page .content input[type="text"] */
#content.search-page .xara-busca-form #input-search { width: 100%; }
.xara-busca-form .buttons { margin: 0; padding: 0; border: 0; background: none; }
.xara-busca-form .buttons .right { float: none; text-align: left; }
.xara-busca-form #button-search {
  display: inline-flex;
  align-items: center;
  min-height: var(--xara-toque);
  padding: 0 24px;
  border: 0;
  border-radius: var(--xara-raio-pill);
  background: var(--xara-accent);
  color: #FFF;
  font-family: var(--xara-fonte-corpo);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .18s ease;
}
.xara-busca-form #button-search:hover { background: var(--xara-accent-2); }
.xara-busca-form #button-search:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }

/* --- estado vazio --- */
.xara-listagem #content > p { margin: 0 0 20px; font-size: 1rem; }
.xara-listagem .buttons .btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: var(--xara-toque);
  padding: 0 24px;
  border: 0;
  border-radius: var(--xara-raio-pill);
  background: var(--xara-accent);
  color: #FFF;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 760px) {
  /* responsive.css do Journal 2 forca padding de 20px no div#content com
     prioridade maxima ate 760px: o gutter do container e zerado e esse padding
     vira o proprio gutter (mesmos 20px de --xara-gutter). */
  .xara-listagem > .xara-container { padding: 0; }
  .xara-listagem .xara-migalhas { padding: 0 var(--xara-gutter); }
  .xara-listagem .product-filter .sort { flex: 1 1 auto; }
  .xara-listagem .product-filter .sort select { flex: 1; margin: 0; }
}
@media (min-width: 768px) {
  .xara-busca-form .row.content > div { flex: 1 1 calc(50% - 12px); }
  .xara-busca-form .row.content > div:first-child { flex-basis: 100%; }
}
@media (min-width: 980px) {
  #container.xara-listagem { padding: 24px 0 88px; }
  .xara-listagem__cabecalho { margin-bottom: 28px; }
  .xara-trilho--sub {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
  }
  .xara-busca-form { padding: 24px 28px; }
  .xara-busca-form .row.content > div:first-child { flex: 2 1 320px; }
  .xara-busca-form .row.content > div { flex: 1 1 200px; }
}