/* Design system da loja. As cores da marca chegam por variável inline no
   layout, geradas a partir das configurações — trocar a identidade não exige
   editar CSS. */
:root{
  --marca:#0b7a57; --destaque:#f0b429;
  --tinta:#15211d; --tinta-2:#5d6f68; --tinta-3:#8b9a94;
  --fundo:#fff; --fundo-2:#f6f8f7; --borda:#e4eae7;
  --superficie:#fff; --topo-fundo:rgba(255,255,255,.92); --sobreposicao:rgba(255,255,255,.72);
  --ok-fundo:#e6f5ef; --ok-texto:#0b7a57;
  --espera-fundo:#fdf3e2; --espera-texto:#9a6218;
  --erro-fundo:#fdeceb; --erro-texto:#b83225;
  --erro:#c0392b; --sucesso:#0b7a57; --aviso:#b7791f;
  --raio:14px; --raio-sm:9px;
  --sombra:0 1px 2px rgba(16,32,26,.05),0 8px 24px -12px rgba(16,32,26,.18);
  --limite:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tinta);background:var(--fundo)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.25;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(1.6rem,4vw,2.3rem)}
h2{font-size:clamp(1.25rem,2.6vw,1.6rem)}
.limite{max-width:var(--limite);margin:0 auto;padding:0 20px}
.pilha>*+*{margin-top:var(--gap,16px)}

/* Cabeçalho ------------------------------------------------------------- */
.topo{position:sticky;top:0;z-index:40;background:var(--topo-fundo);backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.topo__linha{display:flex;align-items:center;gap:16px;height:66px}
.topo__logo{font-weight:800;font-size:1.15rem;letter-spacing:-.03em;white-space:nowrap}
.topo__logo img{max-height:38px;width:auto}
.marca-logo--clara{display:block}
.marca-logo--principal.marca-logo--tem-alternativa{display:none}
.topo__busca{flex:1;position:relative;max-width:460px}
.topo__busca input{width:100%;height:42px;padding:0 14px;border:1px solid var(--borda);border-radius:999px;background:var(--fundo-2);font-size:.95rem}
.topo__busca input:focus{outline:2px solid var(--marca);outline-offset:1px;background:var(--superficie)}
.topo__acoes{display:flex;align-items:center;gap:6px;margin-left:auto}
.icone-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--tinta)}
.icone-btn:hover{background:var(--fundo-2)}
.selo{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--marca);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center}
.menu{display:flex;gap:22px;padding:0 0 12px;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:.9rem;font-weight:500;color:var(--tinta-2);white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--tinta);border-color:var(--marca)}

/* Botões ---------------------------------------------------------------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border:0;border-radius:999px;
  background:var(--marca);color:#fff;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:filter .15s,transform .1s}
.botao:hover{filter:brightness(1.08)}
.botao:active{transform:translateY(1px)}
.botao[disabled]{opacity:.5;cursor:not-allowed}
.botao--vazado{background:transparent;color:var(--tinta);border:1.5px solid var(--borda)}
.botao--vazado:hover{border-color:var(--tinta-3);filter:none}
.botao--zap{background:#25d366}
.botao--bloco{width:100%}
.botao--pequeno{height:38px;padding:0 16px;font-size:.87rem}

/* Vitrine --------------------------------------------------------------- */
.secao{padding:44px 0}
.secao--sugestoes h2{font-size:clamp(1.2rem,2.4vw,1.4rem)}
.secao__cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.secao__cabeca a{font-size:.88rem;font-weight:600;color:var(--marca)}
.grade{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.cartao{position:relative;display:flex;flex-direction:column;border-radius:var(--raio);overflow:hidden;background:var(--superficie);transition:transform .18s}
.cartao__link{display:flex;flex:1;flex-direction:column;min-width:0;color:inherit}
.cartao__favorito,.produto-single__favorito{appearance:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--superficie);color:var(--tinta);box-shadow:0 5px 18px rgba(0,0,0,.14);cursor:pointer;transition:transform .18s,background .18s,color .18s}
.cartao__favorito{position:absolute;top:10px;right:10px;z-index:4}
.cartao__favorito:hover,.produto-single__favorito:hover{transform:translateY(-1px) scale(1.04)}
.cartao__favorito .icone-svg,.produto-single__favorito .icone-svg{fill:none;stroke:currentColor;stroke-width:1.7}
.cartao__favorito.amado,.cartao__favorito.ativo,.produto-single__favorito.amado,.produto-single__favorito.ativo{background:var(--tinta);color:var(--fundo)}
.cartao__favorito.amado .icone-svg,.cartao__favorito.ativo .icone-svg,.produto-single__favorito.amado .icone-svg,.produto-single__favorito.ativo .icone-svg{fill:currentColor}
.produto-single__titulo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.produto-single__titulo h1{min-width:0}
.produto-single__favorito{flex:0 0 42px;border:1px solid var(--borda);box-shadow:none}
.cartao:hover{transform:translateY(-3px)}
.cartao__foto{aspect-ratio:3/4;background:var(--fundo-2);overflow:hidden}
.cartao__foto img{width:100%;height:100%;object-fit:cover}
.cartao__corpo{padding:12px 2px 0;display:flex;flex-direction:column;gap:4px;flex:1}
.cartao__nome{font-size:.93rem;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cartao__preco{font-weight:700;font-size:1.05rem;margin-top:auto}
.cartao__de{color:var(--tinta-3);text-decoration:line-through;font-size:.85rem;font-weight:400;margin-right:6px}
.tarja{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:999px;background:var(--tinta);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.tarja--promo{background:var(--erro)}
.tarja--novo{background:var(--marca)}
.esgotado{position:absolute;inset:0;display:grid;place-items:center;background:var(--sobreposicao);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}

/* Banner publicitário --------------------------------------------------- */
.banner{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--fundo-2)}
.banner img{width:100%;object-fit:cover}
.banner__texto{position:absolute;inset:auto 0 0;padding:28px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff}
.banner__texto h2{color:#fff;margin-bottom:4px}
.banner__texto p{margin:0 0 14px;opacity:.9;font-size:.95rem}
.faixa{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* Reels ----------------------------------------------------------------- */
.reels{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y pinch-zoom;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.reel{position:relative;flex:0 0 auto;width:min(62vw,230px);aspect-ratio:9/16;border-radius:var(--raio);overflow:hidden;background:#111;scroll-snap-align:center}
/* Full-bleed no celular: um reel centralizado, um pedaço dos vizinhos
   espiando dos dois lados, sem sobra de fundo nas bordas da tela. */
@media(max-width:680px){
  .reels{margin-inline:calc(50% - 50vw);padding-inline:9vw;scroll-padding-inline:9vw;gap:2vw}
  .reel{width:82vw!important;max-height:70vh}
}
.reel video{width:100%;height:100%;object-fit:cover;touch-action:pan-x pan-y pinch-zoom}
.reel__insta{position:absolute;inset:0;overflow:hidden}
.reel__insta iframe{position:absolute;top:-24%;left:-30%;width:160%;height:175%;border:0;pointer-events:none}
.reel__info{position:absolute;inset:auto 0 0;padding:14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff}
.reel__info strong{display:block;font-size:.9rem;line-height:1.3}
.reel__info span{font-size:.8rem;opacity:.85}
.reel__som{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.45);color:#fff;cursor:pointer}
.reel__play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;border:0;
  background:rgba(0,0,0,.45);color:#fff;cursor:pointer;transition:opacity .2s}
.reel.tocando .reel__play{opacity:0;pointer-events:none}

/* Formulários ----------------------------------------------------------- */
.campo{display:block;margin-bottom:14px}
.campo>span{display:block;font-size:.83rem;font-weight:600;color:var(--tinta-2);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--borda);border-radius:var(--raio-sm);font:inherit;background:var(--superficie);color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--marca);outline-offset:-1px;border-color:transparent}
.campo textarea{min-height:110px;resize:vertical}
.linha{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.marcar{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;cursor:pointer;margin-bottom:12px}
.marcar input{width:18px;height:18px;min-height:0;margin-top:2px;flex:0 0 auto;accent-color:var(--marca)}
.ajuda{font-size:.8rem;color:var(--tinta-3);margin:-8px 0 14px}

/* Grade de variação ----------------------------------------------------- */
.opcoes{margin:18px 0}
.opcoes__titulo{font-size:.83rem;font-weight:600;color:var(--tinta-2);margin-bottom:8px}
.opcoes__lista{display:flex;flex-wrap:wrap;gap:8px}
.opcao{padding:9px 16px;border:1.5px solid var(--borda);border-radius:999px;background:var(--superficie);color:var(--tinta);font-size:.9rem;font-weight:500;cursor:pointer;transition:.15s}
.opcao:hover{border-color:var(--tinta-3)}
.opcao[aria-pressed="true"]{border-color:var(--marca);background:var(--marca);color:#fff}
/* Combinação sem estoque continua visível e riscada: sumir com ela faz o
   cliente procurar o tamanho que "existia agora há pouco". */
.opcao[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.opcao--cor{display:inline-flex;align-items:center;gap:8px}
.opcao__amostra{width:16px;height:16px;border-radius:50%;background:var(--cor-opcao,#ccc);border:1px solid rgba(0,0,0,.15);flex:0 0 auto}

/* Cores uma abaixo da outra. Em linha, o nome da cor mais a amostra mais a
   etiqueta "Esgotado" quebravam de um jeito diferente a cada nome; empilhado,
   tudo alinha e a etiqueta encosta sempre na direita. Só a lista de cores
   empilha -- tamanhos continuam lado a lado, que e onde a grade compensa. */
.opcoes__lista--empilhada{flex-direction:column;align-items:stretch;gap:8px}
.opcoes__lista--empilhada .opcao{display:flex;align-items:center;gap:9px;width:100%;text-align:left}
/* min-width:0 e o que autoriza o nome longo a truncar dentro do flex, em vez
   de empurrar a etiqueta para fora do botao. */
.opcao__nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opcao__esgotado{margin-left:auto;flex:0 0 auto;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:999px;border:1px solid currentColor;opacity:.75}
.opcao--esgotada .opcao__amostra{opacity:.45}
.opcao--esgotada .opcao__nome{opacity:.6}

.aviso-lgpd{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:14px;background:#15110e;color:#fff;border-top:1px solid rgba(255,255,255,.12)}
.aviso-lgpd__caixa{max-width:var(--limite);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.aviso-lgpd__caixa p{flex:1 1 320px;margin:0;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.85)}
.aviso-lgpd__caixa a{color:#fff;text-decoration:underline}
.aviso-lgpd__aceitar{flex:0 0 auto;height:42px;padding:0 22px;border:0;border-radius:999px;background:var(--marca);
  color:#fff;font:inherit;font-weight:700;font-size:.86rem;cursor:pointer}
@media(max-width:560px){.aviso-lgpd__caixa{flex-direction:column;align-items:stretch;gap:10px}.aviso-lgpd__caixa p{flex:0 0 auto}.aviso-lgpd__aceitar{width:100%}}

/* Newsletter: card flutuante entre o conteúdo e o rodapé ----------------- */
.secao--newsletter{padding:36px 0}
.newsletter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px;padding:36px 40px;border-radius:calc(var(--raio) + 6px);background:var(--tinta);color:var(--fundo);box-shadow:var(--sombra)}
.newsletter__conteudo{max-width:380px}
.newsletter__titulo{display:block;font-size:1.5rem;font-weight:700;line-height:1.15}
.newsletter__subtitulo{display:block;margin-top:6px;font-size:.92rem;opacity:.85}
.newsletter__texto{margin:12px 0 0;font-size:.82rem;opacity:.65}
.newsletter__form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1 1 420px;justify-content:flex-end}
.newsletter__campo{position:relative;margin-bottom:0;flex:1 1 150px;min-width:150px}
.newsletter__rotulo-acessivel{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.newsletter__campo-icone{position:absolute;left:14px;top:50%;z-index:1;display:grid;place-items:center;transform:translateY(-50%);color:var(--tinta);opacity:.68;pointer-events:none}
.newsletter__campo input{padding-left:44px}
.newsletter__botao{flex:0 0 auto}
.newsletter__msg{display:flex;align-items:center;gap:14px;flex:1 1 420px;max-width:560px;margin:0;font-size:.88rem;opacity:1;animation:newsletter-entrar .45s ease both}
.newsletter__msg[hidden]{display:none}.newsletter__check{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px}.newsletter__check svg{display:block;width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.newsletter__check circle{stroke-dasharray:151;stroke-dashoffset:151}.newsletter__check path{stroke-dasharray:30;stroke-dashoffset:30}.newsletter__icone-erro{display:none}.newsletter__msg--sucesso .newsletter__check{color:#20b968}.newsletter__msg--erro .newsletter__check{color:#e54238}.newsletter__msg--erro .newsletter__icone-sucesso{display:none}.newsletter__msg--erro .newsletter__icone-erro{display:block}.newsletter__msg--sucesso .newsletter__check circle,.newsletter__msg--erro .newsletter__check circle{animation:newsletter-circulo .55s ease forwards}.newsletter__msg--sucesso .newsletter__icone-sucesso,.newsletter__msg--erro .newsletter__icone-erro{animation:newsletter-check .35s .45s ease forwards}.newsletter__confirmacao{display:grid;gap:3px}.newsletter__confirmacao strong{font-size:1.05rem}.newsletter__confirmacao>span{opacity:.75}@keyframes newsletter-entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes newsletter-circulo{to{stroke-dashoffset:0}}@keyframes newsletter-check{to{stroke-dashoffset:0}}
.newsletter__msg.newsletter__modal{position:fixed;inset:0;z-index:220;display:grid;place-items:center;max-width:none;margin:0;padding:22px;background:rgba(0,0,0,.72);color:#fff;animation:newsletter-fundo .22s ease both}.newsletter__msg.newsletter__modal[hidden]{display:none}.newsletter__modal-painel{position:relative;display:flex;align-items:center;gap:18px;width:min(100%,480px);padding:32px 54px 32px 30px;border:1px solid #2b2b2b;border-radius:var(--raio);background:#050505;color:#fff;box-shadow:0 24px 80px rgba(0,0,0,.48);animation:newsletter-modal-entrar .32s ease both}.newsletter__modal-fechar{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}.newsletter-modal-aberto{overflow:hidden}@keyframes newsletter-fundo{from{opacity:0}to{opacity:1}}@keyframes newsletter-modal-entrar{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@media(max-width:520px){.newsletter__modal-painel{align-items:flex-start;padding:28px 48px 28px 24px}.newsletter__check{flex-basis:46px;width:46px;height:46px}.newsletter__check svg{width:46px;height:46px}}
@media(max-width:780px){.newsletter{flex-direction:column;align-items:stretch;padding:28px 24px}.newsletter__conteudo{max-width:none}.newsletter__form{flex:1 1 auto;justify-content:stretch}.newsletter__campo{flex:1 1 100%;min-width:0}}

/* Carrinho e resumo ----------------------------------------------------- */
.colunas{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.colunas{grid-template-columns:1fr 360px}}
.painel{border:1px solid var(--borda);border-radius:var(--raio);padding:22px;background:var(--superficie);color:var(--tinta)}
.painel--fixo{align-self:start;height:max-content}
@media(min-width:900px){.painel--fixo{position:sticky;top:86px}}
.item{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--borda)}
.item:last-child{border-bottom:0}
.item__foto{width:84px;aspect-ratio:3/4;border-radius:var(--raio-sm);overflow:hidden;background:var(--fundo-2)}
.item__foto img{width:100%;height:100%;object-fit:cover}
.item__nome{font-weight:500;font-size:.95rem}
.item__var{font-size:.83rem;color:var(--tinta-2)}
.qtd{display:inline-flex;align-items:center;border:1px solid var(--borda);border-radius:999px;overflow:hidden;margin-top:8px}
.qtd button{width:32px;height:32px;border:0;background:transparent;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--tinta)}
.qtd span{min-width:32px;text-align:center;font-size:.9rem;font-weight:600}
.totais{display:flex;justify-content:space-between;padding:7px 0;font-size:.93rem;color:var(--tinta-2)}
.totais--soma{border-top:1px solid var(--borda);margin-top:10px;padding-top:14px;font-size:1.15rem;font-weight:700;color:var(--tinta)}

/* Situação / avisos ----------------------------------------------------- */
.etiqueta{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--fundo-2);color:var(--tinta-2)}
.etiqueta--ok{background:var(--ok-fundo);color:var(--ok-texto)}
.etiqueta--espera{background:var(--espera-fundo);color:var(--espera-texto)}
.etiqueta--erro{background:var(--erro-fundo);color:var(--erro-texto)}
.aviso{padding:14px 16px;border-radius:var(--raio-sm);font-size:.92rem;border-left:3px solid var(--marca);background:var(--fundo-2);margin-bottom:16px}
.aviso--erro{border-color:var(--erro);background:var(--erro-fundo);color:var(--erro-texto)}
.aviso--aviso{border-color:var(--aviso);background:var(--espera-fundo);color:var(--espera-texto)}

/* Passos do checkout ---------------------------------------------------- */
.passos{display:flex;gap:8px;margin-bottom:26px;font-size:.85rem}
.passos span,.passos a{flex:1;padding:9px 4px;text-align:center;border-radius:999px;background:var(--fundo-2);color:var(--tinta-3);font-weight:600}
.passos span[aria-current]{background:var(--marca);color:#fff}

/* Notificações em tempo real -------------------------------------------- */
#avisos{position:fixed;right:16px;bottom:16px;z-index:130;display:flex;flex-direction:column-reverse;gap:10px;max-width:min(92vw,340px)}
.torrada{padding:14px 16px;border-radius:var(--raio-sm);background:#1b1416;color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:var(--sombra);font-size:.9rem;animation:sobe .25s ease}
.torrada strong{display:block;margin-bottom:2px}
.torrada a{color:#fff;text-decoration:underline}
.confirmacao-carrinho{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);animation:confirmacao-fundo .2s ease both}
.confirmacao-carrinho__caixa{position:relative;width:min(100%,520px);padding:42px 36px 34px;text-align:center;border:1px solid var(--borda);border-radius:var(--raio);background:var(--fundo);color:var(--tinta);box-shadow:0 28px 80px rgba(0,0,0,.3);animation:confirmacao-entrada .3s cubic-bezier(.2,.8,.2,1) both}
.confirmacao-carrinho__icone{width:86px;height:86px;margin:0 auto 20px;color:var(--sucesso,#16864b)}
.confirmacao-carrinho__icone svg{display:block;width:100%;height:100%;overflow:visible}
.confirmacao-carrinho__icone circle{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:190;stroke-dashoffset:190;animation:confirmacao-circulo .5s .08s ease forwards}
.confirmacao-carrinho__icone path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:confirmacao-check .38s .48s ease forwards}
.confirmacao-carrinho h2{margin:0;font-size:clamp(1.35rem,3vw,2rem);line-height:1.12}
.confirmacao-carrinho__progresso{margin:16px auto 0;max-width:390px;color:var(--tinta-2);line-height:1.5}
.confirmacao-carrinho__progresso--ok{color:var(--sucesso,#16864b)}
.confirmacao-carrinho__acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.confirmacao-carrinho__acoes .botao{display:flex;align-items:center;justify-content:center;min-height:50px;margin:0;text-decoration:none}
.confirmacao-carrinho__acoes .botao:disabled{cursor:not-allowed;opacity:.38}
.confirmacao-carrinho__fechar{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;background:transparent;color:var(--tinta-2);font:300 28px/1 sans-serif;cursor:pointer}
@keyframes confirmacao-fundo{from{opacity:0}to{opacity:1}}
@keyframes confirmacao-entrada{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes confirmacao-circulo{to{stroke-dashoffset:0}}
@keyframes confirmacao-check{to{stroke-dashoffset:0}}
@media(max-width:560px){.confirmacao-carrinho__caixa{padding:38px 20px 24px}.confirmacao-carrinho__acoes{grid-template-columns:1fr}.confirmacao-carrinho__icone{width:72px;height:72px}}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Rodapé ---------------------------------------------------------------- */
.rodape{margin-top:60px;padding:44px 0 28px;background:var(--fundo-2);border-top:1px solid var(--borda);font-size:.9rem;color:var(--tinta-2)}
.rodape__grade{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin-bottom:28px}
.rodape h3{font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta)}
.rodape a{display:block;padding:3px 0}
.rodape a:hover{color:var(--marca)}
.rodape__base{border-top:1px solid var(--borda);padding-top:18px;font-size:.82rem;color:var(--tinta-3)}

/* Barra inferior no celular --------------------------------------------- */
.barra{position:fixed;inset:auto 0 0;z-index:45;display:flex;background:var(--superficie);border-top:1px solid var(--borda);padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.barra a,.barra button{appearance:none;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 0;border:0;background:transparent;font:inherit;font-size:.68rem;color:var(--tinta-3);cursor:pointer}
.barra a[aria-current]{color:var(--marca)}
@media(min-width:760px){.barra{display:none}}
@media(max-width:759px){body{padding-bottom:66px}.topo__busca{display:none}}

/* Campo de senha com botão de revelar ------------------------------------ */
.senha-inv{position:relative;display:block;width:100%;min-width:0}
.senha-inv input{width:100%;padding-right:48px}
.acesso-caixa{width:min(100%,420px);margin:40px auto;text-align:left}
.acesso-caixa--painel{width:min(100%,400px);margin-block:60px}
.acesso-caixa>.ajuda{margin:-8px 0 20px;line-height:1.6}
.acesso-recuperar{margin-top:10px}
.acesso-acoes{display:grid;gap:10px;margin-top:14px}
.acesso-link{display:block;padding:6px;text-align:center;color:inherit;text-decoration:underline;text-underline-offset:3px}
.acesso-explicacao{margin:0 0 20px!important;text-align:left;font-size:.82rem}
.acesso-recuperar-texto{margin:14px 0 0;text-align:left;color:var(--tinta-3);font-size:.75rem;line-height:1.5}
.acesso-recuperar-texto a{color:var(--tinta);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.acesso-recuperar-texto a:hover{opacity:.65}
@media(max-width:560px){.acesso-caixa,.acesso-caixa--painel{width:100%;margin-block:28px}.acesso-recuperar-texto{font-size:.78rem}}
.senha-olho{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font-size:1.05rem;line-height:1;color:var(--tinta-2)}
.senha-olho:hover{background:var(--fundo-2)}
.senha-olho:focus-visible{outline:2px solid var(--marca);outline-offset:1px}

/* Menu da conta ----------------------------------------------------------- */
.menu-conta{position:relative}
/* Remove o triângulo nativo do <details> em todos os motores. */
.menu-conta>summary{list-style:none;cursor:pointer}
.menu-conta>summary::-webkit-details-marker{display:none}
.menu-conta>summary::marker{content:""}
.menu-conta__caixa{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:238px;padding:8px;
  background:var(--fundo);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);
  animation:menuAbre .22s ease}
@keyframes menuAbre{from{opacity:0;transform:translateY(-6px)}}
.menu-conta__cabeca{padding:10px 12px 12px;border-bottom:1px solid var(--borda);margin-bottom:6px}
.menu-conta__cabeca strong{display:block;font-size:.92rem}
.menu-conta__cabeca span{display:block;font-size:.78rem;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-conta__caixa a,.menu-conta__sair{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:9px;
  background:transparent;font:inherit;font-size:.9rem;color:var(--tinta);cursor:pointer;transition:background .2s}
.menu-conta__caixa a:hover,.menu-conta__sair:hover{background:var(--fundo-2)}
.menu-conta__sair{margin-top:6px;border-top:1px solid var(--borda);border-radius:0 0 9px 9px;color:var(--erro);font-weight:600}

/* Modo escuro --------------------------------------------------------------
   Claro é o padrão em :root. A media query fica bloqueada quando o modo foi
   forçado para claro; o seletor de atributo, no fim, vence os dois casos
   quando o modo foi forçado ou escolhido manualmente para escuro. */
@media (prefers-color-scheme: dark){
  :root:not([data-modo="claro"]){
    --tinta:#eef2f0; --tinta-2:#9fada7; --tinta-3:#6c7a74;
    --fundo:#121613; --fundo-2:#1a1f1c; --borda:#293028;
    --superficie:#171c19; --topo-fundo:rgba(18,22,19,.92); --sobreposicao:rgba(18,22,19,.78);
    --ok-fundo:#14372b; --ok-texto:#79dcb1;
    --espera-fundo:#3a2c16; --espera-texto:#f2c46f;
    --erro-fundo:#3b201d; --erro-texto:#ff9b91;
  }
  :root:not([data-modo="claro"]) .marca-logo--clara{display:none}
  :root:not([data-modo="claro"]) .marca-logo--principal{display:block}
}
:root[data-modo="escuro"]{
  --tinta:#eef2f0; --tinta-2:#9fada7; --tinta-3:#6c7a74;
  --fundo:#121613; --fundo-2:#1a1f1c; --borda:#293028;
  --superficie:#171c19; --topo-fundo:rgba(18,22,19,.92); --sobreposicao:rgba(18,22,19,.78);
  --ok-fundo:#14372b; --ok-texto:#79dcb1;
  --espera-fundo:#3a2c16; --espera-texto:#f2c46f;
  --erro-fundo:#3b201d; --erro-texto:#ff9b91;
}
:root[data-modo="escuro"] .marca-logo--clara{display:none}
:root[data-modo="escuro"] .marca-logo--principal{display:block}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.icone-svg{display:block;flex:0 0 auto}
[data-modo-toggle],.icone,.icone-btn,.senha-olho,.reel__som,.reel__play{display:inline-flex;align-items:center;justify-content:center}

/* Rodapé de confiança + trava de scroll horizontal ---------------------- */
html{overflow-x:clip}
body{overflow-x:clip}
.rodape-confianca{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;
  padding-top:20px;margin-top:6px;border-top:1px solid var(--borda)}
.rodape-selos,.rodape-pagamento{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.rodape-selos span,.rodape-pagamento span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--tinta-2)}
/* Sem fundo branco fixo: o selo agora acompanha a cor do texto (SVG
   embutido, ver inline_svg()), e o plate branco o esconderia no modo escuro. */
.rodape-selo-imagem{display:inline-flex;align-items:center;line-height:0;transition:transform .2s}
.rodape-selo-imagem:hover{transform:translateY(-2px)}
.rodape-selo-imagem img,.rodape-selo-imagem>svg{height:32px;width:auto;display:block}
.rodape-pagamento span{padding:5px 11px;border:1px solid var(--borda);border-radius:999px;font-weight:500}
.rodape-social{display:flex;gap:10px;margin-top:16px;justify-content:center}
.rodape-social a{width:34px;height:34px;border-radius:999px;background:var(--fundo-2);display:grid;place-items:center;color:var(--tinta-2);transition:background .2s,color .2s}
.rodape-social a:hover{background:var(--marca);color:#fff}
.rodape-legal{margin-top:14px;font-size:.78rem;color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;text-align:center}
.rodape-credito{margin-top:12px;padding-top:12px;border-top:1px solid var(--borda);font-size:.76rem;color:var(--tinta-3);text-align:center}

/* Galeria do produto — imagem principal + miniaturas ------------------------
   object-fit:contain na principal: nunca corta nem estica, mostra a peça
   inteira mesmo quando a foto não é exatamente 4:5. As miniaturas usam
   cover (recortar ali não perde informação, é só navegação). */
.galeria-produto__principal{aspect-ratio:4/5;background:var(--fundo-2);border-radius:var(--raio);overflow:hidden;display:grid;place-items:center}
@media(hover:hover){.galeria-produto__principal img[data-foto-principal]{transition:transform .25s ease;cursor:zoom-in}.galeria-produto__principal:hover img[data-foto-principal]{transform:scale(1.9)}}
.galeria-produto__principal img{width:100%;height:100%;object-fit:contain}
.galeria-produto__miniaturas{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.galeria-produto__miniatura{flex:0 0 auto;width:64px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;padding:0;cursor:pointer;
  background:var(--fundo-2);border:2px solid transparent}
.galeria-produto__miniatura img{width:100%;height:100%;object-fit:cover}
.galeria-produto__miniatura.ativa{border-color:var(--marca)}

/* Escolha entre entrar na conta e comprar como visitante, no topo do checkout. */
.escolha-acesso{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--linha,var(--borda));border-radius:var(--raio-sm,10px);margin-bottom:6px}
.escolha-acesso strong{display:block;font-size:.95rem}
.escolha-acesso span{font-size:.83rem;color:var(--tinta-2)}

/* Excursão no checkout: cada opção com o contato do responsável ao lado. */
.excursao{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--linha,var(--borda));border-radius:var(--raio-sm,10px);margin-bottom:8px}
.excursao__selo{display:inline-block;padding:2px 8px;border-radius:999px;background:#25d366;color:#fff;
  font-size:.66rem;font-weight:700;vertical-align:middle}
.excursao__zap{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:8px 14px;border-radius:999px;
  background:#25d366;color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap}
.excursao__zap:hover{filter:brightness(1.08)}

/* Compartilhar produto. */
.compartilhar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.compartilhar__rotulo{font-size:.78rem;font-weight:600;color:var(--tinta-2);margin-right:2px}
.compartilhar a,.compartilhar button{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--linha,var(--borda));background:transparent;color:var(--tinta-2);cursor:pointer;
  transition:transform .2s,color .2s,border-color .2s,background .2s}
.compartilhar a:hover,.compartilhar button:hover{transform:translateY(-2px);color:#fff;border-color:transparent}
.compartilhar a[data-rede="whatsapp"]:hover{background:#25d366}
.compartilhar a[data-rede="facebook"]:hover{background:#1877f2}
.compartilhar a[data-rede="telegram"]:hover{background:#229ed9}
.compartilhar a[data-rede="x"]:hover{background:#0f1419}
.compartilhar a[data-rede="pinterest"]:hover{background:#e60023}
.compartilhar button:hover{background:var(--tinta);color:var(--fundo,#fff)}

/* --- Avaliações do produto --------------------------------------------- */
.eyebrow{display:block;margin:0 0 4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.produto-rating-summary{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;color:inherit;text-decoration:none}
.produto-rating-summary span{font-weight:700}
.produto-rating-summary small{color:var(--tinta-3);font-weight:400}
.avaliacoes-produto{border-top:1px solid var(--borda)}
.avaliacoes-produto__cabecalho{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:26px}
.avaliacoes-produto__cabecalho h2{margin:2px 0 0}
.avaliacoes-produto__resumo{display:flex;align-items:center;gap:12px}
.avaliacoes-produto__resumo strong{font-size:2rem;line-height:1}
.avaliacoes-produto__resumo small{display:block;color:var(--tinta-3);font-size:.78rem;margin-top:2px}
.avaliacao-form{max-width:640px;margin-bottom:30px}
.avaliacao-form h3{margin:0 0 4px;font-size:1.1rem}
.avaliacao-form__nota{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin:14px 0}
.avaliacao-form__nota input{position:absolute;opacity:0;pointer-events:none}
.avaliacao-form__nota label{color:var(--borda);cursor:pointer;line-height:0;transition:color .15s}
.avaliacao-form__nota input:checked~label,.avaliacao-form__nota label:hover,.avaliacao-form__nota label:hover~label{color:#f5b301}
.avaliacoes-lista{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scroll-padding-left:2px}
.avaliacao-card{flex:0 0 min(340px,82vw);scroll-snap-align:start;padding:18px 20px;border:1px solid var(--borda);border-radius:var(--raio)}
.avaliacao-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.avaliacao-card header strong{display:block;margin-top:6px;font-size:.95rem}
.avaliacao-card time{color:var(--tinta-3);font-size:.76rem;white-space:nowrap}
.avaliacao-card p{margin:8px 0;color:var(--tinta-2);line-height:1.6}
.avaliacao-card footer{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--tinta-3)}
.avaliacao-card footer span{display:inline-flex;align-items:center;gap:4px;color:#0a7b3e}
.avaliacoes-vazio{padding:34px 20px;text-align:center;color:var(--tinta-3);border:1px dashed var(--borda);border-radius:var(--raio)}
@media(max-width:700px){.avaliacoes-produto__cabecalho{align-items:flex-start;flex-direction:column;gap:10px}}

/* Passo já concluído é clicável: é o caminho de volta para corrigir a
   entrega ou os dados sem precisar recomeçar a compra. */
.passos a{cursor:pointer;transition:color .2s,border-color .2s,opacity .2s}
.passos a:hover{color:var(--tinta);border-color:currentColor;opacity:1}
.passos a::before{content:"← ";opacity:.7}
.voltar-passo{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--tinta-2);margin-top:12px}
.voltar-passo:hover{color:var(--tinta);text-decoration:underline}

/* Vitrine pública de excursões. */
.busca-excursao{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.grade-excursoes{display:grid;gap:16px;margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.excursao-cartao{display:flex;flex-direction:column;padding:18px;
  border:1px solid var(--linha,var(--borda));border-radius:var(--raio-sm,10px)}
.excursao-cartao h2{font-size:1.05rem;margin:0 0 6px}
.excursao-cartao__origem{margin:0 0 4px;font-size:.86rem;color:var(--tinta-2)}
.excursao-cartao__ponto{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:.84rem;color:var(--tinta-2)}
.excursao-cartao__rota{margin:0 0 12px;font-size:.84rem}
.excursao-cartao__rota summary{cursor:pointer;color:var(--tinta-2)}
.excursao-cartao__cidades{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;max-height:170px;overflow-y:auto}
.excursao-cartao__cidades span{padding:3px 9px;border-radius:999px;font-size:.75rem;
  background:var(--fundo-2,var(--fundo));color:var(--tinta-2)}
.excursao-cartao__zap{margin-top:auto;background:#25d366;color:#fff}
.excursao-cartao__zap:hover{filter:brightness(1.08)}
.excursao-cartao__fone{margin:8px 0 0;text-align:center;font-size:.8rem;color:var(--tinta-3)}

/* Campo de busca de cidade e favoritar excursão. */
.busca-cidade{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.busca-cidade__campo{position:relative;flex:1;min-width:240px}
.busca-cidade__campo input{width:100%;height:54px;padding:0 76px 0 46px;font-size:1rem;
  border:1px solid var(--linha,var(--borda));border-radius:999px;background:var(--carta,var(--fundo,#fff));color:inherit}
.busca-cidade__campo input:focus{outline:2px solid var(--marca,var(--terra,#8b5cf6));outline-offset:-1px}
.busca-cidade__campo input::-webkit-search-cancel-button{display:none}
.busca-cidade__lupa{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--tinta-3);pointer-events:none;display:flex}
.busca-cidade__limpar{position:absolute;right:44px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;background:var(--fundo-2,var(--fundo));
  color:var(--tinta-2);font-size:1.1rem;line-height:1;cursor:pointer}
.busca-cidade__girando{position:absolute;right:14px;top:50%;margin-top:-9px;width:18px;height:18px;
  border-radius:50%;border:2px solid var(--linha,var(--borda));border-top-color:var(--tinta-2);
  animation:girarBusca .7s linear infinite}
@keyframes girarBusca{to{transform:rotate(360deg)}}

.excursao-cartao{position:relative}
.excursao-cartao__coracao{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;
  place-items:center;border:1px solid var(--linha,var(--borda));border-radius:50%;
  background:transparent;color:var(--tinta-3);cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.excursao-cartao__coracao:hover{transform:scale(1.08);color:#e0245e;border-color:#e0245e}
.excursao-cartao__coracao.ativo{color:#e0245e;border-color:#e0245e}
.excursao-cartao h2{padding-right:44px}

/* Linha de pedido na conta do cliente. */
.pedido-linha{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--linha,var(--borda))}
.pedido-linha:last-child{border-bottom:0}
.pedido-linha__info{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.pedido-linha__codigo{font-weight:700;font-size:.98rem}
.pedido-linha__codigo:hover{text-decoration:underline}
.pedido-linha__meta{flex-basis:100%;font-size:.83rem;color:var(--tinta-2)}
.pedido-linha__acoes{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.pedido-linha__acoes strong{font-size:1rem;white-space:nowrap}
@media(max-width:520px){
  .pedido-linha__acoes{width:100%;justify-content:space-between}
}

/* --- Hover do cartão: um movimento só ------------------------------------
   O cartão do núcleo subia em .18s e a foto não reagia — rápido demais para
   ler como movimento, então virava um salto. Aqui a elevação, a sombra e um
   zoom discreto compartilham a mesma duração e a mesma curva, que é mansa de
   propósito: o cartão precisa parecer que respondeu, não que pulou. */
.cartao{--t:.4s;--suave:cubic-bezier(.33,.1,.25,1)}
.cartao{transition:transform var(--t) var(--suave),box-shadow var(--t) var(--suave)}
.cartao:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.cartao__foto img{transition:transform var(--t) var(--suave)}
.cartao:hover .cartao__foto img{transform:scale(1.04)}

@media (prefers-reduced-motion: reduce){
  /* Movimento é enfeite: quem tem sensibilidade vestibular passa sem ele. */
  .cartao,.cartao__foto img{transition-duration:.01ms}
  .cartao:hover{transform:none}
  .cartao:hover .cartao__foto img{transform:none}
}

/* --- Galeria do produto: faixa vertical de miniaturas --------------------
   No desktop as miniaturas ficam sobrepostas na borda esquerda da foto
   grande, não numa coluna reservada ao lado: a foto principal ganha a
   largura inteira, e a faixa flutua por cima (mesmo canto de sempre), com
   sombra própria pra continuar legível em cima de qualquer foto. No celular
   viram uma faixa horizontal embaixo, que é o gesto natural ali. */
@media(min-width:760px){
  .galeria-produto--com-faixa{position:relative;display:block}
  .galeria-produto--com-faixa .galeria-produto__principal{width:100%}
  .galeria-produto--com-faixa .galeria-produto__miniaturas{
    position:absolute;z-index:2;top:14px;left:14px;bottom:14px;width:64px;
    display:flex;flex-direction:column;gap:9px;margin:0;max-height:none;overflow-y:auto;padding:0}
  .galeria-produto--com-faixa .galeria-produto__miniatura{width:100%;flex:0 0 auto;box-shadow:0 2px 12px rgba(0,0,0,.4)}
}
.galeria-produto__miniatura{transition:border-color .25s ease,opacity .25s ease;opacity:.72}
.galeria-produto__miniatura:hover,.galeria-produto__miniatura.ativa{opacity:1}
.galeria-produto__principal img[data-foto-principal]{transition:opacity .25s ease}

/* Foto de cada cor, no painel. */
.fotos-cor{display:grid;gap:12px;margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.foto-cor{display:flex;flex-direction:column;gap:6px;padding:10px;
  border:1px solid var(--linha,var(--borda));border-radius:var(--raio-sm,10px)}
.foto-cor__previa{aspect-ratio:3/4;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:var(--fundo-2,var(--fundo));font-size:.75rem;color:var(--tinta-3)}
.foto-cor__previa img{width:100%;height:100%;object-fit:cover}
.foto-cor strong{font-size:.85rem}
.foto-cor input[type=file]{font-size:.78rem}

/* --- Foto principal sem sobra ---------------------------------------------
   Duas coisas causavam a faixa de fundo em volta da imagem:

   1. o quadro era 4:5 e as fotos do catálogo são 3:4 — a diferença virava
      barra em cima e embaixo;
   2. object-fit:contain encaixa a imagem inteira DENTRO do quadro, e o que
      sobra fica sendo fundo.

   Agora o quadro usa a mesma proporção do resto do site (3:4, igual à dos
   cartões e das miniaturas) e a imagem cobre. Foto no formato certo preenche
   sem cortar nada; foto fora do formato perde um fio nas bordas em vez de
   ficar flutuando no meio de uma moldura. */
.galeria-produto__principal{aspect-ratio:3/4}
.galeria-produto__principal img{width:100%;height:100%;object-fit:cover}
.galeria-produto__miniatura{aspect-ratio:3/4}
.galeria-produto__miniatura img{width:100%;height:100%;object-fit:cover}

/* --- Excursão no checkout: lista enxuta ----------------------------------
   O WhatsApp vira só ícone. Escolher a excursão é a ação principal desta
   tela, e um botão verde de largura inteira disputava a atenção com o rádio
   que de fato decide o pedido — o cliente clicava no verde achando que era
   como se escolhe. */
.excursao{padding:10px 12px;gap:10px}
.excursao__zap{width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:transparent;color:#25d366;border:1px solid currentColor;
  transition:background .2s ease,color .2s ease}
.excursao__zap:hover{background:#25d366;color:#fff;filter:none}
.excursao__selo{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:#25d366;color:#fff;font-size:.64rem;font-weight:700;vertical-align:middle}

/* Nota da excursão, na coluna do resumo. */
.nota-excursao{border-left:3px solid #b7791f}
.nota-excursao__i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#b7791f;color:#fff;font-size:.72rem;font-weight:800;font-style:italic;flex:0 0 auto}
/* A lista rola dentro de si: com dezenas de excursões, empurrar o botão de
   continuar para fora da tela fazia parecer que o checkout tinha travado. */
.excursao-lista{max-height:340px;overflow-y:auto;padding-right:4px}

/* --- Linha da excursão: tudo numa linha só -------------------------------
   O ícone do WhatsApp caía para baixo porque a linha era flex-wrap e o texto
   da rota, longo, consumia a largura inteira. Agora o texto ocupa o espaço
   que sobra e encurta com reticências; o ícone fica fixo à direita e nunca
   quebra. min-width:0 é o que autoriza o flex a encolher o texto — sem ele o
   conteúdo empurra o contêiner e o ellipsis nunca aparece. */
.excursao{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.excursao .marcar{flex:1 1 auto;min-width:0;align-items:center}
.excursao__texto{display:block;min-width:0;flex:1 1 auto;overflow:hidden}
.excursao__texto strong{font-size:.94rem}
.excursao__rota{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:.8rem;color:var(--tinta-3)}
.excursao__zap{flex:0 0 auto;width:36px;height:36px;margin:0}

/* Selo da excursão: fora do texto truncado, para as reticências não o
   comerem, e antes do ícone do WhatsApp. Estado tem tom mais discreto que
   cidade — atender o estado é uma pista, atender a cidade é a resposta. */
.excursao__selo{flex:0 0 auto;margin:0;white-space:nowrap;align-self:center;
  padding:3px 10px;border-radius:999px;background:#25d366;color:#fff;
  font-size:.68rem;font-weight:700}
.excursao__selo--estado{background:transparent;color:var(--tinta-2);
  border:1px solid var(--linha,var(--borda));font-weight:600}
@media(max-width:560px){
  /* Em tela estreita o selo some: o texto do item vale mais que a etiqueta,
     e a lista inteira já vem filtrada pela cidade. */
  .excursao__selo{display:none}
}

/* --- Carrossel de reels: sem barra, com setas ----------------------------
   A barra de rolagem visível atrapalhava a navegação — no celular ela rouba
   altura da imagem e no desktop convida a arrastar um controle fino em vez de
   usar o carrossel. Some sem tirar a rolagem em si: arrastar com o dedo e o
   trackpad continuam funcionando, e as setas cobrem quem usa mouse. */
.reels{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
.reels::-webkit-scrollbar{width:0;height:0;display:none}

.reels-palco{position:relative}
.reels-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;display:none;place-items:center;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;
  backdrop-filter:blur(8px);box-shadow:0 6px 20px -8px rgba(0,0,0,.6);
  transition:background .2s ease,transform .2s ease,opacity .2s ease;opacity:0}
.reels-seta--ant{left:8px}
.reels-seta--prox{right:8px}
.reels-seta:hover{background:rgba(0,0,0,.8);transform:translateY(-50%) scale(1.06)}
.reels-seta:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:2px}
/* Só com mouse: no toque, arrastar já é o gesto natural e a seta cobriria a
   imagem. Aparecem ao aproximar o cursor do carrossel. */
@media(hover:hover){
  .reels-seta{display:grid}
  .reels-palco:hover .reels-seta{opacity:1}
}

/* Materiais por coleção (atacado) ---------------------------------------- */
/* Só variáveis que os quatro temas declaram (--linha, --tinta*, --raio,
   --sombra) e fundo transparente, herdando a página. Cada tema nomeia o cartão
   de um jeito (--carta no aurora, --papel nos outros): fixar um deles pintaria
   o bloco com a cor errada nos demais. */
.materiais{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));margin-top:18px}
.material{display:flex;flex-direction:column;overflow:hidden;color:inherit;background:transparent;
  border:1px solid var(--linha,#e5e5e5);border-radius:var(--raio,12px);
  transition:transform .25s ease,box-shadow .25s ease}
.material:hover{transform:translateY(-2px);box-shadow:var(--sombra,0 8px 24px rgba(0,0,0,.08))}
.material__capa{display:block;aspect-ratio:4/3;overflow:hidden}
.material__capa img{width:100%;height:100%;object-fit:cover;display:block}
/* min-width:0 autoriza o texto longo a truncar em vez de esticar o cartão. */
.material__texto{display:flex;flex-direction:column;gap:5px;min-width:0;padding:14px 16px}
.material__texto strong{font-size:.95rem;line-height:1.3}
.material__texto small{font-size:.82rem;color:var(--tinta-3,#777);line-height:1.5}
/* margin-top:auto cola a etiqueta no rodapé: com descrições de tamanhos
   diferentes, sem isso ela flutuaria em alturas diferentes entre os cartões. */
.material__abrir{margin-top:auto;padding-top:6px;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;color:var(--tinta,currentColor)}

/* Rodapé padronizado: redes no topo, políticas sob a identidade legal ----- */
/* O modificador --topo só reposiciona: a aparência dos ícones continua sendo
   a que cada tema já definiu em .rodape-social, para o bloco não destoar. */
.rodape-social--coluna{justify-content:flex-start;margin:18px 0 0;padding:0;border:0}
.rodape-politicas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;
  margin-top:8px;font-size:.78rem}
.rodape-politicas a{color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:3px}
.rodape-politicas a:hover{opacity:1}
.rodape-politicas span{opacity:.45}

/* Aviso flutuante: erro e sucesso precisam ser distinguíveis de relance ---- */
/* Faixa lateral colorida em vez de fundo inteiro: o texto continua sendo lido
   sobre o fundo do tema, no claro e no escuro, sem cada tema precisar
   recalcular contraste em cima de vermelho ou verde. */
.torrada--erro{border-left:4px solid #c0392b}
.torrada--ok{border-left:4px solid #1e8e5a}

/* Carrossel de produtos --------------------------------------------------- */
/* --colunas define quantos itens cabem; o item calcula a própria largura a
   partir dele e do gap. Assim o tema muda só o número, num lugar, em vez de
   recalcular porcentagens em cada ponto de quebra. */
.carrossel{position:relative;--colunas:1.6;--gap:16px}
@media(min-width:560px){.carrossel{--colunas:2.4}}
@media(min-width:820px){.carrossel{--colunas:3.4}}
@media(min-width:1100px){.carrossel{--colunas:4}}

.carrossel__trilha{display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;
  /* pan-y liberado: sem ele o arrasto vertical iniciado sobre o carrossel é
     engolido e a página não rola -- o mesmo defeito que os reels tiveram. */
  touch-action:pan-x pan-y pinch-zoom;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.carrossel__trilha::-webkit-scrollbar{width:0;height:0;display:none}
.carrossel__trilha:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.carrossel__item{flex:0 0 calc((100% - var(--gap) * (var(--colunas) - 1)) / var(--colunas));
  min-width:0;scroll-snap-align:start}

.carrossel__seta{position:absolute;top:38%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;
  opacity:0;transition:opacity .2s,background .2s}
.carrossel__seta--ant{left:-6px}
.carrossel__seta--prox{right:-6px}
.carrossel:hover .carrossel__seta{opacity:1}
.carrossel__seta:hover{background:#050505;color:#fff;border-color:#050505}
.carrossel__seta:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:2px}
.carrossel__seta[disabled]{opacity:0;pointer-events:none}
/* Coube tudo na tela: seta nenhuma tem função. */
.carrossel--completo .carrossel__seta{display:none}
/* Sem mouse o hover nunca acontece; ali o arraste é o gesto, e as setas só
   tomariam espaço da foto. */
@media(hover:none){.carrossel__seta{display:none}}

/* Comandos do reel só ao passar o mouse ---------------------------------- */
/* Play e som são controles, não conteúdo: sobre o vídeo o tempo todo eles
   competem com a imagem, que é o que a pessoa veio ver. */
.reel__play,.reel__som{opacity:0;transition:opacity .2s ease}
.reel:hover .reel__play,
.reel:hover .reel__som,
.reel__play:focus-visible,.reel__som:focus-visible{opacity:1}
/* Tocando, o play não tem função — vale mesmo sob o mouse. Reafirmado aqui
   porque a regra de hover tem a mesma especificidade e viria depois. */
.reel.tocando .reel__play{opacity:0;pointer-events:none}
/* Sem mouse o hover nunca acontece: os dois sumiriam para sempre, e o som
   ficaria inalcançável justamente onde ele começa mudo. */
@media(hover:none){.reel__play,.reel__som{opacity:1}}

.convite-favoritos{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}
.convite-favoritos__caixa{position:relative;width:min(100%,470px);padding:38px 34px 32px;border:1px solid var(--linha,rgba(128,128,128,.3));border-radius:var(--raio,12px);background:var(--fundo,#fff);color:var(--tinta,#111);text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.32);animation:confirmacao-entrada .3s cubic-bezier(.2,.8,.2,1) both}
.convite-favoritos__icone{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border:1px solid currentColor;border-radius:50%}.convite-favoritos__icone svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.6}
.convite-favoritos__sobre{display:block;margin-bottom:10px;font-size:.64rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.convite-favoritos h2{margin:0;font-size:clamp(1.45rem,4vw,2rem);line-height:1.08}.convite-favoritos p{max-width:390px;margin:16px auto 0;color:var(--tinta-2,#666);line-height:1.55}.convite-favoritos__acoes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}.convite-favoritos__acoes .botao{margin:0;text-decoration:none}.convite-favoritos__fechar{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;background:transparent;color:inherit;font:300 26px/1 sans-serif}
@media(max-width:520px){.convite-favoritos__caixa{padding:35px 20px 24px}.convite-favoritos__acoes{grid-template-columns:1fr}}

/* Respiro no rodapé -------------------------------------------------------
   Os quatro blocos do fim (selos, identidade legal, políticas e assinatura)
   vinham colados um no outro e liam-se como um parágrafo só. Separar por
   espaço, e não por linha divisória, mantém o rodapé leve. */
.rodape-confianca{margin-top:30px;padding-top:26px;border-top:1px solid var(--linha,rgba(128,128,128,.22))}
.rodape-legal{margin-top:26px;line-height:1.7}
.rodape-politicas{margin-top:16px}
.rodape-credito{margin-top:26px;padding-top:22px;border-top:1px solid var(--linha,rgba(128,128,128,.22));
  text-align:center;font-size:.76rem;opacity:.75}
.rodape-credito a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.rodape-credito a:hover{opacity:1;text-decoration-thickness:2px}

/* Paginação (usada em /excursoes) ---------------------------------------- */
/* Só o tema Mamá tinha esta regra; nos outros os números saíam como links
   soltos, sem área de clique. Escrita com as variáveis que os quatro temas
   declaram, para não pintar errado em nenhum. */
.paginacao{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:34px}
.paginacao a,.paginacao span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 10px;
  border:1px solid var(--linha,rgba(128,128,128,.3));border-radius:var(--raio,8px);
  font-size:.85rem;color:inherit;transition:border-color .2s,background .2s}
.paginacao a:hover{border-color:currentColor}
.paginacao a[aria-current="page"],.paginacao span[aria-current="page"]{
  background:var(--tinta,#111);color:var(--papel,#fff);border-color:var(--tinta,#111);font-weight:700}
/* Reticências não são alvo de clique e não devem parecer botão. */
.paginacao__reticencias{border:0;opacity:.5}

/* Setas do carrossel: visíveis, não escondidas atrás do hover -------------
   Estavam com opacity:0 até o ponteiro entrar, e ocultas de vez onde não há
   mouse. Quem não passa por cima não descobre que a fileira anda -- e no
   celular não descobria nunca. Ficam discretas e presentes.

   Na ponta a seta é ATENUADA, não removida: sumir move a outra de lugar e
   dá a impressão de que o controle some sozinho. */
.carrossel__seta{opacity:.9}
.carrossel:hover .carrossel__seta{opacity:1}
.carrossel__seta[disabled]{opacity:.28;pointer-events:none}
/* Dentro da área da foto: em -6px a seta encostava na borda da tela nas
   larguras em que o conteúdo já ocupa a linha inteira. */
.carrossel__seta--ant{left:6px}
.carrossel__seta--prox{right:6px}
@media(hover:none){
  .carrossel__seta{display:grid;width:38px;height:38px}
}

/* Dados fiscais e excursão própria (checkout) ---------------------------- */
.escolha-fiscal{display:flex;flex-wrap:wrap;gap:10px 22px;margin:12px 0 16px}
.escolha-fiscal .marcar{margin:0}
.escolha-fiscal small{opacity:.7}

/* Recolhido por padrão: é a saída para quem não achou a sua, não o caminho
   principal. Aberto, competiria com a lista logo acima. */
.excursao-propria{margin-top:14px;padding:12px 14px;border:1px dashed var(--linha,rgba(128,128,128,.4))}
.excursao-propria>summary{cursor:pointer;font-size:.86rem;font-weight:600;list-style:none}
.excursao-propria>summary::-webkit-details-marker{display:none}
.excursao-propria>summary::before{content:"+ ";font-weight:700}
.excursao-propria[open]>summary::before{content:"− "}
.excursao-propria .campo{margin-bottom:6px}
/* Chatbot próprio -------------------------------------------------------- */
.chatbot-publico{min-height:76vh;display:grid;place-items:center;padding:clamp(18px,5vw,60px) 16px;background:var(--fundo-2)}
.pagina-chatbot{margin:0;overflow:hidden;background:var(--fundo-2)}.pagina-chatbot .chatbot-publico{width:100%;height:100dvh;min-height:100dvh;padding:clamp(12px,3vw,30px)}
.chatbot-conversa{width:min(720px,100%);height:min(720px,calc(100dvh - 120px));min-height:520px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border:1px solid var(--borda);border-radius:24px;background:var(--fundo);box-shadow:0 28px 80px rgba(0,0,0,.12)}
.chatbot-conversa form{display:contents}.chatbot-conversa__topo{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--borda);background:var(--fundo)}.chatbot-conversa__avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--tinta);color:var(--fundo);font-weight:800}.chatbot-conversa__topo strong,.chatbot-conversa__topo small{display:block}.chatbot-conversa__topo small{color:var(--tinta-2);font-size:.75rem}.chatbot-conversa__topo small i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#22c55e}
.chatbot-conversa__avatar{position:relative;width:50px;height:50px;flex:0 0 50px;overflow:hidden;border:3px solid var(--fundo);outline:2px solid var(--marca);box-shadow:0 7px 20px rgba(0,0,0,.2);transition:transform .25s ease,box-shadow .25s ease}.chatbot-conversa__avatar:hover{transform:scale(1.05);box-shadow:0 9px 25px rgba(0,0,0,.28)}.chatbot-conversa__avatar img{width:100%;height:100%;object-fit:cover;object-position:center}.chatbot-digitando{display:flex;align-items:center;gap:4px}.chatbot-digitando span{width:7px;height:7px;border-radius:50%;background:var(--tinta-3);animation:chatbot-digitando 1s infinite ease-in-out}.chatbot-digitando span:nth-child(2){animation-delay:.14s}.chatbot-digitando span:nth-child(3){animation-delay:.28s}@keyframes chatbot-digitando{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.chatbot-conversa__mensagens{overflow-y:auto;padding:22px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.chatbot-conversa__mensagens::-webkit-scrollbar{display:none;width:0;height:0}.chatbot-turno{display:contents}/* Cada bolha entra deslizando de baixo, como num aplicativo de mensagem --
   antes ela simplesmente aparecia (display:none -> visível), o que quebrava a
   sensação de conversa que o "digitando..." acabava de criar. */
.chatbot-msg{width:max-content;max-width:min(82%,520px);margin:0 0 12px;padding:11px 15px;border-radius:17px;font-size:.96rem;line-height:1.45;animation:chatbot-entrada .34s cubic-bezier(.22,.8,.3,1) both;transform-origin:bottom}
@keyframes chatbot-entrada{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.chatbot-responder{animation:chatbot-entrada .3s cubic-bezier(.22,.8,.3,1) both}
/* Quem pediu menos movimento no sistema não deve receber animação nenhuma. */
@media(prefers-reduced-motion:reduce){.chatbot-msg,.chatbot-responder{animation:none}}.chatbot-msg p{margin:0}.chatbot-msg--bot{margin-right:auto;border-bottom-left-radius:5px;background:var(--fundo-2)}.chatbot-msg--usuario{margin-left:auto;border-bottom-right-radius:5px;background:var(--tinta);color:var(--fundo)}.chatbot-msg--erro{margin-right:auto;background:#fee2e2;color:#991b1b}.chatbot-inicio{margin:4px 0 22px}.chatbot-responder{display:flex;align-items:flex-end;gap:9px;margin:4px 0 22px;padding:7px 7px 7px 15px;border:1px solid var(--borda);border-radius:18px;background:var(--fundo)}.chatbot-responder input,.chatbot-responder select,.chatbot-responder textarea{flex:1;min-width:0;padding:9px 0;border:0;background:transparent;color:var(--tinta);font:inherit;outline:none}.chatbot-responder textarea{min-height:70px;resize:vertical}.chatbot-responder button{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--tinta);color:var(--fundo);cursor:pointer}.chatbot-conversa__rodape{padding:15px 20px;border-top:1px solid var(--borda)}.chatbot-publico [hidden]{display:none!important}
.chatbot-telefone{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.chatbot-telefone input{width:100%}.chatbot-bandeira-brasil{position:relative;display:block;width:20px;height:14px;flex:0 0 20px;overflow:hidden;border-radius:2px;background:#159447}.chatbot-bandeira-brasil::before{content:"";position:absolute;inset:3px 5px;background:#f7d117;transform:rotate(45deg)}.chatbot-bandeira-brasil i{position:absolute;left:8px;top:5px;width:5px;height:5px;border-radius:50%;background:#21468b}.chatbot-pais-seta{font-size:.8rem;color:var(--tinta-3)}.chatbot-responder--telefone>button{background:#18a957;color:#fff}
.chatbot-opcoes{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chatbot-opcoes button{width:auto;height:auto;padding:10px 16px;border:1px solid var(--tinta);border-radius:999px;background:var(--fundo);color:var(--tinta);font:inherit;font-weight:650}.chatbot-opcoes button:hover{background:var(--tinta);color:var(--fundo)}
.chatbot-responder:has(.chatbot-opcoes){padding:0;border:0;border-radius:0;background:transparent}
/* Verde oficial do WhatsApp (#25D366): o botão precisa ser reconhecido de
   relance como "isto abre o WhatsApp", não como mais um botão da loja. */
.chatbot-grupo-link{display:flex!important;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:12px 20px;border-radius:999px;background:#25d366!important;color:#fff!important;font-weight:800;text-decoration:none;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.chatbot-grupo-link:hover{background:#1eb455!important;transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,211,102,.32)}
.chatbot-grupo-link .icone-svg{flex:none}
.chatbot-grupo-link--indisponivel{background:var(--tinta-3)!important;cursor:not-allowed}
.chatbot-grupo-link--indisponivel:hover{background:var(--tinta-3)!important;transform:none;box-shadow:none}
.chatbot-loja-link{display:flex!important;align-items:center;justify-content:center;gap:8px}
.chatbot-loja-link .icone-svg{flex:none}

/* --- Página do pedido: cabeçalho e bloco de pagamento --------------------
   O título "Concluir pagamento" herdava o display serif gigante do tema e
   dominava a tela inteira, empurrando o formulário real para baixo da dobra.
   Aqui os tamanhos são explícitos e proporcionais à hierarquia da página. */
.pedido-cabeca__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pedido-cabeca__topo h1{margin:0;font-size:1.35rem;line-height:1.25}
.pedido-cabeca__topo p{margin:4px 0 0;color:var(--tinta-2);font-size:.9rem}
.pedido-cabeca__zap{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:9px}
.pedido-cabeca__zap .icone-svg{flex:none}
.pedido-cabeca__ajuda{margin-top:8px}

.pedido-pagamento__cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.pedido-pagamento__cabeca h2{margin:0;font-size:1.15rem}
.pedido-pagamento__cabeca strong{font-size:1.15rem;white-space:nowrap}
.pedido-pagamento__estado{margin:0 0 16px;color:var(--tinta-2);font-size:.92rem;line-height:1.5}
.pedido-pagamento__estado--alerta{color:#b45309}
/* O Brick é um bloco branco/escuro do provedor: uma moldura própria o
   integra à página em vez de deixá-lo "colado" sobre o fundo. */
.pedido-pagamento__brick{border-radius:14px;overflow:hidden}
.pedido-pagamento__brick:empty{min-height:120px}
.pedido-pagamento__trocar{margin-top:18px;padding-top:16px;border-top:1px solid var(--borda)}
.pedido-pagamento__trocar>summary{cursor:pointer;color:var(--tinta-2);font-size:.88rem;list-style:none}
.pedido-pagamento__trocar>summary::-webkit-details-marker{display:none}
.pedido-pagamento__trocar>summary::before{content:"↺ ";opacity:.7}
.pedido-pagamento__trocar>summary:hover{color:var(--tinta)}
.pedido-pagamento__trocar form{margin-top:14px}
@media(max-width:700px){.pedido-pagamento__cabeca h2,.pedido-pagamento__cabeca strong{font-size:1.05rem}}
.chatbot-conversa__rodape{display:grid;gap:10px}.chatbot-conversa__rodape .botao{width:100%;justify-content:center}
/* Tela final: so ha uma bolha, e o rodape ancorado embaixo deixava um vazio
   enorme entre a mensagem e o botao. Aqui a conversa ganha uma quarta faixa
   vazia que absorve a sobra, entao os botoes encostam na mensagem e o espaco
   livre fica abaixo deles. */
.chatbot-conversa--fim{grid-template-rows:auto auto auto 1fr}
.chatbot-conversa--fim .chatbot-conversa__rodape{padding-top:4px;border-top:0}
@media(max-width:700px){.chatbot-publico{padding:0}.chatbot-conversa{width:100%;height:calc(100dvh - var(--altura-topo,0px));min-height:580px;border:0;border-radius:0}.chatbot-conversa__mensagens{padding:18px 14px}.chatbot-msg{max-width:88%}}

/* Painel da conta: vitrine e capas dos pedidos ----------------------------- */
.conta-inicio{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:clamp(24px,4vw,56px);align-items:start}
.conta-inicio__principal{min-width:0}.conta-vitrine{min-width:0;position:sticky;top:90px;padding:18px;border:1px solid var(--linha,var(--borda));background:var(--papel,var(--fundo))}
.conta-vitrine header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}.conta-vitrine header>span{font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}.conta-vitrine header h2{max-width:230px;margin:0;text-align:right;font-size:1.18rem;line-height:1.1}
.conta-vitrine__destaque{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--papel-2,var(--fundo-2))}.conta-vitrine__destaque>img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}.conta-vitrine__tag{position:absolute;left:12px;top:12px;padding:6px 9px;background:#fff;color:#080808;font-size:.59rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.conta-vitrine__texto{position:absolute;inset:auto 0 0;display:flex;align-items:end;justify-content:space-between;gap:12px;padding:50px 15px 14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82))}.conta-vitrine__texto strong{font-size:.9rem}.conta-vitrine__texto small{white-space:nowrap;font-size:.76rem;font-weight:700}
.conta-vitrine__navegacao{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.conta-vitrine__navegacao button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--linha,var(--borda));background:transparent;color:inherit}.conta-vitrine__navegacao span{font-size:.68rem;color:var(--tinta-2)}
.conta-vitrine__miniaturas{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.conta-vitrine__miniaturas::-webkit-scrollbar{display:none}.conta-vitrine__miniaturas button{flex:0 0 66px;width:66px;padding:0 0 5px;overflow:hidden;border:1px solid transparent;background:transparent;color:inherit;text-align:left;scroll-snap-align:center}.conta-vitrine__miniaturas button[aria-current=true]{border-color:var(--tinta)}.conta-vitrine__miniaturas img{width:100%;aspect-ratio:3/4;object-fit:cover}.conta-vitrine__miniaturas button span{display:block;padding:4px 4px 0;overflow:hidden;font-size:.55rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.pedido-linha--com-capa{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important}.pedido-linha__capa{position:relative;width:64px;height:80px;overflow:hidden;align-self:center;background:var(--papel-2,var(--fundo-2))}.pedido-linha__capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .35s}.pedido-linha__capa img[hidden]{display:block;opacity:0;pointer-events:none}
@media(max-width:900px){.conta-inicio{grid-template-columns:minmax(0,1fr) minmax(270px,330px);gap:22px}}
@media(max-width:720px){.conta-inicio{grid-template-columns:1fr}.conta-vitrine{position:static;grid-row:2}.pedido-linha--com-capa{grid-template-columns:58px minmax(0,1fr)!important}.pedido-linha--com-capa .pedido-linha__acoes{grid-column:2}.pedido-linha__capa{width:58px;height:74px}.conta-vitrine header h2{text-align:left}.conta-vitrine header{align-items:start;flex-direction:column}}

/* Painel do cliente: leitura mais leve e navegação editorial -------------- */
.conta-cabecalho{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px 24px;margin-bottom:24px}
.conta-cabecalho>span{grid-column:1/-1;font-size:.66rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
.conta-cabecalho h1{margin:0!important;font-size:clamp(2.35rem,4vw,3.6rem)!important;line-height:.98!important;letter-spacing:-.04em}
.conta-cabecalho p{max-width:610px;margin:5px 0 0;color:var(--tinta-2);line-height:1.55}
.conta-cabecalho small{grid-column:2;grid-row:2/4;align-self:center;white-space:nowrap;color:var(--tinta-2)}
.conta-cabecalho small strong{color:var(--tinta)}
.conta-atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));margin-bottom:clamp(26px,4vw,44px);border:1px solid var(--linha,var(--borda));background:var(--papel,var(--fundo))}
.conta-atalhos form{display:contents}
.conta-atalhos a,.conta-atalhos button{min-height:70px;display:flex;align-items:center;gap:11px;padding:14px 16px;border:0;border-right:1px solid var(--linha,var(--borda));background:transparent;color:inherit;font:inherit;font-size:.72rem;font-weight:750;letter-spacing:.075em;text-align:left;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.conta-atalhos a:last-child,.conta-atalhos form:last-child button{border-right:0}
.conta-atalhos a:hover,.conta-atalhos button:hover{background:var(--tinta);color:var(--papel,var(--fundo))}
.conta-atalhos .icone-svg{flex:0 0 auto}
.conta-email-aviso{margin:-18px 0 28px}
.conta-inicio{grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:clamp(24px,4vw,56px)}
.conta-pedidos-resumo{padding:clamp(18px,2.4vw,30px);border-color:var(--linha,var(--borda));background:var(--papel,var(--fundo))}
.conta-pedidos-resumo>header,.conta-vitrine>header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.conta-pedidos-resumo>header span,.conta-vitrine>header>div>span{display:block;margin-bottom:4px;font-size:.62rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-2)}
.conta-pedidos-resumo>header h2,.conta-vitrine>header h2{margin:0;font-size:1.35rem;line-height:1.1;text-align:left}
.conta-pedidos-resumo>header>a{display:flex;align-items:center;gap:6px;white-space:nowrap;color:inherit;font-size:.7rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.conta-pedidos-resumo .pedido-linha{padding:16px 0;border-color:var(--linha,var(--borda))}
.conta-pedidos-resumo .pedido-linha__info{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.conta-pedidos-resumo .pedido-linha__codigo{font-size:1rem}
.conta-pedidos-resumo .pedido-linha__meta{flex-basis:100%;font-size:.7rem;color:var(--tinta-2)}
.conta-pedidos-resumo .pedido-linha__acoes{gap:8px}
.conta-pedidos-resumo .pedido-linha__acoes>a{color:inherit;font-size:.67rem;font-weight:750;letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px;text-transform:uppercase}
.conta-pedidos-resumo>footer{display:flex;justify-content:flex-end;padding-top:18px}
.conta-pedidos-resumo>footer button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:inherit;font:inherit;font-size:.68rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.conta-pedidos-vazio{display:grid;justify-items:start;gap:12px;padding:34px 0}
.conta-vitrine{padding:0;border:0;background:transparent}
.conta-vitrine>header{margin-bottom:12px}
.conta-vitrine__contador{color:var(--tinta-2);font-size:.7rem;font-weight:700}
.conta-vitrine__visual{position:relative}
.conta-vitrine__destaque{aspect-ratio:4/5;border:1px solid var(--linha,var(--borda))}
.conta-vitrine__navegacao{position:absolute;inset:50% 11px auto;z-index:3;margin:0;transform:translateY(-50%);pointer-events:none}
.conta-vitrine__navegacao button{width:42px;height:42px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(0,0,0,.62);color:#fff;pointer-events:auto;backdrop-filter:blur(5px)}
.conta-vitrine__miniaturas{gap:9px;margin-top:11px;padding:2px}
.conta-vitrine__miniaturas button{flex-basis:76px;width:76px;padding:0;border:0;opacity:.48;transition:opacity .2s,transform .2s}
.conta-vitrine__miniaturas button[aria-current=true]{border:0;outline:2px solid var(--tinta);outline-offset:2px;opacity:1}
.conta-vitrine__miniaturas button:hover{opacity:1;transform:translateY(-2px)}
.conta-vitrine__miniaturas img{aspect-ratio:4/5}
@media(max-width:900px){
  .conta-atalhos{grid-template-columns:repeat(4,1fr)}
  .conta-atalhos a,.conta-atalhos button{border-bottom:1px solid var(--linha,var(--borda))}
  .conta-inicio{grid-template-columns:minmax(0,1fr) minmax(290px,340px)}
}
@media(max-width:720px){
  .conta-cabecalho{grid-template-columns:1fr;margin-bottom:20px}
  .conta-cabecalho h1{font-size:clamp(2.3rem,13vw,3.4rem)!important}
  .conta-cabecalho p{margin-top:4px;font-size:.9rem}
  .conta-cabecalho small{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
  .conta-atalhos{grid-template-columns:repeat(2,1fr);margin-bottom:28px}
  .conta-atalhos a,.conta-atalhos button{min-height:62px;padding:12px;font-size:.65rem;border-right:1px solid var(--linha,var(--borda))}
  .conta-inicio{grid-template-columns:1fr;gap:34px}
  .conta-pedidos-resumo{padding:17px}
  .conta-pedidos-resumo>header{align-items:center}
  .conta-pedidos-resumo .pedido-linha--com-capa{grid-template-columns:58px minmax(0,1fr)!important}
  .conta-pedidos-resumo .pedido-linha__acoes{grid-column:2;align-items:center;flex-direction:row;justify-content:space-between;width:100%}
  .conta-vitrine{grid-row:auto}
}

.conta-voltar{margin:0 0 22px}
.conta-voltar a{display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:.69rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.conta-voltar a:hover{text-decoration:underline;text-underline-offset:4px}
.conta-codigo-detalhe{display:flex;justify-content:space-between;gap:16px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--linha,var(--borda));color:var(--tinta-2);font-size:.76rem}
.conta-codigo-detalhe strong{color:var(--tinta)}
.checkout-confirmacao-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:16px 0;background:var(--linha,var(--borda));border:1px solid var(--linha,var(--borda))}
.checkout-confirmacao-dados>div{display:grid;gap:4px;padding:15px;background:var(--papel,var(--fundo))}
.checkout-confirmacao-dados span{font-size:.62rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.checkout-confirmacao-dados strong{overflow-wrap:anywhere;font-size:.9rem}
@media(max-width:560px){.checkout-confirmacao-dados{grid-template-columns:1fr}}

/* Detalhes do pedido: resumo acompanha a leitura no desktop. */
@media(min-width:900px){
  .pedido-lateral{position:sticky;top:86px;align-self:start}
}
.pedido-excursao-manual{display:grid;gap:7px}
.pedido-excursao-manual>span{font-size:.65rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.pedido-excursao-manual>strong{font-size:1rem;line-height:1.45}
.pedido-excursao__observacao{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--linha,var(--borda));color:var(--tinta-2);font-size:.82rem;line-height:1.5}
.acesso-identificador-ajuda{margin:-5px 0 14px;font-size:.72rem;line-height:1.45}
.conta-pagina-cabecalho{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
.conta-pagina-cabecalho h1{margin-bottom:8px}
.conta-pagina-cabecalho p{max-width:720px;margin:0;color:var(--tinta-2)}
.conta-pagina-cabecalho>.botao{flex:0 0 auto;gap:8px}
@media(max-width:700px){.conta-pagina-cabecalho{align-items:flex-start;flex-direction:column}.conta-pagina-cabecalho>.botao{width:100%}}
.contato-campos-dinamicos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.contato-campos-dinamicos .campo--largo{grid-column:1/-1}.contato-formulario .g-recaptcha{margin:18px 0;transform-origin:left top}@media(max-width:620px){.contato-campos-dinamicos{grid-template-columns:1fr}.contato-formulario .g-recaptcha{max-width:100%;overflow:hidden}}

/* Excursão no checkout: favorita, e a saída de decidir depois -------------- */
.excursao__selo--favorita{background:var(--tinta,#111);color:var(--papel,var(--carta,#fff))}
.excursao-opcional{font-size:.72rem;font-weight:600;opacity:.7;text-transform:none;letter-spacing:0}
/* Tracejado para ler como alternativa, e não como mais uma excursão da lista. */
.excursao-depois{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;padding:12px 13px;
  border:1px dashed var(--linha,rgba(128,128,128,.4));border-radius:var(--raio,8px)}
.excursao-depois input{flex:none;margin-top:2px}
.excursao-depois strong{display:block;font-size:.88rem}
.excursao-depois small{display:block;margin-top:2px;font-size:.78rem;line-height:1.45;color:var(--tinta-2,#555)}

/* E-mail da nota fiscal --------------------------------------------------- */
.nota-email{margin-top:4px}
.nota-email .marcar{align-items:flex-start;margin-bottom:8px}
/* O endereço espelhado em bloco próprio, e truncado: e-mail longo esticaria
   a linha da caixa de marcar e quebraria o alinhamento com o texto. */
.nota-email .marcar small{display:block;margin-top:2px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.8rem;color:var(--tinta-3,#888)}
.nota-email [data-nota-email-campo][hidden]{display:none}

/* Selos da excursão: contraste e a favorita reconhecível ------------------
   Branco sobre #25d366 dá cerca de 1,9:1 — abaixo do mínimo legível, e num
   selo pequeno em caixa alta o texto quase some. Preto sobre o mesmo verde
   sobe para ~11:1 e é o padrão do próprio WhatsApp.

   O selo também encolheu: ele acompanha a excursão, não é o assunto da
   linha. Ficava do tamanho de um botão e disputava com o nome. */
.excursao__selo{background:#25d366;color:#0a0a0a;font-weight:700;padding:3px 9px;font-size:.63rem}
/* Só o estado: contorno em vez de preenchimento, porque é informação mais
   fraca — "passa pelo seu estado" não é "para na sua cidade". */
.excursao__selo--estado{background:transparent;color:var(--tinta-2,#555);
  border:1px solid var(--linha,rgba(128,128,128,.35));font-weight:600}

/* Favorita: coração, e cor própria. Ela não compete com a cobertura --
   dizem coisas diferentes e aparecem juntas na mesma linha. */
.excursao__selo--favorita{display:inline-flex;align-items:center;gap:5px;
  background:transparent;color:#e0245e;border:1px solid currentColor;font-weight:700}
.excursao__selo--favorita::before{content:"♥";font-size:.9em;line-height:1}
/* No escuro o rosa precisa clarear: sobre fundo quase preto o #e0245e fica
   em ~4,3:1, no limite do legível. */
html[data-modo="escuro"] .excursao__selo--favorita{color:#ff6b95}
@media(prefers-color-scheme:dark){
  html:not([data-modo="claro"]) .excursao__selo--favorita{color:#ff6b95}
}

/* Avaliações nos temas que herdam a folha base. */
.estrelas-avaliacao{display:inline-flex;gap:2px;color:#d6d6d2}.estrelas-avaliacao span{display:inline-flex}.estrelas-avaliacao .ativa{color:#f5b301}

/* Tema padrão: componentes interativos com o mesmo comportamento dos temas
   editoriais. A gaveta permanece no DOM para abrir sem trocar de página. */
body.travado{overflow:hidden}
.gaveta-padrao-veu{position:fixed;inset:0;z-index:88;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.gaveta-padrao-veu[hidden]{display:none}.gaveta-padrao-veu.aberto{opacity:1;visibility:visible}
.gaveta-padrao{position:fixed;z-index:89;top:0;right:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(440px,100%);height:100dvh;border-left:1px solid var(--borda);background:var(--superficie);color:var(--tinta);box-shadow:-20px 0 60px rgba(0,0,0,.18);transform:translateX(102%);transition:transform .32s cubic-bezier(.3,.7,.2,1)}
.gaveta-padrao.aberta{transform:none}.gaveta-padrao__cabeca{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding:18px 24px;border-bottom:1px solid var(--borda)}.gaveta-padrao__cabeca h2{margin:0;font-size:1.45rem}.gaveta-padrao__fechar{appearance:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit}.gaveta-padrao__fechar:hover{background:var(--fundo-2)}
.gaveta-padrao__corpo{overflow-y:auto;padding:10px 24px 24px;overscroll-behavior:contain}.gaveta-padrao__item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:13px;align-items:start;padding:16px 0;border-bottom:1px solid var(--borda)}.gaveta-padrao__item img{width:72px;height:94px;border-radius:var(--raio-sm);object-fit:cover;background:var(--fundo-2)}.gaveta-padrao__item strong,.gaveta-padrao__item small{display:block}.gaveta-padrao__item strong{font-size:.88rem;line-height:1.35}.gaveta-padrao__item small{margin-top:3px;color:var(--tinta-2);font-size:.74rem}.gaveta-padrao__qtd{display:grid;grid-template-columns:30px 32px 30px;width:max-content;margin-top:10px;overflow:hidden;border:1px solid var(--borda);border-radius:999px}.gaveta-padrao__qtd button{height:30px;padding:0;border:0;background:transparent;color:inherit}.gaveta-padrao__qtd button:hover{background:var(--fundo-2)}.gaveta-padrao__qtd span{display:grid;place-items:center;font-size:.76rem;font-weight:700}.gaveta-padrao__remover{padding:4px 0;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--tinta-2);font-size:.62rem;font-weight:700;text-transform:uppercase}
.gaveta-padrao__rodape{padding:22px 24px max(22px,env(safe-area-inset-bottom));border-top:1px solid var(--borda);background:var(--superficie)}.gaveta-padrao__rodape>div{display:flex;justify-content:space-between;margin-bottom:16px;font-size:1.05rem}.gaveta-padrao__ver{display:block;margin-top:13px;text-align:center;font-size:.78rem;text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.gaveta-padrao__cabeca,.gaveta-padrao__corpo,.gaveta-padrao__rodape{padding-inline:18px}.gaveta-padrao__item{grid-template-columns:64px minmax(0,1fr) auto}.gaveta-padrao__item img{width:64px;height:84px}}

/* Catálogo por categoria e banner da vitrine — versão mínima do tema padrão;
   os temas próprios refinam por cima. */
.categorias-faixa{padding-block:36px 0}
.categorias-faixa .secao__cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.banner-vitrine{position:relative;display:block;margin-top:32px;overflow:hidden;border-radius:8px}
.banner-vitrine img{width:100%;height:auto;display:block}
.banner-vitrine__texto{position:absolute;inset:auto 0 0;display:grid;gap:5px;padding:48px 20px 18px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.banner-vitrine__texto strong{font-size:1.4rem;line-height:1.1}
.banner-vitrine__texto span{font-size:.82rem}
.banner-vitrine__acao{justify-self:start;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* Ofertas — versão mínima do tema padrão. */
.oferta-bump{display:grid;gap:10px;margin-top:16px}
.oferta-bump__cartao{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px dashed var(--tinta,#111);border-radius:8px}
.oferta-bump__foto{width:64px;height:84px;object-fit:cover}
.oferta-bump__chamada{display:block;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.oferta-bump__precos{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 0}
.oferta-bump__botao{grid-column:1/3;width:100%}
.carrinho-sugerido{margin-top:18px}
.carrinho-sugerido__cabeca{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
.carrinho-sugerido__lista{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.carrinho-sugerido__item label{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;cursor:pointer}
.carrinho-sugerido__item img{width:44px;height:58px;object-fit:cover}

/* Adicionais e observação do item (modo delivery) ------------------------ */
.adicionais{display:grid;gap:14px;margin:16px 0 4px}
.adicionais__encomenda{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:var(--raio-sm);background:var(--espera-fundo);color:var(--espera-texto);font-size:.86rem}
.adicionais__grupo{margin:0;padding:0;border:1px solid var(--borda);border-radius:var(--raio-sm);overflow:hidden;background:var(--superficie)}
.adicionais__grupo legend{float:left;width:100%;padding:10px 14px;background:var(--fundo-2);font-weight:700;font-size:.92rem}
.adicionais__grupo legend small{font-weight:500;color:var(--tinta-3);margin-left:6px}
.adicionais__grupo legend+*{clear:both}
.dl-opcoes .opcoes__lista{padding:12px 14px}
.adicionais__item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--borda);cursor:pointer;font-size:.92rem}
.adicionais__item:first-of-type{border-top:0}
.adicionais__item:hover{background:var(--fundo-2)}
.adicionais__item input{width:20px;height:20px;accent-color:var(--marca);flex:0 0 auto}
.adicionais__nome{flex:1}
.adicionais__preco{color:var(--tinta-2);font-size:.86rem;white-space:nowrap}
.adicionais__obs{margin:0}
.adicionais__obs textarea{width:100%;min-height:70px;padding:10px 12px;border:1px solid var(--borda);border-radius:var(--raio-sm);background:var(--superficie);color:var(--tinta);font:inherit;resize:vertical}

/* Andamento do pedido (delivery) -------------------------------------- */
.pedido-etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:18px 0 0;padding:18px 16px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie)}
.pedido-etapas__passo{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--tinta-3);font-size:.82rem}
.pedido-etapas__passo::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:3px;background:var(--borda);z-index:0}
.pedido-etapas__passo:first-child::before{display:none}
.pedido-etapas__marca{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--fundo-2);border:2px solid var(--borda);font-weight:800;color:var(--tinta-2)}
.pedido-etapas__passo--feito{color:var(--tinta-2)}
.pedido-etapas__passo--feito .pedido-etapas__marca,.pedido-etapas__passo--atual .pedido-etapas__marca{background:var(--marca);border-color:var(--marca);color:#fff}
.pedido-etapas__passo--feito::before,.pedido-etapas__passo--atual::before{background:var(--marca)}
.pedido-etapas__passo--atual{color:var(--tinta);font-weight:700}
.pedido-etapas__passo--atual .pedido-etapas__marca{box-shadow:0 0 0 5px color-mix(in srgb,var(--marca) 20%,transparent)}
.pedido-etapas__agendado{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 14px;border-radius:var(--raio-sm);background:var(--espera-fundo);color:var(--espera-texto);font-size:.88rem}
@media(max-width:480px){.pedido-etapas{padding:14px 6px}.pedido-etapas__passo{font-size:.72rem}}