/*
 * Acabamentos e dimensões. Tokens da marca em common.css.
 * Acabamentos: amostras grandes de material (foto ou cor), nome e descrição; a escolhida ganha anel.
 * Dimensões: a foto do produto no campo, com cotas que se traçam ao entrar na tela, e os números grandes.
 */

.apw-specs {
	--apw-specs-diagram-bg: #ffffff;
	--apw-specs-disc: var(--apw-surface);
	--apw-specs-line: var(--apw-brand);

	--apw-finish-size: 56px;

	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 96px);
	/* Margem lateral própria: o conteúdo não encosta na borda quando o container não tem padding. */
	padding-inline: var(--apw-specs-gutter, clamp(16px, 3vw, 40px));
	font-family: var(--apw-font-text);
	color: var(--apw-dark);
}

.apw-specs .apw-specs__title {
	margin: 0;
	font-family: var(--apw-font-heading);
	font-size: var(--apw-size-heading);
	font-weight: var(--apw-heading-weight);
	line-height: 1.25;
	letter-spacing: var(--apw-heading-tracking);
	text-transform: var(--apw-heading-case);
	color: var(--apw-dark);
}

/* ---------------------------------------------------------------------
 * Acabamentos
 * ------------------------------------------------------------------ */

/* Quadro de amostras: amostra grande do acabamento em foco à esquerda, título, resumo e as
   amostras pequenas à direita. Clicar (ou passar o mouse) troca a amostra grande. */
.apw-board {
	display: grid;
	grid-template-columns: minmax(220px, 380px) minmax(0, 1fr);
	gap: 40px clamp(40px, 6vw, 96px);
	align-items: center;
}

.apw-board__preview {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: 0;
}

.apw-board__sample {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--apw-swatch-color, var(--apw-surface));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); /* taste-skill-ignore: contorno das amostras claras no fundo branco */
	transition: background-color 0.45s var(--apw-ease), opacity 0.2s ease, filter 0.2s ease;
}

.apw-board__sample.is-swapping {
	opacity: 0.55;
	filter: blur(6px);
}

.apw-board__sample.has-image {
	background: var(--apw-surface);
}

.apw-board__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apw-board__img[hidden] {
	display: none;
}

.apw-board__initial {
	display: none;
	font-family: var(--apw-font-heading);
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 600;
	line-height: 1;
	color: var(--apw-muted);
}

.apw-board__sample.is-text .apw-board__initial {
	display: block;
}

.apw-board__caption {
	font-style: normal;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.apw-board__group {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--apw-label-tracking);
	text-transform: uppercase; /* taste-skill-ignore: rótulo no padrão do site da marca */
	color: var(--apw-muted);
}

.apw-board__name {
	font-family: var(--apw-font-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--apw-dark);
	text-transform: capitalize;
}

.apw-board__side {
	display: flex;
	flex-direction: column;
	align-items: var(--apw-finishes-items, flex-start);
	gap: 20px;
	text-align: var(--apw-finishes-align, left);
}

.apw-specs .apw-board__intro {
	margin: -8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--apw-muted);
}

.apw-specs .apw-board__desc {
	max-width: 52ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--apw-muted);
	transition: opacity 0.2s ease;
}

.apw-specs .apw-board__desc:empty {
	display: none;
}

.apw-specs__groups {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.apw-specs .apw-specs__group-name {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--apw-label-tracking);
	text-transform: uppercase; /* taste-skill-ignore: rótulo no padrão do site da marca */
	color: var(--apw-muted);
}

.apw-specs__group-current {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--apw-dark);
}

.apw-specs__group-current:not(:empty)::before {
	content: " — ";
	color: var(--apw-muted);
}

.apw-specs__finish-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--apw-finishes-items, flex-start);
	gap: 14px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apw-specs__finish-item {
	min-width: var(--apw-finish-size);
	margin: 0;
}

@media (max-width: 767px) {
	/* Celular: título e resumo, amostra grande, depois as amostras pequenas. */
	.apw-board {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.apw-board__side {
		display: contents;
	}

	.apw-board .apw-specs__title { order: 1; }
	.apw-board .apw-board__intro { order: 2; margin: -12px 0 0; }
	.apw-board__preview { order: 3; }
	.apw-board .apw-specs__groups { order: 4; }
	.apw-board .apw-board__desc { order: 5; }

	.apw-board__sample {
		aspect-ratio: 16 / 10;
	}
}

.apw-specs .apw-finish {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: center;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
	color: var(--apw-dark);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none; /* taste-skill-ignore: neutraliza sombra do tema/Kit */
}

.apw-specs button.apw-finish {
	cursor: pointer;
}

.apw-specs button.apw-finish.is-static {
	cursor: default;
}

.apw-specs .apw-finish:is(:hover, :focus) {
	color: var(--apw-dark);
	background: none;
}

.apw-finish__swatch {
	position: relative;
	display: block;
	width: var(--apw-finish-size);
	aspect-ratio: 1;
	margin-bottom: 8px;
	overflow: hidden;
	background: var(--apw-swatch-color, #d9d9d9);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); /* taste-skill-ignore: mantém amostras claras (branco, off white) visíveis no fundo branco */
}

.apw-finish__swatch.is-text {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--apw-surface);
}

.apw-finish__initial {
	font-family: var(--apw-font-heading);
	font-size: calc(var(--apw-finish-size) * 0.32);
	font-weight: 600;
	line-height: 1;
	color: var(--apw-muted);
}

.apw-finish__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--apw-ease);
}

/* Moldura fina cobre da escolhida (como nas caixinhas da vitrine), com respiro branco. */
.apw-finish__swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 0 solid var(--apw-white);
	box-shadow: inset 0 0 0 0 var(--apw-dark); /* taste-skill-ignore: anel da opção escolhida, não é sombra */
	transition: border-width 0.35s var(--apw-ease), box-shadow 0.35s var(--apw-ease);
	pointer-events: none;
}

.apw-finish[aria-pressed="true"] .apw-finish__swatch::after {
	border-width: 4px;
	box-shadow: inset 0 0 0 2px var(--apw-brand); /* taste-skill-ignore: anel da opção escolhida, não é sombra */
}

@media (hover: hover) and (pointer: fine) {
	button.apw-finish:hover .apw-finish__swatch img {
		transform: scale(1.06);
	}
}

button.apw-finish:active .apw-finish__swatch {
	transform: scale(0.98);
}

.apw-finish__swatch {
	transition: transform 0.16s var(--apw-ease);
}

.apw-specs .apw-finish__name {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--apw-dark);
}

.apw-specs .apw-finish[aria-pressed="true"] .apw-finish__name {
	font-weight: 600;
}

.apw-specs .apw-finish__desc {
	font-size: 12px;
	line-height: 1.45;
	color: var(--apw-muted);
}

.apw-specs .apw-finish:focus-visible {
	outline: 2px solid var(--apw-dark);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------
 * Dimensões
 * ------------------------------------------------------------------ */

.apw-specs__dimensions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px clamp(40px, 6vw, 112px);
	align-items: center;
}

.apw-specs__dimensions.has-diagram {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.apw-specs__diagram {
	margin: 0;
	padding: clamp(16px, 3vw, 40px);
	background: var(--apw-specs-diagram-bg);
}

/* Diagrama compacto: não passa de 480px, centrado na coluna. */
.apw-specs__figure {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	aspect-ratio: 1;
}

/* Círculo cinza atrás do produto (a foto de fundo branco se funde a ele). */
.apw-specs__diagram--disc .apw-specs__figure::before {
	content: "";
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	background: var(--apw-specs-disc);
}

.apw-reveal .apw-specs__figure::before {
	transform: scale(0.92);
	opacity: 0;
}

.apw-reveal.is-visible .apw-specs__figure::before {
	transform: none;
	opacity: 1;
	transition: transform 1s var(--apw-ease) 0.15s, opacity 0.8s ease 0.15s;
}

.apw-specs .apw-specs__img {
	position: absolute;
	inset: 19%;
	width: 62%;
	height: 62%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.apw-specs__img.is-swapping {
	opacity: 0.3;
	filter: blur(6px);
}

/*
 * Cotas: uma linha com marcas nas pontas e o texto da medida. A posição de cada cota (lado da linha,
 * texto fora / dentro / sobre a linha, texto vertical, ponto ao longo da linha) vem do widget.
 * Só transform e opacity animam: a linha cresce a partir do centro quando o diagrama entra na tela.
 */
.apw-dim {
	--apw-dim-gap: 10px;
	--apw-dim-tick: 9px;

	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.apw-dim[hidden] {
	display: none;
}

.apw-dim__line {
	position: absolute;
	background: var(--apw-specs-line);
}

.apw-dim__line::before,
.apw-dim__line::after {
	content: "";
	position: absolute;
	background: inherit;
}

.apw-specs .apw-dim__tag {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--apw-dark);
	background: var(--apw-specs-diagram-bg);
}

.apw-dim__key,
.apw-dim__unit {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--apw-label-tracking);
	text-transform: uppercase; /* taste-skill-ignore: rótulo técnico da cota */
	color: var(--apw-muted);
}

.apw-dim__unit {
	text-transform: none;
	letter-spacing: 0;
}

/* Horizontal (largura) */
.apw-dim--width {
	left: 19%;
	right: 19%;
	height: 0;
}

.apw-dim--width.apw-dim--bottom { bottom: 8%; }
.apw-dim--width.apw-dim--top { top: 8%; }

.apw-dim--width .apw-dim__line {
	inset: 0;
	height: 1px; /* taste-skill-ignore: linha de cota do desenho técnico */
}

.apw-dim--width .apw-dim__line::before,
.apw-dim--width .apw-dim__line::after {
	top: calc(var(--apw-dim-tick) / -2);
	width: 1px;
	height: var(--apw-dim-tick);
}

.apw-dim--width .apw-dim__line::before { left: 0; }
.apw-dim--width .apw-dim__line::after { right: 0; }

/* Vertical (altura) */
.apw-dim--height {
	top: 19%;
	bottom: 19%;
	width: 0;
	flex-direction: column;
}

.apw-dim--height.apw-dim--right { right: 8%; }
.apw-dim--height.apw-dim--left { left: 8%; }

.apw-dim--height .apw-dim__line {
	inset: 0;
	width: 1px;
}

.apw-dim--height .apw-dim__line::before,
.apw-dim--height .apw-dim__line::after {
	left: calc(var(--apw-dim-tick) / -2);
	width: var(--apw-dim-tick);
	height: 1px; /* taste-skill-ignore: linha de cota do desenho técnico */
}

.apw-dim--height .apw-dim__line::before { top: 0; }
.apw-dim--height .apw-dim__line::after { bottom: 0; }

/* Diagonal (profundidade), no canto de baixo */
.apw-dim--length {
	bottom: 10%;
	width: 7%;
	aspect-ratio: 1;
}

.apw-dim--length.apw-dim--bottom-left { left: 9%; }
.apw-dim--length.apw-dim--bottom-right { right: 9%; }

.apw-dim--length .apw-dim__line {
	left: 50%;
	top: 50%;
	width: 1px;
	height: 141%;
	translate: -50% -50%;
	rotate: 45deg;
}

.apw-dim--length.apw-dim--bottom-right .apw-dim__line {
	rotate: -45deg;
}

.apw-dim--length .apw-dim__line::before,
.apw-dim--length .apw-dim__line::after {
	left: calc(var(--apw-dim-tick) / -2);
	width: var(--apw-dim-tick);
	height: 1px; /* taste-skill-ignore: linha de cota do desenho técnico */
}

.apw-dim--length .apw-dim__line::before { top: 0; }
.apw-dim--length .apw-dim__line::after { bottom: 0; }

/* Texto ao longo da linha: início ou fim (o meio é o padrão). */
.apw-specs__diagram--align-start .apw-dim:not(.apw-dim--length) { justify-content: flex-start; }
.apw-specs__diagram--align-end .apw-dim:not(.apw-dim--length) { justify-content: flex-end; }
.apw-specs__diagram--align-start .apw-dim--width .apw-dim__tag,
.apw-specs__diagram--align-end .apw-dim--width .apw-dim__tag { margin: 0 calc(var(--apw-dim-gap) * 1.5); }
.apw-specs__diagram--align-start .apw-dim--height .apw-dim__tag,
.apw-specs__diagram--align-end .apw-dim--height .apw-dim__tag { margin: calc(var(--apw-dim-gap) * 1.5) 0; }

/* Texto ao lado da linha: fora (longe do produto) ou dentro (voltado para ele). */
.apw-specs__diagram--text-outside .apw-dim--bottom .apw-dim__tag,
.apw-specs__diagram--text-inside .apw-dim--top .apw-dim__tag { translate: 0 calc(50% + var(--apw-dim-gap)); }

.apw-specs__diagram--text-outside .apw-dim--top .apw-dim__tag,
.apw-specs__diagram--text-inside .apw-dim--bottom .apw-dim__tag { translate: 0 calc(-50% - var(--apw-dim-gap)); }

.apw-specs__diagram--text-outside .apw-dim--right .apw-dim__tag,
.apw-specs__diagram--text-inside .apw-dim--left .apw-dim__tag { translate: calc(50% + var(--apw-dim-gap)) 0; }

.apw-specs__diagram--text-outside .apw-dim--left .apw-dim__tag,
.apw-specs__diagram--text-inside .apw-dim--right .apw-dim__tag { translate: calc(-50% - var(--apw-dim-gap)) 0; }

/* Profundidade: o texto fica ao lado do traço diagonal (por fora = longe do produto). */
.apw-specs__diagram:not(.apw-specs__diagram--text-inline) .apw-dim--length .apw-dim__tag {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
}

.apw-specs__diagram--text-outside .apw-dim--bottom-left .apw-dim__tag,
.apw-specs__diagram--text-inside .apw-dim--bottom-right .apw-dim__tag { right: calc(100% + var(--apw-dim-gap)); }

.apw-specs__diagram--text-outside .apw-dim--bottom-right .apw-dim__tag,
.apw-specs__diagram--text-inside .apw-dim--bottom-left .apw-dim__tag { left: calc(100% + var(--apw-dim-gap)); }

/* Fora ou dentro da linha, o texto não precisa de fundo para cortá-la. */
.apw-specs__diagram:not(.apw-specs__diagram--text-inline) .apw-dim__tag {
	padding: 0;
	background: none;
}

/* Texto da altura na vertical, lido de baixo para cima. */
.apw-specs__diagram--vtext-vertical .apw-dim--height .apw-dim__tag {
	writing-mode: vertical-rl;
	rotate: 180deg;
}

.apw-specs__diagram--vtext-vertical.apw-specs__diagram--text-inline .apw-dim--height .apw-dim__tag {
	padding: 8px 4px;
}

/* Entrada: as linhas crescem do centro e o texto aparece depois. */
.apw-reveal .apw-dim--width .apw-dim__line { transform: scaleX(0); }
.apw-reveal .apw-dim:is(.apw-dim--height, .apw-dim--length) .apw-dim__line { transform: scaleY(0); }
.apw-reveal .apw-dim__tag { opacity: 0; }

.apw-reveal.is-visible .apw-dim .apw-dim__line {
	transform: none;
	transition: transform 1.1s var(--apw-ease-in-out) 0.35s;
}

.apw-reveal.is-visible .apw-dim--height .apw-dim__line { transition-delay: 0.55s; }
.apw-reveal.is-visible .apw-dim--length .apw-dim__line { transition-delay: 0.75s; }

.apw-reveal.is-visible .apw-dim__tag {
	opacity: 1;
	transition: opacity 0.5s ease 1.1s;
}

/* Números grandes */
.apw-specs__data {
	display: flex;
	flex-direction: column;
	text-align: var(--apw-dims-align, left);
	gap: 36px;
}

.apw-specs__numbers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 32px;
	margin: 0;
}

.apw-specs__row {
	display: flex;
	flex-direction: column-reverse;
	align-items: var(--apw-dims-items, flex-start);
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.apw-specs__row[hidden] {
	display: none;
}

.apw-specs .apw-specs__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--apw-label-tracking);
	text-transform: uppercase; /* taste-skill-ignore: rótulos no padrão do site da marca */
	color: var(--apw-muted);
}

.apw-specs .apw-specs__value {
	margin: 0;
	font-family: var(--apw-font-heading);
	font-size: clamp(26px, 2.2vw, 36px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--apw-dark);
}

.apw-specs__row--extra .apw-specs__value {
	font-size: clamp(20px, 1.6vw, 26px);
}

.apw-specs .apw-specs__unit {
	font-family: var(--apw-font-text);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--apw-muted);
}

/* Valor que muda com a variação: troca com desfoque breve. */
.apw-specs [data-dim] {
	display: inline-block;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.apw-specs [data-dim].is-swapping {
	opacity: 0;
	filter: blur(4px);
}

/* ---------------------------------------------------------------------
 * Acabamentos junto das dimensões: título, nome do grupo ("CORES — verde")
 * e bolinhas, abaixo dos números
 * ------------------------------------------------------------------ */

.apw-specs__finishes--inline {
	--apw-finish-size: 40px;

	display: flex;
	flex-direction: column;
	align-items: var(--apw-dims-items, flex-start);
	gap: 18px;
	margin-top: 8px;
	padding-top: 28px;
	text-align: var(--apw-dims-align, left);
}

.apw-specs .apw-specs__subtitle {
	margin: 0;
	font-family: var(--apw-font-heading);
	font-size: 18px;
	font-weight: var(--apw-heading-weight);
	line-height: 1.3;
	letter-spacing: var(--apw-heading-tracking);
	text-transform: var(--apw-heading-case);
	color: var(--apw-dark);
}

.apw-specs__finishes--inline .apw-specs__groups {
	gap: 18px;
}

.apw-specs__finishes--inline .apw-specs__group-name {
	margin-bottom: 12px;
}

.apw-specs__finishes--inline .apw-specs__finish-list {
	justify-content: var(--apw-dims-items, flex-start);
	gap: 14px 18px;
}

/* Bolinhas: cor, foto do material ou inicial; a escolhida ganha um anel cobre afastado. */
.apw-specs__finishes--inline .apw-finish__swatch {
	margin-bottom: 6px;
	overflow: visible;
	border-radius: 50%;
	transition: transform 0.2s var(--apw-ease);
}

.apw-specs__finishes--inline .apw-finish__swatch img {
	border-radius: 50%;
}

.apw-specs__finishes--inline .apw-finish__initial {
	font-size: 15px;
}

.apw-specs__finishes--inline .apw-finish__swatch::after {
	inset: -5px;
	border: 1.5px solid var(--apw-brand);
	border-radius: 50%;
	box-shadow: none; /* taste-skill-ignore: zera o anel interno do layout de quadro */
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.2s ease, transform 0.3s var(--apw-ease);
}

.apw-specs__finishes--inline .apw-finish[aria-pressed="true"] .apw-finish__swatch::after {
	border-width: 1.5px;
	box-shadow: none; /* taste-skill-ignore: idem */
	opacity: 1;
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.apw-specs__finishes--inline button.apw-finish:hover .apw-finish__swatch {
		transform: scale(1.08);
	}
}

.apw-specs__finishes--inline .apw-finish__name {
	font-size: 12px;
	color: var(--apw-muted);
}

.apw-specs__finishes--inline .apw-finish[aria-pressed="true"] .apw-finish__name {
	color: var(--apw-dark);
}

@media (max-width: 1024px) {
	.apw-specs__finishes,
	.apw-specs__dimensions.has-diagram {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {

	.apw-specs .apw-dim__tag {
		font-size: 12px;
	}

	.apw-dim {
		--apw-dim-gap: 8px;
		--apw-dim-tick: 8px;
	}

	/* Celular: textos sempre do lado de dentro da tela (por fora sairiam da borda). */
	.apw-specs__diagram:not(.apw-specs__diagram--text-inline) .apw-dim--length .apw-dim__tag {
		top: auto;
		bottom: calc(100% + 4px);
		right: auto;
		left: 50%;
		translate: -50% 0;
	}

	.apw-specs__diagram:not(.apw-specs__diagram--text-inline) .apw-dim--right .apw-dim__tag {
		translate: calc(-50% - var(--apw-dim-gap)) 0;
	}

	.apw-specs__diagram:not(.apw-specs__diagram--text-inline) .apw-dim--left .apw-dim__tag {
		translate: calc(50% + var(--apw-dim-gap)) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apw-specs * {
		transition: none !important;
	}

	.apw-reveal .apw-dim__line {
		transform: none;
	}

	.apw-reveal .apw-dim__tag {
		opacity: 1;
	}
}