/**
 * Global/Rodapé — Figma 61:458.
 *
 * Tokens próprios (theme.json › custom.rodape): bg, line, text, textMuted. Trocar os
 * quatro muda o rodapé inteiro (ex.: rodapé escuro) sem tocar neste arquivo.
 *
 * Medidas: borda de cima 1px · padding 64 / container-x · blocos com gap 48
 *   colunas: flex-wrap, gap 40/32 · marca mín. 280 (gap 16) · links mín. 160 (gap 8) · contato mín. 220 (gap 16)
 *   título de coluna: Overline 12 maiúsculo (+8%) · links Caption 14 com área de toque (padding 10 0)
 *   redes: ícone 20 em área de 44, gap 8 · contato: ícone 16 brand-text + Caption 14
 *   faixa pagamento/envio/segurança: borda de cima, padding-top 32, gap 32/48, blocos mín. 220 (gap 16)
 *   pagamento 43,75×30, gap 8 · envio: ícone 20 + Caption 14 · selo 109×44, borda 1px, raio 7
 *   aviso legal: Caption 14 text-muted, largura toda
 *   base: borda de cima, padding-top 24 · texto Caption 14 · links legais sublinhados, gap 4/16 · crédito 207×17.
 * As colunas quebram sozinhas em telas estreitas (flex-wrap).
 */

.cdw-rodape {
	border-top: 1px solid var(--wp--custom--rodape--line);
	background: var(--wp--custom--rodape--bg);
	color: var(--wp--custom--rodape--text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-rodape__conteiner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-48);
	max-width: var(--wp--custom--layout--container-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--space-64) var(--wp--preset--spacing--space-24);
}

.cdw-rodape ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-rodape a {
	color: inherit;
	text-decoration: none;
}

.cdw-rodape a:hover {
	color: var(--wp--custom--rodape--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Colunas ---------- */

.cdw-rodape__colunas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px var(--wp--preset--spacing--space-32);
}

.cdw-rodape__marca {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-16);
	min-width: min(280px, 100%);
}

.cdw-rodape__logo {
	/* Figma: caixa do logo 210×70, arte centralizada (mesma do cabeçalho). */
	width: 210px;
	max-width: 100%;
	height: 70px;
}

.cdw-rodape__logo .cdw-logo__texto {
	color: var(--wp--custom--rodape--text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: var(--wp--custom--weight--heavy);
}

.cdw-rodape__descricao {
	margin: 0;
}

.cdw-rodape__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-rodape__rede {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--custom--rodape--text) !important;
	font-size: 20px;
}

.cdw-rodape__rede:hover {
	color: var(--wp--preset--color--brand-text) !important;
}

.cdw-rodape__coluna {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	min-width: min(160px, 100%);
}

.cdw-rodape__coluna--contato {
	gap: var(--wp--preset--spacing--space-16);
	min-width: min(220px, 100%);
}

.cdw-rodape__titulo {
	margin: 0;
	color: var(--wp--custom--rodape--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-rodape__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-rodape__links a {
	display: block;
	padding: 10px 0;
}

.cdw-rodape__contatos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
}

/* Figma: ícone 20×20 centralizado na altura do texto (no endereço de 2 linhas fica no meio). */
.cdw-rodape__contato {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
	overflow-wrap: anywhere;
}

.cdw-rodape__contato .cdw-icone {
	flex-shrink: 0;
	width: 20px;
	color: var(--wp--preset--color--brand-text);
	font-size: 16px;
}

/* ---------- Pagamento · envio · segurança ---------- */

.cdw-rodape__faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-48);
	padding-top: var(--wp--preset--spacing--space-32);
	border-top: 1px solid var(--wp--custom--rodape--line);
}

.cdw-rodape__bloco {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
	min-width: min(220px, 100%);
}

.cdw-rodape__pagamentos,
.cdw-rodape__selos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-rodape__pagamentos img {
	display: block;
	width: 43.75px;
	height: 30px;
}

.cdw-rodape__envios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--wp--preset--spacing--space-16);
}

/* Figma: selo de 25 px de altura (ícone numa caixa 25×25, texto centralizado). */
.cdw-rodape__envio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-height: 25px;
	color: var(--wp--custom--rodape--text);
}

.cdw-rodape__envio .cdw-icone {
	width: 25px;
	font-size: 20px;
}

/* Figma (selo/…): 109,22×43,82 · padding 5,232/10,464 · borda 0,654 #D0D5DD (CINZA/300, não é token
   do tema) · raio 7,396 · arte 88,29×33,36 com raio 8,681, alinhada no topo à esquerda. */
.cdw-rodape__selo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 109.22px;
	height: 43.82px;
	padding: 5.232px 10.464px;
	border: 0.654px solid #d0d5dd;
	border-radius: 7.396px;
	background: var(--wp--preset--color--surface);
}

.cdw-rodape__selo img {
	display: block;
	flex-shrink: 0;
	width: 88.29px;
	max-width: none;
	height: 33.36px;
	border-radius: 8.681px;
	object-fit: cover;
}

/* Figma: só o "Site protegido" (arte mais larga, 3,4:1) fica inteiro dentro da caixa. */
.cdw-rodape__selo img[src*="site-protegido"] {
	object-fit: contain;
}

/* ---------- Base ---------- */

.cdw-rodape__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--wp--preset--spacing--space-16);
	padding-top: var(--wp--preset--spacing--space-24);
	border-top: 1px solid var(--wp--custom--rodape--line);
}

.cdw-rodape__legal {
	display: flex;
	flex: 1 0 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-16);
	min-width: min(340px, 100%);
}

.cdw-rodape__razao {
	min-width: min(280px, 100%);
	margin: 0;
}

/* Figma "links legais": Política de privacidade · Trocas e devoluções, sublinhados. */
.cdw-rodape__legais {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-8);
}

.cdw-rodape__legais li + li::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--space-8);
}

.cdw-rodape .cdw-rodape__legais a {
	display: inline-block;
	padding-block: 10px; /* Área de toque de 41 px, como os links das colunas. */
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cdw-rodape__aviso {
	margin: 0;
}

.cdw-rodape__credito {
	display: block;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--sm);
}

.cdw-rodape__credito img {
	display: block;
	/* Figma: 207,35×17,44. */
	width: 207.35px;
	height: 17.44px;
}

.cdw-rodape__credito:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 4px;
}

/* Mobile (Figma 276:18562): mesmas medidas do desktop — padding 64/24 e blocos com gap 48.
   A área de toque dos links cresce por cima do vão, sem mover o texto. */
@media (max-width: 781px) {
	.cdw-rodape__links a,
	.cdw-rodape .cdw-rodape__legais a,
	.cdw-rodape__contato a,
	.cdw-rodape__credito {
		position: relative;
	}

	.cdw-rodape__links a::after,
	.cdw-rodape .cdw-rodape__legais a::after,
	.cdw-rodape__contato a::after,
	.cdw-rodape__credito::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Os legais ficam lado a lado, com um vão de 20 px: o clique ocupa esse vão. */
	.cdw-rodape .cdw-rodape__legais a::after {
		width: calc(100% + 20px);
	}
}