/*
 * Página de produto. Referência: Produto.dc.html e ProdutoMobile.dc.html.
 * Celular primeiro; o computador começa em 900px.
 */

/* ---------- Trilha e avisos ---------- */

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

.ir-trilha__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

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

/* Os avisos do WooCommerce (ex.: erro ao comprar) estão em components.css. */
.ir-produto__avisos .woocommerce-error,
.ir-produto__avisos .woocommerce-message,
.ir-produto__avisos .woocommerce-info {
	margin-top: 16px;
}

/* ---------- Topo: galeria + coluna de compra ---------- */

.ir-produto__topo {
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	padding-right: 0;
	padding-left: 0;
}

.ir-produto__galeria {
	padding: 0 var(--ir-margem);
}

/* ---------- Galeria ---------- */

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

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

.ir-galeria__trilho {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

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

.ir-galeria__trilho:focus {
	outline: 0;
}

.ir-galeria__foto {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

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

.ir-galeria__foto--vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	color: var(--ir-cor-secundaria);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-galeria__coluna {
	order: 2;
	min-width: 0;
}

.ir-galeria__miniaturas {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
}

/* As setas só existem na coluna ao lado da foto (a partir de 1200px). */
.ir-galeria__seta {
	display: none;
}

.ir-galeria__miniatura {
	flex: 0 0 auto;
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo-suave);
}

.ir-galeria__miniatura[aria-current="true"] {
	border-color: var(--ir-preto);
}

.ir-galeria__miniatura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ir-galeria__aviso {
	position: absolute;
	top: 12px;
	left: 12px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 11px;
	font-weight: var(--ir-peso-destaque);
}

.ir-galeria__contador {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--ir-raio-pilula);
	background: rgba(17, 17, 17, 0.7);
	color: var(--ir-fundo);
	font-size: 11px;
	font-weight: var(--ir-peso-destaque);
}

.ir-galeria__acoes {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ir-galeria__acao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ir-toque);
	padding: 0 16px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ir-cor-texto);
	font-size: 11px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.ir-galeria__acao .ir-icone {
	width: 16px;
	height: 16px;
}

.ir-galeria__acao--escura,
.ir-galeria__acao--escura:hover {
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

/* ---------- Coluna de compra ---------- */

.ir-produto__resumo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px var(--ir-margem) 28px;
}

.ir-produto__cabeca {
	text-align: center;
}

.ir-produto__titulo {
	margin: 0;
	font-size: 26px;
	font-weight: var(--ir-peso-forte);
	line-height: 1.15;
	text-wrap: balance;
}

.ir-produto__nota {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--ir-toque);
	margin-top: 2px;
	color: var(--ir-cor-texto);
	font-size: 12px;
	text-decoration: none;
}

.ir-produto__nota .ir-estrelas svg {
	width: 13px;
	height: 13px;
}

.ir-produto__nota-texto {
	color: var(--ir-cor-secundaria);
	text-decoration: underline;
}

/* Outros tons */
.ir-tons-produto__titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--ir-cor-terciaria);
	font-size: 11px;
}

/*
 * Uma faixa que rola para o lado, com encaixe em cada tom. No celular, ela vai
 * de uma borda à outra da tela e desliza com o dedo; no computador, mostra 6
 * tons entre as setas (ver produto.js).
 */
.ir-tons-produto__lista {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	margin: 0 calc(-1 * var(--ir-margem));
	padding: 2px var(--ir-margem) 4px;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.ir-tons-produto__lista > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Sem isto, o encaixe não deixaria a faixa chegar ao último tom. */
.ir-tons-produto__lista > li:last-child {
	scroll-snap-align: end;
}

.ir-tons-produto__seta {
	display: none;
}

.ir-tom-produto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 52px;
	color: var(--ir-cor-texto);
	text-decoration: none;
}

.ir-tom-produto__foto {
	display: block;
	padding: 2px;
	border: 1.5px solid transparent;
	border-radius: 9px;
}

.ir-tom-produto.is-atual .ir-tom-produto__foto {
	border-color: var(--ir-preto);
}

.ir-tom-produto img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	object-fit: cover;
}

.ir-tom-produto__codigo {
	font-size: 9px;
	font-weight: var(--ir-peso-medio);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ir-tom-produto.is-atual .ir-tom-produto__codigo {
	font-weight: var(--ir-peso-forte);
}

.ir-tom-produto:hover .ir-tom-produto__foto {
	border-color: var(--ir-cor-borda);
}

.ir-tom-produto.is-atual:hover .ir-tom-produto__foto {
	border-color: var(--ir-preto);
}

/* Quadro de preço */
.ir-preco-quadro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding: 16px;
	border-radius: 16px;
	background: var(--ir-fundo-suave-2);
}

.ir-preco-quadro p {
	margin: 0;
}

.ir-preco-quadro__rotulo {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-preco-quadro__de {
	font-weight: var(--ir-peso-normal);
	letter-spacing: 0;
	text-transform: none;
}

.ir-preco-quadro__valor {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 4px !important;
}

.ir-preco-quadro__numero {
	font-size: 28px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

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

.ir-preco-quadro__parcelas {
	margin-top: 4px !important;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

.ir-preco-quadro__parcelas strong {
	color: var(--ir-cor-texto);
}

.ir-preco-quadro__vista {
	text-align: right;
}

.ir-preco-quadro__selo {
	display: inline-flex;
	padding: 4px 8px;
	border-radius: 7px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 10px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.06em;
}

.ir-preco-quadro__vista-valor {
	margin-top: 4px !important;
	font-size: 18px;
	font-weight: var(--ir-peso-destaque);
}

.ir-preco-quadro__vista-rotulo {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

/* Esgotado */
.ir-produto__esgotado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 18px;
	border-radius: 16px;
	background: var(--ir-fundo-suave-2);
	color: var(--ir-cor-secundaria);
	font-size: 14px;
	text-align: center;
}

.ir-produto__esgotado-selo {
	padding: 5px 10px;
	border: 1px solid var(--ir-preto);
	border-radius: 8px;
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font-size: 11px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.04em;
}

.ir-produto__esgotado-destaque {
	color: var(--ir-cor-texto);
	font-weight: var(--ir-peso-destaque);
}

/* Avise-me recolhido, abaixo do orçamento do tijolinho esgotado */
.ir-avise-recolhido {
	border: 1px solid var(--ir-cor-borda);
	border-radius: 16px;
}

.ir-avise-recolhido__titulo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 8px 44px 8px 18px;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
	list-style: none;
	cursor: pointer;
}

.ir-avise-recolhido__titulo::-webkit-details-marker {
	display: none;
}

.ir-avise-recolhido__titulo::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

.ir-avise-recolhido[open] .ir-avise-recolhido__titulo::after {
	transform: translateY(-30%) rotate(-135deg);
}

.ir-avise-recolhido .ir-avise-me {
	padding: 0 18px 18px;
	border: 0;
}

.ir-avise-recolhido .ir-avise-me__titulo {
	display: none;
}

/* Avise-me (formulário do plugin, só nos esgotados) */
.ir-avise-me {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: 16px;
}

.ir-avise-me__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: var(--ir-peso-destaque);
}

.ir-avise-me__rotulo {
	font-size: 13px;
	font-weight: var(--ir-peso-medio);
}

.ir-avise-me__email {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ir-cor-borda-campo);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	font-size: 16px;
}

.ir-avise-me__consentimento {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
}

.ir-avise-me__consentimento input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ir-preto);
}

.ir-avise-me__enviar {
	width: 100%;
	min-height: 52px;
}

.ir-avise-me__mensagem {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--ir-fundo-suave-2);
	font-size: 13px;
}

.ir-avise-me__mensagem--erro {
	border-left: 3px solid var(--ir-preto);
}

/* ---------- Calculadora "Quantos m² você precisa?" ---------- */

.ir-compra {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

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

.ir-calc-parede__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

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

.ir-calc-parede__abrir {
	min-height: var(--ir-toque);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	font-size: 12px;
	font-weight: var(--ir-peso-destaque);
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Quantidade + Comprar ---------- */

.ir-compra__linha {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.ir-qtd {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	height: 54px;
	border: 1px solid var(--ir-cor-borda-campo);
	border-radius: var(--ir-raio-botao);
}

/* Foco no campo: contorno de 2px em volta da caixa toda (o campo em si não tem contorno). */
.ir-qtd:has(.ir-qtd__campo:focus-visible) {
	outline: 2px solid var(--ir-preto);
	outline-offset: 2px;
}

.ir-qtd__botao {
	width: 40px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: var(--ir-raio-campo);
	background: transparent;
	color: var(--ir-cor-texto);
	font-size: 20px;
	cursor: pointer;
}

.ir-qtd__botao:focus-visible {
	outline-offset: -2px;
}

.ir-qtd__campo {
	width: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	font-size: 16px;
	font-weight: var(--ir-peso-destaque);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.ir-qtd__campo::-webkit-outer-spin-button,
.ir-qtd__campo::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.ir-qtd__campo:focus {
	outline: 0;
}

.ir-qtd__unidade {
	padding-right: 2px;
	color: var(--ir-cor-terciaria);
	font-size: 12px;
}

/* Sem JavaScript não há − e +: o campo ganha espaço. */
html:not(.ir-js) .ir-qtd {
	padding: 0 12px;
}

.ir-compra__comprar {
	flex: 1 1 auto;
	gap: 12px;
	min-width: 0;
	min-height: 54px;
	padding: 0 10px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-align: center;
}

.ir-compra__comprar .ir-icone {
	width: 19px;
	height: 19px;
}

/* Resina junto */
.ir-resina-junto {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1.5px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo);
	cursor: pointer;
}

.ir-resina-junto:has(input:checked) {
	border-color: var(--ir-preto);
	background: var(--ir-fundo-suave-2);
}

.ir-resina-junto input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--ir-preto);
}

.ir-resina-junto__icone {
	display: none;
}

.ir-resina-junto__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ir-resina-junto__titulo {
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-resina-junto__detalhe {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-resina-junto__preco {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-compra__avista {
	margin: 0;
	color: var(--ir-cor-terciaria);
	font-size: 12px;
	text-align: right;
}

/* WhatsApp, CEP e selos: no mesmo grupo da compra (10px entre eles, como no mockup). */
.ir-produto__extras {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: -6px;
}

.ir-produto__whatsapp {
	width: 100%;
	min-height: 52px;
	font-size: 12px;
	letter-spacing: 0.1em;
}

.ir-cep {
	margin: 0;
}

.ir-cep__campo {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 3px 3px 3px 14px;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-secundaria);
}

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

.ir-cep__campo input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	font-size: 16px;
}

.ir-cep__campo input:focus {
	outline: 0;
}

.ir-cep__botao {
	min-height: var(--ir-toque);
	padding: 0 16px;
	border: 0;
	border-radius: 11px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	cursor: pointer;
}

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

.ir-cep__erro {
	margin: 8px 4px 0;
	font-size: 12px;
	font-weight: var(--ir-peso-medio);
}

.ir-cep__opcoes {
	margin-top: 8px;
	padding: 4px 14px;
	border: 1px solid var(--ir-cor-borda-suave);
	border-radius: var(--ir-raio-campo);
	font-size: 13px;
}

.ir-cep__opcoes li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}

.ir-cep__opcoes li + li {
	border-top: 1px solid var(--ir-cor-borda-suave);
}

.ir-cep__opcoes span {
	color: var(--ir-cor-secundaria);
}

/* Cotando de novo (a quantidade ou a resina mudou): o valor antigo fica apagado. */
.ir-cep__opcoes[aria-busy="true"] {
	opacity: 0.4;
	cursor: progress;
}

.ir-cep__opcoes strong {
	flex: 0 0 auto;
	white-space: nowrap;
}

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

.ir-cep__opcoes .ir-cep__nome {
	color: var(--ir-cor-texto);
	font-weight: var(--ir-peso-destaque);
}

.ir-cep__opcoes .ir-cep__detalhe {
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	font-weight: var(--ir-peso-normal);
}

.ir-cep__aviso {
	margin: 8px 4px 0;
	color: var(--ir-cor-terciaria);
	font-size: 12px;
}

.ir-cep__sem-js {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

.ir-produto__selos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	color: var(--ir-cor-secundaria);
	font-size: 11px;
	text-align: center;
}

.ir-produto__selos li,
.ir-produto__selos a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.ir-produto__selos a {
	min-height: var(--ir-toque);
	color: var(--ir-cor-secundaria);
}

.ir-produto__selos .ir-icone {
	width: 18px;
	height: 18px;
	color: var(--ir-cor-texto);
}

/* ---------- Abas ---------- */

.ir-info-produto {
	padding: 24px 0 32px;
	border-top: 1px solid var(--ir-cor-borda-suave);
}

.ir-abas {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0 calc(-1 * var(--ir-margem));
	padding: 0 var(--ir-margem) 4px;
}

.ir-abas__aba {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: var(--ir-toque);
	padding: 0 16px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font-size: 11px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.ir-abas__aba[aria-selected="true"] {
	border-color: var(--ir-preto);
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-abas__contagem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--ir-raio-pilula);
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 11px;
	letter-spacing: 0;
}

.ir-abas__aba[aria-selected="true"] .ir-abas__contagem {
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
}

.ir-aba-painel {
	margin-top: 24px;
	scroll-margin-top: 80px;
}

.ir-aba-painel:focus-visible {
	outline-offset: 6px;
}

/* Com JavaScript, só o painel da aba escolhida aparece. */
.ir-js .ir-aba-painel:not(.is-ativa) {
	display: none;
}

/* Sem JavaScript, os painéis ficam um embaixo do outro. */
html:not(.ir-js) .ir-aba-painel + .ir-aba-painel {
	margin-top: 40px;
}

.ir-aba-painel__titulo {
	margin: 0 0 6px;
	font-size: 24px;
}

.ir-aba-painel__titulo strong,
.ir-descricao__titulo strong {
	font-weight: var(--ir-peso-destaque);
}

.ir-aba-painel__descricao {
	margin: 0 0 16px;
	color: var(--ir-cor-secundaria);
	font-size: 13px;
}

/* Descrição */
.ir-descricao__titulo {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
}

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

.ir-descricao__visual {
	display: flex;
	justify-content: center;
	padding: 36px 24px 56px;
}

.ir-descricao__foto {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: var(--ir-raio-card-p);
}

.ir-peca {
	position: relative;
	width: 88%;
	max-width: 560px;
}

.ir-peca__imagem {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 20px 18px rgba(17, 17, 17, 0.2)) drop-shadow(0 4px 4px rgba(17, 17, 17, 0.1));
	transform: rotate(-8deg);
	animation: ir-flutuar 5s ease-in-out infinite;
}

.ir-peca__sombra {
	position: absolute;
	right: 14%;
	bottom: -48px;
	left: 14%;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(17, 17, 17, 0.16), rgba(17, 17, 17, 0));
	animation: ir-sombra 5s ease-in-out infinite;
}

@keyframes ir-sombra {
	0%,
	100% {
		transform: scaleX(1);
		opacity: 1;
	}

	50% {
		transform: scaleX(0.88);
		opacity: 0.7;
	}
}

.ir-ficha {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}

.ir-ficha__item {
	padding: 12px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-campo);
}

.ir-ficha dt {
	color: var(--ir-cor-secundaria);
	font-size: 10px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ir-ficha dd {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-descricao__manual {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ir-toque);
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

/* Dúvidas frequentes */
.ir-acordeao {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 900px;
}

.ir-acordeao__item {
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo);
}

.ir-acordeao__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: var(--ir-peso-medio);
	list-style: none;
	cursor: pointer;
}

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

.ir-acordeao__pergunta svg {
	flex: 0 0 auto;
	transition: transform var(--ir-transicao);
}

.ir-acordeao__item[open] .ir-acordeao__pergunta svg {
	transform: rotate(180deg);
}

.ir-acordeao__pergunta:focus-visible {
	border-radius: var(--ir-raio-botao);
	outline-offset: -2px;
}

.ir-acordeao__resposta {
	margin: 0;
	padding: 0 14px 16px;
	color: var(--ir-cor-secundaria);
	font-size: 13px;
	line-height: 1.7;
}

.ir-aba-painel__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 28px;
	margin-top: 12px;
}

.ir-aba-painel__links .ir-descricao__manual {
	margin: 0;
}

.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);
}

/* Instalados */
.ir-aba-painel__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0 16px;
	margin-bottom: 8px;
}

.ir-instalados-produto {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.ir-instalados-produto img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	object-fit: cover;
}

.ir-instalados-produto li:first-child {
	grid-column: span 2;
}

.ir-instalados-produto li:first-child img {
	aspect-ratio: 4 / 3;
}

/* Foto que sobraria sozinha na última linha ocupa a largura toda. */
.ir-instalados-produto li:nth-child(n + 2):last-child:nth-child(even) {
	grid-column: span 2;
}

.ir-instalados-produto li:nth-child(n + 2):last-child:nth-child(even) img {
	aspect-ratio: 4 / 3;
}

/* ---------- Passos, avaliações, relacionados, vistos ---------- */

.ir-passos-produto {
	padding: 32px 0;
	background: var(--ir-fundo-suave-2);
}

.ir-passos-produto .ir-passo {
	background: var(--ir-fundo);
}

.ir-avaliacoes--produto {
	padding-top: 32px;
	scroll-margin-top: 16px;
}

.ir-relacionados {
	padding-top: 28px;
	padding-bottom: 28px;
	border-top: 1px solid var(--ir-cor-borda-suave);
}

.ir-completar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding: 12px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-botao);
}

.ir-completar__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--ir-fundo-suave);
}

.ir-completar__icone svg {
	width: 22px;
	height: 22px;
}

.ir-completar__texto {
	flex: 1 1 200px;
	min-width: 0;
}

.ir-completar__texto p {
	margin: 0;
}

.ir-completar__rotulo {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ir-completar__nome {
	margin-top: 2px !important;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
}

.ir-completar__descricao {
	margin-top: 2px !important;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

.ir-completar__opcoes {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: 10px;
}

.ir-completar__opcoes li {
	flex: 1 1 140px;
}

.ir-completar__opcao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 52px;
	padding: 6px 6px 6px 16px;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave-2);
	color: var(--ir-cor-texto);
	text-decoration: none;
}

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

.ir-completar__opcao-texto {
	display: flex;
	flex-direction: column;
}

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

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

.ir-completar__mais {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-relacionados__lista {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	margin: 0 calc(-1 * var(--ir-margem));
	padding: 0 var(--ir-margem) 4px;
}

.ir-relacionados__lista > li {
	flex: 0 0 160px;
}

/* No celular, o cartão relacionado mostra só código e preço, e o "Complete a
   instalação" fica compacto (ProdutoMobile.dc.html). */
@media (max-width: 899.98px) {
	.ir-relacionados .ir-cartao__descricao,
	.ir-relacionados .ir-cartao__condicoes,
	.ir-completar__descricao {
		display: none;
	}
}

.ir-vistos {
	padding: 24px 0 28px;
	border-top: 1px solid var(--ir-cor-borda-suave);
}

.ir-vistos__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

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

.ir-vistos__form {
	margin: 0;
}

.ir-vistos__limpar {
	min-height: var(--ir-toque);
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	font-weight: var(--ir-peso-medio);
	text-decoration: underline;
	cursor: pointer;
}

.ir-vistos__lista {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	margin: 0 calc(-1 * var(--ir-margem));
	padding: 0 var(--ir-margem) 4px;
}

.ir-vistos__lista > li {
	flex: 0 0 auto;
}

.ir-visto {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px 8px 8px;
	border: 1px solid var(--ir-cor-borda-suave);
	border-radius: var(--ir-raio-botao);
	color: var(--ir-cor-texto);
	text-decoration: none;
}

.ir-visto:hover {
	border-color: var(--ir-cor-borda);
	color: var(--ir-cor-texto);
}

.ir-visto__foto {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--ir-fundo-suave);
	object-fit: cover;
}

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

.ir-visto__nome {
	font-size: 13px;
	font-weight: var(--ir-peso-forte);
}

.ir-visto__descricao {
	overflow: hidden;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.ir-visto--esgotado .ir-visto__preco {
	color: var(--ir-cor-terciaria);
}

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

/* ---------- Barra fixa de compra ---------- */

.ir-barra-compra {
	position: fixed;
	right: 0;
	bottom: calc(var(--ir-barra-altura) + env(safe-area-inset-bottom, 0px));
	left: 0;
	z-index: 15;
	border-top: 1px solid var(--ir-cor-borda);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.1);
}

/*
 * Com JavaScript, a barra fica escondida até o Comprar do formulário sair da
 * tela, para cima (produto.js põe .is-visivel). Escondida com visibility, para
 * não receber o foco do teclado. Some também com o carrinho lateral aberto.
 */
.ir-js .ir-barra-compra {
	visibility: hidden;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.24s ease-out, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.26s;
}

.ir-js .ir-barra-compra.is-visivel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.24s ease-out, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.ir-js body.ir-sacola-aberta .ir-barra-compra {
	visibility: hidden;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ir-js .ir-barra-compra,
	.ir-js .ir-barra-compra.is-visivel {
		transform: none;
		transition: none;
	}
}

/* A página ganha espaço no fim para a barra não cobrir o rodapé. */
body:has(.ir-barra-compra) {
	padding-bottom: calc(var(--ir-barra-altura) + 69px + env(safe-area-inset-bottom, 0px));
}

/* O foco do teclado não pode ficar escondido atrás do topo fixo nem das barras de baixo. */
html:has(.ir-barra-compra) {
	scroll-padding-top: calc(var(--ir-topo-altura) + 16px);
	scroll-padding-bottom: calc(var(--ir-barra-altura) + 88px + env(safe-area-inset-bottom, 0px));
}

/* No celular: − e + da quantidade e "Comprar · total". */
.ir-barra-compra__linha {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
}

.ir-barra-compra__texto {
	flex: 1 1 180px;
	min-width: 0;
}

.ir-barra-compra__texto p {
	margin: 0;
}

.ir-barra-compra__nome {
	overflow: hidden;
	font-size: 14px;
	font-weight: var(--ir-peso-forte);
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.ir-barra-compra__qtd {
	flex: 0 0 auto;
}

.ir-barra-compra__total {
	min-width: 120px;
	margin: 0;
	font-size: 18px;
	font-weight: var(--ir-peso-destaque);
	text-align: right;
}

.ir-barra-compra__whatsapp {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--ir-whatsapp);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
}

.ir-barra-compra__comprar {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 48px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--ir-raio-campo);
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.ir-barra-compra__comprar:hover {
	background: var(--ir-preto-hover);
}

/* − e + compactos (barra fixa e carrinho lateral). */
.ir-mini-qtd {
	display: flex;
	align-items: center;
	height: 48px;
	border: 1px solid var(--ir-cor-borda-campo);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
}

.ir-mini-qtd__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ir-toque);
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	font-family: inherit;
	font-size: 18px;
	cursor: pointer;
}

.ir-mini-qtd__valor {
	min-width: 50px;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
	text-align: center;
	white-space: nowrap;
}

/* Chacoalhada do Comprar da barra (para quando o cliente interage; ver produto.js). */
.ir-chacoalha {
	animation: ir-chacoalhar 6s ease-in-out infinite;
}

@keyframes ir-chacoalhar {
	0%,
	84%,
	100% {
		transform: translateX(0) rotate(0);
	}

	86% {
		transform: translateX(-4px) rotate(-2deg);
	}

	88% {
		transform: translateX(4px) rotate(2deg);
	}

	90% {
		transform: translateX(-4px) rotate(-2deg);
	}

	92% {
		transform: translateX(3px) rotate(1deg);
	}

	94% {
		transform: translateX(-2px) rotate(0);
	}
}

/* ---------- Computador ---------- */

/* ---------- Carrinho lateral (sacola.js) ---------- */

.ir-sacola {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

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

.ir-sacola__fundo {
	position: absolute;
	inset: 0;
	background: var(--ir-vidro-cor);
	-webkit-backdrop-filter: var(--ir-vidro-desfoque);
	backdrop-filter: var(--ir-vidro-desfoque);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.24s ease-out;
}

.ir-sacola.is-aberta .ir-sacola__fundo {
	opacity: 1;
}

/* No celular, uma folha que sobe de baixo; no computador, um painel que entra pela direita. */
.ir-sacola__painel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	max-height: 88dvh;
	overflow: hidden;
	border-radius: var(--ir-raio-card-g) var(--ir-raio-card-g) 0 0;
	background: var(--ir-fundo);
	box-shadow: 0 -12px 40px rgba(17, 17, 17, 0.18);
	transform: translateY(100%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ir-sacola.is-aberta .ir-sacola__painel {
	transform: none;
}

.ir-sacola__painel:focus {
	outline: none;
}

/* O painel rola, então o contorno de foco fica por dentro para não ser cortado. */
.ir-sacola__painel :focus-visible {
	outline-offset: -2px;
}

/* Nos botões pretos, por dentro ele sumiria: fica por fora (há folga em volta deles). */
.ir-sacola__painel .ir-sacola__finalizar:focus-visible,
.ir-sacola__painel .ir-sacola-frete__botao:focus-visible {
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ir-sacola__fundo,
	.ir-sacola__painel {
		transition: none;
	}
}

.ir-sacola__alca {
	flex: 0 0 auto;
	align-self: center;
	width: 40px;
	height: 4px;
	margin-top: 8px;
	border-radius: var(--ir-raio-pilula);
	background: var(--ir-cor-borda-campo);
}

.ir-sacola__topo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 6px 10px 16px;
	border-bottom: 1px solid var(--ir-cor-borda-suave);
}

.ir-sacola__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 16px;
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola__ok {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--ir-raio-pilula);
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-sacola__aviso {
	flex: 0 0 auto;
	margin: 12px 16px 0;
	padding: 10px 12px;
	border: 1px solid var(--ir-cor-erro);
	border-radius: var(--ir-raio-campo);
	color: var(--ir-cor-erro);
	font-size: 13px;
	line-height: 1.5;
}

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

/* Erro que veio junto do Comprar (por exemplo, a resina recusada), dentro do conteúdo. */
.ir-sacola__erro {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--ir-cor-erro);
	border-radius: var(--ir-raio-campo);
	color: var(--ir-cor-erro);
	font-size: 13px;
	line-height: 1.5;
}

.ir-sacola__conteudo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.ir-sacola__corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
}

.ir-sacola__vazio {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 14px;
}

.ir-sacola-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ir-sacola-item--resina {
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--ir-cor-borda-suave);
}

.ir-sacola-item__foto {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--ir-raio-campo);
	object-fit: cover;
}

.ir-sacola-item__foto--icone {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

.ir-sacola-item__texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ir-sacola-item__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola-item__valor {
	white-space: nowrap;
}

.ir-sacola-item__detalhe {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-sacola-item__qtd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	margin-top: 6px;
}

.ir-sacola-item__qtd .ir-mini-qtd {
	height: var(--ir-toque);
}

.ir-sacola-item__unitario {
	color: var(--ir-cor-terciaria);
	font-size: 12px;
	white-space: nowrap;
}

.ir-sacola-item__remover {
	align-self: flex-start;
	min-height: var(--ir-toque);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-secundaria);
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--ir-peso-destaque);
	text-decoration: underline;
	cursor: pointer;
}

.ir-sacola-item__remover:hover {
	color: var(--ir-cor-texto);
}

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

.ir-sacola__outros a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ir-toque);
	color: var(--ir-cor-texto);
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola-resina {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	background: var(--ir-fundo-suave-2);
}

.ir-sacola-resina__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--ir-toque);
	height: var(--ir-toque);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
}

.ir-sacola-resina__texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ir-sacola-resina__titulo {
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola-resina__detalhe {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-sacola-resina__botao {
	flex: 0 0 auto;
	min-height: var(--ir-toque);
	padding: 0 16px;
	border: 1px solid var(--ir-preto);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	cursor: pointer;
}

.ir-sacola-resina__botao:hover {
	background: var(--ir-fundo-suave);
}

.ir-sacola-frete {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ir-sacola-frete__titulo {
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola-frete__campo {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 3px 3px 3px 14px;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-secundaria);
}

.ir-sacola-frete__campo input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--ir-toque);
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	font-family: inherit;
	font-size: 16px; /* Abaixo de 16px, o iPhone dá zoom ao focar o campo. */
}

.ir-sacola-frete__campo input[aria-invalid="true"] {
	color: var(--ir-cor-erro);
}

.ir-sacola-frete__botao {
	flex: 0 0 auto;
	min-height: var(--ir-toque);
	padding: 0 18px;
	border: 0;
	border-radius: 11px;
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	cursor: pointer;
}

.ir-sacola-frete__botao:hover {
	background: var(--ir-preto-hover);
}

.ir-sacola-frete__opcoes {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ir-sacola-frete__entrega {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ir-sacola-frete__opcao {
	position: relative;
}

/* O rádio de verdade fica por baixo, invisível; a bolinha é desenhada no rótulo. */
.ir-sacola-frete__opcao input[type="radio"] {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 18px;
	height: 18px;
	margin: -9px 0 0;
	opacity: 0;
}

.ir-sacola-frete__rotulo {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 12px;
	border: 1.5px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	font-size: 13px;
}

label.ir-sacola-frete__rotulo {
	cursor: pointer;
}

.ir-sacola-frete__opcao input[type="radio"] + .ir-sacola-frete__rotulo::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--ir-preto);
	border-radius: var(--ir-raio-pilula);
}

.ir-sacola-frete__opcao input[type="radio"]:checked + .ir-sacola-frete__rotulo {
	border-color: var(--ir-preto);
}

.ir-sacola-frete__opcao input[type="radio"]:checked + .ir-sacola-frete__rotulo::before {
	border-width: 5px;
}

.ir-sacola-frete__opcao input[type="radio"]:focus-visible + .ir-sacola-frete__rotulo {
	outline: 2px solid var(--ir-preto);
	outline-offset: 2px;
}

.ir-sacola-frete__nome {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola-frete__nome span {
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	font-weight: var(--ir-peso-normal);
}

.ir-sacola-frete__opcoes strong {
	flex: 0 0 auto;
	font-weight: var(--ir-peso-destaque);
}

.ir-sacola-frete__nada {
	margin: 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

.ir-sacola__garantias {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

.ir-sacola__garantias li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ir-sacola__garantias svg {
	flex: 0 0 auto;
	color: var(--ir-cor-texto);
}

.ir-sacola__pe {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ir-cor-borda-suave);
}

.ir-sacola__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	font-size: 13px;
}

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

/* Com a entrega escolhida, o destaque passa para o Total. */
.ir-sacola__subtotal--linha {
	margin-bottom: -4px;
}

.ir-sacola__subtotal--linha strong {
	font-size: 14px;
}

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

.ir-sacola__avista-celular {
	margin: -4px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	text-align: right;
}

.ir-sacola__avista-celular strong {
	color: var(--ir-cor-texto);
}

.ir-sacola__finalizar {
	width: 100%;
	min-height: 54px;
}

.ir-sacola__acoes {
	display: flex;
	gap: 8px;
}

.ir-sacola__acoes > * {
	flex: 1 1 0;
	min-width: 0;
	min-height: 46px;
	padding: 0 10px;
	font-size: 13px;
}

.ir-sacola__continuar {
	border: 1px solid var(--ir-cor-borda);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
}

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

@media (min-width: 900px) {
	.ir-trilha--produto {
		padding-top: 0;
	}

	.ir-produto__topo {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
		align-items: start;
		gap: 40px;
		padding-top: 40px;
		padding-right: var(--ir-margem);
		padding-bottom: 64px;
		padding-left: var(--ir-margem);
	}

	.ir-produto__galeria {
		position: sticky;
		top: 24px;
		padding: 0;
	}

	/* Até 1199px as miniaturas ficam embaixo da foto (ao lado, ficariam mais altas que ela). */
	.ir-galeria__miniatura {
		width: 72px;
		height: 72px;
	}

	.ir-galeria__aviso {
		top: 16px;
		left: 16px;
		padding: 8px 14px;
		border-radius: 10px;
		font-size: 12px;
	}

	.ir-produto__resumo {
		gap: 22px;
		padding: 0;
	}

	.ir-produto__titulo {
		font-size: clamp(30px, 3vw, 40px);
		line-height: 1.12;
		letter-spacing: -0.01em;
	}

	.ir-produto__nota {
		gap: 8px;
		margin-top: 4px;
		font-size: 13px;
	}

	.ir-produto__nota .ir-estrelas svg {
		width: 15px;
		height: 15px;
	}

	.ir-tons-produto__titulo {
		justify-content: center;
		gap: 0.3em;
		margin-bottom: 10px;
		font-size: 12px;
	}

	.ir-tons-produto__faixa {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	/* 6 tons de 52px com 6px entre eles. */
	.ir-tons-produto__lista {
		flex: 0 1 342px;
		min-width: 0;
		margin: 0;
		padding: 2px 0;
		scroll-padding-inline: 0;
	}

	.ir-tons-produto__seta {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: var(--ir-toque);
		height: var(--ir-toque);
		padding: 0;
		border: 1px solid var(--ir-cor-borda);
		border-radius: var(--ir-raio-pilula);
		background: var(--ir-fundo);
		color: var(--ir-cor-texto);
		cursor: pointer;
	}

	.ir-tons-produto__seta:hover:not([aria-disabled="true"]) {
		border-color: var(--ir-preto);
	}

	.ir-tons-produto__seta[aria-disabled="true"] {
		opacity: 0.35;
		cursor: default;
	}

	.ir-tom-produto {
		gap: 4px;
	}

	.ir-tom-produto__codigo {
		font-size: 10px;
	}

	.ir-preco-quadro {
		flex-wrap: wrap;
		gap: 12px;
		padding: 20px 22px;
	}

	.ir-preco-quadro__rotulo {
		font-weight: var(--ir-peso-destaque);
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.ir-preco-quadro__de {
		margin-left: 6px;
	}

	.ir-preco-quadro__valor {
		margin-top: 6px !important;
	}

	.ir-preco-quadro__numero {
		font-size: 36px;
	}

	.ir-preco-quadro__unidade {
		font-size: 15px;
	}

	.ir-preco-quadro__parcelas {
		font-size: 13px;
	}

	.ir-preco-quadro__selo {
		padding: 5px 10px;
		border-radius: 8px;
		font-size: 11px;
		letter-spacing: 0.08em;
	}

	.ir-preco-quadro__vista-valor {
		margin-top: 6px !important;
		font-size: 22px;
	}

	.ir-preco-quadro__vista-rotulo {
		font-size: 12px;
	}

	.ir-calc-parede__topo {
		align-items: baseline;
	}

	.ir-calc-parede__titulo {
		font-size: 14px;
	}

	.ir-calc-parede__abrir {
		font-size: 13px;
	}

	.ir-compra__linha {
		gap: 10px;
	}

	.ir-qtd {
		height: 58px;
	}

	.ir-qtd__botao {
		width: 44px;
		height: 56px;
	}

	.ir-qtd__campo {
		width: 44px;
		font-size: 17px;
	}

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

	.ir-compra__comprar {
		min-height: 58px;
		padding: 0 16px;
		font-size: 13px;
		letter-spacing: var(--ir-espacamento-caixa-alta);
	}

	.ir-resina-junto {
		gap: 14px;
		padding: 12px 14px;
	}

	.ir-resina-junto input {
		width: 20px;
		height: 20px;
	}

	.ir-resina-junto__icone {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--ir-cor-borda-suave);
		border-radius: 10px;
		background: var(--ir-fundo);
	}

	.ir-resina-junto__detalhe {
		font-size: 12px;
	}

	.ir-compra__avista {
		padding: 0 4px;
	}

	.ir-produto__extras {
		margin-top: -12px;
	}

	.ir-produto__whatsapp {
		font-size: 13px;
		letter-spacing: var(--ir-espacamento-caixa-alta);
	}

	.ir-cep__campo {
		padding-left: 16px;
	}

	.ir-cep__campo input {
		font-size: 14px;
	}

	.ir-cep__botao {
		padding: 0 18px;
	}

	.ir-produto__selos {
		gap: 8px;
		padding: 4px 4px 0;
		font-size: 12px;
		text-align: left;
	}

	.ir-produto__selos li,
	.ir-produto__selos a {
		flex-direction: row;
		gap: 8px;
	}

	/* Abas */
	.ir-info-produto {
		padding: 40px 0 88px;
	}

	.ir-abas {
		flex-wrap: wrap;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.ir-abas__aba {
		gap: 10px;
		min-height: 46px;
		padding: 0 20px;
		font-size: 12px;
		letter-spacing: var(--ir-espacamento-caixa-alta);
	}

	.ir-aba-painel {
		margin-top: 32px;
	}

	.ir-aba-painel__titulo {
		font-size: 30px;
	}

	.ir-aba-painel__descricao {
		margin-bottom: 24px;
		font-size: 14px;
	}

	.ir-descricao {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		grid-template-areas:
			"intro visual"
			"detalhes visual";
		align-items: start;
		gap: 0 40px;
	}

	.ir-descricao__intro {
		grid-area: intro;
	}

	.ir-descricao__detalhes {
		grid-area: detalhes;
	}

	.ir-descricao__visual {
		grid-area: visual;
		align-items: center;
		align-self: stretch;
		min-height: 460px;
		padding: 40px 24px 80px;
	}

	.ir-descricao__titulo {
		font-size: 34px;
	}

	.ir-descricao__paragrafo {
		margin-top: 16px;
		font-size: 15px;
		line-height: 1.75;
	}

	.ir-peca {
		width: 82%;
	}

	.ir-peca__imagem {
		filter: drop-shadow(0 26px 22px rgba(17, 17, 17, 0.2)) drop-shadow(0 4px 4px rgba(17, 17, 17, 0.1));
	}

	.ir-peca__sombra {
		bottom: -64px;
		height: 24px;
	}

	.ir-ficha {
		gap: 10px;
		margin-top: 24px;
	}

	.ir-ficha__item {
		padding: 14px 16px;
		border-radius: var(--ir-raio-botao);
	}

	.ir-ficha dt {
		font-size: 11px;
		letter-spacing: var(--ir-espacamento-caixa-alta);
	}

	.ir-ficha dd {
		font-size: 14px;
	}

	.ir-descricao__manual {
		margin-top: 18px;
		font-size: 14px;
	}

	.ir-acordeao {
		gap: 10px;
	}

	.ir-acordeao__item {
		border-radius: 16px;
	}

	.ir-acordeao__pergunta {
		gap: 16px;
		min-height: 64px;
		padding: 16px 22px;
		font-size: 15px;
	}

	.ir-acordeao__resposta {
		padding: 0 22px 20px;
		font-size: 14px;
	}

	.ir-aba-painel__links {
		gap: 10px 28px;
		margin-top: 24px;
	}

	.ir-link-whatsapp {
		font-size: 14px;
	}

	.ir-aba-painel__topo {
		margin-bottom: 20px;
	}

	.ir-instalados-produto {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 280px;
		gap: 12px;
	}

	.ir-instalados-produto img,
	.ir-instalados-produto li:first-child img {
		aspect-ratio: auto;
		border-radius: var(--ir-raio-card-g);
	}

	.ir-instalados-produto:not(.ir-instalados-produto--2) li:nth-child(n + 2):last-child:nth-child(even) {
		grid-column: auto;
	}

	/* 4 fotos: a primeira grande (2 × 2), a segunda alta, as outras duas embaixo. */
	.ir-instalados-produto--4 li:first-child,
	.ir-instalados-produto--3 li:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	.ir-instalados-produto--4 li:nth-child(2),
	.ir-instalados-produto--3 li:nth-child(2) {
		grid-row: span 2;
	}

	.ir-instalados-produto--1 li:first-child,
	.ir-instalados-produto--2 li:first-child {
		grid-column: span 2;
	}

	.ir-instalados-produto--2 li:nth-child(2) {
		grid-column: span 2;
	}

	/* Seções de baixo */
	.ir-passos-produto {
		padding: 64px 0;
	}

	.ir-passos-produto .ir-secao__titulo {
		font-size: 28px;
	}

	.ir-avaliacoes--produto {
		padding-top: 72px;
	}

	.ir-relacionados {
		padding-top: 72px;
		padding-bottom: 80px;
		border-top: 0;
	}

	.ir-completar {
		gap: 16px 24px;
		margin-bottom: 28px;
		padding: 18px;
		border-radius: var(--ir-raio-card-p);
	}

	.ir-completar__icone {
		width: 64px;
		height: 64px;
		border-radius: var(--ir-raio-botao);
	}

	.ir-completar__icone svg {
		width: 28px;
		height: 28px;
	}

	.ir-completar__rotulo {
		letter-spacing: 0.16em;
	}

	.ir-completar__nome {
		margin-top: 4px !important;
		font-size: 16px;
	}

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

	.ir-completar__opcoes {
		flex: 0 1 auto;
	}

	.ir-completar__opcoes li {
		flex: 0 0 auto;
	}

	.ir-relacionados__lista {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 28px 20px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.ir-vistos {
		padding: 48px 0 64px;
	}

	.ir-vistos__topo {
		margin-bottom: 20px;
	}

	.ir-vistos__titulo {
		font-size: 22px;
	}

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

	.ir-vistos__lista {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 12px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.ir-visto {
		gap: 12px;
		padding: 10px;
		border-radius: 16px;
	}

	.ir-visto__foto {
		width: 60px;
		height: 60px;
	}

	.ir-visto__nome {
		font-size: 14px;
	}

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

	.ir-vistos__vazio {
		font-size: 14px;
	}

	/* Barra fixa */
	.ir-barra-compra {
		bottom: 0;
		box-shadow: 0 -8px 30px rgba(17, 17, 17, 0.08);
	}

	body:has(.ir-barra-compra) {
		padding-bottom: 69px;
	}

	html:has(.ir-barra-compra) {
		scroll-padding-top: 16px;
		scroll-padding-bottom: 96px;
	}

	.ir-barra-compra__linha {
		flex-wrap: wrap;
		gap: 10px 18px;
		padding: 10px var(--ir-margem);
	}

	.ir-barra-compra__foto {
		flex: 0 0 auto;
		width: 46px;
		height: 46px;
		border-radius: 10px;
		object-fit: cover;
	}

	.ir-barra-compra__comprar {
		flex: 0 0 auto;
		padding: 0 22px;
		letter-spacing: var(--ir-espacamento-caixa-alta);
	}

	.ir-mini-qtd__valor {
		min-width: 56px;
	}
}

@media (min-width: 1200px) {
	/* Proporção do mockup: galeria ~730px e coluna de compra ~500px em 1440. */
	.ir-produto__topo {
		grid-template-columns: minmax(0, 1.45fr) minmax(420px, 1fr);
	}

	.ir-galeria {
		flex-direction: row;
		align-items: stretch;
		gap: 12px;
	}

	/* A coluna tem a altura da foto; a lista dentro dela não a empurra e rola. */
	.ir-galeria__coluna {
		position: relative;
		flex: 0 0 96px;
		order: 0;
	}

	.ir-galeria__miniaturas {
		position: absolute;
		inset: 0;
		flex-direction: column;
		gap: 12px;
		overflow: hidden auto;
		padding: 0;
		scroll-padding-block: 52px;
	}

	.ir-galeria__miniatura {
		width: 96px;
		height: 96px;
		border-radius: var(--ir-raio-botao);
	}

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

	.ir-galeria__seta {
		position: absolute;
		left: 26px;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--ir-toque);
		height: var(--ir-toque);
		padding: 0;
		border: 1px solid var(--ir-cor-borda);
		border-radius: var(--ir-raio-campo);
		background: rgba(255, 255, 255, 0.94);
		color: var(--ir-cor-texto);
		cursor: pointer;
	}

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

	.ir-galeria__seta .ir-icone {
		width: 20px;
		height: 20px;
	}

	.ir-galeria__seta--anterior {
		top: 6px;
	}

	.ir-galeria__seta--anterior .ir-icone {
		transform: rotate(-90deg);
	}

	.ir-galeria__seta--proxima {
		bottom: 6px;
	}

	.ir-galeria__seta--proxima .ir-icone {
		transform: rotate(90deg);
	}

	.ir-galeria__principal {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Carrinho lateral no computador: painel de 440px que entra pela direita. */
@media (min-width: 900px) {
	.ir-sacola__painel {
		top: 0;
		left: auto;
		width: 440px;
		max-width: 92vw;
		max-height: none;
		border-radius: 0;
		box-shadow: -24px 0 60px rgba(17, 17, 17, 0.18);
		transform: translateX(100%);
	}

	.ir-sacola__alca {
		display: none;
	}

	.ir-sacola__topo {
		padding: 12px 12px 12px 24px;
	}

	.ir-sacola__titulo {
		font-size: 17px;
	}

	.ir-sacola__ok {
		width: 28px;
		height: 28px;
	}

	.ir-sacola__aviso {
		margin: 14px 24px 0;
	}

	.ir-sacola__corpo {
		gap: 18px;
		padding: 22px 24px;
	}

	.ir-sacola-item {
		gap: 14px;
	}

	.ir-sacola-item--resina {
		padding-top: 18px;
	}

	.ir-sacola-item__foto {
		width: 76px;
		height: 76px;
		border-radius: var(--ir-raio-botao);
	}

	.ir-sacola-item__linha {
		gap: 10px;
		font-size: 14px;
	}

	.ir-sacola-item__detalhe {
		font-size: 12px;
	}

	.ir-sacola-item__qtd {
		margin-top: 8px;
	}

	.ir-sacola-resina {
		flex-wrap: wrap;
		gap: 12px 14px;
		padding: 16px;
		border-radius: var(--ir-raio-card-p);
	}

	.ir-sacola-resina__texto {
		flex: 1 1 180px;
	}

	.ir-sacola-resina__titulo {
		font-size: 14px;
	}

	.ir-sacola-resina__detalhe {
		font-size: 12px;
	}

	.ir-sacola-resina__botao {
		padding: 0 18px;
	}

	.ir-sacola-frete__campo input {
		font-size: 14px;
	}

	.ir-sacola__pe {
		gap: 12px;
		padding: 18px 24px 22px;
	}

	.ir-sacola__subtotal {
		gap: 12px;
		font-size: 14px;
	}

	.ir-sacola__subtotal strong {
		font-size: 20px;
	}

	.ir-sacola__subtotal--linha strong {
		font-size: 14px;
	}

	.ir-sacola__avista {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 10px 14px;
		border-radius: var(--ir-raio-campo);
		background: var(--ir-fundo-suave-2);
		color: var(--ir-cor-secundaria);
		font-size: 12px;
	}

	.ir-sacola__avista strong {
		color: var(--ir-cor-texto);
	}

	.ir-sacola__avista > strong {
		font-size: 14px;
		white-space: nowrap;
	}

	.ir-sacola__finalizar {
		min-height: 56px;
	}

	.ir-sacola__acoes {
		gap: 10px;
	}

	.ir-sacola__acoes > * {
		min-height: 48px;
	}
}

/* "Ver as regras de entrega", abaixo do frete pelo CEP (só com regras de venda ligadas). */
.ir-cep__regras {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 4px;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
}