/* ═══════════════════════════════════════════════════════════════
   Monte sua Cesta — estilos exclusivos do configurador.
   As cores e fontes vêm do styles.css (variáveis :root).
   ═══════════════════════════════════════════════════════════════ */

/* ── passos ── */
.stepper{display:flex;justify-content:center;gap:0;margin:0 auto 8px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;padding:0 18px;color:var(--texto-suave)}
.step .bolinha{
  width:23px;height:23px;border-radius:50%;border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Cormorant Garamond',serif;font-size:13px;line-height:1;
  transition:background .3s,border-color .3s,color .3s;
}
.step .rot{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;white-space:nowrap}
.step.ativo{color:var(--cacau)}
.step.ativo .bolinha{background:var(--cacau);border-color:var(--cacau);color:var(--vanilla)}
.step.feito .bolinha{border-color:var(--gold);color:var(--gold)}
.step.feito{color:var(--texto)}
@media (max-width:720px){ .step .rot{display:none} .step{padding:0 12px} }

/* ── layout com resumo lateral ── */
.montador{display:flex;gap:34px;align-items:flex-start}
.montador-principal{flex:1 1 auto;min-width:0}
.montador-lateral{flex:0 0 268px;position:sticky;top:calc(var(--header-h) + 22px)}
@media (max-width:960px){ .montador-lateral{display:none} }

/* ── apresentações ── */
.apresentacoes{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.ap{
  flex:1 1 300px;max-width:390px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:0 0 28px;cursor:pointer;text-align:center;overflow:hidden;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.ap:hover{border-color:var(--gold);transform:translateY(-3px)}
.ap.ativa{border-color:var(--cacau);box-shadow:0 0 0 1px var(--cacau)}
.ap-visual{height:172px;background:var(--vanilla-dim);display:flex;align-items:center;justify-content:center}
.ap-visual svg{width:74px;height:74px;stroke:var(--gold);fill:none;stroke-width:1.1}
.ap h3{font-size:1.55rem;margin:24px 0 8px}
.ap p{font-size:13px;color:var(--texto-suave);padding:0 26px;line-height:1.8}
.ap-marca{
  display:inline-block;margin-top:18px;font-size:10px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .25s;
}
.ap.ativa .ap-marca{opacity:1;color:var(--cacau)}

/* ── categorias ── */
.grupo-bebidas{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--cacau);
  text-align:center;margin:56px 0 4px;
}
.cat{margin-top:44px}
.cat-cabeca{border-bottom:1px solid var(--linha);padding-bottom:12px;margin-bottom:22px}
.cat-cabeca h3{font-size:1.42rem}
.cat-cabeca p{font-size:12.5px;color:var(--texto-suave);margin-top:2px}

/* ── grade de produtos ── */
.produtos{display:flex;flex-wrap:wrap;gap:16px}
.prod{
  flex:1 1 208px;max-width:262px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.prod:hover{border-color:var(--gold-soft)}
.prod.dentro{border-color:var(--cacau)}
/* destaque agora e so um fio dourado, sem mudar o fundo —
   fundo diferente brigava com o tom das fotos. */
.prod.destaque{border-color:var(--gold-soft)}

.selo{
  height:186px;background:#FBF1E3;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
/* contain, nunca cover: o fundo da foto ja e o vanilla do site,
   entao a foto inteira aparece sem faixa nem corte. */
.selo img{width:auto;max-width:100%;object-fit:contain}
.selo-letra{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--gold-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);
  background:rgba(255,255,255,.5);
}
.prod-corpo{padding:15px 16px 16px;flex:1;display:flex;flex-direction:column}
.prod h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.16rem;color:var(--cacau);line-height:1.25;margin-bottom:5px}
.prod .desc{font-size:11.5px;color:var(--texto-suave);line-height:1.65;margin-bottom:12px;flex:1}
.prod .nota-item{font-size:10.5px;color:var(--gold);letter-spacing:.3px;margin-bottom:10px;line-height:1.5}
.prod-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prod-preco{font-family:'Cormorant Garamond',serif;font-size:1.16rem;color:var(--cacau);white-space:nowrap}
.prod-preco.gratis{font-size:.86rem;font-family:'Montserrat',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}

.add{
  font-family:'Montserrat',sans-serif;font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:500;cursor:pointer;
  background:transparent;color:var(--cacau);border:1px solid var(--cacau);
  padding:9px 14px;border-radius:var(--raio);transition:background .2s,color .2s;white-space:nowrap;
}
.add:hover{background:var(--cacau);color:var(--vanilla)}
.add.dentro{background:var(--cacau);color:var(--vanilla);border-color:var(--cacau)}

.contador{display:flex;align-items:center;border:1px solid var(--cacau);border-radius:var(--raio);overflow:hidden}
.contador button{
  width:29px;height:31px;background:transparent;border:0;cursor:pointer;
  color:var(--cacau);font-size:14px;line-height:1;font-family:'Montserrat',sans-serif;
  transition:background .15s;
}
.contador button:hover:not(:disabled){background:var(--vanilla-dim)}
.contador button:disabled{opacity:.25;cursor:default}
.contador .q{min-width:21px;text-align:center;font-size:12px;font-weight:500;color:var(--cacau)}

/* ── campo de texto do item ── */
.campo{padding:0 16px 16px;border-top:1px dashed var(--linha);margin-top:2px}
.campo label{display:block;font-size:11px;letter-spacing:.4px;color:var(--cacau);margin:13px 0 5px;font-weight:400}
.campo textarea{
  width:100%;min-height:66px;resize:vertical;
  font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:300;color:var(--texto);
  background:var(--vanilla);border:1px solid var(--linha);border-radius:var(--raio);
  padding:10px 11px;line-height:1.65;
}
.campo textarea:focus{outline:none;border-color:var(--gold)}
.campo .ajuda{font-size:10.5px;color:var(--texto-suave);margin-top:6px;line-height:1.55;font-style:italic}
.campo.faltando textarea{border-color:#B4746A}

/* ── resumo lateral ── */
.resumo-lado{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:24px 22px 24px}
.resumo-lado .rot{font-size:9.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--texto-suave);margin-bottom:14px}
.resumo-lado .qtd{font-size:12.5px;color:var(--texto);margin-bottom:2px}
.resumo-lado .val{font-family:'Cormorant Garamond',serif;font-size:2.05rem;color:var(--cacau);line-height:1.2;margin-bottom:6px}
.resumo-lado .ap-atual{font-size:11.5px;color:var(--texto-suave);border-top:1px solid var(--linha);padding-top:13px;margin-top:14px;line-height:1.6}
.resumo-lado .btn{width:100%;margin-top:18px;padding:13px 16px;font-size:10px}
.resumo-lado .vazio-lado{font-size:12px;color:var(--texto-suave);font-style:italic;line-height:1.7}

/* ── barra inferior (mobile) ── */
.barra-sel{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:var(--branco);border-top:1px solid var(--linha);
  padding:11px 18px;display:none;align-items:center;justify-content:space-between;gap:14px;
}
@media (max-width:960px){
  .barra-sel.vis{display:flex}
  body.tem-barra{padding-bottom:82px}
  .fab-wpp{bottom:88px}
}
.barra-sel .b-rot{font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:var(--texto-suave)}
.barra-sel .b-qtd{font-size:11px;color:var(--texto-suave)}
.barra-sel .b-val{font-family:'Cormorant Garamond',serif;font-size:1.42rem;color:var(--cacau);line-height:1.15}
.barra-sel .btn{padding:12px 18px;font-size:10px}

/* ── conferência ── */
.conf{max-width:620px;margin:0 auto;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:34px 30px 32px}
.conf-bloco{margin-bottom:22px}
.conf-bloco .titulo{
  font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);
  padding-bottom:8px;border-bottom:1px solid var(--linha);margin-bottom:11px;
}
.conf-linha{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0}
.conf-linha .n{color:var(--texto)}
.conf-linha .v{color:var(--cacau);white-space:nowrap}
.conf-linha .msg{display:block;font-size:11.5px;color:var(--texto-suave);font-style:italic;margin-top:4px;line-height:1.6}
.conf-somas{border-top:1px solid var(--linha);padding-top:14px;margin-top:8px}
.conf-somas .conf-linha{color:var(--texto-suave);font-size:12.5px}
.conf-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--cacau);margin-top:14px;padding-top:15px}
.conf-total .rot{font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--texto-suave)}
.conf-total .val{font-family:'Cormorant Garamond',serif;font-size:2.15rem;color:var(--cacau)}
.conf-acoes{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.conf-acoes .btn{flex:1 1 190px}
.conf-nota{font-size:11.5px;color:var(--texto-suave);text-align:center;margin-top:16px;line-height:1.65;font-style:italic}

/* ── avisos ── */
.aviso-caixa{
  background:var(--vanilla-dim);border:1px solid var(--linha);border-left:2px solid var(--gold);
  border-radius:var(--raio);padding:15px 18px;font-size:12.5px;color:var(--texto);
  line-height:1.75;margin-bottom:26px;
}
.navegar{display:flex;gap:12px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.navegar .btn{min-width:200px}

/* ── transição entre etapas ── */
.etapa{display:none}
.etapa.viva{display:block;animation:surge .42s ease both}
@keyframes surge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .etapa.viva{animation:none}
  .ap,.prod,.caminho{transition:none}
}

/* ── ponto de partida da cesta (etapa 1) ── */
.ap-partida{
  font-size:13px;color:var(--cacau);margin-top:16px;padding:0 26px;line-height:1.6;
}
.ap-partida strong{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:500}
.ap-inclui{
  font-size:11.5px;color:var(--texto-suave);padding:0 26px;margin-top:6px;
  line-height:1.65;font-style:italic;
}