/* =========================================================
   ARUANDÁRIO — Artigos Religiosos
   Design system da loja
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* ---------------------------------------------------------
     Paleta da marca — cores principais
     --------------------------------------------------------- */
  --creme-claro:     #FFF9ED;
  --creme:           #FBEFD9;
  --creme-fundo:     #F6E9CE;
  --ouro-claro:      #FACD5D;
  --ouro:            #E4B131;
  --ouro-escuro:     #C68D0A;
  --terra:           #A15D1E;
  --tinta:           #603711;

  /* Tons de texto derivados da tinta: o ouro escuro tem só 2,8:1 sobre o
     creme e não serve para letra pequena — nesses casos vale a terra. */
  --tinta-media:     #7A4B1E;
  --tinta-suave:     #8A5F33;
  --texto-ouro:      #96551A;

  /* ---------------------------------------------------------
     Cores de apoio
     --------------------------------------------------------- */
  /* O laranja da paleta de apoio não é mais usado na interface: a
     etiqueta de oferta e o favorito passaram para o ouro da marca,
     o mesmo do botão da lupa. Fica registrado por ser cor da paleta. */
  --destaque:        #FF751F;
  --acao:            #38B6FF;   /* botões, contador da sacola, promoção */
  --envio:           #7ED957;   /* botões de envio, confirmação, WhatsApp */
  --verde-escuro:    #48822F;   /* preço no Pix e verde em letra pequena */
  /* o #48822F fica em 3,9:1 sobre o creme mais fechado: em letra miúda
     sobre fundo claro entra este verde um passo mais escuro */
  --verde-texto:     #3F7328;
  --sucesso:         #48822F;
  --verde-mata:      #48822F;

  --branco:          #FFFFFF;
  /* letra sobre os fundos de apoio: o branco reprova em todos eles */
  --sobre-apoio:     #3A2109;

  --linha:           rgba(96,55,17,.14);
  --linha-forte:     rgba(96,55,17,.26);

  /* Tipografia */
  --font-titulo: 'Jost', 'Josefin Sans', system-ui, sans-serif;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-texto:  'Inter', system-ui, -apple-system, sans-serif;

  /* Métrica */
  --container: 1280px;
  --raio:      4px;
  --raio-g:    10px;
  --sombra:    0 2px 14px rgba(96,55,17,.08);
  --sombra-alta: 0 12px 34px rgba(96,55,17,.16);
  --header-h:  auto;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-texto);
  font-size:15px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--creme-claro);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}

.oculto{ display:none !important; }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Tipografia utilitária ---------- */
.titulo-secao{
  font-family:var(--font-titulo);
  font-weight:300;
  font-size:clamp(22px,3vw,32px);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0;
  color:var(--tinta);
}
.subtitulo-secao{
  font-family:var(--font-serif);
  font-size:17px;
  font-style:italic;
  color:var(--tinta-suave);
  margin:6px 0 0;
}
.cabecalho-secao{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:26px; flex-wrap:wrap;
}
.link-ver-tudo{
  font-family:var(--font-titulo);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-ouro);
  border-bottom:1px solid rgba(168,127,20,.35);
  padding-bottom:3px;
  white-space:nowrap;
  transition:.2s;
}
.link-ver-tudo:hover{ color:var(--tinta); border-color:var(--tinta); }

.ornamento{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--ouro); margin:0 auto 8px;
}
.ornamento::before,.ornamento::after{
  content:''; height:1px; width:56px;
  background:linear-gradient(90deg,transparent,var(--ouro));
}
.ornamento::after{ background:linear-gradient(270deg,transparent,var(--ouro)); }

/* =========================================================
   BARRA DE ANÚNCIO
   ========================================================= */
.barra-anuncio{
  background:var(--tinta);
  color:var(--creme);
  font-family:var(--font-titulo);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 20px;
  position:relative;
  overflow:hidden;
}
.barra-anuncio .item-anuncio{
  display:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.barra-anuncio .item-anuncio.ativo{ display:block; animation:sobe .5s ease; }
.barra-anuncio strong{ color:var(--ouro-claro); font-weight:600; }
@keyframes sobe{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.cabecalho{
  background:var(--creme);
  border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:60;
}
.cabecalho-topo{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  padding-block:16px;
}
/* O letreiro é a imagem inteira: sol, nome e "Artigos Religiosos". */
.marca{ display:flex; align-items:center; }
.marca img{ height:50px; width:auto; display:block; }
/* nome escrito, usado no topo do menu do celular */
.marca-texto{
  font-family:var(--font-titulo);
  font-weight:300;
  font-size:22px;
  letter-spacing:.22em;
  color:var(--texto-ouro);
  text-transform:uppercase;
  line-height:1;
}

/* Busca */
.busca{ position:relative; max-width:560px; width:100%; justify-self:center; }
.busca input{
  width:100%;
  background:var(--branco);
  border:1px solid var(--linha-forte);
  border-radius:100px;
  padding:12px 48px 12px 20px;
  font-size:14px;
  outline:none;
  transition:.2s;
}
.busca input::placeholder{ color:var(--tinta-suave); }
.busca input:focus{ border-color:var(--ouro); box-shadow:0 0 0 3px rgba(228,177,49,.15); }
.busca button{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:var(--ouro); color:var(--branco);
  display:grid; place-items:center;
  transition:.2s;
}
.busca button:hover{ background:var(--ouro-escuro); }

/* Sugestões de busca */
.sugestoes-busca{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-g);
  box-shadow:var(--sombra-alta);
  max-height:380px; overflow-y:auto;
  z-index:80;
}
.sugestoes-busca a{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--linha);
  font-size:13px;
}
.sugestoes-busca a:last-child{ border-bottom:none; }
.sugestoes-busca a:hover{ background:var(--creme-claro); }
.sugestoes-busca .mini-thumb{
  width:38px; height:38px; border-radius:var(--raio);
  flex:none; display:grid; place-items:center;
  background:var(--creme-fundo);
}
.sugestoes-busca .mini-thumb img{ width:24px; opacity:.5; }
.sugestoes-busca .preco-sug{ margin-left:auto; color:var(--texto-ouro); font-weight:600; }

/* Ações do cabeçalho */
.acoes-cabecalho{ display:flex; align-items:center; gap:22px; }
.acao{
  display:flex; align-items:center; gap:9px;
  font-size:12px; line-height:1.25; color:var(--tinta-media);
  transition:.2s;
}
.acao:hover{ color:var(--texto-ouro); }
.acao svg{ flex:none; }
.acao .acao-rotulo{ display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); }
.acao .acao-valor{ display:block; font-weight:600; font-size:12.5px; color:var(--tinta); }
.acao-carrinho{ position:relative; }
.contador-carrinho{
  position:absolute; top:-6px; left:14px;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--terra); color:#fff;
  border-radius:100px;
  font-size:10px; font-weight:700;
  display:grid; place-items:center;
}

/* Navegação */
.navegacao{ border-top:1px solid var(--linha); background:var(--creme); }
.lista-nav{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
}
.lista-nav > li > a,
.lista-nav > li > button{ font-size:12px; padding-inline:11px; }
.lista-nav > li > a,
.lista-nav > li > button{
  display:flex; align-items:center; gap:7px;
  padding:14px 14px;
  font-family:var(--font-titulo);
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-media);
  position:relative;
  transition:.2s;
  white-space:nowrap;
}
.lista-nav > li > a::after,
.lista-nav > li > button::after{
  content:''; position:absolute; left:14px; right:14px; bottom:8px;
  height:1px; background:var(--ouro); transform:scaleX(0);
  transition:transform .25s;
}
.lista-nav > li:hover > a::after,
.lista-nav > li:hover > button::after{ transform:scaleX(1); }
.lista-nav > li:hover > a,
.lista-nav > li:hover > button{ color:var(--tinta); }
.nav-destaque{
  margin-left:auto;
  background:var(--terra); color:var(--branco) !important;
  border-radius:100px; padding:9px 20px !important; margin-block:auto;
  font-weight:500;
}
.nav-destaque::after{ display:none !important; }
.nav-destaque:hover{ background:#82361f; }

/* Item "Todas as Categorias" */
.lista-nav > li > button.nav-todas{
  background:var(--tinta);
  color:var(--creme);
  border-radius:100px;
  padding:10px 20px !important;
  margin-block:auto;
  margin-right:10px;
  font-weight:400;
}
.lista-nav > li:hover > button.nav-todas{ background:var(--ouro-escuro); color:#fff; }
.lista-nav > li > button.nav-todas::after{ display:none !important; }

/* Categorias do atacado: dez blocos, centrados na largura da página */
.grade-categorias-atacado{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:30px 34px; max-width:820px; margin:0 auto;
}

/* Passante escolhido mais de uma vez: a conta e o botão de tirar uma */
.caixa-passante{ position:relative; display:block; }
.conta-passante{
  position:absolute; top:-6px; right:-6px; z-index:2;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--terra); color:var(--branco);
  border-radius:999px; font-size:11px; font-weight:600;
  pointer-events:none;
}
.tira-passante{
  position:absolute; top:-6px; left:-6px; z-index:2;
  width:20px; height:20px; display:grid; place-items:center;
  background:var(--branco); color:var(--terra);
  border:1px solid var(--linha-forte); border-radius:999px;
  font-size:14px; line-height:1; cursor:pointer;
}
.tira-passante:hover{ background:var(--terra); color:var(--branco); border-color:var(--terra); }

/* Aviso do mínimo do atacado, no alto da base da sacola */
.aviso-minimo-atacado{
  margin:0 0 14px; padding:12px 14px;
  background:rgba(255,117,31,.12); border:1px solid rgba(255,117,31,.4);
  border-radius:var(--raio);
  font-size:12.5px; line-height:1.6; color:var(--sobre-apoio);
}
.aviso-minimo-atacado strong{ color:var(--terra); }
.botao.bloqueado{ opacity:.45; pointer-events:none; }

/* Lote mínimo no cartão do atacado */
.lote-atacado{
  display:block; margin:2px 0 6px;
  font-size:11.5px; color:var(--tinta-media);
}
.lote-atacado strong{ color:var(--tinta); }
.lote-atacado em{ font-style:normal; color:var(--texto-ouro); font-weight:600; }

/* Estoque na página do produto */
.linha-estoque{
  margin:14px 0 0; font-size:13px; color:var(--tinta-media);
}
.linha-estoque strong{ color:var(--verde-texto); }
.linha-estoque.linha-lote strong{ color:var(--terra); }
.linha-estoque.sem-estoque strong,
.linha-estoque.sem-estoque{ color:var(--terra); }

/* Atalhos do topo do mega menu: Novidades, Atacado e Lista de Obrigação
   agrupados um sob o outro, como se fossem uma seção só. */
/* vem depois de ".mega ul", que é grid: aqui precisa mesmo do !important */
.mega .atalhos-mega{
  list-style:none; margin:0 0 18px; padding:0 0 16px;
  border-bottom:1px solid var(--linha);
  display:flex !important; flex-wrap:wrap; align-items:center; gap:6px 30px;
}
.atalhos-mega a{
  display:block; padding:5px 0;
  font-family:var(--font-titulo);
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta);
}
.atalhos-mega a:hover{ color:var(--texto-ouro); }

/* Mega com todas as categorias */
.mega-todas{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px 24px;
  max-height:70vh; overflow-y:auto;
}
.mega-todas .coluna-cat{
  border-radius:var(--raio);
  padding:8px 10px;
  transition:.18s;
}
.mega-todas .coluna-cat:hover{ background:var(--creme-claro); }
.mega-todas h4{
  margin:0 0 7px; padding-bottom:6px;
  border-bottom:1px solid var(--linha);
}
.mega-todas h4 a{ color:inherit; display:flex; align-items:baseline; gap:6px; }
.mega-todas h4 a:hover{ color:var(--tinta); }
.qtd-mega{
  margin-left:auto; font-size:10px; font-weight:400;
  color:var(--tinta-suave); letter-spacing:0;
}
.mega-todas .cat-destaque{
  background:rgba(228,177,49,.07);
  box-shadow:inset 0 0 0 1px rgba(228,177,49,.28);
}
.mega-todas .cat-destaque:hover{ background:rgba(228,177,49,.13); }
.mega-todas .cat-destaque h4{ border-bottom-color:rgba(228,177,49,.35); }
.marca-destaque{ color:var(--ouro); font-size:9px; }

/* Árvore de subcategorias (usada nos dois tipos de menu) */
.arvore, .arvore ul{ list-style:none; margin:0; padding:0; }
.arvore a{
  display:flex; align-items:baseline; gap:8px;
  font-size:13px; color:var(--tinta-media);
  padding:4px 0; transition:.15s;
}
.arvore a:hover{ color:var(--texto-ouro); }
.arvore .nivel-2 a,
.arvore .nivel-3 a{ font-size:12.5px; }
.arvore .rotulo-grupo{
  display:block;
  font-family:var(--font-titulo);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta); font-weight:500;
  margin:10px 0 4px;
}
.arvore .tem-filhos:first-child .rotulo-grupo{ margin-top:2px; }
.arvore .lista-filhos{ padding-left:12px; border-left:1px solid var(--linha); }
.arvore .item-ver-todos{ margin-top:8px; padding-top:8px; border-top:1px solid var(--linha); }
.arvore .item-ver-todos a{ color:var(--texto-ouro); font-weight:500; font-size:12.5px; }
.sub-em-breve{
  display:flex; align-items:baseline; gap:8px;
  font-size:13px; color:var(--tinta-suave); padding:4px 0;
}
.sub-em-breve em{
  font-style:normal; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--creme-fundo); color:var(--texto-ouro);
  border-radius:100px; padding:2px 8px;
}

/* Painel vertical dos itens em destaque */
.painel-vertical{
  position:absolute; top:100%; left:0;
  min-width:270px; max-width:330px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-top:none;
  box-shadow:var(--sombra-alta);
  padding:18px 22px 20px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.2s ease;
  z-index:70;
  max-height:74vh; overflow-y:auto;
}
.item-nav{ position:relative; }
.item-nav:hover > .painel-vertical{ opacity:1; visibility:visible; transform:none; }
/* o mega de largura total precisa continuar ancorado no cabeçalho */
.lista-nav > li:first-child{ position:static; }

/* Item Lista de Obrigação */
.nav-obrigacao{
  display:flex; align-items:center; gap:8px;
  color:var(--texto-ouro) !important;
  font-weight:500;
}
.nav-obrigacao svg{ flex:none; }

/* Mega menu *//* Mega menu de largura total */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--branco);
  border-top:1px solid var(--linha);
  box-shadow:var(--sombra-alta);
  padding:32px 0 36px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:.22s ease;
  z-index:70;
}
.item-nav:hover .mega{ opacity:1; visibility:visible; transform:none; }
.mega-grade{
  display:grid; grid-template-columns:repeat(4,1fr) 300px; gap:34px;
}
.mega h4{
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-ouro);
  margin:0 0 12px; padding-bottom:9px;
  border-bottom:1px solid var(--linha);
}
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mega ul a{ font-size:13.5px; color:var(--tinta-media); transition:.15s; }
.mega ul a:hover{ color:var(--texto-ouro); padding-left:4px; }
.mega-cartao{
  background:var(--creme-fundo);
  border-radius:var(--raio-g);
  padding:26px 24px;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.mega-cartao img{ width:70px; margin:0 auto 14px; opacity:.85; }
.mega-cartao p{ font-family:var(--font-serif); font-size:19px; font-style:italic; margin:0 0 14px; color:var(--tinta); }

/* Menu mobile */
.abre-menu{ display:none; }
.menu-mobile{
  position:fixed; inset:0 auto 0 0; width:min(88vw,360px);
  background:var(--creme-claro); z-index:200;
  transform:translateX(-100%); transition:transform .3s ease;
  overflow-y:auto; padding-bottom:40px;
  box-shadow:var(--sombra-alta);
}
.menu-mobile.aberto{ transform:none; }
.menu-mobile-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--linha);
  position:sticky; top:0; background:var(--creme); z-index:2;
}
.menu-mobile ul{ list-style:none; margin:0; padding:0; }
.menu-mobile > ul > li > a{
  display:block; padding:15px 20px; border-bottom:1px solid var(--linha);
  font-family:var(--font-titulo); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}
.cortina{
  position:fixed; inset:0; background:rgba(96,55,17,.45);
  z-index:150; opacity:0; visibility:hidden; transition:.3s;
}
.cortina.visivel{ opacity:1; visibility:visible; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(228,177,49,.30), transparent 62%),
    linear-gradient(180deg,var(--creme) 0%, var(--creme-fundo) 100%);
  overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:auto 0 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent);
}
.hero-conteudo{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:60px; align-items:center;
  padding-block:clamp(30px,4.5vw,54px);
}
.hero-selo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-titulo);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--texto-ouro);
  border:1px solid rgba(228,177,49,.5);
  border-radius:100px; padding:7px 16px;
  background:rgba(255,255,255,.5);
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--font-titulo);
  font-weight:200;
  font-size:clamp(38px,5.6vw,68px);
  line-height:1.02;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0 0 8px;
  color:var(--tinta);
}
.hero h1 em{
  display:block;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--texto-ouro);
  font-size:.86em;
  margin-top:6px;
}
.hero p.hero-texto{
  font-size:16px; line-height:1.75; color:var(--tinta-media);
  max-width:46ch; margin:20px 0 32px;
}
.hero-botoes{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-figura{ position:relative; display:grid; place-items:center; }
.hero-figura img{
  width:min(100%,420px);
  filter:drop-shadow(0 18px 40px rgba(168,127,20,.28));
  animation:gira 90s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

/* Botões */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-titulo);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 32px;
  border-radius:100px;
  transition:.22s ease;
  cursor:pointer;
}
.botao-primario{
  background:var(--tinta); color:var(--creme);
}
.botao-primario:hover{ background:var(--ouro-escuro); transform:translateY(-2px); box-shadow:0 10px 24px rgba(168,127,20,.3); }
.botao-secundario{
  border:1px solid var(--linha-forte); color:var(--tinta);
}
.botao-secundario:hover{ border-color:var(--ouro); color:var(--texto-ouro); }
.botao-ouro{ background:var(--ouro); color:var(--branco); }
.botao-ouro:hover{ background:var(--ouro-escuro); }
.botao-bloco{ width:100%; }

/* =========================================================
   FAIXA DE BENEFÍCIOS
   ========================================================= */
.beneficios{
  background:var(--tinta);
  color:var(--creme);
  padding-block:22px;
}
.grade-beneficios{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.beneficio{
  display:flex; align-items:center; gap:14px;
  padding-inline:12px;
  border-right:1px solid rgba(250,241,220,.13);
}
.beneficio:last-child{ border-right:none; }
.beneficio svg{ color:var(--ouro-claro); flex:none; }
.beneficio strong{
  display:block; font-family:var(--font-titulo);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}
.beneficio span{ display:block; font-size:12px; color:rgba(250,241,220,.62); }

/* =========================================================
   CATEGORIAS EM CÍRCULOS
   ========================================================= */
/* Metade do respiro que havia entre as seções: uma seção fecha com a
   metade do que dava e a seguinte abre com a outra metade. */
.secao{ padding-block:clamp(24px,3vw,38px); }
.secao-creme{ background:var(--creme); }

.grade-categorias{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px 26px;
}
.cartao-categoria{ text-align:center; width:118px; }
/* força a quebra: 6 na primeira linha, o resto centralizado na segunda */
.quebra-linha{ flex-basis:100%; height:0; margin:0; }
.cartao-categoria .circulo{
  width:100%; aspect-ratio:1; border-radius:50%;
  background:var(--creme-fundo);
  border:1px solid rgba(228,177,49,.28);
  display:grid; place-items:center;
  margin-bottom:12px;
  transition:.28s ease;
  position:relative; overflow:hidden;
}
.cartao-categoria .circulo::after{
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed rgba(228,177,49,.3);
  opacity:0; transition:.28s;
}
.cartao-categoria:hover .circulo{
  transform:translateY(-6px);
  border-color:var(--ouro);
  box-shadow:0 14px 30px rgba(168,127,20,.2);
}
.cartao-categoria:hover .circulo::after{ opacity:1; }
.cartao-categoria .circulo svg{ width:36%; height:36%; color:var(--texto-ouro); }
.cartao-categoria .nome-cat{
  font-family:var(--font-titulo);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta); line-height:1.35;
  display:block;
}
.cartao-categoria .qtd-cat{
  font-size:10px; color:var(--tinta-suave); display:block; margin-top:3px;
}

/* =========================================================
   CARTÃO DE PRODUTO
   ========================================================= */
.grade-produtos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px 22px;
}
.grade-produtos.colunas-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }

.produto{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-g);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:.25s ease;
  position:relative;
}
.produto:hover{
  border-color:rgba(228,177,49,.55);
  box-shadow:var(--sombra-alta);
  transform:translateY(-4px);
}
.produto-imagem{
  position:relative;
  aspect-ratio:1;
  background:var(--creme-fundo);
  display:grid; place-items:center;
  overflow:hidden;
}
.produto-imagem img.marca-agua{
  width:52%; opacity:.16;
  transition:.4s ease;
}
.produto:hover .produto-imagem img.marca-agua{ transform:scale(1.07) rotate(8deg); opacity:.22; }
.produto-imagem.com-foto{ background:var(--branco); }
.produto-imagem .foto-produto{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.produto:hover .produto-imagem .foto-produto{ transform:scale(1.05); }

/* Peça alta — a vela gruta — não cabe cortada no quadrado do cartão:
   aparece inteira, e o zoom fica para o passar do mouse. */
.produto-imagem.foto-inteira{ background:var(--creme-claro); }
/* posição absoluta porque, com a caixa em grid e place-items:center, a
   altura em porcentagem não pega e a foto vaza para fora do quadrado */
.produto-imagem.foto-inteira .foto-produto{
  position:absolute; top:8px; left:8px;
  width:calc(100% - 16px); height:calc(100% - 16px);
  object-fit:contain; padding:0;
}
/* O zoom segue o ponteiro: a origem vem do próprio elemento, escrita pelo
   JS a cada movimento do mouse. */
.produto-imagem.com-foto .foto-produto{
  transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);
}
/* Só onde existe ponteiro: no toque o :hover gruda e a foto ficaria
   ampliada depois do dedo sair. */
@media (hover: hover) and (pointer: fine){
  .produto:hover .produto-imagem.foto-inteira .foto-produto{ transform:scale(1.9); }
}
.etiqueta-atelie{ background:var(--ouro-escuro); }

.produto-imagem .rotulo-imagem{
  position:absolute; inset:auto 12px 12px;
  font-family:var(--font-titulo);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); text-align:center;
}
.etiqueta{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-titulo);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px;
  background:var(--tinta); color:var(--creme);
  z-index:2;
}
.etiqueta-novo{ background:var(--verde-mata); color:var(--branco); }
.etiqueta-oferta{ background:var(--terra); }

.botao-favorito{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:grid; place-items:center;
  color:var(--tinta-suave);
  opacity:0; transform:translateY(-4px);
  transition:.22s;
}
.produto:hover .botao-favorito{ opacity:1; transform:none; }
.botao-favorito:hover{ color:var(--terra); }
.botao-favorito.ativo{ color:var(--terra); opacity:1; }

.produto-corpo{
  padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.produto-categoria{
  font-family:var(--font-titulo);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-ouro);
}
.produto-nome{
  font-size:13.5px; line-height:1.45; color:var(--tinta);
  margin:0; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.9em;
}
.produto-precos{ margin-top:auto; padding-top:6px; }
.preco-cheio{
  font-size:12px; color:var(--tinta-suave); text-decoration:line-through;
  display:block;
}
.preco{
  font-family:var(--font-titulo);
  font-size:20px; font-weight:500; color:var(--tinta);
  letter-spacing:.02em;
}
.parcelas{ font-size:11.5px; color:var(--tinta-suave); display:block; margin-top:2px; }
.preco-pix{ font-size:11.5px; color:var(--verde-texto); font-weight:600; display:block; }
.produto .botao-comprar{
  margin-top:12px;
  width:100%;
  padding:12px;
  border:1px solid var(--tinta);
  border-radius:100px;
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:.2s;
}
.produto .botao-comprar:hover{ background:var(--tinta); color:var(--creme); }

/* Carrossel */
.carrossel{ position:relative; }
.trilho{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px,1fr);
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:8px;
  scrollbar-width:none;
}
.trilho::-webkit-scrollbar{ display:none; }
.trilho > *{ scroll-snap-align:start; }
.seta{
  position:absolute; top:38%; z-index:5;
  width:44px; height:44px; border-radius:50%;
  background:var(--branco); border:1px solid var(--linha-forte);
  display:grid; place-items:center;
  box-shadow:var(--sombra);
  transition:.2s;
}
.seta:hover{ background:var(--tinta); color:var(--creme); border-color:var(--tinta); }
.seta-esq{ left:-18px; }
.seta-dir{ right:-18px; }

/* =========================================================
   BANNERS EDITORIAIS
   ========================================================= */
.grade-banners{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.banner{
  position:relative; overflow:hidden;
  border-radius:var(--raio-g);
  padding:44px 40px;
  min-height:250px;
  display:flex; flex-direction:column; justify-content:center;
  transition:.3s;
}
.banner:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.banner-escuro{ background:linear-gradient(135deg,var(--tinta),#7A4B1E); color:var(--creme); }
/* No ouro o branco some: a letra ali é a tinta escura da marca. */
.banner-ouro{ background:linear-gradient(135deg,var(--ouro-claro),var(--ouro)); color:var(--sobre-apoio); }
.banner-verde{ background:linear-gradient(135deg,#35601F,#1F3F14); color:var(--branco); }
.banner-terra{ background:linear-gradient(135deg,var(--terra),#7A4416); color:var(--branco); }
.banner .banner-tag{
  font-family:var(--font-titulo);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  opacity:.85; margin-bottom:12px;
}
.banner h3{
  font-family:var(--font-titulo); font-weight:300;
  font-size:clamp(22px,2.6vw,30px); letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 10px; line-height:1.15;
}
.banner p{ margin:0 0 22px; font-size:14px; opacity:.92; max-width:38ch; }
.banner .botao-banner{
  align-self:flex-start;
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:4px;
}
.banner-marca-agua{
  position:absolute; right:-40px; bottom:-50px;
  width:220px; opacity:.1; pointer-events:none;
}

/* =========================================================
   EDITORIAL / SOBRE
   ========================================================= */
.editorial{
  background:
    linear-gradient(180deg,var(--creme-fundo),var(--creme));
  position:relative; overflow:hidden;
}
.editorial-conteudo{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center;
}
.editorial-figura{ position:relative; display:grid; place-items:center; }
.editorial-figura img{ width:min(100%,300px); opacity:.9; }
.editorial h2{
  font-family:var(--font-titulo); font-weight:200;
  font-size:clamp(26px,3.6vw,40px); letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 6px; line-height:1.12;
}
.editorial h2 em{
  font-family:var(--font-serif); font-style:italic; text-transform:none;
  letter-spacing:0; color:var(--texto-ouro); font-weight:400;
}
.editorial p{ font-size:15.5px; line-height:1.85; color:var(--tinta-media); max-width:60ch; }
.lista-valores{
  list-style:none; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.lista-valores li{ border-top:1px solid rgba(228,177,49,.4); padding-top:14px; }
.lista-valores strong{
  display:block; font-family:var(--font-titulo);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-ouro); margin-bottom:5px;
}
.lista-valores span{ font-size:13px; color:var(--tinta-media); }

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.grade-depoimentos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.depoimento{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:30px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.estrelas{ color:var(--ouro-escuro); letter-spacing:2px; font-size:14px; }
.depoimento p{ font-family:var(--font-serif); font-size:18px; font-style:italic; line-height:1.6; margin:0; color:var(--tinta); }
.depoimento footer{ font-size:12px; color:var(--tinta-suave); margin-top:auto; }
.depoimento footer strong{ display:block; color:var(--tinta); font-size:13px; font-weight:600; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{
  background:var(--tinta); color:var(--creme);
  position:relative; overflow:hidden;
}
.newsletter::before{
  content:''; position:absolute; width:520px; height:520px;
  right:-160px; top:-190px; border-radius:50%;
  background:radial-gradient(circle,rgba(228,177,49,.22),transparent 68%);
}
.newsletter-conteudo{ position:relative; text-align:center; max-width:720px; margin-inline:auto; }
.newsletter h2{
  font-family:var(--font-titulo); font-weight:200;
  /* fica em uma linha só, do celular ao desktop */
  font-size:clamp(17px,3.4vw,34px);
  letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 12px;
  white-space:nowrap;
}
.newsletter p{ color:rgba(250,241,220,.72); margin:0 0 26px; font-size:14.5px; }
.form-newsletter{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.form-newsletter input{
  flex:1; min-width:250px;
  background:rgba(250,241,220,.08);
  border:1px solid rgba(250,241,220,.25);
  border-radius:100px; padding:14px 22px;
  color:var(--creme); outline:none;
}
.form-newsletter input::placeholder{ color:rgba(250,241,220,.45); }
.form-newsletter input:focus{ border-color:var(--ouro); }

.cupom-revelado{
  margin-top:22px;
  border:1px dashed rgba(240,200,104,.6);
  border-radius:var(--raio-g);
  padding:20px 24px;
  background:rgba(240,200,104,.08);
}
.cupom-revelado .rotulo-cupom{
  display:block; font-family:var(--font-titulo);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(251,239,218,.6); margin-bottom:8px;
}
.cupom-revelado .confirmacao-cupom{
  font-family:var(--font-titulo); font-size:20px; font-weight:300;
  letter-spacing:.04em; color:var(--ouro-claro); margin:0;
}
.cupom-revelado .confirmacao-cupom strong{ font-weight:500; }
.cupom-revelado p{ margin:8px 0 0; font-size:12.5px; color:rgba(251,239,218,.6); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--creme); border-top:1px solid var(--linha); padding-top:56px; }
.grade-rodape{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:44px;
}
.rodape h5{
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta); margin:0 0 16px;
}
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rodape ul a{ font-size:13.5px; color:var(--tinta-media); transition:.15s; }
.rodape ul a:hover{ color:var(--texto-ouro); }
.rodape-marca img{ height:52px; margin-bottom:16px; }
.rodape-marca p{ font-size:13.5px; color:var(--tinta-media); max-width:34ch; line-height:1.7; }
.redes{ display:flex; gap:10px; margin-top:20px; }
.redes a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linha-forte);
  display:grid; place-items:center; color:var(--tinta-media);
  transition:.2s;
}
.redes a:hover{ background:var(--ouro); border-color:var(--ouro); color:#fff; }
.rodape-base{
  border-top:1px solid var(--linha);
  padding-block:22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; color:var(--tinta-suave);
}
.selos-pagamento{ display:flex; gap:8px; flex-wrap:wrap; }
.credito-rodape{ font-size:11.5px; color:var(--tinta-suave); }
.credito-rodape a{ color:var(--texto-ouro); border-bottom:1px solid var(--linha-forte); }
.credito-rodape a:hover{ color:var(--tinta); border-color:var(--tinta); }
.selo{
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:5px 10px; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-media);
  background:var(--branco);
}

/* WhatsApp flutuante */
.whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:.2s;
}
.whatsapp:hover{ transform:scale(1.07); }

/* =========================================================
   PÁGINA DE CATEGORIA
   ========================================================= */
.migalhas{
  font-size:12px; color:var(--tinta-suave);
  padding-block:18px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.migalhas a:hover{ color:var(--texto-ouro); }
.migalhas span{ color:var(--linha-forte); }

.topo-categoria{
  background:var(--creme); border-bottom:1px solid var(--linha);
  padding-block:34px; text-align:center;
}
.topo-categoria h1{
  font-family:var(--font-titulo); font-weight:200;
  font-size:clamp(26px,4vw,42px); letter-spacing:.16em; text-transform:uppercase;
  margin:8px 0 6px;
}
.topo-categoria p{ color:var(--tinta-suave); margin:0; font-size:14px; }

.layout-categoria{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:42px;
  padding-block:38px;
  align-items:start;
}
.filtros{ position:sticky; top:150px; }
.bloco-filtro{ border-bottom:1px solid var(--linha); padding-bottom:20px; margin-bottom:20px; }
.bloco-filtro h4{
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 14px;
}
.bloco-filtro ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; max-height:280px; overflow-y:auto; }
.bloco-filtro label{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:var(--tinta-media); cursor:pointer;
}
.bloco-filtro label:hover{ color:var(--tinta); }
.bloco-filtro input[type=checkbox],
.bloco-filtro input[type=radio]{ accent-color:var(--ouro); width:15px; height:15px; }
.bloco-filtro .contagem{ margin-left:auto; font-size:11px; color:var(--tinta-suave); }
.bloco-filtro .grupo-filtro{ margin-top:6px; }
.bloco-filtro .rotulo-grupo-filtro{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-titulo);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-ouro);
}
.bloco-filtro .rotulo-grupo-filtro:hover{ color:var(--tinta); }
.faixa-preco{ display:flex; gap:8px; align-items:center; }
.faixa-preco input{
  width:100%; border:1px solid var(--linha-forte); border-radius:var(--raio);
  padding:8px 10px; font-size:13px; background:var(--branco);
}

.barra-listagem{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.barra-listagem .resultado{ font-size:13px; color:var(--tinta-suave); }
.ordenar{
  display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tinta-suave);
}
.ordenar select{
  border:1px solid var(--linha-forte); border-radius:100px;
  padding:9px 16px; background:var(--branco); font-size:13px; outline:none;
}
.paginacao{
  display:flex; justify-content:center; gap:8px; margin-top:44px;
}
.paginacao button{
  min-width:40px; height:40px; border-radius:50%;
  border:1px solid var(--linha); font-size:13px;
  transition:.2s;
}
.paginacao button:hover{ border-color:var(--ouro); }
.paginacao button.ativo{ background:var(--tinta); color:var(--creme); border-color:var(--tinta); }
.vazio{ text-align:center; padding:70px 20px; color:var(--tinta-suave); }
.vazio img{ width:80px; opacity:.25; margin:0 auto 18px; }

/* =========================================================
   PÁGINA DE PRODUTO
   ========================================================= */
.layout-produto{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px;
  padding-block:34px;
  align-items:start;
}
.galeria{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; }
.miniaturas{ display:grid; gap:12px; align-content:start; }
.miniatura{
  position:relative;
  aspect-ratio:1; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--creme-fundo); display:grid; place-items:center;
  cursor:pointer; transition:.2s; overflow:hidden;
}
.miniatura img{ width:56%; opacity:.3; }
.miniatura.ativa{ border-color:var(--ouro); }
.imagem-principal{
  aspect-ratio:1; border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--creme-fundo); display:grid; place-items:center;
  position:relative; overflow:hidden;
}
.imagem-principal img{ width:52%; opacity:.2; }
.imagem-principal.com-foto,
.miniatura.com-foto{ background:var(--branco); }
.imagem-principal.com-foto .foto-produto,
.miniatura.com-foto .foto-produto{
  width:100%; height:100%; object-fit:cover; opacity:1;
}
/* Mesma regra da vitrine na página do produto */
.imagem-principal.foto-inteira,
.miniatura.foto-inteira{ background:var(--creme-claro); }
.imagem-principal.foto-inteira .foto-produto,
.miniatura.foto-inteira .foto-produto{
  position:absolute; top:10px; left:10px;
  width:calc(100% - 20px); height:calc(100% - 20px);
  object-fit:contain;
}
.miniatura.foto-inteira .foto-produto{
  top:4px; left:4px; width:calc(100% - 8px); height:calc(100% - 8px);
}
.imagem-principal.com-foto .foto-produto{
  transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);
  transition:transform .35s ease;
}
@media (hover: hover) and (pointer: fine){
  .imagem-principal.com-foto:hover .foto-produto{ transform:scale(2.2); cursor:zoom-in; }
}

.imagem-principal .aviso-foto{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-family:var(--font-titulo); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-suave);
}

.info-produto h1{
  font-family:var(--font-titulo); font-weight:300;
  font-size:clamp(22px,2.8vw,32px); letter-spacing:.04em;
  margin:8px 0 12px; line-height:1.25;
}
.avaliacao-linha{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--tinta-suave); margin-bottom:20px; }
.caixa-preco{
  background:var(--creme); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:22px 24px; margin-bottom:24px;
}
.caixa-preco .preco-grande{
  font-family:var(--font-titulo); font-size:34px; font-weight:500; color:var(--tinta);
  display:block; line-height:1.1;
}
.caixa-preco .info-pix{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(72,130,47,.12); color:var(--verde-texto);
  border-radius:100px; padding:6px 14px; font-size:12.5px; font-weight:600;
  margin-top:10px;
}
.caixa-preco .info-parcelas{ font-size:13px; color:var(--tinta-media); display:block; margin-top:10px; }

.variacoes{ margin-bottom:22px; }
.variacoes h4{
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; margin:0 0 10px;
}
.opcoes{ display:flex; gap:9px; flex-wrap:wrap; }
.opcao{
  border:1px solid var(--linha-forte); border-radius:100px;
  padding:9px 18px; font-size:13px; transition:.2s;
}
.opcao:hover{ border-color:var(--ouro); }
.opcao.ativa{ background:var(--tinta); color:var(--creme); border-color:var(--tinta); }

.compra{ display:flex; gap:12px; align-items:stretch; margin-bottom:14px; }
.qtd{
  display:flex; align-items:center; border:1px solid var(--linha-forte);
  border-radius:100px; overflow:hidden;
}
.qtd button{ width:44px; height:100%; font-size:17px; color:var(--tinta-media); }
.qtd button:hover{ color:var(--texto-ouro); }
.qtd input{
  width:44px; text-align:center; border:none; background:none;
  outline:none; font-size:14px; font-weight:600;
}

.calculo-frete{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:20px 22px; margin-block:24px;
}
.calculo-frete h4{
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; margin:0 0 12px;
}
.linha-cep{ display:flex; gap:10px; }
.linha-cep input{
  flex:1; border:1px solid var(--linha-forte); border-radius:100px;
  padding:11px 18px; outline:none; background:var(--branco);
}
.linha-cep button{
  border:1px solid var(--tinta); border-radius:100px; padding:11px 22px;
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.linha-cep button:hover{ background:var(--tinta); color:var(--creme); }
.resultado-frete{ margin-top:14px; font-size:13px; display:grid; gap:8px; }
.resultado-frete .opcao-frete{
  display:flex; justify-content:space-between; padding:10px 0;
  border-bottom:1px dashed var(--linha);
}

.confianca{ display:grid; gap:12px; margin-top:8px; }
.confianca div{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tinta-media); }
.confianca svg{ color:var(--texto-ouro); flex:none; }

.abas{ border-top:1px solid var(--linha); margin-top:22px; }
.cabecalho-abas{ display:flex; gap:6px; border-bottom:1px solid var(--linha); flex-wrap:wrap; }
.cabecalho-abas button{
  padding:16px 20px;
  font-family:var(--font-titulo); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.cabecalho-abas button.ativa{ color:var(--tinta); border-color:var(--ouro); }
.painel-aba{ padding:28px 0; font-size:14.5px; line-height:1.85; color:var(--tinta-media); max-width:78ch; }
.painel-aba h4{ font-family:var(--font-titulo); letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--tinta); margin:22px 0 8px; }
.painel-aba ul{ padding-left:18px; }
.painel-aba li{ margin-bottom:6px; }
.tabela-ficha{ width:100%; border-collapse:collapse; font-size:14px; }
.tabela-ficha td{ padding:11px 0; border-bottom:1px solid var(--linha); }
.tabela-ficha td:first-child{ color:var(--tinta-suave); width:220px; }

/* =========================================================
   CARRINHO LATERAL
   ========================================================= */
.gaveta{
  position:fixed; top:0; right:0; bottom:0; width:min(92vw,420px);
  background:var(--creme-claro); z-index:200;
  transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
  box-shadow:var(--sombra-alta);
}
.gaveta.aberta{ transform:none; }
.gaveta-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--linha); background:var(--creme);
}
.gaveta-topo h3{
  font-family:var(--font-titulo); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; margin:0;
}
.gaveta-corpo{ flex:1; overflow-y:auto; padding:20px 24px; }
.item-carrinho{
  display:grid; grid-template-columns:70px 1fr auto; gap:14px;
  padding-block:16px; border-bottom:1px solid var(--linha);
}
.item-carrinho .thumb{
  aspect-ratio:1; background:var(--creme-fundo); border-radius:var(--raio);
  display:grid; place-items:center;
}
.item-carrinho .thumb img{ width:58%; opacity:.3; }
.item-carrinho h4{ font-size:13px; margin:0 0 4px; font-weight:500; line-height:1.4; }
.item-carrinho .preco-item{ font-family:var(--font-titulo); font-size:15px; font-weight:500; }
.item-carrinho .remover{ font-size:11px; color:var(--tinta-suave); text-decoration:underline; }
.item-carrinho .remover:hover{ color:var(--terra); }
.gaveta-base{
  border-top:1px solid var(--linha); padding:20px 24px;
  background:var(--creme);
}
.linha-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:16px;
}
.linha-total .rotulo{ font-family:var(--font-titulo); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.linha-total .valor{ font-family:var(--font-titulo); font-size:24px; font-weight:500; }
.bloco-cupom{ margin-bottom:14px; }
.linha-cupom{ display:flex; gap:8px; }
.linha-cupom input{
  flex:1; min-width:0;
  border:1px solid var(--linha-forte); border-radius:100px;
  padding:11px 18px; background:var(--branco); outline:none; font-size:13px;
  text-transform:uppercase; letter-spacing:.08em;
}
.linha-cupom input:focus{ border-color:var(--ouro); }
.linha-cupom button{
  border:1px solid var(--tinta); border-radius:100px; padding:11px 20px;
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:.2s; white-space:nowrap;
}
.linha-cupom button:hover{ background:var(--tinta); color:var(--creme); }
.aviso-cupom{
  display:block; margin-top:9px; font-size:12px; color:var(--tinta-suave);
}
.aviso-cupom strong{ color:var(--texto-ouro); letter-spacing:.06em; }
.linha-desconto{
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--sucesso); font-weight:600;
  margin-bottom:10px;
}
.carrinho-vazio{ text-align:center; padding:60px 20px; color:var(--tinta-suave); }
.carrinho-vazio img{ width:76px; opacity:.22; margin:0 auto 16px; }

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px);
  background:var(--tinta); color:var(--creme);
  padding:14px 24px; border-radius:100px; font-size:13px;
  box-shadow:var(--sombra-alta); z-index:300;
  opacity:0; visibility:hidden; transition:.25s;
  display:flex; align-items:center; gap:10px;
}
.toast.visivel{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast svg{ color:var(--ouro-claro); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
  .mega-todas{ grid-template-columns:repeat(3,1fr); gap:12px 16px; }
  .painel-vertical{ min-width:240px; }
  .grade-produtos, .grade-produtos.colunas-5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mega-grade{ grid-template-columns:repeat(3,1fr); }
  .mega-grade .mega-cartao{ display:none; }
  .layout-categoria{ grid-template-columns:1fr; }
  .filtros{ position:static; }
  .editorial-conteudo{ grid-template-columns:1fr; gap:36px; }
  .layout-produto{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:900px){
  .cabecalho-topo{ grid-template-columns:auto 1fr auto; gap:12px; padding-block:12px; }
  .busca{ order:3; grid-column:1/-1; max-width:none; }
  .navegacao{ display:none; }
  .abre-menu{ display:grid; place-items:center; width:40px; height:40px; }
  .marca img{ height:38px; }
  .acoes-cabecalho{ gap:14px; }
  .acao .texto-acao{ display:none; }
  .hero-conteudo{ grid-template-columns:1fr; gap:32px; text-align:center; }
  .hero-botoes{ justify-content:center; }
  .hero p.hero-texto{ margin-inline:auto; }
  .hero-figura{ order:-1; }
  .hero-figura img{ width:min(72%,280px); }
  .grade-beneficios{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .beneficio:nth-child(2n){ border-right:none; }
  .grade-banners{ grid-template-columns:1fr; }
  .grade-depoimentos{ grid-template-columns:1fr; }
  .grade-rodape{ grid-template-columns:1fr 1fr; gap:30px; }
  .lista-valores{ grid-template-columns:1fr; gap:16px; }
  .seta{ display:none; }
}

@media (max-width:640px){
  .barra-anuncio{ font-size:10px; letter-spacing:.06em; padding-inline:12px; }
  .grade-categorias{ gap:22px 16px; }
  .cartao-categoria{ width:92px; }
  .grade-produtos, .grade-produtos.colunas-5{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .trilho{ grid-auto-columns:minmax(170px,1fr); gap:12px; }
  .produto-corpo{ padding:12px 12px 14px; }
  .produto-nome{ font-size:12.5px; }
  .preco{ font-size:17px; }
  .grade-rodape{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:1fr; }
  .miniaturas{ grid-auto-flow:column; grid-auto-columns:64px; overflow-x:auto; }
  .banner{ padding:32px 26px; min-height:200px; }
  .compra{ flex-wrap:wrap; }
  .compra .botao{ width:100%; }
}

/* =========================================================
   LISTA DE OBRIGAÇÃO
   ========================================================= */
.layout-obrigacao{
  display:grid; grid-template-columns:360px minmax(0,1fr); gap:48px;
  padding-block:44px 64px;
  align-items:start;
}

.como-funciona{ position:sticky; top:150px; }
.como-funciona h3{
  font-family:var(--font-titulo); font-weight:300;
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 22px;
}
.passos{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.passos li{ display:flex; gap:16px; }
.passos .numero{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(228,177,49,.55);
  display:grid; place-items:center;
  font-family:var(--font-titulo); font-size:14px; color:var(--texto-ouro);
}
/* só o título do passo é bloco — o negrito dentro da frase continua inline,
   senão a frase quebra em pedaços */
.passos li > div > strong{
  display:block; font-size:14px; margin-bottom:3px; font-weight:600;
}
.passos li > div > span{ display:block; font-size:13px; color:var(--tinta-media); line-height:1.65; }
.passos li > div > span strong{ display:inline; font-weight:600; color:var(--tinta); }
.nota-discricao{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:28px; padding:16px 18px;
  background:var(--creme); border-radius:var(--raio-g);
  font-size:12.5px; color:var(--tinta-media); line-height:1.6;
}
.nota-discricao svg{ color:var(--texto-ouro); flex:none; margin-top:1px; }

.caixa-formulario{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-g);
  padding:38px 40px 34px;
}
.campo{ margin-bottom:20px; }
.campo label{
  display:block; margin-bottom:7px;
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta);
}
.campo label em{
  font-style:normal; text-transform:none; letter-spacing:0;
  font-size:11.5px; color:var(--tinta-suave); font-family:var(--font-texto);
}
.campo input,
.campo textarea{
  width:100%;
  border:1px solid var(--linha-forte); border-radius:var(--raio-g);
  padding:12px 16px; background:var(--creme-claro);
  outline:none; font-size:14px; transition:.2s;
}
.campo textarea{ resize:vertical; line-height:1.6; }
.campo input:focus,
.campo textarea:focus{
  border-color:var(--ouro); background:var(--branco);
  box-shadow:0 0 0 3px rgba(228,177,49,.14);
}
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* Área de upload */
.area-upload{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center;
  border:1.5px dashed rgba(228,177,49,.55);
  border-radius:var(--raio-g);
  padding:34px 20px;
  background:rgba(228,177,49,.05);
  cursor:pointer; transition:.2s;
  text-transform:none !important; letter-spacing:0 !important;
}
.area-upload:hover,
.area-upload.arrastando{
  border-color:var(--ouro); background:rgba(228,177,49,.12);
}
.area-upload svg{ color:var(--texto-ouro); margin-bottom:4px; }
.area-upload strong{
  font-family:var(--font-texto); font-size:14px; font-weight:600; color:var(--tinta);
}
.area-upload span{ font-size:12.5px; color:var(--tinta-suave); }
.area-upload.cheia{ opacity:.5; pointer-events:none; }

.lista-arquivos{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.lista-arquivos li{
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:10px 14px; font-size:13px; background:var(--creme-claro);
}
.icone-arquivo{ color:var(--texto-ouro); display:flex; flex:none; }
.nome-arquivo{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tam-arquivo{ font-size:11.5px; color:var(--tinta-suave); flex:none; }
.tirar-arquivo{ color:var(--tinta-suave); display:flex; flex:none; }
.tirar-arquivo:hover{ color:var(--terra); }
.contador-arquivos{
  display:block; margin-top:9px; font-size:11.5px; color:var(--tinta-suave);
}

.aceite{ margin:6px 0 22px; }
.aceite label{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--tinta-media); line-height:1.55; cursor:pointer;
}
.aceite input{ accent-color:var(--ouro); width:16px; height:16px; margin-top:1px; flex:none; }
.aceite a{ color:var(--texto-ouro); text-decoration:underline; }
.rodape-form{
  margin:14px 0 0; text-align:center;
  font-size:12px; color:var(--tinta-suave);
}

.sucesso-obrigacao{ text-align:center; padding:30px 10px 20px; }
.sucesso-obrigacao img{ width:78px; opacity:.5; margin:0 auto 20px; }
.sucesso-obrigacao h3{
  font-family:var(--font-titulo); font-weight:300;
  font-size:26px; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 12px;
}
.sucesso-obrigacao p{
  font-size:14.5px; color:var(--tinta-media); line-height:1.75;
  max-width:44ch; margin:0 auto 26px;
}

@media (max-width:1100px){
  .layout-obrigacao{ grid-template-columns:1fr; gap:34px; }
  .como-funciona{ position:static; }
}
@media (max-width:640px){
  .caixa-formulario{ padding:26px 22px 24px; }
  .dupla{ grid-template-columns:1fr; gap:0; }
}

/* Linha que ainda não tem produto cadastrado */
.aviso-linha-vazia{
  text-align:center;
  border:1px dashed rgba(228,177,49,.5);
  border-radius:var(--raio-g);
  background:rgba(228,177,49,.05);
  padding:46px 30px;
  margin-bottom:26px;
}
.aviso-linha-vazia img{ width:64px; opacity:.45; margin:0 auto 18px; }
.aviso-linha-vazia h3{
  font-family:var(--font-titulo); font-weight:300;
  font-size:20px; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 10px;
}
.aviso-linha-vazia h3 strong{ color:var(--texto-ouro); font-weight:500; }
.aviso-linha-vazia p{
  font-size:14px; color:var(--tinta-media); line-height:1.7;
  max-width:48ch; margin:0 auto 22px;
}

/* =========================================================
   PÁGINAS DE POLÍTICA
   ========================================================= */
.layout-politica{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px;
  padding-block:44px 70px; align-items:start;
}
.indice-politicas{ position:sticky; top:150px; }
.indice-politicas h3{
  font-family:var(--font-titulo); font-weight:300;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--linha);
}
.indice-politicas ul{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.indice-politicas a{
  display:block; padding:9px 12px; border-radius:var(--raio);
  font-size:13.5px; color:var(--tinta-media); transition:.18s;
}
.indice-politicas a:hover{ background:var(--creme); color:var(--tinta); }
.indice-politicas a.ativo{
  background:rgba(228,177,49,.14); color:var(--tinta); font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(228,177,49,.35);
}
.cartao-duvida{
  margin-top:26px; padding:20px 18px;
  background:var(--creme); border-radius:var(--raio-g); text-align:center;
}
.cartao-duvida p{ font-size:13px; color:var(--tinta-media); margin:0 0 14px; line-height:1.55; }
.cartao-duvida .botao{ width:100%; padding:11px 14px; font-size:10.5px; }

.texto-politica{ max-width:74ch; font-size:15px; line-height:1.85; color:var(--tinta-media); }
.texto-politica h2{
  font-family:var(--font-titulo); font-weight:300;
  font-size:21px; letter-spacing:.06em;
  color:var(--tinta); margin:38px 0 12px; padding-bottom:9px;
  border-bottom:1px solid var(--linha);
}
.texto-politica h2:first-child{ margin-top:0; }
.texto-politica h3{
  font-family:var(--font-titulo); font-weight:500;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-ouro); margin:26px 0 8px;
}
.texto-politica p{ margin:0 0 16px; }
.texto-politica ul,
.texto-politica ol{ margin:0 0 18px; padding-left:22px; }
.texto-politica li{ margin-bottom:8px; }
.texto-politica strong{ color:var(--tinta); font-weight:600; }
.texto-politica a{ color:var(--texto-ouro); text-decoration:underline; }
.texto-politica a:hover{ color:var(--tinta); }

/* trechos que dependem de decisão do ateliê */
.a-definir{
  background:rgba(156,74,47,.1);
  color:var(--terra); font-weight:600;
  border-radius:var(--raio); padding:1px 7px;
  font-size:.92em;
}
.aviso-pendente{
  background:rgba(228,177,49,.1);
  border-left:3px solid var(--ouro);
  border-radius:0 var(--raio-g) var(--raio-g) 0;
  padding:16px 20px; margin-bottom:30px;
  font-size:13.5px; line-height:1.65;
}
.atualizado{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--linha);
  font-size:12.5px; color:var(--tinta-suave); font-style:italic;
}

@media (max-width:1100px){
  .layout-politica{ grid-template-columns:1fr; gap:32px; }
  .indice-politicas{ position:static; }
  .indice-politicas ul{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:6px; }
}

/* Contato no rodapé */
.contato-rodape{
  list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px;
  font-size:13px; color:var(--tinta-media);
}
.contato-rodape a{ transition:.15s; }
.contato-rodape a:hover{ color:var(--texto-ouro); }

/* =========================================================
   CONFIGURADOR DA GUIA PERSONALIZADA
   ========================================================= */
.layout-configurador{
  display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:52px;
  padding-block:44px 70px; align-items:start;
}

.passo{ margin-bottom:46px; }
.passo-topo{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.passo-numero{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(228,177,49,.55); background:rgba(228,177,49,.08);
  display:grid; place-items:center;
  font-family:var(--font-titulo); font-size:14px; color:var(--texto-ouro);
}
.passo-topo h2{
  font-family:var(--font-titulo); font-weight:300;
  font-size:20px; letter-spacing:.08em; text-transform:uppercase;
  margin:4px 0 4px; color:var(--tinta);
}
.passo-topo p{ margin:0; font-size:13.5px; color:var(--tinta-suave); line-height:1.6; }
.aguardando{ font-size:13.5px; color:var(--tinta-suave); font-style:italic; margin:0; }

/* --- fios --- */
.opcoes-fios{ display:flex; flex-wrap:wrap; gap:9px; }
.opcao-fio{
  width:62px;
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:9px 6px 8px;
  display:grid; justify-items:center; gap:0; transition:.16s;
}
.opcao-fio:hover{ border-color:var(--ouro); }
.opcao-fio.ativa{
  border-color:var(--ouro); background:rgba(228,177,49,.12);
  box-shadow:inset 0 0 0 1px var(--ouro);
}
.opcao-fio strong{ font-family:var(--font-titulo); font-size:18px; font-weight:500; line-height:1.2; }
.opcao-fio span{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); }

/* --- modelo --- */
/* quatro modelos lado a lado no desktop */
.opcoes-modelo{ display:grid; grid-template-columns:repeat(var(--colunas,4),1fr); gap:10px; }
.cartao-modelo{
  display:grid; gap:10px; text-align:center; align-content:start;
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:12px 10px 14px; transition:.18s;
}
.cartao-modelo:hover:not(.bloqueada){ border-color:var(--ouro); }
.cartao-modelo.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.1); box-shadow:inset 0 0 0 1px var(--ouro); }
.cartao-modelo.bloqueada{ opacity:.45; cursor:not-allowed; }
.foto-modelo{
  width:100%; aspect-ratio:1; border-radius:var(--raio); overflow:hidden;
  background:var(--creme-fundo);
}
.foto-modelo img{ width:100%; height:100%; object-fit:cover; }
.info-modelo strong{ display:block; font-size:11px; margin-bottom:3px; }
.info-modelo span{ font-size:9.5px; color:var(--tinta-suave); line-height:1.45; }

@media (max-width:900px){
  .opcoes-modelo{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:600px){
  .opcoes-modelo{ grid-template-columns:repeat(2,1fr) !important; }
}

/* --- entidades --- */
.grupo-entidade{ margin-bottom:26px; }
.grupo-entidade h4{
  font-family:var(--font-titulo); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--texto-ouro);
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--linha);
}
.grade-entidades{ display:flex; flex-wrap:wrap; gap:8px; }
.cartao-entidade{
  border:1px solid var(--linha); border-radius:100px;
  background:var(--branco); padding:9px 17px;
  font-size:13px; color:var(--tinta); transition:.16s;
}
.cartao-entidade:hover{ border-color:var(--ouro); }
.cartao-entidade.ativa{
  border-color:var(--ouro); background:rgba(228,177,49,.14);
  box-shadow:inset 0 0 0 1px var(--ouro); font-weight:600;
}
.bolinha{
  width:11px; height:11px; border-radius:50%; display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.2);
}

/* --- cor --- */
.caixa-cor{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--creme); padding:22px 24px;
}
.rotulo-cor{ margin:0 0 12px; font-size:13.5px; color:var(--tinta-media); }
.chips-cor{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.chip-cor{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:100px; padding:7px 15px 7px 11px; font-size:13px;
}
.obs-cor{ margin:0; font-size:12.5px; color:var(--tinta-suave); line-height:1.6; }

/* --- pingentes --- */
.opcoes-pingentes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:12px; }
.opcao-pingente{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:16px 10px; transition:.18s;
  display:grid; justify-items:center; gap:2px;
}
.opcao-pingente:hover{ border-color:var(--ouro); }
.opcao-pingente.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.1); box-shadow:inset 0 0 0 1px var(--ouro); }
.opcao-pingente strong{ font-family:var(--font-titulo); font-size:19px; font-weight:500; }
.opcao-pingente span{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave); }
.nota-moedas{
  margin:16px 0 0; padding:13px 17px;
  background:rgba(228,177,49,.1); border-left:3px solid var(--ouro);
  border-radius:0 var(--raio) var(--raio) 0;
  font-size:13px; color:var(--tinta-media); line-height:1.6;
}

/* --- resumo --- */
.resumo-guia{ position:sticky; top:150px; }
.resumo-caixa{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:24px;
}
.resumo-caixa h3{
  font-family:var(--font-titulo); font-weight:300;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 16px; padding-bottom:11px; border-bottom:1px solid var(--linha);
}
.previa{
  aspect-ratio:1; border-radius:var(--raio-g); overflow:hidden;
  background:var(--creme-fundo); display:grid; place-items:center;
  margin-bottom:18px; position:relative;
}
.previa img{ width:52%; opacity:.25; }
.previa.com-foto img{ width:100%; height:100%; object-fit:cover; opacity:1; }
.previa.com-cor{ background:var(--creme); }
.disco-previa{
  width:58%; aspect-ratio:1; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.15), 0 6px 20px rgba(96,55,17,.14);
}
.previa.com-cor .rotulo-previa{
  color:var(--tinta-media); text-shadow:none; font-size:9.5px;
}
.rotulo-previa{
  position:absolute; bottom:9px; left:0; right:0; text-align:center;
  font-family:var(--font-titulo); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.lista-resumo{ margin:0 0 18px; }
.linha-resumo{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--linha); font-size:13px;
}
.linha-resumo dt{ color:var(--tinta-suave); }
.linha-resumo dd{ margin:0; text-align:right; font-weight:500; color:var(--tinta); }
.linha-resumo.pendente dd{ color:var(--linha-forte); font-weight:400; }
.falta-escolher{
  margin:0; text-align:center; font-size:12.5px;
  color:var(--tinta-suave); font-style:italic;
}
.nota-resumo{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--linha);
  font-size:11.5px; color:var(--tinta-suave); line-height:1.65;
}

@media (max-width:1100px){
  .layout-configurador{ grid-template-columns:1fr; gap:34px; }
  .resumo-guia{ position:static; }
  .previa{ max-width:280px; margin-inline:auto; }
}
@media (max-width:640px){
  .opcoes-fios{ grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:9px; }
  .grade-entidades{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px; }
}

/* Subcategoria que abre página própria */
.sub-com-pagina{ color:var(--texto-ouro) !important; font-weight:500; }
.sub-com-pagina svg{ opacity:.6; }
.link-sub-pagina{
  display:block; padding:4px 0; font-size:13px;
  color:var(--texto-ouro); font-weight:500;
}
.link-sub-pagina:hover{ color:var(--tinta); }


/* Campo de linha da entidade */
.campo-linha{
  margin-top:22px; padding:20px 22px;
  background:var(--creme); border-radius:var(--raio-g);
}
.campo-linha label{
  display:block; margin-bottom:9px;
  font-family:var(--font-titulo);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta);
}
.campo-linha input{
  width:100%; border:1px solid var(--linha-forte); border-radius:var(--raio-g);
  padding:12px 16px; background:var(--branco); outline:none; font-size:14px; transition:.2s;
}
.campo-linha input:focus{ border-color:var(--ouro); box-shadow:0 0 0 3px rgba(228,177,49,.14); }
.dica-linha{ display:block; margin-top:8px; font-size:12px; color:var(--tinta-suave); line-height:1.55; }

/* Acabamento dos pingentes */
.bloco-acabamento{ margin-top:24px; }
.bloco-acabamento h3{
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta); margin:0 0 12px;
}
.opcoes-acabamento{ display:flex; flex-wrap:wrap; gap:11px; }
.opcao-acabamento{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--linha); border-radius:100px;
  background:var(--branco); padding:9px 18px 9px 10px;
  font-size:13.5px; transition:.16s;
}
.opcao-acabamento:hover{ border-color:var(--ouro); }
.opcao-acabamento.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.12); box-shadow:inset 0 0 0 1px var(--ouro); }
.amostra-metal{
  width:22px; height:22px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.2);
}

/* --- passo de cores da guia personalizada --- */
.sub-passo{
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta); margin:0 0 12px;
  display:flex; align-items:center; gap:12px;
}
.contador-cor{
  font-family:var(--font-texto); font-size:11px; letter-spacing:0;
  text-transform:none; color:var(--texto-ouro); font-weight:600;
  background:rgba(228,177,49,.15); border-radius:100px; padding:3px 11px;
}
.sugestao-cor{
  display:flex; align-items:center; gap:14px;
  background:var(--creme); border-radius:var(--raio-g);
  padding:15px 18px; margin-bottom:24px;
  font-size:13px; color:var(--tinta-media); line-height:1.6;
}
.disco-cor.pequeno{ width:34px; height:34px; flex:none; }

.opcoes-qtd-cor{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.opcao-qtd-cor{
  width:62px; border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:9px 6px 8px;
  display:grid; justify-items:center; transition:.16s;
}
.opcao-qtd-cor:hover{ border-color:var(--ouro); }
.opcao-qtd-cor.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.12); box-shadow:inset 0 0 0 1px var(--ouro); }
.opcao-qtd-cor strong{ font-family:var(--font-titulo); font-size:18px; font-weight:500; line-height:1.2; }
.opcao-qtd-cor span{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); }

.bloco-paleta{ border-top:1px solid var(--linha); padding-top:24px; }
.grupo-cor{ margin-bottom:24px; }
.grupo-cor h4{
  font-family:var(--font-titulo); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--texto-ouro);
  margin:0 0 11px; padding-bottom:7px; border-bottom:1px solid var(--linha);
}
.grade-cores{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.cartao-cor{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:10px 6px 9px;
  display:grid; justify-items:center; gap:7px; transition:.16s;
}
.cartao-cor:hover{ border-color:var(--ouro); transform:translateY(-2px); }
.cartao-cor.ativa{
  border-color:var(--ouro); background:rgba(228,177,49,.12);
  box-shadow:inset 0 0 0 1px var(--ouro);
}
.amostra-micanga{
  width:34px; height:34px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.22), inset 2px 3px 5px rgba(255,255,255,.45);
  position:relative;
}
.amostra-micanga::after{
  content:''; position:absolute; inset:38% 38% 38% 38%;
  border-radius:50%; background:rgba(96,55,17,.3);
}
.amostra-micanga.semente{
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.3), inset 2px 3px 6px rgba(255,255,255,.15);
}

.nome-cor{
  font-size:9.5px; line-height:1.35; text-align:center;
  color:var(--tinta-media); text-transform:lowercase;
}

.bloco-arranjo{ margin-top:26px; }
.quantos-modelos{
  display:block; margin-top:6px;
  font-family:var(--font-titulo); font-style:normal;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-ouro);
}

/* Aviso ao lado da caixa, e não embaixo: com número par de firmas há uma
   opção só, e a explicação cabe na coluna vaga. */
.modos-firma.com-nota{
  grid-template-columns:196px minmax(0,1fr) !important;
  max-width:none;
}
.nota-ao-lado{
  align-self:center; margin:0;
  font-size:12.5px; line-height:1.6; color:var(--tinta-suave); max-width:46ch;
}
@media (max-width:640px){
  .modos-firma.com-nota{ grid-template-columns:minmax(0,1fr) !important; }
  .nota-ao-lado{ margin-top:8px; }
}
.nota-gomo{
  grid-column:1/-1; margin:10px 0 0;
  font-size:12.5px; line-height:1.6; color:var(--tinta-suave);
}

/* Cores em três caixas: Miçanga, Miçanga Rajada e Cristal.
   Os quadradinhos seguem o tamanho dos botões de fios. */
.caixa-cor{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--creme-claro); padding:16px 18px 18px; margin-bottom:14px;
}
.caixa-cor h4{ margin-bottom:12px; }
.caixa-so-mostra{ background:var(--creme); }
.nota-caixa-cor{
  margin:-4px 0 12px; font-size:12px; line-height:1.55; color:var(--tinta-suave);
}
.grade-quadrados{
  display:flex !important; flex-wrap:wrap; gap:8px;
}
.quadro-cor{
  width:62px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--branco); padding:8px 4px 7px;
  display:grid; justify-items:center; gap:5px; transition:.16s;
}
.quadro-cor:hover{ border-color:var(--ouro); }
.quadro-cor.ativa{
  border-color:var(--ouro); background:rgba(228,177,49,.12);
  box-shadow:inset 0 0 0 1px var(--ouro);
}
.quadro-cor.mudo{ opacity:.5; }
.amostra-quadro{
  width:28px; height:28px; border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.22), inset 2px 3px 5px rgba(255,255,255,.45);
}
.amostra-quadro.semente{
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.3), inset 2px 3px 6px rgba(255,255,255,.15);
}
.quadro-cor .nome-cor{ font-size:8.5px; }

/* prévia: fio de contas */
.fio-previa{
  display:flex; gap:5px; align-items:center; justify-content:center;
  flex-wrap:wrap; padding:0 14px;
}
.conta-previa{
  width:34px; height:34px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.22), inset 2px 3px 5px rgba(255,255,255,.45);
}

@media (max-width:640px){
  .grade-cores{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; }
}

/* Ficha da entidade escolhida */
.ficha-entidade{
  display:grid; gap:5px;
  margin-top:18px; padding:16px 20px;
  background:rgba(228,177,49,.09);
  border-left:3px solid var(--ouro);
  border-radius:0 var(--raio-g) var(--raio-g) 0;
}
.ficha-entidade strong{
  font-family:var(--font-titulo); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-ouro);
}
.ficha-entidade span{ font-size:13.5px; color:var(--tinta-media); line-height:1.65; }

/* Tamanho da guia */
.opcoes-tamanho{ display:flex; flex-wrap:wrap; gap:11px; }
.opcao-tamanho{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:9px 15px;
  display:grid; justify-items:start; gap:1px; transition:.16s;
}
.opcao-tamanho:hover{ border-color:var(--ouro); }
.opcao-tamanho.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.12); box-shadow:inset 0 0 0 1px var(--ouro); }
.opcao-tamanho .linha-tam{
  font-size:11px; color:var(--tinta-media); white-space:nowrap;
}
.opcao-tamanho .linha-tam strong{
  font-family:var(--font-titulo); font-size:16px; font-weight:600;
  color:var(--tinta); margin-right:4px;
}
.opcao-tamanho .aberta-tam{ font-size:10.5px; color:var(--tinta-suave); }

/* material do fio: cartão mais baixo */
.cartao-fio-material{ padding:11px 15px !important; }
.cartao-fio-material strong{ font-size:13.5px !important; }
.cartao-fio-material span{ font-size:11.5px !important; line-height:1.45 !important; display:block; }

/* Cristais: mais brilho que a miçanga */
.amostra-cristal{
  width:34px; height:34px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.2),
             inset 3px 4px 7px rgba(255,255,255,.7),
             inset -3px -4px 7px rgba(96,55,17,.22);
  position:relative;
}
.amostra-cristal::after{
  content:''; position:absolute; inset:26% 52% 52% 24%;
  border-radius:50%; background:rgba(255,255,255,.75);
}

/* Tamanho do cristal */
/* cristais: mesma caixa das cores */
.opcoes-cristal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.opcao-cristal.bloqueada{ opacity:.35; cursor:not-allowed; }
.opcao-cristal.bloqueada:hover{ border-color:var(--linha); transform:none; }
.bola-cristal{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff,#D6E2EA 55%,#AFC0CC);
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.2);
}
.opcao-cristal .nome-cor{
  font-family:var(--font-titulo); font-size:13px; font-weight:500;
  color:var(--tinta); text-transform:none; letter-spacing:.02em;
}

/* Miniaturas das cores no resumo */
.linha-resumo.com-amostras{ flex-wrap:wrap; }
.amostras-resumo{
  flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px; justify-content:flex-end;
}
.conta-resumo{
  width:22px; height:22px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(96,55,17,.22), inset 2px 2px 4px rgba(255,255,255,.45);
}
.resumo-caixa h3{ margin-bottom:14px; }

/* Cor que já vem de fábrica (guia cigana) */
.cor-fixa{
  display:flex; align-items:center; gap:14px;
  background:rgba(228,177,49,.1);
  border-left:3px solid var(--ouro);
  border-radius:0 var(--raio-g) var(--raio-g) 0;
  padding:14px 18px; margin-bottom:22px;
}
.cor-fixa .amostra-micanga{ flex:none; }
.cor-fixa strong{
  display:block; font-family:var(--font-titulo);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-ouro); margin-bottom:3px;
}
.cor-fixa em{ font-style:normal; font-size:12.5px; color:var(--tinta-media); line-height:1.6; }

/* Contas coloridas na amostra do cristal */
.contas-cristal{
  display:flex; gap:3px; align-items:center; justify-content:center;
  flex-wrap:wrap; max-width:76px;
}
.contas-cristal .bola-cristal{ width:17px; height:17px; }

/* Passante */
.material-passante{
  font-family:var(--font-texto); font-style:normal; font-weight:400;
  font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--tinta-suave);
  margin-left:8px;
}
.cartao-sem-passante .marca-sem{
  width:34px; height:34px; border-radius:50%;
  border:1.5px dashed var(--linha-forte); position:relative;
}
.cartao-sem-passante .marca-sem::after{
  content:''; position:absolute; inset:44% 18%; height:1.5px;
  background:var(--linha-forte); transform:rotate(-45deg);
}

/* Cabeçalho do passante: foto, nome e tamanho lado a lado */
.titulo-passante{
  display:flex; align-items:center; gap:11px;
}
.foto-passante{
  width:38px; height:38px; flex:none; border-radius:var(--raio);
  overflow:hidden; background:var(--creme-fundo);
}
.foto-passante img{ width:100%; height:100%; object-fit:cover; }
.tamanhos-passante{
  display:flex; gap:5px; margin-left:auto; flex:none;
}
.tamanhos-passante.inerte{ opacity:.4; }
.botao-tam{
  width:30px; height:26px; border-radius:100px;
  border:1px solid var(--linha-forte); background:var(--branco);
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.04em;
  color:var(--tinta-media); transition:.16s;
}
.botao-tam:hover:not(:disabled){ border-color:var(--ouro); }
.botao-tam.ativa{
  background:var(--ouro); border-color:var(--ouro); color:#fff; font-weight:600;
}
.botao-tam:disabled{ cursor:default; }
.tamanho-fixo{
  margin-left:auto; flex:none;
  font-family:var(--font-titulo); font-size:11px;
  color:var(--tinta-suave); letter-spacing:.08em;
}

/* Passante: a foto da peça no lugar do círculo de cor */
.cartao-passante{ padding:8px 6px 9px; }
.foto-variante{
  width:100%; aspect-ratio:1; border-radius:var(--raio);
  overflow:hidden; background:var(--branco);
  box-shadow:inset 0 0 0 1px var(--linha);
}
.foto-variante img{ width:100%; height:100%; object-fit:contain; }
.cartao-passante .nome-cor{ margin-top:2px; }

/* Passante escolhido: a foto cresce enquanto o mouse está em cima */
.cartao-passante.com-zoom .foto-variante{
  position:relative; overflow:visible; z-index:1;
}
.cartao-passante.com-zoom .foto-variante img{
  transition:transform .22s ease, box-shadow .22s ease;
  transform-origin:center;
  border-radius:var(--raio);
  background:var(--branco);
}
.cartao-passante.com-zoom:hover{ z-index:5; }
.cartao-passante.com-zoom:hover .foto-variante img{
  transform:scale(2.1);
  box-shadow:0 10px 30px rgba(96,55,17,.28);
}
@media (hover:none){
  .cartao-passante.com-zoom:hover .foto-variante img{ transform:none; box-shadow:none; }
}

/* Material do fio */
.opcoes-fio-material{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; max-width:620px; }
.cartao-fio-material{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:15px 18px; text-align:left;
  display:grid; gap:4px; transition:.16s;
}
.cartao-fio-material:hover{ border-color:var(--ouro); }
.cartao-fio-material.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.12); box-shadow:inset 0 0 0 1px var(--ouro); }
.cartao-fio-material strong{ font-size:14.5px; }
.cartao-fio-material span{ font-size:12.5px; color:var(--tinta-suave); line-height:1.55; }

/* Quantidade de passantes */
.modos-passante{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.cartao-modo{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:12px 18px; min-width:132px;
  display:grid; gap:3px; justify-items:start; transition:.16s;
}
.cartao-modo:hover{ border-color:var(--ouro); }
.cartao-modo.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.12); box-shadow:inset 0 0 0 1px var(--ouro); }
.cartao-modo strong{ font-size:13.5px; }
.cartao-modo span{ font-size:11.5px; color:var(--tinta-suave); }
.cartao-modo .marca-sem{ width:22px; height:22px; margin-bottom:3px; }
.uso-peca{
  margin-left:auto; font-size:10.5px; color:var(--tinta-suave);
  font-family:var(--font-texto); letter-spacing:0; text-transform:none;
  background:var(--creme); border-radius:100px; padding:2px 9px;
}
.uso-peca + .tamanhos-passante{ margin-left:9px; }

/* Como a guia é montada */
.modos-material{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.cartao-material{
  width:118px;
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:8px 8px 10px;
  display:grid; gap:5px; justify-items:center; text-align:center; transition:.16s;
}
.cartao-material:hover{ border-color:var(--ouro); }
.cartao-material.ativa{ border-color:var(--ouro); background:rgba(228,177,49,.12); box-shadow:inset 0 0 0 1px var(--ouro); }
.foto-material{
  width:58px; height:58px; border-radius:var(--raio);
  overflow:hidden; background:var(--creme-fundo);
}
.foto-material img{ width:100%; height:100%; object-fit:cover; }
.cartao-material strong{ font-size:11.5px; line-height:1.25; }
.desc-material{ font-size:10px; color:var(--tinta-suave); line-height:1.4; }


/* Cartão "Sem passante": conteúdo centralizado */
.cartao-modo:first-child{ justify-items:center; text-align:center; }
.cartao-modo:first-child .marca-sem{ margin:2px auto 5px; }
.nota-conjunto{
  font-family:var(--font-texto); font-style:normal; font-size:11px;
  letter-spacing:0; text-transform:none; color:var(--tinta-suave);
}

/* Quantidade de pingentes: caixas do tamanho das de cor */
.opcoes-pingentes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.opcao-pingente{
  border:1px solid var(--linha); border-radius:var(--raio-g);
  background:var(--branco); padding:10px 6px 9px; transition:.16s;
  display:grid; justify-items:center; gap:1px;
}
.opcao-pingente strong{ font-family:var(--font-titulo); font-size:16px; font-weight:500; }
.opcao-pingente span{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); }
.bloco-acabamento .sub-passo{ margin-bottom:12px; }

/* Pingentes: até três modelos lado a lado, nome podendo quebrar linha */
.grade-pingentes{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px 16px; align-items:start;
}
.grupo-pingente{ margin-bottom:0; min-width:0; }
.titulo-pingente{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:0 0 9px; text-align:center;
  font-family:var(--font-titulo); font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta);
}
.nome-pingente{ line-height:1.3; text-wrap:balance; }
.medida-pingente{
  font-family:var(--font-texto); font-style:normal; font-weight:400;
  font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--tinta-suave);
}
.grade-variantes{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
@media (max-width:900px){
  .grade-pingentes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .grade-pingentes{ grid-template-columns:1fr; gap:18px; }
  .grade-variantes{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); }
}

/* ===========================================================
   Configurador: opções em duas fileiras, firma e avisos
   =========================================================== */

/* 10 itens saem 5 e 5, 4 itens saem 2 e 2 */
.opcoes-fios, .opcoes-tamanho, .opcoes-qtd-cor, .opcoes-pingentes,
.modos-material, .modos-firma, .opcoes-acabamento{
  display:grid; grid-template-columns:repeat(var(--colunas,4),minmax(0,1fr));
  gap:10px; align-items:stretch;
}
.opcoes-qtd-cor{ margin-bottom:28px; }
.modos-material, .modos-firma{ margin-bottom:26px; }
.opcoes-fios .opcao-fio, .opcoes-tamanho .opcao-tamanho,
.opcoes-qtd-cor .opcao-qtd-cor, .opcoes-pingentes .opcao-pingente{ width:auto; }

/* Passo 3 — Fio: caixa colada ao texto, na medida do passo Tamanho */
.opcoes-fio-material{
  grid-template-columns:repeat(2,minmax(0,1fr)); max-width:430px; gap:10px;
}
.cartao-fio-material{ padding:11px 13px 12px; gap:2px; }
.cartao-fio-material strong{ font-size:13px; }
.cartao-fio-material span{ font-size:11px; line-height:1.35; }

/* Passo 4 — Modelo: quadrados pela metade, três em cima e três embaixo */
.opcoes-modelo{ gap:10px; }
.cartao-modelo{ padding:8px 7px 10px; gap:7px; }

/* Passo 8 — Passante: a foto ocupa a caixa toda, sem borda branca sobrando */
.cartao-passante{ padding:5px 5px 7px; }
.foto-variante{ background:var(--creme-fundo); box-shadow:none; }
.foto-variante img{ object-fit:cover; transform:scale(1.06); }

/* Grupo com muitas variações ocupa a linha inteira */
.grupo-pingente.grupo-largo{ grid-column:1 / -1; }

/* Atalho dentro do aviso de dependência */
.aguardando .atalho-passo{
  color:var(--dourado-escuro); text-decoration:underline; text-underline-offset:2px;
  white-space:nowrap;
}

/* Aviso de variação de tonalidade */
.aviso-tom{
  margin:26px 0 0; padding:13px 15px;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--creme-fundo); color:var(--tinta-suave);
  font-size:12px; line-height:1.55;
}

/* Rodapé: reforço de contato */
.faixa-achar{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:13px; padding:24px 0; border-top:1px solid rgba(255,255,255,.14);
}
.faixa-achar p{ margin:0; font-size:13.5px; line-height:1.55; max-width:56ch; }
.links-achar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.links-achar .botao{ font-size:12px; padding:9px 16px; }

/* ===========================================================
   Mobile — referência iPhone 13 Pro (390 x 844)
   =========================================================== */
@media (max-width:430px){
  .container{ padding-left:14px; padding-right:14px; }

  .layout-configurador{ display:block; }
  .passo{ padding:18px 15px 20px; }
  .passo-topo{ gap:10px; }
  .passo-topo h2{ font-size:17px; }
  .passo-topo p{ font-size:12.5px; line-height:1.5; }
  .sub-passo{ font-size:11.5px; }

  /* duas fileiras viram grades de 2 a 3 colunas, que é o que cabe em 390 px */
  .opcoes-fios{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:7px; }
  .opcoes-tamanho, .opcoes-qtd-cor, .opcoes-pingentes,
  .modos-material, .modos-firma, .opcoes-acabamento{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px;
  }
  .opcoes-fio-material{ grid-template-columns:1fr !important; max-width:none; }
  .opcoes-modelo{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px; }
  .opcoes-cristal{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* grupos pequenos ficam dois a dois; os de muita variação tomam a linha */
  .grade-pingentes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 9px; }
  .grade-variantes{ grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:6px; }
  .grupo-largo .grade-variantes{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); }
  .grade-cores{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .titulo-pingente{ font-size:10.5px; }
  .medida-pingente{ font-size:9.5px; }
  .cartao-passante .nome-cor{ font-size:9px; line-height:1.25; }
  .grade-entidades{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* o resumo passa a ser uma barra fixa no rodapé da tela */
  .resumo-guia{ position:static; margin-top:20px; }
  .resumo-caixa{ position:static; }

  .links-achar{ width:100%; }
  .links-achar .botao{ flex:1; text-align:center; }
}

/* Cartões de modo (passante, firma, material): o texto quebra em vez de cortar */
.cartao-modo{ min-width:0; }
.cartao-modo strong, .cartao-modo span{ white-space:normal; overflow-wrap:anywhere; }
@media (max-width:430px){
  .cartao-modo{ padding:10px 9px 11px; }
  .cartao-modo strong{ font-size:12px; }
  .cartao-modo span{ font-size:10px; line-height:1.3; }
}

/* Produto com variação de cor ou tamanho */
.selo-variacoes{
  display:block; margin:2px 0 6px; font-family:var(--font-texto); font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-suave);
}
.bloco-variacoes{ margin:18px 0 4px; }
.bloco-variacoes h4{
  margin:0 0 9px; font-family:var(--font-texto); font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-suave);
}
.opcoes-variacao{ display:flex; flex-wrap:wrap; gap:8px; }
.opcoes-variacao .opcao{ text-decoration:none; }

/* Filtros recolhidos no celular */
.abrir-filtros{ display:none; }
@media (max-width:430px){
  .layout-categoria{ display:block; }
  .abrir-filtros{
    display:flex; align-items:center; gap:8px; width:100%;
    margin:0 0 14px; padding:11px 14px;
    border:1px solid var(--linha-forte); border-radius:var(--raio);
    background:var(--branco); color:var(--tinta); cursor:pointer;
    font-family:var(--font-texto); font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .filtros{ position:static; display:none; margin-bottom:18px; }
  .filtros.aberta{ display:block; }
  .grade-produtos{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px; }
  .barra-listagem{ flex-wrap:wrap; gap:10px; }
  .produto-nome{ font-size:12.5px; line-height:1.35; overflow-wrap:anywhere; hyphens:auto; }
  .produto-corpo{ padding:10px 10px 12px; }
  .botao-comprar{ font-size:11px; padding:9px 10px; }
  .produto-precos .preco{ font-size:15px; }
  .parcelas, .preco-pix, .produto-categoria{ font-size:10px; }
  a.whatsapp{ bottom:14px; right:14px; width:48px; height:48px; }
}

/* As duas fileiras não precisam ocupar a largura toda do passo */
.opcoes-fios{ max-width:520px; }
.opcoes-tamanho{ max-width:430px; }
.opcoes-qtd-cor{ max-width:430px; }
.opcoes-pingentes{ max-width:520px; }
.modos-material{ max-width:680px; }
.modos-passante{ max-width:560px; }
/* Passo 10 — arranjo das firmas: caixa curta. Com uma opção só (número
   par de firmas) a caixa larga ficava desproporcional na tela. */
.modos-firma{
  max-width:660px;
  grid-template-columns:repeat(var(--colunas,3),minmax(0,196px)) !important;
  justify-content:start;
}
.modos-firma .cartao-modo{ min-width:0; padding:11px 13px 12px; }
.modos-firma .cartao-modo strong{ font-size:12.5px; }
.modos-firma .cartao-modo span{ font-size:11px; line-height:1.45; }
.opcoes-acabamento{ max-width:420px; }
.opcoes-cristal{ max-width:340px; }

/* Passo 4 — Modelo: a grade fica na metade da largura, então cada quadrado
   sai com metade do tamanho e os seis continuam em duas fileiras de três. */
.opcoes-modelo{ max-width:410px; }
.foto-modelo{ aspect-ratio:1; max-height:none; }
.foto-modelo img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:430px){
  .opcoes-fios, .opcoes-tamanho, .opcoes-qtd-cor, .opcoes-pingentes,
  .modos-material, .modos-passante, .modos-firma, .opcoes-acabamento,
  .opcoes-cristal{ max-width:none; }
  .foto-modelo{ max-height:130px; }
}


/* Quantidade de cores: botão do tamanho de antes, ainda em duas fileiras */
.opcoes-qtd-cor{ max-width:290px; }
@media (max-width:430px){ .opcoes-qtd-cor{ max-width:none; } }

/* Aviso de dependência: uma linha só, ocupando a largura do passo */
.aguardando{
  grid-column:1 / -1; width:100%; max-width:none;
  white-space:normal; text-wrap:nowrap;
}
@media (max-width:560px){ .aguardando{ text-wrap:pretty; } }

/* O container da grade limita a largura, mas o aviso não pode ficar espremido */
.opcoes-modelo:has(.aguardando),
.opcoes-qtd-cor:has(.aguardando),
.opcoes-cristal:has(.aguardando),
.modos-firma:has(.aguardando),
.opcoes-fio-material:has(.aguardando),
.modos-material:has(.aguardando){ max-width:none; grid-template-columns:1fr; }

/* Montagem que não vale para a quantidade de fios escolhida */
.cartao-material.bloqueada{ opacity:.42; cursor:not-allowed; }
.cartao-material.bloqueada .desc-material{ font-style:italic; }

/* Preço de cada variação, quando elas não custam o mesmo */
.opcoes-variacao .opcao{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px; line-height:1.3;
}
.preco-variacao{
  font-style:normal; font-size:10.5px; letter-spacing:0; text-transform:none;
  color:var(--tinta-suave);
}
.opcoes-variacao .opcao.ativa .preco-variacao{ color:inherit; opacity:.85; }

/* Faixa de contato dentro da página (fim do passo 10) */
.faixa-achar-pagina{
  margin:30px 0 0; padding:26px 22px; border:1px solid var(--linha);
  border-radius:var(--raio); background:var(--creme-fundo); color:var(--tinta);
}
.faixa-achar-pagina .botao-primario{
  background:var(--ouro); border-color:var(--ouro); color:var(--tinta);
}
.faixa-achar-pagina .botao-fantasma{
  border-color:var(--ouro); color:var(--dourado-escuro); background:transparent;
}


/* Destaque da Guia Personalizada no menu do celular */
.menu-mobile .destaque-guia{
  display:block; padding:14px 20px; background:var(--creme-fundo);
  border-bottom:1px solid var(--linha); text-decoration:none;
}
.menu-mobile .destaque-guia strong{
  display:block; font-size:13.5px; font-weight:600; color:var(--dourado-escuro);
}
.menu-mobile .destaque-guia span{
  display:block; margin-top:3px; font-size:11px; letter-spacing:0;
  text-transform:none; color:var(--tinta-suave);
}

/* Bandeiras de pagamento */
.selos-pagamento{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.selos-pagamento .selo{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:44px; height:26px; padding:0 8px;
  background:#fff; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.selos-pagamento .selo svg{ width:26px; height:16px; display:block; }
.selos-pagamento .selo em{
  font-style:normal; font-family:var(--font-texto); font-size:9px; font-weight:700;
  letter-spacing:.06em; color:#3A3733;
}
.selo-pix svg{ fill:#32BCAD; stroke:none; }
.selo-visa em{ color:#1A1F71; font-size:11px; letter-spacing:.1em; }
.selo-amex em{ color:#006FCF; font-size:10px; }
.selo-hiper em{ color:#B3131B; font-size:10px; }
.selo-master svg, .selo-elo svg{ stroke:none; }
.selo-master em, .selo-elo em, .selo-pix em, .selo-boleto em, .selo-seguro em{ display:none; }
.selo-boleto svg{ stroke:#2A2A2A; stroke-width:1.6; fill:none; }
.selo-seguro svg{ stroke:#2E7D4F; stroke-width:1.6; fill:none; }
.selo-master, .selo-elo, .selo-pix, .selo-boleto, .selo-seguro{ min-width:40px; }

/* Páginas simples (rastreio, FAQ, contato) */
.pagina-simples{ max-width:820px; padding-top:34px; padding-bottom:46px; }
.forma-rastreio{
  margin:0 0 30px; padding:20px 22px; border:1px solid var(--linha);
  border-radius:var(--raio); background:var(--creme-fundo);
}
.forma-rastreio label{
  display:block; margin-bottom:8px; font-family:var(--font-texto); font-size:11px;
  font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-suave);
}
.linha-rastreio{ display:flex; gap:9px; flex-wrap:wrap; }
.linha-rastreio input{
  flex:1 1 220px; padding:11px 14px; border:1px solid var(--linha-forte);
  border-radius:var(--raio); background:var(--branco); font-size:14px; letter-spacing:.06em;
  text-transform:uppercase;
}
.linha-rastreio input:focus{ outline:none; border-color:var(--ouro); }
.dica-rastreio{
  display:block; margin-top:9px; font-size:11.5px; color:var(--tinta-suave);
}
@media (max-width:430px){
  .faixa-achar-pagina{ padding:20px 16px; }
}

/* Cabeçalho no celular: nada encavala */
@media (max-width:430px){
  .cabecalho-topo{ grid-template-columns:auto 1fr auto !important; gap:8px; }
  .marca img{ height:34px; }
  .acoes-cabecalho .texto-acao{ display:none; }
  .acoes-cabecalho{ gap:6px; }
  .selos-pagamento{ justify-content:center; }
}

/* Total da guia no checklist */
.total-guia{
  display:flex; flex-direction:column; gap:2px;
  margin:18px 0 16px; padding:15px 16px;
  border:1px solid var(--ouro); border-radius:var(--raio);
  background:var(--creme-fundo);
}
.rotulo-total{
  font-family:var(--font-texto); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave);
}
.total-guia strong{
  font-family:var(--font-titulo); font-size:27px; font-weight:600;
  letter-spacing:.02em; color:var(--dourado-escuro); line-height:1.1;
}
.total-guia .total-pendente{ color:var(--linha-forte); }
.nota-total{ margin-top:3px; font-size:11px; line-height:1.4; color:var(--tinta-suave); }

/* Guia personalizada dentro da sacola */
.item-guia{ background:var(--creme-fundo); border-radius:var(--raio); padding:10px; }
.ficha-guia{ margin:6px 0 4px; }
.ficha-guia summary{
  cursor:pointer; font-family:var(--font-texto); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--dourado-escuro);
}
.ficha-guia dl{ margin:8px 0 0; display:grid; gap:3px; }
.ficha-guia dl div{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; }
.ficha-guia dt{ color:var(--tinta-suave); }
.ficha-guia dd{ margin:0; text-align:right; }
.reserva-guia{
  display:inline-block; margin:6px 0 4px; padding:3px 9px; border-radius:100px;
  background:var(--ouro); color:var(--tinta);
  font-family:var(--font-texto); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}

/* Separação dos gomos, na trançada 1 */
.bloco-gomo{ margin-top:22px; }
.opcoes-gomo{
  display:grid; grid-template-columns:repeat(var(--colunas,2),minmax(0,1fr));
  gap:10px; max-width:440px;
}
@media (max-width:430px){ .opcoes-gomo{ max-width:none; } }

/* ===========================================================
   Configurador: texto centralizado dentro de cada caixa
   =========================================================== */
.opcao-fio, .opcao-tamanho, .opcao-qtd-cor, .opcao-pingente,
.cartao-fio-material, .cartao-modelo, .cartao-material, .cartao-modo,
.cartao-entidade, .cartao-cor, .cartao-passante, .opcao-cristal,
.opcao-acabamento, .botao-tam{
  text-align:center;
}
.cartao-fio-material, .cartao-material, .cartao-modo{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.cartao-modelo .info-modelo{ text-align:center; }
.cartao-modelo .info-modelo strong,
.cartao-modelo .info-modelo span{ display:block; text-align:center; }
.opcoes-acabamento .opcao-acabamento{ justify-content:center; }
.titulo-passante{ justify-content:center; text-align:center; }
.titulo-passante > span{ text-align:center; }
.grupo-cor > h4{ text-align:center; }

/* os itens dentro da caixa também no centro, não só o texto */
.opcao-fio, .opcao-tamanho, .opcao-qtd-cor, .opcao-pingente,
.cartao-cor, .cartao-passante, .opcao-cristal, .cartao-entidade{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.opcao-tamanho .linha-tam, .opcao-tamanho .aberta-tam{ text-align:center; width:100%; }
.cartao-modo strong, .cartao-modo span,
.cartao-fio-material strong, .cartao-fio-material span,
.cartao-material strong, .cartao-material span{ text-align:center; width:100%; }
.opcao-acabamento{ display:inline-flex; align-items:center; gap:8px; }

/* ===========================================================
   ACENTOS DA PALETA
   O ouro é a marca. Terra e ouro escuro fazem o acento quente;
   as cores de apoio ficam nos botões e nas etiquetas.
   =========================================================== */

/* Ornamento das seções */
.ornamento::before{ background:linear-gradient(90deg,transparent,var(--ouro-claro),var(--ouro)); }
.ornamento::after { background:linear-gradient(270deg,transparent,var(--ouro-claro),var(--ouro)); }

.subtitulo-secao{ color:var(--texto-ouro); }

/* Navegação: o traço que sobe no hover */
.lista-nav > li > a::after,
.lista-nav > li > button::after{
  background:linear-gradient(90deg,var(--ouro),var(--terra));
}

/* Sacola e favorito */
.contador-carrinho{ background:var(--acao); color:var(--sobre-apoio); }
/* O favorito volta ao terra da regra base: sobre o círculo branco o
   ouro dá 2,9:1, abaixo do 3:1 que um ícone precisa; o terra dá 5,1:1.
   (O laranja que estava aqui dava 2,7:1 — era o pior dos três.) */

/* Vitrine */
.produto-categoria{ color:var(--texto-ouro); }
.selo-variacoes{ color:var(--texto-ouro); }
.link-ver-tudo{ color:var(--texto-ouro); border-color:rgba(161,93,30,.35); }
.link-ver-tudo:hover{ color:var(--tinta); border-color:var(--tinta); }
.produto:hover{ border-color:rgba(228,177,49,.55); }

.hero-selo{ border-color:rgba(228,177,49,.55); }

/* Rodapé */
.rodape h5{ position:relative; padding-bottom:9px; }
.rodape h5::after{
  content:''; position:absolute; left:0; bottom:0; width:26px; height:2px;
  background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));
}
.rodape ul a:hover{ color:var(--ouro-claro); }
.redes a:hover{ color:var(--ouro-claro); border-color:var(--ouro-claro); }

/* Configurador */
.passo-numero{ background:rgba(228,177,49,.12); }
.sub-passo{ color:var(--texto-ouro); }
.contador-cor{ background:rgba(228,177,49,.20); color:var(--tinta); }

.busca input:focus{ box-shadow:0 0 0 3px rgba(228,177,49,.20); }
.campo input:focus, .campo textarea:focus,
.campo-linha input:focus{ box-shadow:0 0 0 3px rgba(228,177,49,.20); }

/* Políticas e páginas de texto */
.texto-politica h2{ position:relative; padding-left:14px; }
.texto-politica h2::before{
  content:''; position:absolute; left:0; top:.25em; bottom:.25em; width:3px;
  border-radius:2px; background:linear-gradient(180deg,var(--ouro),var(--terra));
}
.indice-politicas ul a.ativo{ border-left-color:var(--ouro); }

/* Passos da Lista de Obrigação */
.passos .numero{
  border-color:rgba(228,177,49,.55);
  background:rgba(228,177,49,.14); color:var(--texto-ouro);
}

/* Faixa de contato e newsletter */
.faixa-achar strong{ color:var(--texto-ouro); }
.faixa-achar-pagina strong{ color:var(--texto-ouro); }
.newsletter h2 em{ color:var(--ouro-claro); font-style:normal; }
.migalhas a:hover{ color:var(--texto-ouro); }

/* ===========================================================
   Cores de apoio nos lugares que o ateliê definiu
   O branco reprova em contraste sobre as três cores claras de
   apoio, então a letra nelas é a tinta escura da marca.
   =========================================================== */

/* Destaque e etiqueta de oferta
   O laranja saiu da interface: a etiqueta e o favorito usam o mesmo
   ouro do botão da lupa. A letra continua sendo a tinta escura —
   sobre o ouro ela dá 7,6:1, bem acima do mínimo. */
.etiqueta-oferta{ background:var(--ouro); color:var(--sobre-apoio); }
.preco-cheio{ color:var(--terra); }

/* Botões: ação em azul */
.botao-primario,
.nav-destaque,
.form-newsletter .botao{ background:var(--acao); border-color:var(--acao); color:var(--sobre-apoio) !important; }
.botao-primario:hover,
.nav-destaque:hover,
.form-newsletter .botao:hover{ background:#1FA5F5; border-color:#1FA5F5; }

/* Botões de envio: verde — inclui todo botão que leva ao WhatsApp.
   O cadastro de atacado fica de fora: ali o envio é azul, como o resto
   dos botões de ação da página. */
.botao-envio,
[data-enviar], [data-enviar-lista],
[type="submit"].botao-primario:not(.forma-atacado *):not(.forma-entrar-atacado *),
a.whatsapp,
a.botao[href*="wa.me"], a.botao[href*="whatsapp"]{
  background:var(--envio); border-color:var(--envio); color:var(--sobre-apoio) !important;
}
.botao-envio:hover,
[data-enviar]:hover, [data-enviar-lista]:hover,
[type="submit"].botao-primario:not(.forma-atacado *):not(.forma-entrar-atacado *):hover,
a.botao[href*="wa.me"]:hover, a.botao[href*="whatsapp"]:hover{
  background:#69CC41; border-color:#69CC41;
}

/* =========================================================
   ATACADO
   ========================================================= */
.atacado-colunas{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start;
}
.atacado-cadastro h2{
  font-family:var(--font-titulo); font-weight:300; font-size:22px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta); margin:0 0 8px;
}
.atacado-intro{ font-size:14px; line-height:1.7; color:var(--tinta-media); margin:0 0 22px; max-width:56ch; }
.forma-atacado{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.forma-atacado label{
  display:grid; gap:6px;
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-ouro);
}
.forma-atacado label:first-child,
.forma-atacado label:nth-child(2){ grid-column:1/-1; }
.forma-atacado input[type="text"],
.forma-atacado input:not([type]),
.forma-atacado input[type="email"]{
  font-family:var(--font-texto); font-size:14px; color:var(--tinta);
  background:var(--branco); border:1px solid var(--linha-forte);
  border-radius:var(--raio); padding:12px 14px; text-transform:none; letter-spacing:0;
}
.forma-atacado input:focus{ outline:none; border-color:var(--ouro); }
.erro-campo{
  font-family:var(--font-texto); font-size:11.5px; letter-spacing:0;
  text-transform:none; color:#A32C13;
}
.atacado-minimo{
  grid-column:1/-1; margin:4px 0 0;
  background:var(--creme-fundo); border-radius:var(--raio);
  padding:14px 16px; font-size:13px; line-height:1.65; color:var(--tinta-media);
}
.atacado-minimo strong{ color:var(--tinta); }
.aceite-atacado{
  grid-column:1/-1;
  display:flex !important; align-items:flex-start; gap:10px;
  font-family:var(--font-texto) !important; font-size:13px !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--tinta-media) !important;
}
.aceite-atacado input{ margin-top:2px; accent-color:var(--acao); }
.forma-atacado > button{ grid-column:1/-1; justify-self:start; }
.erro-formulario{
  grid-column:1/-1; margin:0; font-size:13px; color:#A32C13;
}

.atacado-lado{ display:grid; gap:18px; }
.atacado-caixa{
  background:var(--creme-claro); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:22px;
}
.atacado-caixa h3{
  font-family:var(--font-titulo); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-ouro); margin:0 0 12px;
}
.passos-atacado{ margin:0; padding-left:18px; display:grid; gap:10px; font-size:13px; line-height:1.6; color:var(--tinta-media); }
.passos-atacado strong{ color:var(--tinta); }
.atacado-ajuda{ margin:0; font-size:13px; line-height:1.65; color:var(--tinta-media); }
.atacado-ajuda a, .passos-atacado a{ color:var(--texto-ouro); text-decoration:underline; }
.forma-entrar-atacado{ display:grid; gap:12px; }
.forma-entrar-atacado label{
  display:grid; gap:6px;
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-ouro);
}
.forma-entrar-atacado input{
  font-family:var(--font-texto); font-size:14px; color:var(--tinta);
  background:var(--branco); border:1px solid var(--linha-forte);
  border-radius:var(--raio); padding:11px 13px; letter-spacing:0; text-transform:none;
}
.forma-entrar-atacado input:focus{ outline:none; border-color:var(--ouro); }

.atacado-recibo{
  max-width:52ch; margin:0 auto; text-align:center; display:grid; gap:14px; justify-items:center;
}
.atacado-recibo h2{
  font-family:var(--font-titulo); font-weight:300; font-size:24px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta); margin:0;
}
.atacado-recibo p{ margin:0; font-size:14px; line-height:1.7; color:var(--tinta-media); }

/* Faixa do catálogo de atacado */
.faixa-atacado{ background:var(--terra); color:var(--branco); }
.faixa-atacado .container{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; padding-block:12px; text-align:center;
}
.faixa-atacado p{ margin:0; font-size:13px; line-height:1.5; }
.faixa-atacado-marca{
  font-family:var(--font-titulo); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5); border-radius:100px; padding:5px 12px;
}
.faixa-atacado-loja{
  margin-left:auto; font-size:12.5px; opacity:.9;
}
/* O caminho de volta fica na própria faixa, não escondido no menu:
   quem entrou no atacado sem querer precisa de saída à vista. */
a.botao-sair-atacado{ text-decoration:none; display:inline-block; }
.botao-sair-atacado{
  font-family:var(--font-titulo); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:1px solid rgba(255,255,255,.5); border-radius:100px;
  color:var(--branco); padding:6px 14px; cursor:pointer;
}
.botao-sair-atacado:hover{ background:rgba(255,255,255,.14); }
.topo-atacado{ padding-block:34px 20px; }
.topo-atacado h2{
  font-family:var(--font-titulo); font-weight:300; font-size:clamp(24px,3vw,32px);
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta); margin:0;
}
.atacado-vazio{
  max-width:56ch; margin:30px auto 60px; text-align:center;
  font-size:14px; line-height:1.75; color:var(--tinta-media);
}

@media (max-width:900px){
  .atacado-colunas{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:560px){
  .forma-atacado{ grid-template-columns:1fr; }
  .faixa-atacado-loja{ margin-left:0; }
}

/* Promoção no menu do celular: pílula azul, como no cabeçalho */
.menu-mobile > ul > li > a.menu-promocao{
  display:inline-flex; align-items:center; gap:6px;
  margin:12px 20px; padding:9px 16px;
  background:var(--acao); color:var(--sobre-apoio) !important;
  border:0; border-radius:999px;
  font-size:12.5px; letter-spacing:.1em;
}

/* Verde escuro onde o claro ficaria ilegível */
.preco-pix{ color:var(--verde-texto); }

/* Acabamento: dá para marcar mais de um */
.dica-sub{
  font-family:var(--font-texto); font-size:10.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--tinta-suave);
  margin-left:8px;
}

/* Sucesso da Lista de Obrigação */
.nota-envio{
  margin:14px auto 0; max-width:46ch;
  font-size:12.5px; line-height:1.6; color:var(--tinta-suave);
}
.acoes-sucesso{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px;
}

/* Regra do cupom de boas-vindas */
.regra-cupom{
  margin:10px 0 0; font-size:12px; line-height:1.55;
  color:rgba(250,241,220,.66);
}
/* o bloco revelado tem fundo escuro: a regra precisa de tom claro */
.cupom-revelado .regra-cupom{
  color:var(--ouro-claro);
  margin-top:12px; padding-top:11px;
  border-top:1px solid rgba(250,241,220,.18);
}
.cupom-revelado .regra-cupom strong{ color:var(--branco); }

/* Categoria dentro do passo dos pingentes */
.titulo-categoria{
  grid-column:1 / -1;
  margin:26px 0 14px; padding-bottom:8px;
  border-bottom:1px solid var(--linha);
  font-family:var(--font-titulo); font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dourado-escuro);
  text-align:center;
}
.titulo-categoria::before{ content:'✦ '; color:var(--ouro); }

/* =========================================================
   CHECKOUT
   Desenhado primeiro para o celular: 80% das vendas vêm de lá.
   O rótulo mora dentro do campo e sobe quando há conteúdo —
   assim cada campo ocupa uma linha em vez de duas, e três
   campos cabem onde antes cabia um.
   ========================================================= */
.passos-checkout{
  display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none;
  margin:14px 0 4px; padding:0;
  font-family:var(--font-titulo); font-size:.78rem; letter-spacing:.03em;
  color:var(--tinta-suave);
}
.passos-checkout li{ display:flex; align-items:center; gap:6px; }
.marca-passo{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--linha-forte); font-size:.72rem; color:var(--tinta-suave);
  flex:0 0 20px;
}
.passos-checkout .passo-feito{ color:var(--verde-texto); }
.passos-checkout .passo-feito .marca-passo{ border-color:var(--verde-texto); color:var(--verde-texto); }
.passos-checkout .passo-atual{ color:var(--tinta); font-weight:500; }
.passos-checkout .passo-atual .marca-passo{ background:var(--ouro); border-color:var(--ouro); color:var(--branco); }

.grade-checkout{
  display:grid; grid-template-columns:1fr 340px; gap:18px;
  align-items:start; padding-block:10px 32px;
}
.bloco-checkout{
  background:var(--branco); border:1px solid var(--linha); border-radius:13px;
  padding:15px 16px; margin-bottom:11px;
}
.bloco-checkout h2{
  font-family:var(--font-titulo); font-weight:400; font-size:1rem;
  color:var(--tinta); margin:0 0 11px;
}

/* ---------- Campos com rótulo por dentro ----------
   Tudo escopado em .campos-checkout: `.campo` já existe no formulário
   da Lista de Obrigação, e sem o escopo estas regras iam para lá —
   empilhavam os pares e trocavam o espaçamento dos campos. */
.campos-checkout{ display:grid; grid-template-columns:repeat(12,1fr); gap:9px; }
.campos-checkout .campo{ grid-column:span 12; position:relative; }
.campos-checkout .campo-metade{ grid-column:span 6; }
.campos-checkout .campo-terco{ grid-column:span 4; }
.campos-checkout .campo-doisTercos{ grid-column:span 8; }
.campos-checkout .campo-quarto{ grid-column:span 3; }

.campos-checkout .campo input,
.campos-checkout .campo textarea{
  width:100%; box-sizing:border-box;
  border:1px solid var(--linha-forte); border-radius:9px;
  padding:19px 11px 7px;
  font:inherit; font-size:.92rem; color:var(--tinta); background:var(--creme-claro);
}
.campos-checkout .campo input:focus,
.campos-checkout .campo textarea:focus{
  outline:none; border-color:var(--ouro); background:var(--branco);
}
.campos-checkout .campo input[readonly]{ color:var(--tinta-suave); }
.campos-checkout .campo > span{
  position:absolute; left:12px; top:6px;
  font-size:.68rem; letter-spacing:.02em; color:var(--tinta-suave);
  pointer-events:none; transition:.15s;
  max-width:calc(100% - 24px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
/* campo vazio: o rótulo desce e vira o texto de dentro */
.campos-checkout .campo input:placeholder-shown:not(:focus) + span{
  top:50%; transform:translateY(-50%); font-size:.9rem; color:var(--tinta-suave);
}
.campos-checkout .campo input:focus + span,
.campos-checkout .campo textarea:focus + span{ color:var(--texto-ouro); }
.nota-campo{ margin:9px 0 0; font-size:.79rem; color:var(--tinta-suave); }
.nota-topo{ margin:0 0 10px; }

/* ---------- A promessa do frete único ---------- */
.faixa-frete-unico{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:5px;
  margin:0 0 11px; padding:11px 13px;
  background:var(--envio); color:var(--sobre-apoio);
  border-radius:10px; font-size:.87rem; line-height:1.4;
}
.faixa-frete-unico strong{
  font-family:var(--font-titulo); font-size:1.04rem; font-weight:500;
}

/* ---------- Entregas ---------- */
.envio-centro{
  border:1px solid var(--linha); border-radius:11px;
  padding:11px 12px 4px; margin-bottom:10px; background:var(--creme-claro);
}
.cabeca-envio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; margin-bottom:8px; }
.selo-envio{
  font-family:var(--font-titulo);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--tinta); color:var(--creme);
  padding:2px 8px; border-radius:100px;
}
.cabeca-envio strong{
  font-family:var(--font-titulo); font-weight:400; font-size:.98rem; color:var(--tinta);
}
.itens-envio{ flex:1 0 100%; font-size:.78rem; color:var(--tinta-suave); }

/* As opções ficam lado a lado, não em lista: o Melhor Envio devolve
   PAC, SEDEX, Jadlog, Azul, Loggi — em coluna isso empurraria o resumo
   para fora da tela no celular. Em grade, quatro ocupam a altura de duas.

   Tudo aqui é escopado em .opcoes-frete de propósito: `.opcao-frete`
   já existe na calculadora de frete da página de produto, e sem o
   escopo estas regras vazariam para lá. */
.opcoes-frete{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:7px; margin-bottom:4px;
}
.opcoes-frete .opcao-frete{
  position:relative;
  display:flex; flex-direction:column; gap:1px; align-items:stretch;
  border:1px solid var(--linha-forte); border-radius:10px;
  padding:9px 10px 10px; margin:0; cursor:pointer;
  background:var(--branco); transition:border-color .15s, box-shadow .15s;
}
.opcoes-frete .opcao-frete:hover{ border-color:var(--ouro); }
.opcoes-frete .opcao-frete:has(input:checked){
  border-color:var(--ouro); box-shadow:0 0 0 1px var(--ouro) inset;
  background:var(--creme-claro);
}
/* O rádio sai do fluxo e vira um sinal no canto: numa grade estreita
   ele roubava a largura de que o nome do serviço precisa. */
.opcoes-frete .opcao-frete input{ position:absolute; opacity:0; pointer-events:none; }
.marca-frete{
  position:absolute; top:8px; right:8px;
  width:15px; height:15px; border-radius:50%;
  border:1px solid var(--linha-forte); background:var(--branco);
}
.opcoes-frete .opcao-frete:has(input:checked) .marca-frete{
  border-color:var(--ouro); background:var(--ouro);
  box-shadow:inset 0 0 0 2.5px var(--branco);
}
.opcoes-frete .opcao-frete input:focus-visible ~ .marca-frete{
  outline:2px solid var(--acao); outline-offset:2px;
}
.opcoes-frete .nome-frete{
  font-family:var(--font-titulo); font-size:.92rem; color:var(--tinta);
  padding-right:18px; line-height:1.2;
}
.opcoes-frete .transp-frete{ font-size:.72rem; color:var(--tinta-suave); }
.opcoes-frete .prazo-frete{ font-size:.76rem; color:var(--tinta-suave); margin-top:3px; }
.opcoes-frete .preco-frete{
  font-family:var(--font-titulo); font-size:1.02rem; color:var(--tinta); margin-top:3px;
}

/* ---------- Resumo ---------- */
.resumo-checkout{
  background:var(--creme); border:1px solid var(--linha); border-radius:13px;
  padding:15px 16px; position:sticky; top:12px;
}
.resumo-checkout h2{
  font-family:var(--font-titulo); font-weight:400; font-size:1rem;
  color:var(--tinta); margin:0 0 10px;
}
.itens-resumo{ list-style:none; margin:0 0 10px; padding:0; }
.itens-resumo li{
  display:grid; grid-template-columns:24px 1fr auto; gap:7px;
  padding:6px 0; border-bottom:1px solid var(--linha);
  font-size:.85rem; color:var(--tinta);
}
.qtd-resumo{ color:var(--tinta-suave); }
.valor-resumo{ white-space:nowrap; }

.cupom-resumo{ display:flex; gap:6px; margin:11px 0 6px; }
.cupom-resumo input{
  flex:1; min-width:0; border:1px solid var(--linha-forte); border-radius:9px;
  padding:8px 10px; font:inherit; font-size:.87rem; background:var(--branco); color:var(--tinta);
}
.cupom-resumo .botao{ padding:8px 13px; font-size:.8rem; }
.cupom-ok{ margin:0 0 9px; font-size:.8rem; color:var(--verde-texto); }

.contas-resumo{ margin:0 0 9px; }
.contas-resumo > div{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:.87rem; }
.contas-resumo dt{ color:var(--tinta-suave); }
.contas-resumo dt small{ font-size:.75rem; }
.contas-resumo dd{ margin:0; color:var(--tinta); white-space:nowrap; }
.linha-desconto dd, .linha-cortesia dd{ color:var(--verde-texto); }

.total-resumo{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0 2px; border-top:1px solid var(--linha-forte);
  font-family:var(--font-titulo); color:var(--tinta);
}
.total-resumo strong{ font-size:1.42rem; font-weight:500; }
.pix-resumo{ margin:2px 0 0; font-size:.89rem; color:var(--verde-texto); }
.pix-resumo small{ color:var(--tinta-suave); }
.parcela-resumo{ margin:1px 0 12px; font-size:.8rem; color:var(--tinta-suave); }

.botao-envio{ background:var(--envio); color:var(--sobre-apoio); }
.botao-envio:hover{ filter:brightness(.94); }
.botao-pagar{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.98rem; padding:13px;
}
.aviso-pagamento{ margin:9px 0 0; font-size:.79rem; color:var(--tinta-suave); line-height:1.45; }
.selos-checkout{
  list-style:none; margin:12px 0 0; padding:11px 0 0; border-top:1px solid var(--linha);
  display:flex; flex-direction:column; gap:5px; font-size:.79rem; color:var(--tinta-suave);
}
.selos-checkout li{ display:flex; align-items:center; gap:6px; }
.marca-selo{ color:var(--ouro); }

/* ---------- Confirmação ---------- */
.painel-confirmado{
  max-width:590px; margin:26px auto 40px; text-align:center;
  background:var(--branco); border:1px solid var(--linha); border-radius:15px;
  padding:32px 24px;
}
.selo-confirmado{
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 13px;
  border-radius:50%; background:var(--envio); color:var(--sobre-apoio); font-size:1.6rem;
}
.painel-confirmado h1{
  font-family:var(--font-titulo); font-weight:300; font-size:1.6rem;
  color:var(--tinta); margin:0 0 6px;
}
.painel-confirmado > p{ color:var(--tinta-suave); margin:0 0 17px; font-size:.92rem; }
.ficha-pedido{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left;
  background:var(--creme-claro); border-radius:11px; padding:14px 16px; margin-bottom:17px;
}
.ficha-pedido dt{ font-size:.72rem; color:var(--tinta-suave); letter-spacing:.03em; }
.ficha-pedido dd{ margin:1px 0 0; font-family:var(--font-titulo); color:var(--tinta); font-size:.96rem; }
.proximos-passos{
  list-style:none; margin:0 0 18px; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:9px;
}
.proximos-passos li{ display:flex; gap:9px; font-size:.86rem; color:var(--tinta); }
.acoes-confirmado{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }

/* ---------- Celular ---------- */
@media (max-width:900px){
  .grade-checkout{ grid-template-columns:1fr; gap:12px; }
  .resumo-checkout{ position:static; }
}
@media (max-width:540px){
  .grade-checkout{ padding-block:6px 26px; }
  .bloco-checkout{ padding:13px 13px; margin-bottom:9px; }
  /* No celular os pares continuam lado a lado: é o que economiza a
     rolagem. Só o que não cabe em meia tela ocupa a linha inteira. */
  .campos-checkout .campo-quarto{ grid-column:span 6; }
  .campos-checkout .campo-terco{ grid-column:span 4; }
  .campos-checkout .campo-doisTercos{ grid-column:span 8; }
  /* duas colunas de frete cabem em 375px; três ficariam ilegíveis */
  .opcoes-frete{ grid-template-columns:repeat(2, 1fr); }
  .ficha-pedido{ grid-template-columns:1fr; }
  .passos-checkout{ font-size:.72rem; gap:4px 11px; }
  .total-resumo strong{ font-size:1.3rem; }
}

/* =========================================================
   PAINEL DA LISTA DE OBRIGAÇÃO — tela interna
   Desenhada para uma tarefa só: decidir rápido o que a
   leitura não resolveu, e ver o resto sem precisar conferir.
   Por isso as dúvidas vêm primeiro e o que casou vem depois.
   ========================================================= */
.topo-painel{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:14px; padding:18px 0 12px; border-bottom:1px solid var(--linha);
}
.etiqueta-painel{
  font-family:var(--font-titulo); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-ouro);
}
.topo-painel h1{
  font-family:var(--font-titulo); font-weight:300; font-size:1.5rem;
  color:var(--tinta); margin:2px 0 3px;
}
.sub-painel{ margin:0; font-size:.85rem; color:var(--tinta-suave); }
.leitura-painel{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.lida-por{ font-size:.78rem; color:var(--tinta-suave); }
.placar-painel{
  font-family:var(--font-titulo); font-size:.9rem; color:var(--tinta);
  background:var(--creme); border-radius:100px; padding:4px 12px;
}
.obs-cliente{
  margin:14px 0 0; padding:12px 14px; border-radius:11px;
  background:var(--creme-claro); border:1px solid var(--linha);
  font-size:.88rem; color:var(--tinta); line-height:1.55;
}
.obs-cliente:empty{ display:none; }

.grade-painel{
  display:grid; grid-template-columns:1fr 320px; gap:18px;
  align-items:start; padding:16px 0 40px;
}
.bloco-painel{
  background:var(--branco); border:1px solid var(--linha); border-radius:13px;
  padding:16px 17px; margin-bottom:12px;
}
.bloco-painel h2{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-titulo); font-weight:400; font-size:1.05rem;
  color:var(--tinta); margin:0 0 5px;
}
.ponto-atencao{
  width:9px; height:9px; border-radius:50%; background:var(--destaque);
  box-shadow:0 0 0 3px rgba(255,117,31,.18);
}
.nota-painel{ margin:0 0 13px; font-size:.82rem; color:var(--tinta-suave); line-height:1.5; }

/* ---------- Dúvidas ---------- */
.lista-duvidas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.duvida{
  border:1px solid var(--linha-forte); border-radius:11px;
  padding:12px 13px; background:var(--creme-claro);
}
.duvida-resolvida{ border-color:var(--verde-texto); background:var(--branco); }
.cabeca-duvida{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; }
.cabeca-duvida strong{ font-family:var(--font-titulo); font-size:1rem; color:var(--tinta); }
.selo-leitura{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ouro); color:var(--sobre-apoio); padding:2px 7px; border-radius:100px;
}
.nota-cliente{ font-size:.82rem; color:var(--texto-ouro); font-style:italic; }
.motivo-duvida{ margin:4px 0 9px; font-size:.8rem; color:var(--tinta-suave); }
.opcoes-duvida{ display:flex; flex-wrap:wrap; gap:6px; }
.op-duvida{
  display:flex; align-items:baseline; gap:7px;
  border:1px solid var(--linha-forte); border-radius:9px;
  padding:7px 11px; background:var(--branco); cursor:pointer;
  font:inherit; font-size:.83rem; color:var(--tinta); text-align:left;
  transition:border-color .14s, background .14s;
}
.op-duvida:hover{ border-color:var(--ouro); }
.op-duvida em{ font-style:normal; color:var(--tinta-suave); font-size:.79rem; }
.op-marcada{ border-color:var(--verde-texto); background:rgba(63,115,40,.08); }
.op-marcada em{ color:var(--verde-texto); }
.op-recusar{ color:var(--tinta-suave); }

/* ---------- O que casou ---------- */
.lista-casados{ list-style:none; margin:0; padding:0; }
.casado{
  display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--linha); font-size:.88rem;
}
.casado:last-child{ border-bottom:0; }
.qtd-casado{ color:var(--tinta-suave); }
.corpo-casado{ display:flex; flex-direction:column; gap:2px; }
.corpo-casado strong{ font-weight:500; color:var(--tinta); }
.escrito-casado{ font-size:.78rem; color:var(--tinta-suave); }
.valor-casado{ font-family:var(--font-titulo); color:var(--tinta); white-space:nowrap; }

/* ---------- Resumo e aprovação ---------- */
.resumo-painel{
  background:var(--creme); border:1px solid var(--linha); border-radius:13px;
  padding:16px 17px; position:sticky; top:12px;
}
.resumo-painel h2{
  font-family:var(--font-titulo); font-weight:400; font-size:1.05rem;
  color:var(--tinta); margin:0 0 11px;
}
.contas-painel{ margin:0 0 4px; }
.contas-painel > div{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:.87rem; }
.contas-painel dt{ color:var(--tinta-suave); }
.contas-painel dt small{ display:block; font-size:.75rem; }
.contas-painel dd{ margin:0; color:var(--tinta); white-space:nowrap; }
.acoes-painel{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.canal-painel{ display:flex; align-items:center; gap:7px; font-size:.83rem; color:var(--tinta-suave); }
.canal-painel input{ accent-color:var(--ouro); width:15px; height:15px; }
.botao-travado{ opacity:.5; cursor:not-allowed; filter:grayscale(.5); }
.aviso-painel{
  margin:13px 0 0; padding-top:12px; border-top:1px solid var(--linha);
  font-size:.79rem; color:var(--tinta-suave); line-height:1.5;
}
.aviso-aceso{ color:var(--verde-texto); }

@media (max-width:900px){
  .grade-painel{ grid-template-columns:1fr; }
  .resumo-painel{ position:static; }
  .leitura-painel{ align-items:flex-start; }
}

/* A escolha de frete do pedido inteiro: duas opções em vez de oito.
   O detalhe por transportadora continua existindo, fechado. */
.modos-frete{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; }
.modo-frete{
  position:relative; display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--linha-forte); border-radius:11px;
  padding:11px 12px 12px; cursor:pointer; background:var(--branco);
  transition:border-color .15s, box-shadow .15s;
}
.modo-frete:hover{ border-color:var(--ouro); }
.modo-frete:has(input:checked){
  border-color:var(--ouro); box-shadow:0 0 0 1px var(--ouro) inset; background:var(--creme-claro);
}
.modo-frete input{ position:absolute; opacity:0; pointer-events:none; }
.nome-modo{
  font-family:var(--font-titulo); font-size:1.02rem; color:var(--tinta); padding-right:20px;
}
.prazo-modo{ font-size:.78rem; color:var(--tinta-suave); }
.preco-modo{
  font-family:var(--font-titulo); font-size:1.12rem; color:var(--tinta); margin-top:4px;
}
.abre-detalhe{
  border:0; background:none; padding:4px 0 8px; cursor:pointer;
  font:inherit; font-size:.81rem; color:var(--texto-ouro);
  text-decoration:underline; text-underline-offset:3px;
}
.abre-detalhe:hover{ color:var(--tinta); }
@media (max-width:400px){
  .modos-frete{ grid-template-columns:1fr; }
}

/* Quantidade editável na dúvida: a unidade da lista quase nunca é a
   unidade do catálogo — "7 velas" pode virar 2 pacotes de 6. */
.qtd-duvida{ display:inline-flex; }
.qtd-duvida input{
  width:52px; border:1px solid var(--linha-forte); border-radius:8px;
  padding:5px 7px; font:inherit; font-size:.92rem; text-align:center;
  color:var(--tinta); background:var(--branco);
}
.qtd-duvida input:focus{ outline:none; border-color:var(--ouro); }
.pedido-original{ font-size:.75rem; color:var(--tinta-suave); }
.conta-duvida{
  margin:9px 0 0; padding-top:8px; border-top:1px solid var(--linha);
  font-size:.85rem; color:var(--tinta-suave);
}
.conta-duvida strong{ font-family:var(--font-titulo); font-size:1rem; color:var(--tinta); }
.contas-fecho{ margin-top:6px; padding-top:6px; border-top:1px solid var(--linha); }

/* A volta para o varejo ocupa a mesma vaga que o "Atacado" ocupava na
   barra — a chave entre as duas lojas é sempre o mesmo lugar. */
.lista-nav > li > a.nav-volta-varejo{ color:var(--texto-ouro); }

/* "Só retirada" — a etiqueta que muda o que a pessoa pode fazer com a
   peça, e por isso não usa o ouro das outras: precisa ser lida como
   condição, não como destaque de venda. */
.etiqueta-retirada{ background:var(--tinta); color:var(--creme); }
.aviso-retirada{
  display:flex; align-items:flex-start; gap:9px;
  margin:12px 0 0; padding:11px 13px; border-radius:10px;
  background:var(--creme-fundo); border:1px solid var(--linha-forte);
  font-size:.84rem; line-height:1.5; color:var(--tinta);
}

/* Escolhas do produto: um bloco por eixo — tamanho, cor, característica.
   Antes era uma lista só, com "Cristal Amarela · Grande" num botão, e o
   cliente tinha que ler 19 opções para achar a combinação dele. */
.eixo-variacao{ margin-bottom:13px; }
.eixo-variacao:last-child{ margin-bottom:0; }
.eixo-variacao h4{
  font-family:var(--font-titulo); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-suave);
  margin:0 0 7px;
}
.eixo-variacao .opcoes-variacao{ display:flex; flex-wrap:wrap; gap:6px; }
.eixo-variacao .opcao{
  font:inherit; font-size:13px; cursor:pointer;
  border:1px solid var(--linha-forte); border-radius:9px;
  padding:7px 12px; background:var(--branco); color:var(--tinta);
  text-decoration:none; display:inline-flex; align-items:baseline; gap:6px;
  transition:border-color .14s, background .14s;
}
.eixo-variacao .opcao:hover{ border-color:var(--ouro); }
.eixo-variacao .opcao.ativa{
  border-color:var(--ouro); background:var(--creme-claro);
  box-shadow:0 0 0 1px var(--ouro) inset;
}
.eixo-variacao .preco-variacao{ font-style:normal; font-size:11.5px; color:var(--tinta-suave); }

/* A embalagem é informação, não escolha: quando o fornecedor fecha o
   lote, o cliente não pode comprar metade dele. */
.embalagem-fixa{
  margin:0 0 13px; padding:9px 12px; border-radius:9px;
  background:var(--creme-claro); border:1px solid var(--linha);
  font-size:13px; color:var(--tinta-media);
}
/* A escolha que veio da página do produto, na linha da sacola: sem ela
   duas quartinhas iguais ficariam indistinguíveis no pedido. */
.escolha-item{
  display:block; font-size:11.5px; color:var(--texto-ouro); margin-top:2px;
}

/* O textarea com rótulo por dentro precisa de folga maior no topo e do
   rótulo colado lá em cima — ele nunca "desce" como o do input. */
.campos-checkout .campo textarea{ padding-top:21px; resize:vertical; min-height:64px; }
.campo-upload{ margin-top:11px; }
.aviso-frete{ margin:0 0 9px; color:var(--texto-ouro); }
.erro-pagamento{
  margin:10px 0 0; padding:10px 12px; border-radius:9px;
  background:#F8DCD5; color:#8A2410; font-size:.82rem; line-height:1.5;
}