/* Atacado Charlots: entrada da conta no header, preço (ou cadeado) nos produtos
   e as páginas do lojista. Mesmos tokens do resto do site — o bege da seção
   "onde comprar", os campos do filtro do catálogo, o escuro dos botões. */

/* Header: a conta mora ao lado do "Fale conosco" e é um .btn-outline de verdade, para
   ter o mesmo hover dos outros botões (o fundo escuro que sobe e o rótulo que rola,
   montados pelo motion.js). Sem cor própria aqui: o claro do hover vem do .btn-outline.
   O motion.js move o ícone para dentro de um <span>, por isso "i" e não ">i".
   No mobile vira um círculo ao lado do menu, com o rótulo só para leitor de tela. */
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn.header-conta { gap:8px; min-height:48px; padding:0 20px 0 16px; font-size:14px; line-height:1; white-space:nowrap; }
.header-conta i { font-size:19px; }
/* Na própria página (entrar / minha conta) o botão só ganha borda escura e fundo branco:
   preto ao lado do "Fale conosco" pesava, e o hover sumia com o fundo antes do preenchimento subir. */
.header-conta.is-ativa { background:#fff; border-color:#1f1f1f; }
.header-conta.is-logado i { color:#80725e; transition:color .45s; }
.header-conta.is-logado:hover i,.header-conta.is-logado:focus-visible i { color:#d8cbb6; }
/* Entre 1000 e 1199 px o menu inteiro ainda cabe, mas sem folga: a conta fica só no ícone. */
@media (max-width:1199px) {
    .btn.header-conta { width:48px; padding:0; }
    .header-conta-rotulo { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media (max-width:999px) {
    .btn.header-conta { width:44px; height:44px; min-height:44px; background:#ffffffb3; }
}

/* Recado da conta (entrou, saiu, e-mail confirmado): faixa no topo do conteúdo,
   irmã do aviso de troca de marca. */
.conta-aviso { background:#e9e4da; border-bottom:1px solid #ddd5c7; }
.conta-aviso>.container { display:flex; align-items:center; gap:14px; padding-block:14px; }
.conta-aviso>.container>i { font-size:20px; color:#80725e; flex-shrink:0; }
.conta-aviso p { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.55; color:#4f483d; }
.conta-aviso-fechar {
    display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; padding:0;
    border:1px solid #d3c9b8; border-radius:50%; background:none; color:#6f6657; font-size:15px;
    transition:background .35s,color .35s,border-color .35s;
}
.conta-aviso-fechar:hover { background:var(--color-dark); color:#fff; border-color:var(--color-dark); }
@media (max-width:999px) { .conta-aviso-fechar { width:44px; height:44px; } }
/* Fechar o recado leva o foco para o <main> (conta.js): ali o contorno de foco só confundiria. */
#conteudo:focus { outline:none; }

/* Menu mobile: a conta vem antes do WhatsApp, no mesmo formato de botão. */
.mobile-menu-bottom>.mobile-menu-conta { margin-bottom:10px; }
.mobile-menu-bottom>.mobile-menu-conta.is-ativa { background:#fff; border-color:#1f1f1f; }

/* Cartão de produto: preço colado no rodapé, alinhado entre os cartões da fileira. */
.product-copy .product-price {
    display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin-top:auto; padding-top:10px;
    font:500 13px/1.3 var(--font-body); color:#80725e;
}
.product-copy .product-price strong { font:600 20px/1.15 var(--font-heading); letter-spacing:-.02em; color:var(--color-dark); }
.product-copy .product-price+.text-link { margin-top:0; padding-top:4px; }

/* Página do produto: preço do lojista aprovado. */
.detail-copy .atacado-preco {
    display:flex; flex-direction:column; gap:14px; padding:22px 24px;
    border-radius:24px; background:#fff; box-shadow:0 2px 10px #1f1f1f0d;
}
.atacado-preco-topo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.atacado-selo { display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--font-heading); color:#80725e; }
.atacado-selo i { font-size:16px; }
.atacado-preco-valores { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.detail-copy .atacado-preco-item {
    flex:1 1 170px; display:flex; flex-direction:column; gap:6px; margin:0; padding:14px 16px;
    border:1px solid var(--color-border); border-radius:16px; color:var(--color-muted);
    transition:background .45s,border-color .45s,color .45s;
}
.atacado-preco-item>span { font-size:12px; font-weight:600; letter-spacing:.06em; }
.atacado-preco-item>strong,.atacado-preco-consulta { font:600 clamp(26px,2.4vw,34px)/1.05 var(--font-heading); letter-spacing:-.03em; color:var(--color-dark); }
/* Um preço só não precisa de moldura. */
.atacado-preco-valores:not(.tem-premium) .atacado-preco-item { padding:0; border:0; }
/* Com Premium, a cor escolhida acende o preço dela (conta.js). Sem JS, os dois ficam iguais. */
.atacado-preco.is-escolhendo .atacado-preco-item.is-ativo { background:#1f1f1f; border-color:#1f1f1f; color:#c9c4bb; }
.atacado-preco.is-escolhendo .atacado-preco-item.is-ativo>strong { color:#f6f5f3; }
.detail-copy .atacado-preco-nota { font-size:13px; line-height:1.55; }

/* Página do produto: quem não vê preço vê o porquê e o próximo passo. */
.detail-copy .atacado-bloqueado {
    display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px 16px; align-items:start;
    padding:20px 22px; border-radius:24px; background:#eeece8;
}
.atacado-bloqueado-icone { grid-row:span 2; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#80725e; font-size:20px; }
.detail-copy .atacado-bloqueado p { margin:0; font-size:14px; line-height:1.6; color:#5f5f5f; }
.atacado-bloqueado p strong { color:var(--color-dark); }
.atacado-bloqueado-acoes { display:flex; flex-wrap:wrap; gap:10px; }
.atacado-bloqueado .btn { padding:12px 20px; font-size:13px; }

/* Catálogo: faixa do atacado entre o filtro e a contagem. */
.atacado-faixa {
    display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:14px 18px;
    border-radius:16px; background:#eae6de; font-size:14px; line-height:1.55; color:#5f574a;
}
.atacado-faixa>i { flex-shrink:0; font-size:20px; color:#80725e; }
.atacado-faixa a,.conta-rodape a,.conta-check a { color:var(--color-dark); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.atacado-faixa a:hover,.conta-rodape a:hover,.conta-check a:hover { text-decoration-thickness:2px; }
.atacado-faixa.is-aprovado { background:#fff; box-shadow:0 2px 10px #1f1f1f0d; }

/* ---------- Páginas da conta ---------- */
.conta-grid { display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,32vw,440px); gap:clamp(28px,5vw,88px); align-items:start; }
/* Páginas de um formulário curto (entrar, senha, confirmação): bloco centrado e
   mais estreito, como as páginas de texto — sem um vão entre o formulário e a lateral. */
.conta-grid.is-compacta { max-width:1080px; margin-inline:auto; grid-template-columns:minmax(0,1fr) clamp(300px,34vw,420px); }
.conta-grid.is-compacta .conta-painel.is-estreito { max-width:none; }
.conta-principal { display:flex; flex-direction:column; gap:20px; min-width:0; }
.conta .page-heading { gap:14px; margin-bottom:8px; }
.conta .page-heading h1 { font-size:clamp(36px,4.3vw,60px); line-height:1.05; }
.conta .page-heading p { font-size:17px; }
.conta .page-heading p strong { color:var(--color-dark); font-weight:600; overflow-wrap:anywhere; }

/* Painel do formulário: o mesmo bege e os mesmos campos do filtro do catálogo. */
.conta-painel { padding:clamp(22px,3vw,36px); border-radius:24px; background:#eeece8; }
.conta-painel.is-estreito { max-width:580px; }
.conta-form { display:flex; flex-direction:column; gap:26px; container-type:inline-size; }
.conta-painel-texto { font-size:15px; line-height:1.65; color:#4a4a4a; max-width:52ch; }
.conta-painel-texto+.conta-acoes { margin-top:20px; }

/* Legenda em float: sem isso o navegador a desenha em cima da borda do fieldset. */
.conta-grupo { min-width:0; margin:0; padding:0; border:0; }
.conta-grupo+.conta-grupo { padding-top:24px; border-top:1px solid #ddd8ce; }
.conta-grupo>legend { float:left; width:100%; margin:0 0 16px; padding:0; font:600 12px/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:#5f5f5f; }
.conta-campos { clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; }
.conta-campos.is-coluna { grid-template-columns:minmax(0,1fr); }
/* Duas colunas de campo só quando o formulário tem largura para isso — medido no
   próprio formulário, não na tela: ao lado da coluna escura ele fica estreito cedo. */
@container (max-width:520px) { .conta-campos { grid-template-columns:minmax(0,1fr); } }
.conta-campo { display:flex; flex-direction:column; gap:8px; min-width:0; }
.conta-campo.is-largo { grid-column:1/-1; }
.conta-campo label { font-size:13px; font-weight:600; color:#2f2f2f; }
/* Link do campo (Esqueci minha senha) depois do input: no Tab, e-mail → senha → link. */
.conta-campo-link { align-self:flex-end; margin-top:-4px; padding-block:6px; font-size:13px; font-weight:600; color:#5f574a; text-decoration:underline; text-underline-offset:3px; }
.conta-opcional { font-weight:500; color:#5f5f5f; }
.conta-dica { font-size:12px; line-height:1.5; color:#5f5f5f; }
/* 16 px no campo: abaixo disso o iPhone dá zoom ao focar. */
.conta-campo input,.conta-campo select {
    width:100%; height:52px; padding:0 18px; border:1px solid var(--color-border); border-radius:14px;
    background:#fff; color:#1f1f1f; font:500 16px/1.2 var(--font-body);
    transition:border-color .3s,box-shadow .3s;
}
.conta-campo input::placeholder { color:#a3a09a; }
.conta-campo input:hover,.conta-campo select:hover { border-color:#1f1f1f40; }
.conta-campo input:focus-visible,.conta-campo select:focus-visible { outline:3px solid #89714e; outline-offset:2px; border-color:#89714e; }
.conta-campo input:user-invalid,.conta-campo select:user-invalid { border-color:#b4533f; }
.conta-campo select {
    -webkit-appearance:none; appearance:none; padding-right:46px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' stroke='%231f1f1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 18px center; background-size:12px 8px;
}
.conta-senha { position:relative; }
.conta-senha input { padding-right:56px; }
.conta-senha-ver {
    position:absolute; top:50%; right:6px; transform:translateY(-50%); width:42px; height:42px;
    display:grid; place-items:center; padding:0; border:0; border-radius:50%;
    background:transparent; color:#5f5f5f; font-size:19px; transition:background .3s,color .3s;
}
.conta-senha-ver:hover { background:#1f1f1f0d; color:var(--color-dark); }
.conta-senha-ver:focus-visible { outline-offset:0; }

/* As duas declarações do cadastro são caixas clicáveis inteiras. */
.conta-declaracoes { display:flex; flex-direction:column; gap:12px; }
.conta-check {
    display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border:1px solid var(--color-border);
    border-radius:16px; background:#fff; font-size:14px; line-height:1.55; color:#3a3a3a; cursor:pointer;
    transition:border-color .3s,background .3s;
}
.conta-check input { flex:0 0 auto; width:20px; height:20px; margin:1px 0 0; accent-color:#1f1f1f; cursor:pointer; }
.conta-check.is-destaque { background:#fbfaf7; border-color:#d7cdbf; }
.conta-check:has(input:checked) { border-color:#1f1f1f59; }
.conta-check strong { color:var(--color-dark); white-space:nowrap; }

/* Armadilha de robô: fora da tela, sem display:none. */
.conta-hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

.conta-acoes { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.conta-acoes>form { display:contents; }
.conta-rodape { font-size:14px; color:#5f5f5f; }

.conta-alerta {
    display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1px solid #e6c9bf;
    border-radius:16px; background:#f8ece8; color:#7a3325; font-size:14px; line-height:1.55;
}
.conta-alerta>i { flex-shrink:0; font-size:20px; margin-top:1px; }
.conta-alerta p { margin:0; }
.conta-alerta:focus { outline:none; }
.conta-alerta:focus-visible { outline:3px solid #89714e; outline-offset:3px; }

/* Coluna lateral: bege claro por padrão, escura quando é a vitrine do atacado. */
.conta-lateral {
    display:flex; flex-direction:column; align-items:flex-start; gap:22px; min-width:0;
    padding:clamp(26px,3vw,40px); border:1px solid #dfdad0; border-radius:28px; background:#eae6de; color:#242424;
}
.conta-lateral .eyebrow { color:#5f574a; }
.conta-lateral>h2 { margin-top:-10px; font-size:clamp(24px,2.3vw,32px); line-height:1.12; letter-spacing:-.03em; }
.conta-lateral p { font-size:14px; line-height:1.6; color:#68625a; }
.conta-lateral.is-escura { border-color:#292929; background:#292929; color:#f6f5f3; }
.conta-lateral.is-escura .eyebrow { color:#c7b8a1; }
.conta-lateral.is-escura p { color:#c2c0ba; }
.conta-lateral.is-escura strong { color:#f6f5f3; }
.conta-lateral strong { white-space:nowrap; }

.conta-etapas,.conta-vantagens { width:100%; margin:0; padding:0; list-style:none; }
.conta-etapas li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:18px 0; border-top:1px solid #ffffff1f; }
.conta-etapas li:last-child { padding-bottom:0; }
.conta-etapa-num { width:36px; height:36px; display:grid; place-items:center; border:1px solid #b9ad9a60; border-radius:50%; font:600 13px/1 var(--font-heading); color:#d8cbb6; }
.conta-etapas h3 { margin-bottom:4px; font-size:17px; letter-spacing:-.01em; }
.conta-vantagens li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; align-items:center; padding:14px 0; border-top:1px solid #24242418; }
.conta-vantagens li>i { width:36px; height:36px; display:grid; place-items:center; border:1px solid #d7cdbf; border-radius:50%; font-size:18px; color:#80725e; }
.is-escura .conta-vantagens li { border-color:#ffffff1f; }
.is-escura .conta-vantagens li>i { border-color:#b9ad9a60; color:#d8cbb6; }

.conta-lateral-destaque { display:flex; align-items:center; gap:12px; width:100%; padding:16px 18px; border-radius:18px; background:#f8f6f1; }
.conta-lateral-destaque>i { flex-shrink:0; font-size:22px; color:#80725e; }
.is-escura .conta-lateral-destaque { background:#ffffff10; }
.is-escura .conta-lateral-destaque>i { color:#d8cbb6; }
.conta-lateral-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font:600 13px/1.3 var(--font-heading); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color .3s; }
.conta-lateral-link:hover { text-decoration-color:currentColor; }
.conta-lateral-link>i { font-size:17px; }
.is-escura .conta-lateral-link { color:#ddc7a5; }

/* Etapas do cadastro, como trilho: feito, agora, depois. */
.conta-passos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; container-type:inline-size; }
.conta-inteira { white-space:nowrap; }
.conta-passos li { display:flex; align-items:center; gap:10px; min-width:0; padding:12px 14px; border-radius:16px; background:#eeece8; font:600 13px/1.3 var(--font-heading); color:#69645b; }
.conta-passo-num { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border:1px solid #cfc8bb; border-radius:50%; font-size:12px; }
.conta-passos li.is-feito { background:#eae5dc; color:#5f574a; }
.conta-passos li.is-feito .conta-passo-num { border-color:#80725e; background:#80725e; color:#fff; }
.conta-passos li.is-atual { background:#1f1f1f; color:#f6f5f3; }
.conta-passos li.is-atual .conta-passo-num { border-color:#ffffff4d; color:#fff; }
/* Estreito, o número sobe e o rótulo ganha a largura inteira do passo. */
@container (max-width:520px) { .conta-passos li { flex-direction:column; align-items:flex-start; gap:8px; padding:10px 12px; font-size:12px; } }

/* Minha conta: o cartão do status é o centro da página. */
.conta-status { display:flex; flex-direction:column; gap:18px; padding:clamp(24px,3vw,40px); border-radius:28px; background:#fff; box-shadow:0 2px 10px #1f1f1f0d; }
.conta-status-topo { display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; }
.conta-status-icone { width:52px; height:52px; display:grid; place-items:center; border:1px solid #d7cdbf; border-radius:50%; font-size:24px; color:#80725e; }
.conta-status-rotulo { white-space:nowrap; padding:7px 13px; border-radius:var(--radius-full); background:#eae6de; font:600 12px/1 var(--font-heading); letter-spacing:.04em; color:#5f574a; }
.conta-status.is-pendente .conta-status-rotulo { background:#f3e9d8; color:#6e5530; }
.conta-status.is-aprovado .conta-status-icone { border-color:#1f1f1f; background:#1f1f1f; color:#ddc7a5; }
.conta-status.is-aprovado .conta-status-rotulo { background:#1f1f1f; color:#f6f5f3; }
.conta-status.is-recusado .conta-status-rotulo { background:#f3e3df; color:#7a3325; }
.conta-status .conta-acoes { margin-top:4px; }
.conta-status h2 { font-size:clamp(26px,2.7vw,38px); line-height:1.08; letter-spacing:-.03em; }
.conta-status>p { max-width:62ch; font-size:16px; color:var(--color-muted); }
.conta-status>p strong { color:var(--color-dark); font-weight:600; overflow-wrap:anywhere; }
.conta-status .conta-passos li:not(.is-atual):not(.is-feito) { background:#f6f5f3; }

.conta-painel-cabecalho { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; margin-bottom:10px; }
.conta-painel-cabecalho h2 { font-size:clamp(22px,2vw,26px); letter-spacing:-.02em; }
.conta-painel-cabecalho .text-link { min-height:44px; }
.conta-dados dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0; }
.conta-dados dl>div { min-width:0; padding:14px 0; border-top:1px solid #ddd8ce; }
.conta-dados dl>div:last-child:nth-child(odd) { grid-column:1/-1; }
.conta-dados dt { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted); }
.conta-dados dd { margin:5px 0 0; font-size:15px; color:var(--color-dark); overflow-wrap:anywhere; }

.conta-seguranca .conta-form { width:100%; gap:22px; }
.conta-seguranca .conta-alerta { width:100%; }
.conta-seguranca .conta-campo input { border-color:#d8d1c4; }
.conta-sair { width:100%; padding-top:22px; border-top:1px solid #d7cdbf; }

@media (max-width:899px) {
    .conta-grid,.conta-grid.is-compacta { grid-template-columns:minmax(0,1fr); }
    .conta-painel.is-estreito { max-width:none; }
}
@media (max-width:659px) {
    .conta-campos { grid-template-columns:minmax(0,1fr); gap:16px; }
    .conta .page-heading p { font-size:16px; }
    .conta-acoes>.btn,.conta-acoes>form>.btn,.conta-acoes>button { width:100%; }
    .conta-rodape { width:100%; text-align:center; }
    .conta-dados dl { grid-template-columns:minmax(0,1fr); }
    .conta-sair .btn { width:100%; }
    .conta-lateral>.btn { width:100%; }
    .detail-copy .atacado-bloqueado { grid-template-columns:minmax(0,1fr); padding:20px; }
    .atacado-bloqueado-icone { grid-row:auto; width:40px; height:40px; }
    .atacado-bloqueado-acoes .btn { flex:1 1 auto; }
    .detail-copy .atacado-preco { padding:20px; }
    .atacado-faixa { align-items:flex-start; font-size:13px; }
    .atacado-faixa>i { margin-top:1px; }
}
@media (prefers-reduced-motion:reduce) {
    .header-conta,.conta-aviso-fechar,.conta-campo input,.conta-campo select,.conta-check,.detail-copy .atacado-preco-item { transition:none; }
}