/*
 * Minha Conta.
 *
 * Carregado por inc/conta-assets.php em is_account_page(), junto com
 * formulario.css (a pele de campo/aviso). Aqui fica só o layout da conta:
 * grade navegação+conteúdo, cartões, tabelas de pedidos/endereços e o
 * acesso (login + cadastro).
 */

/* ==========================================================================
   1. Grade geral — navegação à esquerda, conteúdo à direita (padrão catálogo)
   ========================================================================== */

.cdm-conta-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-6);
	align-items: start;
	margin-bottom: var(--cdm-e-16);
}

@media (min-width: 900px) {
	.cdm-conta-area {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: var(--cdm-e-8);
	}
}

.cdm-conta-area__conteudo {
	min-width: 0;
}

/* ==========================================================================
   2. Navegação
   ========================================================================== */

.cdm-conta-nav {
	padding: var(--cdm-e-3);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-superficie);
	box-shadow: none;
	width: auto;
	min-width: 0;
	float: none;
}

/* WooCommerce gives navigation 30% width by default; grid already owns width. */
.woocommerce-MyAccount-navigation.cdm-conta-nav {
	width: 100%;
	float: none;
}

@media (min-width: 900px) {
	.cdm-conta-nav {
		position: sticky;
		top: var(--cdm-e-4);
	}
}

.cdm-conta-nav::before {
	content: "Minha conta";
	display: block;
	padding: var(--cdm-e-3) var(--cdm-e-4) var(--cdm-e-4);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* No celular a navegação vira uma fileira rolável de pílulas. */
ul.cdm-conta-nav__lista {
	display: flex;
	gap: var(--cdm-e-1);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
	ul.cdm-conta-nav__lista {
		flex-direction: column;
		overflow: visible;
	}
}

.cdm-conta-nav__link {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-3) var(--cdm-e-4);
	white-space: nowrap;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
	text-decoration: none;
	border-radius: var(--cdm-raio);
	transition: var(--cdm-transicao);
}

.cdm-conta-nav__link:hover,
.cdm-conta-nav__link:focus-visible {
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul);
}

.cdm-conta-nav__item.is-active .cdm-conta-nav__link {
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul);
	font-weight: var(--cdm-peso-semi);
}

.cdm-conta-nav__icone {
	font-size: var(--cdm-t-md);
	width: 1.25rem;
	text-align: center;
	flex: 0 0 auto;
}

/* ==========================================================================
   3. Conteúdo — tipografia e tabelas do Woo
   ========================================================================== */

.cdm-conta-area__conteudo > h2,
.cdm-conta-area__conteudo h3 {
	margin: 0 0 var(--cdm-e-4);
}

.cdm-conta-area__conteudo p {
	margin: 0 0 var(--cdm-e-4);
	line-height: var(--cdm-altura-normal);
}

.cdm-conta-area__conteudo a:not(.button) {
	color: var(--cdm-link);
}

.cdm-conta-resumo {
	margin-bottom: var(--cdm-e-8);
	padding: var(--cdm-e-8);
	border-radius: var(--cdm-raio-lg);
	border: 1px solid var(--cdm-azul-claro);
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul);
	box-shadow: none;
}

.cdm-conta-resumo__eyebrow {
	margin: 0 0 var(--cdm-e-2) !important;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	text-transform: uppercase;
	color: var(--cdm-azul);
}

.cdm-conta-resumo h2 {
	margin: 0 0 var(--cdm-e-2);
	color: var(--cdm-azul);
	font-size: var(--cdm-t-2xl);
}

.cdm-conta-resumo > p:not(.cdm-conta-resumo__eyebrow) {
	margin-bottom: var(--cdm-e-6);
	color: var(--cdm-texto-fraco);
}

.cdm-conta-resumo__acoes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cdm-e-3);
}

.cdm-conta-atalho {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
	min-height: var(--cdm-altura-controle);
	padding: var(--cdm-e-3) var(--cdm-e-4);
	border-radius: var(--cdm-raio);
	background: var(--cdm-branco);
	border: 1px solid var(--cdm-cinza-200);
	color: var(--cdm-azul) !important;
	font-weight: var(--cdm-peso-semi);
	text-decoration: none;
}

.cdm-conta-atalho__icone { font-size: var(--cdm-t-lg); }
.cdm-conta-atalho__seta { margin-left: auto; }

@media (max-width: 639px) {
	.cdm-conta-resumo { padding: var(--cdm-e-6); }
	.cdm-conta-resumo__acoes { grid-template-columns: 1fr; }
}

/* Tabelas (pedidos, downloads, formas de pagamento). */
.cdm-conta-area__conteudo table.shop_table {
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	overflow: hidden;
	font-size: var(--cdm-t-base);
}

.cdm-conta-area__conteudo table.shop_table th {
	padding: var(--cdm-e-3) var(--cdm-e-4);
	text-align: left;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto-fraco);
	background: var(--cdm-amarelo-claro);
}

.cdm-conta-area__conteudo table.shop_table td {
	padding: var(--cdm-e-3) var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
	vertical-align: middle;
}

/* Modo empilhado do Woo no celular: cada linha vira cartão, o rótulo vem do
   data-title — mesmo mecanismo usado no carrinho (checkout.css §3). */
@media (max-width: 899px) {
	.cdm-conta-area__conteudo table.shop_table_responsive thead {
		display: none;
	}

	.cdm-conta-area__conteudo table.shop_table_responsive tr {
		display: block;
		padding: var(--cdm-e-2) 0;
	}

	.cdm-conta-area__conteudo table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: var(--cdm-e-4);
		text-align: right;
	}

	.cdm-conta-area__conteudo table.shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: var(--cdm-peso-medio);
		color: var(--cdm-texto-fraco);
		text-align: left;
	}

	.cdm-conta-area__conteudo table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before {
		content: "";
	}
}

.cdm-conta-area__conteudo .woocommerce-orders-table__cell-order-actions .button {
	padding: var(--cdm-e-2) var(--cdm-e-3);
	font-size: var(--cdm-t-sm);
}

/* Paginação "anterior/próxima" das listas. */
.cdm-conta-area__conteudo .woocommerce-pagination {
	display: flex;
	gap: var(--cdm-e-3);
	margin-top: var(--cdm-e-5);
}

/* ==========================================================================
   4. Endereços (my-address) — dois cartões
   ========================================================================== */

.cdm-conta-area__conteudo .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-4);
	width: 100%;
	clear: both;
}

@media (min-width: 640px) {
	.cdm-conta-area__conteudo .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cdm-conta-area__conteudo .woocommerce-Address {
	padding: var(--cdm-e-5);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-superficie);
	width: auto;
	float: none;
}

/* WooCommerce aplica floats em .col-1/.col-2; nesta tela a grade manda. */
body.woocommerce-account .woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cdm-e-4);
	width: 100%;
}

body.woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address {
	width: auto;
	float: none;
}

@media (max-width: 639px) {
	body.woocommerce-account .woocommerce .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cdm-conta-area__conteudo .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	margin-bottom: var(--cdm-e-3);
}

.cdm-conta-area__conteudo .woocommerce-Address-title h2,
.cdm-conta-area__conteudo .woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--cdm-t-lg);
}

.cdm-conta-area__conteudo .woocommerce-Address address {
	font-style: normal;
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
}

/* ==========================================================================
   5. Detalhe do pedido (ver-pedido) e pedido recebido reaproveitam as classes
      order-details do Woo
   ========================================================================== */

.cdm-conta-area__conteudo .woocommerce-order-details,
.cdm-conta-area__conteudo .woocommerce-customer-details {
	margin-top: var(--cdm-e-6);
}

.cdm-conta-area__conteudo .woocommerce-customer-details address {
	font-style: normal;
	padding: var(--cdm-e-4);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	line-height: var(--cdm-altura-normal);
}

/* ==========================================================================
   6. Acesso — login e cadastro (form-login.php)
   ========================================================================== */

.cdm-acesso {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-5);
	align-items: start;
	max-width: 60rem;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.cdm-acesso:not(.cdm-acesso--solo) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* O core dá float/width às colunas u-column1/2; a grade manda aqui. */
.cdm-acesso .cdm-acesso__coluna {
	float: none;
	width: auto;
}

.cdm-acesso__cartao {
	padding: var(--cdm-e-6);
}

.cdm-acesso__titulo {
	margin: 0 0 var(--cdm-e-2);
	font-size: var(--cdm-t-xl);
}

.cdm-acesso__texto {
	margin: 0 0 var(--cdm-e-5);
	color: var(--cdm-texto-fraco);
	line-height: var(--cdm-altura-normal);
}

.cdm-acesso__acoes {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-4);
	margin-top: var(--cdm-e-2);
}

.cdm-acesso .woocommerce-form-login__submit,
.cdm-acesso .woocommerce-form-register__submit {
	width: 100%;
	padding: var(--cdm-e-4) var(--cdm-e-5);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
}

.cdm-acesso .lost_password {
	margin: var(--cdm-e-3) 0 0;
	font-size: var(--cdm-t-sm);
}

.cdm-acesso .lost_password a {
	color: var(--cdm-link);
}

/* Esqueci a senha / redefinir: formulário curto centralizado. */
.cdm-conta-area__conteudo .lost_reset_password,
.woocommerce form.lost_reset_password {
	max-width: 28rem;
}

/* ==========================================================================
   7. Antídoto contra a grade da referência
   --------------------------------------------------------------------------
   referencia.css (o CSS do gabarito, que ainda está enfileirado) traz uma
   grade tipo bootstrap com .col-1/.col-2/.col2-set — as MESMAS classes que o
   WooCommerce usa em endereços e afins. Sem isto os cartões encolhem para
   1/12 da largura. Quando referencia.css sair do enqueue (§13 do CLAUDE.md),
   este bloco pode sair junto.
   ========================================================================== */

.cdm-conta-area .col2-set,
.cdm-acesso.col2-set {
	width: auto;
}

.cdm-conta-area .col2-set .col-1,
.cdm-conta-area .col2-set .col-2,
.cdm-acesso .col-1,
.cdm-acesso .col-2 {
	float: none;
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	min-width: 0;
}