/* Mariana Rui, paginas avulsas da loja nova. 22/10/2026.
   Ajuda, busca, conta, contato, cantinho e gaveta de favoritos, no desenho
   do prototipo. Usa os tokens e as classes do mr-loja.css. */

/* ------------------------------------------------------------------ ajuda */
.mr-ajuda{padding-bottom:var(--e8)}
.mr-ajuda-topo{padding:48px 0 32px;max-width:56ch}
.mr-ajuda-topo .titulo{margin:12px 0 16px}
.mr-ajuda .faq-item{scroll-margin-top:140px}
.mr-ajuda .faq-corpo a:not(.botao-vazado){text-decoration:underline;text-underline-offset:3px}
.mr-ajuda .faq-corpo a.link-texto{text-decoration:none}
.mr-ajuda-pe{margin-top:48px}
.mr-guia{margin-top:var(--e4);scroll-margin-top:140px}
.mr-guia-rotulo{margin-bottom:16px}
.mr-guia table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.mr-guia th,.mr-guia td{text-align:left;padding:var(--e3) 0;border-bottom:1px solid var(--linha)}
.mr-guia th{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grafite)}
.mr-guia .mr-guia-fim{margin-top:20px}
.mr-guia-caixa-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mr-guia-caixa-topo .titulo{font-size:1.5rem}
.mr-guia-caixa .mr-guia{margin-top:0}
.mr-modal .botao-linha{font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--linha-forte);padding:0 0 3px;cursor:pointer;color:var(--tinta)}

/* ------------------------------------------------------------------ busca */
.mr-busca{padding-bottom:var(--e5)}
.mr-busca-topo{padding:48px 0 32px;max-width:680px}
.mr-busca-topo .titulo{margin:12px 0 24px}
.mr-busca-form{margin:0}
.mr-busca-form .entrada{-webkit-appearance:none;appearance:none;border-radius:0;box-shadow:none}
.mr-busca-conta{margin:0 0 24px}
.mr-busca .vazio{margin-bottom:var(--e6)}
.mr-busca-atalhos{margin-top:8px;padding-bottom:var(--e7)}
.mr-busca-atalhos .rotulo{margin-bottom:16px}
.template-search .category-body{padding-top:0}

/* -------------------------------------------------------- conta e contato
   So aparencia: os formularios e a logica continuam os da plataforma. */
.mr-pagina-cabeca{margin-bottom:var(--e6)}
.account-page,.contact-page,.account-page p,.contact-page p{font-family:var(--fonte);color:var(--tinta)}
.account-page .form-label,.contact-page .form-label{
  display:block;margin-bottom:var(--e2);
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grafite);
}
.account-page .form-control,.contact-page .form-control{
  width:100%;min-height:50px;padding:0 var(--e4);
  border:1px solid var(--linha);border-radius:0;background:var(--papel);box-shadow:none;
  font:inherit;font-size:15px;letter-spacing:.02em;color:var(--tinta);
}
.account-page textarea.form-control,.contact-page textarea.form-control{padding:var(--e3) var(--e4);min-height:160px}
.account-page select.form-control,.contact-page select.form-control{-webkit-appearance:none;appearance:none}
.account-page .form-control:focus,.contact-page .form-control:focus{border-color:var(--tinta);outline:none;box-shadow:none}
.account-page .form-control::placeholder,.contact-page .form-control::placeholder{color:var(--linha-forte)}
.account-page .form-group,.contact-page .form-group{margin-bottom:var(--e5)}
.account-page .btn-primary,.contact-page .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:54px;padding:0 var(--e6);width:100%;border-radius:0;box-shadow:none;
  background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);
  font-family:var(--fonte);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.account-page .btn-primary:hover,.account-page .btn-primary:focus,
.contact-page .btn-primary:hover,.contact-page .btn-primary:focus{background:var(--papel);color:var(--tinta);border-color:var(--tinta)}
.account-page .btn-secondary{
  border-radius:0;box-shadow:none;background:transparent;color:var(--tinta);border:1px solid var(--tinta);
  font-family:var(--fonte);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.account-page .btn-link,.contact-page .btn-link{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.account-page h2,.account-page h4,.account-page .h6{font-family:var(--fonte);font-weight:300;letter-spacing:-.005em}
.account-page .alert{border-radius:0}
.contact-page .contact-title-new{
  margin:var(--e5) 0 var(--e2);font-family:var(--fonte);
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grafite);
}
.contact-page .contact-title-new:first-of-type{margin-top:0}
.contact-page .contact-text{color:var(--grafite);font-size:15px;line-height:1.7}
.contact-page .link-contact{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------- cantinho da revendedora
   A vitrine vira o topo (mr-paginas.js); a cabeca da categoria e o Ordenar
   saem. O :has esconde antes do script, para nao piscar. */
body:has(#mr-vitrine) .mr-cat-cabeca,
body:has(#mr-vitrine) .mr-joias-cabeca,
body:has(#mr-vitrine) .mr-joias-conta,
body:has(#mr-vitrine) .mr-cat-ordenar,
body:has(#mr-vitrine) .js-category-controls,
html.mr-cantinho .mr-cat-cabeca,
html.mr-cantinho .mr-joias-cabeca,
html.mr-cantinho .mr-joias-conta,
html.mr-cantinho .mr-cat-ordenar,
html.mr-cantinho .js-category-controls{display:none !important}
html.mr-cantinho .js-product-table .mr-sem-estoque{display:none !important}
.mr-rv-mais{padding-top:var(--e7);border-top:1px solid var(--linha);width:100%;font-family:var(--fonte)}
.mr-rv-mais .rotulo{margin-bottom:var(--e3)}

/* ------------------------------------------------------ gaveta de favoritos */
.mr-gaveta-texto{margin:0 0 var(--e5);font-size:14px}
.mr-gaveta-soma{margin:0 0 var(--e5)}
.mr-gaveta-caixa-vazia{padding:var(--e7) var(--e4)}