/* ==========================================================================
   ANOVA — o carrinho lateral.
   --------------------------------------------------------------------------
   (03/09) Arquivo NOVO, so da ANOVA, entregue pelo bloco MARCA:carrinho.
   Par do js/anova-carrinho.js: o JS diz O QUE esta na tela (a classe
   `esta-vazio` e o conteudo do bloco), este arquivo diz COMO isso aparece.

   DEPENDE de css/tema-anova.css pelos tokens --anova-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O cabecalho
   --------------------------------------------------------------------------
   Serifa no titulo e filete embaixo: e o mesmo par que separa cabecalho de
   conteudo no resto da loja ANOVA.
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--anova-linha-n);
}

.cart-sidebar .cart-header h2 {
  margin: 0;
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--anova-tinta);
}

/* O "x" vira circulo de contorno, como o do modal e o do resto do tema. */
.cart-sidebar .cart-header button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--anova-linha-n);
  border-radius: 50%;
  background: var(--anova-branco);
  font-size: 16px;
  line-height: 1;
  color: var(--anova-tinta-2);
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), color var(--anova-transicao-r);
}

.cart-sidebar .cart-header button:hover {
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-800);
}

.cart-sidebar .cart-header button:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  /* O tema tem `button:focus-visible { border-radius: 6px }`, que e (0,1,1) e
     venceria o (0,1,0) da regra base. Este seletor e (0,2,1) e devolve o
     circulo — senao o botao viraria quadrado a cada Tab. */
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   O pedido vazio
   --------------------------------------------------------------------------
   Centralizado na vertical, e nao encostado no topo: com o rodape de valores
   escondido sobra o painel inteiro, e um texto solto no alto ficaria a esmo. O
   `min-height` sai de 100% menos a altura do cabecalho.
   -------------------------------------------------------------------------- */

.cart-sidebar.esta-vazio .cart-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.cart-sidebar.esta-vazio .cart-empty {
  max-width: 30ch;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.anova-carrinho-vazio-icone {
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  fill: none;
  stroke: var(--anova-linha-forte);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.anova-carrinho-vazio-titulo {
  margin: 0 0 10px;
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--anova-tinta);
}

.anova-carrinho-vazio-texto {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--anova-tinta-2);
  text-wrap: pretty;
}

/* ==========================================================================
   O CARRINHO COM PRODUTO
   ========================================================================== */

/* --------------------------------------------------------------------------
   A linha do item
   --------------------------------------------------------------------------
   Grade de duas colunas: a miniatura atravessa as duas linhas, e o resto empilha
   ao lado dela. A miniatura e a legenda sao acrescentadas pelo js/anova-carrinho.js
   — o app.js nao as monta.
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
  padding: 18px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--anova-linha-n);
  background: none;
}

.cart-sidebar .cart-item:last-child { border-bottom: 0; }

.anova-cart-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
  object-fit: cover;
  display: block;
}

/* Nome a esquerda, preco a direita, "Remover" logo abaixo do preco. */
.cart-sidebar .cart-item-mainline {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
}

.cart-sidebar .cart-item-name {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--anova-tinta);
}

.anova-cart-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--anova-tinta-2);
}

.cart-sidebar .cart-item-price-clean {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--anova-verde-800);
}

/* Movido para ca pelo JS. Vira link, e nao botao: e acao destrutiva e nao deve
   competir com o preco ao lado nem com o stepper abaixo. */
.cart-sidebar .cart-item-mainline .remove-btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: auto;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  /* tinta-2, nao tinta-3: o tema-anova.css:47 diz que tinta-3 e so grafismo, e
     isto e texto — e ainda por cima um controle clicavel. */
  color: var(--anova-tinta-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cart-sidebar .cart-item-mainline .remove-btn:hover { color: #8c3229; }

.cart-sidebar .cart-item-mainline .remove-btn:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   O aviso de promocao e cupom

   Filho direto do .cart-item (app.js:7806), sem regra propria ate aqui — a
   colocacao automatica do grid jogava ele na coluna 1, a de 56px da miniatura,
   e o texto descia uma palavra por linha.

   NAO e escondido: ele diz "faltam Xg para a promocao", "desconto aplicado" e a
   dica do cupom. Some sozinho quando nao ha o que dizer, porque o app.js so
   emite a div quando `textoPromocao` tem conteudo.
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-promo-missing {
  /* Atravessa as duas colunas: e um recado sobre o item inteiro, nao sobre a
     miniatura nem sobre o texto. */
  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);
}

/* --------------------------------------------------------------------------
   O contador de quantidade
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-controls {
  grid-column: 2;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-branco);
}

.cart-sidebar .cart-controls .qty-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--anova-tinta-2);
  cursor: pointer;
  transition: background var(--anova-transicao-r);
}

.cart-sidebar .cart-controls .qty-btn:hover { background: var(--green-soft); }

.cart-sidebar .cart-controls .qty-btn:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 1px;
}

/* `tabular-nums` para a pilula nao mudar de largura ao passar de 1 para 8. */
.cart-sidebar .cart-controls .qty-value {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--anova-tinta);
}

/* --------------------------------------------------------------------------
   O QUE SAI DA GAVETA
   --------------------------------------------------------------------------
   Frete, cupom, barra de desconto e consumo estimado somam quatro blocos entre o
   subtotal e o total, e a referencia nao traz nenhum deles: a gaveta vira um
   resumo, e a decisao acontece no checkout.

   NAO E PERDA DE FUNCAO — conferido antes de esconder: o checkout tem campo de
   cupom proprio (#checkoutCouponInput) e campo de CEP proprio (#checkoutCepInput).
   Quem quiser cupom ou frete continua tendo os dois, uma tela adiante.

   ESCONDIDOS, NUNCA REMOVIDOS: o app.js prende listener no campo de cupom e no
   de CEP, e le os dois pelo id. Escondido, tudo continua vivo.
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-shipping-box,
.cart-sidebar .shipping-section,
.cart-sidebar .coupon-section,
.cart-sidebar .cart-progress-box,
.cart-sidebar .cart-usage-box {
  display: none;
}

/* "Finalizar" e "Finalizar pedido" chamam a MESMA funcao (irParaCheckout) — sao
   dois botoes para a mesma acao. Fica o que ja tem o rotulo da referencia. */
.cart-sidebar .btn-finish { display: none; }

/* --------------------------------------------------------------------------
   O resumo de valores
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-summary-secondary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 13px;
  color: var(--anova-tinta-2);
}

.cart-sidebar .cart-summary-secondary span:last-child {
  font-variant-numeric: tabular-nums;
}

.anova-cart-itens .anova-cart-itens-n { color: var(--anova-verde-800); }

.cart-sidebar .cart-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--anova-linha-n);
  font-size: 19px;
  font-weight: 600;
  color: var(--anova-tinta);
}

.cart-sidebar .cart-summary span:last-child,
.cart-sidebar #cartTotal {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--anova-verde-800);
}

/* --------------------------------------------------------------------------
   O cartao da reserva
   --------------------------------------------------------------------------
   ⚠️ OS `!important` SAO NECESSARIOS AQUI, e so aqui neste arquivo. O elemento
   traz fundo, borda, raio, respiro e margem no ATRIBUTO `style` do index.html,
   feitos para o verde da Zeleno. Estilo em atributo nao cede a folha de estilo.

   O `display` NAO e tocado de proposito: e por ele que o app.js mostra e esconde
   o cartao conforme haja reserva ativa. Sobrescrever seria assumir o controle de
   um estado que nao e nosso.

   Tirar o atributo do index.html resolveria sem `!important`, mas ele e
   compartilhado com a Zeleno e sai do combinado.
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-countdown {
  gap: 12px !important;
  /* O texto agora tem tres linhas: centralizado, o relogio flutuaria no meio
     da frase em vez de acompanhar o titulo. */
  align-items: flex-start !important;
  margin: 16px 0 0 !important;
  padding: 14px 16px !important;
  background: var(--anova-neutro) !important;
  border: 1px solid var(--anova-linha-n) !important;
  border-radius: var(--anova-raio-p) !important;
}

.anova-cart-reserva-texto {
  /* `min-width: 0` para a frase poder quebrar: sem isso o conteudo minimo do
     item flex empurra o cronometro para fora do cartao. */
  flex: 1 1 auto;
  min-width: 0;
}

.anova-cart-reserva-titulo {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--anova-verde-800);
}

.anova-cart-reserva-frase {
  font-size: 12px;
  line-height: 1.45;
  color: var(--anova-tinta-2);
}

.anova-cart-reserva-tempo {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--anova-verde-800);
}

/* --------------------------------------------------------------------------
   Os botoes
   -------------------------------------------------------------------------- */

.cart-sidebar .cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.cart-sidebar .btn-whatsapp,
.anova-cart-continuar {
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--anova-raio-pilula);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--anova-transicao-r), border-color var(--anova-transicao-r);
}

.cart-sidebar .btn-whatsapp {
  border: 1px solid var(--anova-verde-800);
  background: var(--anova-verde-800);
  color: var(--anova-branco);
  box-shadow: none;
}

.cart-sidebar .btn-whatsapp:hover {
  background: var(--anova-verde-700);
  border-color: var(--anova-verde-700);
}

/* Secundario: fundo verde claro, sem contorno forte. E acao de SAIR da compra e
   nao deve disputar com "Finalizar pedido". */
.anova-cart-continuar {
  border: 1px solid transparent;
  background: var(--green-soft);
  color: var(--anova-verde-800);
}

.anova-cart-continuar:hover { border-color: var(--anova-verde-600); }

.cart-sidebar .btn-whatsapp:focus-visible,
.anova-cart-continuar:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  border-radius: var(--anova-raio-pilula);
}

/* "Esvaziar carrinho" vira link. Continua sendo o mesmo botao e o mesmo
   listener; so o rotulo (pelo JS) e a aparencia mudam. */
.cart-sidebar .btn-clear-cart {
  width: 100%;
  margin: 4px 0 0;
  padding: 6px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  /* idem: texto para em tinta-2 (4.9:1). */
  color: var(--anova-tinta-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none;
}

.cart-sidebar .btn-clear-cart:hover { color: #8c3229; }

.cart-sidebar .btn-clear-cart:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   O rodape de valores some com o pedido vazio
   --------------------------------------------------------------------------
   Subtotal, frete, total e barra de desconto com o pedido vazio sao quatro
   linhas dizendo "R$ 0" — ruido em cima de quem ainda nao escolheu nada, e um
   botao de pagar que nao tem o que pagar.

   ESCONDIDO, NUNCA REMOVIDO: o app.js prende listener nesses campos (o CEP, o
   botao de calcular frete, o de finalizar) e nao tem caminho de re-registro.
   Escondido, tudo continua vivo e volta assim que entrar o primeiro item.
   -------------------------------------------------------------------------- */

   O contador de reserva NAO precisa de regra aqui: ele so aparece quando ha
   produto reservado, e o app.js controla a exibicao dele por estilo no proprio
   elemento — regra de folha de estilo nao venceria isso de qualquer forma.
   -------------------------------------------------------------------------- */

.cart-sidebar.esta-vazio .cart-footer { display: none; }

@media (max-width: 640px) {
  .cart-sidebar .cart-header h2 { font-size: 21px; }

  .cart-sidebar.esta-vazio .cart-items { min-height: 50vh; }

  .anova-carrinho-vazio-icone {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
  }

  .anova-carrinho-vazio-titulo { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-sidebar .cart-header button { transition-duration: 0.01ms; }
}