/**
 * Asta Mobili — Seção da Home "Produtos para compor melhores espaços."
 * (carrossel horizontal de produtos), entre "Design e funcionalidade" e
 * "Soluções para diferentes realidades" no mockup aprovado
 * (backups/mockup/rv07/"Asta Mobili.dc.html", ~linhas 220‑240).
 *
 * ETAPA ATUAL = SOMENTE VISUAL. Reprodução fiel do cabeçalho (título +
 * "Ver catálogo completo →" + setas) e do carrossel/card — este último
 * seguindo a mesma linguagem visual já aprovada no carrossel "Complete seu
 * ambiente" da PDP (asta-product.css, escopo `.asta-product-related`), mas
 * com escopo e assets próprios (`.asta-home-products`) — sem alterar aquele
 * CSS nem reutilizar suas classes.
 *
 * Fundo branco full-bleed (mockup: `background:#FFFFFF`, sem faixa
 * colorida) — a seção quebra o container do tema/Elementor só para o
 * cabeçalho/trilha respeitarem a largura total da viewport, como as demais
 * seções da Home.
 */

.asta-home-products,
.asta-home-products *,
.asta-home-products *::before,
.asta-home-products *::after { box-sizing: border-box; }

.asta-home-products {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #FFFFFF;
	padding-top: clamp(36px, 4.6vw, 88px);
	padding-bottom: clamp(36px, 4.6vw, 88px);
	font-family: Inter, Helvetica, Arial, sans-serif;
}

/* Container de conteúdo — mesma medida das demais seções Asta (1180px). */
.asta-home-products__container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 64px);
	padding-right: clamp(20px, 4vw, 64px);
}

/* =====================================================================
 * CABEÇALHO — título à esquerda, "Ver catálogo completo →" + setas à
 * direita (mockup: `align-items:flex-end;justify-content:space-between`).
 * ===================================================================== */

.asta-home-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: clamp(20px, 2.4vw, 36px);
}

.asta-home-products__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(23px, 3.2vw, 40px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	color: #17161A !important;
	max-width: 560px;
	text-wrap: pretty;
}

.asta-home-products__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.asta-home-products__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #A01C24 !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: opacity .18s ease;
}

.asta-home-products__link:hover,
.asta-home-products__link:focus-visible {
	opacity: .72;
}

/* Setas — escondidas por padrão; o JS adiciona `.is-scrollable` na seção só
   quando a trilha realmente rola. Sem JS / sem overflow → nunca aparecem
   (progressive enhancement, mesmo princípio do carrossel da PDP). */
.asta-home-products__controls {
	display: none;
	gap: 8px;
	flex: none;
}

.asta-home-products.is-scrollable .asta-home-products__controls {
	display: flex;
}

/* Setas — vermelho Asta em todos os estados. `!important` neutraliza
   explicitamente o magenta herdado do tema/Elementor/Hello (reset de
   <button>, hover/focus com accent color e box-shadow de foco) — escopado só
   a `.asta-home-products__arrow`. */
.asta-home-products__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #A01C24 !important;
	border-radius: 50%;
	background: #FFFFFF !important;
	color: #A01C24 !important;
	box-shadow: none !important;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}

.asta-home-products__arrow:hover,
.asta-home-products__arrow:focus,
.asta-home-products__arrow:focus-visible,
.asta-home-products__arrow:active {
	background: #A01C24 !important;
	border-color: #A01C24 !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}

.asta-home-products__arrow:disabled {
	background: #FFFFFF !important;
	border-color: #A01C24 !important;
	color: #A01C24 !important;
	box-shadow: none !important;
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.asta-home-products :focus-visible {
	outline: 2px solid #A01C24;
	outline-offset: 2px;
}

/* =====================================================================
 * TRILHA / CARD — mesma linguagem visual do carrossel da PDP: scroll
 * nativo + scroll-snap, card `border-radius:10px`, mídia `aspect-ratio:4/3`
 * `object-fit:cover`, eyebrow vermelho uppercase, nome em destaque, botão
 * escuro → vermelho no hover. Largura do card: mobile 76% / tablet 46% /
 * desktop 29% (~3‑4 cards visíveis).
 * ===================================================================== */

.asta-home-products__track {
	display: flex;
	gap: clamp(12px, 1.4vw, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 12px clamp(20px, 4vw, 64px) 22px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.asta-home-products__track::-webkit-scrollbar {
	display: none;
}

.asta-home-products__card {
	flex: 0 0 29%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #DBD6CD;
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.asta-home-products__card:hover {
	border-color: #B0A99D;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -14px rgba(23, 22, 26, 0.22);
}

.asta-home-products__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #EFEDE7;
	overflow: hidden;
}

.asta-home-products__media .asta-home-products__img,
.asta-home-products__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.asta-home-products__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: clamp(12px, 1.5vw, 18px);
	flex: 1;
}

.asta-home-products__eyebrow {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #A01C24;
}

.asta-home-products__name {
	font-family: Manrope, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 1.9vw, 22px);
	line-height: 1.14;
	letter-spacing: -0.025em;
	color: #17161A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.asta-home-products__cta {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 10px 16px;
	background: #23211E;
	color: #FFFFFF !important;
	border: 0;
	border-radius: 7px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease;
}

.asta-home-products__cta:hover,
.asta-home-products__cta:focus-visible {
	background: #A01C24;
	color: #FFFFFF !important;
}

.asta-home-products__cta-arrow {
	font-size: 13px;
	line-height: 1;
}

/* Tablet — ~2 cards visíveis. */
@media (max-width: 1024px) {
	.asta-home-products__card { flex-basis: 46%; }
}

/* Mobile — ~1 card + espia do próximo; scroll/touch natural, setas escondidas. */
@media (max-width: 640px) {
	.asta-home-products__card { flex-basis: 76%; }
	.asta-home-products.is-scrollable .asta-home-products__controls { display: none; }
	.asta-home-products__head { margin-bottom: 16px; }
	.asta-home-products__title { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.asta-home-products__card,
	.asta-home-products__arrow,
	.asta-home-products__cta,
	.asta-home-products__link { transition: none; }
	.asta-home-products__track { scroll-behavior: auto; }
}