/* ---------------------------------------------------------------
   Shortcode [dc_marcas]: slider "Busque por Marcas" com os logos
   das marcas que têm ao menos 1 veículo publicado. Clicar numa
   marca leva para /veiculos/?busca={marca}, que já chega filtrado
   (ver DC_Shortcode::render_marcas() e assets/js/store.js).
   Loop infinito controlado em assets/js/dc-marcas.js (clona os
   itens nas pontas e "teleporta" o scroll sem transição visível
   ao cruzar as bordas).
------------------------------------------------------------------ */

.dc-marcas-shortcode {
	padding: 8px 0 !important;
}

.dc-marcas-title {
	margin: 0 0 22px !important;
	text-align: left !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--dc-secondary) !important;
}

.dc-marcas-slider-wrap {
	position: relative !important;
	padding: 0 62px 0 46px !important;
}

.dc-marcas-track {
	display: flex !important;
	align-items: flex-start !important;
	gap: 24px !important;
	overflow-x: auto !important;
	scroll-behavior: smooth;
	padding: 6px 0 10px !important;
	margin: 0 !important;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.dc-marcas-track::-webkit-scrollbar {
	display: none;
}

/* 6 marcas visíveis por vez (o restante fica fora, acessível via
   loop). O cálculo desconta os 5 espaços (gap) entre os 6 itens. */
.dc-marca-item {
	flex: 0 0 calc((100% - (24px * 5)) / 6) !important;
	max-width: calc((100% - (24px * 5)) / 6) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	transition: transform .15s ease;
}

.dc-marca-item:hover {
	transform: translateY(-3px) !important;
}

.dc-marca-item:hover .dc-marca-avatar {
	box-shadow: 0 12px 28px rgba(15, 23, 42, .1) !important;
}

.dc-marca-avatar {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100px !important;
	height: 100px !important;
	max-width: 100% !important;
	border-radius: 50% !important;
	background: var(--dc-bg) !important;
	border: 1px solid var(--dc-border) !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .1) !important;
	overflow: hidden !important;
}

.dc-marca-avatar img {
	width: 62% !important;
	height: 62% !important;
	object-fit: contain !important;
}

.dc-marca-avatar-fallback {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--dc-secondary) !important;
}

.dc-marca-name {
	margin-top: -16px !important;
	position: relative !important;
	z-index: 1 !important;
	background: var(--dc-secondary) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 5px 14px !important;
	border-radius: 999px !important;
	box-shadow: 0 3px 10px rgba(15, 23, 42, .18) !important;
	max-width: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.dc-marcas-nav {
	position: absolute !important;
	top: 50px !important;
	transform: translateY(-50%) !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: var(--dc-bg) !important;
	border: 1px solid var(--dc-border) !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--dc-secondary) !important;
	z-index: 2 !important;
	transition: border-color .15s ease, color .15s ease;
}

.dc-marcas-nav:hover {
	border-color: var(--dc-primary) !important;
	color: var(--dc-primary) !important;
}

.dc-marcas-nav svg {
	width: 17px !important;
	height: 17px !important;
}

.dc-marcas-prev {
	left: 0 !important;
}

.dc-marcas-next {
	right: 0 !important;
}

@media (max-width: 960px) {
	.dc-marca-item {
		flex: 0 0 calc((100% - (24px * 3)) / 4) !important;
		max-width: calc((100% - (24px * 3)) / 4) !important;
	}

	.dc-marcas-track {
		gap: 24px !important;
	}
}

@media (max-width: 640px) {
	/* Sem padding à esquerda: o avatar da primeira marca precisa
	   começar exatamente na mesma margem que o título "Busque por
	   Marcas" (e as demais seções da home), em vez de ficar recuado
	   8px mais pra dentro. */
	.dc-marcas-slider-wrap {
		padding: 0 8px 0 0 !important;
		margin: 0 0 0 -10px;
	}

	/* Sem as setinhas no mobile: o scroll por toque (swipe) já funciona
	   nativamente no .dc-marcas-track (overflow-x: auto), então os
	   botões só ocupavam espaço na tela sem serem necessários. */
	.dc-marcas-nav {
		display: none !important;
	}

	.dc-marca-item {
		flex: 0 0 116px !important;
		max-width: 116px !important;
		scroll-snap-align: start !important;
	}

	.dc-marcas-track {
		gap: 16px !important;
		scroll-snap-type: x proximity !important;
	}

	.dc-marca-avatar {
		width: 100px !important;
		height: 100px !important;
	}
}