/* Tenta esconder a galeria original do tema nos produtos com preview ativo,
   pra não ficar duas imagens na tela. Se sobrar algum resquício da galeria
   antiga, é preciso ajustar/adicionar o seletor certo do seu tema aqui. */
body.adt3lp-active .woocommerce-product-gallery,
body.adt3lp-active .woocommerce-product-gallery__wrapper,
body.adt3lp-active .elementor-widget-woocommerce-product-images {
	display: none !important;
}

/* Caixa da imagem fixa de prévia (independente da galeria/zoom do tema) */
.adt3lp-preview-box {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin-bottom: 8px;
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
	background: #fafafa;
	isolation: isolate; /* garante que o "mix-blend-mode" do baixo relevo sempre se misture com a imagem aqui dentro, mesmo se o tema tiver algo estranho nos elementos pais */
}

.adt3lp-preview-img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}

/* Miniaturas das outras fotos do produto, pra escolher qual aparece na caixa fixa */
.adt3lp-thumbs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	max-width: 380px;
}

.adt3lp-thumb {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.75;
}

.adt3lp-thumb:hover {
	opacity: 1;
}

.adt3lp-thumb.is-active {
	border-color: #d17a9a;
	opacity: 1;
}

.adt3lp-overlay {
	position: absolute;
	pointer-events: none;
	line-height: 1.2;
	white-space: nowrap; /* não quebra linha: cresce para a esquerda a partir da âncora */
	user-select: none;
	/* sem z-index aqui de propósito: criar um novo contexto de empilhamento
	   quebraria o mix-blend-mode do efeito Baixo relevo, que precisa "ver"
	   a imagem logo atrás dele */
}

/* Efeito Prata: gradiente metálico claro/escuro aplicado ao próprio texto */
.adt3lp-overlay.adt3lp-effect-prata {
	background: linear-gradient(180deg, #f7f7f7 0%, #b6b6b6 22%, #ffffff 45%, #8c8c8c 68%, #e8e8e8 85%, #ffffff 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.35) !important;
}

/* Efeito Dourado: cor sólida exata pedida pelo cliente (#F3D500), sem gradiente */
.adt3lp-overlay.adt3lp-effect-dourado {
	background: none !important;
	color: #F3D500 !important;
	-webkit-text-fill-color: #F3D500 !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.55) !important;
}

.adt3lp-canvas {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * Efeito Baixo relevo: NÃO usa mais CSS/mix-blend-mode (removido — dependia
 * demais de textura na foto e de detalhes frágeis de CSS). Agora é desenhado
 * pixel a pixel num <canvas> pelo JavaScript (veja live-preview.js), o que dá
 * um resultado mais parecido com um bisel/gravação de verdade e funciona em
 * qualquer imagem.
 */

.adt3lp-field-wrap {
	margin-bottom: 15px;
}

.adt3lp-counter {
	display: block;
	font-size: 12px;
	color: #888;
	text-align: right;
}

.adt3lp-effect-choice {
	margin-top: 4px;
	margin-bottom: 15px;
}

.adt3lp-effect-choice label {
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

.adt3lp-effect-options {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.adt3lp-effect-option {
	font-weight: 400 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.adt3lp-color-choice {
	margin-top: 4px;
	margin-bottom: 15px;
}

.adt3lp-color-choice label {
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

.adt3lp-color-options {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.adt3lp-color-option {
	font-weight: 400 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.adt3lp-color-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.adt3lp-color-swatch {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #ddd;
	box-shadow: 0 0 0 1px #fff inset;
}

.adt3lp-color-option input[type="radio"]:checked + .adt3lp-color-swatch {
	border-color: #333;
}

.adt3lp-color-name {
	font-size: 13px;
}