/* ============================================================================
   pesquisas-nova.css — estilos da página de categorias/pesquisas REFATORADA
   (pesquisas-view-nova.php). Carregado apenas pela ação categoriasnovo().
   Escopado em .pesquisas-nova para não afetar a página antiga nem o restante da loja.
   ============================================================================ */

/* ===== Grid de produtos — CSS Grid (alinha TODAS as linhas igualmente) =====
   CSS Grid em vez de flex-wrap: cada linha tem a mesma altura de células, então os
   cards nunca desalinham entre linhas (era o problema do float/flex-wrap). 4 colunas
   no desktop, reduzindo por breakpoint. */
.pesquisas-nova #produtos_content {
	display: grid !important;        /* vence .text-center/.row e qualquer display legado */
	grid-template-columns: repeat(4, 1fr); gap: 16px;
	margin: 0; padding: 0;           /* anula a margem negativa de .row */
}
/* CRÍTICO: o Bootstrap injeta `.row::before/::after { display:table; content:" " }`
   (clearfix de float). Num grid, esses pseudo-elementos viram GRID ITEMS e ocupam a 1ª/última
   célula → o primeiro card "pula uma posição". Como o grid não usa float, removemos o clearfix. */
.pesquisas-nova #produtos_content::before,
.pesquisas-nova #produtos_content::after { content: none !important; display: none !important; }
/* CRÍTICO: a regra global `.xsResponse .item { width:100% !important }` (o #produtos_content
   tem class="row xsResponse") forçava cada .item a 100% de largura → empilhava tudo numa
   coluna. Sobrescrevemos com a MESMA especificidade + carga posterior. Sem float/width: o
   card vira grid item puro e preenche a célula do grid. */
.pesquisas-nova #produtos_content > .item {
	float: none !important; width: auto !important; max-width: none !important;
	padding: 0 !important; margin: 0 !important; display: flex !important;
}
.pesquisas-nova #produtos_content > .item > .card-produto { width: 100%; }

/* responsivo do grid */
@media (max-width: 1199px) { .pesquisas-nova #produtos_content { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .pesquisas-nova #produtos_content { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .pesquisas-nova #produtos_content { grid-template-columns: 1fr; } }

/* ============================================================================
   FILTROS DESABILITADOS (temporário) — não há filtros configurados nesta loja.
   .pn-sidebar-off oculta a coluna da sidebar e faz o conteúdo ocupar a largura toda,
   em desktop e mobile. Para reativar os filtros: remover a classe pn-sidebar-off do
   markup (e o botão "Filtros" comentado na view). Detalhes em docs/FILTROS-PESQUISA.md.
   O CSS do drawer abaixo fica preservado para a reativação. */
.pesquisas-nova .pn-sidebar-off { display: none !important; }
/* conteúdo ocupa 100% quando a sidebar está oculta (anula a largura de col-lg-9) */
.pesquisas-nova .pn-sidebar-off ~ .pn-conteudo,
.pesquisas-nova .pn-conteudo { width: 100%; }

/* ============================================================================
   DRAWER DE FILTROS (categorias + preços) — só no mobile (≤1199px).
   No DESKTOP (≥1200px): sidebar estática; botão "Filtros", header do drawer e overlay
   ficam ocultos. No MOBILE: a sidebar (.pn-sidebar) vira um painel que desliza da
   esquerda, acionado pelo botão .pn-filtros-toggle. Breakpoint 1199px = mesmo do projeto.
   ============================================================================ */

/* por padrão (desktop) os elementos exclusivos do drawer não aparecem */
.pesquisas-nova .pn-filtros-toggle,
.pesquisas-nova .pn-drawer-header,
.pesquisas-nova .pn-drawer-overlay { display: none; }

@media (max-width: 1199px) {
	/* botão "Filtros" no topo do grid — herda a cor do tema */
	.pesquisas-nova .pn-filtros-toggle {
		display: inline-flex; align-items: center; gap: 8px;
		background: #fff; border: 1.5px solid var(--mc-cor, #2c2f36); color: var(--mc-cor, #2c2f36);
		border-radius: 8px; font-size: 14px; font-weight: 700; padding: 9px 16px;
		cursor: pointer; margin: 0 0 6px 0;
	}
	.pesquisas-nova .pn-filtros-toggle:hover { background: var(--mc-cor, #2c2f36); color: #fff; }
	.pesquisas-nova .pn-filtros-toggle .fa { font-size: 13px; }

	/* a sidebar vira painel deslizante fixo à esquerda, fora da tela por padrão */
	.pesquisas-nova .pn-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050;
		width: 86%; max-width: 340px;
		background: #fff; box-shadow: 2px 0 16px rgba(0,0,0,.18);
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 0 16px 24px;
		transform: translateX(-100%); transition: transform .28s ease;
	}
	/* aberto: body recebe .pn-drawer-aberto (via JS) → desliza pra dentro */
	body.pn-drawer-aberto .pesquisas-nova .pn-sidebar { transform: translateX(0); }

	/* overlay escuro atrás do drawer */
	.pesquisas-nova .pn-drawer-overlay {
		display: block; position: fixed; inset: 0; z-index: 1040;
		background: rgba(0,0,0,.45); opacity: 0; visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
	}
	body.pn-drawer-aberto .pesquisas-nova .pn-drawer-overlay { opacity: 1; visibility: visible; }
	/* trava o scroll do fundo enquanto o drawer está aberto */
	body.pn-drawer-aberto { overflow: hidden; }

	/* header do drawer (título + X) — fixo no topo do painel */
	.pesquisas-nova .pn-drawer-header {
		display: flex; align-items: center; justify-content: space-between;
		position: sticky; top: 0; background: #fff; z-index: 1;
		padding: 14px 0 12px; margin-bottom: 6px; border-bottom: 1px solid #e4e6ea;
	}
	.pesquisas-nova .pn-drawer-titulo { font-size: 16px; font-weight: 800; color: #2c2f36; }
	.pesquisas-nova .pn-drawer-fechar {
		background: none; border: 0; font-size: 28px; line-height: 1; color: #6b7180;
		cursor: pointer; padding: 0 4px;
	}
	.pesquisas-nova .pn-drawer-fechar:hover { color: #2c2f36; }
}

/* ============================================================================
   BARRA DE ORDENAÇÃO + PAGINAÇÃO (página nova). Toggle grid/lista foi removido.
   ============================================================================ */

/* label "Ordenar por" + select compacto */
.pesquisas-nova .change-order { display: inline-flex; align-items: center; gap: 8px; }
.pesquisas-nova .pn-ordenar-label { margin: 0; font-size: 13px; font-weight: 600; color: #6b7180; white-space: nowrap; }
.pesquisas-nova .change-order .form-control { width: auto; min-width: 170px; display: inline-block; }
@media (max-width: 767px) {
	/* no mobile a label some p/ economizar espaço; o select assume largura total da barra */
	.pesquisas-nova .pn-ordenar-label { display: none; }
	.pesquisas-nova .change-order { width: 100%; }
	.pesquisas-nova .change-order .form-control { width: 100%; }
}

/* paginação com janela de páginas — números centralizados; info abaixo, também centrada.
   Espaçamento generoso acima (separa dos cards) e abaixo (separa do footer). */
.pesquisas-nova .pn-paginacao-wrap {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	margin: 40px 0 48px; padding-top: 28px; border-top: 1px solid #e4e6ea;
}
.pesquisas-nova .pn-paginacao {
	display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
	margin: 0; padding: 0; list-style: none;
}
.pesquisas-nova .pn-paginacao > li { margin: 0; }
.pesquisas-nova .pn-paginacao > li > a,
.pesquisas-nova .pn-paginacao > li > span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 10px; box-sizing: border-box;
	border: 1px solid #e4e6ea; border-radius: 8px; background: #fff;
	color: #3a3f49; font-size: 14px; font-weight: 600; text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pesquisas-nova .pn-paginacao > li > a:hover {
	border-color: var(--mc-cor, #2c2f36); color: var(--mc-cor, #2c2f36);
}
/* página atual — na cor do tema */
.pesquisas-nova .pn-paginacao > li.active > a,
.pesquisas-nova .pn-paginacao > li.active > span {
	background: var(--mc-cor, #2c2f36); border-color: var(--mc-cor, #2c2f36); color: #fff; cursor: default;
}
/* reticências e setas desabilitadas — sem borda/clique */
.pesquisas-nova .pn-paginacao > li.pn-page-ellipsis > span,
.pesquisas-nova .pn-paginacao > li.pn-page-disabled > span {
	border-color: transparent; background: transparent; color: #b0b4bc; cursor: default;
}
.pesquisas-nova .pn-paginacao-info { margin: 0; font-size: 13px; color: #6b7180; text-align: center; }