/* =============================================================================
   BASE DA IDENTIDADE — BR TRANSMISSÕES
   Carregado DEPOIS de todos os outros CSS, de propósito: assim ele corrige a
   cor e a tipografia do tema inteiro sem precisar mexer em cada arquivo de
   seção, e sem brigar por especificidade.

   O que ele faz:
   1. troca a paleta inteira pela da LOGO (o site usava #FF2D16, um laranja-neon
      que não existe na marca; o vermelho da logo é #CB2228);
   2. troca a fonte pela família IBM Plex, com os códigos de peça em mono;
   3. acerta botões, foco de teclado e títulos.

   Regra que guia tudo: o vermelho é AÇÃO. Botão, item ativo, destaque de
   seção. Fora isso, grafite e neutro. Quando tudo é vermelho, nada é.
   ============================================================================= */

:root {
	/* --- as cores vindas da logo --------------------------------------- */
	--brt-grafite:        #272425;   /* o preto da logo */
	--brt-grafite-claro:  #3A3638;
	--brt-vermelho:       #CB2228;   /* o vermelho da logo */
	--brt-vermelho-fundo: #A3171C;   /* o mesmo, pressionado */
	--brt-papel:          #FFFFFF;   /* card */
	--brt-fundo:          #F1F1EF;   /* fundo de seção, cinza quente */
	--brt-borda:          #E3E1DD;

	/* --- cores que informam, não decoram -------------------------------- */
	--brt-pronto:         #158235;   /* pronta entrega (verde que já está na logo) */
	--brt-consulta:       #9A6300;   /* sob consulta / última unidade */

	/* --- texto ----------------------------------------------------------- */
	--brt-texto:          #272425;
	--brt-texto-fraco:    #65615E;

	/* --- tipografia ------------------------------------------------------ */
	--brt-fonte-titulo:   'IBM Plex Sans Condensed', 'IBM Plex Sans', Arial, sans-serif;
	--brt-fonte-texto:    'IBM Plex Sans', Arial, sans-serif;
	--brt-fonte-codigo:   'IBM Plex Mono', ui-monospace, monospace;

	/* --- REMAPEAMENTO: os nomes antigos do tema apontam para a paleta nova.
	       É isto que faz o site inteiro mudar de cor de uma vez. ---------- */
	--color-details-primary:   var(--brt-vermelho);
	--color-details-secondary: var(--brt-grafite);
	--color-details-green:     var(--brt-pronto);
	--color-font:              var(--brt-texto-fraco);
	--color-font-black:        var(--brt-grafite);
	--bg-color-black:          var(--brt-grafite);
	--bg-color-gray:           var(--brt-fundo);
	--bg-color-gray02:         var(--brt-borda);
	--font-family-01:          var(--brt-fonte-texto);
}

/* ---------------------------------------------------------------- texto --- */
body {
	font-family: var(--brt-fonte-texto);
	font-size: 17px;
	line-height: 1.55;
	letter-spacing: 0;          /* o tema espaçava 0.05em tudo, o que cansa a leitura */
	color: var(--brt-texto);
	background: var(--brt-fundo);
}

p { max-width: 68ch; }          /* linha longa demais é o que faz texto parecer bloco */

h1, h2, h3, h4, h5,
.at-titulo-01 h1, .at-titulo-01 h2, .at-titulo-01 h3 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--brt-grafite);
	text-wrap: balance;
}

/* O CÓDIGO DA PEÇA EM FONTE MONO.
   É o vocabulário desta casa: ninguém procura "filtro", procura "U341".
   Em mono ele lê como especificação técnica, e é a mesma fonte do sistema
   interno — site e app passam a falar igual. */
.brt-codigo,
.at-produto-codigo {
	font-family: var(--brt-fonte-codigo);
	font-weight: 500;
	font-size: 0.95em;
	letter-spacing: 0.01em;
	color: var(--brt-grafite);
}

/* --------------------------------------------------------------- botões --- */
.at-btn {
	font-family: var(--brt-fonte-texto);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	height: auto;
	padding: 14px 22px;
	border-radius: 2px;        /* peça usinada não tem canto redondo */
	text-transform: none;      /* caixa alta em botão é cacoete de template */
	letter-spacing: 0;
	align-items: center;
	transition: background-color .15s linear, color .15s linear;
}

.at-btn-01 {                   /* ação principal */
	background: var(--brt-vermelho);
	color: #fff;
}
.at-btn-01:hover,
.at-btn-01:focus-visible {
	background: var(--brt-vermelho-fundo);
	color: #fff;
	box-shadow: none;
}

.at-btn-02 {                   /* ação secundária */
	background: var(--brt-grafite);
	color: #fff;
}
.at-btn-02:hover,
.at-btn-02:focus-visible {
	background: var(--brt-grafite-claro);
	color: #fff;
	box-shadow: none;
}

/* ------------------------------------------------- barra de categorias ---
   Era uma faixa vermelha cheia, logo abaixo do menu: duas barras competindo
   e o vermelho gasto em navegação em vez de ação. Vira grafite; o vermelho
   fica só no item em que o mouse está. */
.at-header-main__categories {
	background: var(--brt-grafite);
	border-top: 1px solid rgba(255,255,255,.08);
}
.at-header-main__categories-list a {
	font-family: var(--brt-fonte-texto);
	font-weight: 500;
	letter-spacing: 0;
	color: rgba(255,255,255,.82);
	transition: color .15s linear;
}
.at-header-main__categories-list a:hover,
.at-header-main__categories-list a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--brt-vermelho);
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------- títulos ---
   A borda à esquerda do título é um bom sinal de seção — só estava grossa
   demais (10px) e larga demais. Fica fina e vermelha, o título em grafite. */
.at-titulo-01 {
	border-left-width: 4px;
	border-left-color: var(--brt-vermelho);
	padding: 4px 0 4px 20px;
	max-width: none;
}
.at-titulo-01 h1,
.at-titulo-01 h2,
.at-titulo-01 h3 {
	font-size: clamp(26px, 3.2vw, 36px);
	letter-spacing: -0.01em;
}

/* ----------------------------------------------------- selos de estoque ---
   Para usar nos cards de produto: a primeira pergunta de todo mecânico é
   "tem aí?". A cor responde antes do texto. */
.brt-selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--brt-fonte-texto);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 2px;
}
.brt-selo--pronto   { background: rgba(21,130,53,.12);  color: var(--brt-pronto); }
.brt-selo--consulta { background: rgba(154,99,0,.12);   color: var(--brt-consulta); }

/* --------------------------------------------------- foco de teclado ---
   Faltava no tema: quem navega por Tab não enxergava onde estava. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.at-btn:focus-visible {
	outline: 3px solid var(--brt-vermelho);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- cards ---- */
.card, .wq-box, .at-box {
	background: var(--brt-papel);
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
}

/* -------------------------------------------- quem pediu menos movimento - */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
   BUSCA DE PEÇA NO CABEÇALHO
   O mecânico chega sabendo o código. Antes ele tinha que caçar no menu.
   ============================================================================= */
.at-header-main__top .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.brt-busca {
	display: flex;
	align-items: stretch;
	flex: 1 1 420px;
	max-width: 560px;
	min-width: 0;
	margin: 8px 0;
}
.brt-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--brt-fonte-texto);
	font-size: 15px;
	padding: 11px 14px;
	border: 1px solid var(--brt-borda);
	border-right: 0;
	border-radius: 2px 0 0 2px;
	background: #fff;
	color: var(--brt-texto);
}
.brt-busca__campo::placeholder { color: #9A9693; }
.brt-busca__btn {
	font-family: var(--brt-fonte-texto);
	font-weight: 600;
	font-size: 15px;
	padding: 0 20px;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: var(--brt-grafite);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s linear;
}
.brt-busca__btn:hover { background: var(--brt-vermelho); }

/* rótulo que só o leitor de tela enxerga */
.brt-oculto {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   HERO DA HOME
   A foto é fundo; a chamada é texto. O grafite entra por cima da foto em
   gradiente, só do lado do texto, pra letra ficar legível sem apagar a peça.
   ============================================================================= */
.brt-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 440px;
	padding: 72px 0;
	background: var(--brt-grafite);
	overflow: hidden;
}
.brt-hero__foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}
/* o véu: forte à esquerda, transparente à direita */
.brt-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(39,36,37,.94) 0%,
		rgba(39,36,37,.86) 38%,
		rgba(39,36,37,.35) 72%,
		rgba(39,36,37,.15) 100%);
}
.brt-hero .container { position: relative; z-index: 2; }

.brt-hero__texto { max-width: 620px; }

.brt-hero__titulo {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 18px;
}
.brt-hero__apoio {
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255,255,255,.86);
	max-width: 52ch;
	margin: 0 0 28px;
}
.brt-hero__acoes {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
/* o WhatsApp é ação secundária aqui: borda, não bloco cheio, pra não brigar
   com o botão do catálogo */
.brt-btn-zap {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,.55);
}
.brt-btn-zap:hover,
.brt-btn-zap:focus-visible {
	background: #fff;
	color: var(--brt-grafite);
	border-color: #fff;
}

@media (max-width: 767px) {
	.brt-hero { min-height: 360px; padding: 48px 0; }
	.brt-hero__foto { background-position: center; }
	.brt-hero::after {
		background: linear-gradient(180deg,
			rgba(39,36,37,.82) 0%,
			rgba(39,36,37,.90) 60%,
			rgba(39,36,37,.95) 100%);
	}
	.brt-hero__apoio { font-size: 17px; }
	.brt-hero__acoes .at-btn { flex: 1 1 100%; justify-content: center; }
}

/* Hero sem foto: não pode parecer "faltando imagem". Hachura diagonal discreta
   em cima do grafite — lê como chapa de metal, não como espaço vazio. */
.brt-hero--sem-foto .brt-hero__foto {
	background-image:
		repeating-linear-gradient(135deg,
			rgba(255,255,255,.035) 0px,
			rgba(255,255,255,.035) 2px,
			transparent 2px,
			transparent 11px);
}
.brt-hero--sem-foto::after {
	background: linear-gradient(90deg,
		rgba(39,36,37,.86) 0%,
		rgba(39,36,37,.72) 55%,
		rgba(39,36,37,.60) 100%);
}

/* =============================================================================
   CARD DE PRODUTO
   O que o cliente procura, na ordem: a foto da peça, o código, e o jeito de
   falar com a loja. O card foi remontado nessa ordem.
   ============================================================================= */
.at-produtos-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--brt-papel);
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color .15s linear, box-shadow .15s linear;
}
.at-produtos-box:hover,
.at-produtos-box:focus-within {
	border-color: #CFCBC6;
	box-shadow: 0 10px 24px -18px rgba(39,36,37,.55);
}

/* A FOTO EM FUNDO NEUTRO, SEM CORTAR A PEÇA.
   Foto de peça quase sempre vem em fundo branco e em proporção variada.
   "contain" mostra a peça inteira; "cover" cortaria o dente da engrenagem,
   que é justo o que o mecânico quer ver. */
.at-produtos-box > figure {
	margin: 0;
	background: var(--brt-fundo);
	border-bottom: 1px solid var(--brt-borda);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}
.at-produtos-box > figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;   /* some o branco da foto contra o cinza do card */
}

.at-produto-conteudo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 18px;
	flex: 1 1 auto;
}
.at-produto-conteudo h2 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.18;
	letter-spacing: -0.005em;
	color: var(--brt-grafite);
	margin: 0;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;         /* nome longo não desalinha a fileira */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.at-produto-conteudo p { margin: 0; font-size: 15px; color: var(--brt-texto-fraco); }

/* a linha do código */
.brt-produto-codigo {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 2px;
}
.brt-produto-codigo__rotulo {
	font-size: 12px;
	color: var(--brt-texto-fraco);
}
.brt-produto-codigo .brt-codigo {
	font-size: 16px;
	color: var(--brt-grafite);
}

/* botões do card: o principal ocupa a linha, o WhatsApp fica ao lado */
.at-btns-box {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}
.at-btns-box .at-btn-01 { flex: 1 1 auto; justify-content: center; }
.at-btns-box .at-btn-02 { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

/* no fundo escuro (seção "Produtos em destaque") o card continua branco:
   é ele que faz a peça saltar */
.at-listagem-produtos-black .at-produtos-box { border-color: transparent; }

/* =============================================================================
   FAIXA "QUEM É ESPECIALISTA FAZ A DIFERENÇA"
   A textura laranja vinha de uma imagem escolhida no painel — era o pedaço mais
   berrante da home e não tinha nada a ver com a marca. Aqui ela é trocada por
   grafite com hachura. É o único lugar onde eu uso !important, porque a imagem
   entra por style inline no HTML e de fora não há como vencer sem isso.
   A foto da alavanca continua: é peça de verdade, e é o que dá o contexto.
   ============================================================================= */
.at-cta { padding: 90px 0 !important; }

.at-cta-item {
	background-image:
		repeating-linear-gradient(135deg,
			rgba(255,255,255,.04) 0px,
			rgba(255,255,255,.04) 2px,
			transparent 2px,
			transparent 12px) !important;
	background-color: var(--brt-grafite);
	background-size: auto !important;
	border-radius: 2px;
	border-left: 4px solid var(--brt-vermelho);   /* o vermelho entra como marca, não como fundo */
}

.at-cta-item h2 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: none;          /* caixa alta + espaçamento era o visual de template */
	margin-bottom: 14px;
}
.at-cta-item p {
	font-size: 19px;
	line-height: 1.5;
	letter-spacing: 0;
	color: rgba(255,255,255,.84);
	max-width: 46ch;
	margin-bottom: 24px;
}

/* =============================================================================
   FAIXA DE FRASE ("Líder no mercado de peças...")
   Mantém o grafite, mas a frase para de ser um bloco centralizado solto:
   ganha respiro e o botão deixa de disputar atenção com o título.
   ============================================================================= */
.at-cta-txt h2 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: none;
	text-wrap: balance;
}

/* =============================================================================
   BANNERS DE CATEGORIA (Overhauls / Jogo de Discos / Kit de Juntas)
   A arte destes três é imagem pronta, com a frase e o laranja antigo escritos
   DENTRO do arquivo — por isso eles ainda destoam. Aqui eu só dou moldura,
   respiro e reação ao mouse. Trocar o laranja exige arte nova (ver o recado
   no fim do arquivo).
   ============================================================================= */
.at-destaque { padding: 64px 0 56px; }

.at-destaque a {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: var(--brt-grafite);
	transition: transform .18s ease, box-shadow .18s ease;
}
.at-destaque a:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(39,36,37,.18);
}
.at-destaque figure img { object-fit: cover; }

/* =============================================================================
   AS TRÊS SEÇÕES DE PRODUTO FICAM IGUAIS

   O tema vinha com "Produtos em destaque!" num fundo preto e as outras duas
   ("Ofertas" e "Os produtos mais vendidos") num cinza claro. Três vitrines do
   mesmo tipo em duas cores diferentes é o que fazia a página parecer remendada.

   Decisão: as três no mesmo cinza claro. O escuro fica guardado para o topo da
   página e para o blog, que são seções de natureza diferente. O que diferencia
   uma vitrine da outra passa a ser o título e o filete vermelho — não a cor do
   fundo.
   ============================================================================= */
.at-listagem-produtos-01,
.at-listagem-produtos-01.at-black {
	background: var(--brt-fundo);
	padding-top: 72px;
	padding-bottom: 64px;
}

/* o tema pintava de branco tudo que estava dentro da seção preta; agora que o
   fundo é claro, o texto volta pro grafite, senão some */
.at-listagem-produtos-01.at-black .at-titulo-01 h2 { color: var(--brt-grafite); }
.at-listagem-produtos-01.at-black .at-btn-carousel {
	border-color: var(--brt-grafite);
	color: var(--brt-grafite);
}
.at-listagem-produtos-01.at-black .at-titulo-content .at-btn-01:hover {
	background-color: var(--brt-vermelho-fundo);
	color: #FFFFFF;
}
.at-listagem-produtos-01 .at-titulo-01,
.at-listagem-produtos-01.at-black .at-titulo-01 { border-left-color: var(--brt-vermelho); }

/* =============================================================================
   NEWSLETTER ("Acompanhe nossas promoções")
   Aqui estava o pedaço mais datado da página: duas caixas inclinadas (skew),
   uma moldura torta por trás e o título em caixa alta espremido numa coluna.
   Inclinação é efeito de template — não diz nada sobre peça de câmbio. Sai a
   inclinação, entra um painel reto em grafite com o filete vermelho da casa.
   O campo de e-mail vira um campo de verdade: fundo branco, borda, e foco
   visível pra quem navega no teclado.
   ============================================================================= */
.at-cta-form { margin: 80px 0 72px; }

.at-cta-form .at-titulo-01 { transform: none; }
.at-cta-form .at-titulo-01 h2 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--brt-grafite);
}

.at-form-wrapper { margin: 0; }
.at-form-wrapper::before { display: none; }   /* a moldura torta sai */

.at-cta-form form::after {
	transform: none;
	background-color: var(--brt-grafite);
	border-radius: 2px;
	border-left: 4px solid var(--brt-vermelho);
	box-shadow: none;
}
.at-form-wrapper form { padding: 40px 44px; }

.wq-input input,
.wq-input select {
	font-family: var(--brt-fonte-texto);
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: #FFFFFF;
	color: var(--brt-texto);
}
.wq-input input::placeholder { color: var(--brt-texto-fraco); }
.wq-input input:focus-visible,
.wq-input select:focus-visible {
	outline: 3px solid var(--brt-vermelho);
	outline-offset: 2px;
}

/* =============================================================================
   SOBRE A EMPRESA
   O título estava todo em vermelho, 30px, concorrendo com os botões. Vermelho
   é ação; título é título. Ele volta pro grafite e ganha o mesmo filete
   vermelho curto que marca as outras seções. A moldura deslocada da foto fica:
   é foto da loja de verdade, e o enquadramento funciona.
   ============================================================================= */
.at-sobre-empresa { padding: 88px 0 80px; }

.at-sobre-empresa .at-conteudo h2 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--brt-grafite);
	margin-bottom: 22px;
	padding-top: 18px;
	position: relative;
}
.at-sobre-empresa .at-conteudo h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 4px;
	background: var(--brt-vermelho);
}
.at-sobre-empresa .at-conteudo p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--brt-texto-fraco);
	max-width: 62ch;
}

/* =============================================================================
   BLOG
   Os títulos dos posts estavam em caixa alta 17px — nome de peça em caixa alta
   funciona, frase inteira não: vira bloco cinza que ninguém lê. Caixa normal,
   um ponto maior, e o card ganha borda pra se destacar do grafite do fundo.
   ============================================================================= */
.at-blog { padding: 80px 0 56px; }

.at-blog-box {
	border-radius: 2px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.at-blog-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.at-blog-box .at-conteudo h2 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--brt-grafite);
	margin-bottom: 16px;
}
.at-blog-box .at-conteudo { padding: 22px 22px 24px; }

/* =============================================================================
   RODAPÉ
   Estava branco, sem hierarquia: logo, cinco links em caixa alta e os contatos
   soltos, tudo com o mesmo peso. Agora cada coluna tem um rótulo, os links
   leem como links e o endereço/telefone ganham o destaque que merecem — é a
   informação que o mecânico procura no rodapé. A barra de copyright fecha em
   grafite, e o filete vermelho no topo amarra o rodapé ao resto do site.
   ============================================================================= */
.at-footer {
	background-color: var(--brt-papel);
	border-top: 3px solid var(--brt-vermelho);
	padding-top: 56px;
}

.brt-rodape__titulo {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brt-texto-fraco);
	margin-bottom: 20px;
}

.at-links-uteis li a {
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--brt-grafite);
}
.at-links-uteis li a:hover { color: var(--brt-vermelho); }

/* o rótulo do contato continua em caixa alta: aí é etiqueta, e etiqueta curta
   em caixa alta lê rápido. O que muda é o tamanho — ele parava de ser rótulo e
   competia com o número. */
.at-contato h3 {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--brt-texto-fraco);
	margin-bottom: 2px;
}
.at-contato p {
	font-size: 16px;
	line-height: 1.4;
	color: var(--brt-grafite);
}
.at-contato:hover p { color: var(--brt-vermelho); }
.at-contato { margin-bottom: 18px; }

.at-midias-sociais li a { border-radius: 2px; }

.copy {
	margin-top: 36px;
	padding: 22px 0;
	background-color: var(--brt-grafite);
}
.copy p {
	max-width: none;          /* o limite de 68ch do corpo deixava a linha fora do centro */
	font-size: 14px;
	color: rgba(255,255,255,.72);
	letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   AINDA PENDENTE, E DEPENDE DE ARTE NOVA (não dá pra resolver em CSS):
   os três banners de categoria e a foto do formulário têm texto e laranja
   escritos dentro da imagem. Enquanto não entrar arte nova, eles são o que
   ainda destoa da paleta.
   -------------------------------------------------------------------------- */

/* =============================================================================
   ÁREA DE TOQUE NO CELULAR
   Medido no site, na largura de um iPhone: os links do rodapé tinham 19px de
   altura e os do menu 39px. Dedo não acerta 19px — erra e abre o link de cima.
   A referência de acessibilidade é 44px. Ninguém vê diferença no desenho; quem
   usa no celular, no balcão, com a mão suja de graxa, vê.
   ============================================================================= */
.at-links-uteis li a {
	display: flex;
	align-items: center;
	min-height: 40px;
}
.at-links-uteis li { margin-bottom: 2px; }

.at-contato { align-items: center; min-height: 44px; }

@media screen and (max-width: 999px) {
	.navbar-nav .nav-link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* =============================================================================
   O "CORTE SECO" DO MENU AO ROLAR A PÁGINA

   O que acontecia: ao passar de 175px de rolagem, o JS punha a classe
   .header_fixo no cabeçalho. Essa classe fazia TRÊS coisas de uma vez:
     1. tirava o cabeçalho do fluxo (position: fixed) — nesse instante a página
        inteira subia a altura dele e voltava, que é o pulo que se vê no vídeo;
     2. sumia com a faixa de cima (busca e telefones) com display:none, que não
        tem como animar: ou está, ou não está;
     3. rodava de novo a animação "fromTop", escorregando o cabeçalho do topo.
   As três juntas, a cada vez que se cruza a marca dos 175px.

   O que fazemos agora: o cabeçalho usa position: sticky. Ele NUNCA sai do
   fluxo, então não existe pulo nenhum — ele só gruda no topo. E a faixa de
   cima deixa de sumir de uma vez: ela ENCOLHE, com transição. O mesmo para os
   ícones da barra de categorias. O JS continua igual, sem precisar mexer.
   ============================================================================= */
.at-header-main {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--brt-papel);
	transition: box-shadow .25s ease;
}

.header_fixo {
	position: sticky !important;   /* vence o position:fixed do tema */
	animation: none !important;    /* e a animação que reescorregava a cada vez */
	box-shadow: 0 6px 18px rgba(39,36,37,.14);
}

/* o tema empurrava a seção seguinte 238px pra baixo pra compensar o cabeçalho
   fora do fluxo. Com sticky ele continua no fluxo, então esse empurrão vira
   justamente o salto que a gente está tirando. */
.header_fixo + section { margin-top: 0 !important; }

/* a faixa de cima encolhe em vez de sumir */
.at-header-main__top {
	overflow: hidden;
	max-height: 140px;
	transition: max-height .28s ease, opacity .22s ease, padding .28s ease;
}

/* A BUSCA DE PEÇA NÃO SOME MAIS AO ROLAR.
   Na primeira versão a faixa de cima inteira encolhia quando o cabeçalho
   grudava no topo — e junto com ela ia embora a busca por código. Quem está
   procurando uma peça tinha que voltar lá em cima pra poder buscar de novo.
   Busca é ferramenta, não enfeite: ela fica.
   O que sai no lugar é o bloco de telefones, que é informação de contato e já
   está no rodapé, no balãozinho verde e no próprio resultado da busca. */
.at-header-main__btns {
	overflow: hidden;
	max-height: 90px;
	transition: max-height .28s ease, opacity .22s ease;
}

@media screen and (min-width: 769px) {
	.header_fixo .at-header-main__top {
		display: block;
		max-height: 140px;
		opacity: 1;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.header_fixo .at-header-main__btns {
		max-height: 0;
		opacity: 0;
	}
	/* sem os telefones do lado, a busca aproveita a largura que sobrou */
	.header_fixo .brt-busca {
		max-width: 680px;
		margin: 4px 0;
	}
	.header_fixo .brt-busca__campo {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.header_fixo .brt-busca__btn { padding: 0 16px; }
}

/* NO CELULAR A BUSCA SIMPLESMENTE NÃO EXISTIA.
   O tema escondia a faixa de cima inteira abaixo de 768px (`display:none`),
   e como a busca mora nessa faixa, quem abria o site no celular não tinha
   como procurar peça por código — e celular é onde o mecânico abre o site.
   Aqui a faixa volta, só com a busca: os dois telefones não cabem nessa
   largura e já estão no balãozinho e no rodapé. */
@media screen and (max-width: 768px) {
	.at-header-main__top {
		display: block;
		padding: 8px 0;
	}
	.at-header-main__btns { display: none; }

	.at-header-main__top .container { gap: 0; }

	.brt-busca {
		flex: 1 1 100%;
		max-width: none;
		margin: 0;
	}
	.brt-busca__campo { font-size: 16px; }   /* 16px evita o zoom automático do iPhone ao tocar no campo */
	.brt-busca__btn { padding: 0 16px; }
}

/* o aperto da linha do logo também passa a ser gradual */
.header-nav { transition: padding .28s ease; }

/* e os ícones das categorias encolhem junto, em vez de piscar */
.at-header-main__categories-list li a img {
	max-height: 34px;
	transition: max-height .28s ease, opacity .22s ease, margin .28s ease;
}
.header_fixo .at-header-main__categories-list li a img {
	display: block;
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
}

@media screen and (max-width: 576px) {
	.at-header-main_menu { transition: top .28s ease; }
}

/* quem pediu "menos animação" no sistema operacional não leva transição
   nenhuma — é o jeito certo de fazer isso */
@media (prefers-reduced-motion: reduce) {
	.at-header-main,
	.at-header-main__top,
	.header-nav,
	.at-header-main__categories-list li a img,
	.at-header-main_menu { transition: none !important; }
}

/* quando o cabeçalho fixo divide a tela com a barra do WordPress (só quem está
   logado vê isso), ele precisa começar abaixo dela, senão fica por baixo */
body.admin-bar .at-header-main { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .at-header-main { top: 46px; }
}

/* =============================================================================
   FAIXA DE TÍTULO DAS PÁGINAS INTERNAS SEM FOTO
   Sem imagem cadastrada, a faixa ficava num cinza de lugar nenhum. Agora ela
   usa o mesmo grafite com hachura do topo da home — a página de categoria
   passa a parecer do mesmo site.
   ============================================================================= */
.wq-banner-all-pages--sem-foto {
	background-color: var(--brt-grafite);
	background-image:
		repeating-linear-gradient(135deg,
			rgba(255,255,255,.04) 0px,
			rgba(255,255,255,.04) 2px,
			transparent 2px,
			transparent 12px);
}
.wq-banner-all-pages .breadcrumb h1 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #FFFFFF;
}

/* =============================================================================
   BOTÃO DE WHATSAPP DOS PRODUTOS
   Ele continua grafite, como ação secundária — três cores por card (vermelho,
   verde e grafite) deixava a peça competindo com os botões. O verde aparece no
   passar do mouse e no foco do teclado: é a hora em que dizer "isto abre o
   WhatsApp" serve pra alguma coisa.
   ============================================================================= */
.at-btn-02.brt-zap-produto {
	transition: background-color .18s ease;
}
.at-btn-02.brt-zap-produto:hover,
.at-btn-02.brt-zap-produto:focus-visible {
	background: #1DA851;        /* verde do WhatsApp, escurecido o bastante pro ícone branco ler em cima */
	color: #FFFFFF;
}

/* =============================================================================
   ATALHOS DE SUBCATEGORIA (páginas de categoria de produto)
   Linha de atalhos pra refinar a busca, com a quantidade de peças de cada tipo
   — o número ajuda o cliente a decidir onde clicar antes de clicar.
   ============================================================================= */
.brt-subcategorias { margin-bottom: 36px; }

.brt-subcategorias__titulo {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brt-texto-fraco);
	margin-bottom: 14px;
}

.brt-subcategorias__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.brt-subcategorias__lista a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
	background: var(--brt-papel);
	color: var(--brt-grafite);
	font-size: 16px;
	line-height: 1.2;
	transition: border-color .18s ease, color .18s ease;
}
.brt-subcategorias__lista a:hover,
.brt-subcategorias__lista a:focus-visible {
	border-color: var(--brt-vermelho);
	color: var(--brt-vermelho);
}

.brt-subcategorias__qtd {
	font-family: var(--brt-fonte-codigo);
	font-size: 13px;
	color: var(--brt-texto-fraco);
	background: var(--brt-fundo);
	border-radius: 2px;
	padding: 2px 7px;
	font-variant-numeric: tabular-nums;
}

/* aviso de lista vazia — categoria sem peça cadastrada */
.brt-vazio {
	font-size: 17px;
	line-height: 1.55;
	color: var(--brt-texto-fraco);
	max-width: 56ch;
	margin-bottom: 18px;
}

/* =============================================================================
   PÁGINA 404
   Quem cai aqui queria uma peça. A página devolve os três caminhos: busca por
   código, catálogo e WhatsApp.
   ============================================================================= */
.brt-404 { padding: 72px 0 80px; }

.brt-404__texto {
	font-size: 17px;
	line-height: 1.6;
	color: var(--brt-texto-fraco);
	max-width: 60ch;
	margin: 18px 0 28px;
}

.brt-404__busca { max-width: 520px; margin-bottom: 28px; }

.brt-404__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* =============================================================================
   LISTA DE CATEGORIAS NA LATERAL (páginas de produto)
   Era uma lista de links de 22px de altura, colados. No celular o dedo erra e
   abre a categoria de cima. Cada um ganha altura de toque e uma linha divisória
   discreta, que é o que faz a lista ler como lista.
   ============================================================================= */
.wq-sidebar .at-aside__box ul { list-style: none; margin: 0; padding: 0; }

.wq-sidebar .cat-item a {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 4px 0;
	font-size: 16px;
	line-height: 1.3;
	color: var(--brt-grafite);
	border-bottom: 1px solid var(--brt-borda);
	transition: color .18s ease;
}
.wq-sidebar .cat-item:last-child a { border-bottom: none; }
.wq-sidebar .cat-item a:hover,
.wq-sidebar .cat-item a:focus-visible { color: var(--brt-vermelho); }

.wq-sidebar .at-title__box02 {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brt-texto-fraco);
	margin-bottom: 10px;
}

/* NO CELULAR A BUSCA TAMBÉM FICA AO ROLAR.
   O tema sumia com a faixa de cima inteira junto com a classe .header_fixo —
   e no celular isso levava a busca junto. Aqui ela fica. Pra caber sem comer
   um terço da tela, quem recolhe é a barra de categorias: categoria é atalho
   (e está logo ali, rolando pra cima), busca é ferramenta. */
@media screen and (max-width: 768px) {
	.header_fixo .at-header-main__top {
		display: block;
		max-height: 140px;
		opacity: 1;
		padding: 6px 0;
	}

	.at-header-main__categories {
		overflow: hidden;
		max-height: 220px;
		transition: max-height .28s ease, opacity .22s ease;
	}
	.header_fixo .at-header-main__categories {
		max-height: 0;
		opacity: 0;
	}
}

/* =============================================================================
   O PEDIDO (carrinho)

   Desenho pensado pro balcão: o botão fica fixo no canto, acima do balãozinho
   verde, e some do caminho quando o pedido está vazio (vira só contorno). O
   painel abre do lado, não cobre a tela inteira — o cliente continua vendo o
   catálogo enquanto confere o que já juntou.
   ============================================================================= */

/* --- o botão "Adicionar" dos cards ------------------------------------- */
.brt-add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
}
.brt-add__mais {
	font-family: var(--brt-fonte-mono, var(--brt-fonte-codigo));
	font-size: 17px;
	line-height: 1;
	font-weight: 600;
}
.brt-add--feito {
	background: var(--brt-pronto) !important;   /* verde de confirmado, por 1,6s */
	color: #FFFFFF !important;
}

/* "Ver detalhes" deixou de ser o botão principal: agora é contorno. Quem chega
   num card quer somar a peça ao pedido; conferir a aplicação é o segundo passo. */
.brt-btn-contorno {
	background: transparent;
	color: var(--brt-grafite);
	border: 1px solid var(--brt-borda);
}
.brt-btn-contorno:hover,
.brt-btn-contorno:focus-visible {
	background: var(--brt-grafite);
	border-color: var(--brt-grafite);
	color: #FFFFFF;
}

.at-btns-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* --- o botão fixo no canto ---------------------------------------------- */
.brt-pedido-botao {
	position: fixed;
	right: 15px;
	bottom: 130px;              /* acima do balãozinho do WhatsApp */
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
	background: var(--brt-papel);
	color: var(--brt-grafite);
	font-family: var(--brt-fonte-texto);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(39,36,37,.16);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.brt-pedido-botao:hover,
.brt-pedido-botao:focus-visible {
	background: var(--brt-grafite);
	border-color: var(--brt-grafite);
	color: #FFFFFF;
}
/* com peça dentro ele ganha cor: o pedido aberto é uma ação pendente */
.brt-pedido-botao--cheio {
	background: var(--brt-vermelho);
	border-color: var(--brt-vermelho);
	color: #FFFFFF;
}
.brt-pedido-botao--cheio:hover,
.brt-pedido-botao--cheio:focus-visible {
	background: var(--brt-vermelho-fundo);
	border-color: var(--brt-vermelho-fundo);
}
.brt-pedido-botao__icone { display: inline-flex; }
.brt-pedido-botao__qtd {
	font-family: var(--brt-fonte-codigo);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	min-width: 22px;
	padding: 2px 6px;
	border-radius: 2px;
	background: rgba(0,0,0,.14);
}
.brt-pedido-botao--cheio .brt-pedido-botao__qtd { background: rgba(0,0,0,.22); }

/* --- o painel ------------------------------------------------------------ */
.brt-pedido {
	position: fixed;
	right: 15px;
	bottom: 190px;
	z-index: 999;
	width: min(380px, calc(100vw - 30px));
	max-height: min(560px, calc(100vh - 220px));
	display: flex;
	flex-direction: column;
	background: var(--brt-papel);
	border: 1px solid var(--brt-borda);
	border-top: 3px solid var(--brt-vermelho);
	border-radius: 2px;
	box-shadow: 0 16px 44px rgba(39,36,37,.26);
}
.brt-pedido[hidden] { display: none; }

.brt-pedido__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 10px;
}
.brt-pedido__titulo {
	font-family: var(--brt-fonte-titulo);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	margin: 0;
}
.brt-pedido__fechar {
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	width: 40px;
	height: 40px;
	color: var(--brt-texto-fraco);
	cursor: pointer;
	border-radius: 2px;
}
.brt-pedido__fechar:hover { color: var(--brt-vermelho); }

.brt-pedido__vazio {
	padding: 0 16px 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--brt-texto-fraco);
	max-width: none;
	margin: 0;
}

.brt-pedido__lista {
	list-style: none;
	margin: 0;
	padding: 0 16px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.brt-pedido-item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--brt-borda);
}
.brt-pedido-item:last-child { border-bottom: none; }

.brt-pedido-item__nome {
	display: block;
	font-size: 15px;
	line-height: 1.25;
	color: var(--brt-grafite);
}
.brt-pedido-item__nome:hover { color: var(--brt-vermelho); }
.brt-pedido-item__codigo {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brt-texto-fraco);
}

.brt-pedido-item__qtd {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
}
.brt-pedido-item__qtd button {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--brt-grafite);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.brt-pedido-item__qtd button:hover { color: var(--brt-vermelho); }
.brt-pedido-item__qtd span {
	min-width: 26px;
	text-align: center;
	font-family: var(--brt-fonte-codigo);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.brt-pedido-item__tirar {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--brt-texto-fraco);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 2px;
}
.brt-pedido-item__tirar:hover { color: var(--brt-vermelho); }

.brt-pedido__rodape {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--brt-borda);
	background: var(--brt-fundo);
}
.brt-pedido__aviso {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--brt-texto-fraco);
	max-width: none;
}
.brt-pedido__enviar {
	display: block;
	width: 100%;
	text-align: center;
}
.brt-pedido__limpar {
	display: block;
	width: 100%;
	margin-top: 10px;
	min-height: 40px;
	border: 0;
	background: transparent;
	color: var(--brt-texto-fraco);
	font-family: var(--brt-fonte-texto);
	font-size: 14px;
	cursor: pointer;
}
.brt-pedido__limpar:hover { color: var(--brt-vermelho); }

/* --- no celular o painel ocupa a largura toda, de baixo pra cima ---------- */
@media screen and (max-width: 576px) {
	.brt-pedido-botao {
		right: 15px;
		bottom: 130px;
		padding: 0 14px;
	}
	.brt-pedido-botao__texto { display: none; }   /* no celular o ícone e o número bastam */

	.brt-pedido {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-height: 82vh;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	.brt-pedido__topo { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.brt-pedido-botao, .brt-btn-contorno, .brt-add { transition: none !important; }
}

/* =============================================================================
   PEÇA SEM FOTO
   As peças que vêm do Bling entram sem imagem (a foto fica pra um segundo
   passo). Sem isto, o card abria um buraco branco e parecia site quebrado.
   Agora o espaço da foto tem a mesma hachura grafite do topo do site — lê como
   "foto ainda não tem", não como erro. A imagem, quando existe, cobre tudo.
   ============================================================================= */
.at-produtos-box figure {
	background-color: #EDEBE8;
	background-image:
		repeating-linear-gradient(135deg,
			rgba(39,36,37,.05) 0px,
			rgba(39,36,37,.05) 2px,
			transparent 2px,
			transparent 10px);
}

/* =============================================================================
   A VITRINE — a página de escolher peça

   Densidade é o ponto. Quem abre esta página não está passeando: está com a
   caixa de câmbio aberta na bancada procurando UMA peça. Então o card é
   compacto, o código vem antes do nome (é por ele que se procura), e os
   filtros ficam à mão em vez de escondidos numa barra lateral.
   ============================================================================= */
.brt-vitrine {
	padding: 40px 0 72px;
	background: var(--brt-fundo);
}

/* --- A BARRA QUE GRUDA: busca + contador ---------------------------------
   Ela acompanha a rolagem logo abaixo do cabeçalho. É o conserto da queixa
   "busco e não vejo que buscou": campo e resultado passam a ficar sempre no
   mesmo quadro da tela, sem a pessoa ter que procurar um ou outro.
   A altura do cabeçalho muda (255px parado, ~180px compacto), por isso o topo
   vem de uma variável que o JavaScript atualiza — ver acompanharCabecalho(). */
.brt-vitrine__barra {
	position: sticky;
	top: var(--brt-cab, 258px);
	z-index: 90;
	background: var(--brt-fundo);
	padding: 16px 0 12px;
	margin-bottom: 4px;
	/* as sombras laterais cobrem a emenda com o fundo da seção quando gruda */
	box-shadow: -24px 0 0 var(--brt-fundo), 24px 0 0 var(--brt-fundo), 0 10px 16px -12px rgba(39,36,37,.28);
}

.brt-vitrine__busca {
	max-width: 720px;
	margin: 0 0 12px;
}
.brt-vitrine__busca .brt-busca__campo {
	font-size: 17px;
	padding: 15px 18px;
}
.brt-vitrine__busca .brt-busca__btn { padding: 0 26px; }

/* --- contagem, pronta entrega, limpar ------------------------------------ */
.brt-vitrine__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
}
.brt-vitrine__contagem {
	margin: 0;
	max-width: none;
	font-family: var(--brt-fonte-codigo);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--brt-texto-fraco);
	font-variant-numeric: tabular-nums;
}
.brt-vitrine__estoque {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-size: 15px;
	color: var(--brt-grafite);
	cursor: pointer;
}
.brt-vitrine__estoque input { width: 18px; height: 18px; accent-color: var(--brt-vermelho); }
.brt-vitrine__limpar {
	min-height: 40px;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--brt-fonte-texto);
	font-size: 15px;
	color: var(--brt-vermelho);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- os atalhos ----------------------------------------------------------- */
.brt-vitrine__filtros {
	display: grid;
	gap: 20px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--brt-borda);
}
.brt-vitrine__rotulo {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--brt-texto-fraco);
	margin: 0 0 10px;
}
.brt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.brt-vitrine__carregando {
	font-size: 14px;
	color: var(--brt-texto-fraco);
}

.brt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
	background: var(--brt-papel);
	font-family: var(--brt-fonte-codigo);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--brt-grafite);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.brt-chip:hover { border-color: var(--brt-grafite); }
.brt-chip__qtd {
	font-size: 12px;
	color: var(--brt-texto-fraco);
	font-variant-numeric: tabular-nums;
}
.brt-chip--ativo {
	background: var(--brt-grafite);
	border-color: var(--brt-grafite);
	color: #FFFFFF;
}
.brt-chip--ativo .brt-chip__qtd { color: rgba(255,255,255,.7); }

/* --- a grade -------------------------------------------------------------- */
.brt-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.brt-peca {
	display: flex;
	flex-direction: column;
	background: var(--brt-papel);
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
	padding: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.brt-peca:hover {
	border-color: #CFCCC7;
	box-shadow: 0 6px 18px rgba(39,36,37,.08);
}

.brt-peca__foto {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
	background-color: #EDEBE8;
	background-image:
		repeating-linear-gradient(135deg,
			rgba(39,36,37,.05) 0px,
			rgba(39,36,37,.05) 2px,
			transparent 2px,
			transparent 10px);
	border-radius: 2px;
	overflow: hidden;
}
.brt-peca__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;   /* some com o fundo branco das fotos de peça */
}

.brt-peca__corpo { flex: 1 1 auto; }

/* o código vem ANTES do nome: é por ele que o mecânico procura */
.brt-peca__codigo {
	margin: 0 0 6px;
	max-width: none;
	font-size: 14px;
	line-height: 1;
}
.brt-peca__codigo .brt-codigo { font-size: 14px; }

.brt-peca__nome {
	font-family: var(--brt-fonte-texto);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0 0 10px;
	text-wrap: pretty;
}
.brt-peca__nome a { color: var(--brt-grafite); }
.brt-peca__nome a:hover { color: var(--brt-vermelho); }

.brt-peca .brt-selo { margin-bottom: 12px; }

.brt-peca .at-btns-box { margin-top: auto; }
.brt-peca .at-btn {
	font-size: 14px;
	min-height: 40px;
	padding: 0 12px;
}
.brt-peca .brt-add { flex: 1 1 100%; justify-content: center; }
.brt-peca .brt-btn-contorno { flex: 1 1 auto; justify-content: center; }

/* --- nada encontrado ------------------------------------------------------ */
.brt-vitrine__vazio {
	padding: 40px 0 8px;
	max-width: 56ch;
}
.brt-vitrine__vazio-texto {
	font-size: 17px;
	line-height: 1.55;
	color: var(--brt-texto-fraco);
	margin-bottom: 18px;
}

.brt-vitrine__rodape {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}
.brt-vitrine__rodape .at-btn { min-width: 260px; justify-content: center; }

@media screen and (min-width: 768px) {
	.brt-vitrine__filtros { grid-template-columns: 1fr; }
}

@media screen and (max-width: 576px) {
	.brt-vitrine { padding: 24px 0 56px; }
	.brt-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.brt-peca { padding: 10px; }
	.brt-peca__nome { font-size: 14px; }
	/* no celular o botão de detalhes sai da frente: quem quer conferir toca no
	   nome da peça. Sobram "Adicionar" e o WhatsApp, que é o que se usa aqui. */
	.brt-peca .brt-btn-contorno { display: none; }
}

/* O cabeçalho é fixo, então qualquer salto para uma âncora precisa parar ABAIXO
   dele — senão o alvo do salto fica escondido atrás do menu. */
html { scroll-padding-top: 270px; }
@media screen and (max-width: 768px) { html { scroll-padding-top: 170px; } }

/* O contador vira resposta quando há filtro: é a confirmação de que a busca
   aconteceu, e a busca fica longe dele (no cabeçalho). Por isso ele cresce e
   ganha cor em vez de continuar um rodapé cinza de tabela. */
.brt-vitrine__contagem--filtrando {
	font-family: var(--brt-fonte-titulo);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: -0.01em;
	color: var(--brt-grafite);
}

/* o salto até o resultado para abaixo do cabeçalho fixo */
.brt-vitrine { scroll-margin-top: 280px; }
@media screen and (max-width: 768px) { .brt-vitrine { scroll-margin-top: 180px; } }

/* =============================================================================
   "TODAS AS PEÇAS" — o primeiro item da barra de categorias
   A barra escura é a navegação mais vista da página. O atalho pro catálogo
   inteiro vem antes das categorias, e em vermelho, porque é o que o cliente
   quer primeiro: ver o que existe, não escolher uma categoria no escuro.
   ============================================================================= */
.at-header-main__categories-list .brt-cat-todas a,
.at-header-main__categories-list > .brt-cat-todas > a {
	color: #FFFFFF;
	background: var(--brt-vermelho);
	font-weight: 600;
}
.at-header-main__categories-list .brt-cat-todas a:hover,
.at-header-main__categories-list > .brt-cat-todas > a:hover {
	background: var(--brt-vermelho-fundo);
	color: #FFFFFF;
}
.brt-cat-todas figure {
	display: flex;
	justify-content: center;
	align-items: center;
}
.brt-cat-todas svg { display: block; }

/* quando o cabeçalho está compacto, os ícones da barra recolhem — o do atalho
   recolhe junto, senão ele fica deslocado dos outros */
.header_fixo .brt-cat-todas svg {
	max-height: 0;
	opacity: 0;
	transition: max-height .28s ease, opacity .22s ease;
}

/* A grade do "Vai junto" tem no máximo 4 peças: deixa cada card maior que na
   vitrine, sem esticar quando sobra só uma. */
.brt-grade--vaijunto {
	grid-template-columns: repeat(auto-fill, minmax(230px, 280px));
	justify-content: start;
}

/* O card antigo do tema (.at-produtos-box) dentro da grade nova: a figura
   precisa de altura própria, senão a hachura cresce com a largura do card. */
.brt-grade .at-produtos-box {
	background: var(--brt-papel);
	border: 1px solid var(--brt-borda);
	border-radius: 2px;
	padding: 14px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.brt-grade .at-produtos-box figure {
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
	border-radius: 2px;
	overflow: hidden;
}
.brt-grade .at-produtos-box figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.brt-grade .at-produto-conteudo { flex: 1 1 auto; display: flex; flex-direction: column; }
.brt-grade .at-produto-conteudo h2 {
	font-family: var(--brt-fonte-texto);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 8px;
}
.brt-grade .at-produto-conteudo .at-btns-box { margin-top: auto; }


/* Na página do catálogo, a busca do cabeçalho sai: a da página é a que vale, e
   duas caixas de busca na mesma tela fazem a pessoa parar pra pensar em qual
   usar. Nas outras páginas o campo do cabeçalho continua, levando pra cá. */
/* vale nas DUAS páginas que mostram o catálogo: o arquivo de produtos e a
   página "Produtos" do menu. A classe vem do PHP (brt_eh_vitrine), não do
   endereço — endereço já mudou uma vez neste site. */
.brt-tem-vitrine .at-header-main__top .brt-busca { display: none; }
.brt-tem-vitrine .at-header-main__top .container { justify-content: flex-end; }

@media screen and (max-width: 767px) {
	/* no celular a tela é curta demais pra grudar barra: cabeçalho + barra
	   comeriam metade do que sobra pro catálogo */
	.brt-vitrine__barra {
		position: static;
		box-shadow: none;
		padding-top: 0;
	}
	.brt-tem-vitrine .at-header-main__top .brt-busca { display: flex; }
}

/* =============================================================================
   MAIS PEÇA NA TELA, MENOS MOLDURA

   Medido na página: entre o topo do menu e o primeiro produto havia 299px de
   coisa que não é produto — 44% da tela. Sobrava uma fileira e meia de peças, e
   dava vontade de aumentar o monitor pra ver mais. O conserto não é diminuir a
   peça, é diminuir a moldura:

     cabeçalho compacto .... 143px -> ~112px  (logo menor quando gruda)
     barra de busca ........ 156px ->  ~76px  (contador na MESMA linha do campo)
     card .................. 381px -> ~330px  (foto menos alta, menos respiro)
     colunas ...............     5 ->      6  (cards de 196px em vez de 230px)

   Resultado: de ~6 peças visíveis para ~18.
   ============================================================================= */

/* --- a barra: campo e contador lado a lado, não um embaixo do outro ------- */
.brt-vitrine__barra {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding: 10px 0 10px;
}
.brt-vitrine__barra .brt-vitrine__busca {
	flex: 1 1 380px;
	max-width: 560px;
	margin: 0;
}
.brt-vitrine__barra .brt-vitrine__linha {
	flex: 0 1 auto;
	margin: 0;
	gap: 16px;
}
.brt-vitrine__busca .brt-busca__campo {
	font-size: 16px;
	padding: 12px 16px;
}
.brt-vitrine__busca .brt-busca__btn { padding: 0 22px; }

/* o contador cresce quando filtra, mas sem empurrar a linha pra baixo */
.brt-vitrine__contagem--filtrando { font-size: 17px; }

/* --- o logo encolhe quando o cabeçalho gruda ----------------------------- */
.header_fixo .navbar-brand img,
.header_fixo .navbar-brand figure.logo img {
	max-height: 46px;
	width: auto;
}
.header_fixo .header-nav { padding: 6px 0; }

/* --- cards: a foto menos alta e menos respiro em volta ------------------- */
.brt-grade {
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 14px;
}
.brt-peca { padding: 12px; }
.brt-peca__foto {
	aspect-ratio: 16 / 11;
	margin-bottom: 10px;
}
.brt-peca__nome { margin-bottom: 8px; }
.brt-peca .brt-selo { margin-bottom: 10px; }
.brt-peca .at-btn { min-height: 38px; }
.brt-peca .at-btns-box { gap: 6px; }

/* no celular continua com duas colunas: três seria ilegível */
@media screen and (max-width: 576px) {
	.brt-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* CÓDIGO COMPRIDO NÃO DESALINHA O CARD.
   A maioria é curta ("U341"), mas sete peças têm o campo preenchido com uma
   lista ("A500, A518, A618, 48RE") e uma delas está com dois valores colados
   por erro de digitação no painel. Quando isso quebra em duas linhas, aquele
   card fica mais alto que os vizinhos e a fileira perde o alinhamento. Uma
   linha só, com reticências — e a informação não se perde, porque o modelo
   também está no nome da peça logo abaixo. */
.brt-peca__codigo {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-all;
}


/* =============================================================================
   CABEÇALHO PARADO, DE UMA VEZ

   A troca de estado ao rolar (normal <-> compacto) foi embora. Mesmo com as
   duas réguas da histerese, qualquer mudança de altura do cabeçalho mexe na
   altura da página, e o resultado nunca ficou firme. Agora o cabeçalho nasce
   compacto (a classe .header_fixo vem do próprio header.php, antes de qualquer
   JavaScript, então não existe nem o pisca-pisca do começo) e fica assim
   enquanto a página existir. Sem rolagem vigiada, sem transição, sem tremor.
   ============================================================================= */
.at-header-main,
.at-header-main__top,
.at-header-main__btns,
.at-header-main_menu,
.header-nav,
.at-header-main__categories,
.at-header-main__categories-list li a img {
	transition: none !important;
	animation: none !important;
}

/* =============================================================================
   O ARTIGO: FEITO PRA SER LIDO

   O texto estava em 17px com entrelinha de 26px e 10px entre parágrafos — um
   bloco só, sem respiro, e os subtítulos colados no parágrafo anterior. Quem lê
   isso é o mecânico procurando como resolver um problema, muitas vezes no
   celular, com a mão suja e pouca paciência. Então: letra maior, entrelinha
   folgada, parágrafo separado do seguinte e subtítulo com ar em cima — é o ar
   em cima do subtítulo que mostra onde começa um assunto novo.
   ============================================================================= */
.wq-interno-blog #the-content {
	font-size: 18px;
	line-height: 1.75;
}

.wq-interno-blog #the-content p {
	margin: 0 0 1.35em;
	max-width: 70ch;          /* linha longa demais faz o olho perder a volta */
}

.wq-interno-blog #the-content h2,
.wq-interno-blog #the-content h3,
.wq-interno-blog #the-content h4 {
	line-height: 1.2;
	margin: 1.9em 0 .55em;
}
.wq-interno-blog #the-content h2 { font-size: 30px; }
.wq-interno-blog #the-content h3 { font-size: 24px; }
.wq-interno-blog #the-content h4 { font-size: 20px; }

/* o primeiro título não precisa de ar em cima: já tem o resumo acima dele */
.wq-interno-blog #the-content > :first-child { margin-top: 0; }

.wq-interno-blog #the-content ul,
.wq-interno-blog #the-content ol {
	max-width: 70ch;
	margin: 0 0 1.35em;
	padding-left: 1.4em;
}
.wq-interno-blog #the-content li { margin-bottom: .5em; }

.wq-interno-blog #the-content strong,
.wq-interno-blog #the-content b { font-weight: 700; }

.wq-interno-blog #the-content a {
	color: var(--brt-vermelho, #c8102e);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wq-interno-blog #the-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 1.5em 0;
}

.wq-interno-blog #the-content blockquote {
	margin: 1.6em 0;
	padding: 2px 0 2px 18px;
	border-left: 4px solid var(--brt-vermelho, #c8102e);
	font-size: 19px;
}

/* o resumo, logo abaixo do título, vira olho de matéria em vez de mais um
   parágrafo igual aos outros */
.wq-interno-blog .wq-descricao {
	font-size: 20px;
	line-height: 1.6;
	opacity: .85;
	margin-bottom: 1.2em;
}

/* no celular a folga tem que ser ainda maior, porque a linha é curta */
@media screen and (max-width: 768px) {
	.wq-interno-blog #the-content { font-size: 17px; line-height: 1.8; }
	.wq-interno-blog #the-content h2 { font-size: 25px; }
	.wq-interno-blog #the-content h3 { font-size: 21px; }
	.wq-interno-blog .wq-descricao { font-size: 18px; }
}


/* =============================================================================
   O WHATSAPP VOLTA PRO ALTO DO SITE

   Com o cabeçalho sempre compacto, o bloco de telefones ficava escondido em toda
   página — e o WhatsApp é O canal da empresa, não dá pra ele existir só no
   rodapé. A regra que escondia era pra abrir espaço quando o cabeçalho
   encolhia; como ele não encolhe mais, o espaço é sempre o mesmo e cabe.

   O telefone fixo não entra: não é mais usado. Ele continua cadastrado no painel
   (e aparece no rodapé e na página Contato) — some só aqui do alto.
   ============================================================================= */
@media screen and (min-width: 769px) {
	.header_fixo .at-header-main__btns {
		max-height: 90px;
		opacity: 1;
	}

	.at-header-main__btns .brt-fone--fixo { display: none; }

	/* a busca divide a linha com o WhatsApp de novo */
	.header_fixo .brt-busca { max-width: 560px; }
}


/* =============================================================================
   CELULAR — A REVISÃO

   O cabeçalho virou "sempre compacto", e no celular isso teve um efeito
   colateral que eu não tinha visto: a regra que recolhia a barra de categorias
   ao rolar passou a valer o tempo todo, então a barra simplesmente sumiu do
   celular (ficou com 1 pixel de altura). Quem abre o site no telefone perdeu
   o atalho das categorias inteiro. É o primeiro conserto daqui.
   ============================================================================= */
@media screen and (max-width: 768px) {

	/* ---- 1. a barra de categorias volta, rolando de lado -------------------
	   Ela não pode mais recolher (não há mais estado "rolado"), mas também não
	   pode empilhar 8 categorias em 220px de altura. Então vira uma faixa de
	   uma linha só que se arrasta com o dedo, como as abas de aplicativo. */
	.at-header-main__categories,
	.header_fixo .at-header-main__categories {
		max-height: none;
		opacity: 1;
		overflow: visible;
	}

	/* A lista de categorias no celular é um carrossel do próprio tema (slick,
	   com as setinhas). Não mexo na rolagem dela — mexer brigava com o slick e
	   era o que deixava a faixa torta. Aqui só o texto de cada item. */
	.at-header-main__categories-list li a {
		white-space: nowrap;
		font-size: 13px;
	}

	/* ---- 2. no catálogo, UMA busca só -------------------------------------
	   A página do catálogo tem a própria barra de busca, grudada e com o
	   contador do lado. A do cabeçalho em cima dela era a mesma coisa duas
	   vezes, e as duas juntas comiam a primeira tela inteira do telefone. */
	.brt-tem-vitrine .at-header-main__top { display: none; }

	/* ---- 3. os botões do card cabem na coluna -----------------------------
	   Em 173px de card, "Ver detalhes" estava sendo espremido até ZERO de
	   largura: sumia, e o botão do WhatsApp ficava sozinho numa linha, com
	   cara de quadrado preto solto. Agora cada um tem tamanho mínimo e o
	   WhatsApp tem largura fixa. */
	.brt-peca .at-btns-box { gap: 6px; }
	.brt-peca .at-btns-box .brt-add { flex: 1 1 100%; }
	.brt-peca .at-btns-box .brt-btn-contorno {
		flex: 1 1 60px;
		min-width: 60px;
		padding: 0 8px;
		font-size: 13px;
		text-align: center;
	}
	.brt-peca .at-btns-box .brt-zap-produto {
		flex: 0 0 44px;
		width: 44px;
		padding: 0;
		justify-content: center;
	}

	/* nome e código menores: em duas colunas o nome ocupava 3 linhas */
	.brt-peca__nome { font-size: 14px; line-height: 1.3; }
	.brt-peca__nome a { font-size: inherit; }
	.brt-peca__codigo { font-size: 12px; }
	.brt-peca { padding-bottom: 10px; }

	/* ---- 4. os dois flutuantes param de brigar pelo mesmo canto -----------
	   O balãozinho do WhatsApp mora embaixo à direita. O "Meu pedido" ficava
	   logo acima dele, e os dois juntos cobriam uma peça inteira da lista.
	   Mandei o carrinho pro canto esquerdo: cada um no seu, e nenhum em cima
	   do outro. */
	.brt-pedido-botao {
		left: 12px;
		right: auto;
		bottom: 18px;
		min-height: 44px;
		padding: 0 12px;
	}
	.brt-pedido {
		left: 12px;
		right: 12px;
		bottom: 72px;
		width: auto;
		max-height: min(70vh, 520px);
	}

	/* ---- 5. o banner de título das páginas internas encolhe ---------------
	   Ele gastava 130px de altura pra escrever uma palavra. No telefone isso é
	   um sexto da tela antes de qualquer conteúdo. */
	.wq-banner-all-pages { min-height: 0; }
	.wq-banner-all-pages .breadcrumb { padding: 26px 0; }
	.wq-banner-all-pages .breadcrumb h1 { font-size: 22px; }

	/* ---- 6. respiro nas laterais ------------------------------------------
	   Texto colado na borda do telefone cansa de ler. */
	.brt-vitrine__filtros,
	.brt-vitrine__linha { padding-left: 2px; padding-right: 2px; }
}

/* telefone pequeno (iPhone SE e parecidos): uma coluna só no catálogo, porque
   em 320px duas colunas deixam o nome da peça em 5 linhas */
@media screen and (max-width: 360px) {
	.brt-grade { grid-template-columns: 1fr; }
	.brt-peca__nome { font-size: 15px; }
}


/* Abaixo de 576px o "Ver detalhes" já sai de cena (quem quer conferir toca no
   nome da peça). Então o "+ Adicionar" não pode ocupar a linha inteira, senão
   o botão do WhatsApp cai sozinho numa segunda linha. Os dois dividem uma só. */
@media screen and (max-width: 576px) {
	.brt-peca .at-btns-box { flex-wrap: nowrap; }
	.brt-peca .at-btns-box .brt-add { flex: 1 1 auto; min-width: 0; }
	.brt-peca .at-btns-box .brt-add { padding: 0 8px; }
	.brt-peca .at-btns-box .brt-add .brt-add__texto {
		font-size: 13px;
		white-space: nowrap;   /* senão vira "Adiciona" / "r" em duas linhas */
	}
}


/* =============================================================================
   A HOME NO CELULAR ERA UMA ESCADA DE 18 TELAS

   Medi: 14.806px de altura no telefone, e 8.466px disso eram as três listas de
   produtos — "mais vendidos", "overhauls" e companhia. Cada lista tem só 4
   peças, mas no celular cada peça virava um cartão de 589px de altura (a foto
   ocupava a largura inteira da tela), uma embaixo da outra.

   Duas por linha: a foto cai pra metade, o cartão pra uns 300px, e cada lista
   deixa de ser uma escada. As três listas somadas saem de 8.466px pra cerca de
   4.400px — a home inteira encolhe quase à metade sem perder nada.
   ============================================================================= */
@media screen and (max-width: 575px) {
	.at-listagem-produtos-01 .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-left: 0;
		margin-right: 0;
	}
	.at-listagem-produtos-01 .row > [class*="col-"] {
		width: auto;
		max-width: none;
		flex: none;
		padding-left: 0;
		padding-right: 0;
	}

	/* o nome da peça acompanha o cartão menor */
	.at-listagem-produtos-01 .at-produtos-box h2,
	.at-listagem-produtos-01 .at-produtos-box h3 {
		font-size: 14px;
		line-height: 1.3;
	}

	/* e o título da seção para de brigar com o botão "Ver catálogo" do lado */
	.at-listagem-produtos-01 .at-titulo-content {
		flex-wrap: wrap;
		gap: 10px;
	}
}


/* Acertos finos do celular, vistos na régua de 390px -------------------------- */
@media screen and (max-width: 767px) {

	/* "Adicionar" estava quebrando no meio da palavra ("Adici / onar") nos
	   cartões da home. Vale pros dois tipos de cartão, o da home e o do catálogo. */
	.brt-add__texto { white-space: nowrap; }
	.brt-add { font-size: 13px; padding: 0 10px; }

	/* o cartão da home gastava altura em folga interna: a foto longe do nome, o
	   nome longe do código, o código longe do botão */
	.at-produtos-box { padding: 10px; }
	.at-produtos-box figure { margin-bottom: 8px; }
	.at-produtos-box h2,
	.at-produtos-box h3 { margin-bottom: 6px; }
	.at-produtos-box .at-btn { font-size: 13px; padding: 0 10px; }

	/* os itens da faixa de categorias ficavam desalinhados na vertical, porque
	   cada um tem uma altura (o ícone escondido deixa sobra em uns e não em
	   outros). O carrossel do tema não centraliza sozinho. */
	.at-header-main__categories-list .slick-track {
		display: flex;
		align-items: center;
	}
}


/* O CARRINHO SÓ APARECE QUANDO TEM PEÇA DENTRO ------------------------------
   No telefone ele e o balãozinho do WhatsApp ficavam parados em cima da lista,
   cobrindo botão de peça. E na maior parte das visitas o pedido está vazio —
   um botão que diz "0" não serve pra nada e atrapalha. O JS já marca o botão
   com a classe --cheio quando entra a primeira peça; antes disso ele some.
   No computador fica como está: lá sobra tela. */
@media screen and (max-width: 767px) {
	.brt-pedido-botao:not(.brt-pedido-botao--cheio) { display: none; }

	/* menos ar entre o título da seção e os cartões */
	.at-listagem-produtos-01 { padding-top: 32px; padding-bottom: 32px; }
	.at-listagem-produtos-01 .at-titulo-content { margin-bottom: 14px; }
}


/* =============================================================================
   OS CAMPOS DO FORMULÁRIO ESTAVAM INVISÍVEIS

   Não é coisa do celular — é dos dois. O <textarea> vinha com fundo cinza
   (#f1f1f1) do tema, mas os <input> vinham com fundo BRANCO e borda
   transparente. Dentro de um cartão branco isso é um campo que não existe: só
   se via o texto cinza do placeholder solto no ar, e quem olha não sabe onde
   tocar pra escrever. Agora os dois têm a mesma cara.
   ============================================================================= */
.brt-form-zap .wq-input input,
.at-contato-form .wq-input input,
.at-form-wrapper .wq-input input {
	background-color: #f1f1f1;
	border: 1px solid rgba(0, 0, 0, .10);
	width: 100%;
}

.brt-form-zap .wq-input input:focus,
.at-contato-form .wq-input input:focus,
.at-form-wrapper .wq-input input:focus,
.brt-form-zap textarea:focus {
	outline: 2px solid var(--brt-vermelho, #c8102e);
	outline-offset: 1px;
	background-color: #fff;
}

.brt-form-zap textarea {
	border: 1px solid rgba(0, 0, 0, .10);
	width: 100%;
}

/* no telefone, 16px é o mínimo pra o iPhone não dar zoom sozinho ao tocar */
@media screen and (max-width: 767px) {
	.brt-form-zap .wq-input input,
	.brt-form-zap textarea { font-size: 16px; }
}


/* o tema põe CAIXA ALTA no texto de dica do <textarea>, e aí a mensagem ficava
   gritando em cima de três campos em letra normal */
.brt-form-zap textarea::placeholder { text-transform: none; }
.brt-form-zap textarea { text-transform: none; }


/* =============================================================================
   A FOTO DA PEÇA: GRANDE, INTEIRA E COM ZOOM

   As fotos do mini estúdio vêm do celular em pé (1200x1600). O tema recortava
   num quadrado de 650x600 e ainda exibia em 225x300, dentro de uma coluna de
   640px — a peça aparecia cortada e pequena, do tamanho de um selo.

   Agora a foto ocupa a coluna inteira num quadro quadrado de fundo claro, com
   object-fit: contain — foto em pé e foto deitada cabem as duas sem corte, e o
   quadro não muda de tamanho de uma peça pra outra, que é o que deixa a
   listagem e a página com cara de catálogo e não de álbum.

   Clicar abre a imagem original em tela cheia (a lity, que o tema já carrega).
   ============================================================================= */
/* o <figure> do tema é flex e centraliza o conteúdo, o que fazia o link da
   foto ser medido pelo conteúdo (301px) em vez de ocupar a coluna (496px).
   Largura explícita resolve nos dois casos, flex ou bloco. */
.at-produto-interno-01 .at-fotos-carrousel figure,
.at-produto-interno-01 .brt-foto-unica figure {
	margin: 0;
	display: block;
	width: 100%;
}
/* o tema tem uma regra mais específica para a imagem dentro do carrossel, que
   prendia a largura em 300px. Subindo a especificidade da nossa, a foto passa
   a ocupar a coluna inteira. */
.at-produto-interno-01 .brt-foto-zoom { width: 100%; }
.at-produto-interno-01 .at-fotos-carrousel .brt-foto-zoom img,
.at-produto-interno-01 .brt-foto-unica .brt-foto-zoom img {
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.brt-foto-zoom {
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid var(--brt-borda, #e2e2e2);
	border-radius: 4px;
	overflow: hidden;
	cursor: zoom-in;
}

.brt-foto-zoom img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 16px;
	background: #fff;
}

/* a dica fica sempre visível no celular (não há "passar o mouse" lá) e só no
   hover no computador, pra não sujar a foto */
.brt-foto-zoom::after {
	content: "Toque para ampliar";
	position: absolute;
	left: 10px;
	bottom: 10px;
	background: rgba(39, 36, 37, .78);
	color: #fff;
	font-size: 12px;
	letter-spacing: .02em;
	padding: 5px 9px;
	border-radius: 3px;
	pointer-events: none;
}

@media (hover: hover) {
	.brt-foto-zoom::after {
		content: "Clique para ampliar";
		opacity: 0;
		transition: opacity .15s linear;
	}
	.brt-foto-zoom:hover::after { opacity: 1; }
}

/* =============================================================================
   O BOTÃO DE COMPARTILHAR
   ============================================================================= */
.brt-compartilhar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: inherit;
}

.brt-compartilhar::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	background: currentColor;
	-webkit-mask: var(--brt-icone-compartilhar) center / contain no-repeat;
	mask: var(--brt-icone-compartilhar) center / contain no-repeat;
}

:root {
	--brt-icone-compartilhar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><line x1='8.6' y1='13.5' x2='15.4' y2='17.5'/><line x1='15.4' y1='6.5' x2='8.6' y2='10.5'/></svg>");
}

.brt-compartilhar--feito {
	border-color: #1d7a3c;
	color: #1d7a3c;
}

/* no celular os dois botões da peça ficam um embaixo do outro, largos */
@media screen and (max-width: 575px) {
	.at-conteudo-bottom { display: flex; flex-wrap: wrap; gap: 10px; }
	.at-conteudo-bottom > .at-btn { flex: 1 1 100%; justify-content: center; }
}


/* --- o compartilhar dentro do card: só o ícone ---------------------------- */
/* o tema tem .brt-peca .brt-btn-contorno { flex: 1 1 auto }, que é mais
   específica e espichava o botão de ícone pra linha inteira */
.brt-compartilhar--icone,
.brt-peca .at-btns-box .brt-compartilhar--icone,
.at-btns-box .brt-compartilhar--icone {
	flex: 0 0 44px;
	width: 44px;
	min-width: 44px;
	padding: 0;
	justify-content: center;
}
.brt-compartilhar--icone::before { margin: 0; }

/* no celular o card fica com "Adicionar" ocupando a linha inteira e os dois
   ícones dividindo a linha de baixo — dois botões iguais parecem propositais,
   um botão sozinho parece sobra */
@media screen and (max-width: 575px) {
	.brt-peca .at-btns-box { flex-wrap: wrap; }
	.brt-peca .at-btns-box .brt-add { flex: 1 1 100%; }
	.brt-peca .at-btns-box .brt-zap-produto,
	.brt-peca .at-btns-box .brt-compartilhar--icone {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}


/* com o compartilhar, são três botões depois do "Adicionar". O "Ver detalhes"
   precisa aceitar encolher, senão ele sozinho ocupa a linha e empurra o
   compartilhar pra uma terceira fileira. */
.brt-peca .at-btns-box .brt-btn-contorno:not(.brt-compartilhar) {
	flex: 1 1 60px;
	min-width: 0;
	padding: 0 8px;
}


/* =============================================================================
   AS DUAS BARRAS DE CATEGORIA AO MESMO TEMPO

   O tema monta a barra de categorias DUAS vezes: uma versão pro computador e
   uma pro celular, e manda o Bootstrap esconder a que não serve, com as
   classes d-none / d-lg-none. O problema é que o Bootstrap vem de um servidor
   de fora (cdn.jsdelivr.net). Se esse arquivo não chegar — CDN fora do ar,
   rede do cliente bloqueando, ou o celular tendo guardado uma versão pela
   metade enquanto o minificador do cache estava gerando os arquivos — as
   classes não valem nada e AS DUAS BARRAS APARECEM, uma por cima da outra,
   com "Todas as peças" quebrando letra por letra. Foi exatamente o que
   apareceu no iPhone.

   A regra abaixo faz o mesmo trabalho, mas no NOSSO arquivo, que sempre
   carrega junto com o site. Com ela, mesmo que o Bootstrap não chegue, só uma
   barra aparece.
   ============================================================================= */
@media screen and (max-width: 991.98px) {
	.at-header-main__categories .d-lg-block.d-none { display: none !important; }
}

@media screen and (min-width: 992px) {
	.at-header-main__categories .d-block.d-lg-none { display: none !important; }
}