/* =====================================================================
   RACESPEC - camada de design da loja (carregada depois de style.css)
   cores da marca: verde #9ccb3e, preto, branco (+ cinzentos neutros)
   ===================================================================== */

:root {
	--verde: #9ccb3e;
	--verde-escuro: #87af36;
	--verde-suave: #f1f7e4;
	--preto: #0b0b0b;
	--grafite: #1d1d1b;
	--cinza-texto: #5c5c58;
	--cinza-linha: #e4e4df;
	--cinza-fundo: #f4f4f1;
	--branco: #ffffff;
	--raio: 12px;
	--raio-pequeno: 8px;
	--sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--altura-nav: 70px;
	--altura-confianca: 36px;
}

/* ---------- base ---------- */

body {
	background: var(--cinza-fundo);
	color: var(--grafite);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	text-rendering: optimizeLegibility;
}

a {
	transition: color 150ms ease;
}

:focus-visible {
	outline: 2px solid var(--verde);
	outline-offset: 2px;
}

/* titulos: tamanhos fluidos e sem partir palavras a meio ("EXC-" / "F") */
h1, .h1 {
	font-size: clamp(22px, 2.4vw + 12px, 34px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin-bottom: 16px;
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}
h2, .h2 {
	font-size: clamp(20px, 1.6vw + 12px, 28px);
	line-height: 1.2;
	margin-bottom: 24px;
	text-wrap: balance;
}
h3, .h3 {
	font-size: clamp(17px, 1vw + 12px, 22px);
	line-height: 1.25;
	margin-bottom: 16px;
}

/* breadcrumb */
.breadcrumb-loja, h1 + p.small, h1 + .small {
	color: var(--cinza-texto);
}

/* scroll suave nativo (substitui o jquery.smoothscrolling) - so para quem nao pediu movimento reduzido;
   as ancoras param abaixo do cabecalho fixo */
html {
	scroll-padding-top: calc(var(--altura-nav) + var(--altura-confianca) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- botoes ---------- */

.button, .button-xs, .button-xxs, .btn {
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out), box-shadow 180ms ease;
	-webkit-transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out), box-shadow 180ms ease;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}
.button:active, .button-xs:active, .button-xxs:active, .btn:active {
	transform: scale(0.97);
}
/* botoes finos: inter seminegrito, maiusculas pequenas com espacamento, 44px de altura, contorno de 1px.
   (o orbitron fica so nos titulos; os textos da bd tem maiusculas inconsistentes, por isso mantem-se uppercase) */
.button, .btn.button-green-green, .btn.button-green-black, .btn.button-black-green, .btn.button-green-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 140px;
	min-height: 44px;
	padding: 0 22px;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--raio-pequeno);
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1.25;
	text-transform: uppercase;
	text-align: center;
	white-space: normal;
	text-decoration: none !important;
	box-shadow: none;
}
.button .fa {
	font-size: 14px;
	margin: 0 !important;
}
.button:focus-visible, .button-xs:focus-visible, .button-xxs:focus-visible, .btn:focus-visible {
	outline: 2px solid var(--verde);
	outline-offset: 2px;
}
/* botoes de icone (quadrados) */
.button-xs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--raio-pequeno);
	font-size: 15px;
	vertical-align: middle;
}
.button-xs .fa-lg {
	font-size: 16px;
}
.button-xxs {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--raio-pequeno) !important;
}
/* botao de pesquisa colado ao campo (coluna de filtros) */
.input-group-btn .btn {
	height: 46px;
	min-width: 46px;
	padding: 0 14px;
	border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0 !important;
	border: 1px solid transparent;
	min-width: 0;
	white-space: nowrap;
}
/* botoes do bootstrap que restam (ex: anexar ficheiro) */
.btn {
	border-radius: var(--raio-pequeno);
	font-weight: 600;
}
@media (max-width: 767px) {
	.button {
		min-height: 48px; /* alvo de toque mais confortavel */
	}
}

/* verde: texto preto para contraste (branco sobre #9ccb3e fica ~2:1) */
.button-green-green, .button-green-black, .button-green-white {
	background-color: var(--verde);
	border-color: var(--verde);
	color: var(--preto);
}
.button-green-green:hover, .button-green-green:focus-visible {
	background-color: var(--verde-escuro);
	border-color: var(--verde-escuro);
	color: var(--preto);
}
.button-green-black:hover, .button-green-black:focus-visible {
	background-color: var(--preto);
	border-color: var(--preto);
	color: var(--branco);
}
.button-black-green {
	background-color: var(--preto);
	border-color: var(--preto);
	color: var(--branco);
}
.button-black-green:hover, .button-black-green:focus-visible {
	background-color: var(--verde);
	border-color: var(--verde);
	color: var(--preto);
}
/* "cinzento" deixava o botao principal com ar de desativado - passa a contorno preto */
.button-gray-green {
	background-color: var(--branco);
	border: 1px solid var(--preto);
	color: var(--preto);
}
.button-gray-green:hover, .button-gray-green:focus-visible {
	background-color: var(--preto);
	border-color: var(--preto);
	color: var(--branco);
}
.button-white-black {
	color: var(--preto);
}

/* formularios */
.form-control {
	border-radius: var(--raio-pequeno);
	border-color: var(--cinza-linha);
	box-shadow: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus {
	border-color: var(--verde);
	box-shadow: 0 0 0 3px rgba(156, 203, 62, 0.25);
}
input.form-control, select.form-control, textarea.form-control {
	font-size: 16px; /* evita zoom automatico no ios */
}

/* ---------- cabecalho ---------- */

#navbarbg {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
#form-pesquisa {
	position: relative;
}
#pesquisa {
	width: 190px !important;
	height: 40px;
	margin-top: 4px;
	padding-left: 38px;
	border-radius: 999px;
	border: 1px solid #2c2c2a;
	background: #1a1a19;
	color: var(--branco);
	font-size: 14px;
}
#pesquisa::placeholder {
	color: #9a9a95;
}
#pesquisa:focus {
	background: var(--branco);
	color: var(--preto);
	border-color: var(--verde);
}
#form-pesquisa .icone-pesquisa {
	position: absolute;
	left: 14px;
	top: 16px;
	color: #9a9a95;
	pointer-events: none;
	font-size: 14px;
}
@media (min-width: 768px) and (max-width: 1199px) {
	#pesquisa {
		width: 150px !important;
	}
}
.navbar-toggle {
	transition: transform 160ms var(--ease-out);
}
@media (max-width: 767px) {
	#navbarcontainer .navbar-toggle {
		margin-left: 0;
		margin-right: 2px;
		padding: 9px 9px;
	}
	#navbarcontainer .navbar-brand {
		padding-right: 0;
	}
	#logo {
		height: 26px;
	}
}
/* contador do carrinho sobre o icone (nao empurra o cabecalho) */
#cartxs {
	position: relative;
}
#cartxs .badge {
	position: absolute;
	top: 2px;
	right: -4px;
	min-width: 18px;
	padding: 3px 5px;
	font-size: 11px;
	line-height: 12px;
	background: var(--verde) !important;
	color: var(--preto) !important;
}
.navbar-toggle:active {
	transform: scale(0.94);
}

/* rodape a toda a largura: o container-fluid exterior ja tem 15px, o total acompanha o cabecalho */
.rodape-fluido {
	padding-left: clamp(1px, calc(3vw - 15px), 33px);
	padding-right: clamp(1px, calc(3vw - 15px), 33px);
}

/* cabecalho a toda a largura (logo, menus e pesquisa com mais espaco) */
.cabecalho-fluido {
	padding-left: clamp(16px, 3vw, 48px);
	padding-right: clamp(16px, 3vw, 48px);
}
@media (min-width: 1200px) {
	.cabecalho-fluido > .navbar-header {
		margin-left: 0;
	}
	.cabecalho-fluido > #navbar {
		margin-right: 0;
		padding-right: 0;
	}
	#form-pesquisa {
		margin-right: 8px;
	}
	#pesquisa {
		width: clamp(170px, calc(40vw - 300px), 380px) !important;
	}
	/* o tema antigo usa "a:not(:hover)" com 12px: sem cobrir os dois estados, o padding mudava no hover e o menu todo mexia */
	.nav.navbar-nav > li > a, .nav.navbar-nav > li > a:not(:hover) {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* pesquisa rapida - sugestoes com imagem, nome e preco */
:is(#resultados, #resultados-movel) {
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 1100;
	width: max(100%, 440px);
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0;
	background: var(--branco);
	border: 1px solid var(--cinza-linha);
	border-radius: var(--raio);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	color: var(--grafite);
	text-align: left;
}
:is(#resultados, #resultados-movel) .resultados-lista {
	padding: 6px 0;
}
:is(#resultados, #resultados-movel) .resultado {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--cinza-linha);
	color: var(--grafite) !important;
	text-decoration: none !important;
	font-family: "Inter", sans-serif !important;
	font-size: 13.5px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: background-color 120ms ease;
}
:is(#resultados, #resultados-movel) .resultado:last-child {
	border-bottom: 0;
}
:is(#resultados, #resultados-movel) .resultado img, :is(#resultados, #resultados-movel) .resultado-sem-imagem {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: 1px solid var(--cinza-linha);
	border-radius: var(--raio-pequeno);
	background: var(--branco);
	object-fit: contain;
}
:is(#resultados, #resultados-movel) .resultado-texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
:is(#resultados, #resultados-movel) .resultado-titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	font-weight: 500;
}
:is(#resultados, #resultados-movel) .resultado-preco {
	color: var(--preto);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
:is(#resultados, #resultados-movel) .resultado-consulta {
	color: var(--cinza-texto);
	font-weight: 600;
}
:is(#resultados, #resultados-movel) .resultado:hover, :is(#resultados, #resultados-movel) .resultado.selected {
	background: var(--cinza-fundo);
}
:is(#resultados, #resultados-movel) .resultado-todos {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 14px;
	background: var(--verde);
	color: var(--preto) !important;
	font-family: "Inter", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: background-color 120ms ease;
}
:is(#resultados, #resultados-movel) .resultado-todos:hover, :is(#resultados, #resultados-movel) .resultado-todos.selected {
	background: var(--verde-escuro);
}
:is(#resultados, #resultados-movel) .resultado-vazio {
	position: static;
	background: var(--branco);
	color: var(--grafite) !important;
	font-weight: 500 !important;
}
:is(#resultados, #resultados-movel) .resultado-vazio:hover, :is(#resultados, #resultados-movel) .resultado-vazio.selected {
	background: var(--cinza-fundo);
}
:is(#resultados, #resultados-movel) .resultados-a-carregar {
	padding: 14px;
	color: var(--cinza-texto);
	font-size: 13px;
}

/* barra de confianca */
.barra-confianca {
	background: #141413;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: #d8d8d3;
	font-size: 12.5px;
	height: var(--altura-confianca);
}
.barra-confianca ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	height: var(--altura-confianca);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.barra-confianca ul::-webkit-scrollbar {
	display: none;
}
.barra-confianca li {
	flex: 0 0 auto;
	font-size: 12px;
	margin: 0;
	white-space: nowrap;
}
.barra-confianca .fa {
	color: var(--verde);
	margin-right: 6px;
}
.barra-confianca a {
	color: #d8d8d3;
	text-decoration: none;
}
.barra-confianca a:hover {
	color: var(--verde);
}
.barra-confianca b {
	color: var(--branco);
	font-weight: 600;
}
@media (max-width: 767px) {
	.barra-confianca ul {
		justify-content: flex-start;
		gap: 20px;
	}
}

/* pesquisa no telemovel (substitui a barra de confianca, que fica na pagina de produto) */
.pesquisa-movel {
	display: none;
}
@media (max-width: 767px) {
	:root {
		--altura-nav: 70px;
		--altura-confianca: 54px;
	}
	.espaco-topo {
		height: calc(var(--altura-nav) + var(--altura-confianca) + 20px);
	}
	.pesquisa-movel {
		display: block;
		position: relative;
		padding: 0 12px 10px;
		background: #000000;
	}
	.pesquisa-movel .fa {
		position: absolute;
		left: 26px;
		top: 13px;
		color: #9a9a95;
		pointer-events: none;
	}
	.pesquisa-movel .form-control {
		height: 44px;
		padding-left: 40px;
		border-radius: 999px;
		border: 1px solid #2c2c2a;
		background: #1a1a19;
		color: var(--branco);
	}
	.pesquisa-movel .form-control::placeholder {
		color: #9a9a95;
	}
	.pesquisa-movel .form-control:focus {
		background: var(--branco);
		color: var(--preto);
		border-color: var(--verde);
	}
	.barra-confianca, #searchxs {
		display: none !important;
	}
}

/* filtros: interruptor "so em stock" e painel lateral no telemovel */
.barra-resultados {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 4px;
}
.interruptor-stock {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	color: var(--grafite);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}
.interruptor-stock:hover, .interruptor-stock:focus-visible {
	color: var(--preto);
}
.interruptor-stock .interruptor {
	position: relative;
	width: 40px;
	height: 24px;
	border-radius: 999px;
	background: #cfcfc8;
	transition: background-color 200ms ease;
}
.interruptor-stock .interruptor::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--branco);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 200ms var(--ease-out);
}
.interruptor-stock.ligado .interruptor {
	background: var(--verde);
}
.interruptor-stock.ligado .interruptor::after {
	transform: translateX(16px);
}
.botao-filtros {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-radius: var(--raio-pequeno);
	background: var(--preto);
	color: var(--branco) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: transform 160ms var(--ease-out);
}
.botao-filtros:active {
	transform: scale(0.97);
}
.botao-filtros .contador {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--verde);
	color: var(--preto);
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}
.painel-filtros-topo, .painel-filtros-rodape {
	display: none;
}
@media (max-width: 767px) {
	#filtros {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1060;
		width: min(88vw, 360px);
		margin: 0 !important;
		padding: 0 0 calc(80px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--branco);
		box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
		transform: translateX(105%);
		transition: transform 280ms var(--ease-out);
		visibility: hidden;
	}
	.filtros-abertos #filtros {
		transform: translateX(0);
		visibility: visible;
	}
	.filtros-abertos {
		overflow: hidden;
	}
	.fundo-filtros {
		position: fixed;
		inset: 0;
		z-index: 1055;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 200ms ease;
	}
	.filtros-abertos .fundo-filtros {
		opacity: 1;
		pointer-events: auto;
	}
	#filtros .painel-filtros-topo {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		background: var(--branco);
		border-bottom: 1px solid var(--cinza-linha);
	}
	#filtros .painel-filtros-topo .h3 {
		font-size: 18px;
	}
	#filtros .painel-filtros-topo .fechar-filtros {
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: var(--cinza-fundo);
		font-size: 18px;
	}
	#filtros .caixa-filtros {
		border: 0 !important;
		border-radius: 0 !important;
		padding: 16px !important;
	}
	#filtros .caixa-filtros .h4.visible-xs {
		display: none !important;
	}
	#filtros .painel-filtros-rodape {
		position: fixed;
		right: 0;
		bottom: 0;
		width: min(88vw, 360px);
		display: block !important;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--branco);
		border-top: 1px solid var(--cinza-linha);
	}
	#filtros .painel-filtros-rodape .button {
		width: 100%;
	}
	.barra-resultados {
		justify-content: flex-start;
	}
}

/* contagem de resultados nas listagens */
.contagem-resultados {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--cinza-texto);
}
.contagem-resultados b {
	color: var(--preto);
}

/* espaco por baixo do cabecalho fixo */
.espaco-topo {
	height: calc(var(--altura-nav) + var(--altura-confianca) + 32px);
}
.espaco-topo-home {
	height: calc(var(--altura-nav) + var(--altura-confianca));
}

/* ---------- hero ---------- */

.carousel {
	height: calc(100svh - var(--altura-nav) - var(--altura-confianca) - 90px);
	min-height: 360px;
	max-height: 640px;
}
.hero-acoes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	z-index: 11;
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 0 16px;
}
/* tres botoes com a mesma largura: o verde e a entrada principal, os outros dois em vidro escuro (leem-se sobre qualquer frame do video) */
.hero-acoes .button {
	flex: 0 1 270px;
	min-width: 0;
	min-height: 50px;
	gap: 10px;
	padding: 0 18px;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.hero-acoes .button .fa {
	font-size: 16px;
}
.hero-acoes .hero-vidro {
	background: rgba(11, 11, 11, 0.55);
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--branco);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.hero-acoes .hero-vidro:hover, .hero-acoes .hero-vidro:focus-visible {
	background: var(--branco);
	border-color: var(--branco);
	color: var(--preto);
}
.hero-acoes .hero-vidro .fa {
	color: var(--verde);
	transition: color 180ms ease;
}
.hero-acoes .hero-vidro:hover .fa, .hero-acoes .hero-vidro:focus-visible .fa {
	color: var(--preto);
}
.hero-rotulo-curto {
	display: none;
}
/* video do hero (e a imagem de capa) sempre a cobrir a area, sem barras */
.carousel-video {
	width: 100%;
	height: 100%;
	margin-left: 0 !important;
	object-fit: cover;
	background: #000000;
}
@media (max-width: 767px) {
	/* o video e 16:9 com o logotipo ao centro - uma altura de ~300px mostra-o inteiro */
	.carousel {
		height: 300px;
		min-height: 0;
	}
	.carousel-video {
		width: 100%;
		height: 100%;
		margin-left: 0;
		object-fit: cover;
	}
	.hero-acoes {
		bottom: 16px;
		gap: 8px;
		padding: 0 12px;
	}
	/* telemovel: tres blocos iguais, icone em cima e texto curto */
	.hero-acoes .button {
		flex: 1 1 0;
		flex-direction: column;
		gap: 4px;
		min-height: 60px;
		padding: 8px 4px;
		font-size: 11.5px;
		letter-spacing: 0.06em;
	}
	.hero-acoes .button .fa {
		font-size: 18px;
	}
	.hero-rotulo { /* escondido mas lido pelos leitores de ecra (o curto tem aria-hidden) */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.hero-rotulo-curto {
		display: inline;
	}
}

/* ---------- cartao de produto (listagens e destaques) ---------- */

.cartao-produto {
	position: relative;
	display: flex;
	flex-direction: column;
	height: calc(100% - 24px);
	margin-bottom: 24px;
	background: var(--branco);
	border: 1px solid var(--cinza-linha);
	border-radius: var(--raio);
	overflow: hidden;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out);
}
.cartao-produto .overlay-container {
	margin-bottom: 0 !important;
	padding: 10px;
	background: var(--branco);
}
.cartao-produto .overlay-container img {
	border: 0 !important;
	border-radius: var(--raio-pequeno) !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	transition: transform 300ms var(--ease-out);
}
.cartao-produto .overlay {
	display: none;
}
.cartao-produto .cartao-corpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
	margin: 0 !important;
	padding: 4px 14px 14px;
}
.cartao-produto .cartao-titulo {
	height: auto !important;
	min-height: 2.7em;
	overflow: hidden;
}
.cartao-produto .cartao-titulo p,
.cartao-produto .cartao-titulo a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	text-align: left;
	color: var(--grafite);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}
.cartao-produto .cartao-titulo a:hover {
	color: var(--preto);
	text-decoration: underline;
	text-decoration-color: var(--verde);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.cartao-produto .cartao-preco {
	margin: auto 0 0 !important;
	text-align: left !important;
	color: var(--preto) !important;
	font-size: 13px;
	line-height: 1.3;
}
.cartao-produto .cartao-preco .h4 {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--preto);
	font-variant-numeric: tabular-nums;
}
.cartao-produto .cartao-preco .badge {
	background: var(--preto);
	color: var(--verde);
	font-weight: 700;
	border-radius: 4px;
}
.cartao-produto .cartao-preco s {
	color: var(--cinza-texto);
}
.cartao-produto .cartao-preco .small {
	color: var(--cinza-texto);
}
/* adicionar ao carrinho rapido (sobre a imagem) */
.cartao-produto form {
	opacity: 1 !important;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}
.cartao-produto form .button-xxs {
	float: none !important;
	margin: 0 !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	border-radius: 999px !important;
	background: var(--verde);
	border-color: var(--verde);
	color: var(--preto);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.cartao-produto form .button-xxs .fa {
	font-size: 17px;
	margin: 0 !important;
	line-height: 40px;
}
@media (hover: hover) and (pointer: fine) {
	.cartao-produto:hover {
		border-color: #cfcfc8;
		box-shadow: var(--sombra);
		transform: translateY(-2px);
	}
	.cartao-produto:hover .overlay-container img {
		transform: scale(1.03);
	}
	.cartao-produto form .button-xxs:hover {
		background: var(--preto);
		border-color: var(--preto);
		color: var(--verde);
	}
}
/* grelha: cartoes com a mesma altura e espacos mais justos */
.grelha-produtos {
	display: flex;
	flex-wrap: wrap;
}
.grelha-produtos > [class*="col-"] {
	float: none;
}
/* as quebras de linha manuais (div vazios visible-*) deixam de ser precisas com flex */
.grelha-produtos > [class*="visible-"]:empty {
	display: none !important;
}
@media (max-width: 767px) {
	.grelha-produtos > [class*="col-"] {
		padding-left: 6px;
		padding-right: 6px;
	}
	.grelha-produtos {
		margin-left: -6px;
		margin-right: -6px;
	}
	.cartao-produto {
		height: calc(100% - 12px);
		margin-bottom: 12px;
	}
	.cartao-produto .cartao-corpo {
		padding: 2px 10px 12px;
	}
	.cartao-produto .cartao-titulo a {
		font-size: 13px;
	}
	.cartao-produto .cartao-preco .h4 {
		font-size: 16px;
	}
	.cartao-produto form .button-xxs {
		width: 36px !important;
		height: 36px !important;
	}
	.cartao-produto form .button-xxs .fa {
		line-height: 36px;
		font-size: 15px;
	}
}

/* produtos em destaque (home) - a toda a largura, 5 por linha em desktop */
.destaques-fluido {
	padding-left: clamp(16px, 3vw, 48px);
	padding-right: clamp(16px, 3vw, 48px);
}
@media (min-width: 992px) {
	.destaques-fluido .grelha-produtos > [class*="col-"] {
		width: 20%;
		padding-left: 12px;
		padding-right: 12px;
	}
	.destaques-fluido .grelha-produtos {
		margin-left: -12px;
		margin-right: -12px;
	}
	.destaques-fluido .cartao-produto .overlay-container {
		padding: 20px;
	}
	.destaques-fluido .cartao-produto .cartao-corpo {
		padding: 6px 20px 20px;
	}
	.destaques-fluido .cartao-produto .cartao-titulo a {
		font-size: 15px;
	}
	.destaques-fluido .cartao-produto .cartao-preco .h4 {
		font-size: 20px;
	}
}

/* ---------- pagina de produto ---------- */

.caixa-compra {
	background: var(--branco);
	border: 1px solid var(--cinza-linha);
	border-radius: var(--raio);
	padding: 20px;
	margin-bottom: 24px;
}
.caixa-compra .preco-produto .h1 {
	font-family: "Inter", sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--preto);
	font-variant-numeric: tabular-nums;
}
.caixa-compra .preco-produto {
	color: var(--cinza-texto) !important;
	margin-bottom: 12px;
}
.caixa-compra .estado-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 16px !important;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	font-size: 13px;
}
.caixa-compra .estado-stock.alert-success {
	background: var(--verde-suave);
	color: #3d5a10;
}
.caixa-compra .estado-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
.caixa-compra .button {
	width: 100%;
	float: none !important;
	margin-right: 0 !important;
}
.caixa-compra .form-group {
	width: 100%;
	float: none !important;
	margin-right: 0 !important;
	padding: 0 15px;
}
.caixa-compra .input-group-addon {
	border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
	background: var(--cinza-fundo);
	border-color: var(--cinza-linha);
}
.caixa-compra .input-group .form-control {
	border-radius: var(--raio-pequeno) 0 0 var(--raio-pequeno);
}
.garantias-compra {
	list-style: none;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--cinza-linha);
}
.garantias-compra li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cinza-texto);
	margin-bottom: 8px;
}
.garantias-compra li:last-child {
	margin-bottom: 0;
}
.garantias-compra .fa {
	color: var(--preto);
	width: 16px;
	text-align: center;
}
.garantias-compra a {
	color: var(--preto);
	font-weight: 600;
}

/* tamanhos em botoes */
.escolha-tamanho {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}
.escolha-tamanho legend {
	margin-bottom: 8px;
	border: 0;
	font-size: 14px;
	color: var(--cinza-texto);
}
.escolha-tamanho legend b {
	color: var(--preto);
}
.opcoes-tamanho {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.opcao-tamanho {
	position: relative;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}
.opcao-tamanho input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.opcao-tamanho span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--cinza-linha);
	border-radius: var(--raio-pequeno);
	background: var(--branco);
	color: var(--grafite);
	font-size: 14px;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.opcao-tamanho:active span {
	transform: scale(0.96);
}
.opcao-tamanho input:checked + span {
	border-color: var(--preto);
	background: var(--preto);
	color: var(--branco);
}
.opcao-tamanho input:focus-visible + span {
	outline: 2px solid var(--verde);
	outline-offset: 2px;
}
.opcao-tamanho.sem-stock span {
	color: #9a9a95;
	text-decoration: line-through;
}
@media (hover: hover) and (pointer: fine) {
	.opcao-tamanho:hover span {
		border-color: var(--preto);
	}
}

/* descricao e ficha tecnica - mais compactas e legiveis */
.descricao-produto {
	max-width: 760px;
	font-size: 15px;
	line-height: 1.6;
}
.descricao-produto p {
	margin-bottom: 10px;
	line-height: 1.6;
}
.descricao-produto p:empty {
	display: none;
}
.descricao-produto u, .descricao-produto h2, .descricao-produto h3, .descricao-produto h4 {
	display: inline-block;
	margin-top: 18px;
}

/* barra de compra fixa no telemovel (aparece quando o botao principal sai do ecra) */
.barra-compra-movel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: var(--branco);
	border-top: 1px solid var(--cinza-linha);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(110%);
	transition: transform 240ms var(--ease-out);
}
.barra-compra-movel.visivel {
	transform: translateY(0);
}
.barra-compra-movel .preco {
	flex: 0 0 auto;
	font-weight: 800;
	font-size: 18px;
	color: var(--preto);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.barra-compra-movel .preco small {
	display: block;
	font-weight: 500;
	font-size: 11px;
	color: var(--cinza-texto);
}
.barra-compra-movel .button {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0 10px;
}
@media (min-width: 768px) {
	.barra-compra-movel {
		display: none;
	}
}

/* ---------- a minha mota ---------- */

.seletor-mota-campos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.seletor-mota-campo {
	display: block;
	margin: 0;
	font-weight: 600;
}
.seletor-mota-campo span {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cinza-texto);
}
.seletor-mota-campo .form-control {
	height: 46px;
}
.seletor-mota-campo .form-control:disabled {
	background: var(--cinza-fundo);
	cursor: not-allowed;
}
.seletor-mota-acoes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}
.seletor-mota-acoes .button[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}
.seletor-mota-esquecer {
	background: none;
	border: 0;
	padding: 0;
	color: var(--cinza-texto);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.seletor-mota-esquecer:hover {
	color: var(--preto);
}
.seletor-mota.a-carregar {
	cursor: progress;
}
.modal-minha-mota .seletor-mota-campos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modal-minha-mota .seletor-mota-acoes .button {
	flex: 1 1 auto;
}
.modal-minha-mota .modal-title {
	font-size: 20px;
}
.modal-content {
	border: 0;
	border-radius: var(--raio);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
	.seletor-mota-campos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.seletor-mota-acoes .button {
		flex: 1 1 100%;
	}
}
/* icone no cabecalho - ponto verde quando ha mota guardada */
.link-minha-mota, #motaxs {
	position: relative;
}
.link-minha-mota.tem-mota::after, #motaxs.tem-mota::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--verde);
	box-shadow: 0 0 0 2px #000000;
}
.link-minha-mota.tem-mota .fa, #motaxs.tem-mota .fa {
	color: var(--verde);
}

/* bloco da home */
.bloco-minha-mota {
	padding: 40px 0 8px;
}
.bloco-minha-mota .cartao-seletor {
	background: var(--preto);
	color: var(--branco);
	border-radius: var(--raio);
	padding: 28px;
}
.bloco-minha-mota h2 {
	color: var(--verde);
	margin-bottom: 6px;
}
.bloco-minha-mota .subtitulo {
	color: #c9c9c4;
	margin-bottom: 20px;
	font-size: 15px;
}
.bloco-minha-mota .seletor-mota-campo span {
	color: #a9a9a3;
}
.bloco-minha-mota .seletor-mota-esquecer {
	color: #c9c9c4;
}
.bloco-minha-mota .seletor-mota-campo .form-control:disabled {
	background: #1f1f1e;
	border-color: #2c2c2a;
	color: #77776f;
}
@media (max-width: 767px) {
	.bloco-minha-mota {
		padding: 24px 0 0;
	}
	.bloco-minha-mota .cartao-seletor {
		padding: 20px 16px;
	}
}

/* compatibilidade na pagina de produto */
.compatibilidade {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: var(--raio-pequeno);
	font-size: 13.5px;
	line-height: 1.45;
}
.compatibilidade .fa {
	margin-top: 2px;
	font-size: 16px;
}
.compatibilidade.sim {
	background: var(--verde-suave);
	color: #2f4708;
}
.compatibilidade.nao {
	background: #fbf3e6;
	color: #6b4a12;
}
.compatibilidade.verificar {
	background: var(--cinza-fundo);
	color: var(--grafite);
}
.compatibilidade a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- carrinho ---------- */

.tabela-carrinho .color-green {
	color: var(--preto) !important;
	font-variant-numeric: tabular-nums;
}
.tabela-carrinho .a-color-red-red .fa {
	font-size: 18px;
	color: var(--cinza-texto);
	transition: color 150ms ease;
}
.tabela-carrinho .a-color-red-red a:hover .fa {
	color: #c0392b;
}
@media (max-width: 767px) {
	/* cada linha passa a cartao: imagem | nome + preco, e por baixo quantidade | subtotal */
	.table-responsive:has(> .tabela-carrinho) {
		overflow: visible;
		border: 0;
	}
	.tabela-carrinho thead {
		display: none;
	}
	.tabela-carrinho, .tabela-carrinho tbody {
		display: block;
	}
	.tabela-carrinho tbody tr {
		position: relative;
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas: "img titulo" "img preco" "qtd qtd";
		gap: 6px 12px;
		padding: 14px 40px 14px 14px;
		margin-bottom: 10px;
		background: var(--branco);
		border: 1px solid var(--cinza-linha);
		border-radius: var(--raio);
	}
	.tabela-carrinho tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
	}
	.tabela-carrinho tbody td:nth-child(1) {
		position: absolute;
		top: 12px;
		right: 12px;
	}
	.tabela-carrinho tbody td:nth-child(2) {
		grid-area: img;
	}
	.tabela-carrinho tbody td:nth-child(2) img {
		width: 64px;
		height: 64px;
	}
	.tabela-carrinho tbody td:nth-child(3) {
		grid-area: titulo;
		min-width: 0;
		font-size: 14px;
		line-height: 1.35;
		white-space: normal;
		overflow-wrap: break-word; /* so parte palavras que nao cabem (ex: urls longos) */
	}
	.tabela-carrinho, .tabela-carrinho tbody tr {
		width: 100%;
		max-width: 100%;
	}
	.tabela-carrinho tbody td, .tabela-carrinho tbody td * {
		white-space: normal !important; /* o bootstrap poe nowrap nas tabelas responsivas */
	}
	.tabela-carrinho tbody td:nth-child(4) {
		grid-area: preco;
	}
	.tabela-carrinho tbody td:nth-child(4) p, .tabela-carrinho tbody td:nth-child(6) p {
		text-align: left !important;
		font-size: 14px;
	}
	.tabela-carrinho tbody td:nth-child(4) small, .tabela-carrinho tbody td:nth-child(6) small {
		float: none !important;
		display: block;
		color: var(--cinza-texto);
	}
	.tabela-carrinho tbody td:nth-child(5) {
		grid-area: qtd;
		align-self: center;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 6px;
	}
	.tabela-carrinho tbody td:nth-child(5) .input-group {
		display: flex;
		width: 120px;
	}
	.tabela-carrinho tbody td:nth-child(5) .input-group .form-control {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
	.tabela-carrinho tbody td:nth-child(5) .input-group-addon {
		display: flex;
		align-items: center;
		width: auto;
	}
	.tabela-carrinho tbody td:nth-child(5) .col-xs-12 {
		padding: 0;
	}
	.tabela-carrinho tbody td:nth-child(5) .row {
		margin: 0;
	}
	.tabela-carrinho tbody td:nth-child(5) .form-group {
		margin: 0;
	}
	.tabela-carrinho tbody td:nth-child(5) .form-control {
		height: 40px;
		max-width: 80px;
	}
	.tabela-carrinho tbody td:nth-child(6) {
		position: absolute;
		right: 14px;
		bottom: 16px;
		text-align: right;
	}
	.tabela-carrinho tbody td:nth-child(6) p {
		text-align: right !important;
		font-size: 16px;
	}
	.tabela-carrinho tbody td:nth-child(6) small {
		text-align: right;
	}
}

/* ---------- aviso de cookies (mais discreto em mobile) ---------- */

.cc-window.cc-floating {
	max-width: 380px !important;
	border-radius: var(--raio) !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	font-family: "Inter", sans-serif !important;
	font-size: 13px !important;
	padding: 16px !important;
}
.cc-window .cc-btn {
	border-radius: var(--raio-pequeno);
	font-size: 13px !important;
	padding: 8px 12px !important;
}
@media (max-width: 767px) {
	.cc-window.cc-floating {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;
		max-width: none !important;
		padding: 12px 14px !important;
		flex-direction: row !important;
		align-items: center;
		gap: 12px;
	}
	.cc-window .cc-message {
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.4;
	}
	.cc-window .cc-compliance {
		flex: 0 0 auto;
	}
}

/* ---------- entradas ao scroll (aos) - so em seccoes de marketing; entrada curta, sem encolher ---------- */
[data-aos="zoom-in-up"] {
	transform: translate3d(0, 16px, 0);
}
/* se o javascript nao correr (erro, bloqueado, ainda a carregar), o conteudo nunca fica invisivel */
html:not(.aos-ativo) [data-aos] {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- newsletter (faixa por cima do rodape, em todas as paginas) ---------- */

.faixa-newsletter {
	background: var(--verde);
	color: var(--preto);
	padding: clamp(32px, 5vw, 56px) 0;
}
/* aqui nao ha container-fluid exterior: a margem lateral total vai toda neste */
.faixa-newsletter > .rodape-fluido {
	padding-left: clamp(16px, 3vw, 48px);
	padding-right: clamp(16px, 3vw, 48px);
}
.faixa-newsletter-grelha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px 64px;
	align-items: center;
}
.faixa-newsletter-etiqueta {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.faixa-newsletter-titulo {
	margin: 0 0 8px;
	font-family: "Orbitron", sans-serif;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.2;
	color: var(--preto);
	text-wrap: balance;
}
.faixa-newsletter-descricao {
	margin: 0;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(11, 11, 11, 0.78);
}
.faixa-newsletter-campo {
	display: flex;
	gap: 8px;
}
.faixa-newsletter-campo input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--preto);
	border-radius: var(--raio-pequeno);
	background: var(--branco);
	color: var(--preto);
	font-size: 16px; /* 16px evita o zoom automatico no iOS */
}
.faixa-newsletter-campo input[type="email"]:focus {
	outline: 2px solid var(--preto);
	outline-offset: 1px;
}
.faixa-newsletter-campo .button {
	min-height: 48px;
	flex: 0 0 auto;
}
.faixa-newsletter .button-black-green:hover, .faixa-newsletter .button-black-green:focus-visible {
	background-color: var(--grafite);
	border-color: var(--grafite);
	color: var(--verde);
}
.faixa-newsletter .button:focus-visible {
	outline-color: var(--preto);
}
.faixa-newsletter .button[disabled] {
	opacity: 0.7;
	cursor: progress;
}
.faixa-newsletter-consentimento {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}
.faixa-newsletter-consentimento input {
	margin: 2px 0 0;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--preto);
}
.faixa-newsletter-consentimento a {
	color: var(--preto);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.faixa-newsletter-mensagem {
	margin: 10px 0 0;
	min-height: 1.4em;
	font-size: 14px;
	font-weight: 600;
}
.faixa-newsletter-mensagem:empty {
	min-height: 0;
	margin: 0;
}
.faixa-newsletter-mensagem.sucesso::before {
	content: "\f00c";
	font-family: "FontAwesome";
	margin-right: 6px;
}
.faixa-newsletter-mensagem.erro {
	color: #7a0b0b;
}
/* isco para bots: fora do ecra, nunca visivel nem focavel */
.faixa-newsletter-isco {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
@media (max-width: 991px) {
	.faixa-newsletter-grelha {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 479px) {
	.faixa-newsletter-campo {
		flex-direction: column;
	}
	.faixa-newsletter-campo .button {
		width: 100%;
	}
}

/* ---------- listagens da loja a toda a largura ---------- */

/* mesma margem lateral do cabecalho e do rodape */
.loja-fluida {
	padding-left: clamp(16px, 3vw, 48px);
	padding-right: clamp(16px, 3vw, 48px);
}
/* em ecras largos a coluna de filtros fica com largura fixa e a grelha ocupa o resto
   (com 25% os filtros ficavam enormes); o push/pull do bootstrap passa a usar a mesma medida */
@media (min-width: 1200px) {
	.loja-fluida .loja-lateral {
		width: 300px;
		right: calc(100% - 300px);
	}
	.loja-fluida .loja-corpo {
		width: calc(100% - 300px);
		left: 300px;
	}
}
/* 20 produtos por pagina: 4 por linha e 5 a partir de 1600px (linhas sempre completas) */
@media (min-width: 1600px) {
	.loja-fluida .loja-lateral {
		width: 320px;
		right: calc(100% - 320px);
	}
	.loja-fluida .loja-corpo {
		width: calc(100% - 320px);
		left: 320px;
	}
	.loja-fluida .grelha-produtos > [class*="col-lg-3"] {
		width: 20%;
	}
}

/* filtro de marcas nas categorias sem marcas de pecas (motos novas): links com aspeto de checkbox */
.filtro-marca-categoria {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	color: var(--grafite);
	text-decoration: none !important;
}
.filtro-marca-categoria input {
	margin: 0;
	pointer-events: none;
}
.filtro-marca-categoria:hover, .filtro-marca-categoria:focus-visible {
	color: var(--verde-escuro);
}
.filtro-marca-total {
	color: var(--cinza-texto);
	font-size: 12px;
}

/* produtos relacionados: mesmo cinza escuro da barra de confianca */
.relacionados-escuro {
	background: #141413;
	color: var(--branco);
}
.relacionados-escuro .overlay-container:hover .overlay {
	background-color: var(--verde);
	opacity: 0.25;
}

/* sugestoes da pesquisa no telemovel: por baixo do campo, a toda a largura */
#resultados-movel {
	display: none;
}
@media (max-width: 767px) {
	#resultados-movel {
		top: 50px;
		left: 12px;
		right: 12px;
		width: auto;
		max-height: 65vh;
	}
	.pesquisa-movel .form-control {
		font-size: 16px; /* 16px evita o zoom automatico do iOS ao focar */
	}
}

/* menu do telemovel: sem a pesquisa (ha o campo por baixo do cabecalho) nem a "minha mota" (ha o icone no topo) */
@media (max-width: 767px) {
	.navbar-nav > .menu-so-largo {
		display: none !important;
	}
}

/* telemovel: area cliente e idioma no topo, ao lado da mota e do carrinho (fora do menu) */
#contaxs, .idiomaxs {
	display: none;
}
@media (max-width: 767px) {
	#contaxs, .idiomaxs {
		display: block;
		color: var(--branco);
		text-decoration: none;
	}
	#contaxs:hover, #contaxs:focus-visible, .idiomaxs:hover, .idiomaxs:focus-visible {
		color: var(--verde);
	}
	.idiomaxs {
		font-family: "Inter", sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: 18px;
		min-width: 34px;
		text-align: center;
	}
	.idiomaxs::before { /* globo pequeno antes do codigo */
		content: "\f0ac";
		font-family: "FontAwesome";
		font-weight: 400;
		margin-right: 4px;
	}
}
/* menu hamburguer: 3 barras de 2px, mais largo que o icone antigo */
.hamburguer {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 16px;
	vertical-align: middle;
}
.hamburguer span {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}
@media (max-width: 767px) {
	/* logotipo + 5 atalhos numa so linha, todos com a mesma largura e o conteudo centrado (espacamento igual) */
	#navbarcontainer > .navbar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		min-width: 0;
		height: 44px;
		margin: 13px 0 0;
		padding: 0;
	}
	#navbarcontainer > #navbarxs {
		width: 34px; /* como os outros: o espaco entre icones fica igual */
		margin-right: -5px; /* as barras acabam na mesma margem (16px) em que o logotipo comeca */
	}
	#navbarcontainer {
		margin-right: 0; /* o hamburguer fica alinhado com a margem do campo de pesquisa */
	}
	#logo {
		height: 24px;
	}
	#cartxs .badge {
		top: 3px;
		right: 0;
	}
	.idiomaxs::before {
		display: none;
	}
}
@media (max-width: 374px) {
	#logo {
		height: 20px;
	}
	#navbarcontainer .navbar-brand {
		padding-left: 8px;
	}
	#navbarcontainer > .navbar-toggle {
		width: 30px;
	}
	#navbarcontainer > #navbarxs {
		width: 34px;
	}
}

/* ---------- menu lateral (offcanvas a direita) abaixo de 1200px ---------- */

.menu-topo, .menu-fundo {
	display: none;
}
@media (max-width: 1199px) {
	#navbar.navbar-collapse {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1;
		display: block !important;
		width: min(86vw, 360px);
		height: 100% !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 20px 32px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--preto);
		border: 0;
		border-left: 1px solid #222220;
		box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 320ms;
	}
	#navbar.navbar-collapse.aberto {
		visibility: visible;
		transform: none;
		transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
	}
	.menu-topo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70px;
		margin-bottom: 8px;
		border-bottom: 1px solid #222220;
		color: var(--verde);
		font-family: "Orbitron", sans-serif;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.menu-fechar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--branco);
		font-family: "Inter", sans-serif;
		font-size: 32px;
		font-weight: 300;
		line-height: 1;
		transition: color 150ms ease, transform 160ms var(--ease-out);
	}
	.menu-fechar:hover, .menu-fechar:focus-visible {
		color: var(--verde);
	}
	.menu-fechar:active {
		transform: scale(0.92);
	}
	#navbar .navbar-nav {
		float: none;
		margin: 0;
	}
	#navbar .navbar-nav > li {
		float: none;
		border-bottom: 1px solid #1c1c1a;
	}
	#navbar .navbar-nav > li > a {
		padding: 16px 0 !important;
		font-size: 14px;
	}
	#navbar .navbar-nav > li > a .fa {
		margin-top: 0 !important;
	}
	/* tablet: a pesquisa dentro do painel ocupa a largura toda */
	#navbar #form-pesquisa {
		padding: 12px 0;
	}
	#navbar #pesquisa {
		width: 100% !important;
		margin: 0 !important;
	}
	#navbar #resultados {
		width: 100%;
	}
	/* fundo escurecido por baixo do cabecalho (o painel fica por cima, dentro do cabecalho fixo) */
	.menu-fundo {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1029;
		background: rgba(0, 0, 0, 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 240ms ease;
	}
	body.menu-aberto .menu-fundo {
		opacity: 1;
		pointer-events: auto;
	}
	body.menu-aberto {
		overflow: hidden;
	}
}
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
	#navbar.navbar-collapse, #navbar.navbar-collapse.aberto, .menu-fundo {
		transition: none;
	}
}

/* menu lateral: categorias expostas e marcas de pecas num dropdown proprio (o mega menu "loja online" fica so no desktop) */
.navbar-nav > .menu-so-movel {
	display: none;
}
@media (max-width: 1199px) {
	.navbar-nav > .menu-so-desktop {
		display: none !important;
	}
	.navbar-nav > .menu-so-movel {
		display: block;
	}
	.menu-secao {
		padding: 16px 0 10px;
	}
	.menu-secao-titulo {
		margin: 0 0 6px;
		color: var(--verde);
		font-family: "Orbitron", sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.menu-secao-lista, #navbar .menu-marcas {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#navbar .menu-secao-lista a, #navbar .menu-marcas > li > a {
		display: block;
		padding: 9px 0 !important;
		color: #e9e9e4 !important;
		font-family: "Inter", sans-serif !important;
		font-size: 15px !important;
		font-weight: 400;
		letter-spacing: 0 !important;
		text-transform: none !important;
		text-decoration: none;
		white-space: normal;
		background: none !important;
	}
	#navbar .menu-secao-lista a:hover, #navbar .menu-secao-lista a:focus-visible,
	#navbar .menu-marcas > li > a:hover, #navbar .menu-marcas > li > a:focus-visible {
		color: var(--verde) !important;
	}
	#navbar .menu-secao-lista .menu-ver-tudo {
		color: var(--verde) !important;
		font-weight: 600;
	}
	/* marcas: lista recolhida que abre por baixo do titulo, em 2 colunas */
	#navbar .menu-marcas {
		position: static;
		float: none;
		display: none;
		padding: 0 0 12px !important;
		background: none !important;
		border: 0;
		box-shadow: none;
		opacity: 1;
		column-count: 2;
		column-gap: 16px;
	}
	#navbar .open > .menu-marcas {
		display: block;
	}
	#navbar .menu-marcas > li {
		break-inside: avoid;
	}
	#navbar .menu-marcas > li > a {
		min-width: 0 !important;
		padding: 7px 0 !important;
		font-size: 14px !important;
	}
}


/* ---------- foco: so visivel na navegacao por teclado ----------
   o clique com o rato ou o toque deixam de mostrar o contorno (ex: logotipo depois de clicado);
   com a tecla Tab o contorno continua visivel (acessibilidade). os campos de texto mantem sempre o seu estado de foco */
:focus:not(:focus-visible) {
	outline: none !important;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible), .btn:focus:not(:focus-visible), .navbar-toggle:focus:not(:focus-visible) {
	box-shadow: none;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="checkbox"]:focus-visible, [tabindex]:focus-visible,
.navbar-toggle:focus-visible, .navbar-brand:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
select:focus-visible, summary:focus-visible {
	outline: 2px solid var(--verde) !important;
	outline-offset: 2px;
}
/* sobre fundo verde o contorno verde nao se ve */
.faixa-newsletter a:focus-visible, .faixa-newsletter button:focus-visible, .faixa-newsletter input[type="checkbox"]:focus-visible,
.button-green-green:focus-visible, .button-green-black:focus-visible, .button-green-white:focus-visible {
	outline-color: var(--preto) !important;
}
/* o tema antigo pinta de verde o icone do cabecalho em :focus - depois de um toque ficava verde; so no teclado */
.navbar-default .navbar-toggle:focus:not(:focus-visible):not(:hover) {
	color: var(--branco);
}

/* modal do carrinho: miniatura do produto e nome com link */
.tabela-modal-carrinho > tbody > tr > td {
	vertical-align: middle;
}
.tabela-modal-carrinho .carrinho-thumb {
	width: 60px;
	padding-right: 4px;
}
.tabela-modal-carrinho .carrinho-thumb img, .carrinho-thumb-vazio {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: var(--branco);
	border: 1px solid var(--cinza-linha);
	border-radius: var(--raio-pequeno);
}
.carrinho-thumb-vazio {
	background: var(--cinza-fundo);
}
.tabela-modal-carrinho .carrinho-nome {
	color: var(--grafite);
	text-decoration: none;
}
.tabela-modal-carrinho .carrinho-nome:hover, .tabela-modal-carrinho .carrinho-nome:focus-visible {
	color: var(--verde-escuro);
}
@media (max-width: 767px) {
	/* no telemovel o preco unitario sai (fica o subtotal) para a tabela caber */
	.tabela-modal-carrinho td:nth-child(4) {
		display: none;
	}
	.tabela-modal-carrinho > thead > tr > td, .tabela-modal-carrinho > tbody > tr > td {
		padding-left: 4px;
		padding-right: 4px;
		font-size: 13px;
	}
	.tabela-modal-carrinho .carrinho-thumb {
		width: 52px;
	}
}
/* modal do carrinho: resumo subtotal / iva / total */
.carrinho-resumo-bloco {
	margin: 0 0 4px;
	padding: 12px 8px 0;
	border-top: 1px solid var(--cinza-linha);
}
.carrinho-resumo-bloco > div {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 24px;
	padding: 3px 0;
	color: var(--cinza-texto);
}
.carrinho-resumo-bloco dt {
	font-weight: 400;
}
.carrinho-resumo-bloco dd {
	min-width: 90px;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}
.carrinho-resumo-bloco .carrinho-resumo-total {
	margin-top: 6px;
	padding-top: 8px;
	color: var(--preto);
	font-size: 17px;
	font-weight: 700;
}
.carrinho-resumo-bloco .carrinho-resumo-total dt {
	font-weight: 700;
	text-transform: uppercase;
}
.carrinho-resumo-nota {
	margin: 8px 8px 0;
	color: var(--cinza-texto);
	font-size: 12px;
	text-align: right;
}
/* valores em euros nunca partem em duas linhas */
.tabela-modal-carrinho td.text-right:last-child {
	white-space: nowrap;
}

/* modal do carrinho mais largo no desktop (o bootstrap fixa 600px) */
@media (min-width: 992px) {
	#ModalCarrinho .modal-dialog {
		width: 760px;
	}
}

/* ---------- modais em painel lateral (offcanvas) a direita no telemovel: carrinho e pedido de peca ----------
   o mesmo modal do bootstrap; muda so a apresentacao abaixo de 768px (mesma curva e duracao do menu) */
@media (max-width: 767px) {
	.modal-lateral-movel {
		margin-top: 0 !important;
		padding: 0 !important;
		overflow: hidden;
	}
	.modal-lateral-movel .modal-dialog {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(92vw, 400px);
		margin: 0;
		transform: translateX(100%);
		transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
	}
	.modal-lateral-movel.in .modal-dialog {
		transform: none;
	}
	.modal-lateral-movel .modal-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		border: 0;
		border-radius: 0;
		box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
	}
	.modal-lateral-movel .modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;
		min-height: 64px;
		padding: 12px 16px;
	}
	/* o clearfix do bootstrap (::before/::after) contava como itens do flex e centrava o titulo */
	.modal-lateral-movel .modal-header::before, .modal-lateral-movel .modal-header::after,
	.modal-lateral-movel .modal-footer::before, .modal-lateral-movel .modal-footer::after {
		display: none;
	}
	.modal-lateral-movel .modal-header .close {
		margin: 0;
		font-size: 30px;
		opacity: 0.7;
	}
	.modal-lateral-movel .modal-body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 16px;
	}
	/* botoes sempre visiveis no fundo do painel */
	.modal-lateral-movel .modal-footer {
		display: flex;
		flex-direction: column-reverse;
		gap: 8px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--cinza-linha);
		background: var(--branco);
	}
	.modal-lateral-movel .modal-footer .button {
		width: 100%;
		margin: 0 !important;
	}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.modal-lateral-movel .modal-dialog {
		transition: none;
	}
}


/* ---------- desempenho: espaco reservado dos carrosseis antes do slick arrancar (CLS) ----------
   o slick esconde os slides ate iniciar (no fim da pagina) e o carrossel ganhava altura de repente, empurrando o resto.
   antes de iniciar mostra ja os primeiros slides na mesma disposicao final */
.slider-marcas-motas:not(.slick-initialized), .slider-marcas:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}
.slider-marcas-motas:not(.slick-initialized) > .slide {
	flex: 0 0 calc(100% / min(var(--marcas, 4), 4));
	min-width: 0;
}
.slider-marcas:not(.slick-initialized) > .slide {
	flex: 0 0 calc(100% / 8 - 30px);
	margin: 0 15px;
	min-width: 0;
}
@media (max-width: 1023px) {
	.slider-marcas-motas:not(.slick-initialized) > .slide {
		flex-basis: calc(100% / min(var(--marcas, 3), 3));
	}
	.slider-marcas:not(.slick-initialized) > .slide {
		flex-basis: calc(100% / 5 - 30px);
	}
}
@media (max-width: 767px) {
	.slider-marcas-motas:not(.slick-initialized) > .slide {
		flex-basis: calc(100% / min(var(--marcas, 2), 2));
	}
	.slider-marcas:not(.slick-initialized) > .slide {
		flex-basis: calc(100% / 3 - 30px);
	}
}
/* as imagens com width/height no html mantem a proporcao */
.marca-moto-card img, .slider-marcas img {
	height: auto;
}

/* ---------- acessibilidade: contraste ----------
   titulos verdes sobre fundo claro: verde da marca mais escuro (4,3-4,7:1; o #9ccb3e dava 1,7:1). sobre preto mantem o verde original */
:root {
	--verde-texto: #5f7d22;
}
h1.color-green, h2.color-green {
	color: var(--verde-texto);
}
.bgcolor-black h1.color-green, .bgcolor-black h2.color-green, .relacionados-escuro .color-green, .carousel h1.color-green, .carousel h2.color-green {
	color: var(--verde);
}
/* faixas verdes (call to action, redes sociais): texto preto em vez de branco (branco sobre verde = 1,9:1) */
.bgcolor-green .color-white, .bgcolor-green .a-color-white-black a {
	color: var(--preto) !important;
}
.bgcolor-green .a-color-white-black a:hover, .bgcolor-green .a-color-white-black a:focus-visible {
	color: var(--branco) !important;
}

/* ---------- acessibilidade: areas de toque (minimo 24px) nos nomes dos produtos dos cartoes ---------- */
.cartao-produto .cartao-titulo a {
	display: inline-block;
	min-height: 24px;
	padding: 2px 0;
}

/* ---------- pagina de produto ---------- */
/* galeria: espaco ate a caixa de compra quando ficam empilhadas (telemovel/tablet) */
@media (max-width: 991px) {
	.galeria-produto {
		margin-bottom: 16px;
	}
}
/* descricao vinda do editor do backoffice: indentacoes guardadas como margin-left (ex: 40px) e larguras fixas
   tiravam espaco e partiam o texto no telemovel - neutralizar sem mexer nos textos da base de dados */
.descricao-produto [style*="margin-left"], .descricao-produto [style*="padding-left"] {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.descricao-produto img, .descricao-produto iframe, .descricao-produto video, .descricao-produto table {
	max-width: 100% !important;
	height: auto;
}
.descricao-produto {
	overflow-wrap: break-word; /* so parte palavras que nao cabem (ex: urls longos) */
}

/* rodape: faixa verde final com o mesmo espaco em cima e em baixo (antes havia +80px vazios no telemovel) */
.rodape-base {
	padding-top: 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.rodape-base .list-inline {
	margin: 0;
}
.rodape-base .list-inline > li {
	padding-top: 2px;
	padding-bottom: 2px;
}
/* pagina de produto no telemovel: a barra de compra fixa pode tapar o fundo - reservar a altura dela */
@media (max-width: 767px) {
	body:has(.barra-compra-movel) .rodape-base {
		padding-bottom: calc(20px + 72px + env(safe-area-inset-bottom));
	}
}

/* destaques da home: 16 produtos - no desktop (5 por linha) o 16.o fica de fora para as 3 linhas ficarem completas */
@media (min-width: 992px) {
	.destaques-fluido .destaque-so-movel {
		display: none !important;
	}
}

/* ---------- pedido de peca: call to action ---------- */
.cta-peca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px 40px;
	align-items: center;
	margin: 24px 0 48px;
	padding: clamp(20px, 3vw, 32px);
	background: var(--preto);
	color: var(--branco);
	border-radius: var(--raio);
	border-left: 4px solid var(--verde);
}
.cta-peca-etiqueta {
	margin: 0 0 6px;
	color: var(--verde);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.cta-peca-titulo {
	margin: 0 0 8px;
	color: var(--branco);
	font-family: "Orbitron", sans-serif;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.25;
	text-transform: none;
	text-wrap: balance;
}
.cta-peca-descricao {
	margin: 0;
	max-width: 70ch;
	color: #cfcfca;
	font-size: 15px;
	line-height: 1.55;
}
.cta-peca-acoes {
	text-align: center;
}
.cta-peca-acoes .button {
	min-width: 220px;
}
.cta-peca-nota {
	margin: 8px 0 0;
	color: #a9a9a3;
	font-size: 12px;
}
.cta-peca-sem-resultados {
	margin-top: 8px;
}
@media (max-width: 767px) {
	.cta-peca {
		grid-template-columns: 1fr;
	}
	.cta-peca-acoes .button {
		width: 100%;
	}
}
/* variante compacta (pagina de produto, dentro da caixa de compra) */
.cta-peca-compacto {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 16px 0 0;
	padding: 12px 14px;
	background: var(--verde-suave);
	color: var(--grafite);
	border: 0;
	border-radius: var(--raio-pequeno);
	font-size: 14px;
	line-height: 1.45;
}
.cta-peca-compacto > .fa {
	margin-top: 2px;
	color: var(--verde-texto);
	font-size: 18px;
}
.cta-peca-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--verde-texto);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cta-peca-link:hover, .cta-peca-link:focus-visible {
	color: var(--preto);
}

/* ---------- pedido de peca: formulario (modal; painel lateral no telemovel) ---------- */
@media (min-width: 992px) {
	#ModalPedidoPeca .modal-dialog {
		width: 720px;
	}
}
#ModalPedidoPeca .modal-body {
	padding-top: 8px;
}
.pedido-peca-intro {
	margin: 0 0 12px;
	color: var(--cinza-texto);
	font-size: 14px;
	line-height: 1.5;
}
.pedido-peca-grupo {
	margin: 0 0 16px;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid var(--cinza-linha);
}
.pedido-peca-grupo legend {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: var(--preto);
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pedido-peca-linha {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
	align-items: end;
}
.pedido-peca-campo {
	display: block;
	margin: 0 0 12px;
	font-weight: 400;
}
.pedido-peca-campo > span {
	display: block;
	margin-bottom: 4px;
	color: var(--grafite);
	font-size: 13px;
	font-weight: 600;
}
.pedido-peca-campo small {
	color: var(--cinza-texto);
	font-weight: 400;
}
.pedido-peca .form-control {
	font-size: 16px; /* evita o zoom automatico do iOS */
}
.pedido-peca-matricula input {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pedido-peca .seletor-mota-campos {
	margin-bottom: 4px;
}
.pedido-peca-fotos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0): o nome do ficheiro nao alarga a coluna */
	gap: 12px;
}
.pedido-peca-foto {
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 110px;
	margin: 0;
	padding: 14px 10px;
	border: 1.5px dashed #c9c9c2;
	border-radius: var(--raio-pequeno);
	background: var(--cinza-fundo);
	color: var(--grafite);
	font-weight: 400;
	text-align: center;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.pedido-peca-foto:hover, .pedido-peca-foto:focus-within {
	border-color: var(--verde-escuro);
	background: var(--verde-suave);
}
.pedido-peca-foto.tem-ficheiro {
	border-style: solid;
	border-color: var(--verde-escuro);
	background: var(--verde-suave);
}
.pedido-peca-foto input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.pedido-peca-foto .fa {
	color: var(--verde-texto);
	font-size: 22px;
}
.pedido-peca-foto-titulo {
	font-size: 13px;
	font-weight: 700;
}
.pedido-peca-foto-nome {
	max-width: 100%;
	overflow: hidden;
	color: var(--cinza-texto);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pedido-peca-ajuda {
	margin: 6px 0 10px;
	color: var(--cinza-texto);
	font-size: 12px;
}
.pedido-peca-opcao {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}
.pedido-peca-opcao input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--verde-escuro);
}
.pedido-peca-consentimento a {
	color: var(--verde-texto);
	text-decoration: underline;
}
.pedido-peca-mensagem {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
}
.pedido-peca-mensagem:empty {
	display: none;
}
.pedido-peca-mensagem.sucesso {
	padding: 10px 12px;
	background: var(--verde-suave);
	border-radius: var(--raio-pequeno);
	color: #2f4510;
}
.pedido-peca-mensagem.erro {
	color: #a01212;
}
#ModalPedidoPeca .modal-footer .button[disabled] {
	opacity: 0.6;
	cursor: progress;
}
@media (max-width: 767px) {
	.pedido-peca-linha {
		grid-template-columns: 1fr;
	}
}
/* seletor de mota dentro do pedido de peca: 2 colunas (o modal e estreito) */
.pedido-peca .seletor-mota-campos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 12px;
}
.pedido-peca .seletor-mota-campo span {
	color: var(--grafite);
}
/* home: linha de ajuda no bloco "pecas para a sua mota" (fundo escuro) */
.bloco-minha-mota-ajuda {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #cfcfca;
	font-size: 14px;
	line-height: 1.5;
}
.bloco-minha-mota-ajuda .fa {
	margin-right: 4px;
	color: var(--verde);
}
.bloco-minha-mota-ajuda .cta-peca-link {
	color: var(--verde);
}
.bloco-minha-mota-ajuda .cta-peca-link:hover, .bloco-minha-mota-ajuda .cta-peca-link:focus-visible {
	color: var(--branco);
}
/* painel lateral com <form> a envolver corpo + rodape (pedido de peca): o form tambem e coluna, para o corpo fazer scroll e os botoes ficarem no fundo */
@media (max-width: 767px) {
	.modal-lateral-movel .modal-content > form {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
}