/* carrinho.css — o pedido da página de doces (carrinho.js), 30/09/2026.
   Usa os tokens do style.css (e os que o site-v2-tema redefine na V2).
   Contraste: texto pequeno nunca em --dourado (regra 1), só --dourado-txt. */

/* ── o card (01/10/2026) ─────────────────────────────────────────────────
   Nome primeiro, uma frase, o preço. O card inteiro abre a ficha: o botão
   mora no <h3> e o ::after dele estica sobre o card (padrão "stretched link").
   Referências de leitura: as fichas de produto do Cardápio Web e do iFood
   (foto grande + quantidade + adicionar), com o acabamento editorial das
   confeitarias de referência do ../benchmarking/. */
.doce{ position:relative; text-align:center }
.doce .doce__foto{ transition:transform .5s cubic-bezier(.2,.7,.3,1) }
.doce:hover .doce__foto img,.doce:focus-within .doce__foto img{ transform:scale(1.05) }
.doce:hover .doce__foto::after,.doce:focus-within .doce__foto::after{ box-shadow:inset 0 0 0 1px var(--dourado,#BF9402) }
.doce__nome{ margin-top:1rem }
.doce__abre{
  font:inherit; letter-spacing:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-align:inherit;
}
.doce__abre::after{ content:""; position:absolute; inset:0; z-index:2 }
.doce__abre:focus-visible{ outline:0 }
.doce__abre:focus-visible::after{ outline:2px solid var(--dourado-txt,#7A5D00); outline-offset:6px }
.doce__resumo{
  margin:.45rem auto 0; max-width:32ch; font-size:.84rem; line-height:1.5; color:var(--cacau,#5C3D28);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.doce .doce__preco{ margin-top:.55rem }
.doce__desc[hidden]{ display:none }
.doce__selo{
  position:absolute; left:.6rem; top:.6rem; z-index:1;
  font:500 .7rem/1 var(--texto); letter-spacing:.14em; text-transform:uppercase;
  background:var(--verde,#1F5627); color:var(--creme,#F0EBE0); padding:.45rem .6rem;
  animation:selo-entra .35s cubic-bezier(.22,.8,.24,1);
}
.doce__selo[hidden]{ display:none }
@keyframes selo-entra{ from{ opacity:0; transform:translateY(-4px) } }
@media (max-width:520px){
  .doce__resumo{ font-size:.78rem; margin-top:.35rem }
  .doce__selo{ left:.4rem; top:.4rem; font-size:.62rem; letter-spacing:.1em; padding:.38rem .45rem }
}

.carrinho-passo{ display:inline-flex; align-items:stretch; border:1px solid var(--verde,#1F5627); background:var(--branco,#fff) }
.carrinho-passo[hidden]{ display:none }
.carrinho-passo__b{
  width:44px; min-height:44px; border:0; background:transparent; cursor:pointer;
  font:400 1.2rem/1 var(--texto); color:var(--verde,#1F5627);
}
.carrinho-passo__b:hover,.carrinho-passo__b:focus-visible{ background:var(--creme,#F0EBE0) }
.carrinho-passo__q,.carrinho-passo__n{
  width:3.4rem; border:0; border-inline:1px solid var(--bege,#B8AA92); text-align:center;
  font:500 .95rem/1 var(--texto); color:var(--tinta,#1A1410); background:transparent;
  display:inline-flex; align-items:center; justify-content:center; -moz-appearance:textfield;
}
.carrinho-passo__q::-webkit-inner-spin-button,.carrinho-passo__q::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0 }
.doce.no-pedido .doce__foto::after{ box-shadow:inset 0 0 0 2px var(--verde,#1F5627) }

/* ── a barra ─────────────────────────────────────────────────────────────
   01/10/2026: o botão era cacau sobre tinta (o .botao da V2) e sumia. Agora
   a barra é tinta com filete de bronze e o botão é dourado-claro com texto
   tinta (~9:1), o único elemento claro da barra: o olho vai direto nele. */
.carrinho-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:.85rem max(1.2rem, calc((100vw - 68rem) / 2)) calc(.85rem + env(safe-area-inset-bottom));
  background:var(--tinta,#1A1410); color:var(--creme,#F0EBE0);
  border-top:1px solid var(--dourado,#BF9402);
  transform:translateY(110%); transition:transform .45s cubic-bezier(.22,.8,.24,1);
  box-shadow:0 -10px 30px rgba(26,20,16,.22);
}
.tem-pedido .carrinho-barra{ transform:none }
.carrinho-barra__txt{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:.25rem .8rem; line-height:1.3 }
.carrinho-barra__txt b{ font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem;
  color:var(--dourado-claro,#DFBC4E) }
.carrinho-barra__txt span{ font-size:.92rem; color:var(--creme,#F0EBE0) }
.carrinho-barra__txt strong{ font-weight:500; font-size:1.15rem; letter-spacing:.02em; color:var(--creme,#F0EBE0) }
.carrinho-barra .botao.carrinho-barra__b{
  flex:0 0 auto; white-space:nowrap;
  background:var(--dourado-claro,#DFBC4E); border-color:var(--dourado-claro,#DFBC4E); color:var(--tinta,#1A1410);
  padding:1rem 1.8rem; transition:background .3s, border-color .3s, transform .3s;
}
.carrinho-barra .botao.carrinho-barra__b::after{ content:"→"; margin-left:.7rem; letter-spacing:0; transition:transform .3s }
@media (hover:hover){
  .carrinho-barra .botao.carrinho-barra__b:hover{
    background:var(--creme,#F0EBE0); border-color:var(--creme,#F0EBE0); color:var(--tinta,#1A1410); transform:translateY(-1px) }
  .carrinho-barra .botao.carrinho-barra__b:hover::after{ transform:translateX(3px) }
}
.carrinho-barra .botao.carrinho-barra__b:focus-visible{ outline:2px solid var(--dourado-claro,#DFBC4E); outline-offset:3px }
.carrinho-barra__aviso{
  position:absolute; left:50%; bottom:calc(100% + .7rem); transform:translate(-50%, 6px);
  margin:0; padding:.6rem 1rem; background:var(--verde,#1F5627); color:var(--creme,#F0EBE0);
  font-size:.85rem; white-space:nowrap; max-width:calc(100vw - 2rem); overflow:hidden; text-overflow:ellipsis;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.carrinho-barra__aviso:not(:empty){ opacity:1; transform:translate(-50%, 0) }
.carrinho-barra.pulsa strong{ animation:pulsa .6s ease }
@keyframes pulsa{ 40%{ color:var(--dourado-claro,#DFBC4E) } }
.tem-pedido{ padding-bottom:5.5rem }
/* com o pedido montado, o caminho é o carrinho: o WhatsApp flutuante e o
   alternador de versão saem da frente da barra */
.tem-pedido .whats,.tem-pedido .sv-whats,.tem-pedido .trocar-versao{ display:none }
@media (max-width:520px){
  .carrinho-barra{ flex-direction:column; align-items:stretch; gap:.5rem; text-align:center }
  .carrinho-barra__b{ width:100% }
  .tem-pedido{ padding-bottom:7.5rem }
}

/* ── a tela do pedido ─────────────────────────────────────────────────── */
.carrinho-tela{
  border:0; padding:0; margin:0 0 0 auto; height:100%; max-height:100%; width:min(100%, 30rem);
  background:var(--creme,#F0EBE0); color:var(--tinta,#1A1410);
}
.carrinho-tela::backdrop{ background:rgba(26,20,16,.55) }
.carrinho-tela__in{ padding:1.4rem 1.4rem 2rem; font-family:var(--texto) }
.carrinho-tela__topo{ display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--bege,#B8AA92); padding-bottom:.8rem }
.carrinho-tela__tit{ font-family:var(--titulo); font-weight:400; font-size:1.7rem; letter-spacing:.06em;
  color:var(--verde,#1F5627); margin:0 }
.carrinho-tela__x{ width:44px; height:44px; border:0; background:transparent; font-size:1.8rem; line-height:1;
  color:var(--marrom,#5C3D28); cursor:pointer }
.carrinho-lista{ list-style:none; margin:0; padding:0 }
.carrinho-item{ padding:1rem 0; border-bottom:1px solid var(--bege,#B8AA92) }
.carrinho-item__nome{ margin:0; font-family:var(--titulo); font-size:1.12rem; letter-spacing:.04em; color:var(--verde,#1F5627) }
.carrinho-item__det{ margin:.2rem 0 .6rem; font-size:.8rem; color:var(--marrom,#5C3D28) }
.carrinho-item__linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.carrinho-item__sub{ font-weight:500; font-size:.95rem }
.carrinho-item__tira{ margin-top:.3rem; border:0; background:transparent; padding:0; min-height:44px;
  font:400 .78rem var(--texto); color:var(--marrom,#5C3D28); text-decoration:underline; cursor:pointer }
.carrinho-total{ display:flex; justify-content:space-between; align-items:baseline; margin:1.1rem 0 .3rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dourado-txt,#7A5D00) }
.carrinho-total b{ font-size:1.25rem; letter-spacing:0; text-transform:none; color:var(--tinta,#1A1410); font-weight:500 }
.carrinho-nota{ font-size:.8rem; line-height:1.5; color:var(--marrom,#5C3D28); margin:0 0 1.4rem }
.carrinho-form{ display:grid; gap:.85rem; border-top:1px solid var(--bege,#B8AA92); padding-top:1.2rem }
.carrinho-form[hidden],.carrinho-feito[hidden]{ display:none }
.carrinho-form__tit{ font-family:var(--titulo); font-weight:400; font-size:1.3rem; letter-spacing:.05em;
  color:var(--verde,#1F5627); margin:0 }
.carrinho-form label{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .25rem; font-size:.78rem; letter-spacing:.08em; color:var(--marrom,#5C3D28) }
.carrinho-form label > input,.carrinho-form label > textarea{ flex:1 0 100% }
.carrinho-form label i{ font-style:normal; color:var(--vinho,#891B28) }
.carrinho-form input,.carrinho-form textarea{
  font:400 1rem var(--texto); color:var(--tinta,#1A1410); background:var(--branco,#fff);
  border:1px solid var(--bege,#B8AA92); padding:.7rem .8rem; min-height:44px; width:100%; box-sizing:border-box;
}
.carrinho-form input:focus,.carrinho-form textarea:focus{ outline:2px solid var(--verde,#1F5627); outline-offset:1px }
.carrinho-form [aria-invalid="true"]{ border-color:var(--vinho,#891B28) }
.carrinho-form .carrinho-ok{ display:grid; grid-template-columns:auto 1fr; align-items:start; letter-spacing:0; font-size:.85rem; line-height:1.45 }
.carrinho-form .carrinho-ok input{ flex:none; width:20px; min-height:20px; margin:.15rem 0 0 }
.carrinho-mel{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.carrinho-estado{ margin:0; min-height:1.2em; font-size:.85rem; color:var(--vinho,#891B28) }
.carrinho-enviar{ width:100% }
.carrinho-feito{ display:grid; gap:.9rem; border-top:1px solid var(--bege,#B8AA92); padding-top:1.2rem }
.carrinho-feito p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--marrom,#5C3D28) }
.carrinho-limpar{ border:0; background:transparent; min-height:44px; font:400 .85rem var(--texto);
  color:var(--marrom,#5C3D28); text-decoration:underline; cursor:pointer }
/* a gaveta do pedido entra pela direita */
.carrinho-tela[open]{ animation:gaveta-entra .38s cubic-bezier(.22,.8,.24,1) }
.carrinho-tela[open]::backdrop{ animation:veu-entra .3s ease }
.carrinho-tela.fechando{ animation:gaveta-sai .22s ease forwards }
.carrinho-tela.fechando::backdrop{ animation:veu-sai .22s ease forwards }
@keyframes gaveta-entra{ from{ transform:translateX(100%) } }
@keyframes gaveta-sai{ to{ transform:translateX(100%) } }

/* ── a FICHA do doce (01/10/2026) ────────────────────────────────────────
   Duas colunas no computador (galeria | informação), folha que sobe de
   baixo no celular. Animação curta e contida: 340ms, curva que desacelera,
   deslocamento de 14px e escala de 0,985 — o suficiente para a ficha parecer
   que "pousa", sem chamar atenção para si. A informação entra em cascata
   (60ms entre blocos). Com "menos movimento", só o esmaecer. */
html.ficha-aberta{ overflow:hidden }
.ficha{
  border:0; padding:0; margin:auto; width:min(calc(100% - 2.4rem), 62rem); max-width:none;
  height:min(calc(100vh - 3rem), 40rem); overflow:hidden;
  background:var(--creme,#F0EBE0); color:var(--tinta,#1A1410);
  box-shadow:0 30px 80px rgba(26,20,16,.35);
}
.ficha[open]{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) }
.ficha::backdrop{ background:rgba(26,20,16,.58); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.ficha[open]{ animation:ficha-entra .34s cubic-bezier(.22,.8,.24,1) }
.ficha[open]::backdrop{ animation:veu-entra .3s ease }
.ficha.fechando{ animation:ficha-sai .19s ease forwards }
.ficha.fechando::backdrop{ animation:veu-sai .19s ease forwards }
@keyframes ficha-entra{ from{ opacity:0; transform:translateY(14px) scale(.985) } }
@keyframes ficha-sai{ to{ opacity:0; transform:translateY(8px) scale(.99) } }
@keyframes veu-entra{ from{ opacity:0 } }
@keyframes veu-sai{ to{ opacity:0 } }
.ficha[open] .ficha__info > *{ animation:sobe .5s cubic-bezier(.22,.8,.24,1) both }
.ficha[open] .ficha__info > :nth-child(2){ animation-delay:.06s }
.ficha[open] .ficha__info > :nth-child(3){ animation-delay:.12s }
.ficha[open] .ficha__info > :nth-child(n+4){ animation-delay:.18s }
@keyframes sobe{ from{ opacity:0; transform:translateY(10px) } }

.ficha__x{
  position:absolute; top:.7rem; right:.7rem; z-index:3; width:44px; height:44px;
  display:grid; place-items:center; border:0; cursor:pointer;
  background:rgba(240,235,224,.92); color:var(--tinta,#1A1410); font:300 1.7rem/1 var(--texto);
  transition:background .25s, transform .25s;
}
.ficha__x:hover,.ficha__x:focus-visible{ background:var(--creme,#F0EBE0); transform:rotate(90deg) }
.ficha__x:focus-visible{ outline:2px solid var(--dourado-txt,#7A5D00); outline-offset:2px }

/* galeria: trilho com encaixe (arrasta no celular) + miniaturas */
.ficha__galeria{ position:relative; min-height:0; display:flex; flex-direction:column; background:var(--branco,#fff) }
.ficha__trilho{
  flex:1; min-height:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain; outline:0;
}
.ficha__trilho::-webkit-scrollbar{ display:none }
.ficha__foto{ flex:0 0 100%; margin:0; scroll-snap-align:start; height:100% }
.ficha__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.ficha__miniaturas{ display:flex; gap:.5rem; padding:.7rem; background:var(--creme,#F0EBE0); border-top:1px solid var(--bege,#B8AA92) }
.ficha__miniaturas[hidden]{ display:none }
.ficha__mini{
  flex:0 0 auto; width:3.6rem; height:3.6rem; padding:0; border:1px solid transparent; cursor:pointer;
  background:none; opacity:.6; transition:opacity .25s, border-color .25s;
}
.ficha__mini img{ width:100%; height:100%; object-fit:cover; display:block }
.ficha__mini:hover{ opacity:.9 }
.ficha__mini[aria-current="true"]{ opacity:1; border-color:var(--verde,#1F5627) }
.ficha__mini:focus-visible{ outline:2px solid var(--dourado-txt,#7A5D00); outline-offset:2px }
/* as setas (01/10/2026): no meio da FOTO, não da galeria inteira — com as
   miniaturas embaixo, o meio da galeria cai abaixo do meio da foto */
.ficha__seta{
  position:absolute; z-index:3; top:50%; width:44px; height:44px; margin-top:-22px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(242,236,224,.92); color:var(--tinta,#2B1C12); border:1px solid rgba(43,28,18,.14);
  box-shadow:0 4px 14px rgba(20,10,4,.18); cursor:pointer;
  transition:background .25s, transform .25s, opacity .25s }
.ficha__seta svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.ficha__seta--ant{ left:.8rem }
.ficha__seta--prox{ right:.8rem }
.ficha__seta[hidden]{ display:none }
.ficha__galeria:has(.ficha__miniaturas:not([hidden])) .ficha__seta{ top:calc(50% - 2.3rem) }
.ficha__seta:focus-visible{ outline:2px solid var(--dourado-txt,#7A5D00); outline-offset:2px }
@media (hover:hover){
  .ficha__seta{ opacity:.82 }
  .ficha__galeria:hover .ficha__seta{ opacity:1 }
  .ficha__seta:hover{ background:#F2ECE0; transform:scale(1.06) }
}

/* informação */
.ficha__info{ min-height:0; overflow-y:auto; padding:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem) 2rem;
  display:flex; flex-direction:column; font-family:var(--texto) }
.ficha__linha{ margin:0; font:500 .72rem/1 var(--texto); letter-spacing:.26em; text-transform:uppercase; color:var(--dourado-txt,#7A5D00) }
.ficha__nome{ margin:.7rem 0 0; font-family:var(--titulo); font-weight:400; font-size:clamp(1.7rem,3vw,2.3rem);
  line-height:1.15; letter-spacing:.04em; color:var(--verde,#1F5627) }
.ficha__nome::after{ content:""; display:block; width:2.6rem; height:1px; background:var(--dourado,#BF9402); margin-top:1rem }
.ficha__desc{ margin-top:1rem; font-size:.98rem; line-height:1.7; color:var(--cacau,#5C3D28) }
.ficha__compra,.ficha__loja{ margin-top:auto; padding-top:1.6rem }
.ficha__compra[hidden],.ficha__loja[hidden],.ficha__tira[hidden]{ display:none }
.ficha__precos{ margin:0 0 .6rem; border-top:1px solid var(--bege,#B8AA92) }
.ficha__precos div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--bege,#B8AA92); color:var(--marrom,#5C3D28); transition:color .25s }
.ficha__precos dt{ font-size:.86rem }
.ficha__precos dd{ margin:0; font-weight:500; font-size:.98rem }
.ficha__precos div.vale{ color:var(--tinta,#1A1410) }
.ficha__precos div.vale dt::before{ content:""; display:inline-block; width:.42rem; height:.42rem; margin-right:.55rem;
  background:var(--verde,#1F5627); vertical-align:1px }
.ficha__min{ margin:.2rem 0 1.1rem; font-size:.82rem; color:var(--marrom,#5C3D28) }
.ficha__qtd{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.ficha__qtd-rot{ font:500 .74rem/1 var(--texto); letter-spacing:.2em; text-transform:uppercase; color:var(--marrom,#5C3D28) }
.ficha__qtd .carrinho-passo__q{ width:4rem; font-size:1.05rem }
.ficha__dica{ margin:.7rem 0 1rem; min-height:1.3em; font-size:.82rem; color:var(--dourado-txt,#7A5D00) }
.ficha .botao.ficha__add{ width:100%; justify-content:center; transition:background .3s, transform .3s }
.ficha .botao.ficha__add:active{ transform:scale(.99) }
.ficha__tira{ align-self:center; margin-top:.5rem; min-height:44px; border:0; background:transparent; cursor:pointer;
  font:400 .84rem var(--texto); color:var(--marrom,#5C3D28); text-decoration:underline; text-underline-offset:3px }
.ficha__compra{ display:flex; flex-direction:column }
.ficha__loja p{ margin:.7rem 0 0; font-size:.82rem; color:var(--marrom,#5C3D28); text-align:center }
.ficha .botao.ficha__loja-b{ width:100%; justify-content:center }

/* celular: folha que sobe de baixo, foto em cima, compra sempre à mão */
@media (max-width:760px){
  .ficha{ width:100%; margin:auto 0 0; height:fit-content; max-height:94vh; max-height:94dvh }
  .ficha[open]{ display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain }
  .ficha[open]{ animation:folha-entra .4s cubic-bezier(.22,.8,.24,1) }
  .ficha.fechando{ animation:folha-sai .22s ease forwards }
  .ficha__galeria{ flex:0 0 auto }
  .ficha__foto{ height:auto; aspect-ratio:4/3 }
  .ficha__miniaturas{ padding:.5rem .8rem }
  .ficha__mini{ width:2.9rem; height:2.9rem }
  .ficha__info{ overflow:visible; padding:1.4rem 1.2rem 0 }
  .ficha__compra,.ficha__loja{ margin-top:1.4rem; padding:0 0 calc(1.2rem + env(safe-area-inset-bottom)) }
  /* só o botão fica à mão enquanto a pessoa lê — a descrição não some atrás dele */
  .ficha .botao.ficha__add,.ficha .botao.ficha__loja-b{ position:sticky; bottom:calc(.8rem + env(safe-area-inset-bottom));
    z-index:2; letter-spacing:.14em; padding:1rem .8rem; box-shadow:0 8px 22px rgba(26,20,16,.22) }
  .ficha__x{ top:.5rem; right:.5rem }
}
@keyframes folha-entra{ from{ transform:translateY(100%) } }
@keyframes folha-sai{ to{ transform:translateY(100%) } }

@media (prefers-reduced-motion:reduce){
  .carrinho-barra{ transition:none }
  .ficha[open],.ficha.fechando,.carrinho-tela[open],.carrinho-tela.fechando,
  .ficha[open] .ficha__info > *,.doce__selo{ animation:veu-entra .2s ease both }
  .ficha.fechando,.carrinho-tela.fechando{ animation:veu-sai .15s ease forwards }
  .ficha__x:hover{ transform:none }
}