/*
 * Carrinho — só o que o carrinho tem e o resto não.
 *
 * Carregado apenas em `is_cart()` (inc/carrinho.php), pelo mesmo motivo do
 * `pdp.css`: mantém o carrinho fora do `woo.css`, que outras frentes editam ao
 * mesmo tempo.
 *
 * O carrinho do WooCommerce 11 é bloco, renderizado no navegador. Os seletores
 * daqui foram tirados do DOM que ele gera, não do template PHP — que para o
 * carrinho já não existe.
 *
 * Referência de organização: a faixa de sugestões da NKR — bloco separado do
 * que veio antes, título de seção, cartões alinhados numa linha. O que muda é
 * a pele: lá cinza-azulado e laranja da NKR, aqui papel e as cores da
 * Coerência.
 */

/* ==========================================================================
   1. Sugestões abaixo dos itens
   ========================================================================== */

/*
 * O bloco de sugestões é irmão da lista de itens dentro do
 * `cart-items-block`. Separá-lo por um fio e um fundo próprio é o que impede
 * a leitura de "isto também está na minha sacola" — que é o pior mal-entendido
 * possível numa página de carrinho.
 */
.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-product-collection {
	margin-top: var(--sp-12);
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	background-color: var(--paper-2);
	border-radius: var(--radius);
}

.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-product-collection > .wp-block-heading {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--ink);
	text-align: left;
}

/*
 * Quatro sugestões, quatro colunas.
 *
 * O bloco nasce com `columns-3` na classe e três produtos na consulta. Três
 * fecha uma linha no desktop, mas no celular — onde esta persona compra — a
 * grade cai para duas colunas e sobra um item órfão na segunda linha. Com
 * quatro, fecha 1×4 no desktop e 2×2 no celular, sem sobra em nenhum dos dois.
 *
 * O `deploy/blocos-woocommerce.php` acerta a consulta para quatro; esta regra
 * acerta a grade. Uma sem a outra deixa a fileira torta, então as duas andam
 * juntas.
 */
.wc-block-product-template.columns-3,
.wc-block-product-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: var(--sp-3) var(--sp-3) var(--sp-4);
	background-color: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	text-align: center;
}

/*
 * A capa é 2:3, não quadrada.
 *
 * O bloco entrega a imagem com `--aspect-ratio-1-1` e corta o livro em
 * quadrado, o que decapita metade das capas. O contrato é explícito: imagem em
 * pé ou quadrada, nunca deitada — e capa de livro é em pé.
 */
.wc-block-product-template .wc-block-components-product-image {
	margin: 0 0 var(--sp-2);
}

.wc-block-product-template .wc-block-components-product-image a {
	display: block;
}

.wc-block-product-template .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background-color: var(--paper-2);
}

.wc-block-product-template .wp-block-post-title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	/* Duas linhas no máximo: título de três linhas desalinha a fileira toda. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-block-product-template .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wc-block-product-template .wp-block-post-title a:hover {
	text-decoration: underline;
}

.wc-block-product-template .wc-block-components-product-price {
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}

/*
 * O botão empurrado para o fim do cartão com `margin-top: auto` deixa a
 * fileira com todos os botões na mesma linha, mesmo com títulos de alturas
 * diferentes. É o alinhamento que a grade crua não garante — o mesmo problema
 * que a NKR resolveu na faixa dela.
 */
.wc-block-product-template .wc-block-components-product-button {
	margin-top: auto;
	padding-top: var(--sp-2);
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	padding-inline: var(--sp-3);
	background-color: var(--orange);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	/* Texto em --ink sobre laranja: 5,2:1. Branco sobre laranja dá 2,6:1 e
	   reprova — é a regra de cor do contrato, não preferência. */
	color: var(--ink);
	text-decoration: none;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link:hover {
	background-color: var(--orange-hover);
	color: var(--ink);
}

/* ==========================================================================
   2. Resumo e botão de finalizar

   O bloco entrega o botão de finalizar em cinza-chumbo, que é o padrão do
   WooCommerce e não existe na paleta. Ele é a ação principal da página: fica
   laranja, como todo botão primário do site.
   ========================================================================== */

.wp-block-woocommerce-cart-totals-block .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--btn-h);
	background-color: var(--orange);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--ink);
	text-decoration: none;
}

.wp-block-woocommerce-cart-totals-block .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover {
	background-color: var(--orange-hover);
	color: var(--ink);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: var(--font-ui);
	color: var(--ink);
}

.wc-block-cart__totals-title {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-muted);
}

/* ==========================================================================
   3. Mobile
   ========================================================================== */

@media (max-width: 767px) {
	.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-product-collection {
		margin-top: var(--sp-8);
		padding: var(--sp-6) var(--sp-4) var(--sp-4);
	}

	.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-product-collection > .wp-block-heading {
		margin-bottom: var(--sp-4);
		font-size: 20px;
	}

	/*
	 * Duas colunas no celular, não três: com três, a capa fica com 95px e o
	 * título com duas palavras por linha. O bloco emite `columns-3` na classe,
	 * então a regra precisa vencer por especificidade.
	 */
	.wc-block-product-template.columns-3,
	.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wc-block-product-template .wp-block-post-title {
		font-size: 14px;
	}

	.wc-block-product-template .wc-block-components-product-price {
		font-size: 16px;
	}
}


/* ==========================================================================
   3. Carrinho vazio

   O bloco do WooCommerce entrega título, filete pontilhado e vitrine. O
   desenho aprovado troca isso por uma cena: o arco da marca com o carrinho
   dentro, título em duas linhas, filete curto e dois caminhos de saída.

   O conteúdo (as duas linhas, a frase de apoio e os botões) é gravado pelo
   `deploy/blocos-woocommerce.php`, porque carrinho é conteúdo de página, não
   template PHP.
   ========================================================================== */

.wp-block-woocommerce-empty-cart-block {
	padding-block: var(--sp-16) var(--sp-12);
	text-align: center;
}

/*
 * A ilustração.
 *
 * O WooCommerce desenha um carrinho cinza no `::before` da classe
 * `with-empty-cart-icon`. Aqui o mesmo gancho recebe a cena da marca: dois
 * arcos concêntricos — âmbar claro por fora, laranja por dentro — com o
 * carrinho em navy e o brilho laranja. É SVG embutido: uma requisição a menos
 * e nada para faltar num deploy que esqueça a pasta de imagens.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: block;
	width: 260px;
	height: 234px;
	margin: 0 auto var(--sp-8);
	/*
	 * O ícone do WooCommerce não é imagem: é `mask-image` de uma carinha triste
	 * pintada com `background-color: currentColor`. Trocar só o
	 * `background-image` não substitui nada — a máscara continua de pé e recorta
	 * o nosso desenho no formato da carinha, que foi o que apareceu na tela. A
	 * máscara sai primeiro; o desenho entra depois.
	 */
	mask-image: none;
	-webkit-mask-image: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1044 940' fill='none'%3E%3Cpath d='M120 940V542a402 402 0 0 1 804 0v398' stroke='%23F8D08A' stroke-width='40'/%3E%3Cpath d='M175 940V572a347 347 0 0 1 694 0v368' stroke='%23EE9153' stroke-width='40'/%3E%3Cpath d='M227 940V587a295 295 0 0 1 590 0v353' stroke='%23F9E0A4' stroke-width='40'/%3E%3Cg stroke='%23001F5B' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M272 478h62l98 344h238l26-18'/%3E%3Cpath d='M408 548l304 22-46 202H430z'/%3E%3Ccircle cx='434' cy='862' r='38'/%3E%3Ccircle cx='628' cy='860' r='38'/%3E%3C/g%3E%3Cpath d='M275 548c7 35 14 42 49 49-35 7-42 14-49 49-7-35-14-42-49-49 35-7 42-14 49-49z' fill='%23FF7F31'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	content: "";
}

/*
 * Sem o `.woocommerce` na frente: o carrinho em blocos vive dentro de
 * `#primary`, e o `<div class="woocommerce">` do Storefront só embrulha os
 * avisos. Prefixado por ele, nada aqui casava — o título ficava com o
 * `font-size: inherit` que a folha do WooCommerce impõe.
 */
.wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--ink);
}

/*
 * A segunda linha em laranja, e de pé.
 *
 * O desenho traz esta linha em itálico. A Gloriche não tem itálico, e pedir um
 * ao navegador faz ele inclinar o desenho por conta própria — o mesmo defeito
 * que o negrito sintético causa na serifa, por isso o `font-face` já declara o
 * intervalo de peso. Fica romana, na cor.
 */
.coe-vazio__eco {
	color: var(--orange);
}

/* O filete pontilhado do WooCommerce vira o traço curto do desenho. */
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator.is-style-dots {
	width: 48px;
	margin: var(--sp-6) auto;
	border: 0;
	border-top: 3px solid var(--orange);
	opacity: 1;
}

.wp-block-woocommerce-empty-cart-block hr.wp-block-separator.is-style-dots::before,
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator.is-style-dots::after {
	content: none;
}

.wp-block-woocommerce-empty-cart-block .coe-vazio__apoio {
	/* 62ch para a segunda frase caber inteira: em 52ch sobrava "leitura?"
	   sozinha numa terceira linha. */
	max-width: 62ch;
	margin: 0 auto var(--sp-8);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-muted);
}

.wp-block-woocommerce-empty-cart-block .coe-vazio__acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-20);
}

/*
 * Os dois botões são bloco do editor, então a pele vem daqui e não do
 * `.coe-btn` do tema. Mesmas medidas do sistema: 48px de altura, 24px de
 * respiro lateral, rótulo de 15px.
 *
 * Tinta do primário é --ink, nunca branco: sobre laranja o branco dá 2,3:1.
 */
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--btn-h);
	padding: 0 var(--sp-6);
	border: 1.5px solid transparent;
	border-radius: var(--radius);
	background-color: var(--orange);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
	background-color: var(--orange-hover);
	color: var(--ink);
}

.wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link {
	border-color: var(--navy);
	background-color: transparent;
	color: var(--navy);
}

.wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link:hover {
	background-color: var(--paper-2);
	color: var(--navy);
}

/*
 * O título da vitrine com os fios laterais e o brilho em cima. Os fios são os
 * dois pseudoelementos esticados pelo flex; o brilho é fundo do próprio
 * título, que por isso ganha respiro no topo.
 */
.wp-block-woocommerce-empty-cart-block h2.coe-vazio__secao {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	/* Sem a medida, os fios atravessavam os 1280px do container e o título
	   virava um carimbo perdido no meio de duas réguas. */
	max-width: 640px;
	margin: 0 auto var(--sp-8);
	padding-top: var(--sp-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z' fill='%23FF7F31'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 16px 16px;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
}

.wp-block-woocommerce-empty-cart-block h2.coe-vazio__secao::before,
.wp-block-woocommerce-empty-cart-block h2.coe-vazio__secao::after {
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--line);
	content: "";
}

@media (max-width: 767px) {
	.wp-block-woocommerce-empty-cart-block {
		padding-block: var(--sp-8);
	}

	.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
		width: 188px;
		height: 169px;
		margin-bottom: var(--sp-6);
	}

	.wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title {
		font-size: 32px;
	}

	.wp-block-woocommerce-empty-cart-block h2.coe-vazio__secao {
		gap: var(--sp-4);
		font-size: 24px;
	}
}

/* ==========================================================================
   Carrinho clássico (shortcode)

   A página trocou o bloco do WooCommerce pelo `[woocommerce_cart]` em
   09/09/2026: o bloco levava 3,2 s até o livro aparecer na tela, com 72
   scripts; o shortcode leva 1,0 s com 21. A medição está no HISTORICO.md.

   Tudo acima nesta folha mira `.wc-block-*` e deixou de valer nessa página.
   Estas regras refazem o mesmo desenho sobre a marcação clássica. As duas
   coleções convivem de propósito: o carrinho é shortcode, mas o checkout
   segue em bloco, e voltar atrás é trocar o conteúdo de uma página.
   ========================================================================== */

.woocommerce-cart .woocommerce {
	max-width: var(--container);
	margin-inline: auto;
}

/* --- Tabela de itens --- */

.woocommerce-cart table.shop_table {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--paper);
	margin-bottom: var(--sp-8);
}

.woocommerce-cart table.shop_table th {
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
	padding: var(--sp-4);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.woocommerce-cart table.shop_table td {
	padding: var(--sp-4);
	border-top: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
	width: 64px;
	height: auto;
	border-radius: var(--radius-sm);
	display: block;
}

.woocommerce-cart table.shop_table .product-name a {
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.woocommerce-cart table.shop_table .product-name a:hover {
	text-decoration: underline;
}

.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal {
	font-variant-numeric: tabular-nums;
}

/* --- Cupom e atualizar --- */

.woocommerce-cart .coupon {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
}

.woocommerce-cart .coupon input[type="text"] {
	height: var(--input-h);
	min-width: 200px;
	padding-inline: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper-2);
	font-family: var(--font-ui);
	font-size: 15px;
}

/*
 * Cupom e "atualizar carrinho" são ações secundárias: contorno, não tinta
 * cheia. O único botão sólido da página é o de finalizar — dois botões
 * cheios competindo é o que faz a pessoa clicar no errado.
 */
.woocommerce-cart .coupon button.button,
.woocommerce-cart button[name="update_cart"] {
	height: var(--btn-h);
	padding-inline: var(--sp-6);
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	background: transparent;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--navy);
}

.woocommerce-cart .coupon button.button:hover,
.woocommerce-cart button[name="update_cart"]:not(:disabled):hover {
	background: var(--paper-2);
	color: var(--navy);
}

.woocommerce-cart button[name="update_cart"]:disabled {
	border-color: var(--line);
	color: var(--ink-muted);
	opacity: 1;
}

/* --- Totais --- */

.woocommerce-cart .cart_totals h2 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	margin: 0 0 var(--sp-4);
}

.woocommerce-cart .cart_totals table.shop_table {
	margin-bottom: var(--sp-6);
}

.woocommerce-cart .cart_totals th {
	background: transparent;
	border-bottom: 0;
	text-transform: none;
	font-size: 15px;
	color: var(--ink);
	width: 40%;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: 17px;
	font-weight: 600;
}

/*
 * O WooCommerce entrega o botão de finalizar em cinza-chumbo, que não existe
 * na paleta — mesmo motivo já registrado para a versão em bloco, seção acima.
 * Ele é a ação principal da página e usa a mesma tinta do "Adicionar ao
 * carrinho" da PDP, para a pessoa reconhecer o caminho.
 */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	height: auto;
	padding: var(--sp-4) var(--sp-6);
	border: 0;
	border-radius: var(--radius);
	background: var(--orange);
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	text-align: center;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--orange-hover);
	color: var(--ink);
}

/* --- Sugestões --- */

/*
 * O cross-sell nasce dentro de `.cart-collaterals`, dividindo a linha com os
 * totais. Em 1440px isso dá uma coluna de 560px para cinco capas, e o título
 * de cada livro quebra em três linhas — medido em 09/09/2026.
 *
 * A vitrine sai da linha e passa a ocupar a largura toda, abaixo dos totais.
 * `order` resolve sem tocar no PHP do WooCommerce.
 */
.woocommerce-cart .cart-collaterals {
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
	width: 100%;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	order: 1;
	width: 100%;
	max-width: 480px;
	margin-left: auto;
	float: none;
}

.woocommerce-cart .cart-collaterals .cross-sells {
	order: 2;
	width: 100%;
	float: none;
}

.woocommerce-cart .cross-sells > h2 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	margin: 0 0 var(--sp-6);
}

.woocommerce-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart .cross-sells ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
}

@media (max-width: 767px) {

	/*
	 * A tabela de itens não cabe em 390px. O Storefront já vira as linhas em
	 * blocos no celular; o que falta é o respiro e a linha divisória entre
	 * cada item, senão os três produtos viram uma parede de texto.
	 */
	.woocommerce-cart table.shop_table tr.cart_item {
		display: block;
		padding-block: var(--sp-4);
		border-top: 1px solid var(--line);
	}

	.woocommerce-cart table.shop_table td {
		border-top: 0;
		padding-block: var(--sp-2);
	}

	.woocommerce-cart .coupon {
		flex-wrap: wrap;
	}

	.woocommerce-cart .coupon input[type="text"] {
		flex: 1 1 100%;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: none;
	}
}