/* =========================================================
   NAGA STORE - CAMADA DE IDENTIDADE
   =========================================================
   Faz o carrinho, o checkout, a minha conta e o afiliados
   falarem a mesma lingua da home nova.

   Leitura de design: redesenho em modo preservar. O site ja
   e escuro com dourado. Nao inventamos estetica nova, so
   alinhamos tom, tipografia e forma ao que ja foi entregue
   na home. Variancia 4, movimento 3, densidade 5.

   Estrategia: o Blocksy monta as telas dele em cima de
   variaveis proprias (--theme-palette-color-N). Em vez de
   brigar regra por regra, reapontamos essas variaveis. Toda
   troca abaixo mantem a polaridade (claro continua claro,
   escuro continua escuro), entao nenhum texto pode sumir.
   ========================================================= */

:root {
	/* Tokens da Naga, identicos aos da home. */
	--naga-preto: #0b0b0d;
	--naga-preto-2: #111114;
	--naga-preto-3: #17171b;
	--naga-linha: rgba(255, 255, 255, .08);
	--naga-linha-2: rgba(255, 255, 255, .15);
	--naga-ouro: #c9a227;
	--naga-ouro-claro: #e3c464;
	--naga-ouro-fundo: rgba(201, 162, 39, .08);
	--naga-texto: #f2f1ef;
	--naga-texto-2: #a7a5a1;
	--naga-texto-3: #767471;
	--naga-verde: #4a9d6a;
	--naga-vermelho: #e2686b;
	--naga-raio: 14px;
	--naga-largura: 1240px;

	/* ---- Reaponta a paleta do Blocksy ----
	   1 e 5: dourado principal (era #A8892C, apagado)
	   2:     dourado claro
	   3:     superficie escura (era #1A1A1A)
	   4 e 6: fundo (era #000000, preto puro e chapado)
	   7:     texto secundario
	   8:     texto principal                                */
	--theme-palette-color-1: var(--naga-ouro);
	--theme-palette-color-2: var(--naga-ouro-claro);
	--theme-palette-color-3: var(--naga-preto-3);
	--theme-palette-color-4: var(--naga-preto);
	--theme-palette-color-5: var(--naga-ouro);
	--theme-palette-color-6: var(--naga-preto);
	--theme-palette-color-7: var(--naga-texto-2);
	--theme-palette-color-8: var(--naga-texto);

	--theme-text-color: var(--naga-texto);
	--theme-font-family: 'Manrope', system-ui, sans-serif;
	--theme-content-spacing: 1.5rem;

	/* O Blocksy usa isto pra largura do conteudo. Alinhado
	   com os 1240px da home. */
	--theme-normal-container-max-width: var(--naga-largura);
	--theme-content-width: var(--naga-largura);
}

/* =========================================================
   1. BASE
   ========================================================= */

body {
	background: #08080a;
	color: var(--naga-texto);
	font-family: 'Manrope', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.entry-title,
.woocommerce-MyAccount-content h2,
.woocommerce h2, .woocommerce h3 {
	font-family: 'Outfit', sans-serif;
	letter-spacing: -.03em;
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
	color: var(--naga-texto);
}

a {
	transition: color .2s;
}

/* Numeros (precos, quantidades, totais) alinhados em coluna. */
.amount, .woocommerce-Price-amount, .quantity input,
td.product-total, td.product-subtotal, .order-total .amount {
	font-family: 'Outfit', sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* =========================================================
   2. CABECALHO
   ---------------------------------------------------------
   Mesma barra da home: fundo quase preto translucido,
   desfoque, uma linha fina embaixo. Nao mexemos na estrutura
   do Blocksy, so no tom.
   ========================================================= */

.ct-header [data-row] {
	background: rgba(11, 11, 13, .88) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--naga-linha);
}

.ct-header [data-row] a {
	color: var(--naga-texto-2);
}

.ct-header [data-row] a:hover {
	color: var(--naga-texto);
}

/* Item de menu da pagina em que voce esta. */
.ct-header .current-menu-item > a,
.ct-header .current_page_item > a {
	color: var(--naga-texto);
}

.ct-header .menu-item > a:hover {
	color: var(--naga-ouro-claro);
}

/* Logo na mesma altura da home. */
.ct-header .site-logo-container img,
.ct-header .ct-logo-container img {
	max-height: 40px;
	width: auto;
}

/* Contador do carrinho: pastilha dourada, igual a da home. */
.ct-cart-item .ct-cart-badge,
.ct-header-cart .ct-cart-badge {
	background: var(--naga-ouro) !important;
	color: #191400 !important;
	font-weight: 700;
	border-radius: 5px;
}

/* =========================================================
   3. RODAPE
   ========================================================= */

.ct-footer [data-row] {
	background: #08080a !important;
	border-top: 1px solid var(--naga-linha);
	color: var(--naga-texto-3);
	font-size: 13px;
}

.ct-footer [data-row] a {
	color: var(--naga-texto-3);
}

.ct-footer [data-row] a:hover {
	color: var(--naga-ouro-claro);
}

.ct-footer .widget-title,
.ct-footer h4 {
	font-size: 12px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--naga-texto-2);
	font-weight: 600;
}

/* =========================================================
   4. BOTOES
   ---------------------------------------------------------
   Copia exata do .btn / .btn-ouro da home, incluindo o
   contraste do texto sobre o dourado (#191400 sobre #c9a227
   passa AA com folga).
   ========================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-element-button,
.wc-block-components-button,
.ct-account-login-submit,
.ct-account-register-submit,
.ct-account-lost-password-submit,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 24px;
	border-radius: 11px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	border: 1px solid transparent;
	background: var(--naga-ouro);
	color: #191400;
	text-transform: none;
	transition: transform .18s cubic-bezier(.2, .8, .3, 1),
		background .2s, border-color .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-element-button:hover,
.ct-account-login-submit:hover,
.ct-account-register-submit:hover,
.ct-account-lost-password-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--naga-ouro-claro);
	color: #191400;
	transform: translateY(-2px);
}

/* O botao do Mercado Pago e marca deles e mora dentro de um
   iframe: nenhuma regra daqui encosta nele, e e assim que tem
   que ser. Ja a recusa de cookies nao pode competir de igual
   pra igual com a acao principal, entao sai do dourado. */
.ct-cookies-decline-button {
	background: transparent;
	color: var(--naga-texto-2);
	border: 1px solid var(--naga-linha);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
button[type="submit"]:active {
	transform: translateY(1px) scale(.99);
}

/* Acao principal (finalizar compra, fazer pedido). */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.wc-proceed-to-checkout a.checkout-button,
#place_order {
	background: var(--naga-ouro);
	color: #191400;
	font-size: 16px;
	padding: 16px 28px;
}

/* Acao secundaria: contorno, sem preencher. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce .button.wc-forward:not(.checkout-button) {
	background: transparent;
	color: var(--naga-texto);
	border-color: var(--naga-linha-2);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover {
	background: transparent;
	border-color: var(--naga-ouro);
	color: var(--naga-ouro-claro);
}

/* Botao desabilitado precisa parecer desabilitado. */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
	background: var(--naga-preto-3);
	color: var(--naga-texto-3);
	border-color: var(--naga-linha);
	transform: none;
	cursor: not-allowed;
}

/* =========================================================
   5. FORMULARIOS
   ---------------------------------------------------------
   Rotulo em cima do campo, nunca rotulo dentro do campo.
   Anel de foco visivel em tudo que recebe teclado.
   ========================================================= */

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
	background: var(--naga-preto-3);
	border: 1px solid var(--naga-linha);
	border-radius: 10px;
	color: var(--naga-texto);
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 15px;
	padding: 12px 14px;
	transition: border-color .2s, background .2s;
}

input:hover, select:hover, textarea:hover {
	border-color: var(--naga-linha-2);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--naga-ouro);
	background: var(--naga-preto-2);
	outline: 2px solid var(--naga-ouro-claro);
	outline-offset: 2px;
}

::placeholder {
	color: var(--naga-texto-3);
	opacity: 1;
}

label,
.woocommerce form .form-row label {
	color: var(--naga-texto-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	margin-bottom: 6px;
	display: inline-block;
}

/* O asterisco de campo obrigatorio precisa ser legivel. */
.required, abbr.required {
	color: var(--naga-ouro);
	border: 0;
	text-decoration: none;
}

/* Foco visivel em qualquer coisa navegavel pelo teclado. */
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, summary:focus-visible {
	outline: 2px solid var(--naga-ouro-claro);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =========================================================
   6. CAIXAS, TABELAS E CARTOES
   ========================================================= */

.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-MyAccount-content,
.woocommerce-order,
.woocommerce ul.order_details {
	background: var(--naga-preto-2);
	border: 1px solid var(--naga-linha);
	border-radius: var(--naga-raio);
	color: var(--naga-texto);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--naga-linha);
	color: var(--naga-texto);
	padding: 14px 16px;
}

.woocommerce table.shop_table thead th {
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--naga-texto-2);
	font-weight: 600;
}

.woocommerce table.shop_table tbody tr:hover {
	background: rgba(255, 255, 255, .02);
}

/* Linha do total: e a informacao mais importante da tela. */
.woocommerce table.shop_table tr.order-total td,
.woocommerce table.shop_table tr.order-total th {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--naga-texto);
	border-top: 1px solid var(--naga-linha-2);
}

.woocommerce table.shop_table tr.order-total .amount {
	color: var(--naga-ouro);
}

/* Caixa de pagamento. O conteudo do Mercado Pago vem dentro
   de um quadro proprio que nao da pra estilizar por fora,
   entao mexemos so na moldura. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--naga-raio);
}

.woocommerce-checkout #payment ul.payment_methods {
	background: var(--naga-preto-2);
	border: 1px solid var(--naga-linha);
	border-radius: var(--naga-raio);
	padding: 16px;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--naga-preto-3);
	border: 1px solid var(--naga-linha);
	border-radius: 10px;
	color: var(--naga-texto-2);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--naga-preto-3);
}

/* =========================================================
   7. MINHA CONTA
   ========================================================= */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	color: var(--naga-texto-2);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--naga-preto-3);
	color: var(--naga-texto);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--naga-ouro-fundo);
	border-color: rgba(201, 162, 39, .35);
	color: var(--naga-ouro-claro);
}

/* =========================================================
   8. AVISOS
   ---------------------------------------------------------
   Erro, alerta e sucesso precisam ser distinguiveis por cor
   E por texto, nunca so por cor.
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--naga-preto-2);
	border: 1px solid var(--naga-linha);
	border-top: 3px solid var(--naga-ouro);
	border-radius: 10px;
	color: var(--naga-texto);
	font-size: 14.5px;
}

.woocommerce-message {
	border-top-color: var(--naga-verde);
}

.woocommerce-error {
	border-top-color: var(--naga-vermelho);
	color: var(--naga-texto);
}

.woocommerce-error a, .woocommerce-message a, .woocommerce-info a {
	color: var(--naga-ouro-claro);
	text-decoration: underline;
}

/* =========================================================
   9. TELAS PEQUENAS
   ========================================================= */

@media (max-width: 768px) {
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		padding: 11px 12px;
	}

	.woocommerce a.button,
	.woocommerce button.button,
	.wc-proceed-to-checkout a.checkout-button,
	#place_order {
		width: 100%;
		padding: 15px 20px;
	}
}

/* =========================================================
   10. QUEM PEDIU MENOS MOVIMENTO, RECEBE MENOS MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button,
	.woocommerce button.button,
	.wp-element-button,
	button[type="submit"] {
		transition: none;
	}

	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.wp-element-button:hover,
	button[type="submit"]:hover {
		transform: none;
	}
}

/* =========================================================
   11. OS AVISOS MIUDOS DOS FORMULARIOS
   *
   * Isto estava escrito no "CSS adicional" do painel, escondido,
   * fixando o dourado velho (#D8B44A) com !important em cima do
   * dourado novo. Trouxe pra ca, na cor da casa. O painel ficou
   * vazio de proposito: CSS que mora em campo de site e o tipo de
   * coisa que ninguem lembra que existe quando algo quebra.
   ========================================================= */

.woocommerce-form-register p,
.woocommerce-form-login p,
.woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--naga-texto-3);
	margin-bottom: 12px;
}

.woocommerce-privacy-policy-text a {
	color: var(--naga-ouro-claro);
}