/* ===========================================================
   ECLAT GOLD — Contas (entrar e criar conta)
   Usa os tokens do design system definidos no style.css.
   =========================================================== */

.eg-conta{
	display:flex;
	justify-content:center;
	padding:56px 20px 72px;
}
.eg-conta-box{
	width:100%;
	max-width:440px;
	background:#fff;
	border:1px solid var(--eg-line);
	border-radius:var(--eg-r-card);
	box-shadow:var(--eg-shadow);
	padding:40px 36px 34px;
}

/* ---------- cabeçalho ---------- */
.eg-conta-head{ margin-bottom:28px; text-align:center }
.eg-conta-head h1{
	font-family:var(--eg-display);
	font-size:26px;
	font-weight:600;
	color:var(--eg-ink);
	margin:0 0 8px;
	line-height:1.25;
	text-wrap:balance;
}
.eg-conta-head p{
	font-size:14.5px;
	color:var(--eg-muted);
	margin:0;
	line-height:1.55;
}

/* ---------- formulário ---------- */
.eg-conta-form .form-row{ margin:0 0 18px; display:block }
.eg-conta-form label{
	display:block;
	font-family:var(--eg-body);
	font-size:13.5px;
	font-weight:600;
	color:var(--eg-ink2);
	margin-bottom:7px;
}
.eg-conta-form label .required{ color:var(--eg-danger); text-decoration:none }
.eg-conta-form input[type="text"],
.eg-conta-form input[type="email"],
.eg-conta-form input[type="password"]{
	width:100%;
	box-sizing:border-box;
	border:1.5px solid var(--eg-line);
	border-radius:var(--eg-r-input);
	padding:13px 14px;
	font-family:var(--eg-body);
	font-size:15px;
	color:var(--eg-ink);
	background:#fff;
	transition:.15s ease;
}
.eg-conta-form input:focus{
	border-color:var(--eg-brand);
	box-shadow:0 0 0 3px var(--eg-g50);
	outline:none;
}

/* linha do "continuar conectado" + senha perdida */
.eg-conta-linha{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	flex-wrap:wrap;
	margin:4px 0 22px;
}
.eg-conta-linha label{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0;
	font-weight:500;
	font-size:13.5px;
	color:var(--eg-ink2);
	cursor:pointer;
}
.eg-conta-linha input[type="checkbox"]{
	width:16px;height:16px;
	accent-color:var(--eg-brand);
	cursor:pointer;
}
.eg-conta-perdi{
	font-size:13.5px;
	font-weight:600;
	color:var(--eg-brand);
	text-decoration:none;
	border-bottom:1.5px solid transparent;
	transition:.15s ease;
}
.eg-conta-perdi:hover{ color:var(--eg-brand-dark); border-bottom-color:var(--eg-g200) }

/* ---------- botão ---------- */
/* O Hello Elementor pinta button:hover/:focus de #cc3366 com
   especificidade (0,1,1) — por isso todos os estados declaram background. */
.eg-conta-btn{
	display:block;
	width:100%;
	border:none;
	border-radius:var(--eg-r-btn);
	background:var(--eg-brand);
	color:#fff;
	font-family:var(--eg-body);
	font-size:15.5px;
	font-weight:700;
	padding:15px 20px;
	cursor:pointer;
	transition:.15s ease;
}
.eg-conta-btn:hover,
.eg-conta-btn:focus{ background:var(--eg-brand-dark); color:#fff }
.eg-conta-btn:focus-visible{ outline:2px solid var(--eg-brand); outline-offset:2px }

/* ---------- troca entre entrar / criar conta ---------- */
.eg-conta-troca{
	margin:24px 0 0;
	padding-top:22px;
	border-top:1px solid var(--eg-line);
	text-align:center;
	font-size:14.5px;
	color:var(--eg-muted);
}
.eg-conta-troca a{
	font-weight:650;
	color:var(--eg-brand);
	text-decoration:none;
	border-bottom:1.5px solid var(--eg-g200);
	transition:.15s ease;
}
.eg-conta-troca a:hover{ color:var(--eg-brand-dark); border-bottom-color:var(--eg-brand) }

.eg-conta-aviso{
	font-size:13.5px;
	color:var(--eg-ink2);
	background:var(--eg-g50);
	border-radius:var(--eg-r-input);
	padding:12px 14px;
	margin:0 0 18px;
	line-height:1.5;
}

/* ---------- avisos do WooCommerce dentro da caixa ---------- */
.eg-conta .woocommerce-error,
.eg-conta .woocommerce-message,
.eg-conta .woocommerce-info{
	margin:0 0 20px;
	border-radius:var(--eg-r-input);
	font-size:14px;
}

/* Notices que o WooCommerce imprime fora da caixa, no topo da página */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.page-criar-conta .woocommerce-error,
.page-criar-conta .woocommerce-message,
.page-criar-conta .woocommerce-info{
	max-width:440px;
	margin-left:auto;
	margin-right:auto;
}

@media(max-width:520px){
	.eg-conta{ padding:32px 16px 48px }
	.eg-conta-box{ padding:30px 22px 26px; border-radius:14px }
	.eg-conta-head h1{ font-size:23px }
}
@media(prefers-reduced-motion:reduce){
	.eg-conta-form input,
	.eg-conta-btn,
	.eg-conta-perdi,
	.eg-conta-troca a{ transition:none !important }
}

/* ---------- correções de herança ----------
   O WooCommerce estiliza `form.login` e `form.register` com borda e padding
   próprios — dentro do nosso cartão isso vira caixa dentro de caixa.
   Especificidade (0,3,1) para vencer `.woocommerce form.login` (0,2,1)
   independentemente da ordem em que as folhas carregam. */
.eg-conta .eg-conta-box form.eg-conta-form{
	border:none;
	padding:0;
	margin:0;
	border-radius:0;
	background:none;
}

/* O cartão já traz o próprio <h1>; o título da página duplicaria. */
body.eclat-conta .page-header{ display:none }

/* Woo insere o botão de ver/ocultar senha dentro do campo */
.eg-conta .woocommerce-form-login__submit{ margin-top:0 }
.eg-conta .show-password-input{ top:14px }

/* O WooCommerce aplica `float:left` em `button.button` — botão flutuado não
   entra na altura do formulário, então o bloco "Ainda não tem conta?" subia
   e caía por cima dele. Especificidade (0,3,0) para vencer (0,2,1). */
.eg-conta .eg-conta-box .eg-conta-btn{
	float:none;
	margin:0;
	width:100%;
}

/* ---------- confirmação do link de recuperação ---------- */
.eg-conta-box--centro{ text-align:center }
.eg-conta-ok{
	width:56px;
	height:56px;
	margin:0 auto 20px;
	border-radius:50%;
	background:var(--eg-g50);
	color:var(--eg-brand);
	display:grid;
	place-items:center;
}
.eg-conta-ok svg{ width:26px; height:26px }
.eg-conta-box--centro .eg-conta-head{ margin-bottom:24px }
.eg-conta-box--centro .eg-conta-head p{ font-size:14px; line-height:1.6 }

/* botão que na verdade é link (sem submit) */
.eg-conta-btn--link{
	display:block;
	text-align:center;
	text-decoration:none;
	line-height:1.2;
}
.eg-conta-btn--link:hover{ color:#fff }

/* O Hello Elementor traz `.page-content a{text-decoration:underline}` (0,1,1),
   que vencia os `text-decoration:none` de classe única e sublinhava os links
   do cartão — que já usam border-bottom como marcação. (0,3,1) resolve. */
.eg-conta .eg-conta-box a.eg-conta-btn--link,
.eg-conta .eg-conta-box a.eg-conta-perdi,
.eg-conta .eg-conta-box .eg-conta-troca a{
	text-decoration:none;
}

/* ===========================================================
   MINHA CONTA (área logada)

   Tudo escopado em #egConta de propósito: o woocommerce.css é
   carregado nas páginas de conta e traz regras como
   `.woocommerce table.shop_table` e `.woocommerce-MyAccount-navigation ul`
   que vencem seletores de classe única. Um ID encerra a disputa.
   =========================================================== */
/* Largura e respiro lateral vêm do wrapper `.woocommerce`, como no resto do
   site: aqui o container só cuida da grade. Antes ele tinha teto próprio de
   1000px e mais 20px de padding, o que deixava "Minha conta" mais estreita que
   as outras páginas e, no celular, somava dois respiros e estourava a tela. */
#egConta{
	display:grid;
	grid-template-columns:250px 1fr;
	gap:28px;
	align-items:start;
	max-width:100%;
	margin:0 auto;
	padding:48px 0 72px;
}
/* min-width:0 para as colunas poderem encolher: item de grade tem largura
   mínima automática e é isso que fazia a lateral empurrar a página. */
#egConta > .eg-ac-lado,
#egConta > .eg-ac-conteudo{min-width:0}

/* ---------- coluna lateral ---------- */
#egConta .eg-ac-lado{
	background:#fff;
	border:1px solid var(--eg-line);
	border-radius:var(--eg-r-card);
	box-shadow:var(--eg-shadow);
	padding:20px 16px;
	position:sticky;
	top:96px;
}
#egConta .eg-ac-perfil{
	display:flex;align-items:center;gap:12px;
	padding:0 6px 18px;margin-bottom:12px;
	border-bottom:1px solid var(--eg-line);
}
#egConta .eg-ac-avatar{
	width:44px;height:44px;flex-shrink:0;border-radius:50%;
	background:var(--eg-g100);color:#08322b;
	display:grid;place-items:center;
	font-family:var(--eg-body);font-size:15px;font-weight:700;letter-spacing:.5px;
}
#egConta .eg-ac-perfil-txt{min-width:0}
#egConta .eg-ac-perfil-txt b{
	display:block;font-family:var(--eg-body);font-size:14.5px;font-weight:650;
	color:var(--eg-ink);line-height:1.3;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#egConta .eg-ac-perfil-txt span{
	display:block;font-size:12px;color:var(--eg-muted);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#egConta .eg-ac-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#egConta .eg-ac-nav li{margin:0;padding:0;border:none}
#egConta .eg-ac-nav li a{
	display:flex;align-items:center;gap:11px;
	padding:11px 12px;border-radius:10px;
	font-family:var(--eg-body);font-size:14.5px;font-weight:500;
	color:var(--eg-ink2);text-decoration:none;transition:.15s ease;
}
#egConta .eg-ac-nav li a svg{width:18px;height:18px;flex-shrink:0;color:var(--eg-muted);transition:.15s ease}
#egConta .eg-ac-nav li a:hover{background:var(--eg-g50);color:var(--eg-brand-dark)}
#egConta .eg-ac-nav li a:hover svg{color:var(--eg-brand)}
#egConta .eg-ac-nav li.is-active a{background:var(--eg-brand);color:#fff;font-weight:600}
#egConta .eg-ac-nav li.is-active a svg{color:#fff}
#egConta .eg-ac-nav li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--eg-muted)}
#egConta .eg-ac-nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{color:var(--eg-danger)}
#egConta .eg-ac-nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover svg{color:var(--eg-danger)}

/* ---------- conteúdo ---------- */
#egConta .eg-ac-conteudo{
	background:#fff;
	border:1px solid var(--eg-line);
	border-radius:var(--eg-r-card);
	box-shadow:var(--eg-shadow);
	padding:32px 30px;
	min-width:0;
}
#egConta .eg-ac-topo{margin-bottom:24px}
#egConta .eg-ac-topo h1{
	font-family:var(--eg-display);font-size:26px;font-weight:600;
	color:var(--eg-ink);margin:0 0 6px;line-height:1.25;
}
#egConta .eg-ac-topo p{font-size:14.5px;color:var(--eg-muted);margin:0;line-height:1.55}

/* último pedido */
#egConta .eg-ac-pedido{
	border:1px solid var(--eg-line);border-radius:14px;
	padding:18px 20px;margin-bottom:24px;background:var(--eg-sand);
}
#egConta .eg-ac-pedido-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#egConta .eg-ac-rotulo{
	font-family:var(--eg-body);font-size:11px;font-weight:700;
	letter-spacing:1.6px;text-transform:uppercase;color:var(--eg-muted);
}
#egConta .eg-ac-status{
	font-family:var(--eg-body);font-size:11.5px;font-weight:700;
	padding:4px 10px;border-radius:20px;background:var(--eg-g50);color:var(--eg-brand);
}
#egConta .eg-ac-status--completed{background:#e3f0e8;color:var(--eg-success)}
#egConta .eg-ac-status--processing{background:var(--eg-g50);color:var(--eg-brand)}
#egConta .eg-ac-status--on-hold,
#egConta .eg-ac-status--pending{background:#f7eedc;color:#a8781a}
#egConta .eg-ac-status--cancelled,
#egConta .eg-ac-status--failed,
#egConta .eg-ac-status--refunded{background:#f7e6e2;color:var(--eg-danger)}
#egConta .eg-ac-pedido-linha{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#egConta .eg-ac-pedido-linha b{display:block;font-family:var(--eg-body);font-size:16px;font-weight:700;color:var(--eg-ink)}
#egConta .eg-ac-pedido-linha span{font-size:13px;color:var(--eg-muted)}
#egConta .eg-ac-pedido-total{font-family:var(--eg-display);font-size:20px;font-weight:700;color:var(--eg-brand-dark);font-variant-numeric:tabular-nums}
#egConta .eg-ac-pedido .eg-ac-btn{margin-top:14px}

/* atalhos */
#egConta .eg-ac-atalhos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#egConta .eg-ac-atalho{
	display:block;padding:18px 16px;border:1px solid var(--eg-line);border-radius:14px;
	text-decoration:none;transition:.15s ease;background:#fff;
}
#egConta .eg-ac-atalho:hover{border-color:var(--eg-g200);box-shadow:0 6px 20px rgba(6,58,49,.08);transform:translateY(-2px)}
#egConta .eg-ac-atalho-ic{
	width:38px;height:38px;border-radius:10px;background:var(--eg-g50);color:var(--eg-brand);
	display:grid;place-items:center;margin-bottom:12px;
}
#egConta .eg-ac-atalho-ic svg{width:19px;height:19px}
#egConta .eg-ac-atalho b{display:block;font-family:var(--eg-body);font-size:14.5px;font-weight:650;color:var(--eg-ink);margin-bottom:2px}
/* :not() é necessário: sem ele este seletor (1,1,1) vence a regra da
   caixa do ícone (1,1,0) e a transforma em display:block, jogando o
   SVG para o canto superior esquerdo. */
#egConta .eg-ac-atalho > span:not(.eg-ac-atalho-ic){display:block;font-size:12.5px;color:var(--eg-muted);line-height:1.45}

/* estado vazio */
#egConta .eg-ac-vazio{text-align:center;padding:34px 20px;border:1px dashed var(--eg-line);border-radius:14px;margin-bottom:24px}
#egConta .eg-ac-vazio-ic{width:56px;height:56px;border-radius:50%;background:var(--eg-g50);color:var(--eg-brand);display:grid;place-items:center;margin:0 auto 14px}
#egConta .eg-ac-vazio-ic svg{width:25px;height:25px}
#egConta .eg-ac-vazio h3{font-family:var(--eg-body);font-size:16px;font-weight:650;margin:0 0 5px;color:var(--eg-ink)}
#egConta .eg-ac-vazio p{font-size:13.5px;color:var(--eg-muted);margin:0 0 16px}

/* botões */
#egConta .eg-ac-btn{
	display:inline-block;border:none;border-radius:var(--eg-r-btn);
	padding:12px 22px;font-family:var(--eg-body);font-size:14.5px;font-weight:650;
	cursor:pointer;text-decoration:none;transition:.15s ease;
}
#egConta .eg-ac-btn--main{background:var(--eg-brand);color:#fff}
#egConta .eg-ac-btn--main:hover,#egConta .eg-ac-btn--main:focus{background:var(--eg-brand-dark);color:#fff}
#egConta .eg-ac-btn--ghost{background:#fff;color:var(--eg-brand-dark);border:1.5px solid var(--eg-line)}
#egConta .eg-ac-btn--ghost:hover,#egConta .eg-ac-btn--ghost:focus{background:#fff;border-color:var(--eg-g200)}

#egConta .eg-ac-ajuda{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--eg-line);font-size:13.5px;color:var(--eg-muted);text-align:center}
#egConta .eg-ac-ajuda a{color:var(--eg-brand);font-weight:650;text-decoration:none;border-bottom:1.5px solid var(--eg-g200)}
#egConta .eg-ac-ajuda a:hover{color:var(--eg-brand-dark);border-bottom-color:var(--eg-brand)}

/* ---------- tabelas e formulários das outras abas ---------- */
#egConta table.shop_table,
#egConta table.woocommerce-orders-table{
	width:100%;border-collapse:collapse;border:1px solid var(--eg-line);
	border-radius:12px;overflow:hidden;font-size:14px;margin:0;
}
#egConta table.shop_table th{
	background:var(--eg-sand);font-family:var(--eg-body);font-size:11.5px;
	font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--eg-muted);
	padding:12px 14px;text-align:left;border:none;
}
#egConta table.shop_table td{padding:14px;border:none;border-top:1px solid var(--eg-line);color:var(--eg-ink2)}
#egConta table.shop_table .woocommerce-orders-table__cell-order-number a{color:var(--eg-brand);font-weight:650;text-decoration:none}
#egConta .woocommerce-Message,
#egConta .woocommerce-info{border-top-color:var(--eg-brand);border-radius:var(--eg-r-input)}
#egConta .woocommerce-Address{margin-bottom:20px}
#egConta .woocommerce-Address-title h3{font-family:var(--eg-display);font-size:17px;font-weight:600;margin:0}
#egConta form .form-row{margin:0 0 16px}
#egConta form label{display:block;font-family:var(--eg-body);font-size:13.5px;font-weight:600;color:var(--eg-ink2);margin-bottom:7px}
#egConta form input[type="text"],
#egConta form input[type="email"],
#egConta form input[type="tel"],
#egConta form input[type="password"],
#egConta form select{
	width:100%;box-sizing:border-box;border:1.5px solid var(--eg-line);
	border-radius:var(--eg-r-input);padding:12px 14px;
	font-family:var(--eg-body);font-size:15px;background:#fff;
}
#egConta form input:focus,#egConta form select:focus{border-color:var(--eg-brand);box-shadow:0 0 0 3px var(--eg-g50);outline:none}
#egConta form button.button,
#egConta .woocommerce-Button{
	background:var(--eg-brand);color:#fff;border:none;border-radius:var(--eg-r-btn);
	padding:13px 24px;font-family:var(--eg-body);font-size:14.5px;font-weight:650;cursor:pointer;float:none;
}
#egConta form button.button:hover,
#egConta .woocommerce-Button:hover{background:var(--eg-brand-dark);color:#fff}

/* ---------- responsivo ---------- */
@media(max-width:860px){
	#egConta{grid-template-columns:1fr;gap:18px;padding:28px 0 56px}
	#egConta .eg-ac-lado{position:static}
	#egConta .eg-ac-nav ul{flex-direction:row;flex-wrap:wrap;gap:6px}
	#egConta .eg-ac-nav li a{padding:9px 12px;font-size:13.5px}
	#egConta .eg-ac-conteudo{padding:24px 20px}
	#egConta .eg-ac-atalhos{grid-template-columns:1fr}
	#egConta table.shop_table{display:block;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
	#egConta .eg-ac-atalho,#egConta .eg-ac-btn,#egConta .eg-ac-nav li a{transition:none!important}
}

/* O WooCommerce monta a área da conta em duas colunas com float:
   `.woocommerce-account .woocommerce-MyAccount-content{float:right;width:73.47%}`
   e `.woocommerce-MyAccount-navigation{float:left;width:22.5%}` — (0,2,0).
   Como aqui o layout é grid, esses floats encolhiam o conteúdo e o menu.
   Anular explicitamente: escopar no ID não basta se a propriedade não for declarada. */
#egConta .eg-ac-conteudo,
#egConta .woocommerce-MyAccount-content{float:none;width:auto;max-width:none}
#egConta .eg-ac-lado,
#egConta .eg-ac-nav,
#egConta .woocommerce-MyAccount-navigation{float:none;width:auto;max-width:none}
#egConta::after{content:"";display:table;clear:both}

/* ---------- aba Endereços ----------
   O WooCommerce monta duas colunas com float e usa <h2> no título de cada
   endereço, que o style.css do tema renderiza em 32px. Vira grid + cartão. */
#egConta .woocommerce-Addresses,
#egConta .col2-set{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
#egConta .woocommerce-Address{float:none;width:auto;border:1px solid var(--eg-line);border-radius:14px;padding:20px}
#egConta .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#egConta .woocommerce-Address-title h2{font-family:var(--eg-display);font-size:16px;font-weight:600;color:var(--eg-ink);margin:0;line-height:1.3}
#egConta .woocommerce-Address-title a.edit{
	font-family:var(--eg-body);font-size:12.5px;font-weight:650;color:var(--eg-brand);
	text-decoration:none;white-space:nowrap;border:1.5px solid var(--eg-line);
	border-radius:8px;padding:6px 12px;transition:.15s ease;
}
#egConta .woocommerce-Address-title a.edit:hover{border-color:var(--eg-brand);background:var(--eg-g50)}
#egConta .woocommerce-Address address{font-style:normal;font-size:14px;line-height:1.7;color:var(--eg-ink2);margin:0}
#egConta > .eg-ac-conteudo > p:first-child{font-size:14px;color:var(--eg-muted)}

/* ---------- aba Detalhes da conta ---------- */
#egConta fieldset{border:1px solid var(--eg-line);border-radius:14px;padding:18px 20px;margin:8px 0 20px}
#egConta fieldset legend{
	font-family:var(--eg-body);font-size:12px;font-weight:700;letter-spacing:1.2px;
	text-transform:uppercase;color:var(--eg-muted);padding:0 8px;
}
#egConta .woocommerce-form-row--first,
#egConta .woocommerce-form-row--last{display:inline-block;width:calc(50% - 8px);vertical-align:top}
#egConta .woocommerce-form-row--first{margin-right:14px}
#egConta em{font-style:normal;font-size:12.5px;color:var(--eg-muted);display:block;margin-top:5px}

@media(max-width:860px){
	#egConta .woocommerce-Addresses,
	#egConta .col2-set{grid-template-columns:1fr}
	#egConta .woocommerce-form-row--first,
	#egConta .woocommerce-form-row--last{display:block;width:100%;margin-right:0}
}

/* O WooCommerce usa clearfix (`::before`/`::after` com display:table) no
   .col2-set. Como aqui o container virou grid, esses pseudo-elementos
   passam a contar como itens da grade e jogam os cartões na diagonal. */
#egConta .woocommerce-Addresses::before,
#egConta .woocommerce-Addresses::after,
#egConta .col2-set::before,
#egConta .col2-set::after{content:none;display:none}
#egConta .woocommerce-Address-title{flex-wrap:wrap}
#egConta .woocommerce-Address-title h2{flex:1 1 auto;min-width:0}