/* Atelier Product Widgets — base comum a todos os widgets. */

/*
 * Identidade da marca: padrão de todos os widgets.
 * Os controles de estilo de cada widget no Elementor continuam sobrescrevendo estes valores.
 * Para trocar a marca do site inteiro sem mexer em cada widget, redefina estas variáveis
 * em Configurações do site › CSS personalizado (ex.: .apw-purchase { --apw-brand: #000; }).
 *
 * Paleta do site formaobjeto.com.br: branco é o chão, #454545 é a tinta (texto, títulos, opções
 * escolhidas) e o cobre #985630 aparece como no site: faixas cheias com texto branco, botão, abas e cotas.
 * Cartões e campos usam um cinza neutro (#F5F5F5) — sem tons de nude.
 * Superfícies se separam por um passo de tom (--apw-fill), nunca por linha ou sombra.
 */
:is(.apw-gallery, .apw-purchase, .apw-header, .apw-price, .apw-short-description, .apw-meta, .apw-details, .apw-highlights, .apw-related, .apw-showcase, .apw-specs, .apw-editor-notice) {
	--apw-white: #ffffff;
	--apw-dark: #454545;                       /* cinza do site: texto, títulos e base escura */
	--apw-brand: #985630;                      /* amarelo queimado: cor principal */
	--apw-brand-soft: rgba(152, 86, 48, 0.3);  /* arco decorativo */
	--apw-surface: #f5f5f5;                    /* cinza neutro: cartões, campos, sanfona */
	--apw-muted: #6b6b6b;                      /* notas secundárias; contraste ≥ 4,5:1 sobre branco e #F5F5F5 */
	--apw-fill: rgba(69, 69, 69, 0.06);        /* passo de tom neutro: chips, quantidade, setas */
	--apw-fill-strong: rgba(69, 69, 69, 0.12); /* passo de tom ao passar o mouse */
	--apw-line: #e6e6e6;                       /* estado desabilitado */
	--apw-line-strong: #cfcfcf;
	--apw-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--apw-font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--apw-ease: cubic-bezier(0.23, 1, 0.32, 1);        /* ease-out forte: entradas e respostas */
	--apw-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movimento na tela: cortinas, deslizes */
	/* Escala: vitrine (título do produto), título de seção, preço 28px, texto 16px, pequeno 14px. */
	--apw-size-display: clamp(32px, 3vw, 48px);
	--apw-size-heading: clamp(22px, 2vw, 30px);
	/* Títulos de seção como no site ("SOBRE NÓS", "PRODUTOS RELACIONADOS"): caixa alta com espaçamento. */
	--apw-heading-case: uppercase;
	--apw-heading-tracking: 0.08em;
	--apw-heading-weight: 600;
	/* Rótulos e abas como os botões do site ("ADICIONAR AO ORÇAMENTO"). */
	--apw-label-size: 13px;
	--apw-label-tracking: 0.12em;
}

/* Entrada: cada parte sobe e aparece em sequência (60–90 ms entre elas). Só transform e opacity;
   o conteúdo nunca depende de script para aparecer. */
@keyframes apw-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
}

.apw-header > *,
.apw-price,
.apw-short-description,
.apw-purchase__attributes > *,
.apw-purchase__actions > *,
.apw-meta__row {
	animation: apw-rise 0.7s var(--apw-ease) both;
}

.apw-header > :nth-child(2) { animation-delay: 70ms; }
.apw-header > :nth-child(3) { animation-delay: 140ms; }
.apw-header > :nth-child(4) { animation-delay: 210ms; }
.apw-price { animation-delay: 260ms; }
.apw-short-description { animation-delay: 320ms; }
.apw-purchase__attributes > :nth-child(1) { animation-delay: 380ms; }
.apw-purchase__attributes > :nth-child(2) { animation-delay: 450ms; }
.apw-purchase__attributes > :nth-child(3) { animation-delay: 520ms; }
.apw-purchase__actions > :nth-child(1) { animation-delay: 560ms; }
.apw-purchase__actions > :nth-child(2) { animation-delay: 620ms; }
.apw-meta__row:nth-child(1) { animation-delay: 680ms; }
.apw-meta__row:nth-child(2) { animation-delay: 740ms; }
.apw-meta__row:nth-child(3) { animation-delay: 800ms; }
.apw-meta__row:nth-child(4) { animation-delay: 860ms; }

/* Revelar ao rolar: o JS marca .apw-reveal só nos elementos que ainda vão entrar na tela
   (sem JS, nada fica escondido). Cascata curta via --apw-reveal-delay. */
.apw-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--apw-ease) var(--apw-reveal-delay, 0ms), transform 0.9s var(--apw-ease) var(--apw-reveal-delay, 0ms);
}

.apw-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Imagens entram com cortina de baixo para cima e um leve assentamento. */
.apw-reveal--clip {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s var(--apw-ease-in-out) var(--apw-reveal-delay, 0ms);
}

.apw-reveal--clip img {
	transform: scale(1.12);
	transition: transform 1.4s var(--apw-ease) var(--apw-reveal-delay, 0ms);
}

.apw-reveal--clip.is-visible {
	clip-path: inset(0 0 0 0);
}

.apw-reveal--clip.is-visible img {
	transform: none;
}

/* Título que sobe por trás de uma máscara. */
@keyframes apw-mask-up {
	from {
		transform: translateY(105%);
	}
}

/* No editor do Elementor o conteúdo re-renderiza a cada ajuste: sem entrada, para não piscar. */
.elementor-editor-active :is(.apw-header > *, .apw-price, .apw-short-description, .apw-purchase__attributes > *, .apw-purchase__actions > *, .apw-meta__row) {
	animation: none;
}

/* Faixa cujo widget não tem o que mostrar neste produto (sem destaques, sem relacionados):
   o container do Elementor fica vazio e some, em vez de virar um bloco de cor sem conteúdo. */
.apw-product-page .e-con:not(:has(.elementor-element)) {
	display: none;
}

.apw-editor-notice {
	padding: 12px 16px;
	color: var(--apw-muted);
	font-family: var(--apw-font-text);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	background: var(--apw-fill);
}

:where([class^="apw-"], [class*=" apw-"]) .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px; /* taste-skill-ignore: texto só para leitor de tela */
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.apw-reveal,
	.apw-reveal--clip,
	.apw-reveal--clip img {
		clip-path: none;
		transform: none;
		transition: opacity 0.4s ease;
	}

	.apw-header > *,
	.apw-price,
	.apw-short-description,
	.apw-purchase__attributes > *,
	.apw-purchase__actions > *,
	.apw-meta__row {
		animation: none;
	}
}