/* ==========================================================
 * Naga Store - carrinho e checkout
 *
 * O caminho do dinheiro. Aqui a regra e diferente do resto do
 * site: nada de efeito, nada de surpresa. Cada tela responde
 * tres perguntas na ordem, sem o cliente precisar procurar:
 * o que estou levando, quanto vai dar, onde eu pago.
 *
 * O CSS de fabrica do WooCommerce continua ligado por baixo.
 * Tudo aqui e escrito por cima, com o corpo marcado, pra nao
 * derrubar plugin de pagamento que se pendura nas classes
 * originais. Por isso a repeticao de "body.naga-compra".
 * ========================================================== */

body.naga-compra {
	--preto: #0b0b0d;
	--preto-2: #111114;
	--preto-3: #17171b;
	--linha: rgba(255, 255, 255, .08);
	--linha-2: rgba(255, 255, 255, .15);
	--ouro: #c9a227;
	--ouro-claro: #e3c464;
	--texto: #f2f1ef;
	--texto-2: #a7a5a1;
	--texto-3: #8f8d89;  /* era #767471: 4.0:1, reprovava em letra pequena */
	--bom: #4a9d6a;
	--ruim: #b4544a;
}

/* Texto corrido tem largura curta pra leitura. Compra nao e
   leitura: precisa dos dois lados na mesma tela. */
body.naga-compra .naga-interna-corpo {
	max-width: none;
	font-size: 14px;
}

/* ----------------------------------------------------------
 * 1. O tabuleiro do carrinho
 *
 * Esquerda o que voce escolheu, direita o que vai pagar. Na
 * direita o bloco gruda enquanto a pagina rola: o valor nunca
 * sai da vista.
 * -------------------------------------------------------- */
	/* O tabuleiro nao mora mais no .woocommerce. O tema embrulha a
	   lista e o total dentro de .ct-woocommerce-cart-form, entao a
	   grade tem que nascer LA. Enquanto ela nascia aqui, o embrulho
	   do tema cabia todo na primeira coluna e sobrava meia tela
	   preta do lado direito: parecia pagina que nao terminou de
	   carregar. Se um dia o tema tirar o embrulho, a compra vira uma
	   coluna so, empilhada. Feia, porem inteira. */
body.naga-compra .woocommerce {
	display: block;
}

body.naga-compra .ct-woocommerce-cart-form {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr);
	gap: 26px;
	align-items: start;
}

	/* O aviso do nick nasce estreito pras paginas de texto. Aqui em
	   cima de um tabuleiro largo ele ficava tortinho no meio. */
body.naga-compra .naga-aviso-nick {
	max-width: none;
	margin-inline: 0;
}

	/* O bloco do valor gruda enquanto a lista rola: quem confere o
	   carrinho nunca perde o total de vista. */
body.naga-compra .cart-collaterals,
body.naga-compra .ct-woocommerce-cart-form > .cart_totals {
	width: auto;
	float: none;
	position: sticky;
	top: 88px;
}

body.naga-compra .cart-collaterals .cart_totals {
	width: auto;
	float: none;
}

/* ----------------------------------------------------------
 * 2. A lista do que voce leva
 * -------------------------------------------------------- */
body.naga-compra table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--linha);
	border-radius: 14px;
	background: var(--preto-2);
	overflow: hidden;
	font-size: 14px;
	color: var(--texto-2);
}

body.naga-compra table.shop_table th {
	padding: 13px 16px;
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto-3);
	background: var(--preto-3);
	border-bottom: 1px solid var(--linha);
}

body.naga-compra table.shop_table td {
	padding: 16px;
	border-top: 1px solid var(--linha);
	vertical-align: middle;
}

body.naga-compra table.shop_table tbody tr:first-child td {
	border-top: 0;
}

body.naga-compra td.product-name a {
	color: var(--texto);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

body.naga-compra td.product-name a:hover {
	color: var(--ouro-claro);
}

body.naga-compra td.product-price,
body.naga-compra td.product-subtotal,
body.naga-compra .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	color: var(--texto);
	font-weight: 700;
}

body.naga-compra td.product-thumbnail img,
body.naga-compra .ct-media-container img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--linha);
	background: var(--preto-3);
}

/* A foto do carrinho e um link, e o tema deixa esse link com a
   caixa 11px mais larga e 1px mais alta que a imagem. Sobrava um
   degrau vazio embaixo, e era nele que aparecia a barra clara que
   o Jun viu. Aqui a caixa passa a medir exatamente a foto. */
body.naga-compra td.product-thumbnail a,
body.naga-compra td.product-thumbnail .ct-media-container {
	display: block;
	width: 56px;
	height: 56px;
	line-height: 0;
	border-bottom: 0;
	border-radius: 10px;
}

/* O x de tirar do carrinho. Era um risco cinza perdido na
   linha: agora e um alvo redondo, do tamanho de um dedo. */
body.naga-compra a.remove {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-left: auto;
	border-radius: 50%;
	border: 1px solid var(--linha-2);
	color: var(--texto-3) !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	background: transparent !important;
	transition: color .2s, border-color .2s, background .2s;
}

body.naga-compra a.remove:hover {
	color: var(--ruim) !important;
	border-color: var(--ruim);
	background: rgba(180, 84, 74, .12) !important;
}

/* ----------------------------------------------------------
 * 2.1. O carrinho do tema nao e o carrinho de fabrica
 *
 * O tema reescreveu a tabela do carrinho. Nao existe coluna de
 * preco unitario: o preco mora dentro da celula do nome, e no
 * celular ele esconde as colunas soltas e mostra um bloco unico
 * (quantidade x preco e a lixeira) tambem dentro do nome.
 *
 * Em vez de desmontar isso, a gente veste. Assim o carrinho
 * continua funcionando igual em qualquer tamanho de tela, e o
 * dia que o tema for atualizado nada aqui quebra a compra.
 * -------------------------------------------------------- */

/* Preco unitario: linha de apoio, nunca competindo com o total. */
body.naga-compra td.product-name p.price {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--texto-2);
}

/* O bloco que o tema mostra no celular. */
body.naga-compra .product-mobile-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}

body.naga-compra .product-mobile-actions .quantity {
	margin: 0;
}

body.naga-compra .ct-product-multiply-symbol {
	color: var(--texto-3);
	font-size: 13px;
}

body.naga-compra .product-mobile-actions .woocommerce-Price-amount {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 16px;
	color: var(--texto);
}

/* ----------------------------------------------------------
 * 3. A quantidade
 * -------------------------------------------------------- */
/* O tema joga o menos e o mais soltos por cima do campo, com
   medida calculada pra uma caixa de 55px de altura. Na nossa, de
   40px, a conta dava negativa e o menos caia embaixo do numero:
   era o segundo bug da foto do Jun. Aqui a caixa vira uma grade
   de tres colunas fixas, entao cada botao tem lugar marcado e a
   altura da caixa deixa de mexer na posicao deles. */
body.naga-compra .quantity {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	width: 118px;
	height: 40px;
	border: 1px solid var(--linha);
	border-radius: 10px;
	background: var(--preto-3);
	overflow: hidden;
}

body.naga-compra .quantity input.qty {
	grid-area: 1 / 2;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--texto);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

body.naga-compra .quantity input.qty::-webkit-outer-spin-button,
body.naga-compra .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.naga-compra .quantity .ct-increase,
body.naga-compra .quantity .ct-decrease {
	/* relative, e nao static: os sinais de + e - sao desenhados por
	   dentro do botao e precisam continuar ancorados nele. */
	position: relative;
	inset: auto;
	width: auto;
	height: 100%;
	border-radius: 0;
	display: grid;
	place-items: center;
	color: var(--texto-2);
	cursor: pointer;
	transition: color .2s, background .2s;
}

body.naga-compra .quantity .ct-decrease {
	grid-area: 1 / 1;
}

body.naga-compra .quantity .ct-increase {
	grid-area: 1 / 3;
}

body.naga-compra .quantity .ct-increase:hover,
body.naga-compra .quantity .ct-decrease:hover {
	color: var(--ouro-claro);
	background: rgba(255, 255, 255, .04);
}

/* ----------------------------------------------------------
 * 4. Cupom e atualizar
 *
 * Ficam na mesma linha do rodape da tabela, discretos. Cupom
 * chamativo demais faz quem nao tem cupom sair procurar um.
 * -------------------------------------------------------- */
	/* Esta celula tem colspan e precisa continuar sendo celula. Com
	   display:flex o navegador tira ela da tabela, o colspan vira
	   letra morta e a linha do cupom encolhe pra 165px: os dois
	   botoes empilhavam com o texto partido no meio e o campo do
	   cupom virava um quadradinho de 30px. Por isso a celula fica
	   table-cell e quem se alinha por dentro sao os flutuantes. */
body.naga-compra td.actions {
	display: table-cell;
	background: var(--preto-3);
	padding: 14px 16px;
}

body.naga-compra td.actions::after {
	content: "";
	display: block;
	clear: both;
}

body.naga-compra td.actions .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	float: left;
}

body.naga-compra td.actions .coupon input#coupon_code {
	width: 220px;
	flex: 0 0 220px;
}

body.naga-compra td.actions > button,
body.naga-compra td.actions > input[type="submit"] {
	float: right;
}

	/* Nome de botao nao quebra no meio. */
body.naga-compra td.actions button,
body.naga-compra td.actions input[type="submit"] {
	white-space: nowrap;
}

body.naga-compra td.actions label {
	display: none;
}

	/* A classe naga-auto-carrinho so entra no body se o javascript que
	   recalcula sozinho estiver vivo. Com ele vivo o botao "Atualizar
	   carrinho" nao serve mais pra nada e vira armadilha: fica apagado
	   quase sempre, e apagado o cliente le como "deu erro". Sem o
	   javascript a classe nao entra, o botao volta a aparecer e o
	   carrinho funciona do jeito antigo. */
body.naga-auto-carrinho td.actions > button[name="update_cart"],
body.naga-auto-carrinho td.actions > input[name="update_cart"] {
	display: none;
}

/* ----------------------------------------------------------
 * 5. Campos e botoes, em toda a compra
 * -------------------------------------------------------- */
body.naga-compra input[type="text"],
body.naga-compra input[type="email"],
body.naga-compra input[type="tel"],
body.naga-compra input[type="password"],
body.naga-compra input[type="number"],
body.naga-compra select,
body.naga-compra textarea,
body.naga-compra .select2-container .select2-selection {
	width: 100%;
	padding: 12px 14px;
	background: var(--preto-2);
	border: 1px solid var(--linha);
	border-radius: 10px;
	color: var(--texto);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	height: auto;
	transition: border-color .2s, background .2s;
}

body.naga-compra input:focus,
body.naga-compra select:focus,
body.naga-compra textarea:focus {
	outline: none;
	border-color: var(--ouro);
	background: var(--preto-3);
}

body.naga-compra input::placeholder,
body.naga-compra textarea::placeholder {
	color: var(--texto-3);
}

body.naga-compra .button,
body.naga-compra button.button,
body.naga-compra a.button,
body.naga-compra input.button,
body.naga-compra button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid var(--linha-2);
	border-radius: 11px;
	background: transparent;
	color: var(--texto);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), background .2s, border-color .2s, color .2s;
}

body.naga-compra .button:hover,
body.naga-compra button.button:hover,
body.naga-compra a.button:hover {
	border-color: var(--ouro);
	color: var(--ouro-claro);
	transform: translateY(-1px);
}

body.naga-compra .button:disabled,
body.naga-compra .button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

/* O botao que leva dinheiro. Um por tela, dourado, e o unico
   assim em toda a pagina. */
body.naga-compra a.checkout-button,
body.naga-compra .button.alt,
body.naga-compra #place_order {
	width: 100%;
	padding: 15px 22px;
	background: var(--ouro);
	border-color: var(--ouro);
	color: #191400;
	font-size: 15px;
}

body.naga-compra a.checkout-button:hover,
body.naga-compra .button.alt:hover,
body.naga-compra #place_order:hover {
	background: var(--ouro-claro);
	border-color: var(--ouro-claro);
	color: #191400;
}

body.naga-compra a.checkout-button:active,
body.naga-compra #place_order:active {
	transform: translateY(1px) scale(.995);
}

body.naga-compra :focus-visible {
	outline: 2px solid var(--ouro-claro);
	outline-offset: 3px;
}

/* ----------------------------------------------------------
 * 6. A conta a pagar
 * -------------------------------------------------------- */
body.naga-compra .cart_totals h2,
body.naga-compra #order_review_heading {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--texto);
	margin: 0 0 12px;
}

body.naga-compra .cart_totals table.shop_table th {
	background: transparent;
	border-bottom: 0;
	color: var(--texto-2);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
}

body.naga-compra .cart_totals table.shop_table td {
	text-align: right;
}

body.naga-compra tr.order-total th,
body.naga-compra tr.order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--linha-2);
}

body.naga-compra tr.order-total td .woocommerce-Price-amount {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 24px;
	color: var(--ouro);
}

body.naga-compra .wc-proceed-to-checkout {
	padding: 14px 0 0;
}

/* ----------------------------------------------------------
 * 7. Carrinho vazio
 * -------------------------------------------------------- */
body.naga-compra .cart-empty {
	margin: 0 0 18px;
	padding: 34px 22px;
	border: 1px dashed var(--linha-2);
	border-radius: 14px;
	background: var(--preto-2);
	text-align: center;
	font-size: 16px;
	color: var(--texto-2);
}

body.naga-compra .return-to-shop {
	text-align: center;
}

body.naga-compra .return-to-shop .button {
	background: var(--ouro);
	border-color: var(--ouro);
	color: #191400;
}

/* ----------------------------------------------------------
 * 8. O tabuleiro do checkout
 *
 * Dados a esquerda, pedido e pagamento a direita e grudados.
 * Quem esta preenchendo nunca perde de vista quanto e.
 * -------------------------------------------------------- */
	/* O tema tambem embrulha os dois lados do checkout, em
	   .ct-customer-details e .ct-order-review. As regras antigas
	   falavam com os netos, entao a coluna certa nunca era obedecida.
	   Aqui eu mando nos filhos que existem de verdade, e deixo os
	   nomes crus juntos pro caso do tema soltar o embrulho. */
body.naga-compra form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
	gap: 10px 30px;
	align-items: start;
}

body.naga-compra form.checkout > .ct-customer-details,
body.naga-compra form.checkout > #customer_details {
	grid-column: 1;
}

body.naga-compra form.checkout > .ct-order-review,
body.naga-compra form.checkout > #order_review_heading,
body.naga-compra form.checkout > #order_review {
	grid-column: 2;
}

body.naga-compra form.checkout > .ct-order-review,
body.naga-compra form.checkout > #order_review {
	position: sticky;
	top: 88px;
}

body.naga-compra .col2-set,
body.naga-compra .col2-set .col-1,
body.naga-compra .col2-set .col-2 {
	width: auto;
	float: none;
}

body.naga-compra .col2-set {
	display: grid;
	gap: 22px;
}

body.naga-compra .woocommerce-billing-fields h3,
body.naga-compra .woocommerce-additional-fields h3,
body.naga-compra .woocommerce-account-fields h3 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 17px;
	color: var(--texto);
	margin: 0 0 14px;
}

body.naga-compra .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

	/* O WooCommerce ainda amarra Nome e Sobrenome em width:48% e
	   float, receita da epoca em que o formulario era feito de
	   flutuantes. Dentro da grade isso vira um campo curto no meio
	   de uma coluna larga: sobrava mais espaco vazio do que campo.
	   A largura volta pra auto e cada campo enche a coluna dele. */
body.naga-compra .form-row {
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	float: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.naga-compra .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

body.naga-compra .form-row-wide,
body.naga-compra .form-row.notes,
body.naga-compra .form-row.place-order {
	grid-column: 1 / -1;
}

body.naga-compra .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--texto-2);
}

body.naga-compra .required {
	color: var(--ouro);
	text-decoration: none;
	border: 0;
}

body.naga-compra .form-row .description,
body.naga-compra span.description {
	font-size: 12px;
	line-height: 1.5;
	color: var(--texto-3);
}

body.naga-compra .woocommerce-input-wrapper {
	width: 100%;
}

body.naga-compra .form-row.woocommerce-invalid input {
	border-color: var(--ruim);
}

body.naga-compra .form-row.woocommerce-validated input {
	border-color: rgba(74, 157, 106, .5);
}

/* ----------------------------------------------------------
 * 9. Entrar, criar conta, avisos
 * -------------------------------------------------------- */
body.naga-compra .woocommerce-info,
body.naga-compra .woocommerce-message,
body.naga-compra .woocommerce-error,
body.naga-compra .woocommerce-notice {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--linha-2);
	border-radius: 12px;
	background: var(--preto-2);
	color: var(--texto);
	font-size: 14px;
	line-height: 1.55;
	list-style: none;
}

/* O estado nao vive numa tarja de 3px na lateral, que some no celular e
   e cacoete de template. Vive na borda inteira mais um fundo de leve, do
   mesmo jeito que o quadro de entrega ja fazia. */
body.naga-compra .woocommerce-info {
	border-color: rgba(201, 162, 39, .28);
	background: rgba(201, 162, 39, .07);
}

body.naga-compra .woocommerce-error {
	border-color: rgba(180, 84, 74, .38);
	background: rgba(180, 84, 74, .08);
}

body.naga-compra .woocommerce-message {
	border-color: rgba(74, 157, 106, .30);
	background: rgba(74, 157, 106, .07);
}

body.naga-compra .woocommerce-info a,
body.naga-compra .woocommerce-message a {
	color: var(--ouro-claro);
}

body.naga-compra form.woocommerce-form-login {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid var(--linha);
	border-radius: 14px;
	background: var(--preto-2);
	display: grid;
	gap: 14px;
	max-width: 520px;
}

body.naga-compra .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	flex-direction: row;
	font-weight: 500;
	color: var(--texto-2);
	line-height: 1.5;
	cursor: pointer;
}

body.naga-compra input[type="checkbox"],
body.naga-compra input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	accent-color: var(--ouro);
	flex: 0 0 auto;
	cursor: pointer;
}

/* ----------------------------------------------------------
 * 10. O pedido e o pagamento
 * -------------------------------------------------------- */
body.naga-compra #order_review {
	border: 1px solid var(--linha);
	border-radius: 16px;
	background: var(--preto-2);
	padding: 18px;
}

body.naga-compra #order_review table.shop_table {
	border: 0;
	background: transparent;
	border-radius: 0;
}

body.naga-compra #order_review table.shop_table th,
body.naga-compra #order_review table.shop_table td {
	padding: 11px 0;
	background: transparent;
}

body.naga-compra #order_review td.product-total,
body.naga-compra #order_review .product-total {
	text-align: right;
}

body.naga-compra .product-quantity {
	color: var(--texto-3);
	font-weight: 500;
}

body.naga-compra #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 6px;
}

body.naga-compra #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--linha);
	display: grid;
	gap: 8px;
}

body.naga-compra #payment li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 14px;
	border: 1px solid var(--linha);
	border-radius: 12px;
	background: var(--preto-3);
	color: var(--texto);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s;
}

body.naga-compra #payment li.wc_payment_method > label:hover {
	border-color: var(--linha-2);
}

body.naga-compra #payment li.wc_payment_method input:checked + label {
	border-color: var(--ouro);
}

body.naga-compra #payment li.wc_payment_method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body.naga-compra #payment li.wc_payment_method > label::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid var(--linha-2);
	transition: border-color .2s, box-shadow .2s;
}

body.naga-compra #payment li.wc_payment_method input:checked + label::before {
	border-color: var(--ouro);
	box-shadow: inset 0 0 0 4px var(--ouro);
}

body.naga-compra #payment li.wc_payment_method img {
	max-height: 22px;
	width: auto;
	margin-left: auto;
}

body.naga-compra #payment div.payment_box {
	margin: 2px 0 4px;
	padding: 14px;
	border: 1px solid var(--linha);
	border-radius: 12px;
	background: var(--preto-3);
	color: var(--texto-2);
	font-size: 13px;
	line-height: 1.6;
}

body.naga-compra #payment div.payment_box::before {
	display: none;
}

body.naga-compra #payment div.payment_box input,
body.naga-compra #payment div.payment_box select {
	background: var(--preto-2);
}

/* ----------------------------------------------------------
 * 11. Aceite dos termos
 *
 * A caixa dos termos abre quando o cliente clica no link. Ela
 * tem altura fixa de proposito: rolar dentro dela e melhor do
 * que empurrar o botao de pagar pra fora da tela.
 * -------------------------------------------------------- */
body.naga-compra .woocommerce-privacy-policy-text p,
body.naga-compra .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--texto-3);
}

body.naga-compra .woocommerce-privacy-policy-text a,
body.naga-compra .woocommerce-terms-and-conditions-link {
	color: var(--texto-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.naga-compra .woocommerce-privacy-policy-text a:hover,
body.naga-compra .woocommerce-terms-and-conditions-link:hover {
	color: var(--ouro-claro);
}

body.naga-compra .naga-termos {
	max-height: 220px;
	overflow: auto;
	margin: 12px 0;
	padding: 14px 16px;
	border: 1px solid var(--linha);
	border-radius: 12px;
	background: var(--preto-3);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--texto-2);
}

body.naga-compra .naga-termos h3 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 14px;
	color: var(--texto);
	margin: 16px 0 6px;
}

body.naga-compra .naga-termos > :first-child {
	margin-top: 0;
}

body.naga-compra .validate-required.woocommerce-invalid .woocommerce-terms-and-conditions-checkbox-text {
	color: var(--ruim);
}

body.naga-compra .form-row.place-order {
	margin-top: 14px;
}

/* Enquanto o WooCommerce recalcula, a area escurece um pouco.
   Sem isto o cliente clica duas vezes achando que travou. */
body.naga-compra .blockUI.blockOverlay {
	background: var(--preto) !important;
	opacity: .6 !important;
	border-radius: 16px;
}

/* ----------------------------------------------------------
 * 11.5. A caixa das Naga Coins
 *
 * Ela vem pronta do plugin de cashback, com as cores escritas
 * na marra dentro do HTML: verde neon sobre verde escuro. No
 * meio de um checkout preto e dourado ela parecia um anuncio de
 * outro site colado no lugar errado, bem em cima do botao de
 * pagar, que e onde o cliente menos pode se distrair.
 *
 * Aqui a gente so troca a roupa. O !important e obrigatorio
 * porque a cor esta escrita dentro da tag, e nada aqui mexe no
 * saldo, no desconto ou na marcacao: se um dia estas regras
 * sumirem, a caixa volta a ser verde e continua funcionando.
 *
 * Moeda e dourada. A cor certa ja estava na casa.
 * -------------------------------------------------------- */
body.naga-compra .naga-coins-box {
	margin: 0 0 18px !important;
	border: 1px solid var(--linha-2) !important;
	border-radius: 14px !important;
	background: var(--preto-3) !important;
	box-shadow: none !important;
	color: var(--texto-2) !important;
}

body.naga-compra .naga-coins-box > div:first-child {
	padding: 11px 16px !important;
	background: rgba(201, 162, 39, .07) !important;
	border-bottom: 1px solid var(--linha) !important;
}

body.naga-compra .naga-coins-box > div:first-child span:last-child {
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	color: var(--texto) !important;
}

body.naga-compra .naga-coins-box div {
	color: var(--texto-2) !important;
}

body.naga-compra .naga-coins-box label {
	color: var(--texto) !important;
}

body.naga-compra .naga-coins-box strong {
	color: var(--ouro-claro) !important;
}

body.naga-compra .naga-coins-box input[type="checkbox"] {
	accent-color: var(--ouro) !important;
}

/* O quadro do "voce vai ganhar". */
body.naga-compra .naga-coins-box div[style*="text-align:center"] {
	background: rgba(201, 162, 39, .09) !important;
	border: 1px solid rgba(201, 162, 39, .2);
}

body.naga-compra .naga-coins-box div[style*="text-align:center"] > div:first-child {
	font-size: 11px !important;
	letter-spacing: .1em !important;
	color: var(--texto-3) !important;
}

body.naga-compra .naga-coins-box div[style*="text-align:center"] > div:last-child {
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	color: var(--ouro-claro) !important;
}

/* ----------------------------------------------------------
 * 11.8. O aviso de pagamento em analise
 *
 * Esta caixa nasce depois que o cliente ja pagou, na tela de
 * obrigado, e e a unica coisa que ele le enquanto o banco decide.
 * Ela vinha com fundo bege claro e letra marrom cravados dentro do
 * PHP, de um tempo em que o site era claro. Em cima do preto virava
 * um adesivo branco no meio da pagina, bem na hora em que o cliente
 * esta mais desconfiado.
 *
 * Continua amarela, porque amarelo aqui e informacao correta: e
 * espera, nao e erro. So que agora e o ouro da casa sobre o preto
 * da casa, e nao um pedaco de outro site.
 * -------------------------------------------------------- */

body.naga-compra .naga-aviso {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid rgba(201, 162, 39, .28);
	border-radius: 14px;
	background: rgba(201, 162, 39, .07);
	font-size: 15px;
	line-height: 1.6;
	color: var(--texto-2);
}

body.naga-compra .naga-aviso .naga-aviso-titulo {
	display: block;
	margin-bottom: 6px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ouro-claro);
}

body.naga-compra .naga-aviso strong {
	color: var(--texto);
}

body.naga-compra .naga-aviso-contador {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--texto-3);
}

/* O ponto que pisca existe pra provar que a pagina esta viva.
   Antes disso o cliente lia "Conferindo... (7)", um contador de
   tentativa, que parece tela de programador e da a entender que
   algo tentou sete vezes e falhou. */
body.naga-compra .naga-aviso-pisca {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--ouro);
	animation: naga-aviso-pulso 1.4s ease-in-out infinite;
}

body.naga-compra .naga-aviso-contador.e-bom {
	color: var(--bom);
}

body.naga-compra .naga-aviso-contador.e-bom .naga-aviso-pisca {
	background: var(--bom);
	animation: none;
}

@keyframes naga-aviso-pulso {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .25; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
	body.naga-compra .naga-aviso-pisca {
		animation: none;
	}
}

/* ----------------------------------------------------------
 * 12. Celular: a tabela do carrinho
 *
 * Corte em 1000px de proposito: e exatamente onde o tema troca
 * de modo. Abaixo disso ele ja mostra o bloco unico dentro do
 * nome do produto. Se a gente tambem mostrasse as colunas
 * soltas, o cliente veria a quantidade duas vezes, o preco duas
 * vezes e duas lixeiras na mesma linha. Entao aqui as colunas
 * soltas somem e sobra um controle so.
 * -------------------------------------------------------- */
@media (max-width: 999.98px) {
	body.naga-compra table.shop_table.cart thead {
		display: none;
	}

	body.naga-compra table.shop_table.cart,
	body.naga-compra table.shop_table.cart tbody,
	body.naga-compra table.shop_table.cart tr {
		display: block;
		width: 100%;
	}

	body.naga-compra table.shop_table.cart tr.woocommerce-cart-form__cart-item {
		display: grid;
		grid-template-columns: 56px 1fr;
		gap: 14px;
		align-items: start;
		padding: 16px;
		border-top: 1px solid var(--linha);
		/* pra lixeira poder subir pro canto de cima */
		position: relative;
	}

	body.naga-compra table.shop_table.cart td {
		display: block;
		padding: 0;
		border: 0;
	}

	/* Quem manda no celular e o bloco do tema. */
	body.naga-compra tr.woocommerce-cart-form__cart-item > td.product-quantity,
	body.naga-compra tr.woocommerce-cart-form__cart-item > td.product-subtotal,
	body.naga-compra tr.woocommerce-cart-form__cart-item > td.product-remove {
		display: none;
	}

	/* Quantidade + preco + lixeira nao cabiam na mesma linha, e a
	   lixeira caia sozinha numa terceira linha, deixando um buraco
	   embaixo. Ela vai pro canto de cima, na altura do nome. */
	body.naga-compra .product-mobile-actions .remove {
		position: absolute;
		top: 14px;
		right: 14px;
		margin-left: 0;
	}

	body.naga-compra .product-mobile-actions td.product-name,
	body.naga-compra td.product-name {
		padding-right: 38px;
	}

	body.naga-compra td.actions {
		display: grid;
		gap: 10px;
	}

	body.naga-compra td.actions .coupon {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	/* No celular o campo do cupom manda na largura que sobrar. */
	body.naga-compra td.actions .coupon input#coupon_code {
		width: auto;
		flex: initial;
	}
}

/* ----------------------------------------------------------
 * 12.1. Celular: as duas colunas viram uma
 * -------------------------------------------------------- */
@media (max-width: 900px) {
	body.naga-compra .ct-woocommerce-cart-form,
	body.naga-compra form.checkout {
		grid-template-columns: 1fr;
	}

	body.naga-compra form.checkout > .ct-customer-details,
	body.naga-compra form.checkout > .ct-order-review,
	body.naga-compra form.checkout > #customer_details,
	body.naga-compra form.checkout > #order_review_heading,
	body.naga-compra form.checkout > #order_review {
		grid-column: 1;
		grid-row: auto;
	}

	body.naga-compra .cart-collaterals,
	body.naga-compra .ct-woocommerce-cart-form > .cart_totals,
	body.naga-compra form.checkout > .ct-order-review,
	body.naga-compra form.checkout > #order_review {
		position: static;
	}

	body.naga-compra .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.naga-compra * {
		transition: none !important;
	}

	body.naga-compra .button:hover,
	body.naga-compra a.button:hover {
		transform: none;
	}
}

/* ----------------------------------------------------------
 * 13. A tela de depois de pagar
 *
 * Esta tela reaproveita a pagina do checkout, e o checkout pede
 * o quadro inteiro (o item 0 solta a largura) porque la sao duas
 * colunas lado a lado. Depois de pagar nao existe segunda
 * coluna: e um recibo, uma coluna so. Esticada em 1240px, a
 * linha do produto nascia num canto e o preco no outro, com um
 * metro de vazio no meio. E os blocos vinham com respiro de 16,
 * 18 e 38px misturados: grudado em cima, solto embaixo.
 *
 * A regra aqui foi nao inventar desenho novo. Esta MESMA tabela
 * de pedido ja aparece em Minha conta > pedido, e la ela ja esta
 * vestida (conta.css, item das tabelas). Esta tela passa a usar
 * aquele mesmo desenho, dentro da coluna de leitura que as
 * paginas internas ja tem (paginas.css, --coluna).
 * -------------------------------------------------------- */

/* 13.1. A coluna
 *
 * 860px e a medida que o painel de afiliado ja usa, que e a
 * outra pagina de dados do site. O titulo da pagina segue este
 * numero sozinho, porque paginas.css amarra o topo na --coluna.
 */
body.naga-compra.woocommerce-order-received .naga-interna {
	--coluna: 860px;
}

body.naga-compra.woocommerce-order-received .naga-interna-corpo {
	max-width: var(--coluna);
	font-size: 15px;
}

/* 13.2. A regua da pilha
 *
 * Um respiro so, do topo ao rodape: 14px dentro do mesmo grupo
 * (a frase de abertura e a tira do pedido falam do documento),
 * 28px entre grupos, que e o mesmo intervalo da conta do
 * cliente. As margens de fabrica de cada pedaco saem do
 * caminho pra nao somar duas contas diferentes.
 */
body.naga-compra.woocommerce-order-received .woocommerce-order {
	/* a moldura vem do identidade.css e aqui ela atrapalha: */
	background: none;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.naga-compra.woocommerce-order-received .woocommerce-order > * {
	margin: 0;
}

body.naga-compra.woocommerce-order-received .woocommerce-order > .naga-entrega,
body.naga-compra.woocommerce-order-received .woocommerce-order > .naga-aviso,
body.naga-compra.woocommerce-order-received .woocommerce-order > section {
	margin-top: 14px;
}

/* 13.3. O "Obrigado" deixa de ser aviso e vira frase
 *
 * O titulo da pagina ja diz "Pedido confirmado" e o quadro da
 * entrega diz o que aconteceu com os pontos. A moldura de aviso
 * entre os dois falava a mesma coisa uma terceira vez, e ainda
 * carregava o certinho do tema, que caia em cima da primeira
 * letra. Aqui ela vira a linha de abertura da pagina: sem
 * caixa, sem barra na lateral, sem icone.
 */
body.naga-compra.woocommerce-order-received .woocommerce-notice--success {
	max-width: 62ch;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-2);
}

body.naga-compra.woocommerce-order-received .woocommerce-notice--success::before {
	content: none;
}

/* 13.4. A tira do pedido
 *
 * Eram cinco linhas empilhadas: 245px de altura no computador e
 * 411px no celular. Meia tela de rolagem de dado repetido antes
 * de chegar no que importa, que e a entrega. E-mail e forma de
 * pagamento saem daqui porque aparecem inteiros logo abaixo, no
 * endereco de cobranca e no rodape da tabela. Fica o que so
 * existe aqui: numero do pedido, data e total.
 */
body.naga-compra.woocommerce-order-received ul.order_details {
	background: none;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding: 14px 0;
	border-top: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
	list-style: none;
}

body.naga-compra.woocommerce-order-received ul.order_details li {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	color: var(--texto-3);
}

body.naga-compra.woocommerce-order-received ul.order_details li strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--texto);
	font-variant-numeric: tabular-nums;
}

body.naga-compra.woocommerce-order-received ul.order_details li.email,
body.naga-compra.woocommerce-order-received ul.order_details li.method {
	display: none;
}

/* 13.5. Os titulos das secoes
 *
 * O mesmo tamanho de titulo de bloco que a conta do cliente usa.
 * O tema entregava 21px, que competia com o h1 da pagina.
 */
body.naga-compra.woocommerce-order-received .woocommerce-order-details__title,
body.naga-compra.woocommerce-order-received .woocommerce-column__title {
	margin: 0 0 14px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--texto);
}

/* 13.6. As tabelas, iguais as de Minha conta
 *
 * A tabela e a propria caixa: fundo, moldura e canto arredondado
 * nela mesma, sem embrulho por fora. Copiado de conta.css pra
 * pagina nenhuma ter uma tabela de pedido diferente da outra.
 */
body.naga-compra.woocommerce-order-received table.shop_table {
	margin: 0;
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	border: 1px solid var(--linha);
	border-radius: 14px;
	overflow: hidden;
	background: var(--preto-2);
	font-size: 14px;
}

body.naga-compra.woocommerce-order-received table.shop_table th,
body.naga-compra.woocommerce-order-received table.shop_table td {
	padding: 13px 16px;
	background: none;
	border-bottom: 1px solid var(--linha);
	text-align: left;
	vertical-align: top;
	color: var(--texto-2);
}

body.naga-compra.woocommerce-order-received table.shop_table th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-3);
}

body.naga-compra.woocommerce-order-received table.shop_table tr:last-child > * {
	border-bottom: 0;
}

/* A coluna da direita encosta na direita, nas duas tabelas.
   Era isto que fazia uma parecer torta em relacao a outra: cada
   uma quebrava a linha num ponto diferente, entao os valores
   nasciam em lugares diferentes. Alinhados pela direita, o ponto
   de quebra deixa de importar. */
body.naga-compra.woocommerce-order-received table.shop_table tr > *:last-child {
	text-align: right;
	color: var(--texto);
}

body.naga-compra.woocommerce-order-received table.shop_table .woocommerce-Price-amount {
	white-space: nowrap;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

body.naga-compra.woocommerce-order-received table.shop_table td.product-name {
	font-size: 15px;
	color: var(--texto);
}

body.naga-compra.woocommerce-order-received table.shop_table td.product-name a {
	color: var(--texto);
	text-decoration: none;
	border-bottom: 1px solid var(--linha-2);
}

body.naga-compra.woocommerce-order-received table.shop_table td.product-name a:hover {
	color: var(--ouro-claro);
	border-bottom-color: var(--ouro-claro);
}

body.naga-compra.woocommerce-order-received table.shop_table .product-quantity {
	font-weight: 400;
	color: var(--texto-3);
}

/* O rodape da tabela (subtotal, desconto, total, pagamento) e
   uma conta, nao uma lista de itens: uma linha mais forte separa
   ele do que foi comprado. */
body.naga-compra.woocommerce-order-received table.shop_table tfoot tr:first-child > * {
	border-top: 1px solid var(--linha-2);
}

/* O nick fica na tabela de campos extras, logo embaixo: mesmo
   desenho, colado no grupo de cima, porque e o mesmo pedido. */
body.naga-compra.woocommerce-order-received table.shop_table.custom-fields {
	margin-top: 14px;
}

/* 13.7. O endereco de cobranca */
body.naga-compra.woocommerce-order-received .woocommerce-customer-details address {
	padding: 18px;
	border: 1px solid var(--linha);
	border-radius: 14px;
	background: var(--preto-2);
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--texto-2);
}

/* 13.8. O quadro da entrega
 *
 * A parte que importa: a loja entrega em cerca de um minuto, e o
 * cliente cai nesta tela dentro desse minuto. Antes ele lia um
 * recibo e ia embora sem saber se os pontos vinham, quando, e
 * pra qual nick. Agora o quadro fala, e ele se vira sozinho pra
 * "entregue" quando o robo termina, sem recarregar a pagina.
 */
body.naga-compra.woocommerce-order-received .naga-entrega {
	padding: 18px 20px;
	border: 1px solid var(--linha-2);
	border-radius: 14px;
	background: var(--preto-2);
	font-size: 15px;
	line-height: 1.6;
	color: var(--texto-2);
}

body.naga-compra.woocommerce-order-received .naga-entrega-titulo {
	display: block;
	margin-bottom: 6px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--texto);
}

body.naga-compra.woocommerce-order-received .naga-entrega p {
	margin: 0;
}

body.naga-compra.woocommerce-order-received .naga-entrega b,
body.naga-compra.woocommerce-order-received .naga-entrega strong {
	color: var(--texto);
}

body.naga-compra.woocommerce-order-received .naga-entrega-rodape {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--linha);
	font-size: 13.5px;
	color: var(--texto-3);
}

body.naga-compra.woocommerce-order-received .naga-entrega-rodape a {
	color: var(--ouro-claro);
}

/* Esperando o dinheiro, e a entrega andando: ouro, porque e
   informacao de espera, nao e erro. */
body.naga-compra.woocommerce-order-received .naga-entrega.e-esperando,
body.naga-compra.woocommerce-order-received .naga-entrega.e-andando {
	border-color: rgba(201, 162, 39, .28);
	background: rgba(201, 162, 39, .07);
}

body.naga-compra.woocommerce-order-received .naga-entrega.e-esperando .naga-entrega-titulo,
body.naga-compra.woocommerce-order-received .naga-entrega.e-andando .naga-entrega-titulo {
	color: var(--ouro-claro);
}

/* Entregue: verde, e so aqui. Este verde e uma promessa
   cumprida, entao ele nao aparece antes do robo confirmar. */
body.naga-compra.woocommerce-order-received .naga-entrega.e-feita {
	border-color: rgba(74, 157, 106, .35);
	background: rgba(74, 157, 106, .08);
}

body.naga-compra.woocommerce-order-received .naga-entrega.e-feita .naga-entrega-titulo {
	color: var(--bom);
}

body.naga-compra.woocommerce-order-received .naga-entrega-contador {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--texto-3);
}

body.naga-compra.woocommerce-order-received .naga-entrega-pisca {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--ouro);
	animation: naga-aviso-pulso 1.4s ease-in-out infinite;
}

/* 13.9. Telas pequenas */
@media (max-width: 600px) {
	body.naga-compra.woocommerce-order-received .woocommerce-order {
		gap: 11px;
	}

	/* o titulo cola na tabela dele com o mesmo passo curto */
	body.naga-compra.woocommerce-order-received .woocommerce-order-details__title,
	body.naga-compra.woocommerce-order-received .woocommerce-column__title {
		margin-bottom: 11px;
	}

	body.naga-compra.woocommerce-order-received table.shop_table.custom-fields {
		margin-top: 11px;
	}

	body.naga-compra.woocommerce-order-received .woocommerce-order > .naga-entrega,
	body.naga-compra.woocommerce-order-received .woocommerce-order > .naga-aviso,
	body.naga-compra.woocommerce-order-received .woocommerce-order > section {
		margin-top: 11px;
	}

	body.naga-compra.woocommerce-order-received .naga-entrega {
		padding: 16px;
	}

	body.naga-compra.woocommerce-order-received table.shop_table th,
	body.naga-compra.woocommerce-order-received table.shop_table td {
		padding: 12px 14px;
	}

	body.naga-compra.woocommerce-order-received .woocommerce-customer-details address {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.naga-compra.woocommerce-order-received .naga-entrega-pisca {
		animation: none;
	}
}