/* ---------------------------------------------------------------------------
   ANOVA — etapa 1 do checkout.

   Par do js/anova-checkout.js: o JS junta os dois cards num so, este arquivo diz
   como o resultado aparece.

   ⚠️ TUDO AQUI DEPENDE DE .anova-co-ativo / .anova-co-vazio, postas pelo JS SO
   quando o movimento deu certo. Se o app.js mudar um id e o movimento falhar,
   nenhuma destas regras vale e a tela volta a ser a de hoje, com os produtos
   visiveis. Esconder o card antigo sem essa condicao daria, no dia da mudanca,
   um checkout sem itens — e o cliente descobriria isso na hora de pagar.

   ⚠️ NENHUMA regra toca no `display` de #checkoutProgressiveLine nem de
   #checkoutCupomFixoLine: essas duas linhas tem `style="display:none"` no HTML e
   e o app.js quem as liga quando ha desconto progressivo ou cupom fixo.
   Sobrescrever aqui seria assumir um estado que nao e nosso.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   O card unico
   --------------------------------------------------------------------------- */

/* O card antigo fica so com o titulo "Meus itens" depois que o JS leva a lista
   e o botao embora. */
.anova-co-vazio { display: none; }

/* Uma coluna so, e estreita: a referencia e um cartao centrado, nao um painel
   lateral. Vale so na etapa 1 — na etapa 2 o resumo volta a ser a coluna da
   direita ao lado dos dados pessoais, como e hoje.

   O `:not([data-checkout-step])` cobre o instante antes de o app.js carimbar o
   atributo (ele so escreve dentro de definirEtapaCheckout, app.js:7336). */
#checkoutPage.anova-co-ativo:not([data-checkout-step]) .checkout-layout,
#checkoutPage.anova-co-ativo[data-checkout-step="produtos"] .checkout-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.anova-co-painel {
  gap: 0;
  padding: 26px 26px 22px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio);
  background: var(--anova-branco);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   O titulo

   O .checkout-summary-title existe no HTML e o app.css o esconde; quem aparece
   hoje e a contagem ("Receber N itens em CEP"), que a referencia nao tem. Aqui
   os dois papeis se invertem.

   Serifa porque este e um TITULO QUE ABRE BLOCO, que e exatamente onde o tema
   manda usar serifa (tema-anova.css:172). O nome do produto continua na
   Montserrat, pelo mesmo comentario.
   --------------------------------------------------------------------------- */

.anova-co-painel .checkout-summary-title {
  display: block;
  margin: 0 0 18px;
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--anova-tinta);
}

.anova-co-painel #checkoutProductSummaryCount { display: none; }

/* ---------------------------------------------------------------------------
   A linha do item
   --------------------------------------------------------------------------- */

.anova-co-painel .checkout-items {
  display: block;
  margin: 0;
  padding: 0;
}

.anova-co-painel .checkout-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0 0 18px;
  border: 0;
  background: none;
}

.anova-co-painel .checkout-item > img {
  grid-column: 1;
  width: 48px;
  height: 48px;
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
  object-fit: cover;
  display: block;
}

.anova-co-painel .checkout-item-info {
  grid-column: 2;
  min-width: 0;
}

.anova-co-painel .checkout-item-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--anova-tinta);
}

/* "1x" — escrito pelo JS a partir do .qty-value que ja esta na tela. */
.anova-co-qtd {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--anova-tinta-2);
}

.anova-co-preco {
  grid-column: 3;
  justify-self: end;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--anova-verde-800);
}

/* As duas metas do app.js ("R$ X por unidade" e "Subtotal: R$ X - Yg na cesta")
   saem da tela porque a referencia resume tudo em "1x" mais o preco a direita.
   ESCONDIDAS, nunca removidas: o i18n-extras.js:372 tem .checkout-item-meta na
   lista de exclusao do tradutor, e o JS le o subtotal justamente do <strong>
   que mora dentro delas. Removidas, o preco a direita ficaria vazio. */
.anova-co-painel .checkout-item-meta { display: none; }

/* Lixeira e stepper somem da etapa 1, como na referencia. A quantidade continua
   editavel na gaveta do carrinho, e "Adicionar mais produtos" segue logo abaixo.
   Escondidos por CSS: os tres botoes tem handler inline e continuam vivos. */
.anova-co-painel .checkout-item-lado { display: none; }

/* O aviso de promocao atravessa as tres colunas — mesmo caso do carrinho, onde
   a colocacao automatica o espremia na coluna da miniatura. */
.anova-co-painel .cart-promo-missing {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--anova-tinta-2);
}

/* ---------------------------------------------------------------------------
   "Adicionar mais produtos"
   --------------------------------------------------------------------------- */

.anova-co-painel .checkout-step-actions {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.anova-co-painel #checkoutAddMoreProductsButton {
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--anova-linha-forte);
  border-radius: var(--anova-raio-pilula);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--anova-tinta);
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), background var(--anova-transicao-r);
}

.anova-co-painel #checkoutAddMoreProductsButton:hover {
  border-color: var(--anova-verde-700);
  background: var(--green-soft);
}

/* ---------------------------------------------------------------------------
   Subtotal, Entrega, Total
   --------------------------------------------------------------------------- */

.anova-co-painel .checkout-product-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--anova-linha-n);
}

.anova-co-painel .checkout-product-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--anova-tinta-2);
}

.anova-co-painel .checkout-product-summary-line strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--anova-tinta-2);
}

/* O total ganha o filete de cima, o corpo maior e o verde — e a unica linha que
   a pessoa precisa achar sem procurar. */
.anova-co-painel .checkout-product-summary-line.total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--anova-linha-n);
  font-size: 19px;
  font-weight: 600;
  color: var(--anova-tinta);
}

.anova-co-painel .checkout-product-summary-line.total strong {
  font-size: 19px;
  font-weight: 600;
  color: var(--anova-verde-800);
}

/* ---------------------------------------------------------------------------
   "Continuar pagamento"
   --------------------------------------------------------------------------- */

.anova-co-painel #checkoutProductSummaryContinueButton {
  width: 100%;
  margin-top: 20px;
  padding: 15px 20px;
  border: 1px solid var(--anova-verde-800);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-verde-800);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--anova-branco);
  cursor: pointer;
  transition: background var(--anova-transicao-r), border-color var(--anova-transicao-r);
}

.anova-co-painel #checkoutProductSummaryContinueButton:hover {
  background: var(--anova-verde-700);
  border-color: var(--anova-verde-700);
}

.anova-co-painel #checkoutProductSummaryContinueButton:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Etapa 2

   Na etapa "dados" o painel continua sendo a coluna da direita, ao lado dos
   dados pessoais — como e hoje. A lista de itens e o "Adicionar mais produtos"
   ficam de fora dela: sao acao de revisao, e a etapa 2 nao e o lugar de mexer
   no que se esta comprando.
   --------------------------------------------------------------------------- */

#checkoutPage[data-checkout-step="dados"] .anova-co-painel .checkout-items,
#checkoutPage[data-checkout-step="dados"] .anova-co-painel .checkout-step-actions {
  display: none;
}

/* ---------------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .anova-co-painel {
    padding: 20px 18px 18px;
  }

  .anova-co-painel .checkout-item {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .anova-co-painel .checkout-item > img {
    width: 44px;
    height: 44px;
  }
}