/**
 * Carrinho da Libraria — camada de aparência.
 *
 * = O Que =
 * Redesenha a página de carrinho sem substituir o template do MasterStudy.
 *
 * = Como =
 * Só CSS, sobre a marcação que o tema já imprime. As linhas da tabela viram cartões, o cupom sai
 * de dentro da célula apertada de ações e ganha um bloco próprio, e o resumo vira um painel.
 *
 * = Porque =
 * Substituir o `cart.php` do MasterStudy seria criar um fork: funcionaria hoje e deixaria de
 * receber as correções deles amanhã, sem ninguém perceber. Enquanto o resultado puder ser obtido
 * por CSS, ele é obtido por CSS.
 *
 * Tudo abaixo é escopado em `.woocommerce-cart`, a classe que o WooCommerce põe no `body` só na
 * página de carrinho — nada disto vaza para o resto do site.
 *
 * @since 1.0.0
 * @since 1.4.0 Cores comuns da loja (núcleo) e resumo ao lado dos itens no computador, como no checkout.
 * @since 1.6.0 Avisos do carrinho (sucesso, informação, erro) no visual novo: cartão com ícone num círculo, texto normal
 *              (sem maiúsculas) e o "Continuar comprando" como botão contornado.
 */

.woocommerce-cart {
	/* Um lugar só para mexer. Desde a 1.4.0 os valores vêm das cores comuns da loja do núcleo (`--leco-loja-*`,
	   `libraria-ecossistema/assets/css/loja.css`), as mesmas do checkout; o segundo valor é a reserva para quando o
	   núcleo não as carrega. O filtro `lcart_acento` continua trocando o acento por cima de tudo. */
	--lcart-acento: var(--leco-loja-acento, #6149e7);
	--lcart-acento-escuro: var(--leco-loja-acento-escuro, #4c39c4);
	/* Mesma cor em componentes RGB: é o que permite sombra e anel de foco derivarem do acento em
	   vez de ficarem num roxo fixo que destoaria assim que a cor fosse trocada. */
	--lcart-acento-rgb: var(--leco-loja-acento-rgb, 97, 73, 231);
	--lcart-texto: var(--leco-loja-texto, #1f2430);
	--lcart-suave: var(--leco-loja-suave, #6b7280);
	--lcart-borda: var(--leco-loja-borda, #e8e8ef);
	--lcart-fundo: var(--leco-loja-fundo, #f7f7fb);
	--lcart-raio: var(--leco-loja-raio, 14px);
	--lcart-sombra: var(--leco-loja-sombra, 0 1px 2px rgba(31, 36, 48, .04), 0 8px 24px rgba(31, 36, 48, .06));
}

/* ---------------------------------------------------------------- Tabela → cartões */

.woocommerce-cart .shop_table.cart {
	border: 0;
	border-collapse: separate;
	/* O respiro entre as linhas é o que tira o aspecto de planilha. */
	border-spacing: 0 12px;
	margin: 0 0 8px;
	background: none;
}

.woocommerce-cart .shop_table.cart thead th {
	border: 0;
	background: none;
	padding: 0 16px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lcart-suave);
}

.woocommerce-cart .shop_table.cart tbody tr.cart_item {
	background: #fff;
	box-shadow: var(--lcart-sombra);
	/* `border-radius` em `<tr>` não pega; o arredondamento vai nas células das pontas. */
	transition: box-shadow .18s ease, transform .18s ease;
}

.woocommerce-cart .shop_table.cart tbody tr.cart_item:hover {
	box-shadow: 0 1px 2px rgba(31, 36, 48, .05), 0 14px 32px rgba(31, 36, 48, .10);
}

.woocommerce-cart .shop_table.cart tbody tr.cart_item > td {
	border: 1px solid var(--lcart-borda);
	border-left: 0;
	border-right: 0;
	padding: 18px 16px;
	vertical-align: middle;
	background: transparent;
}

.woocommerce-cart .shop_table.cart tbody tr.cart_item > td:first-child {
	border-left: 1px solid var(--lcart-borda);
	border-radius: var(--lcart-raio) 0 0 var(--lcart-raio);
}

.woocommerce-cart .shop_table.cart tbody tr.cart_item > td:last-child {
	border-right: 1px solid var(--lcart-borda);
	border-radius: 0 var(--lcart-raio) var(--lcart-raio) 0;
}

/* ---------------------------------------------------------------- Item */

.woocommerce-cart .shop_table.cart .product-name {
	font-size: 15px;
	line-height: 1.4;
}

.woocommerce-cart .shop_table.cart .product-name > a:not(.shop_table_small_thumb) {
	color: var(--lcart-texto);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart .shop_table.cart .product-name > a:not(.shop_table_small_thumb):hover {
	color: var(--lcart-acento);
}

.woocommerce-cart .shop_table_small_thumb {
	display: inline-block;
	vertical-align: middle;
	margin-right: 14px;
	border-radius: 10px;
	overflow: hidden;
	/* Anel discreto: separa a imagem do fundo branco sem pesar. */
	box-shadow: 0 0 0 1px var(--lcart-borda);
}

.woocommerce-cart .shop_table_small_thumb img,
.woocommerce-cart .shop_table_small_thumb .thumb {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.woocommerce-cart .shop_table.cart .product-price,
.woocommerce-cart .shop_table.cart .product-subtotal {
	/* Números alinhados coluna a coluna — o detalhe que faz preço parecer preço. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woocommerce-cart .shop_table.cart .product-price {
	color: var(--lcart-suave);
}

.woocommerce-cart .shop_table.cart .product-subtotal {
	color: var(--lcart-texto);
	font-weight: 600;
}

.woocommerce-cart .shop_table.cart .quantity .qty {
	width: 68px;
	height: 40px;
	padding: 0 8px;
	text-align: center;
	border: 1px solid var(--lcart-borda);
	border-radius: 10px;
	background: #fff;
	color: var(--lcart-texto);
}

.woocommerce-cart .shop_table.cart .quantity .qty:focus {
	border-color: var(--lcart-acento);
	outline: 2px solid rgba(var(--lcart-acento-rgb), .18);
	outline-offset: 1px;
}

/* Remover: discreto em repouso, vermelho ao passar o mouse. Ação destrutiva não pede destaque. */
.woocommerce-cart .shop_table.cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--lcart-fundo);
	color: var(--lcart-suave);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-cart .shop_table.cart .product-remove a.remove:hover {
	background: #fdeaea;
	color: #c0392b;
}

/* ---------------------------------------------------------------- Cupom em destaque */

.woocommerce-cart .shop_table.cart td.actions {
	border: 0;
	background: none;
	padding: 20px 0 0;
}

.woocommerce-cart .shop_table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	margin: 0 0 14px;
	background: var(--lcart-fundo);
	border: 1px dashed rgba(var(--lcart-acento-rgb), .32);
	border-radius: var(--lcart-raio);
	/* Faixa de acento à esquerda: é o que faz o olho parar aqui. */
	border-left: 3px solid var(--lcart-acento);
	/* O tema flutua o cupom à esquerda (`.woocommerce .shop_table.cart .coupon{float:left}`), o que
	   fazia o "Atualizar carrinho" subir e encostar ao lado dele. Aqui o cupom é um bloco. */
	float: none;
	clear: both;
}

/* Rótulo que o template não imprime, criado pelo CSS para o bloco se explicar sozinho. */
.woocommerce-cart .shop_table.cart td.actions .coupon::before {
	content: "Tem um cupom de desconto?";
	flex: 1 0 100%;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lcart-texto);
}

.woocommerce-cart .shop_table.cart td.actions .coupon #coupon_code {
	/* `width`, e não `flex-basis`: num contêiner em coluna (celular) o basis viraria **altura** e
	   o campo apareceria como um quadrado gigante. */
	width: 260px;
	max-width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--lcart-borda);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.woocommerce-cart .shop_table.cart td.actions .coupon #coupon_code::placeholder {
	letter-spacing: normal;
	text-transform: none;
	color: #a2a6b4;
}

.woocommerce-cart .shop_table.cart td.actions .coupon #coupon_code:focus {
	border-color: var(--lcart-acento);
	outline: 2px solid rgba(var(--lcart-acento-rgb), .18);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------- Botões */

/*
 * Os `<input type="submit">` do carrinho usam `inline-block`, **nunca** `flex`: input é elemento
 * substituído, e com `display:flex` o Chromium para de desenhar o texto do `value` — o botão vira
 * uma caixa branca vazia. O alinhamento vertical vem de `line-height`, que funciona ali.
 * O único botão que pode ser flex é o "Finalizar compra", que é um `<a>`.
 */
.woocommerce-cart .shop_table.cart td.actions .button {
	/* O tema deixa o botão com largura calculada para a vitrine de cursos; aqui ele é outro botão. */
	width: auto;
	display: inline-block;
	float: none;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 46px;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease, box-shadow .15s ease;
}

/*
 * O tema declara `.button{color:#fff!important}`. Contra `!important` não existe especificidade
 * que resolva — só outro `!important`. Ele fica restrito à cor do texto dos botões do carrinho,
 * que é exatamente o ponto em conflito; nada mais neste arquivo usa o recurso.
 */
.woocommerce-cart .shop_table.cart td.actions .coupon .button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	color: #fff !important;
}

.woocommerce-cart .shop_table.cart td.actions .button.update-cart {
	color: var(--lcart-suave) !important;
}

.woocommerce-cart .shop_table.cart td.actions .button.update-cart:hover {
	color: var(--lcart-texto) !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.woocommerce-cart .shop_table.cart td.actions .coupon .button {
	background: var(--lcart-acento);
	color: #fff;
}

.woocommerce-cart .shop_table.cart td.actions .coupon .button:hover {
	background: var(--lcart-acento-escuro);
}

/* Atualizar carrinho é ação secundária: fantasma, para não competir com finalizar. */
.woocommerce-cart .shop_table.cart td.actions .button.update-cart {
	background: #fff;
	color: var(--lcart-suave);
	box-shadow: inset 0 0 0 1px var(--lcart-borda);
}

.woocommerce-cart .shop_table.cart td.actions .button.update-cart:hover {
	background: var(--lcart-fundo);
	color: var(--lcart-texto);
}

.woocommerce-cart .shop_table.cart td.actions .button:disabled,
.woocommerce-cart .shop_table.cart td.actions .button[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

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

.woocommerce-cart .multiseparator {
	display: none;
}

.woocommerce-cart .cart_totals > .row > [class*="col-"] {
	/* O tema entrega o resumo num col-md-5; largura mínima confortável para números. */
	min-width: 320px;
}

.woocommerce-cart .cart_totals h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--lcart-texto);
	margin: 8px 0 14px;
}

/* `.cart_totals` no meio do seletor: o tema desenha uma borda cinza de 5px nesse bloco com um seletor mais forte
   que `.woocommerce-cart .cart-totals_wrap`, e ela vencia a nossa (1.4.0). */
.woocommerce-cart .cart_totals .cart-totals_wrap {
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--lcart-borda);
	border-radius: var(--lcart-raio);
	box-shadow: var(--lcart-sombra);
}

.woocommerce-cart .cart_totals table {
	margin: 0;
	background: none;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	border: 0;
	padding: 10px 0;
	background: none;
	font-size: 14px;
}

.woocommerce-cart .cart_totals table th {
	color: var(--lcart-suave);
	font-weight: 500;
	text-align: left;
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
	color: var(--lcart-texto);
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .cart_totals tr.cart-discount th,
.woocommerce-cart .cart_totals tr.cart-discount td {
	color: #0f8a4a;
}

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--lcart-borda);
	font-size: 17px;
	font-weight: 700;
	color: var(--lcart-texto);
}

.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 18px;
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	/* Única ação primária da página: ocupa a linha inteira. */
	width: 100%;
	min-height: 52px;
	font-size: 15px;
	background: var(--lcart-acento);
	color: #fff;
	box-shadow: 0 6px 16px rgba(var(--lcart-acento-rgb), .28);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--lcart-acento-escuro);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(var(--lcart-acento-rgb), .34);
}

/* ---------------------------------------------------------------- Resumo ao lado (1.4.0) */

/*
 * No computador, o resumo fica à direita dos itens, como o resumo do pedido no checkout: as duas telas passam a ter
 * a mesma forma. Grade no contêiner do WooCommerce (avisos em cima, itens à esquerda, resumo à direita, preso no
 * topo ao rolar). Abaixo de 992px tudo volta a ficar empilhado, como antes.
 */
@media (min-width: 992px) {

	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
		gap: 0 28px;
		align-items: start;
	}

	/* Os pseudo-elementos de "clearfix" virariam células vazias da grade. */
	.woocommerce-cart .woocommerce::before,
	.woocommerce-cart .woocommerce::after {
		display: none;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce > .woocommerce-cart-form {
		grid-column: 1;
		min-width: 0;
	}

	.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
		position: sticky;
		top: 24px;
		width: auto;
	}

	/* O tema põe o resumo numa coluna do Bootstrap (col-md-5); na grade, ele ocupa a coluna inteira. */
	.woocommerce-cart .cart_totals > .row {
		margin: 0;
	}

	.woocommerce-cart .cart_totals > .row > [class*="col-"] {
		float: none;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
	}
}

/* ---------------------------------------------------------------- Celular */

@media (max-width: 767px) {

	.woocommerce-cart .shop_table.cart thead {
		display: none;
	}

	.woocommerce-cart .shop_table.cart,
	.woocommerce-cart .shop_table.cart tbody,
	.woocommerce-cart .shop_table.cart tr,
	.woocommerce-cart .shop_table.cart td {
		display: block;
		width: 100%;
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item {
		position: relative;
		margin: 0 0 14px;
		border: 1px solid var(--lcart-borda);
		border-radius: var(--lcart-raio);
		overflow: hidden;
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td,
	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td:first-child,
	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td:last-child {
		border: 0;
		border-radius: 0;
		padding: 10px 16px;
		text-align: left;
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td.product-name {
		padding-top: 16px;
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td.product-subtotal {
		padding-bottom: 16px;
	}

	/* O rótulo de cada linha vem do próprio tema (`.mobile-title`) — aqui ele só vira legenda. */
	.woocommerce-cart .shop_table.cart .mobile-title {
		display: inline-block;
		min-width: 92px;
		font-size: 12px;
		font-weight: 500;
		color: var(--lcart-suave);
	}

	/* No cartão, o nome do produto é o título: o rótulo "Nome do produto:" só rouba espaço, e sem
	   quebra de linha o nome vazava para fora da borda. */
	.woocommerce-cart .shop_table.cart .product-name .mobile-title {
		display: none;
	}

	.woocommerce-cart .shop_table.cart td.product-name {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-right: 52px;
		font-size: 15px;
	}

	.woocommerce-cart .shop_table.cart td.product-name > a:not(.shop_table_small_thumb) {
		overflow-wrap: anywhere;
	}

	.woocommerce-cart .shop_table_small_thumb {
		flex: 0 0 auto;
		margin-right: 0;
	}

	/* O "excluir" sai do fluxo e vira um ícone no canto do cartão. */
	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td.product-remove {
		position: absolute;
		top: 10px;
		right: 10px;
		width: auto;
		padding: 0;
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item > td.product-remove .mobile-title {
		display: none;
	}

	.woocommerce-cart .shop_table.cart td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-cart .shop_table.cart td.actions .coupon #coupon_code,
	.woocommerce-cart .shop_table.cart td.actions .coupon .button,
	.woocommerce-cart .shop_table.cart td.actions .button.update-cart {
		width: 100%;
		max-width: none;
		display: block;
	}

	.woocommerce-cart .cart_totals > .row > [class*="col-"] {
		min-width: 0;
	}
}

/* ---------------------------------------------------------------- Mensagem do topo (v1.0.1) */

.woocommerce-cart .lcart-aviso {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 24px;
	margin: 0 0 24px;
	border-radius: var(--lcart-raio);
	/* Tinta do acento em vez de cor cheia: chama atenção sem gritar, e acompanha a troca de cor. */
	background: linear-gradient(135deg, rgba(var(--lcart-acento-rgb), .07), rgba(var(--lcart-acento-rgb), .03));
	border: 1px solid rgba(var(--lcart-acento-rgb), .18);
}

.woocommerce-cart .lcart-aviso__icone {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(31, 36, 48, .10);
	font-size: 22px;
	line-height: 1;
}

.woocommerce-cart .lcart-aviso__corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-cart .lcart-aviso__titulo {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lcart-texto);
}

.woocommerce-cart .lcart-aviso__texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--lcart-suave);
}

.woocommerce-cart .lcart-aviso__texto a {
	color: var(--lcart-acento);
	text-decoration: underline;
}

@media (max-width: 767px) {

	.woocommerce-cart .lcart-aviso {
		padding: 16px 18px;
		gap: 12px;
	}

	.woocommerce-cart .lcart-aviso__icone {
		width: 38px;
		height: 38px;
		font-size: 19px;
	}

	.woocommerce-cart .lcart-aviso__titulo {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * Mensagem do carrinho: imagem e texto formatado (1.1.0)
 *
 * A cor de fundo, quando escolhida, chega por atributo `style` no elemento — com
 * a cor do texto junto, calculada pela luminância. Por isso as regras abaixo não
 * fixam cor: elas seriam sobrescritas, ou pior, ganhariam da escolha do admin.
 * ------------------------------------------------------------------------- */
.woocommerce-cart .lcart-aviso__imagem {
	flex: 0 0 auto;
	line-height: 0;
}

.woocommerce-cart .lcart-aviso__imagem-img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	object-fit: cover;
}

.woocommerce-cart .lcart-aviso__texto p {
	margin: 0 0 8px;
}

.woocommerce-cart .lcart-aviso__texto p:last-child,
.woocommerce-cart .lcart-aviso__texto ul:last-child,
.woocommerce-cart .lcart-aviso__texto ol:last-child {
	margin-bottom: 0;
}

.woocommerce-cart .lcart-aviso__texto ul,
.woocommerce-cart .lcart-aviso__texto ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.woocommerce-cart .lcart-aviso__texto ul {
	list-style: disc;
}

.woocommerce-cart .lcart-aviso__texto ol {
	list-style: decimal;
}

.woocommerce-cart .lcart-aviso__texto li {
	margin-bottom: 4px;
}

/*
 * Com cor de fundo escolhida no admin, título, texto e link passam a herdar a cor decidida pela
 * luminância (ver `LCART_Aviso::estilo()`). Sem isto, as cores fixas do bloco continuariam valendo
 * e um fundo escuro deixaria o texto quase invisível — escolher a cor de fundo criaria o problema
 * em vez de resolver.
 *
 * O `[style]` no seletor é exatamente "quando o admin escolheu uma cor": o atributo só existe nesse
 * caso. Sem cor escolhida, tudo segue com a paleta do plugin.
 */
.woocommerce-cart .lcart-aviso[style] .lcart-aviso__titulo,
.woocommerce-cart .lcart-aviso[style] .lcart-aviso__texto {
	color: inherit;
}

.woocommerce-cart .lcart-aviso[style] .lcart-aviso__texto a {
	color: inherit;
	text-decoration: underline;
	/* Um link que só muda de cor some quando a cor é a do texto: a linha de baixo é o que o
	   distingue, e a opacidade dá o contraste que a cor já não pode dar. */
	text-underline-offset: 2px;
	opacity: .92;
}

/* O círculo branco atrás do emoji vira um vidro fosco, para não virar uma mancha branca sobre
   fundo escuro. */
.woocommerce-cart .lcart-aviso[style] .lcart-aviso__icone {
	background: rgba(255, 255, 255, .16);
	box-shadow: none;
}

@media (max-width: 480px) {
	.woocommerce-cart .lcart-aviso__imagem-img {
		width: 56px;
		height: 56px;
	}
}

/* ------------------------------------------------------------------------------------------------------------------
 * Avisos do carrinho (1.6.0): "… foi adicionado ao seu carrinho", cupom aplicado, erros.
 *
 * O tema desenha o aviso com borda colorida de 4 px, letras maiúsculas e peso 900, e põe o botão em posição absoluta.
 * Aqui ele vira um cartão do visual novo: fundo claro, borda fina, cantos da loja, ícone num círculo, texto normal e o
 * botão contornado à direita (embaixo, no celular). O "Sucesso." / "Erro." some: o ícone e a cor já dizem isso.
 * Mesmo desenho para informação (lilás) e erro (vermelho; o tema faz uma lista, com um cartão por item).
 *
 * O texto do aviso vem solto, às vezes com `<strong>` ou um link no meio. Por isso o cartão não é flex nem grade
 * (cada pedaço viraria um bloco): o texto corre normal e o ícone e o botão ficam presos nas pontas, com folga.
 * ------------------------------------------------------------------------------------------------------------------ */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error > li {
	--lcart-aviso-cor: var(--leco-loja-sucesso, #1e7a43);
	--lcart-aviso-fundo: var(--leco-loja-sucesso-fundo, #e3f5ea);
	--lcart-aviso-borda: #bfe6cd;

	position: relative;
	display: block;
	min-height: 66px;
	margin: 0 0 24px;
	padding: 18px 20px 18px 66px;
	border: 1px solid var(--lcart-aviso-borda);
	border-radius: var(--lcart-raio);
	background: var(--lcart-aviso-fundo);
	box-shadow: none;
	color: var(--lcart-texto);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.45;
	list-style: none;
	text-transform: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
	--lcart-aviso-cor: var(--lcart-acento);
	--lcart-aviso-fundo: var(--leco-loja-acento-suave, #f4f2fb);
	--lcart-aviso-borda: var(--leco-loja-acento-borda, #d9d2fb);
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error > li {
	--lcart-aviso-cor: #b42318;
	--lcart-aviso-fundo: #fdecea;
	--lcart-aviso-borda: #f5c2bd;

	margin-bottom: 8px;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error > li:last-child {
	margin-bottom: 0;
}

/* Com botão, o texto deixa espaço à direita para ele. */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message:has(> .button),
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info:has(> .button) {
	padding-right: 250px;
}

/* O tema desenha ícones com `::before` e fecha o float com `::after`; aqui nenhum dos dois é preciso. */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::after,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error::before,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error > li::before {
	display: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message > i,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info > i,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error > li > i {
	position: absolute;
	top: 17px;
	left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	background: var(--lcart-aviso-cor);
	color: #fff;
	font-size: 14px;
}

/* "Sucesso." / "Informativo." / "Erro." */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message > span:first-of-type,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info > span:first-of-type,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error > li > span:first-of-type {
	display: none;
}

/* Links no meio do texto (ex.: "Desfazer?" ao remover um item). */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a:not(.button),
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info a:not(.button),
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error a:not(.button) {
	color: var(--lcart-aviso-cor);
	font-weight: 700;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message > .button,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info > .button {
	position: absolute;
	top: 50%;
	right: 20px;
	display: inline-block;
	float: none;
	min-width: 0;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--lcart-acento);
	border-radius: 10px;
	background: #fff;
	/* O tema pinta todo `.button` de branco com `!important`. */
	color: var(--lcart-acento) !important;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message > .button:hover,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message > .button:focus,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info > .button:hover,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info > .button:focus {
	background: var(--lcart-acento);
	color: #fff !important;
}

@media (max-width: 600px) {
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message:has(> .button),
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info:has(> .button) {
		padding-right: 20px;
	}

	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message > .button,
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info > .button {
		position: static;
		display: block;
		width: calc(100% + 46px);
		margin: 14px 0 0 -46px;
		transform: none;
	}
}