/*
 * Ajustes da loja sobre o tema Pillar nas páginas Sobre, Como comprar e área de
 * empresas (não é arquivo do tema). Só o que o tema não cobre.
 */

/* Formulários das empresas: grade de 12 colunas a partir do tablet
   (o tema só tem campo por linha). Cada campo diz a largura em --pillar-col. */
.pillar-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem 1.6rem;
}

.pillar-form-grid > .form-field {
  grid-column: span 12;
  margin: 0;
}

@media (min-width: 768px) {
  .pillar-form-grid > .pillar-form-col {
    grid-column: span var(--pillar-col, 12);
  }
}

.customer form > .form-field.pillar-form-col + .form-field {
  margin-top: 2rem;
}

.pillar-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.pillar-fieldset + .pillar-fieldset {
  margin-top: 3.2rem;
}

.pillar-fieldset__titulo {
  padding: 0;
  margin: 0 0 1.6rem;
}

.pillar-checkbox {
  margin-top: 0.8rem;
}

.pillar-checkbox label {
  cursor: pointer;
}

/* Alertas do tema com ícone + texto */
.customer .alert {
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 1.6rem;
}

.customer .alert--success {
  background-color: rgba(13, 135, 86, 0.1);
  color: #0d8756;
}

.customer .alert--warning {
  background-color: rgba(var(--color-primary), 0.1);
  color: rgb(var(--color-foreground));
}

.customer .alert a {
  color: inherit;
}

.customer .alert + form,
.customer .alert + .customer__body {
  margin-top: 2.4rem;
}

/* Botões só-link fora de <form> (confirmar e-mail, senha redefinida) */
.pillar-acoes {
  margin-top: 2.4rem;
}

.pillar-cadastro-ok {
  margin-top: 2.4rem;
  padding: 2.4rem;
  background-color: rgb(var(--color-secondary-background));
}

.pillar-cadastro-ok p {
  margin: 0;
}

/* Conta: status do pedido */
.pillar-status {
  background-color: rgb(var(--color-secondary-background));
  color: rgb(var(--color-foreground));
}

.customer__widget p {
  word-break: break-word;
}

/* Sobre: conteúdo vindo do editor do admin */
.loja-sobre__texto {
  max-width: 76rem;
  margin-inline: auto;
}

.loja-sobre__texto > * + * {
  margin-top: 1.2rem;
}

.loja-sobre__texto ul,
.loja-sobre__texto ol {
  padding-inline-start: 2rem;
  text-align: start;
}

.rich-text--standard .loja-sobre__texto {
  text-align: start;
}

/* Como comprar: ícone do passo (SVG de traço 24x24) e CTA */
.pillar-passo {
  padding: 3.2rem 2.4rem;
  background-color: rgb(var(--color-secondary-background));
}

.pillar-passo__marca {
  width: 5.6rem;
  height: 5.6rem;
  padding: 1.2rem;
  border-radius: 50%;
  background-color: rgb(var(--color-background));
}

.pillar-passo__icone {
  width: 100%;
  height: 100%;
}

.pillar-passo .rich-text__subheading {
  margin-top: 1.6rem;
}

.loja-como-comprar__passos {
  margin: 0;
  padding: 0;
}

.pillar-como-comprar__cta {
  margin-top: 4rem;
}

/* Títulos do texto do admin com a tipografia de título do tema */
.loja-sobre__texto :is(h2, h3, h4) {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  color: rgb(var(--color-text-heading, var(--color-foreground)));
  line-height: 1.3;
  margin-top: 2.4rem;
}

.loja-sobre__texto h2 {
  font-size: calc(var(--font-heading-scale, 1) * 2.4rem);
}

.loja-sobre__texto h3 {
  font-size: calc(var(--font-heading-scale, 1) * 2rem);
}

.loja-sobre__texto h4 {
  font-size: calc(var(--font-heading-scale, 1) * 1.8rem);
}

/* Cadastro de empresa: o tema limita .register a 50rem, estreito para 2 colunas.
   Login, activate e reset-password seguem a coluna estreita do tema. */
.register .section__wrapper {
  max-width: 80rem;
}

@media (min-width: 768px) {
  .register .section__wrapper {
    padding: 0 3rem;
  }
}