/*
 * Vitrine do produto. Tokens da marca em common.css.
 * "Cantos" (Ref. A): produto no centro do campo; nome no canto inferior esquerdo; acabamentos e botão
 * no canto inferior direito; miniaturas em coluna à esquerda.
 * "Card" (Ref. C): produto à esquerda com setas nas bordas; card branco à direita.
 */

.apw-showcase {
	--apw-showcase-bg: var(--apw-white);
	--apw-showcase-height: min(90vh, 960px);
	--apw-showcase-pad-y: clamp(28px, 4vw, 64px);
	--apw-showcase-pad-x: clamp(16px, 4.5vw, 80px);

	position: relative;
	overflow: hidden;
	font-family: var(--apw-font-text);
	color: var(--apw-dark);
	background: var(--apw-showcase-bg);
}

.apw-showcase__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	min-height: var(--apw-showcase-height);
	padding: var(--apw-showcase-pad-y) var(--apw-showcase-pad-x);
}

/* A galeria interna usa o campo da vitrine e não desenha o próprio. */
.apw-showcase .apw-gallery {
	--apw-stage-bg: var(--apw-showcase-bg);
	--apw-stage-pad: 0px;
	--apw-thumb-size: 72px;
}

.apw-showcase .apw-gallery__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.apw-showcase .apw-gallery .apw-gallery__img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(var(--apw-showcase-height) - 2 * var(--apw-showcase-pad-y));
	margin: 0 auto;
}

/* Nome do produto: vitrine editorial, entra por trás de uma máscara. */
.apw-showcase .apw-showcase__title {
	margin: 0;
	overflow: hidden;
	padding-bottom: 0.08em;
	font-family: var(--apw-font-heading);
	font-size: var(--apw-size-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--apw-dark);
	text-wrap: balance;
}

.apw-showcase__title-text {
	display: block;
	animation: apw-mask-up 1.1s var(--apw-ease) 0.15s both;
}

.apw-showcase .apw-showcase__cat {
	display: inline-block;
	margin-bottom: 14px;
	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 ("CONHEÇA", "NOS ACOMPANHE") */
	color: var(--apw-brand);
	text-decoration: none;
	animation: apw-rise 0.8s var(--apw-ease) both;
}

.apw-showcase .apw-showcase__cat:is(:hover, :focus) {
	color: var(--apw-dark);
}

.apw-showcase .apw-showcase__subtitle {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--apw-muted);
	animation: apw-rise 0.8s var(--apw-ease) 0.3s both;
}

.apw-showcase__info .apw-price {
	margin-top: 22px;
	animation-delay: 0.4s;
}

/* O bloco de compra dentro da vitrine: sem rótulos repetidos, botão compacto. */
.apw-showcase .apw-purchase {
	--apw-swatch-size: 30px;
	--apw-row-gap: 20px;
}

.apw-showcase .elementor-widget-container,
.apw-showcase .elementor-element {
	width: 100%;
}

/* ---------------------------------------------------------------------
 * Cantos (Ref. A)
 * ------------------------------------------------------------------ */

@media (min-width: 1025px) {
	/* Três colunas: miniaturas + nome à esquerda, produto no centro, compra à direita. */
	.apw-showcase--corners .apw-showcase__stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		column-gap: clamp(24px, 3vw, 56px);
	}

	/* A galeria ocupa a faixa toda; a foto fica presa à coluna do centro. */
	.apw-showcase--corners .apw-showcase__gallery {
		grid-row: 1 / 3;
		grid-column: 1 / 4;
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	.apw-showcase--corners .apw-gallery {
		--apw-image-max: 100%;
		width: 100%;
		align-items: start;
	}

	.apw-showcase--corners .apw-gallery__stage {
		width: calc(100% / 4.1 * 2.1);
		margin: 0 auto;
	}

	.apw-showcase--corners .apw-gallery--thumbs-left {
		grid-template-columns: 0 minmax(0, 1fr);
	}

	.apw-showcase--corners .apw-gallery__thumbs {
		position: absolute;
		top: 0;
		left: 0;
	}

	.apw-showcase--corners .apw-showcase__panel {
		display: contents;
	}

	.apw-showcase--corners .apw-showcase__info {
		grid-row: 2;
		grid-column: 1;
		align-self: end;
		position: relative;
		z-index: 2;
	}

	.apw-showcase--corners .apw-showcase__buy {
		grid-row: 2;
		grid-column: 3;
		align-self: end;
		position: relative;
		z-index: 2;
	}

	.apw-showcase--corners .apw-showcase__title {
		font-size: var(--apw-size-display);
	}

	.apw-showcase--corners .apw-purchase {
		--apw-cta-grow: 1;
		align-items: stretch;
	}

	.apw-showcase--corners .apw-purchase__attributes,
	.apw-showcase--corners .apw-purchase__label {
		text-align: right;
	}

	.apw-showcase--corners .apw-attr__options,
	.apw-showcase--corners .apw-purchase__actions {
		justify-content: flex-end;
	}
}

/* Bolinhas de acabamento (produto sem variação de acabamento), como na Ref. A. */
.apw-showcase__finishes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 20px;
}

.apw-showcase__dots {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apw-showcase__dot {
	width: 28px;
	height: 28px;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
	background: var(--apw-swatch-color, #d9d9d9);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); /* taste-skill-ignore: contorno da bolinha clara */
	animation: apw-rise 0.6s var(--apw-ease) both;
}

.apw-showcase__dot:nth-child(2) { animation-delay: 60ms; }
.apw-showcase__dot:nth-child(3) { animation-delay: 120ms; }
.apw-showcase__dot:nth-child(n + 4) { animation-delay: 180ms; }

.apw-showcase__dot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apw-showcase .apw-showcase__finishes-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--apw-dark);
	text-decoration: underline;
	text-decoration-color: var(--apw-line-strong);
	text-underline-offset: 4px;
}

.apw-showcase .apw-showcase__finishes-link:is(:hover, :focus) {
	text-decoration-color: currentColor;
}

@media (max-width: 1024px) {
	.apw-showcase__finishes {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------
 * Card flutuante (Ref. C)
 * ------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.apw-showcase--card .apw-showcase__stage {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
		align-items: center;
		gap: clamp(32px, 4vw, 72px);
	}

	.apw-showcase--card .apw-showcase__panel {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: clamp(28px, 3vw, 48px);
		background: var(--apw-white);
		animation: apw-rise 0.9s var(--apw-ease) 0.2s both;
	}

	.apw-showcase--card .apw-showcase__title {
		font-size: clamp(28px, 2.4vw, 40px);
	}
}

/* ---------------------------------------------------------------------
 * Tablet e celular: uma coluna (galeria, nome, compra)
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.apw-showcase {
		--apw-showcase-height: auto;
	}

	.apw-showcase__panel {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.apw-showcase .apw-gallery .apw-gallery__img {
		max-height: 42vh;
	}

	.apw-showcase--card .apw-showcase__panel {
		padding: 28px 20px;
		background: var(--apw-white);
	}
}

.elementor-editor-active .apw-showcase :is(.apw-showcase__title-text, .apw-showcase__cat, .apw-showcase__subtitle, .apw-showcase__panel) {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.apw-showcase *,
	.apw-showcase__title-text {
		animation: none;
	}
}
