/* 6.1 Galeria do produto. Cores e fontes padrão vêm dos tokens da marca (common.css). */

.apw-gallery {
	--apw-stage-bg: var(--apw-white);                     /* campo onde o produto flutua (Ref. A / B) */
	--apw-stage-pad: clamp(16px, 3vw, 48px);
	--apw-image-max: 100%;
	--apw-ratio: 1 / 1;
	--apw-thumb-size: 64px;
	--apw-thumb-gap: 16px;
	--apw-thumb-opacity: 0.45;
	--apw-thumb-border: transparent;
	--apw-thumb-border-width: 0px;
	--apw-thumb-active-border: var(--apw-dark);
	--apw-arrow-box: 44px;
	--apw-arrow-icon: 16px;
	--apw-arrow-color: var(--apw-dark);
	--apw-arrow-color-hover: var(--apw-white);
	--apw-arrow-bg: var(--apw-white);
	--apw-arrow-bg-hover: var(--apw-dark);
	--apw-arrow-border: transparent;
	--apw-arc-color: var(--apw-brand-soft);
	--apw-arc-size: 88%;
	--apw-arc-width: 1px;

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage";
	gap: var(--apw-thumb-gap);
	align-items: start;
}

/* Padrões de cada layout (os controles de estilo do widget sobrescrevem). */
/* Layout C: miniaturas maiores sobre um passo de tom, todas visíveis. */
.apw-gallery--layout-c {
	--apw-thumb-size: 80px;
	--apw-thumb-opacity: 0.6;
}

.apw-gallery.apw-gallery--layout-c .apw-gallery__thumb,
.apw-gallery.apw-gallery--layout-c .apw-gallery__thumb:is(:hover, :focus) {
	background: var(--apw-fill, rgba(152, 86, 48, 0.07));
}

.apw-gallery--arrows-sides {
	--apw-arrow-box: 60px;
	--apw-arrow-icon: 22px;
}

.apw-gallery--ratio-1-1 { --apw-ratio: 1 / 1; }
.apw-gallery--ratio-4-5 { --apw-ratio: 4 / 5; }
.apw-gallery--ratio-original { --apw-ratio: auto; }

/* Posição das miniaturas */
.apw-gallery--thumbs-left {
	grid-template-columns: var(--apw-thumb-size) minmax(0, 1fr);
	grid-template-areas: "thumbs stage";
}

.apw-gallery--thumbs-right {
	grid-template-columns: minmax(0, 1fr) var(--apw-thumb-size);
	grid-template-areas: "stage thumbs";
}

.apw-gallery--thumbs-bottom {
	grid-template-areas: "stage" "thumbs";
}

/* Palco */
.apw-gallery__stage {
	grid-area: stage;
	position: relative;
	min-width: 0;
	padding: var(--apw-stage-pad);
	background: var(--apw-stage-bg);
	animation: apw-settle 1.1s var(--apw-ease) both;
}

/* Entrada da galeria: o produto aparece e assenta no campo. */
@keyframes apw-settle {
	from {
		opacity: 0;
		transform: scale(0.985);
	}
}

.apw-gallery__viewport {
	position: relative;
	z-index: 1;
	max-width: var(--apw-image-max);
	margin-inline: auto;
	overflow: hidden;
}

.apw-gallery__track {
	display: flex;
}

.apw-gallery__slide {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Sem Swiper (sem JavaScript ou antes de iniciar): rolagem com encaixe, sem salto de layout. */
.apw-gallery__viewport:not(.swiper-initialized) .apw-gallery__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.apw-gallery__viewport:not(.swiper-initialized) .apw-gallery__track::-webkit-scrollbar {
	display: none;
}

.apw-gallery__viewport:not(.swiper-initialized) .apw-gallery__slide {
	scroll-snap-align: start;
}

.apw-gallery__link {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--apw-ratio);
	overflow: hidden;
	background: var(--apw-stage-bg);
	transition: transform 1.2s var(--apw-ease), filter 0.25s ease, opacity 0.25s ease;
}

/* Transição em fade: a imagem que entra assenta de 1,04 para 1. */
.apw-gallery__viewport.swiper-initialized .apw-gallery__slide:not(.swiper-slide-active) .apw-gallery__link {
	transform: scale(1.04);
}

/* Troca da imagem pela da variação: desfoque breve esconde o "pulo" entre as duas fotos. */
.apw-gallery__link.is-swapping {
	opacity: 0.4;
	filter: blur(6px);
}

/* Fotos de fundo branco se fundem ao campo: o produto flutua, como nas vitrines de mobília. */
.apw-gallery--blend .apw-gallery__img,
.apw-gallery--blend .apw-gallery__thumb img {
	mix-blend-mode: multiply;
}

/* Bordas da foto esfumadas (6%): recortes imperfeitos e fundos quase-brancos se dissolvem no campo. */
.apw-gallery--blend .apw-gallery__img {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); /* taste-skill-ignore: máscara de recorte, não é preenchimento em gradiente */
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); /* taste-skill-ignore: máscara de recorte, não é preenchimento em gradiente */
	mask-composite: intersect;
}

.apw-gallery--blend .apw-gallery__thumb {
	background: var(--apw-stage-bg);
}

.apw-gallery .apw-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.apw-gallery--ratio-original .apw-gallery__img {
	height: auto;
}

/* Zoom ao passar o mouse (ligado pelo JS só em dispositivos com mouse). */
.apw-gallery.has-zoom .apw-gallery__link {
	cursor: zoom-in;
}

.apw-gallery.has-zoom .apw-gallery__img {
	transition: transform 0.25s ease;
}

.apw-gallery.has-zoom .apw-gallery__link:hover .apw-gallery__img {
	transform: scale(2);
	transform-origin: var(--apw-zoom-x, 50%) var(--apw-zoom-y, 50%);
}

/* Arco decorativo (layout B): meio círculo atrás do produto, que se traça de cima para baixo.
   Fica dentro da imagem; com a fusão de fundo branco, ele aparece através da foto. */
.apw-gallery--arc .apw-gallery__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: min(var(--apw-arc-size), 100%);
	aspect-ratio: 1 / 2;
	translate: 0 -50%;
	border: var(--apw-arc-width) solid var(--apw-arc-color);
	border-left: 0;
	border-radius: 0 9999px 9999px 0;
	clip-path: inset(0 0 100% 0);
	animation: apw-arc-draw 1.8s var(--apw-ease-in-out) 0.35s forwards;
	pointer-events: none;
}

.apw-gallery--arc .apw-gallery__img {
	position: relative;
}

@keyframes apw-arc-draw {
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Botões: zera estilos de tema e do Kit (sem !important, só com especificidade). */
.apw-gallery .apw-gallery__arrow,
.apw-gallery .apw-gallery__thumb,
.apw-gallery .apw-gallery__dot {
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: 0;
	text-transform: none;
	border-radius: 0;
	box-shadow: none; /* taste-skill-ignore: neutraliza sombra do tema/Kit */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Setas */
.apw-gallery .apw-gallery__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--apw-arrow-box);
	height: var(--apw-arrow-box);
	color: var(--apw-arrow-color);
	background: var(--apw-arrow-bg);
	border: 1px solid var(--apw-arrow-border); /* taste-skill-ignore: transparente por padrão; existe para o controle de borda do widget */
	transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}

.apw-gallery .apw-gallery__arrow:is(:hover, :focus) {
	color: var(--apw-arrow-color-hover, var(--apw-arrow-color));
	background: var(--apw-arrow-bg-hover, var(--apw-arrow-bg));
	border-color: var(--apw-arrow-border);
}

.apw-gallery .apw-gallery__arrow:active:not(:disabled) {
	transform: scale(0.95);
}

.apw-gallery .apw-gallery__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.apw-gallery__arrow svg {
	width: var(--apw-arrow-icon);
	height: var(--apw-arrow-icon);
}

.apw-gallery--arrows-below .apw-gallery__arrows {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.apw-gallery--arrows-sides .apw-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	translate: 0 -50%;
}

.apw-gallery--arrows-sides .apw-gallery__arrow--prev { left: 0; }
.apw-gallery--arrows-sides .apw-gallery__arrow--next { right: 0; }

/* Miniaturas */
.apw-gallery__thumbs {
	grid-area: thumbs;
	display: flex;
	gap: var(--apw-thumb-gap);
	scrollbar-width: none;
	--apw-thumbs-span: calc(var(--apw-thumbs-visible, 4) * var(--apw-thumb-size) + (var(--apw-thumbs-visible, 4) - 1) * var(--apw-thumb-gap));
}

.apw-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.apw-gallery--thumbs-left .apw-gallery__thumbs,
.apw-gallery--thumbs-right .apw-gallery__thumbs {
	position: relative;
	flex-direction: column;
	max-height: var(--apw-thumbs-span);
	overflow-y: auto;
}

.apw-gallery--thumbs-bottom .apw-gallery__thumbs {
	position: relative;
	max-width: var(--apw-thumbs-span);
	overflow-x: auto;
}

.apw-gallery .apw-gallery__thumb {
	flex: 0 0 auto;
	display: block;
	width: var(--apw-thumb-size);
	height: var(--apw-thumb-size);
	position: relative;
	overflow: hidden;
	background: transparent;
	border: var(--apw-thumb-border-width) solid var(--apw-thumb-border); /* taste-skill-ignore: transparente por padrão; existe para o controle de borda do widget */
	opacity: var(--apw-thumb-opacity);
	transition: opacity 0.2s, border-color 0.2s;
}

.apw-gallery .apw-gallery__thumb:is(:hover, :focus) {
	background: transparent;
	opacity: 1;
}

/* Miniatura ativa: opacidade cheia e uma barra preenchida embaixo (sem contorno). */
.apw-gallery .apw-gallery__thumb::after {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	bottom: 4px;
	height: 2px;
	background: var(--apw-thumb-active-border);
	transform: scaleX(0);
	transition: transform 0.3s var(--apw-ease, ease);
}

.apw-gallery .apw-gallery__thumb.is-active {
	opacity: 1;
}

.apw-gallery .apw-gallery__thumb.is-active::after {
	transform: scaleX(1);
}

.apw-gallery__thumb img {
	transition: transform 0.3s var(--apw-ease, ease);
}

.apw-gallery .apw-gallery__thumb:hover img {
	transform: scale(1.06);
}

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

/* Pontinhos (só no celular) */
.apw-gallery__dots {
	display: none;
	justify-content: center;
	gap: 4px;
	margin-top: 16px;
}

.apw-gallery .apw-gallery__dot {
	position: relative;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 0;
}

.apw-gallery .apw-gallery__dot::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--apw-fill-strong);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s;
}

.apw-gallery .apw-gallery__dot:is(:hover, :focus) {
	background: transparent;
}

.apw-gallery .apw-gallery__dot.is-active::before {
	background: var(--apw-dark);
}

.apw-gallery :is(.apw-gallery__arrow, .apw-gallery__thumb, .apw-gallery__dot):focus-visible,
.apw-gallery .apw-gallery__link:focus-visible {
	outline: 2px solid var(--apw-dark);
	outline-offset: 2px;
}

/* Acompanha a rolagem: o elemento do Elementor que envolve o widget fica fixo na coluna. */
@media (min-width: 768px) {
	.elementor-widget-apw-gallery:has(> .elementor-widget-container > .apw-gallery--sticky),
	.elementor-widget-apw-gallery:has(> .apw-gallery--sticky) {
		position: sticky;
		top: var(--apw-sticky-top, 32px);
		align-self: flex-start;
		width: 100%;
	}

	.admin-bar .elementor-widget-apw-gallery:has(.apw-gallery--sticky) {
		top: calc(var(--apw-sticky-top, 32px) + 32px);
	}
}

/* Celular: imagem em largura total, pontinhos no lugar das miniaturas e setas. */
@media (max-width: 767px) {
	.apw-gallery--dots-mobile {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage";
	}

	.apw-gallery--dots-mobile .apw-gallery__thumbs,
	.apw-gallery--dots-mobile .apw-gallery__arrows {
		display: none;
	}

	.apw-gallery--dots-mobile .apw-gallery__dots {
		display: flex;
	}

	.apw-gallery--arrows-sides .apw-gallery__arrow {
		display: none;
	}

	.apw-gallery:not(.apw-gallery--arc-mobile) .apw-gallery__link::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apw-gallery *,
	.apw-gallery.has-zoom .apw-gallery__img {
		transition: none;
	}

	.apw-gallery__stage,
	.apw-gallery--arc .apw-gallery__link::before {
		animation: none;
		clip-path: none;
	}

	.apw-gallery__viewport.swiper-initialized .apw-gallery__slide:not(.swiper-slide-active) .apw-gallery__link {
		transform: none;
	}
}