/**
 * Asta Mobili — Página de Produto (WooCommerce Single Product).
 *
 * Etapa 1: breadcrumb + Hero. Reprodução visual fiel do mockup aprovado
 * (backups/mockup/rv07/"Asta Mobili.dc.html", bloco isProduct, ~linhas
 * 392‑427). Todos os valores (cores, tipografia, espaçamentos, proporções)
 * vêm do HTML do mockup. As unidades `cqw` do mockup foram convertidas para
 * `vw` — as seções ocupam 100% da largura da viewport — seguindo a mesma
 * convenção do Hero da Home (asta-hero.css) e das seções da Home.
 *
 * Layout 100% fluido (clamp + vw), sem breakpoints discretos além do já
 * adotado neste plugin (max-width:767px) para empilhar galeria e resumo.
 *
 * Só é carregada em is_product() (ver Asta_Product_Template).
 */

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

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

/* Seções full-bleed: quebram o container do tema/WooCommerce para ocupar a
   largura total da viewport, como no mockup. */
.asta-product__breadcrumb,
.asta-product-hero,
.asta-product-overview,
.asta-product-applications,
.asta-product-specs,
.asta-product-video,
.asta-product-documents,
.asta-product-related,
.asta-product-cta {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #FFFFFF;
	font-family: Inter, Helvetica, Arial, sans-serif;
}

/* =====================================================================
 * BREADCRUMB (nativo do WooCommerce, dentro de wrapper Asta)
 * Mockup: Inter 10px; letter-spacing 0.08em; color #8C867C; último item #17161A.
 * ===================================================================== */

.asta-product__breadcrumb {
	padding-top: clamp(16px, 2vw, 32px);
	padding-bottom: 0;
}
.asta-product__breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: #8C867C;
}
.asta-product__breadcrumb .woocommerce-breadcrumb a {
	color: #8C867C;
	text-decoration: none;
	transition: color .15s ease;
}
.asta-product__breadcrumb .woocommerce-breadcrumb a:hover,
.asta-product__breadcrumb .woocommerce-breadcrumb a:focus-visible {
	color: #17161A;
}

/* =====================================================================
 * HERO
 * ===================================================================== */

.asta-product-hero {
	padding-top: clamp(18px, 2.4vw, 40px);
	padding-bottom: clamp(30px, 3.4vw, 64px);
}

.asta-product-hero__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 56px);
	align-items: flex-start;
}

/* ---- Coluna esquerda: galeria ----
   Mockup: flex:1 1 46%; min-width:min(100%,300px); coluna; gap 10px. */
.asta-product-hero__media {
	flex: 1 1 46%;
	min-width: min(100%, 300px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Palco da imagem principal — Mockup: aspect-ratio 4/3; background #F4F2ED. */
.asta-product-hero__stage {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	background: #F4F2ED;
	overflow: hidden;
}
.asta-product-hero__main-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 100%;
	margin: 0;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Botão "Ampliar" — Mockup: canto inferior direito; pílula clara translúcida.
   As regras neutralizam o que o Hello Elementor / Elementor aplicam a <button>. */
.asta-product-hero .asta-product-hero__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #E0DBD3 !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: none !important;
	color: #3A3733 !important;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-shadow: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.asta-product-hero .asta-product-hero__zoom:hover,
.asta-product-hero .asta-product-hero__zoom:focus-visible {
	background: #FFFFFF !important;
	border-color: #C9C2B6 !important;
	color: #17161A !important;
}
.asta-product-hero__zoom-icon { font-family: Inter, Helvetica, Arial, sans-serif; }

/* Miniaturas — Mockup: faixa horizontal rolável; 80px; borda ativa vermelha. */
.asta-product-hero__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.asta-product-hero .asta-product-hero__thumb {
	flex: 0 0 80px;
	width: 80px;
	margin: 0;
	padding: 2px;
	aspect-ratio: 4 / 3;
	border: 1px solid #E4E0D9 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	scroll-snap-align: start;
	cursor: pointer;
	transition: border-color .15s ease;
}
.asta-product-hero .asta-product-hero__thumb.is-active,
.asta-product-hero .asta-product-hero__thumb[aria-pressed="true"] {
	border-color: #A01C24 !important;
}
.asta-product-hero .asta-product-hero__thumb:hover,
.asta-product-hero .asta-product-hero__thumb:focus-visible {
	border-color: #C98A8E !important;
}
.asta-product-hero__thumb-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* ---- Coluna direita: resumo ----
   Mockup: flex:1 1 40%; min-width:min(100%,280px); coluna;
   gap clamp(14px,1.6cqw,22px); padding-top clamp(0,1cqw,14px). */
.asta-product-hero__summary {
	flex: 1 1 40%;
	min-width: min(100%, 280px);
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6vw, 22px);
	padding-top: clamp(0px, 1vw, 14px);
}

.asta-product-hero__eyebrow {
	margin: 0 !important;
	padding: 0;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: 0.16em !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	color: #A01C24 !important;
}

.asta-product-hero__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(30px, 4.1vw, 54px) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.035em !important;
	color: #17161A !important;
	text-wrap: pretty;
}

/* SKU / referência — linha discreta logo abaixo do título (a margem negativa
   compensa o gap do flex para a linha "colar" no H1, sem alterar o espaçamento
   antes da descrição). */
.asta-product-hero__ref {
	margin: calc(6px - clamp(14px, 1.6vw, 22px)) 0 0 !important;
	padding: 0;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.3 !important;
	color: #8C867C !important;
}

.asta-product-hero__excerpt {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: clamp(13.5px, 1.35vw, 17px);
	line-height: 1.65;
	color: #5E5A54;
}
.asta-product-hero__excerpt > * { margin: 0 0 0.7em; }
.asta-product-hero__excerpt > *:last-child { margin-bottom: 0; }

/* Ações — Mockup: coluna; gap 9px; margin-top 4px. Botões ocupam a largura da
   coluna, com texto à esquerda e seta à direita (justify-content:space-between). */
.asta-product-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 4px;
}
.asta-product-hero .asta-product-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 16px 22px;
	border-radius: 8px !important;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.03em;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.asta-product-hero__cta-arrow { flex: none; }

/* Primário — Mockup: #A01C24; texto branco; sem borda; hover #7E1319. */
.asta-product-hero .asta-product-hero__cta--primary {
	border: 0 !important;
	background: #A01C24 !important;
	color: #FFFFFF !important;
	transition: background .18s ease;
}
.asta-product-hero .asta-product-hero__cta--primary:hover,
.asta-product-hero .asta-product-hero__cta--primary:focus-visible {
	background: #7E1319 !important;
	color: #FFFFFF !important;
}

/* Secundário — Mockup: transparente; texto #17161A; borda #D6D0C6;
   hover border-color #17161A; seta vermelha. */
.asta-product-hero .asta-product-hero__cta--secondary {
	border: 1px solid #D6D0C6 !important;
	background: transparent !important;
	color: #17161A !important;
	transition: border-color .18s ease;
}
.asta-product-hero .asta-product-hero__cta--secondary:hover,
.asta-product-hero .asta-product-hero__cta--secondary:focus-visible {
	border-color: #17161A !important;
	background: transparent !important;
	color: #17161A !important;
}
.asta-product-hero .asta-product-hero__cta--secondary .asta-product-hero__cta-arrow {
	color: #A01C24;
}

/* Chips — Mockup: flex-wrap; gap 14px; Inter 10px; letter-spacing 0.06em;
   uppercase; #8C867C; padding-top 6px. Texto puro, sem moldura. */
.asta-product-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 6px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 10px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #8C867C;
}

.asta-product-hero :focus-visible {
	outline: 2px solid #17161A;
	outline-offset: 2px;
}

/* =====================================================================
 * OVERVIEW — "Design que se adapta ao seu projeto." (2ª seção do mockup)
 * Mockup (~linhas 428‑443): background #F7F5F1; border-top 1px #EAE6DF;
 * padding clamp(34px,4.4cqw,84px) …; inner flex-wrap com gap clamp(18px,3cqw,60px);
 * <h2> Manrope 600 clamp(24px,3.3cqw,42px)/1.06, à esquerda (flex 1 1 300px);
 * corpo Inter clamp(13.5px,1.3cqw,16px)/1.65 #5E5A54, à direita (flex 1 1 320px).
 * cqw → vw (seção full-bleed), como no resto de asta-product.css.
 * ===================================================================== */

.asta-product-overview {
	background: #F7F5F1;
	border-top: 1px solid #EAE6DF;
	padding-top: clamp(34px, 4.4vw, 84px);
	padding-bottom: clamp(34px, 4.4vw, 84px);
}

.asta-product-overview__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 60px);
	align-items: flex-start;
}

.asta-product-overview__title {
	flex: 1 1 300px;
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(24px, 3.3vw, 42px) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
	color: #17161A !important;
	text-wrap: pretty;
}

.asta-product-overview__body {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.asta-product-overview__body p {
	margin: 0 !important;
	padding: 0;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: clamp(13.5px, 1.3vw, 16px) !important;
	line-height: 1.65 !important;
	color: #5E5A54 !important;
}

/* =====================================================================
 * "INDICADO PARA" — 3ª seção do mockup (~linhas 439‑448)
 * Mockup: background #FFFFFF; padding clamp(28px,3.4cqw,64px) …; container
 * 1180px; coluna com gap 16px; eyebrow Inter 10px / 0.16em / uppercase / #A01C24;
 * cards flex-wrap gap 8px, borda #E0DBD3, radius 8px, padding 11px 16px,
 * Inter 13px #3A3733, fundo #FBFAF8. Cards NÃO clicáveis (sem hover de clique).
 * cqw → vw (seção full-bleed), como no resto do arquivo.
 * ===================================================================== */

.asta-product-applications {
	background: #FFFFFF;
	padding-top: clamp(28px, 3.4vw, 64px);
	padding-bottom: clamp(28px, 3.4vw, 64px);
}

.asta-product-applications__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.asta-product-applications__eyebrow {
	margin: 0;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #A01C24;
}

.asta-product-applications__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.asta-product-applications__card {
	display: inline-block;
	border: 1px solid #E0DBD3;
	border-radius: 8px;
	padding: 11px 16px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.3;
	color: #3A3733;
	background: #FBFAF8;
}

/* =====================================================================
 * "ESPECIFICAÇÕES" — 4ª seção do mockup (~linhas 449‑467)
 * Mockup: background #FFFFFF; padding clamp(28px,3.4cqw,64px) …; container 1180px;
 * coluna gap clamp(14px,1.6cqw,24px); título Manrope 600 clamp(21px,2.6cqw,34px);
 * lista com border-top/border-bottom 1px #E4E0D9; linha do trigger padding 16px 2px,
 * label 500 #17161A clamp(13.5px,1.35cqw,16px), sinal Inter 14px #A01C24;
 * corpo Inter clamp(13px,1.25cqw,15px)/1.65 #5E5A54, padding 0 2px 18px, max-width 640px.
 * cqw → vw (seção full-bleed).
 * ===================================================================== */

.asta-product-specs {
	background: #FFFFFF;
	padding-top: clamp(28px, 3.4vw, 64px);
	padding-bottom: clamp(28px, 3.4vw, 64px);
}

.asta-product-specs__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6vw, 24px);
}

.asta-product-specs__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(21px, 2.6vw, 34px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.025em !important;
	color: #17161A !important;
	text-wrap: pretty;
}

.asta-product-specs__list {
	border-top: 1px solid #E4E0D9;
}

.asta-product-specs__item {
	border-bottom: 1px solid #E4E0D9;
}

.asta-product-specs__heading {
	margin: 0 !important;
	padding: 0;
	font: inherit !important;
}

/* Trigger — neutraliza o que o Hello Elementor / Elementor aplicam a <button>. */
.asta-product-specs .asta-product-specs__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 16px 2px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left;
	text-shadow: none !important;
	cursor: pointer;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
}

.asta-product-specs__label {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: clamp(13.5px, 1.35vw, 16px);
	font-weight: 500;
	line-height: 1.35;
	color: #17161A;
}

.asta-product-specs__sign {
	flex: none;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #A01C24;
}

.asta-product-specs__panel[hidden] {
	display: none !important;
}

.asta-product-specs__body {
	padding: 0 2px 18px;
	max-width: 640px;
}
.asta-product-specs__body > * {
	margin: 0 0 0.7em !important;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: clamp(13px, 1.25vw, 15px) !important;
	line-height: 1.65 !important;
	color: #5E5A54 !important;
}
.asta-product-specs__body > *:last-child {
	margin-bottom: 0 !important;
}

.asta-product-specs .asta-product-specs__trigger:focus-visible {
	outline: 2px solid #17161A;
	outline-offset: 2px;
}

/* =====================================================================
 * "VÍDEO DO PRODUTO" — seção OPCIONAL, entre "Indicado para" e "Especificações".
 * Não está no mockup RV07 como bloco próprio (o produto antigo tinha vídeo do
 * YouTube). BLOCO ESCURO (mesma família visual de "Documentos" / Footer:
 * `#141311`, hairline `#E4E0D9`) — funciona como quebra visual entre as duas
 * seções claras vizinhas. Container 1180px, título Manrope na mesma escala/peso
 * de "Especificações" (só a cor muda para branco), player 16:9 responsivo,
 * centralizado, largura confortável (máx. 960px), cantos suaves. Bastante
 * respiro vertical. Só um <iframe loading="lazy"> do youtube-nocookie.com — sem
 * JS. Layout / proporção / responsividade do player inalterados.
 *
 * Cabeçalho (título + descrição) = card GLOBAL "Vídeo do produto" em
 * Asta → Produtos (`video_section` de `asta_product_settings`); cada um é
 * opcional (some se inativo/vazio) — o `__head` só existe quando há pelo menos
 * um, então nunca há gap reservado.
 * Abaixo do player: botão "Solicitar orçamento" — vermelho Asta no normal,
 * branco (texto/seta vermelhos) no hover/focus. A AÇÃO é a mesma do CTA
 * principal do Hero (Asta_Product_Data::quote_cta_link) — WhatsApp sempre em
 * nova aba.
 * ===================================================================== */

.asta-product-video {
	background: #141311;
	border-top: 1px solid #E4E0D9;
	border-bottom: 1px solid #E4E0D9;
	padding-top: clamp(34px, 4.4vw, 84px);
	padding-bottom: clamp(34px, 4.4vw, 84px);
}

.asta-product-video__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.4vw, 34px);
}

/* Título + descrição agrupados: espaçamento entre eles menor que o respiro
   até o player. Título e descrição vêm do card GLOBAL "Vídeo do produto"
   (Asta → Produtos); qualquer um pode estar ausente — o `__head` só é
   renderizado quando há pelo menos um, então nunca sobra gap reservado. */
.asta-product-video__head {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.1vw, 14px);
}

.asta-product-video__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(21px, 2.6vw, 34px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.025em !important;
	color: #FFFFFF !important;
	text-wrap: pretty;
}

.asta-product-video__desc {
	margin: 0 !important;
	padding: 0;
	max-width: 620px;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: clamp(13.5px, 1.35vw, 16px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.72) !important;
	text-wrap: pretty;
}

/* Palco do player: 16:9, centralizado, largura confortável. Borda/sombra
   discretas só para o player se destacar do fundo escuro — sem redesenho. */
.asta-product-video__frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 16 / 9;
	background: #0F0F12;
	border: 1px solid #33302B;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

/* Fallback para navegadores sem aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
	.asta-product-video__frame {
		height: 0;
		padding-bottom: 56.25%;
	}
}

.asta-product-video__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* CTA abaixo do player — bom respiro superior (o gap do __inner já dá o
   espaçamento; margin-top adiciona um pouco mais para o botão não colar no
   vídeo), centralizado sob o player centralizado. */
.asta-product-video__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(4px, 1vw, 14px);
}

/* Botão "Solicitar orçamento" abaixo do vídeo.
   Estado normal : fundo vermelho Asta (#A01C24), texto + seta brancos.
   Hover / focus : fundo branco, texto + seta vermelhos (a seta segue via
                   `currentColor`). Transição discreta.
   <a> real; neutraliza magenta, sublinhado, sombras e tipografia herdados do
   Hello Elementor. A AÇÃO (href/target/texto) vem de
   Asta_Product_Data::quote_cta_link() — igual ao CTA principal do Hero. */
.asta-product-video .asta-product-video__cta {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 28px !important;
	background: #A01C24 !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.asta-product-video .asta-product-video__cta:hover,
.asta-product-video .asta-product-video__cta:focus,
.asta-product-video .asta-product-video__cta:focus-visible,
.asta-product-video .asta-product-video__cta:active {
	background: #FFFFFF !important;
	color: #A01C24 !important;
	text-decoration: none !important;
}
.asta-product-video .asta-product-video__cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.asta-product-video__cta-arrow {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	color: currentColor;
}

/* =====================================================================
 * "DOCUMENTOS DO PRODUTO" — 5ª seção do mockup (~linhas 470‑489)
 * Mockup: painel escuro #141311, border-top 1px #E4E0D9, padding
 * clamp(34px,4.4cqw,84px) …; símbolo Asta branco decorativo (right -2% / bottom
 * -20%, width min(38%,440px), opacity 0.07, pointer-events none); container
 * 1180px; cabeçalho (max-width 560px, gap 12px): eyebrow Inter 10px / 0.16em /
 * uppercase / #C98A8E, título Manrope 600 clamp(24px,3.2cqw,42px)/1.05 #fff,
 * texto Inter clamp(13.5px,1.3cqw,16px)/1.6 rgba(255,255,255,.68); grade
 * auto-fit minmax(240px,1fr) gap clamp(10px,1.4cqw,16px); card #1C1B18, borda
 * #33302B, padding 20px 22px, hover borda #A01C24 / fundo #211F1C; nome Manrope
 * 500 15px #fff, meta Inter 11px / 0.04em #8A8378; botão circular 38px #A01C24
 * com seta branca. cqw → vw (seção full-bleed).
 * ETAPA VISUAL: cards não clicáveis; botão de download inerte; sem JS.
 * ===================================================================== */

.asta-product-documents {
	position: relative;
	overflow: hidden;
	background: #141311;
	border-top: 1px solid #E4E0D9;
	padding-top: clamp(34px, 4.4vw, 84px);
	padding-bottom: clamp(34px, 4.4vw, 84px);
}

.asta-product-documents__symbol {
	position: absolute;
	right: -2%;
	bottom: -20%;
	width: min(38%, 440px);
	height: auto;
	margin: 0;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

.asta-product-documents__inner {
	position: relative; /* acima do símbolo decorativo */
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.2vw, 32px);
}

.asta-product-documents__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 560px;
}

.asta-product-documents__eyebrow {
	margin: 0;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #C98A8E;
}

.asta-product-documents__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(24px, 3.2vw, 42px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
	color: #FFFFFF !important;
	text-wrap: pretty;
}

.asta-product-documents__intro {
	margin: 0;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: clamp(13.5px, 1.3vw, 16px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

.asta-product-documents__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(10px, 1.4vw, 16px);
}

/* Card NÃO clicável (só o botão circular é interativo) — sem hover de card
   para não sugerir que o card inteiro é um link. */
.asta-product-documents__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	background: #1C1B18;
	border: 1px solid #33302B;
	border-radius: 0;
}

.asta-product-documents__card-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.asta-product-documents__name {
	font-family: Manrope, Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.3;
	color: #FFFFFF;
}

.asta-product-documents__meta {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.3;
	color: #8A8378;
}

/* Botão circular de download — <a> real; neutraliza estilos de link/botão do
   Hello Elementor. */
.asta-product-documents .asta-product-documents__download {
	flex: none;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: #A01C24 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease;
}
.asta-product-documents .asta-product-documents__download:hover,
.asta-product-documents .asta-product-documents__download:focus-visible {
	background: #7E1319 !important;
}
.asta-product-documents__download svg {
	width: 15px;
	height: 15px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.asta-product-documents :focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* =====================================================================
 * CTA FINAL ("Precisa de apoio para o seu projeto?") — 6ª e ÚLTIMA seção
 * do bloco isProduct do RV07 (~linha 505).
 * Mockup: painel #A01C24 full-bleed, position:relative; overflow:hidden;
 * padding clamp(40px,5cqw,100px) clamp(20px,4cqw,64px). Símbolo Asta branco
 * decorativo (right -3% / bottom -20%, width min(40%,440px), opacity 0.09,
 * pointer-events none). Container 1180px; inner display:flex; flex-wrap:wrap;
 * gap:24px; align-items:flex-end; justify-content:space-between. Texto
 * flex:1 1 320px; gap:14px: título Manrope 600 clamp(26px,3.8cqw,48px)/1.03/
 * -0.035em #fff; descrição Inter clamp(13.5px,1.35cqw,17px)/1.6
 * rgba(255,255,255,.85) max-width 420px. Botão branco (texto #A01C24),
 * inline-flex gap 10px, border-radius 8px, padding 16px 28px, Inter 14px,
 * hover #F2E9E9 + seta. cqw → vw (seção full-bleed). Sem JS.
 * ===================================================================== */

.asta-product-cta {
	position: relative;
	overflow: hidden;
	background: #A01C24 !important;
	padding-top: clamp(40px, 5vw, 100px);
	padding-bottom: clamp(40px, 5vw, 100px);
}

/* Elemento decorativo — símbolo Asta branco de baixo contraste, à direita,
   parcialmente cortado pelo overflow:hidden da seção. FIXO no código. */
.asta-product-cta__symbol {
	position: absolute;
	right: -3%;
	bottom: -20%;
	width: min(40%, 440px);
	height: auto;
	margin: 0;
	opacity: 0.09;
	pointer-events: none;
	user-select: none;
}

.asta-product-cta__inner {
	position: relative; /* acima do símbolo decorativo */
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
}

.asta-product-cta__text {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.asta-product-cta__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(26px, 3.8vw, 48px) !important;
	line-height: 1.03 !important;
	letter-spacing: -0.035em !important;
	color: #FFFFFF !important;
	text-wrap: pretty;
}

.asta-product-cta__desc {
	margin: 0 !important;
	padding: 0;
	max-width: 420px;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: clamp(13.5px, 1.35vw, 17px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Botão branco com texto vermelho Asta — <a> real; neutraliza o magenta,
   sublinhado, sombras e tipografia herdados do Hello Elementor. */
.asta-product-cta .asta-product-cta__button {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 28px !important;
	background: #FFFFFF !important;
	color: #A01C24 !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.asta-product-cta .asta-product-cta__button:hover,
.asta-product-cta .asta-product-cta__button:focus,
.asta-product-cta .asta-product-cta__button:focus-visible,
.asta-product-cta .asta-product-cta__button:active {
	background: #F2E9E9 !important;
	color: #A01C24 !important;
	text-decoration: none !important;
}
.asta-product-cta .asta-product-cta__button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.asta-product-cta__arrow {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	color: currentColor;
}

/* Tablet/mobile: o botão já quebra sozinho pelo flex-wrap; aqui só garante o
   alinhamento à esquerda (junto ao texto) quando empilhado. */
@media (max-width: 640px) {
	.asta-product-cta__inner {
		align-items: flex-start;
	}
}

/* =====================================================================
 * LIGHTBOX ("Ampliar") — galeria navegável
 * ===================================================================== */

.asta-product-lightbox {
	width: min(92vw, 1100px);
	max-width: min(92vw, 1100px);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.asta-product-lightbox::backdrop {
	background: rgba(14, 13, 12, 0.82);
}

/* Área da imagem — contexto de posicionamento das setas, do fechar e dos dots. */
.asta-product-lightbox__viewport {
	position: relative;
	display: block;
}
.asta-product-lightbox__img {
	display: block;
	width: 100%;
	max-height: 88vh;
	margin: 0;
	object-fit: contain;
	background: #0e0d0c;
}

/* Fechar — canto superior direito, fora da imagem. */
.asta-product-lightbox .asta-product-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: #FFFFFF !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important;
	color: #17161A !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background .15s ease;
}
.asta-product-lightbox .asta-product-lightbox__close:hover,
.asta-product-lightbox .asta-product-lightbox__close:focus-visible {
	background: #F2E9E9 !important;
}

/* Setas anterior / próxima — pílulas claras translúcidas nas laterais. */
.asta-product-lightbox .asta-product-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important;
	color: #17161A !important;
	font-family: Inter, Helvetica, Arial, sans-serif !important;
	font-size: 24px !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background .15s ease;
}
.asta-product-lightbox__nav--prev { left: 10px; }
.asta-product-lightbox__nav--next { right: 10px; }
.asta-product-lightbox .asta-product-lightbox__nav > span { display: block; margin-top: -3px; }
.asta-product-lightbox .asta-product-lightbox__nav:hover,
.asta-product-lightbox .asta-product-lightbox__nav:focus-visible {
	background: #FFFFFF !important;
}

/* Indicadores — pílula discreta centralizada na base da imagem. */
.asta-product-lightbox__dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 8px;
	max-width: calc(100% - 24px);
	flex-wrap: wrap;
	justify-content: center;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(14, 13, 12, 0.5);
}
.asta-product-lightbox .asta-product-lightbox__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.asta-product-lightbox .asta-product-lightbox__dot:hover,
.asta-product-lightbox .asta-product-lightbox__dot:focus-visible {
	border-color: #FFFFFF !important;
}
.asta-product-lightbox .asta-product-lightbox__dot.is-active,
.asta-product-lightbox .asta-product-lightbox__dot[aria-current="true"] {
	background: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

/* Foco visível claro dentro do lightbox (o outline escuro do Hero some no fundo
   escuro do modal). */
.asta-product-lightbox :focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.asta-product-hero__media,
	.asta-product-hero__summary {
		flex: 1 1 100%;
		min-width: 0;
	}
	.asta-product-overview__title,
	.asta-product-overview__body {
		flex-basis: 100%;
	}
	.asta-product-hero .asta-product-hero__thumb {
		flex-basis: 30%;
		width: auto;
	}
	.asta-product-lightbox .asta-product-lightbox__close {
		top: 8px;
		right: 8px;
	}
	.asta-product-lightbox .asta-product-lightbox__nav {
		width: 40px;
		height: 40px;
		font-size: 21px !important;
	}
	.asta-product-lightbox__nav--prev { left: 6px; }
	.asta-product-lightbox__nav--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.asta-product-hero__cta,
	.asta-product-hero__thumb,
	.asta-product-hero__zoom,
	.asta-product-lightbox__close,
	.asta-product-lightbox__nav,
	.asta-product-lightbox__dot,
	.asta-product-documents__download,
	.asta-product-cta__button,
	.asta-product-video__cta,
	.asta-product-related__card,
	.asta-product-related__arrow,
	.asta-product-related__cta,
	.asta-product__breadcrumb .woocommerce-breadcrumb a { transition: none; }
	.asta-product-related__track { scroll-behavior: auto; }
}

/* =====================================================================
 * "COMPLETE SEU AMBIENTE" — carrossel de produtos, entre "Documentos" e
 * "CTA final" (mockup ~linhas 491‑503).
 * Mockup: faixa `background:#F7F5F1`, `border-top:1px solid #EAE6DF`,
 * padding vertical clamp(30px,3.6cqw,70px); título Manrope 600
 * clamp(23px,3cqw,40px)/1.06/-0.03em; trilha `display:flex` com
 * `overflow-x:auto` + `scroll-snap-type:x mandatory`, gap clamp(12px,1.4cqw,20px),
 * gutter lateral clamp(20px,4cqw,64px); largura do card featW =
 * mobile 76% / tablet 46% / desktop 29%.
 * Card (Card.dc.html): coluna, `border:1px solid #DBD6CD`, `border-radius:10px`,
 * `overflow:hidden`; mídia `aspect-ratio:4/3` fundo `#EFEDE7`; corpo gap 7px,
 * padding clamp(12px,1.5cqw,18px); eyebrow Inter 9px/0.12em/uppercase/#A01C24;
 * nome Manrope 700 clamp(16px,1.9cqw,22px)/1.14/-0.025em/#17161A; botão
 * `background:#23211E` → `#A01C24` no hover, branco, `border-radius:7px`,
 * `min-height:34px`, largura total. cqw → vw (seção full-bleed).
 *
 * Diferença deliberada vs. mockup: só o botão navega — o card não é clicável.
 * A mídia usa `object-fit:cover` (igual ao mockup): a imagem preenche todo o
 * bloco `aspect-ratio:4/3`, sem sobra de fundo, consistente entre cards.
 * ===================================================================== */

.asta-product-related {
	background: #F7F5F1;
	border-top: 1px solid #EAE6DF;
	padding-top: clamp(30px, 3.6vw, 70px);
	padding-bottom: clamp(30px, 3.6vw, 70px);
	font-family: Inter, Helvetica, Arial, sans-serif;
}

.asta-product-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(10px, 1.4vw, 18px);
}

.asta-product-related__title {
	margin: 0 !important;
	padding: 0;
	font-family: Manrope, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(23px, 3vw, 40px) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
	color: #17161A !important;
	text-wrap: pretty;
}

/* Setas — discretas, à direita do título. 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). */
.asta-product-related__controls {
	display: none;
	gap: 8px;
	flex: none;
}

.asta-product-related.is-scrollable .asta-product-related__controls {
	display: flex;
}

/* Setas — vermelho Asta em todos os estados. `!important` em background/
   border-color/color/box-shadow 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-product-related__arrow`, sem
   afetar outros botões do site. */
.asta-product-related__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-product-related__arrow:hover,
.asta-product-related__arrow:focus,
.asta-product-related__arrow:focus-visible,
.asta-product-related__arrow:active {
	background: #A01C24 !important;
	border-color: #A01C24 !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}

/* Disabled: mesma linguagem visual do estado normal (fundo branco, borda e
   ícone vermelhos), só com opacidade menor — nunca o vermelho "ativo" do
   hover. Vem depois no cascade para vencer um :hover residual. */
.asta-product-related__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-product-related :focus-visible {
	outline: 2px solid #A01C24;
	outline-offset: 2px;
}

/* Trilha rolável. `overflow-x:auto` força o eixo Y a `auto` também, então um
   card elevado no hover seria cortado no topo — o padding vertical reserva o
   espaço do "lift" + da sombra (em cima e embaixo) sem clipping. */
.asta-product-related__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-product-related__track::-webkit-scrollbar {
	display: none;
}

/* Card — desktop ~3 a 4 visíveis (mockup: 29%). */
.asta-product-related__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-product-related__card:hover {
	border-color: #B0A99D;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -14px rgba(23, 22, 26, 0.22);
}

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

.asta-product-related__media .asta-product-related__img,
.asta-product-related__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

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

.asta-product-related__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-product-related__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-product-related__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-product-related__cta:hover,
.asta-product-related__cta:focus-visible {
	background: #A01C24;
	color: #FFFFFF !important;
}

.asta-product-related__cta-arrow {
	font-size: 13px;
	line-height: 1;
}

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

/* Mobile — ~1 card + espia do próximo; scroll/touch natural, setas escondidas. */
@media (max-width: 640px) {
	.asta-product-related__card { flex-basis: 76%; }
	.asta-product-related.is-scrollable .asta-product-related__controls { display: none; }
	.asta-product-related__head { margin-bottom: 16px; }
}