/* =============================================================================
   By AteliAnas. 19. A LOJA (Etapa 3)
   -----------------------------------------------------------------------------
   Sacola, checkout, confirmação e privacidade. Continua a mesma linguagem do
   site: tokens de styles.css, cantos de etiqueta, papel e tracejado.

   Duas regras que valem para tudo aqui:

     · CHECKOUT NÃO É VITRINE. Nada de animação decorativa, nada de degradê em
       fundo grande. Quem está preenchendo CPF no celular quer clareza, não
       espetáculo, o encanto volta na página de confirmação.
     · O CAMINHO DO POLEGAR. Alvo de toque nunca menor que 46px, campo com
       16px de fonte (abaixo disso o iOS dá zoom sozinho e a cliente se perde).

   Sumário
     19.1  A sacolinha do cabeçalho (e o pulinho)
     19.2  Moldura das páginas da loja
     19.3  A sacola
     19.4  Formulário do checkout
     19.5  Opções de entrega
     19.6  Coluna de revisão
     19.7  Confirmação do pedido
     19.8  Texto longo (privacidade)
     19.9  Movimento reduzido
     19.10 Comprar pelo card (botão + seletor de cor)
     19.11 Esperando o servidor (e o "tentar de novo")
   ========================================================================== */

/* -----------------------------------------------------------------------------
   19.1  A SACOLINHA
-------------------------------------------------------------------------- */
.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sacola-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--vinho);
  transition: transform var(--anim-rapida) var(--macio);
}
.sacola-link:hover { transform: translateY(-1px); }

.sacola-link__conta {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rosa-forte);
  color: var(--branco);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}
/* Sacola vazia não precisa de bolinha. */
.sacola-link__conta--vazia { display: none; }

/* O PULINHO: acontece uma vez quando a peça entra na sacola. Mesma gramática
   do resto do site, curto, elástico, e some sozinho. */
@keyframes sacolaPula {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-6px) scale(1.12); }
  55%  { transform: translateY(0) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}
.sacola-link--pulou { animation: sacolaPula 0.6s var(--pop); }

/* -----------------------------------------------------------------------------
   19.2  MOLDURA DAS PÁGINAS DA LOJA
-------------------------------------------------------------------------- */
.pagina-loja {
  padding: 96px 0 70px;
  background-color: var(--fundo-morno);
  background-image: var(--textura);
  min-height: 70vh;
}

.container--estreito { max-width: 720px; }

.loja__titulo {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 500;
  color: var(--vinho);
  margin: 6px 0 4px;
}

.loja__linha-fina {
  max-width: 46ch;
  color: var(--vinho-suave);
  margin-bottom: 26px;
}

.loja__aviso {
  padding: 13px 16px;
  margin-bottom: 18px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.35);
  border-radius: var(--r-medio);
  color: var(--vinho);
  font-size: 0.96rem;
}
.loja__aviso--erro {
  background: #fdecea;
  border-color: rgba(179, 38, 30, 0.35);
  color: #b3261e;
}

@media (min-width: 700px) {
  .pagina-loja { padding-top: 122px; }
}

/* -----------------------------------------------------------------------------
   19.3  A SACOLA
-------------------------------------------------------------------------- */
.sacola { display: grid; gap: 22px; align-items: start; }

@media (min-width: 900px) {
  .sacola { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; }
}

.sacola__itens { display: flex; flex-direction: column; gap: 12px; }

.sacola-item {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  box-shadow: var(--sombra-suave);
}

/* Peça que esgotou no meio do caminho: fica ali, apagadinha, com o recado.
   Some seria pior, a cliente não entenderia o que aconteceu. */
.sacola-item--indisponivel { opacity: 0.72; border-style: dashed; }

.sacola-item__foto { border-radius: var(--r-pequeno); overflow: hidden; background: var(--fundo-morno); }
.sacola-item__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.sacola-item__nome {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--vinho);
  border-bottom: 1.5px solid transparent;
}
.sacola-item__nome:hover { border-bottom-color: var(--rosa-forte); }

.sacola-item__cor {
  margin: 2px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}

.sacola-item__alerta {
  margin: 6px 0 0;
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pilula);
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.4);
  font-size: 0.78rem;
  color: var(--vinho);
}

.sacola-item__precos { margin: 8px 0 10px; font-size: 0.9rem; color: var(--vinho-suave); }
.sacola-item__precos strong { color: var(--vinho); font-size: 1rem; }
.sacola-item__cartao { white-space: nowrap; }

.sacola-item__total {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--vinho);
  white-space: nowrap;
}

/* Quantidade */
.quantidade { display: flex; align-items: center; gap: 6px; }
.quantidade form { margin: 0; }

.quantidade__botao {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--borda);
  border-radius: 50%;
  background: var(--branco);
  font-size: 1.1rem;
  color: var(--vinho);
  cursor: pointer;
  transition: border-color var(--anim-rapida) ease, background-color var(--anim-rapida) ease;
}
.quantidade__botao:hover:not(:disabled) { border-color: var(--vinho); background: var(--papel); }
.quantidade__botao:disabled { opacity: 0.35; cursor: default; }

.quantidade__numero {
  min-width: 28px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--vinho);
}

.quantidade__tirar { margin-left: 6px; }
.quantidade__remover {
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--vinho-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quantidade__remover:hover { color: var(--vinho); }

/* Resumo da sacola */
.resumo {
  padding: 20px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  box-shadow: var(--sombra-suave);
}
.resumo__titulo { font-family: var(--serif); font-size: 1.25rem; color: var(--vinho); margin-bottom: 14px; }

.resumo__linha,
.revisao__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: var(--vinho);
}
.resumo__linha--fraca,
.revisao__total--fraco { font-size: 0.88rem; color: var(--vinho-suave); }

.resumo__frete {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--papel);
  border-radius: var(--r-medio);
  font-size: 0.88rem;
  color: var(--vinho-suave);
  line-height: 1.5;
}
.resumo__frete strong { color: var(--vinho); }

.resumo__travado { font-size: 0.88rem; color: #b3261e; }
.resumo__cta { width: 100%; }
.resumo__cta--travado { opacity: 0.5; pointer-events: none; }

.resumo__continuar {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--vinho-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sacola-vazia {
  padding: 40px 24px;
  text-align: center;
  background: var(--branco);
  border: 1px dashed rgba(124, 45, 62, 0.3);
  border-radius: var(--r-etiqueta);
}
.sacola-vazia__texto { font-size: 1.1rem; color: var(--vinho-suave); margin-bottom: 18px; }

.sacola__carinho {
  max-width: 52ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--vinho-suave);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   19.4  FORMULÁRIO DO CHECKOUT
-------------------------------------------------------------------------- */
.checkout__colunas { display: grid; gap: 22px; align-items: start; }

@media (min-width: 940px) {
  .checkout__colunas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
  /* A revisão acompanha a rolagem: no desktop a cliente vê o total enquanto
     preenche, sem precisar voltar. */
  .revisao { position: sticky; top: 92px; }
}

.bloco-checkout {
  padding: 20px 18px;
  margin-bottom: 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  box-shadow: var(--sombra-suave);
}

.bloco-checkout__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--vinho);
  margin-bottom: 16px;
}

/* O numerozinho de cada etapa: dá a sensação de progresso sem barra de passos
   (que numa página só seria mentira). */
.bloco-checkout__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--borda);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--vinho-suave);
}

.bloco-checkout__opcional {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}

.campo { margin-bottom: 16px; }
.campo__dupla { display: grid; gap: 0; }
@media (min-width: 560px) {
  .campo__dupla { grid-template-columns: 1fr 1fr; gap: 14px; }
  .campo__dupla .campo--largo { grid-column: span 1; }
  .campo--curto { max-width: 160px; }
}

.campo__rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--vinho);
}
.campo__rotulo--escondido {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.campo__opcional { font-weight: 400; color: var(--vinho-suave); font-size: 0.82rem; }

.campo__entrada {
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.85em;
  background: var(--branco);
  border: 1.5px solid rgba(124, 45, 62, 0.3);
  border-radius: var(--r-medio);
  font-family: var(--sans);
  font-size: 1rem;   /* 16px: menos que isso e o iOS dá zoom ao focar */
  color: var(--vinho);
}
.campo__entrada:focus { border-color: var(--vinho); outline-offset: 1px; }
.campo__entrada--erro { border-color: #b3261e; background: #fdecea; }
.campo__area { min-height: 92px; padding-top: 0.7em; resize: vertical; line-height: 1.6; }

.campo__erro { margin: 6px 0 0; font-size: 0.86rem; color: #b3261e; }
.campo__dica { margin: 6px 0 0; font-size: 0.84rem; color: var(--vinho-suave); line-height: 1.5; }
.campo__dica a { text-decoration: underline; text-underline-offset: 2px; }
.campo__dica--atencao { color: #8a5a12; }

/* Escolha de cor, na página da peça */
.escolha-cor { margin-bottom: 16px; }
.escolha-cor__rotulo {
  display: block;
  margin-bottom: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}
.escolha-cor__opcoes { display: flex; flex-wrap: wrap; gap: 8px; }

.escolha-cor__opcao { position: relative; }
.escolha-cor__opcao input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.escolha-cor__opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1em;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-pilula);
  font-size: 0.92rem;
  color: var(--vinho-suave);
  transition: border-color var(--anim-rapida) ease, color var(--anim-rapida) ease;
}
.escolha-cor__opcao input:checked + span {
  border-color: var(--vinho);
  background: var(--papel);
  color: var(--vinho);
}
.escolha-cor__opcao input:focus-visible + span { outline: 3px solid var(--vinho); outline-offset: 2px; }

.ficha__compra { margin-bottom: 10px; }
.ficha__recado {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.35);
  border-radius: var(--r-medio);
  font-size: 0.9rem;
  color: var(--vinho);
}
.ficha__recado--erro { background: #fdecea; border-color: rgba(179, 38, 30, 0.35); color: #b3261e; }

.ficha__ou {
  font-size: 0.88rem;
  color: var(--vinho-suave);
  line-height: 1.6;
}
.ficha__ou a { color: var(--vinho); text-decoration: underline; text-underline-offset: 3px; }

/* -----------------------------------------------------------------------------
   19.5  OPÇÕES DE ENTREGA
-------------------------------------------------------------------------- */
.opcoes-frete { display: flex; flex-direction: column; gap: 10px; }

.opcoes-frete__espera,
.opcoes-frete__aviso {
  margin: 0;
  padding: 14px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.28);
  border-radius: var(--r-medio);
  font-size: 0.92rem;
  color: var(--vinho-suave);
  line-height: 1.55;
}
.opcoes-frete__aviso { border-color: rgba(138, 90, 18, 0.35); color: #8a5a12; }

.opcao-frete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 14px;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-medio);
  cursor: pointer;
  transition: border-color var(--anim-rapida) ease, background-color var(--anim-rapida) ease;
}
.opcao-frete:hover { border-color: rgba(244, 92, 127, 0.6); }
.opcao-frete input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--vinho); flex: none; }
.opcao-frete:has(input:checked) { border-color: var(--vinho); background: var(--papel); }

.opcao-frete__texto { display: flex; flex-direction: column; gap: 2px; }
.opcao-frete__texto strong { font-weight: 500; color: var(--vinho); }
.opcao-frete__texto small { font-size: 0.85rem; color: var(--vinho-suave); line-height: 1.5; }

/* A entrega nossa em Londrina é a boa notícia da tela: ganha o fio rosa. */
.opcao-frete--recomendada { border-color: rgba(244, 92, 127, 0.6); }
.opcao-frete--recomendada::before {
  content: "";
  position: absolute;
  inset: auto;
}

/* -----------------------------------------------------------------------------
   19.6  COLUNA DE REVISÃO
-------------------------------------------------------------------------- */
.revisao {
  padding: 20px 18px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  box-shadow: var(--sombra-card);
}

.revisao__titulo { font-family: var(--serif); font-size: 1.25rem; color: var(--vinho); margin-bottom: 14px; }

.revisao__itens,
.recibo__itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--borda);
}

.revisao-item,
.recibo-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
}
.revisao-item__foto,
.recibo-item__foto {
  width: 46px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: var(--fundo-morno);
}
.revisao-item__nome,
.recibo-item__nome { display: block; color: var(--vinho); }
.revisao-item__detalhe,
.recibo-item__detalhe { display: block; font-size: 0.8rem; color: var(--vinho-suave); }
.revisao-item__preco,
.recibo-item__preco { white-space: nowrap; color: var(--vinho); }

.revisao__total,
.recibo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 10px 0 2px;
  font-size: 1rem;
  color: var(--vinho);
}
.revisao__total strong,
.recibo__total strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }

/* -----------------------------------------------------------------------------
   A ESCOLHA DO MEIO DE PAGAMENTO (revisao do checkout). Etapa 4

   Nesta loja escolher o meio de pagamento e escolher o PRECO: cada peca tem
   precoPix e precoCartao, e o do pix e menor. Por isso os dois cards mostram o
   total FECHADO (pecas + entrega), lado a lado, sempre visiveis. Esconder o
   total do meio nao escolhido esconderia a comparacao que a cliente veio fazer.
-------------------------------------------------------------------------- */

.pagamento-escolha {
  margin: 18px 0 6px;
  padding: 0;
  border: 0;
}

.pagamento-escolha__titulo {
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--vinho);
}

.cartao-pagamento {
  display: block;
  margin-bottom: 10px;
  padding: 14px;
  border: 1.5px solid var(--borda);
  border-radius: var(--r-medio);
  background: var(--branco);
  cursor: pointer;
  transition: border-color var(--anim-rapida) ease,
    box-shadow var(--anim-rapida) ease,
    background-color var(--anim-rapida) ease;
}

.cartao-pagamento:hover { border-color: var(--rosa-claro); }

/* O radio some da tela mas continua no fluxo do teclado: e ele que o leitor
   de tela anuncia e que o Tab alcanca. `display: none` tiraria os dois. */
.cartao-pagamento input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cartao-pagamento--escolhido,
.cartao-pagamento:focus-within {
  border-color: var(--rosa-forte);
  background: var(--papel);
  box-shadow: var(--sombra-suave);
}

/* Sem JavaScript a classe --escolhido nunca chega: o :has cobre o caso. */
.cartao-pagamento:has(input:checked) {
  border-color: var(--rosa-forte);
  background: var(--papel);
}

.cartao-pagamento__corpo { display: block; }

.cartao-pagamento__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--vinho);
}
.cartao-pagamento__topo strong { font-family: var(--serif); font-size: 1.02rem; }

.cartao-pagamento__selo {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rosa-forte);
  color: var(--branco);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.cartao-pagamento__selo--fraco {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--vinho-suave);
}

.cartao-pagamento__linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--vinho-suave);
  margin-bottom: 3px;
}

.cartao-pagamento__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda);
  color: var(--vinho);
  font-size: 0.9rem;
}
.cartao-pagamento__total strong {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  white-space: nowrap;
}

.cartao-pagamento__dica {
  display: block;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--vinho-suave);
  line-height: 1.5;
}

.pagamento-escolha__economia {
  margin: 4px 0 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--vinho-suave);
}
.pagamento-escolha__economia strong { color: var(--vinho); }

.revisao__cta { width: 100%; }

.revisao__privacidade {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--vinho-suave);
  line-height: 1.5;
  text-align: center;
}
.revisao__privacidade a { text-decoration: underline; text-underline-offset: 2px; }

/* -----------------------------------------------------------------------------
   19.7  CONFIRMAÇÃO
-------------------------------------------------------------------------- */
.confirmado {
  padding: 34px 24px 30px;
  margin-bottom: 22px;
  text-align: center;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  box-shadow: var(--sombra-card);
}

.confirmado__coracao { font-size: 2.6rem; display: block; margin-bottom: 8px; }

.confirmado__titulo {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 500;
  color: var(--vinho);
  margin-bottom: 18px;
}

/* O código é a informação que a cliente vai querer copiar e ditar. */
.confirmado__codigo {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 22px;
  margin-bottom: 18px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.4);
  border-radius: var(--r-etiqueta);
}
.confirmado__codigo-rotulo {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}
.confirmado__codigo strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--vinho);
}

.confirmado__texto { max-width: 46ch; margin: 0 auto 22px; color: var(--vinho-suave); line-height: 1.7; }

.recibo {
  padding: 20px 18px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
}
.recibo__titulo { font-family: var(--serif); font-size: 1.2rem; color: var(--vinho); margin-bottom: 14px; }
.recibo__subtitulo {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vinho-suave);
  margin-bottom: 6px;
}
.recibo__linha { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 0.94rem; color: var(--vinho-suave); }
.recibo__entrega, .recibo__recado { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--borda); }
.recibo__destaque { color: var(--vinho); line-height: 1.6; }
.recibo__endereco { font-style: normal; color: var(--vinho-suave); line-height: 1.7; font-size: 0.94rem; }

.confirmado__rodape { margin-top: 22px; text-align: center; font-size: 0.9rem; color: var(--vinho-suave); }
.confirmado__rodape a { text-decoration: underline; text-underline-offset: 3px; }

/* -----------------------------------------------------------------------------
   19.8  TEXTO LONGO (privacidade)
-------------------------------------------------------------------------- */
.texto-longo {
  padding: 26px 22px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  line-height: 1.75;
  color: var(--vinho-suave);
}
.texto-longo h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--vinho);
  margin: 28px 0 8px;
}
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo strong { color: var(--vinho); }

.lista-simples { margin: 0 0 1em; padding-left: 0; }
.lista-simples li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.lista-simples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 7px;
  border: 1.5px solid var(--rosa-forte);
  border-radius: 50%;
}

.texto-longo__assinatura { margin-top: 28px; text-align: center; }

/* -----------------------------------------------------------------------------
   19.9  MOVIMENTO REDUZIDO
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sacola-link--pulou { animation: none; }
  .sacola-link:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   19.10  COMPRAR PELO CARD

   O card da vitrine vende. O botão é o mesmo da página da peça, e a diferença
   está em quantas cores a peça tem:

     · uma cor (ou nenhuma) → adiciona direto;
     · duas ou mais         → abre o seletor.

   O SELETOR MUDA DE FORMA CONFORME A TELA, e isso não é enfeite:
   no celular, o card tem ~170px de largura (a grade é de duas colunas), e um
   popover ali dentro nasceria espremido ou estouraria para fora. Então no
   celular ele é uma FAIXA FIXA na base da tela, dedo grande, alvo grande.
   No desktop, onde o card tem espaço, ele aparece ancorado no próprio card,
   junto de onde a cliente clicou.
-------------------------------------------------------------------------- */
.peca__compra {
  position: relative;
  margin: 0;
}

/* O recadinho de "guardada na sacola" ou de peça que esgotou. */
.peca__recado {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.35);
  border-radius: var(--r-pequeno);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--vinho);
}
.peca__recado--erro {
  background: #fdecea;
  border-color: rgba(179, 38, 30, 0.35);
  color: #b3261e;
}

/* ---- O seletor de cor ---- */

/* CELULAR: faixa fixa na base, com véu por trás. */
.escolher-cor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--branco);
  border-top: 1px solid var(--borda);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(124, 45, 62, 0.18);
  animation: subirFaixa 0.22s var(--macio);
}

@keyframes subirFaixa {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.escolher-cor__titulo {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--vinho);
}

.escolher-cor__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* Cada cor é um botão de envio de verdade: o `value` vai no campo `cor`.
   Sem JavaScript isso posta e adiciona; com JavaScript, o mesmo clique é
   interceptado e vira fetch. Um controle só para os dois caminhos. */
.escolher-cor__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1em;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-pilula);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--vinho);
  cursor: pointer;
  transition: border-color var(--anim-rapida) ease, background-color var(--anim-rapida) ease,
    transform var(--anim-rapida) var(--macio);
}
.escolher-cor__chip:hover {
  border-color: var(--vinho);
  background: var(--papel);
  transform: translateY(-1px);
}
.escolher-cor__chip:active { transform: translateY(0); }

.escolher-cor__fechar {
  display: block;
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--vinho-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.escolher-cor__fechar:hover { color: var(--vinho); }

/* O véu por trás da faixa: fecha ao tocar fora, e escurece o resto para a
   escolha ficar óbvia. Só existe no celular, junto com a faixa. */
.veu-cores {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(96, 14, 30, 0.32);
  border: 0;
  padding: 0;
  cursor: pointer;
  animation: aparecer 0.2s ease;
}

/* DESKTOP: o seletor volta para dentro do card, ancorado no botão. */
@media (min-width: 700px) {
  .escolher-cor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    top: auto;
    z-index: 30;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--r-medio);
    box-shadow: var(--sombra-card);
    animation: aparecer 0.18s ease;
  }
  .escolher-cor__titulo { font-size: 1rem; }
  .escolher-cor__chip { min-height: 40px; font-size: 0.9rem; }

  /* No desktop o véu não faz sentido: o seletor está dentro do card. */
  .veu-cores { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .escolher-cor { animation: none; }
  .veu-cores { animation: none; }
  .escolher-cor__chip:hover { transform: none; }
}


/* -----------------------------------------------------------------------------
   19.11  ESPERANDO O SERVIDOR

   Entre o clique e a resposta existe um tempo, no 4G do ateliê, um tempo bem
   real. Esse intervalo precisa aparecer, porque a alternativa é a cliente
   achar que nada aconteceu e clicar de novo (ou, pior, achar que aconteceu
   quando não aconteceu).

   O pulso é discreto de propósito: não é uma celebração, é um "estou indo".
   A comemoração, o pulinho da sacolinha, só acontece depois do sim.
-------------------------------------------------------------------------- */
@keyframes pulsoDeEspera {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.esta-carregando {
  animation: pulsoDeEspera 1s ease-in-out infinite;
  cursor: progress;
}

/* Nos chips de cor o pulso vem com um fio rosa embaixo, para o dedo saber
   qual das cores está sendo guardada. */
.escolher-cor__chip.esta-carregando {
  border-color: var(--rosa-forte);
  background: var(--papel);
}

/* O "tentar de novo" dentro do recado de erro. Existe para a cliente não
   receber a instrução inútil de "atualize a página": quase sempre a segunda
   tentativa resolve, e ela não perde o lugar na vitrine. */
.recado__repetir {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.recado__repetir:hover { opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .esta-carregando { animation: none; opacity: 0.7; }
}

/* =============================================================================
   A PAGINA DE PAGAMENTO (/pedido/:codigo/pagar). Etapa 4
   -----------------------------------------------------------------------------
   Mobile-first como o resto do site: o layout base e para ~380px, que e onde a
   maioria das clientes vai pagar (o link chega pelo Instagram, no celular).

   A ordem visual e deliberada: TOTAL primeiro, depois o meio de pagar, depois o
   recibo. Ninguem deve digitar um cartao sem antes ver quanto vai sair.
   ========================================================================== */

/* Botao que ocupa a largura toda. No celular e o padrao dos CTAs de pagamento:
   alvo de toque grande e sem ambiguidade sobre onde clicar. O painel ja tinha o
   equivalente (.pa-botao--largo); o site publico passou a precisar na Etapa 4. */
.botao--largo { width: 100%; }

.pagar-total {
  margin: 18px 0 22px;
  padding: 18px 16px;
  border-radius: var(--r-medio);
  background: var(--papel);
  border: 1px solid var(--borda);
  text-align: center;
}
.pagar-total__rotulo {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}
.pagar-total__valor {
  margin: 4px 0 2px;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--vinho);
  line-height: 1.1;
}
.pagar-total__detalhe {
  margin: 0;
  font-size: 0.82rem;
  color: var(--vinho-suave);
}

.pagar-bloco {
  margin-bottom: 20px;
  padding: 20px 16px;
  border-radius: var(--r-medio);
  background: var(--branco);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-suave);
}
.pagar-bloco--aviso { background: var(--fundo-morno); }
.pagar-bloco__titulo {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--vinho);
}

/* --- PIX --------------------------------------------------------------- */

.pagar-pix { text-align: center; }

/* O QR nao passa de 280px: maior que isso obriga a cliente a afastar o celular
   para o outro aparelho ler, e menor que 200px alguns leitores erram. */
.pagar-pix__qr {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto 14px;
  padding: 10px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-medio);
}

.pagar-pix__prazo {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--vinho-suave);
  font-variant-numeric: tabular-nums; /* o relogio nao "pula" a cada segundo */
}
.pagar-pix__prazo--acabando { color: var(--alerta); font-weight: 500; }
.pagar-pix__prazo--fim { color: var(--alerta); font-weight: 600; }

.pagar-pix__copia { text-align: left; }

/* O codigo copia-e-cola e feio de proposito: monoespacado e pequeno. Ele nao e
   para ler, e para copiar. Fica visivel (e nao escondido atras do botao)
   porque selecionar a mao e o plano B de quem esta num navegador antigo. */
.pagar-pix__codigo {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r-medio);
  background: var(--fundo-morno);
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--vinho-suave);
  resize: none;
  word-break: break-all;
}

.pagar-pix__copiado {
  min-height: 1.2em; /* reserva o espaco: sem isso a pagina pula ao copiar */
  margin: 8px 0 0;
  font-size: 0.84rem;
  color: var(--vinho-suave);
  text-align: center;
}
.pagar-pix__copiado--ok { color: #1f7a4d; font-weight: 500; }

.pagar-pix__carinho {
  margin: 18px 0 6px;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--vinho);
}
.pagar-pix__espera {
  margin: 0;
  font-size: 0.82rem;
  color: var(--vinho-suave);
}

/* --- CARTAO ------------------------------------------------------------- */

.pagar-cartao__seguro {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--r-medio);
  background: var(--fundo-morno);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--vinho-suave);
}

.pagar-cartao__parcelas {
  margin: 4px 0 14px;
  font-size: 0.86rem;
  color: var(--vinho-suave);
}
.pagar-cartao__parcelas strong { color: var(--vinho); }

.pagar-cartao__erro {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-medio);
  background: rgba(244, 63, 63, 0.08);
  border: 1px solid rgba(244, 63, 63, 0.25);
  font-size: 0.86rem;
  line-height: 1.5;
  color: #97283a;
}

/* --- TROCAR DE MEIO ----------------------------------------------------- */

.pagar-trocar {
  margin: 0 0 24px;
  text-align: center;
}
.pagar-trocar__aviso {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--vinho-suave);
}
.pagar-trocar__aviso strong { color: var(--vinho); }

/* --- O RECIBO PAGO ------------------------------------------------------ */

.recibo__pago {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--vinho-suave);
  text-align: right;
}

.confirmado__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--vinho-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   A CELEBRACAO: "Pagamento recebido! 💗"
   -----------------------------------------------------------------------------
   Fica no HTML desde o carregamento, com [hidden], e so ganha a classe
   --visivel quando o polling confirma. Montar o elemento na hora daria um
   pisca justamente no momento mais bonito da compra.

   E o mesmo vocabulario do resto do site: o degrade da marca, o coracao que
   respira, e o tempo generoso (--anim-media) que a marca usa em toda entrada.
   ========================================================================== */

.celebracao {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--degrade);
  opacity: 0;
  transition: opacity var(--anim-media) var(--macio);
}
.celebracao--visivel { opacity: 1; }

/* ⚠ Enquanto está escondida, ela NÃO PODE existir na tela. O `display: flex`
   acima vence o `hidden` do HTML, e uma camada fixa com opacity 0 cobrindo a
   página inteira engole todo clique: foi assim que "Gerar o código Pix" e
   "Prefiro pagar no cartão" pararam de responder. O JS tira o `hidden` e só no
   quadro seguinte liga --visivel, então o fade continua acontecendo. */
.celebracao[hidden] { display: none; }

/* Sobre o rosa da marca o texto é vinho: 5,4:1, sem véu escuro por cima. */
.celebracao__caixa {
  text-align: center;
  color: var(--vinho);
  transform: translateY(14px) scale(0.96);
  transition: transform var(--anim-media) var(--macio);
}
.celebracao--visivel .celebracao__caixa { transform: none; }

.celebracao__coracao {
  display: block;
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 14px;
  animation: celebrar-respirar 1.6s ease-in-out infinite;
}

.celebracao__titulo {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
}
.celebracao__texto {
  margin: 0;
  font-size: 0.98rem;
  opacity: 0.92;
}

@keyframes celebrar-respirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* --- DA TELA GRANDE PARA CIMA ------------------------------------------- */

@media (min-width: 640px) {
  .pagar-total__valor { font-size: 2.5rem; }
  .pagar-bloco { padding: 24px 22px; }
  .celebracao__titulo { font-size: 2.3rem; }
}

/* Movimento reduzido: a celebracao continua acontecendo (ela e a informacao de
   que o pagamento caiu), mas sem o coracao pulsando e sem o deslize. */
@media (prefers-reduced-motion: reduce) {
  .celebracao,
  .celebracao__caixa { transition: none; }
  .celebracao__caixa { transform: none; }
  .celebracao__coracao { animation: none; }
}