/* Sara Alcantara - doces e salgados caseiros
   Paleta e tipografia tiradas do cartao de visita. */
:root{
  --rosa:#DD125B;  --rosa-esc:#B50D49;  --rosa-claro:#FB5A87;
  --amarelo:#FDC719; --teal:#19BAB4;    --creme:#FFF6EC;
  --texto:#3A1020;   --zap:#0B8043;   /* verde WhatsApp escurecido: o
     #25D366 com texto branco da 1,98:1 de contraste e reprova */
  --rosa-selo:#9E0B40;
  --cont:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--texto); background:var(--creme);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
.cont{width:min(100% - 2.5rem, var(--cont)); margin-inline:auto}

/* ---------- topo ---------- */
.hero{position:relative; background:var(--rosa); padding:4.5rem 0 7rem; overflow:hidden}
.hero::after{                                   /* respingos da marca */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 22%, rgba(253,199,25,.16) 0 9px, transparent 10px),
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.12) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 72%, rgba(253,199,25,.12) 0 11px, transparent 12px);
  pointer-events:none;
}
.hero .cont{position:relative; z-index:2; text-align:center}
.logo-h1{margin:0 auto 1.1rem; width:min(74%,560px); line-height:0}
.logo{width:100%; height:auto; display:block}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo .letras{fill:#fff}
.logo .coracao{fill:var(--amarelo)}
.tagline{
  color:#fff; font-weight:600; letter-spacing:.42em; text-indent:.42em;
  font-size:clamp(.62rem,2.1vw,.88rem); text-transform:uppercase; margin-bottom:2rem;
}
.selo{
  display:inline-block; background:var(--amarelo); color:var(--rosa-selo);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(.72rem,2.4vw,.95rem); padding:.6rem 1.4rem; border-radius:999px;
  transform:rotate(-1.6deg); margin-bottom:2.2rem; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.onda{position:absolute; left:0; right:0; bottom:-1px; z-index:1; display:block; width:100%}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-weight:800; letter-spacing:.02em; border-radius:999px;
  padding:1rem 1.9rem; font-size:clamp(.95rem,2.6vw,1.08rem);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.btn-zap{background:var(--zap); color:#fff; box-shadow:0 10px 26px rgba(11,128,67,.32)}
.btn-zap:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(11,128,67,.42); background:#0A6E3A}
.btn-linha{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.65)}
.btn-linha:hover{background:#fff;color:var(--rosa)}
.hero-acoes{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- secoes ---------- */
section{padding:4.5rem 0}
.titulo{text-align:center; margin-bottom:2.6rem}
.titulo h2{
  font-size:clamp(1.5rem,4.6vw,2.3rem); color:var(--rosa); line-height:1.15;
  font-weight:800; letter-spacing:-.01em;
}
.titulo p{margin-top:.7rem; color:#6B4150; font-size:clamp(.95rem,2.5vw,1.06rem)}

/* cards de categoria */
.grade{display:flex; flex-wrap:wrap; gap:1.3rem; justify-content:center}
.card{
  background:#fff; border-radius:20px; overflow:hidden; text-align:center;
  box-shadow:0 4px 20px rgba(80,20,45,.09);
  transition:transform .22s ease, box-shadow .22s ease;
  flex:1 1 196px; max-width:250px; display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:0 14px 34px rgba(80,20,45,.16)}
.card .foto{aspect-ratio:1; overflow:hidden; height:auto}
.card .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .foto img{transform:scale(1.06)}
.card .corpo{padding:1.1rem 1rem 1.5rem; position:relative; flex:1;
  display:flex; flex-direction:column}
.card .corpo p{margin-top:auto}
.disco{
  width:60px;height:60px;border-radius:50%; display:grid;place-items:center;
  margin:-46px auto .7rem; border:4px solid #fff; position:relative;
}
.disco svg{width:62%;height:62%;fill:#fff}
.card h3{font-size:1rem; text-transform:uppercase; letter-spacing:.07em; color:var(--rosa)}
.card p{font-size:.85rem; color:#7A5362; margin-top:.35rem}

/* destaque 45 sabores */
.destaque{background:var(--amarelo); position:relative}
.destaque .cont{
  display:grid; gap:2.2rem; align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
}
.destaque picture{display:block}
.destaque img{
  border-radius:22px; box-shadow:0 14px 40px rgba(120,80,0,.2);
  /* altura explicita: com o atributo height="" no HTML o aspect-ratio
     e ignorado e a foto estica */
  width:100%; height:clamp(240px,30vw,400px); object-fit:cover;
}
.destaque h2{font-size:clamp(1.55rem,4.4vw,2.35rem); color:var(--rosa); line-height:1.1;
  font-weight:800; text-wrap:balance}
.destaque .num{display:block; font-size:clamp(3.2rem,11vw,5.2rem); line-height:.9; letter-spacing:-.03em}
.destaque p{margin-top:1rem; color:#7A4A00; font-size:clamp(.98rem,2.6vw,1.1rem); font-weight:500}

/* como pedir */
.passos{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.passo{text-align:center;padding:1.2rem}
.passo .n{
  width:52px;height:52px;border-radius:50%;background:var(--rosa);color:#fff;
  display:grid;place-items:center;margin:0 auto .9rem;font-weight:800;font-size:1.25rem;
}
.passo h3{font-size:1.02rem;color:var(--rosa);margin-bottom:.35rem}
.passo p{font-size:.92rem;color:#6B4150}

/* chamada final */
.final{background:var(--rosa); color:#fff; text-align:center; position:relative; overflow:hidden}
.final h2{font-size:clamp(1.5rem,4.8vw,2.4rem); font-weight:800; margin-bottom:.8rem}
.final p{opacity:.92; margin-bottom:2rem; font-size:clamp(.98rem,2.6vw,1.1rem)}

/* rodape */
footer{background:var(--rosa-esc); color:#fff; padding:2.6rem 0; text-align:center}
footer .marca{font-weight:800; letter-spacing:.04em; margin-bottom:.5rem}
footer a{color:#FFD64A; text-decoration:none; font-weight:600}
footer a:hover{text-decoration:underline}
footer .mini{opacity:.65; font-size:.78rem; margin-top:1.2rem}

/* botao flutuante */
.flutua{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:50;
  background:var(--zap); color:#fff; width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.26);
  transition:transform .2s ease;
}
.flutua:hover{transform:scale(1.08)}
.flutua svg{width:30px;height:30px;fill:#fff}

/* aparecer ao rolar.
   O conteudo NUNCA comeca invisivel por padrao: so esconde se o JS estiver
   mesmo rodando (classe .js). Sem isso, JS quebrado = pagina em branco. */
.js .sobe{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.js .sobe.vis{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .sobe{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
@media (max-width:640px){
  section{padding:3.2rem 0}
  .hero{padding:3rem 0 5.5rem}
}

/* ======== cards de marcar ======== */
.grade{align-items:stretch}
.card{
  position:relative; padding:0; cursor:pointer;
  border:3px solid transparent; transition:border-color .18s ease;
}
.card.sel{border-color:var(--rosa)}
.chk{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.card-face{
  display:flex; flex-direction:column; cursor:pointer; height:100%;
  border-radius:17px 17px 0 0; overflow:hidden;
}
.card .foto{display:block}
.card .corpo{display:flex; flex-direction:column; flex:1}
.card .nome{
  font-size:1rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--rosa); font-weight:700; display:block;
}
.card .desc{font-size:.85rem; color:#7A5362; margin-top:.35rem; display:block}
/* o tique */
.tique{
  position:absolute; top:.65rem; right:.65rem; z-index:3;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); border:2px solid rgba(221,18,91,.35);
  display:grid; place-items:center; transition:all .18s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.tique svg{width:17px;height:17px;fill:transparent;transition:fill .18s ease}
.card.sel .tique{background:var(--rosa); border-color:var(--rosa); transform:scale(1.06)}
.card.sel .tique svg{fill:#fff}
.chk:focus-visible + .card-face{outline:3px solid #0B8043; outline-offset:-1px}
/* quantidade */
.qtd{
  display:flex; align-items:center; gap:.25rem; justify-content:center;
  padding:.55rem .35rem .85rem; background:#fff; flex-wrap:nowrap;
  border-top:1px dashed rgba(221,18,91,.22);
}
.qtd[hidden]{display:none}
.qtd button{
  /* 44px: alvo minimo confortavel para o dedo no celular */
  width:44px;height:44px;flex:none; border-radius:50%; border:0; cursor:pointer;
  background:var(--rosa); color:#fff; font-size:1.2rem; line-height:1; font-weight:700;
  font-family:inherit; transition:background .15s ease;
}
.qtd button:hover{background:var(--rosa-esc)}
.qtd button:focus-visible{outline:3px solid #0B8043; outline-offset:2px}
.qtd .num{
  width:4rem; height:44px; text-align:center; font:inherit; font-weight:700; color:var(--texto);
  border:2px solid rgba(221,18,91,.25); border-radius:10px; padding:.3rem .2rem;
  -moz-appearance:textfield;
}
.qtd .num::-webkit-outer-spin-button,.qtd .num::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.qtd .unid{font-size:.72rem; color:#7A5362; text-align:left; line-height:1.1; flex:1}
.dica{text-align:center; margin-top:1.6rem; color:#8A6473; font-size:.92rem}

/* ======== barra do pedido ======== */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:3px solid var(--rosa);
  box-shadow:0 -8px 28px rgba(80,20,45,.17); padding:.8rem 0;
  animation:sobeBarra .26s ease;
}
@keyframes sobeBarra{from{transform:translateY(100%)}to{transform:none}}
.barra[hidden]{display:none}
.barra-in{display:flex; align-items:center; gap:1rem; justify-content:space-between; flex-wrap:wrap}
.barra-txt{display:flex; flex-direction:column; min-width:0; flex:1}
.barra-txt strong{color:var(--rosa); font-size:.98rem}
.barra-txt span{
  font-size:.82rem; color:#7A5362; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100%;
}
.barra .btn{padding:.85rem 1.5rem; flex:none}
body.com-barra{padding-bottom:calc(var(--barra-h,92px) + 18px)}
body.com-barra .flutua{bottom:calc(var(--barra-h,92px) + .9rem)}
@media (max-width:560px){
  .barra-in{gap:.6rem}
  .barra .btn{width:100%; justify-content:center}
  body.com-barra{padding-bottom:calc(var(--barra-h,146px) + 18px)}
  body.com-barra .flutua{display:none}
}

/* ======== hero com foto de fundo ======== */
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero::before{                       /* veu da marca: sem ele o logo branco some */
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(150,8,62,.62) 0%, rgba(221,18,91,.80) 55%, rgba(221,18,91,.94) 100%);
}
.hero{padding-top:5rem}

/* ======== sabores dentro do card ======== */
.extra{background:#fff}
.extra[hidden]{display:none}
.nota{
  font-size:.74rem; color:#8A6473; text-align:center;
  padding:0 .8rem .55rem; line-height:1.35; margin-top:-.25rem;
}
.sabores{border-top:1px dashed rgba(221,18,91,.22)}
.sabores summary{
  cursor:pointer; list-style:none; padding:.7rem .8rem; text-align:center;
  font-size:.8rem; font-weight:700; color:var(--rosa);
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.sabores summary::-webkit-details-marker{display:none}
.sabores summary::after{
  content:''; width:7px;height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.sabores[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.sabores summary:hover{background:#FFF2F6}
.sabores summary:focus-visible{outline:3px solid #0B8043; outline-offset:-3px}
.lista{padding:0 .7rem .8rem; max-height:290px; overflow-y:auto; text-align:left}
.grupo + .grupo{margin-top:.7rem}
.grupo h4{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--rosa); padding:.35rem 0 .3rem; position:sticky; top:0;
  background:#fff; display:flex; flex-direction:column;
}
.grupo h4 small{
  display:block; font-size:.62rem; letter-spacing:.02em; text-transform:none;
  color:#8A6473; font-weight:500;
}
.op{
  display:flex; align-items:flex-start; gap:.45rem; padding:.26rem .15rem;
  font-size:.78rem; color:#4A2130; cursor:pointer; line-height:1.3;
}
.op:hover{color:var(--rosa)}
.op input{
  width:16px;height:16px;flex:none; margin-top:.08rem; accent-color:var(--rosa);
  cursor:pointer;
}

/* ======== para a sua festa ======== */
#festa{background:#fff}
.fgrade{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.fcard{position:relative}
.fchk{position:absolute; opacity:0; width:1px;height:1px; pointer-events:none}
.fcard label{
  display:flex; align-items:center; gap:.9rem; cursor:pointer;
  background:var(--creme); border:3px solid transparent; border-radius:18px;
  padding:1rem 1.1rem; transition:border-color .18s ease, transform .18s ease;
  height:100%;
}
.fcard label:hover{transform:translateY(-3px)}
.fcard.sel label{border-color:var(--rosa); background:#FFF2F6}
.fdisco{
  width:54px;height:54px;flex:none; border-radius:50%;
  display:grid; place-items:center; color:#fff;
}
.fdisco svg{width:60%;height:60%}
.ftexto{display:flex; flex-direction:column; flex:1; min-width:0}
.ftexto strong{color:var(--rosa); font-size:1.02rem; line-height:1.25}
.ftexto small{color:#7A5362; font-size:.8rem; margin-top:.2rem; line-height:1.35}
.ftique{
  width:26px;height:26px;flex:none; border-radius:50%;
  border:2px solid rgba(221,18,91,.35); background:#fff;
  display:grid; place-items:center; transition:all .18s ease;
}
.ftique svg{width:15px;height:15px;fill:transparent;transition:fill .18s ease}
.fcard.sel .ftique{background:var(--rosa); border-color:var(--rosa)}
.fcard.sel .ftique svg{fill:#fff}
.fchk:focus-visible + label{outline:3px solid #0B8043; outline-offset:3px}

/* ======== passe na loja ======== */
.loja{
  display:grid; gap:1.6rem; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
}
.litens{display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr)}
.litem{
  background:#fff; border-radius:16px; padding:1rem .8rem; text-align:center;
  box-shadow:0 3px 14px rgba(80,20,45,.08);
}
.lic{display:block; width:44px;height:44px; margin:0 auto .5rem; color:var(--rosa)}
.lic svg{width:100%;height:100%}
.litem strong{display:block; color:var(--rosa); font-size:.92rem}
.litem span{display:block; font-size:.76rem; color:#7A5362; margin-top:.2rem}
.endereco{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:var(--rosa); color:#fff; border-radius:20px; padding:1.4rem 1.5rem;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 26px rgba(221,18,91,.26);
}
.endereco:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(221,18,91,.34)}
.pin{width:40px;height:40px;flex:none; fill:var(--amarelo)}
.pin svg{width:100%;height:100%}
.etexto strong{display:block; font-size:1.06rem; margin-bottom:.15rem}
.etexto small{opacity:.85; font-size:.82rem}
footer .fend{opacity:.9; font-size:.86rem; margin-bottom:.35rem}

@media (max-width:339px){
  .litens{grid-template-columns:1fr}
}

/* 4 servicos: 2x2 fecha melhor que 3+1 */
@media (min-width:760px){ .fgrade{grid-template-columns:repeat(2,1fr)} }
/* o traco encolhe junto com o icone: em disco pequeno precisa engrossar,
   senao some. Valores conferidos no navegador, nao no olho. */
.fdisco svg g{stroke-width:7.5}
.lic svg g{stroke-width:7}
.disco svg g{stroke-width:7.5}
.fdisco{width:58px;height:58px}
.fdisco svg{width:64%;height:64%}

/* `.litem span` vencia `.lic` por especificidade e o icone herdava a cor do
   texto. Precisa do seletor mais especifico. */
.litem .lic{color:var(--rosa)}

/* ======== barra vira botao do carrinho ======== */
.abrir-carrinho{
  display:flex; align-items:center; gap:.7rem; flex:1; min-width:0;
  background:none; border:0; cursor:pointer; font:inherit; text-align:left;
  padding:.2rem; border-radius:12px;
}
.abrir-carrinho:hover{background:#FFF2F6}
.abrir-carrinho:focus-visible{outline:3px solid #0B8043; outline-offset:2px}
.sacola{position:relative; width:34px;height:34px;flex:none; color:var(--rosa)}
.sacola svg{width:100%;height:100%}
.sacola svg g{stroke-width:9}
.contador{
  position:absolute; top:-5px; right:-7px; min-width:20px; height:20px;
  border-radius:999px; background:var(--rosa); color:#fff;
  font-size:.68rem; font-weight:800; display:grid; place-items:center;
  padding:0 5px; border:2px solid #fff;
}
.abrir-carrinho .ver{
  flex:none; font-size:.72rem; font-weight:700; color:var(--rosa);
  text-transform:uppercase; letter-spacing:.06em; padding-right:.3rem;
}
.abrir-carrinho .ver::after{
  content:''; display:inline-block; margin-left:.3rem;
  width:6px;height:6px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(-45deg) translateY(-1px);
}

/* ======== painel do pedido ======== */
.carrinho{position:fixed; inset:0; z-index:80}
.carrinho[hidden]{display:none}
.carrinho-fundo{position:absolute; inset:0; background:rgba(60,10,30,.5); animation:apaga .2s ease}
@keyframes apaga{from{opacity:0}to{opacity:1}}
.carrinho-cx{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%,560px); max-height:82vh; background:#fff;
  border-radius:22px 22px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -14px 50px rgba(60,10,30,.3); animation:sobeCx .26s ease;
}
@keyframes sobeCx{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.carrinho-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.2rem .8rem; border-bottom:2px solid #FFE6EE;
}
.carrinho-topo h3{color:var(--rosa); font-size:1.15rem}
.fechar{
  width:38px;height:38px; border:0; background:#FFF2F6; color:var(--rosa);
  border-radius:50%; font-size:1.5rem; line-height:1; cursor:pointer;
  font-family:inherit;
}
.fechar:hover{background:var(--rosa); color:#fff}
.fechar:focus-visible{outline:3px solid #0B8043; outline-offset:2px}
.carrinho-lista{list-style:none; overflow-y:auto; padding:.6rem 1.2rem; flex:1}
.citem{
  display:flex; align-items:flex-start; gap:.8rem; padding:.75rem 0;
  border-bottom:1px dashed #FFD9E5;
}
.citem:last-child{border-bottom:0}
.ctexto{flex:1; min-width:0; display:flex; flex-direction:column}
.ctexto strong{color:var(--rosa); font-size:.96rem}
.ctexto .cqtd{font-size:.84rem; color:var(--texto); font-weight:600; margin-top:.1rem}
.ctexto small{font-size:.76rem; color:#7A5362; margin-top:.15rem; line-height:1.35}
.ctira{
  width:34px;height:34px;flex:none; border:0; border-radius:50%;
  background:#FFF2F6; color:var(--rosa); font-size:1.25rem; line-height:1;
  cursor:pointer; font-family:inherit;
}
.ctira:hover{background:var(--rosa); color:#fff}
.ctira:focus-visible{outline:3px solid #0B8043; outline-offset:2px}
.cvazio{text-align:center; color:#8A6473; padding:1.6rem 0; font-size:.9rem}
.carrinho-pe{
  display:flex; align-items:center; gap:.7rem; padding:.9rem 1.2rem 1.2rem;
  border-top:2px solid #FFE6EE; background:#fff;
  border-radius:0 0 22px 22px;
}
.limpar{
  flex:none; border:2px solid rgba(221,18,91,.3); background:#fff;
  color:var(--rosa); font:inherit; font-weight:700; font-size:.86rem;
  padding:.8rem 1.1rem; border-radius:999px; cursor:pointer;
}
.limpar:hover{background:var(--rosa); color:#fff; border-color:var(--rosa)}
.limpar:focus-visible{outline:3px solid #0B8043; outline-offset:2px}
.carrinho-pe .btn{flex:1; justify-content:center; padding:.8rem 1rem}
body.trava{overflow:hidden}

@media (max-width:560px){
  .carrinho-cx{max-height:88vh}
  .carrinho-pe{flex-wrap:wrap}
  .carrinho-pe .limpar, .carrinho-pe .btn{width:100%; flex:auto}
}

/* no celular o rodape do pedido empilha: a acao principal (enviar) vem
   primeiro, e "limpar tudo" - que e destrutivo - fica embaixo e discreto */
@media (max-width:560px){
  .carrinho-pe{flex-direction:column-reverse}
  .carrinho-pe .limpar{
    background:transparent; border-color:transparent;
    color:#8A6473; font-size:.82rem; padding:.55rem;
    text-decoration:underline; text-underline-offset:3px;
  }
  .carrinho-pe .limpar:hover{background:transparent; color:var(--rosa)}
}

/* em tela larga o pedido vira um painel centrado, nao uma gaveta colada
   embaixo (que ficava em cima da barra e repetia o botao de enviar) */
@media (min-width:700px){
  .carrinho-cx{
    bottom:auto; top:50%; transform:translate(-50%,-50%);
    border-radius:24px; max-height:76vh;
    animation:apareceCx .24s ease;
  }
  @keyframes apareceCx{
    from{transform:translate(-50%,-46%) scale(.97); opacity:0}
    to{transform:translate(-50%,-50%) scale(1); opacity:1}
  }
  .carrinho-pe{border-radius:0 0 24px 24px}
}

/* a barra tem que PARECER botao: so o texto resumido deixava a impressao de
   aviso passivo, e no celular o rotulo estava escondido. */
.abrir-carrinho{
  background:#FFF2F6; border:2px solid rgba(221,18,91,.28);
  padding:.5rem .6rem;
}
.abrir-carrinho:hover{background:#FFE6EE; border-color:var(--rosa)}
.abrir-carrinho:active{transform:scale(.99)}
.abrir-carrinho .ver{
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--rosa); color:#fff; border-radius:999px;
  padding:.42rem .72rem; font-size:.7rem; letter-spacing:.04em;
  white-space:nowrap;
}
.abrir-carrinho .ver::after{border-color:#fff; margin-left:.1rem}
.abrir-carrinho[aria-expanded="true"] .ver::after{transform:rotate(135deg) translateY(-1px)}
@media (max-width:560px){
  .barra-txt strong{font-size:.9rem}
  .barra-txt span{font-size:.74rem}
  .abrir-carrinho .ver{padding:.4rem .6rem; font-size:.66rem}
  .sacola{width:30px;height:30px}
}
@media (max-width:360px){
  .abrir-carrinho .ver{font-size:0; padding:.5rem}   /* so a seta em tela bem estreita */
  .abrir-carrinho .ver::after{margin-left:0; width:7px; height:7px}
}

/* ======== mapa da loja ======== */
.ondefica{display:flex; flex-direction:column; gap:.8rem}
.mapa{
  border-radius:18px; overflow:hidden; line-height:0;
  box-shadow:0 6px 22px rgba(80,20,45,.14); background:#EFE7DD;
  border:3px solid #fff;
}
.mapa iframe{width:100%; height:260px; border:0; display:block; filter:saturate(.95)}
.rota{
  align-self:flex-start; text-decoration:none; font-weight:700; font-size:.88rem;
  color:var(--rosa); border:2px solid rgba(221,18,91,.3); border-radius:999px;
  padding:.6rem 1.2rem; transition:all .18s ease;
  display:inline-flex; align-items:center; gap:.4rem;
}
.rota::after{
  content:''; width:7px;height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(-45deg);
}
.rota:hover{background:var(--rosa); color:#fff; border-color:var(--rosa)}
.rota:focus-visible{outline:3px solid #0B8043; outline-offset:2px}
@media (max-width:560px){
  .mapa iframe{height:220px}
  .rota{align-self:stretch; justify-content:center}
}