/* ==========================================================================
   Home — Carrosséis de produtos (Mais vendidos, Motos, Os mais pedidos)
   ========================================================================== */

.vruumy-bestsellers {
	padding: clamp(3rem, 7vw, 5rem) 0;
	border-top: 1px solid var(--vruumy-border);
}

.vruumy-bestsellers .vruumy-section-title {
	margin-bottom: 2rem;
}

.vruumy-bestsellers__carousel {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(3rem, 5vw, 4rem);
}

.vruumy-bestsellers__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: .5rem 0 1rem;
}

.vruumy-bestsellers__track::-webkit-scrollbar {
	display: none;
}

.vruumy-bestsellers__slide {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.vruumy-bestsellers__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--vruumy-border);
	background: var(--vruumy-gray);
	color: var(--vruumy-white);
	cursor: pointer;
	transition: border-color .25s var(--vruumy-ease), box-shadow .25s var(--vruumy-ease), background .25s var(--vruumy-ease);
	padding: 0;
	box-shadow: none;
}

.vruumy-bestsellers__arrow:hover {
	border-color: var(--vruumy-blue);
	box-shadow: var(--vruumy-glow-blue);
	background: var(--vruumy-gray);
	transform: translateY(-50%);
	opacity: 1;
}

.vruumy-bestsellers__arrow .vruumy-icon svg {
	width: 16px;
	height: 16px;
}

.vruumy-bestsellers__arrow--prev {
	left: .5rem;
}

.vruumy-bestsellers__arrow--prev .vruumy-icon {
	transform: rotate(180deg);
}

.vruumy-bestsellers__arrow--next {
	right: .5rem;
}

@media (max-width: 768px) {
	.vruumy-bestsellers__carousel {
		padding: 0 1.25rem;
	}

	.vruumy-bestsellers__slide {
		flex: 0 0 240px;
	}

	.vruumy-bestsellers__arrow {
		display: none;
	}
}

/* ==========================================================================
   Home — Seção Personalizações Exclusivas
   ========================================================================== */

.vruumy-home-pers {
	padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem) !important;
	text-align: center !important;
	border-top: 1px solid var(--vruumy-border) !important;
	box-sizing: border-box !important;
}

.vruumy-home-pers__kicker {
	font-family: var(--vruumy-font-heading);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--vruumy-blue);
	margin: 0 0 .5rem;
}

.vruumy-home-pers__title {
	font-family: var(--vruumy-font-heading);
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vruumy-white);
	margin: 0 0 .75rem;
}

.vruumy-home-pers__subtitle {
	font-size: .92rem;
	line-height: 1.65;
	color: var(--vruumy-text-muted);
	margin: 0 auto 3rem;
	max-width: 540px;
}

/* Grid de 2 cards — lado a lado no desktop */
.vruumy-home-pers__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: clamp(1.25rem, 3vw, 2rem) !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Card base */
.vruumy-home-pers__card {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 0 !important;
	border-radius: var(--vruumy-radius) !important;
	overflow: hidden !important;
	background: var(--vruumy-gray) !important;
	border: 1px solid var(--vruumy-border) !important;
	text-align: left !important;
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	transition: border-color .3s var(--vruumy-ease), box-shadow .3s var(--vruumy-ease);
}

.vruumy-home-pers__card--cyan {
	border-color: rgba(0, 178, 255, .3) !important;
	box-shadow: 0 0 30px rgba(0, 178, 255, .1), inset 0 0 30px rgba(0, 178, 255, .03);
}

.vruumy-home-pers__card--cyan:hover {
	border-color: rgba(0, 178, 255, .5) !important;
	box-shadow: 0 0 40px rgba(0, 178, 255, .18), inset 0 0 40px rgba(0, 178, 255, .05);
}

.vruumy-home-pers__card--pink {
	border-color: rgba(255, 45, 142, .3) !important;
	box-shadow: 0 0 30px rgba(255, 45, 142, .1), inset 0 0 30px rgba(255, 45, 142, .03);
}

.vruumy-home-pers__card--pink:hover {
	border-color: rgba(255, 45, 142, .5) !important;
	box-shadow: 0 0 40px rgba(255, 45, 142, .18), inset 0 0 40px rgba(255, 45, 142, .05);
}

/* Card body (texto) */
.vruumy-home-pers__card-body {
	flex: 1 1 55% !important;
	min-width: 0 !important;
	padding: clamp(1.25rem, 2vw, 1.75rem) !important;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
}

/* Badge label */
.vruumy-home-pers__badge {
	display: inline-block;
	font-family: var(--vruumy-font-heading);
	font-size: .55rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: .75rem;
	width: fit-content;
}

.vruumy-home-pers__badge--cyan { color: var(--vruumy-blue); }
.vruumy-home-pers__badge--pink { color: var(--vruumy-pink); }

/* Card title */
.vruumy-home-pers__card-title {
	font-family: var(--vruumy-font-heading);
	font-size: clamp(.85rem, 1.5vw, 1.15rem);
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vruumy-white);
	margin: 0 0 .4rem;
}

.vruumy-home-pers__card-text {
	font-size: .78rem;
	line-height: 1.6;
	color: var(--vruumy-text-muted);
	margin: 0 0 1rem;
}

/* Checklist */
.vruumy-home-pers__checks {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: .45rem !important;
}

.vruumy-home-pers__checks li {
	display: flex !important;
	align-items: center !important;
	gap: .5rem !important;
	font-size: .74rem !important;
	color: var(--vruumy-white) !important;
}

.vruumy-home-pers__card--cyan .vruumy-home-pers__checks .vruumy-icon {
	color: var(--vruumy-blue);
}

.vruumy-home-pers__card--pink .vruumy-home-pers__checks .vruumy-icon {
	color: var(--vruumy-pink);
}

.vruumy-home-pers__checks .vruumy-icon svg {
	width: 14px;
	height: 14px;
}

/* Card image */
.vruumy-home-pers__card-img {
	flex: 0 0 42% !important;
	max-width: 42% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: .75rem !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.vruumy-home-pers__card-img img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: 280px !important;
	object-fit: contain !important;
	border-radius: 10px !important;
}

/* ==========================================================================
   Responsivo — Tablet (769px–960px): 2 colunas, cards empilham texto/imagem
   ========================================================================== */
@media (max-width: 960px) and (min-width: 769px) {
	.vruumy-home-pers__grid {
		grid-template-columns: 1fr 1fr !important;
		max-width: 900px !important;
	}

	.vruumy-home-pers__card {
		flex-direction: column-reverse !important;
	}

	.vruumy-home-pers__card-img {
		flex: none !important;
		max-width: 100% !important;
		padding: 1rem 1rem 0 !important;
	}

	.vruumy-home-pers__card-img img {
		max-height: 200px !important;
	}
}

/* ==========================================================================
   Responsivo — Tablet pequeno (até 768px): 1 coluna
   ========================================================================== */
@media (max-width: 768px) {
	.vruumy-home-pers__grid {
		grid-template-columns: 1fr !important;
		max-width: 520px !important;
	}

	.vruumy-home-pers__card {
		flex-direction: row !important;
	}

	.vruumy-home-pers__card-img {
		flex: 0 0 40% !important;
		max-width: 40% !important;
	}
}

/* ==========================================================================
   Responsivo — Mobile (até 520px): 1 coluna, imagem em cima
   ========================================================================== */
@media (max-width: 520px) {
	.vruumy-home-pers {
		padding: 3rem 1rem !important;
	}

	.vruumy-home-pers__grid {
		max-width: 100% !important;
	}

	.vruumy-home-pers__card {
		flex-direction: column-reverse !important;
	}

	.vruumy-home-pers__card-img {
		flex: none !important;
		max-width: 100% !important;
		padding: 1rem 1rem 0 !important;
	}

	.vruumy-home-pers__card-img img {
		max-height: 180px !important;
	}

	.vruumy-home-pers__card-title {
		font-size: .85rem;
	}

	.vruumy-home-pers__checks li {
		font-size: .7rem !important;
	}
}