/**
 * Estilos dos blocos do plugin na página de produto.
 *
 * Independentes do tema: só usam classes próprias (prefixo .witeec-) e
 * variáveis CSS com fallback, para não brigar com Elementor/Woodmart.
 */

:root {
	--witeec-borda: #e5e3df;
	--witeec-fundo: #f7f6f4;
	--witeec-specs-fundo: #e0e5e8;
	--witeec-texto: #2b2b2b;
	--witeec-suave: #6b6b6b;
	--witeec-destaque: #8a6d3b;
	--witeec-raio: 10px;
}

/* ---------------------------------------------------------------- Blocos */

.witeec-bloco {
	margin: 2rem 0;
}

.witeec-bloco__titulo {
	font-size: 1.25rem;
	margin: 0 0 1rem;
	color: var(--witeec-texto);
}

/* ----------------------------------------------------------- Variações */

.witeec-variacoes {
	margin: 1.25rem 0;
}

.witeec-variacoes__label {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	color: var(--witeec-suave);
}

.witeec-variacoes__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.witeec-variacao__opcao {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.15rem;
	/* Variáveis dedicadas (configuráveis em Conteúdo & Blocos), com fallback
	   pro visual padrão — quem não customiza nada não vê diferença nenhuma. */
	border: var(--witeec-variacao-borda-largura, 1px) solid var(--witeec-variacao-borda, var(--witeec-borda));
	border-radius: var(--witeec-variacao-raio, var(--witeec-raio));
	background: var(--witeec-variacao-bg, #fff);
	color: var(--witeec-variacao-texto, var(--witeec-texto));
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.witeec-variacao__opcao:hover,
a.witeec-variacao__opcao:focus {
	border-color: var(--witeec-variacao-ativa-bg, var(--witeec-destaque));
	text-decoration: none;
}

.witeec-variacao.is-ativa .witeec-variacao__opcao {
	background: var(--witeec-variacao-ativa-bg, var(--witeec-destaque));
	border-color: var(--witeec-variacao-ativa-bg, var(--witeec-destaque));
	color: var(--witeec-variacao-ativa-texto, #fff);
	cursor: default;
}

/* Swatch de cor: o WS entrega o hexadecimal, exibido como bolinha. */
.witeec-variacao__swatch {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: var(--witeec-swatch, #ccc);
	flex: 0 0 auto;
}

/* -------------------------------------------------- Especificações */

.witeec-specs {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--witeec-borda);
	border-radius: var(--witeec-raio);
	overflow: hidden;
}

.witeec-specs th,
.witeec-specs td {
	padding: 0.85rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--witeec-borda);
	font-size: 0.98rem;
}

.witeec-specs tr:last-child th,
.witeec-specs tr:last-child td {
	border-bottom: 0;
}

.witeec-specs th {
	width: 32%;
	white-space: nowrap;
	color: var(--witeec-texto);
	font-weight: 600;
	background: var(--witeec-specs-fundo);
}

.witeec-specs__nota {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: var(--witeec-suave);
}

/* --------------------------------------------------------- Uso */

.witeec-uso {
	margin: 0;
	padding-left: 1.25rem;
}

.witeec-uso li {
	margin-bottom: 0.6rem;
	line-height: 1.55;
}

/* --------------------------------------------------- Downloads */

.witeec-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.witeec-download__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	color: var(--witeec-texto);
	text-decoration: none;
}

.witeec-download__link:hover {
	color: var(--witeec-destaque);
}

.witeec-download__icone {
	font-size: 0.85em;
	opacity: 0.6;
}

.witeec-download__arquivo {
	display: block;
	font-size: 0.85rem;
	color: var(--witeec-suave);
	margin-top: 0.15rem;
}

/* ------------------------------------------------------- Vídeo */

.witeec-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--witeec-raio);
	overflow: hidden;
	background: #000;
}

.witeec-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------ Relacionados */

.witeec-relacionados {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}

.witeec-relacionado a {
	display: block;
	color: var(--witeec-texto);
	text-decoration: none;
}

.witeec-relacionado__img {
	width: 100%;
	height: auto;
	border-radius: var(--witeec-raio);
	border: 1px solid var(--witeec-borda);
	background: #fff;
}

.witeec-relacionado__nome {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.35;
}

/* --------------------------------------------------- Vantagens */

.witeec-vantagens {
	margin: 2.5rem 0;
	padding: 1.5rem;
	/* Configurável em Conteúdo & Blocos, com fallback pro visual padrão. */
	background: var(--witeec-vantagens-fundo, var(--witeec-fundo));
	border-top: 3px solid var(--witeec-vantagens-destaque, transparent);
	border-radius: calc(var(--witeec-raio) * 1.6);
}

.witeec-vantagens__titulo {
	margin: 0 0 1.25rem;
	font-size: 1.3rem;
	color: var(--witeec-vantagens-titulo, var(--witeec-destaque));
}

.witeec-vantagens__titulo strong {
	color: var(--witeec-vantagens-destaque, inherit);
}

.witeec-vantagens__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	/* Mesma cor configurada em "Cor de fundo dos cards" — sem isso, uma
	   célula vazia (quando o número de cards não fecha a última linha)
	   ou a fresta de 1px entre cards mostrava a cor cinza/bege GLOBAL do
	   tema (--witeec-borda), que não tinha campo de configuração nenhum. */
	background: var(--witeec-vantagens-card-bg, var(--witeec-borda));
	border: 1px solid var(--witeec-borda);
	border-radius: var(--witeec-raio);
	overflow: hidden;
}

.witeec-card {
	background: var(--witeec-vantagens-card-bg, #fff);
	padding: 1.25rem;
}

.witeec-card__titulo {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.witeec-card__texto {
	margin: 0;
	color: var(--witeec-suave);
	font-size: 0.95rem;
	line-height: 1.5;
}

.witeec-card__logo {
	max-width: 200px;
	height: auto;
	margin-top: 0.5rem;
}

.witeec-card__marca-nome {
	margin: 0.5rem 0 0;
	font-size: 1.4rem;
	font-weight: 700;
}

.witeec-pagamento {
	margin-top: 1px;
	background: #fff;
	border: 1px solid var(--witeec-borda);
	border-top: 0;
	border-radius: 0 0 var(--witeec-raio) var(--witeec-raio);
	padding: 1.25rem;
}

.witeec-pagamento__titulo {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--witeec-vantagens-destaque, var(--witeec-texto));
}

.witeec-pagamento__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.witeec-pagamento__item h4 {
	margin: 0 0 0.3rem;
	font-size: 1rem;
	font-weight: 600;
}

.witeec-pagamento__item p {
	margin: 0;
	color: var(--witeec-suave);
	font-size: 0.92rem;
}

.witeec-bandeiras {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	padding: 0;
}

.witeec-bandeiras li {
	flex: 0 0 auto;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--witeec-borda);
	border-radius: 4px;
	font-size: 0.78rem;
	white-space: nowrap;
	color: var(--witeec-suave);
	background: var(--witeec-fundo);
}

/* ------------------------------------------ Selo na listagem */

.witeec-loop-badge {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.35rem 0;
}

.witeec-loop-badge__logo {
	/* Configurável em Conteúdo & Blocos, com fallback pro tamanho padrão. */
	max-height: var(--witeec-loop-badge-logo, 18px);
	width: auto;
}

.witeec-loop-badge__marca {
	font-size: var(--witeec-loop-badge-texto, 0.75rem);
	font-weight: 600;
	color: var(--witeec-texto);
}

.witeec-loop-badge__sku {
	font-size: var(--witeec-loop-badge-texto, 0.78rem);
	color: var(--witeec-suave);
}

/* --------------------------------------------------------- SKU */

.witeec-sku {
	margin: 0.25rem 0 0.75rem;
	font-size: 0.9rem;
	color: var(--witeec-suave);
}

.witeec-sku__valor {
	font-weight: 600;
	color: var(--witeec-texto);
}

/* --------------------------------------------------- Logo da marca */

.witeec-marca-logo {
	/* Negativa de propósito: aproxima do título logo abaixo (pedido do Élisson). */
	margin: 0 0 -0.35rem;
	line-height: 0;
}

.witeec-marca-logo__img {
	max-height: 42px;
	width: auto;
}

/* --------------------------------------- Fatos em destaque (descrição) */

.witeec-fatos {
	list-style: none;
	margin: 0.75rem 0 1.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.witeec-fatos li {
	font-size: 0.95rem;
	color: var(--witeec-texto);
}

/* --------------------------------------------------- Responsivo */

@media (max-width: 600px) {
	.witeec-specs th {
		width: 42%;
		white-space: normal;
	}

	.witeec-vantagens {
		padding: 1rem;
	}
}