/**
 * Estilos da página de categoria: breadcrumb, cabeçalho, barra de
 * ordenação e paginação.
 */

/* Breadcrumb (mesmo estilo usado na página de produto) */
.afiliado-breadcrumb {
	/* Mesmo padrão de espaçamento (8px) usado entre título e
	   subtítulo em qualquer página do site (Home, Categorias, Oferta
	   do Dia) — aqui entre o breadcrumb e o H1 da categoria. */
	margin-bottom: 8px;
}

.afiliado-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	/* "Cor do texto do corpo (parágrafos)" — vale pras 3 partes do
	   breadcrumb ("Início", a categoria e o título atual da página),
	   já que nenhuma delas é um título de página de verdade (esses
	   usam "Cor dos títulos", Aparência > Tema Afiliado > Global). */
	color: var(--wp--preset--color--body-text);
}

.afiliado-breadcrumb__item:not(:last-child)::after {
	content: '/';
	margin-left: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--border);
}

.afiliado-breadcrumb__item a {
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.afiliado-breadcrumb__item a:hover {
	text-decoration: underline;
}

.afiliado-breadcrumb__item--current {
	color: var(--wp--preset--color--body-text);
}

/* Cabeçalho de categoria */
.afiliado-category-header {
	margin-bottom: var(--wp--preset--spacing--6);
}

.afiliado-category-header__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: var(--wp--preset--spacing--2) 0 0 0;
	color: var(--wp--preset--color--secondary);
}

.afiliado-category-header__description {
	color: var(--wp--preset--color--text-muted);
	/* O WordPress posiciona automaticamente os blocos de nível
	   superior (H1, este parágrafo) com largura própria (até 1200px,
	   adaptando pra telas menores) + margin automático, centralizando
	   esse bloco dentro do container da página — é assim que o H1 já
	   fica corretamente alinhado. Um max-width menor aqui (ex.: 65ch)
	   competiria com esse comportamento nativo e faria todo o
	   parágrafo encolher e se recentralizar sozinho dentro do
	   container maior — daí o "desalinhado"/"no centro" (bug real
	   visto em uso, corrigido usando max-width: none aqui, e
	   limitando a largura do texto por dentro, no span abaixo, sem
	   mexer no posicionamento deste elemento). "min(1200px, 100%)"
	   replica o mesmo comportamento adaptável do H1 nativo — testado
	   e confirmado em telas menores (768px), sem causar rolagem
	   horizontal indevida. */
	max-width: none;
	width: min(1200px, 100%);
	/* Padrão oficial do site para o espaço entre um título de página
	   e o texto descritivo logo abaixo dele — 8px, testado ao vivo e
	   aprovado (era 16px antes, mas ficava com respiro grande demais
	   entre um título e o subtítulo que o complementa diretamente).
	   Reutilizar esse mesmo valor em qualquer página nova que tenha
	   título + descrição, para manter consistência em todo o site. */
	margin-top: 8px;
	/* 24px — mesmo espaço real medido entre o subtítulo e o conteúdo
	   seguinte (grade de produtos/categorias) na Home, para manter
	   consistência entre todas as páginas com título + subtítulo. */
	margin-bottom: var(--wp--preset--spacing--6);
}

.afiliado-category-header__description-text {
	/* Quem realmente limita a largura visual do texto (legibilidade:
	   faixa de 50–75 caracteres por linha, 65ch é o ponto "ideal"
	   mais citado, ~Bringhurst) — "ch" se adapta automaticamente ao
	   tamanho real da fonte, ao contrário de um valor fixo em
	   pixels. Fica num elemento à parte (não no .description acima)
	   porque aquele precisa ficar em "width: 1200px" sem max-width
	   nenhum para o posicionamento funcionar (ver comentário acima).
	   Sem margin nenhum aqui — o objetivo é só limitar a largura,
	   não centralizar de novo. */
	display: block;
	max-width: 65ch;
}

.afiliado-category-header__count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* Barra de ordenação */
.afiliado-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) 0;
	margin-bottom: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

/* Mobile: tenta manter "X resultados" e "Ordenar por: [seleção]"
   na mesma linha (cabe em telas a partir de ~360px) — em telas mais
   estreitas (ex.: 320px, ainda comuns), quebra automaticamente pra
   2 linhas em vez de cortar o texto ou espremer o select. flex-wrap
   deixa o navegador decidir sozinho, testado nos dois casos. */
@media (max-width: 767px) {
	.afiliado-toolbar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.afiliado-toolbar__sort {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
	}

	.afiliado-toolbar__sort label {
		white-space: nowrap;
	}

	.afiliado-toolbar__sort select {
		width: auto;
		min-height: 44px;
	}
}

.afiliado-toolbar__count {
	/* "Cor do texto do corpo (parágrafos)", Aparência > Tema
	   Afiliado > Global. */
	color: var(--wp--preset--color--body-text);
	/* Sem isso, o "align-items: stretch" do .afiliado-toolbar
	   (herdado por padrão) esticava a altura deste <span> pra bater
	   com a do "Ordenar por:" ao lado, mas sem centralizar o texto
	   dentro desse espaço esticado — ficava visualmente desalinhado
	   verticalmente (bug real visto em uso, corrigido aqui). */
	display: flex;
	align-items: center;
}

.afiliado-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	/* Cobre o <label> "Ordenar por:", que não tem cor própria. */
	color: var(--wp--preset--color--body-text);
}

.afiliado-toolbar__sort select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--afiliado-card-border-radius, 10px);
	padding: 6px 30px 6px 10px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body-text);
	/* "Cor de fundo do site (background)", Aparência > Tema
	   Afiliado > Global — antes usava o branco/cinza padrão do
	   navegador, sem conexão com nenhuma configuração do painel. */
	background-color: var(--wp--preset--color--background);
	/* Seta customizada (substitui a seta nativa do navegador, que
	   fica colada demais na borda direita sem respeitar o padding —
	   bug real visto em uso, corrigido aqui). Mesmo espaço (10px) dos
	   dois lados do texto, pra ficar visualmente simétrico. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}

/* Largura fixa só em telas de tablet/desktop pra cima — no celular
   (regra acima, max-width: 767px) o select continua ocupando 100%
   da largura, sem essa regra sobrescrever aquele comportamento
   (mais fácil de tocar, mantido como já era antes). 155px é
   calculado pra caber a maior opção do dropdown ("Mais recentes")
   com folga, sem cortar o texto nem sobrar espaço vazio demais. */
@media (min-width: 768px) {
	.afiliado-toolbar__sort select {
		width: 155px;
	}
}

/* Paginação */
.afiliado-pagination {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--8);
	flex-wrap: wrap;
}

.afiliado-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 767px) {
	.afiliado-pagination .page-numbers {
		min-width: 44px;
		height: 44px;
	}
}

.afiliado-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background, #fff);
	border-color: var(--wp--preset--color--primary);
}

.afiliado-pagination .page-numbers:hover:not(.current) {
	border-color: var(--wp--preset--color--primary);
}