/**
 * Rodapé — quatro camadas.
 *
 * Estrutura da Bonfim Flores: faixa de confiança, grade de colunas, linha de
 * pagamento e segurança, barra escura no fim.
 */

/* ---------- 1. Faixa de confiança ---------- */

.jf-confianca {
	background-color: var(--jf-color-surface);
	border-top: 1px solid var(--jf-color-border);
	border-bottom: 1px solid var(--jf-color-border);
}

.jf-confianca__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.jf-selo {
	display: flex;
	align-items: flex-start;
	gap: var(--jf-space-2xs);
	padding: var(--jf-pad-md) var(--jf-space-md);
	border-left: 1px solid var(--jf-color-border);
}

.jf-selo:first-child {
	border-left: 0;
	padding-left: 0;
}

@media (max-width: 47.9375em) {
	.jf-selo {
		border-left: 0;
		border-top: 1px solid var(--jf-color-border);
		padding-left: 0;
	}

	.jf-selo:first-child {
		border-top: 0;
	}
}

.jf-selo__icone {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--jf-color-success);
}

.jf-selo__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-snug);
}

.jf-selo__texto strong {
	color: var(--jf-color-text);
}

.jf-selo__texto span {
	color: var(--jf-color-text-muted);
}

/* ---------- 2. Grade de colunas ---------- */

.jf-rodape {
	padding-top: var(--jf-space-2xl);
	padding-bottom: var(--jf-space-lg);
	background-color: var(--jf-color-bg);
}

.jf-rodape__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--jf-space-lg) var(--jf-space-md);
	padding-bottom: var(--jf-space-xl);
}

@media (min-width: 62em) {
	/* A marca leva duas colunas: o texto descritivo precisa de mais largura do
	   que uma lista de links. */
	.jf-rodape__marca {
		grid-column: span 2;
	}
}

.jf-rodape__marca {
	color: var(--jf-color-primary);
}

.jf-rodape__logo {
	display: block;
	width: auto;
	max-width: 12rem;
	height: auto;
	margin: 0;
}

.jf-rodape__descricao {
	margin: var(--jf-space-sm) 0 var(--jf-space-md);
	max-width: 32ch;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-normal);
}

.jf-rodape__redes {
	display: flex;
	gap: var(--jf-space-2xs);
}

.jf-rodape__rede {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jf-tap-min);
	height: var(--jf-tap-min);
	color: var(--jf-color-primary);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-pill);
}

.jf-rodape__rede:hover {
	background-color: var(--jf-color-primary-soft);
}

.jf-rodape__coluna ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-rodape__coluna li {
	max-width: none;
	margin: 0;
}

.jf-rodape__coluna a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	color: var(--jf-color-text);
	font-size: var(--jf-size-sm);
	text-decoration: none;
}

.jf-rodape__coluna a:hover {
	color: var(--jf-color-primary);
	text-decoration: underline;
}

.jf-rodape__contato li {
	display: flex;
	align-items: flex-start;
	gap: var(--jf-space-2xs);
	margin-bottom: var(--jf-space-2xs);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-snug);
}

.jf-rodape__contato svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--jf-color-primary);
}

.jf-rodape__contato a {
	min-height: 0;
	color: var(--jf-color-text-muted);
}

/* ---------- 3. Pagamento e segurança ---------- */

.jf-rodape__pagamento-seguranca {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--jf-space-lg) var(--jf-space-2xl);
	padding-top: var(--jf-space-lg);
	border-top: 1px solid var(--jf-color-border);
}

.jf-bandeiras {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-bandeiras li {
	margin: 0;
}

/* Chip branco com o logotipo oficial, como no checkout do Mercado Pago. O
   branco é deliberado mesmo sobre o bege: as marcas foram desenhadas para
   fundo claro neutro, e o Amex e o Visa perdem definição sobre tom quente. */
.jf-bandeira {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jf-space-3xs);
	min-width: 3.5rem;
	height: 2.5rem;
	padding: 0 var(--jf-space-2xs);
	background-color: var(--jf-color-surface);
	color: var(--jf-color-text);
	font-size: var(--jf-size-xs);
	font-weight: var(--jf-weight-semibold);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-sm);
}

/* Medidas nos atributos `width`/`height`, calculadas por logo em
   jf_bandeira(). O CSS só impede o `max-width: 100%` do tema pai de
   espremer o desenho. */
.jf-bandeira__logo {
	display: block;
	max-width: none;
	margin: 0;
}

.jf-rodape__nota {
	margin: var(--jf-space-sm) 0 0;
	max-width: none;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-xs);
}

.jf-rodape__seguranca {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--jf-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-rodape__seguranca li {
	display: flex;
	align-items: center;
	gap: var(--jf-space-2xs);
	max-width: none;
	margin: 0;
	padding: var(--jf-space-2xs) var(--jf-space-sm);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-md);
}

.jf-rodape__seguranca svg {
	flex: 0 0 auto;
	color: var(--jf-color-success);
}

.jf-rodape__seguranca span {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.jf-rodape__seguranca strong {
	font-size: var(--jf-size-sm);
}

.jf-rodape__seguranca small {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-xs);
}

/* ---------- 4. Barra escura ---------- */

.jf-rodape-base {
	background-color: var(--jf-color-text);
	color: var(--jf-color-text-on-dark);
}

.jf-rodape-base__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jf-space-2xs) var(--jf-space-md);
	padding-top: var(--jf-space-sm);
	padding-bottom: var(--jf-space-sm);
}

.jf-rodape-base p {
	margin: 0;
	max-width: none;
	color: var(--jf-color-text-on-dark);
	font-size: var(--jf-size-xs);
	opacity: 0.85;
}

.jf-rodape-base__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-3xs) var(--jf-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-rodape-base__legal li {
	margin: 0;
}

/* Seletor longo de propósito: o CSS inline do Personalizador do Storefront
   pinta `.site-footer a:not(.button):not(.components-button)` de #333
   (especificidade 0,3,1) — sobre o fundo escuro desta faixa, 1,3:1. */
.site-footer .jf-rodape-base__legal a:not(.button):not(.components-button),
.jf-rodape-base__legal .jf-cookies-preferencias {
	display: inline-flex;
	align-items: center;
	min-height: 2rem; /* alvo de toque de 32px: acima dos 24px do critério 2.5.8 */
	color: var(--jf-color-text-on-dark);
	font-size: var(--jf-size-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer .jf-rodape-base__legal a:not(.button):not(.components-button):hover,
.jf-rodape-base__legal .jf-cookies-preferencias:hover {
	color: var(--jf-color-text-on-dark);
	text-decoration-thickness: 2px;
}

/* ---------- Largura total ----------
 * O Storefront envolve tudo o que é impresso em `storefront_footer` num
 * `.col-full` de 1120px, e ainda dá padding e fundo cinza ao `<footer>`. O
 * resultado era o rodapé inteiro dentro de uma caixa, com as faixas de cor
 * parando nas margens. Aqui o invólucro do tema pai é neutralizado; cada faixa
 * do rodapé tem o seu próprio `.col-full` por dentro, e o fundo dela vai de
 * ponta a ponta.
 */
.site-footer {
	padding: 0;
	margin: 0;
	background-color: var(--jf-color-bg);
	color: var(--jf-color-text);
}

.site-footer > .col-full {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* A grade do rodapé em colunas fixas no desktop. Com `auto-fit`, "Contato"
   caía para uma segunda linha sozinho. */
@media (min-width: 62em) {
	.jf-rodape__grade {
		grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	}

	.jf-rodape__marca {
		grid-column: auto;
	}
}

@media (min-width: 62em) {
	.jf-confianca__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}