/* Ícone de carrinho no topo — ver carrinho-icone.js. Só acrescenta; não muda o resto do cabeçalho. */
.ci-carrinho{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:40px;padding:0!important;margin-left:-6px;color:var(--tx,#3b332d);text-decoration:none;-webkit-tap-highlight-color:transparent}
.ci-carrinho::before{content:"";position:absolute;left:-8px;right:-8px;top:0;bottom:0} /* área de toque 40×40 sem ocupar largura */
.ci-carrinho svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;display:block}
.ci-carrinho:hover{color:var(--acento,#8a5a3c)}
.ci-carrinho:focus-visible{outline:1px solid var(--acento,#8a5a3c);outline-offset:2px}
.ci-selo{position:absolute;top:5px;right:-7px;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:#b0603c;color:#fbf6ef;font:500 9.5px/15px 'Jost','Helvetica Neue',Arial,sans-serif;letter-spacing:0;text-align:center;text-indent:0;text-transform:none;box-shadow:0 0 0 1.5px var(--linho,#f3ede4);pointer-events:none}
.ci-selo[hidden],.ci-carrinho[hidden],.ci-li[hidden]{display:none!important}
.topo .nav-dir li.ci-li{display:list-item;margin-left:0}
.topo .nav-dir ul li.ci-li{display:flex}
/* opcao-a já tem o ícone dela: só acrescenta o selo */
.ci-carrinho.ci-proprio{width:auto;height:auto;margin-left:0;padding:10px 0 10px 4px!important}
.ci-carrinho.ci-proprio::before{left:-9px;right:-9px;top:-1px;bottom:-1px}
.ci-carrinho.ci-proprio .ci-selo{top:6px;right:-8px}
/* checkout / obrigado: topo só com a marca */
.ci-carrinho.ci-solto{position:absolute;right:clamp(20px,4vw,72px);top:50%;transform:translateY(-50%);width:40px;margin:0}
.ci-carrinho.ci-solto::before{left:0;right:0}
.ci-carrinho.ci-solto .ci-selo{right:2px}
.ci-pulo svg{animation:ci-pulo .5s ease}
@keyframes ci-pulo{40%{transform:scale(1.15)}}
/* celular/tablet: o ícone avança sobre a margem lateral do topo e o vão entre os links diminui um pouco,
   para a marca continuar exatamente no centro (só quando o ícone está visível) */
@media (max-width:960px){
  .topo.ci-novo:not(.ci-vazio) .ci-carrinho:not(.ci-solto){width:22px;margin-left:-8px;margin-right:-6px}
  .topo.ci-novo:not(.ci-vazio) .ci-carrinho:not(.ci-solto)::before{left:-12px;right:-6px}
  .topo.ci-novo:not(.ci-vazio) .ci-carrinho:not(.ci-solto) .ci-selo{right:-5px}
  .topo.ci-novo:not(.ci-vazio) > .nav-dir,.topo.ci-novo:not(.ci-vazio) .nav-dir ul{gap:10px}
}
}
@media (prefers-reduced-motion:reduce){.ci-pulo svg{animation:none}}