/* ==========================================================================
   Vitrines em carrossel e títulos de seção (home e página do produto).
   ========================================================================== */

.home-carousel__head {
	display: flex;
	gap: var(--gv-space-4);
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--gv-space-6);
}

.home-title {
	min-width: 0;
	margin: 0;
	font-family: var(--gv-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gv-ink);
}

.carousel__nav {
	display: flex;
	flex: none;
	gap: var(--gv-space-2);
}

.carousel__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--gv-ink);
	background: var(--gv-white);
	border: 1px solid var(--gv-line-strong);
	border-radius: var(--gv-radius);
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.carousel__arrow:hover:not(:disabled) {
	color: var(--gv-white);
	background: var(--gv-ink);
	border-color: var(--gv-ink);
}

.carousel__arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

.carousel__arrow .gv-icon {
	width: 18px;
	height: 18px;
}

/* Trilho: 4 cards visíveis no desktop; itens esticados = mesma altura. */
.carousel__track {
	--carousel-gap: var(--gv-space-5);
	--carousel-cols: 4;

	display: grid;
	grid-auto-columns: calc((100% - (var(--carousel-cols) - 1) * var(--carousel-gap)) / var(--carousel-cols));
	grid-auto-flow: column;
	gap: var(--carousel-gap);
	align-items: stretch;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

/* Responsivo -------------------------------------------------------------- */

@media (max-width: 1120px) {
	.carousel__track {
		--carousel-cols: 3;
	}
}

@media (max-width: 767px) {
	.carousel__track {
		--carousel-gap: var(--gv-space-4);
		--carousel-cols: 2;
	}

	.home-title {
		font-size: 24px;
	}

	.home-carousel__head {
		margin-bottom: var(--gv-space-5);
	}
}

/* Celular: 1 card e um pedaço do próximo (mostra que dá para arrastar). */
@media (max-width: 479px) {
	.carousel__track {
		--carousel-cols: 1.2;
	}

	/* Setas continuam visíveis (além do arraste), um pouco menores. */
	.carousel__arrow {
		width: 40px;
		height: 40px;
	}

	.carousel__arrow .gv-icon {
		width: 16px;
		height: 16px;
	}
}