/* ============================================================
   Catálogo de tapetes Frogum por marca e modelo
   (/tapetes/... — servido pelo tapetes.php)

   Os cartões de produto usam Bootstrap puro (.card, .badge,
   .btn-success), tal como o simulador em JS da página
   tapetes-de-borracha-para-carros.html — por isso aqui só
   entram o hero, as listas de marcas e modelos e a nota final.

   Ficheiro próprio, e não o custom.css, pela mesma razão do
   escovas-catalogo.css: o site serve CSS com cache longa e um
   ficheiro novo garante que toda a gente recebe estas regras.
   ============================================================ */

/* --- hero --- */
.page-tapetes-cat .hero-tapetes {
	background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%);
	color: #fff;
	padding: 46px 0;
	text-align: center;
}
.page-tapetes-cat .hero-tapetes h1 {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 10px;
}
.page-tapetes-cat .hero-tapetes .lead {
	max-width: 820px;
	margin: 0 auto;
	color: #d8d8d8;
	font-size: 1rem;
}

.page-tapetes-cat h2 {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 34px 0 14px;
}
.page-tapetes-cat h2 small {
	font-weight: 600;
	color: #888;
	font-size: .85rem;
}

/* --- listas de marcas e modelos --- */
.page-tapetes-cat .tap-marcas,
.page-tapetes-cat .tap-modelos,
.tap-marcas-atalho ul {
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 8px;
}
.page-tapetes-cat .tap-marcas a,
.page-tapetes-cat .tap-modelos a,
.tap-marcas-atalho a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	padding: 10px 12px;
	font-weight: 700;
	font-size: .92rem;
	color: #1a1a1a;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.page-tapetes-cat .tap-marcas a:hover,
.page-tapetes-cat .tap-modelos a:hover,
.tap-marcas-atalho a:hover {
	border-color: var(--primary-color);
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.page-tapetes-cat .tap-marcas a small {
	font-weight: 600;
	font-size: .78rem;
	color: #999;
}

/* O atalho na página comercial fica com a largura do conteúdo e o link final
   sem moldura, para não parecer mais um cartão da grelha. */
.tap-marcas-atalho {
	max-width: 980px;
	margin: 0 auto;
}
.tap-marcas-atalho p a {
	display: inline;
	border: 0;
	padding: 0;
	background: none;
	color: var(--primary-color);
}
.tap-marcas-atalho p a:hover {
	box-shadow: none;
	text-decoration: underline;
}

/* --- nota final --- */
.page-tapetes-cat .tap-nota {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-left: 4px solid var(--primary-color);
	border-radius: 10px;
	padding: 20px 22px;
}
.page-tapetes-cat .tap-nota p {
	margin-bottom: 14px;
}

@media (max-width: 575.98px) {
	.page-tapetes-cat .hero-tapetes { padding: 34px 0; }
	.page-tapetes-cat .hero-tapetes h1 { font-size: 1.5rem; }
	.page-tapetes-cat .tap-marcas,
	.page-tapetes-cat .tap-modelos,
	.tap-marcas-atalho ul { grid-template-columns: 1fr 1fr; }
}