/* =============================================================
   PCC - Filtro de Categorias (chips) - design "Categorias - Final"
   Direcao 5: disco pastel + realce tonal azul. Sem sombra.
   Tokens do design system escopados em .pcc-catfilter.
   ============================================================= */

.pcc-catfilter {
	--pcc-accent: #00AAFF;
	--pcc-accent-hover: #0095e0;
	--pcc-accent-press: #0081c4;
	--pcc-on-accent: #ffffff;
	--pcc-heading: #222222;
	--pcc-text: #333333;
	--pcc-text-muted: #6b7280;
	--pcc-text-faint: #9aa1ab;
	--pcc-border-hairline: #f0f0f0;
	--pcc-border-field: #e2e5ea;
	--pcc-surface: #ffffff;
	--pcc-surface-soft: #fafbfc;
	--pcc-link-hover: #DCBDF7;
	--pcc-sale: #ef4444;
	--pcc-radius-button: 8px;
	--pcc-radius-field: 3px;
	--pcc-radius-pill: 999px;
	--pcc-focus-ring: 0 0 0 3px rgba(0, 170, 255, 0.25);

	font-family: inherit;
	color: var(--pcc-text);
	margin: 0 0 8px;
	line-height: 1.4;
}

.pcc-catfilter *,
.pcc-catfilter *::before,
.pcc-catfilter *::after {
	box-sizing: border-box;
}

.pcc-catfilter svg.pcc-cf-lucide {
	width: 18px;
	height: 18px;
	display: block;
	flex: none;
}

/* ---------- Toolbar: Filtrar + ordenacao ---------- */
.pcc-cf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--pcc-border-hairline);
	margin-bottom: 24px;
}

.pcc-cf-filtrar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--pcc-heading);
	background: var(--pcc-surface);
	border: 1px solid var(--pcc-border-field);
	border-radius: var(--pcc-radius-button);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pcc-cf-filtrar:hover {
	border-color: var(--pcc-accent);
	color: var(--pcc-accent);
}

.pcc-cf-filtrar:focus-visible {
	outline: none;
	box-shadow: var(--pcc-focus-ring);
}

.pcc-cf-filtrar svg.pcc-cf-lucide {
	width: 16px;
	height: 16px;
}

.pcc-cf-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--pcc-radius-pill);
	background: var(--pcc-accent);
	color: var(--pcc-on-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* [hidden] precisa vencer o display:inline-flex acima. */
.pcc-cf-badge[hidden] {
	display: none;
}

/* Ordenacao nativa do WooCommerce, realocada para a toolbar via JS. */
.pcc-cf-sort-slot {
	display: inline-flex;
	align-items: center;
}

.pcc-cf-sort-slot .woocommerce-ordering {
	margin: 0;
}

.pcc-cf-sort-slot .orderby {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--pcc-text);
	background-color: var(--pcc-surface);
	border: 1px solid var(--pcc-border-field);
	border-radius: var(--pcc-radius-field);
	padding: 10px 38px 10px 14px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.pcc-cf-sort-slot .orderby:focus-visible {
	outline: none;
	border-color: var(--pcc-accent);
	box-shadow: var(--pcc-focus-ring);
}

/* Esconde o icone de ordenacao extra do Blocksy dentro da slot. */
.pcc-cf-sort-slot .ct-sort-icon {
	display: none;
}

/* ---------- Rodape (resumo + limpar) ---------- */
.pcc-cf-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 26px;
}

.pcc-cf-clear {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--pcc-text-faint);
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 2px;
	transition: color 0.2s ease;
	visibility: hidden;
}

.pcc-cf-clear.is-shown {
	visibility: visible;
}

.pcc-cf-clear:hover {
	color: var(--pcc-sale);
}

.pcc-cf-clear svg.pcc-cf-lucide {
	width: 14px;
	height: 14px;
}

/* ---------- Linhas e divisor ---------- */
.pcc-cf-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pcc-cf-divider {
	height: 1px;
	background: var(--pcc-border-hairline);
	margin: 24px 0;
}

/* ---------- O CHIP (tema: disco pastel) ---------- */
.pcc-cf-chip {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 6px 16px 6px 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--pcc-text);
	background: var(--pcc-surface-soft);
	border: 1px solid transparent;
	border-radius: var(--pcc-radius-pill);
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pcc-cf-chip:hover {
	background: #eef1f4;
	color: var(--pcc-text);
}

.pcc-cf-chip.is-active {
	background: #e6f6ff; /* fallback */
	background: color-mix(in srgb, var(--pcc-accent) 12%, white);
	color: var(--pcc-accent-press);
	font-weight: 500;
}

.pcc-cf-chip:focus-visible {
	outline: none;
	box-shadow: var(--pcc-focus-ring);
}

.pcc-cf-swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(34, 34, 34, 0.55);
	transition: box-shadow 0.2s ease;
}

.pcc-cf-swatch svg.pcc-cf-lucide {
	width: 18px;
	height: 18px;
}

.pcc-cf-chip.is-active .pcc-cf-swatch {
	box-shadow: 0 0 0 2px #80d4ff; /* fallback */
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcc-accent) 55%, white);
}

.pcc-cf-count {
	color: var(--pcc-text-faint);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.pcc-cf-chip.is-active .pcc-cf-count {
	color: var(--pcc-accent);
	opacity: 0.85;
}

/* ---------- Chips de tipo de produto (pilula plana, icone azul) ---------- */
.pcc-cf-types .pcc-cf-chip {
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 500;
	gap: 9px;
}

.pcc-cf-types .pcc-cf-chip-ico {
	color: var(--pcc-accent);
	display: inline-flex;
	transition: color 0.2s ease;
}

.pcc-cf-types .pcc-cf-chip.is-active .pcc-cf-chip-ico {
	color: var(--pcc-accent-press);
}

/* ---------- Resumo (dentro do rodape) ---------- */
.pcc-cf-summary {
	margin: 0;
	font-size: 14px;
	color: var(--pcc-text-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 20px;
}

.pcc-cf-summary:empty {
	min-height: 0;
}

.pcc-cf-summary strong {
	color: var(--pcc-heading);
	font-weight: 700;
}

.pcc-cf-summary svg.pcc-cf-lucide {
	width: 16px;
	height: 16px;
	color: var(--pcc-accent);
}

/* ---------- Estado de carregamento (AJAX) ---------- */
.ct-products-container.pcc-cf-loading {
	position: relative;
	min-height: 180px;
}

.ct-products-container.pcc-cf-loading > ul.products,
.ct-products-container.pcc-cf-loading > .ct-pagination {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ct-products-container.pcc-cf-loading::after {
	content: "";
	position: absolute;
	top: 70px;
	left: 50%;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border-radius: 50%;
	border: 3px solid var(--pcc-border-field, #e2e5ea);
	border-top-color: #00AAFF;
	animation: pcc-cf-spin 0.6s linear infinite;
}

@keyframes pcc-cf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Esconde o filtro nativo do Blocksy na loja ----------
   Os chips substituem o filtro de categorias; a ordenacao vive na barra dos chips
   (desktop) e no rodape, ao lado do resumo (mobile). O atalho de filtros da barra
   inferior do Blocksy nao e mais usado; o painel nativo #woo-filters-panel fica
   sempre oculto. */
body.pcc-cf-active .ct-toggle-filter-panel,
body.pcc-cf-active #woo-filters-panel {
	display: none !important;
}

/* ---------- Recolher/expandir (mobile) ---------- */
.pcc-catfilter.is-collapsed .pcc-cf-region {
	display: none;
}

/* ---------- Variante home (shortcode [pcc_categorias]) ---------- */
.pcc-catfilter--home {
	margin: 0;
}

.pcc-catfilter--home .pcc-cf-region {
	display: block; /* sem toolbar/colapso fora da loja */
}

.pcc-cf-home-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--pcc-heading);
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
	.pcc-cf-toolbar {
		padding-bottom: 16px;
		margin-bottom: 18px;
	}

	.pcc-cf-filtrar {
		flex: 1 1 auto;
		justify-content: center;
	}

	.pcc-cf-sort-slot,
	.pcc-cf-sort-slot .woocommerce-ordering,
	.pcc-cf-sort-slot .orderby {
		flex: 1 1 auto;
		width: 100%;
	}

	.pcc-cf-divider {
		margin: 18px 0;
	}

	.pcc-cf-summary {
		margin-top: 20px;
	}
}

@media (max-width: 600px) {
	.pcc-cf-row {
		gap: 10px;
	}

	.pcc-cf-types .pcc-cf-chip {
		font-size: 14px;
		padding: 10px 15px;
	}
}

/* ---------- Mobile compacto: grid simetrico de 3 colunas (loja e home) ---------- */
/* 12 temas -> 4 linhas; 3 tipos -> 1 linha. Chips de largura igual (simetria),
   conteudo centralizado e mais compacto (menos espaco horizontal/vertical). */
@media (max-width: 600px) {
	.pcc-catfilter .pcc-cf-row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.pcc-catfilter .pcc-cf-chip {
		width: 100%;
		justify-content: center;
		gap: 7px;
		padding: 6px 8px;
		font-size: 12.5px;
		font-weight: 500;
		line-height: 1.15;
		min-width: 0;
	}

	.pcc-catfilter .pcc-cf-chip-label {
		min-width: 0;
		overflow-wrap: anywhere; /* quebra rotulos longos (ex.: "Pintura com Cristais") */
	}

	.pcc-catfilter .pcc-cf-swatch {
		width: 26px;
		height: 26px;
	}

	.pcc-catfilter .pcc-cf-swatch svg.pcc-cf-lucide {
		width: 14px;
		height: 14px;
	}

	.pcc-catfilter .pcc-cf-types .pcc-cf-chip {
		font-size: 12.5px;
	}

	.pcc-catfilter .pcc-cf-types .pcc-cf-chip-ico svg.pcc-cf-lucide {
		width: 15px;
		height: 15px;
	}

	/* contador (so admin) escondido no mobile para manter o grid limpo */
	.pcc-catfilter .pcc-cf-count {
		display: none;
	}

	.pcc-catfilter .pcc-cf-divider {
		margin: 12px 0;
	}

	.pcc-cf-home-title {
		margin-bottom: 12px;
	}
}

/* =============================================================
   Mobile: chips sempre visiveis; ordenacao no rodape, ao lado do resumo.
   A barra propria (botao "Filtrar" + ordenacao) some; a ordenacao nativa do
   WooCommerce e movida via JS para o .pcc-cf-foot, ao lado de
   "Mostrando ... os produtos", em tamanho compacto. O painel nativo de filtros
   (#woo-filters-panel) fica oculto — ver regra no topo do arquivo.
   ============================================================= */
@media (max-width: 768px) {
	/* Sem barra propria: os chips ficam direto; a ordenacao vai para o rodape. */
	.pcc-catfilter .pcc-cf-toolbar {
		display: none;
	}

	/* Rodape: resumo + ordenacao (compacta) lado a lado; "Limpar" vai para a direita.
	   margin-top curto para encostar o resumo/ordenacao nos chips (economia vertical). */
	.pcc-catfilter .pcc-cf-foot {
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 12px;
		margin-top: 10px;
	}

	/* resumo com flex-basis 0: nao conta para a quebra de linha (assim a ordenacao
	   fica ao lado, nao embaixo) e encolhe preenchendo o espaco que sobra. */
	.pcc-catfilter .pcc-cf-summary {
		flex: 1 1 0;
		min-width: 0;
		margin-top: 0;
		font-size: 13px;
	}

	.pcc-catfilter .pcc-cf-foot .woocommerce-ordering {
		margin: 0;
		flex: 0 0 auto;
	}

	.pcc-catfilter .pcc-cf-foot .orderby {
		appearance: none;
		-webkit-appearance: none;
		font-family: inherit;
		font-size: 12px;
		max-width: 150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--pcc-text);
		background-color: var(--pcc-surface);
		border: 1px solid var(--pcc-border-field);
		border-radius: var(--pcc-radius-button);
		padding: 4px 26px 4px 10px;
		cursor: pointer;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
		background-repeat: no-repeat;
		background-position: right 9px center;
	}

	/* esconde o icone extra de ordenacao do Blocksy */
	.pcc-catfilter .pcc-cf-foot .ct-sort-icon {
		display: none;
	}

	/* "Limpar filtros": oculto sem selecao (sem ocupar espaco no flex);
	   em linha propria quando aparece. */
	.pcc-catfilter .pcc-cf-clear:not(.is-shown) {
		display: none;
	}

	.pcc-catfilter .pcc-cf-clear.is-shown {
		flex: 0 0 100%;
		margin-left: 0;
	}
}