/* Páginas de login e de cadastro (Pages/login e Pages/register; usuário, 26/10/2026: "a foto de fundo maior, ocupando
   toda a parte esquerda da tela, e os demais itens na parte direita, a foto passando por baixo do form de newsletter";
   e "aplique essas mesmas modificações na tela de cadastro").
   Computador: grade de duas colunas de borda a borda. A foto (banner da posição 66, 960 × 1080) preenche a coluna
   esquerda com object-fit: cover e a conta fica centrada na direita. O rodapé roxo começa colado na grade (sem a margem
   de 4rem de sempre, que deixava uma faixa clara entre a foto e o rodapé) e o cartão da newsletter sobe 8rem (em vez
   de 4rem): uns 6rem de foto passam por baixo dele; a coluna da conta guarda 12rem embaixo, para o cartão não cobrir
   os links. Celular: a conta primeiro, a foto embaixo em largura total (sem corte) e o cartão 5rem acima, sobre o pé
   da foto. O miolo (h1, formulário, links) e o CSS antigo do formulário (styles.css) não mudam. */
body.LoginRoute #content,
body.AccountRegisterRoute #content {
  padding-bottom: 0;
}

.jv-login-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.jv-login-pagina__conta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--jv-space-8) var(--jv-space-4) var(--jv-space-12);
}

.jv-login-pagina__miolo {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

/* Bloco centrado (usuário, 26/10/2026, com print): o convite para criar conta e o aviso dos termos ficam centrados
   como o título; o aviso é mais largo que o formulário e saía alinhado à esquerda. */
.jv-login-pagina__miolo .register,
.jv-login-pagina__miolo .politics {
  text-align: center;
}

.jv-login-pagina__foto {
  position: relative;
  order: 2;
  overflow: hidden;
}

.jv-login-pagina__foto img {
  display: block;
  width: 100%;
  max-width: none;
}

/* O rodapé encosta na grade e o cartão da newsletter sobe, por cima do pé da foto. */
body.LoginRoute #footer,
body.AccountRegisterRoute #footer {
  margin-top: 0;
}

body.LoginRoute #footer .footer-newsletter .wp,
body.AccountRegisterRoute #footer .footer-newsletter .wp {
  position: relative;
  z-index: 1;
  margin-top: -5rem;
}

@media (min-width: 1024px) {
  .jv-login-pagina {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); /* a foto com 55% da largura e a grade mais alta (usuário, 26/10/2026: "pode aumentar mais a área da imagem") */
    min-height: 52rem;
  }

  .jv-login-pagina__foto {
    order: 0;
  }

  /* O banner da Linx vem em caixas aninhadas (widget > swiper > lista > slide > img): a de fora cobre a coluna e as de
     dentro ocupam 100%, para a foto preencher a altura inteira. */
  .jv-login-pagina__foto .wd-marketing-banner {
    position: absolute;
    inset: 0;
  }

  .jv-login-pagina__foto .swiper,
  .jv-login-pagina__foto .list,
  .jv-login-pagina__foto .swiper-slide {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .jv-login-pagina__foto img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .jv-login-pagina__conta {
    padding: var(--jv-space-16) var(--jv-space-8) 12rem;
  }

  body.LoginRoute #footer .footer-newsletter .wp,
  body.AccountRegisterRoute #footer .footer-newsletter .wp {
    margin-top: -8rem;
  }
}

/* Título "Entre ou crie a sua conta" e o botão "Criar conta" abaixo do "Entrar" (CRM → DEV, 30/10/2026: uma cliente não
   achou onde se cadastrar). O título é mais longo que "Minha Conta": tamanho menor, para não virar três linhas no celular.
   O bloco do botão tem a largura do formulário (500px no computador, 100% no celular) e o botão só com o contorno verde
   (a linha "Primeira vez no Joias VIP?" saiu a pedido do usuário, 30/10/2026), da altura do "Entrar" (40px, CSS antigo). O "Não tem conta? Crie aqui"
   de cima fica. */
.jv-login-pagina__miolo .jv-login-pagina__titulo {
  font-size: 2rem; /* 32 */
  line-height: var(--jv-leading-heading);
}

.jv-login-pagina__criar {
  box-sizing: border-box;
  width: 100%;
  max-width: 31.25rem; /* 500px, a largura do formulário no computador */
  margin: calc(-1 * var(--jv-space-4)) auto 0; /* mais perto do "Entrar" do que o respiro de 2rem entre os blocos */
  text-align: center;
}


.jv-login-pagina__criar-botao {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem; /* 40, como o "Entrar" */
  padding: 0 var(--jv-space-5);
  border: 1.5px solid var(--jv-color-action);
  border-radius: var(--jv-radius-pill);
  background: transparent;
  color: var(--jv-color-text);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--jv-duration-fast) var(--jv-ease), border-color var(--jv-duration-fast) var(--jv-ease), color var(--jv-duration-fast) var(--jv-ease);
}

@media (hover: hover) {
  .jv-login-pagina__criar-botao:hover {
    border-color: var(--jv-color-accent);
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

@media (min-width: 64rem) {
  .jv-login-pagina__miolo .jv-login-pagina__titulo {
    font-size: 2.5rem; /* 40 */
  }
}

/* Convite mais perto do título (usuário, 30/10/2026): o miolo tem 2rem entre os blocos; aqui fica 1rem. */
.jv-login-pagina__convite {
  margin-top: calc(-1 * var(--jv-space-4));
}

/* O formulário da Linx (widget profile_login) tem 300px de largura mínima e 327px de conteúdo no celular, e 500px de
   mínima no computador: de 390 a 1023px o "Entrar" ficava mais estreito que o "Criar conta", e a 1024px mais largo que
   a coluna. Agora o formulário ocupa a coluna, até 500px, igual ao bloco do "Criar conta" (usuário, 30/10/2026: "o tamanho
   do botão deixar do mesmo tamanho"). */
body.LoginRoute .jv-login-pagina__miolo .wd-profile-login[data-widget=profile_login] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 31.25rem;
}