/* Componentes reaproveitados em várias telas. */

/* Botão de ícone com área de toque de 44px. */
.ir-icone-botao {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ir-toque);
	height: var(--ir-toque);
	padding: 0;
	border: 0;
	border-radius: var(--ir-raio-campo);
	background: transparent;
	color: var(--ir-cor-texto);
	text-decoration: none;
	cursor: pointer;
}

.ir-icone-botao:hover {
	color: var(--ir-cor-secundaria);
}

.ir-icone {
	display: block;
	flex: 0 0 auto;
}

.ir-icone-whatsapp {
	display: block;
	flex: 0 0 auto;
}

/* Botão principal: preto, caixa alta. */
.ir-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-family: var(--ir-fonte);
	font-size: 13px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: var(--ir-espacamento-caixa-alta);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.ir-botao:hover {
	background: var(--ir-preto-hover);
	color: var(--ir-fundo);
}

/* Botão de contorno preto. */
.ir-botao--contorno {
	border: 1px solid var(--ir-preto);
	background: transparent;
	color: var(--ir-cor-texto);
}

.ir-botao--contorno:hover {
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

/* WhatsApp: contorno verde e ícone oficial, nunca verde sólido. */
.ir-botao--whatsapp {
	padding: 0 22px;
	border: 1.5px solid var(--ir-whatsapp);
	background: transparent;
	color: var(--ir-whatsapp-texto);
}

.ir-botao--whatsapp:hover {
	background: var(--ir-fundo-suave);
	color: var(--ir-whatsapp-texto);
}

/* Botão em caixa normal (WhatsApp e ações das listagens e do produto, como nos mockups). */
.ir-botao--leve {
	min-height: 50px;
	padding: 0 18px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: 0;
	text-transform: none;
	gap: 8px;
}

/* Selo em chevron (o mesmo recorte da logo). */
.ir-selo {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px 0 20px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 11px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	clip-path: var(--ir-chevron);
}

/* Lista sem marcadores (mantém o recuo lateral quando a lista também é contêiner). */
.ir-lista-limpa {
	margin: 0;
	list-style: none;
}

/* :where() zera a especificidade: o recuo próprio de cada lista sempre vence este. */
.ir-lista-limpa:where(:not(.ir-container)) {
	padding: 0;
}

.ir-lista-limpa:where(.ir-container) {
	margin-right: auto;
	margin-left: auto;
}

/* Estrelas da nota (cor fixa da identidade). */
.ir-estrelas {
	display: inline-flex;
	gap: 1px;
	color: var(--ir-estrela);
	vertical-align: middle;
}

.ir-estrelas svg {
	display: block;
	fill: currentColor;
}

.ir-estrelas .ir-estrela--vazia {
	fill: var(--ir-cor-borda);
}

/*
 * Lista que rola para o lado no celular, sem barra de rolagem. O scroll-padding
 * faz o encaixe (scroll-snap) respeitar o recuo lateral; sem ele, o navegador
 * alinha o primeiro item à borda da tela.
 */
.ir-rolagem {
	scroll-padding-inline: var(--ir-margem);
	scrollbar-width: none;
}

.ir-rolagem::-webkit-scrollbar {
	display: none;
}

/* Dentro da rolagem, o contorno de foco fica por dentro (por fora seria cortado). */
@media (max-width: 899.98px) {
	.ir-rolagem :focus-visible {
		outline-offset: -2px;
	}
}

/* ---------- Seções de página ---------- */

.ir-secao {
	padding-top: 36px;
}

.ir-secao__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ir-secao__titulo {
	margin: 0;
	font-size: 22px;
	font-weight: var(--ir-peso-fino);
}

.ir-secao__titulo strong {
	font-weight: var(--ir-peso-destaque);
}

.ir-secao__descricao {
	margin: 6px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 13px;
}

.ir-secao__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ir-toque);
	font-size: 12px;
	font-weight: var(--ir-peso-destaque);
}

.ir-link-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ir-toque);
	color: var(--ir-whatsapp-texto);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-link-whatsapp:hover {
	color: var(--ir-whatsapp-texto);
}

@media (min-width: 900px) {
	.ir-secao {
		padding-top: 72px;
	}

	.ir-secao__topo {
		align-items: flex-end;
		gap: 12px 16px;
		margin-bottom: 24px;
	}

	.ir-secao__titulo {
		font-size: 32px;
	}

	.ir-secao__descricao {
		margin-top: 8px;
		font-size: 14px;
	}

	.ir-secao__link {
		font-size: 13px;
	}
}

/* ---------- Grade e cartão de produto ---------- */

.ir-grade-produtos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 12px;
}

.ir-cartao {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.ir-cartao__link,
.ir-cartao__foto-link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.ir-cartao__link:hover {
	color: inherit;
}

.ir-cartao__link:hover .ir-cartao__nome {
	text-decoration: underline;
}

.ir-cartao__foto {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ir-raio-card-p);
	background: var(--ir-fundo-suave);
}

.ir-cartao__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ir-cartao--esgotado .ir-cartao__imagem {
	opacity: 0.5;
}

/*
 * "Ver mais" e foto do tijolinho aplicado, só com mouse. Sem mouse ficam ocultos:
 * a foto com display: none e loading="lazy" não é baixada no celular.
 */
.ir-cartao__aplicada,
.ir-cartao__ver-mais {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.ir-cartao__imagem {
		transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.ir-cartao__aplicada {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.ir-cartao__ver-mais {
		position: absolute;
		right: 12px;
		bottom: 12px;
		left: 12px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		padding: 12px 12px 12px 14px;
		border-radius: var(--ir-raio-botao);
		background: var(--ir-fundo);
		box-shadow: var(--ir-sombra-flutuante);
		color: var(--ir-cor-texto);
		transform: translateY(calc(100% + 16px));
		transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.ir-cartao__ver-mais-texto {
		display: block;
		min-width: 0;
	}

	.ir-cartao__ver-mais-titulo {
		display: block;
		font-size: 14px;
		font-weight: var(--ir-peso-destaque);
	}

	.ir-cartao__ver-mais-linha {
		display: block;
		color: var(--ir-cor-secundaria);
		font-size: 12px;
		line-height: 1.35;
	}

	.ir-cartao__ver-mais-seta {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: var(--ir-raio-pilula);
		background: var(--ir-preto);
		color: var(--ir-fundo);
	}

	/* Abre com o mouse no cartão ou com o teclado no nome do produto. */
	.ir-cartao--lista:is(:hover, :has(.ir-cartao__nome:focus-visible)) .ir-cartao__imagem {
		transform: scale(1.04);
	}

	.ir-cartao--lista:is(:hover, :has(.ir-cartao__nome:focus-visible)) .ir-cartao__aplicada {
		opacity: 1;
	}

	.ir-cartao--lista:is(:hover, :has(.ir-cartao__nome:focus-visible)) .ir-cartao__ver-mais {
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.ir-cartao__imagem,
		.ir-cartao__aplicada,
		.ir-cartao__ver-mais {
			transition: none;
		}

		.ir-cartao--lista:is(:hover, :has(.ir-cartao__nome:focus-visible)) .ir-cartao__imagem {
			transform: none;
		}
	}
}

.ir-cartao__sem-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 16px;
	color: var(--ir-cor-terciaria);
	font-weight: var(--ir-peso-forte);
	text-align: center;
}

.ir-cartao__selo {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 11px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.ir-cartao__selo--esgotado {
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
}

.ir-cartao__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 2px;
}

.ir-cartao__nome {
	font-size: 16px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.ir-cartao__descricao {
	color: var(--ir-cor-secundaria);
	font-size: 13px;
}

.ir-cartao__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-top: 8px;
}

.ir-cartao__valor {
	font-size: 18px;
	font-weight: var(--ir-peso-destaque);
}

.ir-cartao__unidade,
.ir-cartao__de {
	color: var(--ir-cor-terciaria);
	font-size: 12px;
}

.ir-cartao__condicoes {
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

/* Cartão da Home no celular: foto menor, só código, preço e à vista. */
@media (max-width: 899.98px) {
	.ir-cartao--home,
	.ir-cartao--home .ir-cartao__link {
		gap: 6px;
	}

	.ir-cartao--home .ir-cartao__foto {
		border-radius: 14px;
	}

	.ir-cartao--home .ir-cartao__selo {
		top: 8px;
		left: 8px;
		padding: 4px 8px;
		border-radius: 7px;
		font-size: 10px;
	}

	.ir-cartao--home .ir-cartao__nome {
		font-size: 14px;
	}

	.ir-cartao--home .ir-cartao__descricao,
	.ir-cartao--home .ir-cartao__parcelas {
		display: none;
	}

	.ir-cartao--home .ir-cartao__preco {
		margin-top: 0;
	}

	.ir-cartao--home .ir-cartao__valor {
		font-size: 14px;
	}

	.ir-cartao--home .ir-cartao__unidade,
	.ir-cartao--home .ir-cartao__condicoes {
		font-size: 11px;
	}
}

@media (min-width: 900px) {
	.ir-grade-produtos {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 28px 20px;
	}
}

/* ---------- "Do pedido à sua parede" ---------- */

.ir-passos__titulo {
	margin-bottom: 14px;
}

.ir-passos {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ir-passo {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border-radius: 16px;
	background: var(--ir-fundo-suave-2);
}

.ir-passo__numero {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 32px;
	padding-left: 8px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 13px;
	font-weight: var(--ir-peso-forte);
	clip-path: var(--ir-chevron);
}

.ir-passo__texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ir-passo__titulo {
	margin: 0;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
	line-height: 1.5;
}

.ir-passo__descricao {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	line-height: 1.55;
}

@media (min-width: 900px) {
	.ir-passos__titulo {
		margin-bottom: 24px;
	}

	/* 2 × 2 até 1199px (4 colunas apertariam; 3 + 1 pareceria quebrado). */
	.ir-passos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.ir-passo {
		display: block;
		padding: 22px;
		border-radius: var(--ir-raio-card-p);
	}

	.ir-passo__numero {
		width: 48px;
		height: 36px;
		padding-left: 9px;
		font-size: 14px;
		clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
	}

	.ir-passo__titulo {
		display: block;
		margin: 14px 0 6px;
		font-size: 16px;
	}

	.ir-passo__descricao {
		display: block;
		font-size: 13px;
		line-height: 1.6;
	}
}

@media (min-width: 1200px) {
	.ir-passos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 899.98px) {
	.ir-depoimento .ir-estrelas svg,
	.ir-avaliacoes__nota .ir-estrelas svg {
		width: 13px;
		height: 13px;
	}
}

/* ---------- Avaliações do Google ---------- */

.ir-avaliacoes {
	padding-bottom: 40px;
}

.ir-avaliacoes__grade {
	display: flex;
	flex-direction: column;
}

.ir-avaliacoes__resumo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	border-radius: var(--ir-raio-card);
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-avaliacoes__rotulo {
	margin: 0;
	color: var(--ir-escuro-texto);
	font-size: 10px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ir-avaliacoes__titulo {
	margin: 6px 0 0;
	font-size: 20px;
	font-weight: var(--ir-peso-fino);
}

.ir-avaliacoes__titulo strong {
	font-weight: var(--ir-peso-destaque);
}

.ir-avaliacoes__nota {
	text-align: right;
}

.ir-avaliacoes__numero {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
	font-size: 36px;
	font-weight: var(--ir-peso-destaque);
	line-height: 1;
}

.ir-avaliacoes__de {
	display: none;
	color: var(--ir-escuro-texto);
	font-size: 14px;
	font-weight: var(--ir-peso-normal);
}

.ir-avaliacoes__nota .ir-estrelas {
	margin-top: 4px;
}

.ir-avaliacoes__total {
	margin: 4px 0 0;
	color: var(--ir-escuro-texto);
	font-size: 11px;
}

.ir-avaliacoes__botao {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: var(--ir-toque);
	padding: 0 16px;
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	text-decoration: none;
}

.ir-avaliacoes__botao:hover {
	color: var(--ir-cor-secundaria);
}

.ir-avaliacoes__pendente {
	margin: 0;
	color: var(--ir-escuro-texto);
	font-size: 12px;
}

.ir-avaliacoes__lista {
	display: flex;
	gap: 10px;
	margin: 12px calc(-1 * var(--ir-margem)) 0;
	padding: 0 var(--ir-margem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.ir-avaliacoes__lista > li {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.ir-depoimento {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-card-p);
}

.ir-depoimento__texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

.ir-depoimento__texto p {
	margin: 0;
}

.ir-depoimento__autor {
	margin-top: auto;
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-avaliacoes__mais {
	display: flex;
	align-items: center;
	min-height: var(--ir-toque);
	margin-top: 8px;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-avaliacoes__mais.ir-avaliacoes__pendente {
	color: var(--ir-cor-terciaria);
}

@media (min-width: 900px) {
	.ir-avaliacoes {
		padding-bottom: 80px;
	}

	.ir-avaliacoes__grade {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 24px;
	}

	.ir-avaliacoes__resumo {
		flex: 1 1 280px;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		gap: 20px;
		min-width: 0;
		padding: 28px;
	}

	.ir-avaliacoes__rotulo {
		font-size: 11px;
	}

	.ir-avaliacoes__titulo {
		margin-top: 12px;
		font-size: 28px;
		line-height: 1.2;
	}

	.ir-avaliacoes__nota {
		text-align: left;
	}

	.ir-avaliacoes__numero {
		justify-content: flex-start;
		font-size: 52px;
		letter-spacing: -0.03em;
	}

	.ir-avaliacoes__de {
		display: inline;
		letter-spacing: 0;
	}

	.ir-avaliacoes__nota .ir-estrelas {
		margin-top: 6px;
	}

	.ir-avaliacoes__total {
		margin-top: 8px;
		font-size: 13px;
	}

	.ir-avaliacoes__lista {
		display: grid;
		flex: 2.4 1 560px;
		/* Sempre 3 colunas: com auto-fit, em 1024px sobrariam 2 + 1. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		min-width: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.ir-depoimento {
		gap: 14px;
		padding: 24px;
		border-radius: var(--ir-raio-card);
	}

	.ir-depoimento__texto {
		font-size: 16px;
		line-height: 1.6;
	}

	.ir-depoimento__autor {
		font-size: 12px;
	}
}

/* ---------- Trilha ("Início / …"), na listagem e no produto ---------- */

.ir-trilha {
	padding-top: 20px;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

.ir-trilha a {
	position: relative;
	color: var(--ir-cor-secundaria);
	text-decoration: none;
}

/* Área de toque de 44px sem aumentar a faixa da trilha. */
.ir-trilha a::after {
	content: "";
	position: absolute;
	inset: -14px -6px;
}

.ir-trilha a:hover {
	text-decoration: underline;
}

.ir-trilha [aria-current] {
	color: var(--ir-cor-texto);
	font-weight: var(--ir-peso-destaque);
}

/* ---------- Cartão de produto na lista (listagem, relacionados) ---------- */

/* No celular, o cartão da lista fica menor (no computador, vale o cartão de produto acima). */
@media (max-width: 899.98px) {
	.ir-cartao--lista,
	.ir-cartao--lista .ir-cartao__foto-link {
		gap: 8px;
	}

	.ir-cartao--lista .ir-cartao__foto {
		border-radius: 14px;
	}

	.ir-cartao--lista .ir-cartao__selo {
		top: 8px;
		left: 8px;
		padding: 4px 8px;
		border-radius: 7px;
		font-size: 10px;
		letter-spacing: 0;
	}

	.ir-cartao--lista .ir-cartao__texto {
		gap: 2px;
		padding: 0;
	}

	.ir-cartao--lista .ir-cartao__nome {
		font-size: 14px;
		letter-spacing: 0;
	}

	.ir-cartao--lista .ir-cartao__descricao {
		overflow: hidden;
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ir-cartao--lista .ir-cartao__preco {
		margin-top: 6px;
	}

	.ir-cartao--lista .ir-cartao__valor {
		font-size: 15px;
	}

	.ir-cartao--lista .ir-cartao__unidade,
	.ir-cartao--lista .ir-cartao__condicoes {
		font-size: 11px;
	}

	/* No celular: sem preço riscado e sem parcelas, como no mockup. */
	.ir-cartao--lista .ir-cartao__de,
	.ir-cartao--lista .ir-cartao__parcelas {
		display: none;
	}
}

/* "Avise-me quando chegar" do cartão esgotado. */
.ir-cartao__avise {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ir-toque);
	padding: 0 14px;
	border: 1px solid var(--ir-preto);
	border-radius: 10px;
	color: var(--ir-cor-texto);
	font-size: 12px;
	font-weight: var(--ir-peso-destaque);
	text-decoration: none;
}

.ir-cartao__avise:hover {
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

@media (min-width: 900px) {
	.ir-trilha {
		padding: 0;
		border-top: 1px solid var(--ir-cor-borda-suave);
		border-bottom: 1px solid var(--ir-cor-borda-suave);
		background: var(--ir-fundo-suave-2);
		font-size: 13px;
	}

	.ir-trilha .ir-container {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.ir-cartao__avise {
		align-self: flex-start;
		margin-top: -4px;
	}
}

/* ---------- Peça flutuando (Home e produto) ---------- */

@keyframes ir-flutuar {
	0%,
	100% {
		transform: translateY(0) rotate(-8deg);
	}

	50% {
		transform: translateY(-10px) rotate(-7deg);
	}
}

/* ---------- Avisos do WooCommerce (produto, carrinho, conta) ---------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-left: 3px solid var(--ir-preto);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo-suave-2);
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-error li {
	flex: 1 1 100%;
}

/* "Ver carrinho" / "Continuar comprando" dentro do aviso: link, não botão. */
.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	display: inline-flex;
	align-items: center;
	min-height: var(--ir-toque);
	color: var(--ir-cor-texto);
	font-weight: var(--ir-peso-destaque);
	text-decoration: underline;
}

/* ---------- Campos de formulário (checkout e Minha conta) ---------- */

/*
 * Campos do WooCommerce (woocommerce_form_field) dentro de .ir-formulario. As
 * larguras por campo seguem o Checkout.dc.html e valem também nos endereços
 * de Minha conta, que usam os mesmos campos.
 */

.ir-campos {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.ir-formulario .form-row {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
}

/* Largura de cada campo, como no mockup (a linha quebra no celular). */
#billing_first_name_field {
	flex-basis: 260px;
}

#billing_documento_field,
#billing_phone_field,
#billing_neighborhood_field {
	flex-basis: 200px;
}

#billing_postcode_field {
	flex-basis: 140px;
}

#billing_address_1_field {
	flex-basis: 300px;
}

#billing_number_field {
	flex-basis: 100px;
}

#billing_address_2_field {
	flex-basis: 180px;
}

#billing_city_field,
#billing_state_field {
	flex-basis: 160px;
}

/*
 * O país é sempre Brasil: o campo vai no formulário, mas não aparece nem
 * recebe foco. O !important vence o display que o address-i18n.js do
 * WooCommerce põe no campo ao trocar de país.
 */
.ir-formulario .ir-campo--pais {
	display: none !important;
}

.ir-formulario .form-row[hidden] {
	display: none;
}

.ir-formulario .form-row > label {
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	font-weight: var(--ir-peso-destaque);
}

/* Quase todo campo é obrigatório (aria-required no campo); o asterisco não aparece no mockup. */
.ir-formulario .form-row .required {
	display: none;
}

.ir-formulario .form-row .optional {
	color: var(--ir-cor-terciaria);
	font-weight: var(--ir-peso-normal);
}

.ir-formulario .woocommerce-input-wrapper {
	display: block;
}

.ir-formulario .input-text,
.ir-formulario select,
.ir-pagamento__caixa input[type="text"],
.ir-pagamento__caixa input[type="tel"],
.ir-pagamento__caixa select {
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--ir-cor-borda-entrada);
	border-radius: var(--ir-raio-campo);
	background-color: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font: var(--ir-peso-medio) 15px/1.2 var(--ir-fonte);
}

/* No celular, 16px: com menos, o iPhone dá zoom ao tocar no campo. */
@media (max-width: 899.98px) {
	.ir-formulario .input-text,
	.ir-formulario select,
	.ir-pagamento__caixa input[type="text"],
	.ir-pagamento__caixa input[type="tel"],
	.ir-pagamento__caixa select {
		font-size: 16px;
	}
}

.ir-formulario select {
	padding-right: 36px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
}

.ir-formulario .input-text::placeholder {
	color: var(--ir-cor-terciaria);
	font-weight: var(--ir-peso-normal);
}

.ir-formulario .input-text:focus-visible,
.ir-formulario select:focus-visible,
.ir-pagamento__caixa input:focus-visible,
.ir-pagamento__caixa select:focus-visible {
	border-color: var(--ir-preto);
	outline: 2px solid var(--ir-preto);
	outline-offset: 1px;
}

.ir-formulario .woocommerce-invalid .input-text,
.ir-formulario .woocommerce-invalid select {
	border-color: var(--ir-cor-erro);
}

.ir-formulario .checkout-inline-error-message {
	margin: 0;
	color: var(--ir-cor-erro);
	font-size: 12px;
	font-weight: var(--ir-peso-medio);
}

.ir-formulario .form-row .description {
	color: var(--ir-cor-terciaria);
	font-size: 12px;
}

.ir-campo-ajuda {
	align-self: flex-start;
	min-height: var(--ir-toque);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ir-cor-texto);
	font: var(--ir-peso-medio) 12px var(--ir-fonte);
	text-decoration: underline;
	cursor: pointer;
}

.ir-campo-ajuda[hidden] {
	display: none;
}

.ir-cep-aviso {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	line-height: 1.5;
}

/* ---------- Como pagar o pedido (Pedido recebido e Minha conta) ---------- */

.ir-pagar {
	margin-top: 20px;
	padding: 18px;
	border-radius: 16px;
	background: var(--ir-fundo-suave-2);
	font-size: 14px;
	line-height: 1.6;
}

.ir-pagar--destaque {
	border: 1.5px solid var(--ir-preto);
	background: var(--ir-fundo);
}

.ir-pagar__titulo {
	margin: 0;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
}

.ir-pagar__texto {
	margin: 6px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 13px;
	line-height: 1.6;
}

/* Pix na tela do pedido: bloco preto com o valor e o QR Code, e as contas ao lado. */
.ir-pagar-pix {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin-top: 20px;
}

.ir-pagar-pix__destaque {
	position: relative;
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	box-sizing: border-box;
	padding: 20px;
	border-radius: var(--ir-raio-card-g);
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 13px;
	line-height: 1.6;
}

.ir-pagar-pix__rotulo {
	margin: 0;
	font-size: 14px;
}

.ir-pagar-pix__valor {
	margin: 0;
	font-size: 34px;
	font-weight: var(--ir-peso-destaque);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.ir-botao.ir-pagar-pix__copiar {
	width: 100%;
	min-height: 52px;
	padding: 0 12px;
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
}

.ir-botao.ir-pagar-pix__copiar:hover {
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

.ir-pagar-pix__copiar[hidden],
.ir-pagar-pix__qr-botao[hidden] {
	display: none;
}

.ir-pagar-pix__texto {
	margin: 0;
	color: var(--ir-escuro-texto);
}

.ir-pagar-pix__texto--computador {
	display: none;
}

.ir-pagar-pix__qr-botao {
	min-height: var(--ir-toque);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ir-fundo);
	font-family: var(--ir-fonte);
	font-size: 13px;
	font-weight: var(--ir-peso-medio);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ir-pagar-pix__contas {
	display: flex;
	flex: 1 1 300px;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ir-pagar-pix__contas .ir-pagar__texto {
	margin: 0;
}

.ir-pagar-pix__contas-titulo {
	margin: 0;
	font-size: 16px;
	font-weight: var(--ir-peso-destaque);
}

/* No celular o cliente copia o código; o QR Code só abre se ele pedir. */
@media (max-width: 899.98px) {
	.ir-pix:not(.ir-pix--qr-aberto) .ir-pix__qr {
		display: none;
	}
}

@media (min-width: 900px) {
	.ir-pagar-pix__destaque {
		flex: 0 0 272px;
	}

	.ir-pagar-pix__texto--computador {
		display: block;
	}

	.ir-pagar-pix__texto--celular,
	.ir-pagar-pix__qr-botao {
		display: none;
	}
}

/* Rótulo e valor com botão de copiar. */
.ir-copia-campo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ir-copia-campo--largo {
	grid-column: 1 / -1;
}

.ir-copia-campo__rotulo {
	color: var(--ir-cor-terciaria);
	font-size: 12px;
}

.ir-copia-campo__texto {
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	overflow-wrap: anywhere;
}

.ir-copia-campo__valor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: var(--ir-toque);
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo-suave-2);
	color: var(--ir-cor-texto);
	font-family: var(--ir-fonte);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	font-variant-numeric: tabular-nums;
	text-align: left;
	cursor: pointer;
}

.ir-copia-campo__valor:hover {
	border-color: var(--ir-cor-borda);
}

.ir-copia-campo__valor span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ir-copia-campo__valor svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--ir-cor-terciaria);
}

.ir-copia-campo__certo,
.ir-copia-campo__valor.is-copiado .ir-copia-campo__copiar {
	display: none;
}

.ir-copia-campo__valor.is-copiado {
	border-color: var(--ir-whatsapp);
	background: var(--ir-fundo);
	color: var(--ir-whatsapp-texto);
}

.ir-copia-campo__valor.is-copiado .ir-copia-campo__certo {
	display: block;
	color: var(--ir-whatsapp-texto);
}

/* Contas bancárias, uma aberta por vez. */
.ir-contas-banco {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.ir-pagar-pix__contas .ir-contas-banco {
	margin-top: 0;
}

.ir-conta-banco {
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-card-p);
	background: var(--ir-fundo);
}

.ir-conta-banco__cabeca {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 60px;
	box-sizing: border-box;
	padding: 10px 14px;
	border-radius: var(--ir-raio-card-p);
	list-style: none;
	cursor: pointer;
}

.ir-conta-banco__cabeca::-webkit-details-marker {
	display: none;
}

.ir-conta-banco__nome {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.ir-conta-banco__codigo {
	display: block;
	color: var(--ir-cor-terciaria);
	font-size: 12px;
	font-weight: var(--ir-peso-normal);
}

.ir-conta-banco__seta {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--ir-cor-terciaria);
	transition: transform var(--ir-transicao);
}

.ir-conta-banco[open] .ir-conta-banco__seta {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.ir-conta-banco__seta {
		transition: none;
	}
}

.ir-conta-banco__corpo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 0 14px 14px;
}

.ir-banco-icone {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: var(--ir-peso-forte);
}

.ir-banco-icone--foto {
	object-fit: contain;
}

.ir-pix__qr {
	flex: 0 0 auto;
	width: 184px;
	height: 184px;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
}

.ir-pix__qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ir-pix__qr[hidden] {
	display: none;
}

.ir-pagar-pix__destaque .ir-pix__qr {
	align-self: center;
	border: 0;
}

.ir-pix__codigo {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--ir-cor-borda-entrada);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo-suave-2);
	color: var(--ir-cor-texto);
	font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-all;
	resize: none;
}

/* Com o botão de copiar pronto, a caixa some da tela e só volta se a cópia falhar. */
.ir-pix--pronto .ir-pix__codigo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.ir-pix__aviso {
	margin: 0;
	color: var(--ir-fundo);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-pix__aviso:empty {
	display: none;
}

/* "Mostrar senha" (botão que o woocommerce.js põe nos campos de senha). */
.ir-formulario .password-input {
	position: relative;
	display: block;
}

.ir-formulario .password-input .input-text {
	padding-right: 52px;
}

.ir-formulario .show-password-input {
	position: absolute;
	top: 50%;
	right: 3px;
	width: var(--ir-toque);
	height: var(--ir-toque);
	padding: 0;
	border: 0;
	border-radius: var(--ir-raio-campo);
	background: transparent;
	color: var(--ir-cor-secundaria);
	cursor: pointer;
	transform: translateY(-50%);
}

.ir-formulario .show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ir-formulario .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

.ir-formulario .show-password-input:focus-visible {
	outline: 2px solid var(--ir-preto);
	outline-offset: -2px;
}

/* ---------- Login curto do WooCommerce (ex.: "Pedido recebido" de cliente com conta) ---------- */

.ir-login-curto {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
	margin: 16px 0 32px;
	padding: 20px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-card-g);
}

.ir-login-curto[hidden] {
	display: none;
}

.ir-login-curto__texto p {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 14px;
	line-height: 1.6;
}

.ir-login-curto__botao {
	width: 100%;
}

.ir-login-curto__esqueci {
	display: flex;
	align-self: center;
	align-items: center;
	min-height: var(--ir-toque);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

/* Busca de produtos dentro da página (resultados da busca e 404). */

.ir-busca-pagina {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.ir-busca-pagina__campo {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 56px;
	padding: 0 16px;
	border: 1.5px solid var(--ir-preto);
	border-radius: var(--ir-raio-botao);
	cursor: text;
}

.ir-busca-pagina__campo:focus-within {
	outline: 2px solid var(--ir-preto);
	outline-offset: 2px;
}

.ir-busca-pagina__campo input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 16px;
	font-weight: var(--ir-peso-medio);
}

.ir-busca-pagina__campo input:focus {
	outline: 0;
}

.ir-busca-pagina__enviar {
	flex: 0 0 auto;
	padding: 0 22px;
}

/* ---------- Carregando ---------- */

@keyframes ir-girar {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Botão ocupado (aria-busy, ou o "Finalizar pedido" enquanto o pedido é
 * enviado): o texto some e um anel gira no meio, para o cliente ver que o
 * clique foi aceito e não clicar de novo. Os botões ocupados são pretos.
 */
button[aria-busy="true"],
form.checkout.processing #place_order,
.ir-checkout:has(form.checkout.processing) .ir-checkout-barra__botao {
	position: relative;
	color: transparent !important;
	cursor: progress;
	pointer-events: none;
}

button[aria-busy="true"] > *,
form.checkout.processing #place_order > *,
.ir-checkout:has(form.checkout.processing) .ir-checkout-barra__botao > * {
	visibility: hidden;
}

button[aria-busy="true"]::after,
form.checkout.processing #place_order::after,
.ir-checkout:has(form.checkout.processing) .ir-checkout-barra__botao::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	margin: -10px 0 0 -10px;
	border: 2px solid rgb(255 255 255 / 35%);
	border-top-color: var(--ir-fundo);
	border-radius: 50%;
	animation: ir-girar 0.7s linear infinite;
}

/*
 * Área que está sendo atualizada (o carrinho lateral, o frete e os totais do
 * checkout, as formas de pagamento bloqueadas pelo WooCommerce): o conteúdo
 * fica apagado, com o anel
 * no meio. O valor antigo não passa por certo enquanto o novo não chega.
 */
.ir-sacola__conteudo[aria-busy="true"],
.ir-checkout-entregas[aria-busy="true"],
.ir-checkout-totais[aria-busy="true"] {
	position: relative;
	cursor: progress;
}

.ir-sacola__conteudo[aria-busy="true"] > *,
.ir-checkout-entregas[aria-busy="true"] > *,
.ir-checkout-totais[aria-busy="true"] > *,
.ir-checkout-barra__total[aria-busy="true"] {
	opacity: 0.4;
}

.ir-sacola__conteudo[aria-busy="true"]::after,
.ir-checkout-entregas[aria-busy="true"]::after,
.ir-checkout-totais[aria-busy="true"]::after,
.ir-formulario .woocommerce-checkout-payment > .blockUI.blockOverlay::before,
.ir-formulario .ir-cep-buscando .woocommerce-input-wrapper::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	margin: -14px 0 0 -14px;
	border: 3px solid var(--ir-cor-borda);
	border-top-color: var(--ir-preto);
	border-radius: 50%;
	animation: ir-girar 0.7s linear infinite;
}

/* CEP sendo consultado: o anel fica dentro do campo, à direita. */
.ir-formulario .ir-cep-buscando .woocommerce-input-wrapper {
	position: relative;
}

.ir-formulario .ir-cep-buscando .woocommerce-input-wrapper::after {
	right: 14px;
	left: auto;
	width: 20px;
	height: 20px;
	margin: -10px 0 0;
	border-width: 2px;
}

/*
 * Com "reduzir movimento", o anel continua (é o único sinal de que algo está
 * carregando), mais devagar. O base.css desliga as outras animações.
 */
@media (prefers-reduced-motion: reduce) {
	button[aria-busy="true"]::after,
	form.checkout.processing #place_order::after,
	.ir-checkout:has(form.checkout.processing) .ir-checkout-barra__botao::after,
	.ir-sacola__conteudo[aria-busy="true"]::after,
	.ir-checkout-entregas[aria-busy="true"]::after,
	.ir-checkout-totais[aria-busy="true"]::after,
	.ir-formulario .woocommerce-checkout-payment > .blockUI.blockOverlay::before,
	.ir-formulario .ir-cep-buscando .woocommerce-input-wrapper::after {
		animation: ir-girar 1.6s linear infinite !important;
	}
}

/* Endereço do CEP digitado (frete do produto, sacola e carrinho). */
.ir-cep-endereco {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 4px 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	line-height: 1.45;
}

.ir-cep-endereco[hidden] {
	display: none;
}

.ir-cep-endereco > .ir-icone {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 1px;
}

/* Aviso de regra de venda (carrinho, sacola, checkout e frete do produto): por que a transportadora não aparece. */
.ir-regra-aviso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave-2);
	color: var(--ir-cor-texto);
	font-size: 13px;
	line-height: 1.55;
}

.ir-regra-aviso[hidden] {
	display: none;
}

.ir-regra-aviso > .ir-icone {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.ir-regra-aviso__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.ir-regra-aviso__texto {
	margin: 0;
	overflow-wrap: anywhere;
}

.ir-regra-aviso__whatsapp {
	min-height: 44px;
	background: var(--ir-fundo);
	font-size: 13px;
}

.ir-regra-aviso__whatsapp[hidden] {
	display: none;
}

.ir-regra-aviso__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ir-cor-texto);
	font-weight: var(--ir-peso-medio);
	text-decoration: underline;
	text-underline-offset: 3px;
}