/* Os COMPONENTES compartilhados do agendamento e da loja — sempre sobre os
   tokens, nunca cor solta. Mobile-first: o público chega pelo celular.

   A home tem folha propria (home.css) desde que deixou de ser uma pagina de
   agendamento com marca por cima: o que era exclusivo dela saiu daqui. */


/* — cabeçalho — */
/* — a barra fina: a home e a loja compartilham — */
.h-topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s2) var(--s4);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.h-topo .btn { padding: .6rem 1.2rem; font-size: .74rem; }

/* No celular a barra do topo NAO gruda: com as acoes moradas na barra fixa de
   baixo, ela seria so o nome ocupando faixa de tela. Rola junto e sai. */
@media (max-width: 720px) {
  .h-topo { position: static; }
}


.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) 0;
}
.top .btn { margin: 0; }

/* — botões — */
.btn {
  display: inline-block; padding: .85rem 1.7rem; border-radius: 0;
  background: var(--accent-600); color: var(--white); text-decoration: none;
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background var(--rapido) var(--curva);
}
.btn:hover { background: var(--accent-700); }
.btn.secundario { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.secundario:hover { background: var(--ink); color: var(--paper); }
.btn.grande { padding: 1.05rem 2.3rem; font-size: .92rem; }
.btn:disabled { opacity: .5; cursor: default; }

/* ————— o fluxo de agendar ————— */

.fluxo { max-width: 560px; margin: 0 auto; padding: var(--s4); }
.fluxo h1 {
  font-family: var(--display); font-variation-settings: var(--wdth-larga);
  font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: var(--s1);
}
.passo-titulo { color: var(--ink-2); margin-bottom: var(--s4); }

.etapas { display: flex; gap: 6px; margin: var(--s3) 0 var(--s4); }
.etapas span { flex: 1; height: 4px; border-radius: 0; background: var(--line); }
.etapas span.feito { background: var(--brand-500); }

.opcao {
  width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 0; padding: var(--s3) var(--s4); margin-bottom: var(--s2);
  cursor: pointer; font: inherit; color: inherit;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  transition: border-color var(--rapido) var(--curva);
}
.opcao:hover { border-color: var(--brand-500); }
.opcao.marcada { border-color: var(--brand-700); background: var(--white); box-shadow: 0 0 0 1px var(--brand-700); }
.opcao .nome { font-weight: 600; }
.opcao .detalhe { color: var(--ink-2); font-size: .9rem; display: block; }
.opcao .valor { font-weight: 700; white-space: nowrap; }
.opcao .qtd { display: inline-flex; align-items: center; gap: 8px; }
.opcao .qtd button {
  width: 28px; height: 28px; border-radius: 0; border: 1px solid var(--line);
  background: var(--white); cursor: pointer; font-size: 1rem; line-height: 1;
}

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s1); }
.slot {
  padding: .6rem 0; text-align: center; border: 1px solid var(--line); border-radius: 0;
  background: var(--card); cursor: pointer; font: inherit; font-weight: 600;
}
.slot.marcada { background: var(--brand-700); color: var(--white); border-color: var(--brand-700); }

.dias { display: flex; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s1); margin-bottom: var(--s3); }
.dia {
  min-width: 64px; padding: .5rem .3rem; text-align: center; border: 1px solid var(--line);
  border-radius: 0; background: var(--card); cursor: pointer; font: inherit;
}
.dia.marcada { background: var(--brand-700); color: var(--white); border-color: var(--brand-700); }
.dia .semana { display: block; font-size: .75rem; opacity: .8; }
.dia .num { font-weight: 700; }

.resumo { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: var(--s4); margin: var(--s3) 0; }
.resumo dl { display: flex; flex-direction: column; gap: 6px; }
.resumo .linha { display: flex; justify-content: space-between; gap: var(--s2); }
.resumo .linha dt { color: var(--ink-2); }
.resumo .total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-weight: 700; }
.resumo .desconto dd { color: var(--accent-600); }

.campo { margin-bottom: var(--s3); }
.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 0;
  font: inherit; background: var(--white); color: var(--ink);
}
.campo .dica { font-size: .85rem; color: var(--ink-2); margin-top: 4px; }

.aviso { color: var(--accent-600); font-size: .95rem; margin: var(--s2) 0; min-height: 1.3em; }
.rodape-fluxo { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s4); }

.sucesso { text-align: center; padding: var(--s5) 0; }
.sucesso .selo { font-size: 2.4rem; }
.sucesso h2 {
  font-family: var(--display); font-variation-settings: var(--wdth-larga);
  font-weight: 600; font-size: 1.4rem; margin: var(--s2) 0;
}
.sucesso p { color: var(--ink-2); margin-bottom: var(--s2); }


/* — Autoridade no agendamento: quem é o Rodrigo, em uma faixa — */
.autoridade {
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--brand-700); color: var(--white);
  border-radius: 0;
}
.autoridade .frase {
  font-family: var(--body); font-size: 1.05rem; line-height: 1.5;
  color: var(--white); margin-bottom: var(--s2);
}
.autoridade .frase em { font-style: normal; color: var(--on-escuro); }
.credenciais { display: flex; flex-wrap: wrap; gap: var(--s1); }
.credenciais span {
  font-size: .78rem; letter-spacing: .02em;
  padding: .3rem .65rem; border-radius: 0;
  background: rgba(252, 249, 242, .12); color: var(--brand-200);
  border: 1px solid rgba(252, 249, 242, .18);
}

/* ————— a loja (o link de vendas) ————— */

/* "Compra coletiva" vem logo abaixo do titulo, no MESMO tamanho e estilo: sao
   duas linhas do mesmo enunciado, nao um titulo e um subtitulo. */
.loja-coletiva { margin-top: -.2em; }
/* O produto é o herói: a foto é grande e SOBREPÕE o cartão, como no
   informativo impresso — o cliente reconhece o frasco antes de ler o nome. */

.loja { max-width: 640px; padding-bottom: 130px; } /* respiro para a sacola fixa */

.produto {
  position: relative;
  background: var(--card); border: 1px solid var(--accent-600); border-radius: 0;
  padding: var(--s3) var(--s4) var(--s4);
  margin: 74px 0 var(--s4);          /* a folga que a foto ocupa ao subir */
}

.produto-topo {
  display: grid; grid-template-columns: 168px 1fr; gap: var(--s4);
  align-items: center; margin-bottom: var(--s3);
}

/* A ALTURA ORIENTA, A LARGURA ACOMPANHA. Com caixa fixa (168x210) e contain,
   frascos de proporcoes diferentes apareciam em tamanhos diferentes — um alto
   e fino encolhia para caber na largura. Fixando so a altura, todos leem no
   mesmo tamanho e a largura sai da propria foto. */
.produto-foto {
  height: 210px; width: auto; max-width: 168px; object-fit: contain; min-height: 0;
  margin: -74px 0 0 -8px;            /* sai do cartão por cima e pela esquerda */
  filter: drop-shadow(0 14px 22px rgba(26, 32, 27, .22));
}

/* Sem foto, o cartão não abre um buraco: o texto ocupa a linha inteira. */
.produto-topo.sem-foto { grid-template-columns: 1fr; }
.produto-topo.sem-foto + .produto-linhas { margin-top: 0; }
.produto.sem-foto { margin-top: var(--s4); }

.produto-id h2 {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em;
}
.produto-id .meta { color: var(--ink-2); font-size: .92rem; margin-top: 4px; }
.produto-id .valor {
  font-size: 1.35rem; font-weight: 700; margin-top: 8px; letter-spacing: -.01em;
}

/* O vídeo do PRODUTO toca aqui mesmo: ele permite incorporação, ao contrário
   da live do Programa, que só roda no YouTube e por isso virou link na home.
   Carrega preguiçoso — só quando a linha entra na tela. */
.produto-video { margin: var(--s3) 0; }
.produto-video iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0; display: block;
  background: var(--brand-950);
}
.ver-youtube {
  display: inline-block; margin-top: 6px; font-size: .85rem;
  color: var(--brand-700); text-decoration: none; font-weight: 600;
}
.ver-youtube:hover { text-decoration: underline; }

/* A galeria: TODAS as fotos do produto, nao so a capa. Trocar a principal
   nao redesenha o cartao, entao o video nao recarrega. */
.produto-galeria { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.produto-galeria button {
  width: 36px; height: 36px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
}
.produto-galeria button[aria-current="true"] { border-color: var(--accent-600); }
.produto-galeria img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }

/* A foto da OPCAO: cada frasco e o seu. Vazio cai na capa do item. */
.linha-foto {
  width: 44px; height: 44px; flex: none; overflow: hidden;
  border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; min-height: 0;
}
.linha-foto img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  min-height: 0; object-fit: contain; padding: 2px;
}

.produto-linhas { display: flex; flex-direction: column; gap: 6px; }
.linha-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 0;
  background: var(--paper-2);
}
.linha-item.marcada { border-color: var(--brand-700); background: var(--white); }
.linha-item .nome { font-weight: 600; font-size: .98rem; }
.linha-item .detalhe { display: block; color: var(--ink-2); font-size: .82rem; }
/* O CÓDIGO — o designador da embalagem (5.0, 20 vol). Vem ACIMA do nome porque
   e por ele que o profissional pede: quem conhece a linha procura o numero
   antes de ler a cor. Etiqueta tecnica: display, caixa-alta, tabular. */
.codigo {
  display: block;
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--accent-600); margin-bottom: 2px;
}
.produto-id .codigo { font-size: .72rem; margin-bottom: 4px; }
/* Na linha de compra, o código tem o MESMO tamanho do número da quantidade: são
   os dois números que o profissional lê ao montar o pedido ("quantos do 7.3"),
   e um miúdo ao lado do outro grande fazia procurar. O tamanho sai de um token
   só, para os dois não se separarem de novo num ajuste futuro. */
.linha-item { --numero-da-linha: 1.0625rem; }
.linha-item .codigo { font-size: var(--numero-da-linha); letter-spacing: .08em; }
.linha-item .qtd strong { font-size: var(--numero-da-linha); }
.linha-fim { display: flex; align-items: center; gap: var(--s2); }
/* A COLUNA DO NOME OCUPA O QUE SOBRA, em qualquer tela. Sem isto ela se
   dimensionava pelo conteúdo e, com o space-between, o nome flutuava no meio da
   linha no desktop — enquanto no celular já começava na esquerda. Duas telas,
   duas leituras diferentes da mesma lista. */
.linha-item .linha-id { flex: 1 1 auto; min-width: 0; text-align: left; }
/* O NOME QUEBRA EM VEZ DE CORTAR. "Castanho escuro 3.0" virava "Castanh…", que
   nao identifica nada. Ele e bloco (em inline, overflow nao teria efeito) e
   quebra dentro da propria coluna: a estrutura das colunas fica de pe e o que
   varia e so a altura daquela linha.
   Isto so e seguro porque o acumulado ja ocupa lugar mesmo vazio — foi o que
   fazia a linha pular ao clicar. */
.linha-item .nome { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
/* O ACUMULADO OCUPA LUGAR MESMO VAZIO. Sem isso ele nascia ao escolher, a linha
   quebrava e a altura pulava de 64px para 110px no celular — o alvo do dedo
   fugia debaixo do dedo. */
.linha-item .subtotal { font-weight: 700; min-width: 78px; text-align: right; white-space: nowrap; }
.linha-item .qtd { display: inline-flex; align-items: center; gap: 8px; }
/* TOQUE RÁPIDO NÃO É ZOOM. No iPhone, o segundo toque em menos de ~300ms era
   lido como duplo-toque e o Safari ampliava a página em vez de somar o item —
   justo quem está fechando um pedido de cinco unidades. `manipulation` diz que
   aqui não há gesto de zoom a esperar, então cada toque conta na hora. O
   user-select evita o outro efeito do toque repetido: selecionar o "+". */
.linha-item .qtd button,
.opcao .qtd button,
.linha-item,
.grupo-topo {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.linha-item .qtd button {
  width: 32px; height: 32px; border-radius: 0; border: 1px solid var(--line);
  background: var(--white); cursor: pointer; font-size: 1.05rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.linha-item .qtd button:hover { border-color: var(--brand-700); }
.linha-item .qtd strong { min-width: 18px; text-align: center; }

/* No celular a foto sobe ainda mais e centraliza: o produto ocupa a tela. */
@media (max-width: 560px) {
  /* A LINHA DA OPCAO tem quatro coisas competindo por 390px: foto, nome,
     seletor e acumulado. Sem estes ajustes o nome ficava com ~60px e quebrava
     ("10 / volumes"), e o acumulado reservava 78px mesmo vazio. */
  /* PRIORIDADE DO NOME, PARTE 2: o recuo comia 96px dos 348 (container mais
     cartao) antes de qualquer conteudo. Numa tela estreita o respiro tem que
     ceder ao conteudo — a linha e informacao densa, nao uma pagina de leitura. */
  .loja { padding-left: var(--s2); padding-right: var(--s2); }
  .produto { padding-left: var(--s3); padding-right: var(--s3); }
  .produto-linhas { gap: 5px; }

  /* PRIORIDADE DO NOME. Numa tela de 348px o nome truncava ate ZERO: foto,
     acumulado e seletor comiam tudo. Aqui os tres cedem alguns pixels cada. */
  .linha-item { gap: var(--s1); padding: .5rem .55rem; }
  .linha-foto { width: 34px; height: 34px; }
  .linha-item .nome { font-size: .9rem; }
  .linha-item .detalhe { font-size: .74rem; }
  .linha-fim { gap: var(--s1); }
  .linha-item .subtotal { min-width: 56px; font-size: .78rem; }
  .linha-item .qtd { gap: 4px; }
  .linha-item .qtd button { width: 26px; height: 26px; font-size: .9rem; }
  .linha-item .qtd strong { min-width: 14px; }
  /* A FOTO SAI DO CARTÃO, também no celular. É o gesto que o Rodrigo gostou na
     loja antiga: o frasco flutua acima da borda em vez de ficar preso dentro
     dela, e o produto ganha presença de vitrine.
     Da primeira tentativa ficaram duas lições, que estão nos números abaixo:
     a folga do cartão (margin-top) tem que ser MAIOR do que o quanto a foto
     sobe, senão a foto é cortada pela seção de cima e um vão aparece antes do
     nome; e a foto precisa vir por cima (z-index), senão o fundo do cartão
     seguinte a cobre. */
  .produto { margin-top: 128px; padding-top: var(--s2); }
  .produto-topo { grid-template-columns: 1fr; gap: var(--s2); text-align: center; }
  .produto-foto {
    height: 300px; width: auto; max-width: 100%; margin: -116px auto var(--s2);
    position: relative; z-index: 1;
    filter: drop-shadow(0 10px 16px rgba(8, 27, 29, .18));
  }
  /* Sem foto não há o que levantar: o cartão volta ao respiro normal. */
  .produto.sem-foto { margin-top: var(--s4); padding-top: var(--s4); }
  .produto-galeria { justify-content: center; }
  .produto-id .valor { font-size: 1.3rem; }
  .linha-item .nome { font-size: .94rem; }
}

/* a sacola: acompanha a rolagem, some quando não há nada escolhido */
.sacola {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--white); border-top: 1px solid var(--line);
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  box-shadow: 0 -6px 24px rgba(26, 32, 27, .08);
}
.sacola-linha { display: flex; flex-direction: column; }
.sacola-linha span { color: var(--ink-2); font-size: .85rem; }
.sacola-linha strong { font-size: 1.15rem; white-space: nowrap; }
.sacola .btn { white-space: nowrap; }

@media (min-width: 680px) {
  .sacola { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--s3);
    width: min(620px, calc(100% - 2 * var(--s4))); border: 1px solid var(--line); border-radius: 0; }
}
.loja-chamada { margin-top: var(--s3); }
.loja-chamada a { color: var(--brand-700); font-weight: 600; text-decoration: none; }
.loja-chamada a:hover { text-decoration: underline; }


/* ————— A ÁRVORE DE OPÇÕES (sanfonas) —————
   77 cores de uma vez é um muro. Cada família fecha, o cliente abre a que
   interessa, e o rótulo diz quantas ele já escolheu lá dentro — assim ele não
   precisa reabrir tudo para lembrar. O recuo por nível vem de --nivel, então
   uma profundidade a mais desenha sozinha. */

.grupo { border: 1px solid var(--line); background: var(--card); }
.grupo + .grupo, .grupo + .linha-item, .linha-item + .grupo { margin-top: 6px; }

.grupo-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .6rem .8rem; padding-left: calc(.8rem + var(--nivel, 0) * 14px);
  cursor: pointer; list-style: none; user-select: none;
}
.grupo-topo::-webkit-details-marker { display: none; }
.grupo-topo::after {
  content: "+"; font-family: var(--display); font-size: 1.1rem; line-height: 1;
  color: var(--accent-600); flex: none;
}
.grupo[open] > .grupo-topo::after { content: "−"; }
.grupo[open] > .grupo-topo { border-bottom: 1px solid var(--line); }

.grupo-id { display: flex; flex-direction: column; min-width: 0; }
.grupo-nome {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
}
.grupo-conta {
  font-family: var(--display); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap; margin-left: auto;
  padding-right: var(--s2);
}
.grupo-conta.tem { color: var(--accent-600); font-weight: 700; }

.grupo-dentro { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.grupo-dentro .linha-item { padding-left: calc(.8rem + var(--nivel, 0) * 10px); }

/* ————— O VENDEDOR DO LINK —————
   Um selo discreto: o cliente saber o nome de quem vai atender muda a conversa
   que ele começa no WhatsApp. Só aparece quando o link traz vendedor. */
.vendedor {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: .55rem .8rem;
  border: 1px solid var(--accent-600); background: var(--card);
  font-family: var(--body); font-size: .92rem;
}
.vendedor img {
  width: 40px; height: 40px; object-fit: cover; flex: none;
  border: 1px solid var(--line);
}
.vendedor strong { font-weight: 700; }