/* ================================================
   HOME PAGE — Dedicated layout & components
   ================================================ */

/* ===== Value strip (below hero) ===== */
.hp-value-strip {
	background: #1a1510;
	border-bottom: 2px solid var(--primary);
}

.hp-value-strip-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

.hp-value-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	color: rgb(245 240 230 / 0.88);
	font-size: 13px;
	white-space: nowrap;
	position: relative;
}

.hp-value-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: rgb(255 255 255 / 0.14);
}

.hp-value-item i {
	color: var(--primary);
	flex-shrink: 0;
}

.hp-value-item strong {
	color: #ffffff;
	font-weight: 800;
}

@media (max-width: 768px) {
	.hp-value-strip-inner {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.hp-value-strip-inner::-webkit-scrollbar { display: none; }
	.hp-value-item { padding: 12px 22px; font-size: 12px; }
}


/* ===== Discover section (categories) ===== */
.hp-discover {
	padding: 48px 0 40px;
}

.hp-discover-main .hp-section-head {
	text-align: center;
}

.hp-discover-main .categories-grid {
	justify-content: center;
}

.hp-section-head {
	margin-bottom: 24px;
}

.hp-section-head--center {
	text-align: center;
}

.hp-kicker {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-weight: 700;
	color: var(--primary);
}

.hp-heading {
	margin: 0;
	font-family: "Playfair Display", serif;
	font-size: clamp(1.5rem, 1rem + 1.75vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--foreground);
}

.hp-heading--sm {
	font-size: 22px;
}

/* Categories carousel — horizontal scroll with prev/next arrows and
 * click-and-drag. When > 4 categories, the grid gets `--carousel` class
 * and the arrows un-hide. First card always flush-left at scroll=0;
 * last card peeks on the right as a hint. */
.categories-carousel {
	position: relative;
}

/* !important on justify-content: the parent rule
 * `.hp-discover-main .categories-grid { justify-content: center }` has
 * higher specificity (0,2,0) than this class alone (0,1,0), and centering
 * an overflowing flex row would push half the overflow to the LEFT,
 * chopping the first card. */
.categories-grid--carousel {
	display: flex !important;
	justify-content: flex-start !important;
	gap: 16px;
	overflow-x: auto;
	/* Explicit overflow-y: hidden so the vertical shadow of the cards
	 * doesn't create a vertical scroll area. Without this, the browser
	 * computes overflow-y as auto (matching overflow-x), and then mouse
	 * wheel events over the carousel are captured for vertical scrolling
	 * instead of bubbling up to the page. Padding below leaves breathing
	 * room so the shadow stays visible inside the clipping box. */
	overflow-y: hidden;
	padding: 4px 0 28px;
	margin-bottom: -14px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	user-select: none;
}

.categories-grid--carousel.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.categories-grid--carousel.is-dragging a {
	pointer-events: none;
}

.categories-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid #e4d8c8;
	background: #ffffff;
	color: #171411;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 6px 18px rgb(20 15 10 / 0.14);
	transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.categories-arrow:hover {
	transform: translateY(-50%) scale(1.05);
	border-color: rgb(var(--primary-rgb) / 0.45);
	background: rgb(var(--primary-rgb) / 0.08);
}

.categories-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.categories-arrow .icon {
	width: 22px;
	height: 22px;
}

.categories-arrow--prev {
	left: -8px;
}

.categories-arrow--next {
	right: -8px;
}

@media (hover: none) {
	/* Touch devices — use drag, hide arrows */
	.categories-arrow {
		display: none;
	}
}

.categories-grid--carousel::-webkit-scrollbar {
	display: none;
}

.categories-grid--carousel .category-card {
	flex: 0 0 calc((100% - 3 * 16px) / 4);
	min-width: 200px;
}

@media (max-width: 1024px) {
	.categories-grid--carousel .category-card {
		flex: 0 0 calc((100% - 16px) / 2);
	}
}

@media (max-width: 640px) {
	.hp-heading--sm {
		font-size: 20px;
	}

	.hp-discover {
		padding: 36px 0 28px;
	}

	.categories-grid--carousel .category-card {
		flex: 0 0 70%;
		min-width: 220px;
	}
}


/* ===== Featured CTA row ===== */
.hp-cta-row {
	text-align: center;
	margin-top: 36px;
}

.hp-cta-row .btn {
	gap: 10px;
}

/* =====================================================================
   ========== RESPONSIVE — HOME PAGE ===================================
   ===================================================================== */

@media (max-width: 1023.98px) {
	/* Esconde o carrossel de banners no mobile — value strip fica colado no header */
	.hero-carousel-section {
		display: none !important;
	}

	/* Value strip FIXO abaixo do header (JS seta --value-strip-top com a altura real do header) */
	.hp-value-strip {
		position: fixed;
		top: var(--value-strip-top, 60px);
		left: 0;
		right: 0;
		z-index: 49;
		margin-top: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	}

	/* Carrossel de um item por vez com autoplay via JS.
	   Usa viewport fixo (.hp-value-strip-inner) + track que o JS move
	   via translateX. Cada item ocupa 100% da largura do viewport. */
	.hp-value-strip .container {
		padding: 0 !important;
		max-width: 100%;
		overflow: hidden;
	}

	.hp-value-strip-inner {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow: visible !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		padding: 0 !important;
		margin: 0 !important;
		gap: 0 !important;
		width: 100%;
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: transform;
		backface-visibility: hidden;
	}

	.hp-value-item {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		justify-content: center;
		padding: 12px 16px;
		white-space: nowrap;
		font-size: 13px;
		gap: 10px;
	}

	/* Sem divisória vertical quando aparece um por vez */
	.hp-value-item:not(:last-child)::after {
		display: none !important;
	}

	.hero-carousel,
	.hero-carousel-track {
		width: 100%;
	}

	.hp-discover {
		padding: 40px 0 32px;
	}
	.hp-value-item {
		padding: 12px 18px;
		font-size: 12.5px;
	}
	.categories-arrow {
		width: 40px;
		height: 40px;
	}
}

/* =========================================================
   Home product grids viram carrossel horizontal em todo
   viewport ≤1023.98px (mobile + tablet). Sempre 2 cards
   visíveis + peek do 3º pra deixar claro que tem mais.
   Featured (6 produtos) preserva as 2 linhas do desktop,
   cada linha com scroll independente. Categorias (3 produtos)
   usam flex 1-row. Não afeta produtos.html (catálogo) — lá
   o grid 1-col em mobile com muitos itens é o esperado.
   ========================================================= */

/* Default (desktop ≥1024px): .featured-row é display:contents para que
   os 6 cards virem filhos diretos de #featuredProductsGrid e o grid
   3-col × 2-row do styles.css funcione naturalmente. */
.featured-row {
	display: contents;
}

/* Mobile + tablet (≤1023.98px): carrossel horizontal pra todas as
   seções de produtos da home. min-width baixo (150px) garante que
   ainda cabem 2 cards + peek mesmo em phones pequenos (~360px). */
@media (max-width: 1023.98px) {
	/* Categorias: 1 linha de cards via flex carrossel */
	.category-products-section .products-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 12px;
		padding: 6px 16px 24px;
		margin-left: -16px;
		margin-right: -16px;
		/* proximity (não mandatory) deixa o drag fluir solto e só "puxa"
		   pra um card quando o usuário já está perto. mandatory dá
		   sensação grudenta durante o arrasto. */
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		cursor: grab;
		user-select: none;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 16px;
	}

	.category-products-section .products-grid::-webkit-scrollbar {
		display: none;
	}

	.category-products-section .products-grid > .product-card {
		flex: 0 0 calc((100% - 32px) / 2.2);
		min-width: 150px;
		scroll-snap-align: start;
	}

	.category-products-section .products-grid.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none; /* sem snap durante o drag; reativa ao soltar */
		scroll-behavior: auto;
	}

	.category-products-section .products-grid.is-dragging a,
	.category-products-section .products-grid.is-dragging .product-card {
		pointer-events: none;
	}

	/* Featured: container vira coluna empilhando 2 .featured-row.
	   Cada .featured-row é um carrossel horizontal independente. */
	#featuredProductsGrid {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		grid-auto-flow: row !important;
		gap: 12px;
		overflow: visible;
		padding: 0;
		margin: 0;
		cursor: default;
		user-select: auto;
	}

	.featured-row {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 12px;
		padding: 6px 16px 12px;
		margin-left: -16px;
		margin-right: -16px;
		/* proximity (não mandatory) deixa o drag fluir solto e só "puxa"
		   pra um card quando o usuário já está perto. mandatory dá
		   sensação grudenta durante o arrasto. */
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		cursor: grab;
		user-select: none;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 16px;
	}

	.featured-row::-webkit-scrollbar {
		display: none;
	}

	.featured-row > .product-card {
		flex: 0 0 calc((100% - 32px) / 2.2);
		min-width: 150px;
		scroll-snap-align: start;
	}

	.featured-row.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none; /* sem snap durante o drag; reativa ao soltar */
		scroll-behavior: auto;
	}

	.featured-row.is-dragging a,
	.featured-row.is-dragging .product-card {
		pointer-events: none;
	}
}

/* Mobile pequeno (≤575px): no carrossel da home, cards mais largos
   (~1.15 visíveis) e mais baixos (imagem encurtada). Conteúdo respira,
   altura cai. Catálogo continua 1-col. */
@media (max-width: 575.98px) {
	#featuredProductsGrid .product-card,
	.category-products-section .products-grid .product-card {
		flex: 0 0 calc((100% - 16px) / 1.15) !important;
		min-width: 0 !important;
	}

	#featuredProductsGrid .product-card .product-media,
	.category-products-section .products-grid .product-card .product-media {
		height: clamp(210px, 52vw, 280px);
	}
}

@media (max-width: 1023.98px) {
	.hp-section-head {
		margin-bottom: 20px;
	}

	/* =========================================================
	   Categorias no mobile/tablet: 2×2 grid (padrão Uniqlo/H&M).
	   Sobrescreve o modo carousel (.--carousel) e o modo grid
	   nativo — todas as 4 categorias visíveis acima da dobra,
	   sem carousel, sem arrastar. Se houver mais de 4, as
	   adicionais rolam verticalmente em uma 3ª/4ª linha.
	   Breakpoint alinhado ao do header (1023.98px) — antes
	   ficava em 767.98px e os cards explodiam de tamanho na
	   janela de tablet 768-1023px.
	   ========================================================= */
	.categories-carousel {
		position: relative;
	}

	.categories-grid,
	.categories-grid--carousel {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		padding: 0 !important;
		margin-bottom: 0 !important;
		overflow: visible !important;
		justify-content: stretch !important;
		cursor: default !important;
		user-select: auto !important;
	}

	/* Desabilita o scroll-snap/drag das categorias no mobile */
	.categories-grid--carousel.is-dragging {
		cursor: default !important;
	}
	.categories-grid--carousel.is-dragging a {
		pointer-events: auto !important;
	}

	/* Esconde as arrows — não têm função no grid 2x2 */
	.categories-arrow,
	.categories-arrow--prev,
	.categories-arrow--next {
		display: none !important;
	}

	/* Cards quadrados, full-bleed, tap-target generoso */
	.categories-grid--carousel .category-card,
	.categories-grid .category-card {
		flex: unset !important;
		min-width: 0 !important;
		aspect-ratio: 1 / 1;
		border-radius: 14px;
	}

	/* Gradient overlay escuro para contraste do texto branco.
	   !important necessário porque há um override later-cascade que
	   aplica um gradient claro (.category-overlay, L3319 styles.css). */
	.category-card .category-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.82) 0%,
			rgba(0, 0, 0, 0.40) 45%,
			rgba(0, 0, 0, 0) 75%
		) !important;
	}

	.category-card:hover .category-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.90) 0%,
			rgba(0, 0, 0, 0.50) 45%,
			rgba(0, 0, 0, 0.08) 80%
		) !important;
	}

	/* Tile sintético "Todas" — renderizado quando > 4 categorias no mobile.
	   Visual contrastante (gradiente brand) pra sinalizar "ver tudo" sem
	   competir com os 3 tiles reais que carregam foto. */
	.category-card--all {
		background: linear-gradient(135deg, #1a1a1a 0%, #2a2218 55%, #c9a84c 100%);
		border: 1px solid rgba(var(--primary-rgb), 0.35);
	}

	.category-card--all .category-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.15) 60%,
			rgba(0, 0, 0, 0) 100%
		) !important;
	}

	.category-card--all:hover .category-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.65) 0%,
			rgba(0, 0, 0, 0.25) 60%,
			rgba(0, 0, 0, 0) 100%
		) !important;
	}

	.category-content {
		padding: 12px 14px;
	}

	.category-title {
		font-size: 17px;
		line-height: 1.2;
		margin: 0;
		font-weight: 700;
		color: #ffffff !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	}

	.category-count,
	.category-subtitle {
		color: rgba(255, 255, 255, 0.88) !important;
		font-size: 12px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}
	.hp-value-strip-inner {
		padding: 0 6px;
	}
	.hp-value-item {
		padding: 10px 16px;
		font-size: 12px;
	}
	.hp-value-item .icon-20 {
		width: 18px;
		height: 18px;
	}
	.hp-discover {
		padding: 32px 0 24px;
	}
	.categories-grid--carousel .category-card {
		flex: 0 0 62%;
		min-width: 200px;
	}
	.hp-cta-row {
		margin-top: 24px;
	}
	.hp-cta-row .btn {
		width: 100%;
	}
}

@media (max-width: 575.98px) {
	.hero-carousel-btn {
		width: 36px !important;
		height: 36px !important;
	}
	.hero-carousel-dots {
		bottom: 10px !important;
	}
	/* Mantém o 2×2 em phones pequenos; apenas ajusta o tipo */
	.categories-grid,
	.categories-grid--carousel {
		gap: 8px !important;
	}
	.category-content {
		padding: 10px 12px;
	}
	.category-title {
		font-size: 15px;
	}
	.category-subtitle {
		font-size: 11px;
	}
	.hp-value-strip-inner {
		justify-content: flex-start;
	}
	.hp-value-item {
		padding: 10px 14px;
		font-size: 11.5px;
	}
	.hp-value-item strong {
		font-size: 12px;
	}
	/* Brands carousel — tighter spacing */
	.brands-carousel-section {
		padding: 30px 0;
	}
}

/* Brands carousel responsiveness */
@media (max-width: 1199.98px) {
	.brands-track {
		gap: 16px !important;
	}
}

@media (max-width: 767.98px) {
	.brands-arrow {
		width: 36px !important;
		height: 36px !important;
	}
}