/* ============================================================
   Catálogo K&N por marca e modelo
   (/kn/... — servido pelo kn.php)

   A base é o css/koni-catalogo.css (a página tem as duas classes,
   .page-koni-cat e .page-kn-cat): mesma tabela, listas e botões.
   Aqui fica só o que é da K&N — o banner, as cores das categorias,
   a miniatura do produto na tabela e o aviso dos kits de admissão.
   Classes knf-*: o prefixo kn- já é do catálogo KONI.
   ============================================================ */

.page-kn-cat .hero-kn-cat {
	background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
		url('/fotos/kn/kn_filter_banner_6.webp') no-repeat center / cover;
}

/* categorias: vermelho K&N para o filtro de ar, o resto em tons neutros */
.page-kn-cat .knf-c-filtro_ar { background: #c8102e; color: #fff; }
.page-kn-cat .knf-c-filtro_habitaculo { background: #0b6e99; color: #fff; }
.page-kn-cat .knf-c-filtro_oleo { background: #333; color: #fff; }
.page-kn-cat .knf-c-admissao_ar { background: #ff7900; color: #000; }

/* produto na tabela: miniatura + selo + nome */
.page-kn-cat .knf-produto {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 220px;
}
.page-kn-cat .knf-mini {
	width: 56px;
	height: 56px;
	object-fit: contain;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
}
.page-kn-cat .knf-nome {
	display: block;
	font-size: .85rem;
	color: #555;
	margin-top: 3px;
}

/* bloco de uma motorização: a âncora fica abaixo do menu fixo */
.page-kn-cat .knf-bloco { scroll-margin-top: 90px; }
.page-kn-cat .knf-bloco:target {
	outline: 2px solid #c8102e;
	outline-offset: 6px;
	border-radius: 4px;
}
.page-kn-cat .knf-bloco h2 .kn-partilhar { padding: 0 4px; color: #555; vertical-align: middle; }

.page-kn-cat .knf-tuv-sim { color: #1e7e34; font-weight: 700; }
.page-kn-cat .knf-tuv-nao { color: #a94400; }

.page-kn-cat .knf-aviso {
	background: #fff4e5;
	border-left: 4px solid #ff7900;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: .92rem;
}

/* página da referência: PDFs e equivalências */
.page-kn-cat .knf-pdf {
	list-style: none;
	padding: 0;
	margin: 12px 0;
}
.page-kn-cat .knf-pdf li { margin-bottom: 4px; }
.page-kn-cat .knf-xref {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px 16px;
	font-size: .9rem;
}
.page-kn-cat .knf-xref li {
	border-bottom: 1px dashed #e3e3e3;
	padding: 3px 0;
}
.page-kn-cat .kn-ref-foto img {
	max-width: 100%;
	height: auto;
	background: #fff;
}

@media (max-width: 576px) {
	.page-kn-cat .knf-produto { min-width: 180px; }
	.page-kn-cat .knf-mini { width: 44px; height: 44px; }
}