/*
 * Carrinho. Referência: Carrinho.dc.html e CarrinhoMobile.dc.html.
 * Celular primeiro; o computador começa em 900px.
 */

/* A página do carrinho usa o page.php; o espaço de cima é o do mockup. */
.woocommerce-cart .ir-pagina {
	padding-top: 20px;
	padding-bottom: 32px;
}

.ir-carrinho__titulo {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
}

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

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

.ir-carrinho__corpo {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ir-carrinho__itens {
	min-width: 0;
}

.ir-carrinho__form {
	margin: 0;
}

/* ---------- Itens ---------- */

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

.ir-item {
	display: flex;
	gap: 12px;
	padding: 18px 0;
	border-bottom: 1px solid var(--ir-cor-borda-suave);
}

.ir-item__foto {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

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

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

.ir-item__topo {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.ir-item__nome {
	color: var(--ir-cor-texto);
	font-size: 14px;
	font-weight: var(--ir-peso-forte);
	text-decoration: none;
}

.ir-item__nome:hover {
	text-decoration: underline;
}

.ir-item__remover {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--ir-toque);
	height: var(--ir-toque);
	/* A margem negativa embaixo deixa o nome e a descrição juntos, mesmo com o botão de 44px. */
	margin: -10px -10px -14px 0;
	border-radius: var(--ir-raio-campo);
	color: var(--ir-cor-secundaria);
}

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

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

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

.ir-item__qtd {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-campo);
}

.ir-item__qtd:has(.ir-item__campo:focus-visible) {
	outline: 2px solid var(--ir-preto);
	outline-offset: 2px;
}

.ir-item__passo {
	display: 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);
	font-size: 18px;
	font-weight: var(--ir-peso-destaque);
	cursor: pointer;
}

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

.ir-item__campo {
	width: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
	text-align: right;
	appearance: textfield;
	-moz-appearance: textfield;
}

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

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

.ir-item__unidade {
	min-width: 28px;
	padding-left: 4px;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
}

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

.ir-item__valores {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
}

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

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

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

/* "Atualizar carrinho": só sem JavaScript (com ele, a quantidade se aplica sozinha). */
.ir-carrinho__acoes {
	margin-top: 16px;
}

/* Com JavaScript o botão some; sem a margem, o "Continuar comprando" fica a 16px da lista. */
.ir-js .ir-carrinho__acoes {
	margin-top: 0;
}

.ir-js .ir-carrinho__acoes > button[name="update_cart"] {
	display: none;
}

.ir-carrinho__atualizar {
	min-height: 48px;
	padding: 0 20px;
}

/* ---------- Sugestão da resina ---------- */

.ir-sugestao-resina {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--ir-cor-borda);
	border-radius: 16px;
}

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

.ir-sugestao-resina__texto {
	display: flex;
	flex: 1 1 200px;
	flex-direction: column;
	gap: 2px;
}

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

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

.ir-sugestao-resina__botao {
	display: inline-flex;
	align-items: center;
	min-height: var(--ir-toque);
	padding: 0 18px;
	border: 1px solid var(--ir-preto);
	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-sugestao-resina__botao:hover {
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

.ir-carrinho__continuar {
	display: inline-flex;
	align-items: center;
	min-height: var(--ir-toque);
	margin-top: 16px;
	color: var(--ir-cor-texto);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
}

/* ---------- Resumo ---------- */

.ir-resumo {
	padding: 20px;
	border-radius: var(--ir-raio-card-g);
	background: var(--ir-fundo-suave-2);
}

.ir-resumo__titulo {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: var(--ir-peso-destaque);
}

.ir-resumo__linha {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ir-cor-borda-suave);
	font-size: 14px;
}

.ir-resumo__valor {
	font-weight: var(--ir-peso-destaque);
	text-align: right;
}

.ir-resumo__frete {
	padding: 16px 0;
	border-bottom: 1px solid var(--ir-cor-borda-suave);
}

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

/* CEP */
.ir-cep-carrinho {
	margin: 8px 0 0;
}

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

.ir-cep-carrinho__campo input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ir-cor-borda-campo);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font-size: 16px;
	font-weight: var(--ir-peso-medio);
}

.ir-cep-carrinho__botao {
	min-height: 46px;
	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-size: 13px;
	font-weight: var(--ir-peso-destaque);
	cursor: pointer;
}

.ir-cep-carrinho__botao:hover {
	background: var(--ir-fundo-suave);
}

/* Formas de entrega: rádios como cartões */
.ir-entrega {
	min-width: 0;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
}

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

.ir-entrega__opcao {
	position: relative;
}

.ir-entrega__opcao input[type="radio"] {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 18px;
	height: 18px;
	margin: -9px 0 0;
	opacity: 0;
}

.ir-entrega__rotulo {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 14px;
	border: 1.5px solid var(--ir-cor-borda);
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	cursor: pointer;
}

/* A bolinha do rádio (desenhada, o rádio de verdade fica por baixo, invisível). */
.ir-entrega__opcao input[type="radio"] + .ir-entrega__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-entrega__opcao input[type="radio"]:checked + .ir-entrega__rotulo {
	border-color: var(--ir-preto);
}

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

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

.ir-entrega__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

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

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

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

.ir-entrega__destino,
.ir-entrega__aviso,
.ir-entrega__itens {
	margin: 8px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 12px;
}

/* Total, parcelas e à vista */
.ir-resumo__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
}

.ir-resumo__total-valor {
	font-size: 24px;
	font-weight: var(--ir-peso-destaque);
}

.ir-resumo__total-valor small {
	display: none;
}

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

.ir-resumo__avista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo);
	font-size: 13px;
}

.ir-resumo__avista-valor {
	flex: 0 0 auto;
	font-size: 15px;
}

.ir-resumo__acoes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.ir-resumo__finalizar,
.ir-resumo__whatsapp {
	width: 100%;
}

.ir-resumo__whatsapp {
	min-height: 52px;
}

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

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

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

/* ---------- Carrinho vazio ---------- */

.ir-carrinho-vazio {
	padding: 48px 20px;
	border-radius: var(--ir-raio-card-g);
	background: var(--ir-fundo-suave-2);
	text-align: center;
}

.ir-carrinho-vazio__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: var(--ir-peso-destaque);
}

.ir-carrinho-vazio__texto {
	margin: 8px 0 20px;
	color: var(--ir-cor-secundaria);
	font-size: 14px;
}

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

@media (min-width: 900px) {
	.woocommerce-cart .ir-pagina {
		padding-top: 32px;
		padding-bottom: 72px;
	}

	.ir-carrinho__titulo {
		font-size: 36px;
	}

	.ir-carrinho__contagem {
		margin-bottom: 28px;
	}

	.ir-carrinho__corpo {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
		align-items: start;
		gap: 48px;
	}

	.ir-item {
		gap: 20px;
	}

	.ir-item__foto {
		width: 96px;
		height: 96px;
	}

	.ir-item__nome {
		font-size: 16px;
	}

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

	.ir-carrinho__resumo {
		position: sticky;
		top: 24px;
	}

	.ir-resumo {
		padding: 28px;
	}

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