/* ============================================================
   LAYOUT — Layout: rodapé, header, carrinho, banners, menu, seções
   Parte do app.css original. A ORDEM dos <link> no index.html
   reproduz a ordem deste arquivo: não reordene, a cascata depende disso.
   ============================================================ */

/* ============================================================
   RODAPÉ EM COLUNAS (design adaptado)
   ============================================================ */
.foot-link{ display:inline-flex; align-items:center; gap:.6rem; font-size:.85rem; color:#64748b;
  transition:color .15s; text-align:left; }
.foot-link:hover{ color:var(--cor); }
.foot-link svg{ width:16px; height:16px; flex-shrink:0; color:#94a3b8; transition:color .15s; }
.foot-link:hover svg{ color:var(--cor); }

.foot-info{ display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:#64748b; }
.foot-info svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:#94a3b8; }

/* redes sociais em caixinhas (como no modelo) */
.rede-box{ width:36px; height:36px; border:1.5px solid #e8ecf1; border-radius:.6rem;
  display:flex; align-items:center; justify-content:center; transition:all .18s; }
.rede-box:hover{ border-color:currentColor; transform:translateY(-2px); }

/* botão flutuante do WhatsApp */
#zap-flutuante{ box-shadow:0 4px 16px rgba(37,211,102,.4); }
#zap-flutuante:hover{ box-shadow:0 6px 22px rgba(37,211,102,.5); }


/* ===== classes decimais/arbitrárias do novo layout ===== */
.bg-\[\#25D366\]{ background-color:#25D366; }
.max-h-\[88vh\]{ max-height:88vh; }
.min-w-\[20px\]{ min-width:20px; }
.z-\[62\]{ z-index:62; }

/* extras */
.z-\[90\]{ z-index:90; }

/* ===== marca no header: só no desktop (regra própria, imune à ordem do Tailwind) ===== */
.head-marca{ display:none; }
@media (min-width:768px){
  .head-marca{ display:flex; }
}
/* o logo só aparece quando a loja tem um cadastrado (o JS adiciona .tem-logo) */
.head-logo{ display:none; }
.head-logo.tem-logo{ display:block; }

/* ===== botão de carrinho no card (substitui o coração) ===== */
.cart-btn{ position:absolute; right:6px; bottom:6px; width:32px; height:32px; border-radius:9999px;
  background:var(--cor); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; transition:transform .16s, filter .16s; z-index:2; }
.cart-btn:hover{ transform:scale(1.12); filter:brightness(1.08); }
.cart-btn:active{ transform:scale(.95); }

/* ===== coração de favorito no modal do produto ===== */
.mp-fav{ color:#cbd5e1; padding:.2rem; border-radius:9999px; transition:all .18s; cursor:pointer; }
.mp-fav:hover{ color:#ef4444; transform:scale(1.1); }
.mp-fav.fav-on{ color:#ef4444; }
.mp-fav.fav-on svg{ fill:currentColor; }

/* pulinho do carrinho ao adicionar */
@keyframes pulo{ 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.pulo{ animation: pulo .35s ease-out; }

/* ============================================================
   BUSCA (lupa posicionada por CSS próprio — nunca sobrepõe)
   ============================================================ */
.busca-wrap{ position:relative; display:flex; align-items:center; }
.busca-lupa{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; pointer-events:none; z-index:1;
}
.busca-input{
  width:100%; border:1px solid #e2e8f0; border-radius:9999px;
  padding:.55rem .8rem .55rem 2.4rem;   /* espaço à esquerda para a lupa */
  font-size:.875rem; background:#f8fafc; transition:all .15s;
}
.busca-input:focus{ background:#fff; border-color:var(--cor); outline:none; }
@media (min-width:768px){
  .busca-input{ border-radius:.5rem; background:#fff; padding-top:.65rem; padding-bottom:.65rem; }
}

/* ============================================================
   IDENTIDADE NO MOBILE (esconde o logo quando já há banner)
   ============================================================ */
.ident-mobile{ display:flex; }
@media (min-width:768px){ .ident-mobile{ display:none; } }
.pub-logo{ display:none; }
.pub-logo.tem-logo{ display:block; }
/* o logo SEMPRE aparece antes do nome no mobile */

/* ============================================================
   BOTÃO DE CARRINHO NO CARD
   Repouso: branco com contorno preto.
   Ao clicar: fica DOURADO RELUZENTE por um instante.
   ============================================================ */
.cart-btn{
  position:absolute; right:8px; bottom:8px; width:34px; height:34px; border-radius:9999px;
  background:#fff;                 /* branco */
  color:#1e293b;                   /* contorno do ícone: preto */
  border:1.5px solid #1e293b;      /* borda preta */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  cursor:pointer; z-index:2;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.cart-btn:hover{ transform:scale(1.12); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.cart-btn:active{ transform:scale(.92); }

/* animação ao adicionar: dourado reluzente com brilho passando */
@keyframes addCart{
  0%   { transform:scale(1);    background:#fff;     color:#1e293b; border-color:#1e293b; }
  25%  { transform:scale(1.35); background:#f5d98a;  color:#6b4e0d; border-color:#d4af37;
         box-shadow:0 0 0 8px rgba(212,175,55,.30), 0 0 18px rgba(212,175,55,.75); }
  60%  { transform:scale(1.05); background:#e6c258;  color:#5a4109; border-color:#c9a227;
         box-shadow:0 0 0 4px rgba(212,175,55,.18), 0 0 12px rgba(212,175,55,.55); }
  100% { transform:scale(1);    background:#fff;     color:#1e293b; border-color:#1e293b;
         box-shadow:0 2px 6px rgba(0,0,0,.12); }
}
.cart-btn.adicionou{ animation:addCart .9s cubic-bezier(.34,1.4,.5,1); }

/* brilho que atravessa o botão (efeito reluzente) */
.cart-btn::after{
  content:''; position:absolute; inset:0; border-radius:9999px;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%);
  opacity:0; pointer-events:none;
}
@keyframes brilho{
  0%   { opacity:0; transform:translateX(-120%); }
  35%  { opacity:1; }
  100% { opacity:0; transform:translateX(120%); }
}
.cart-btn.adicionou::after{ animation:brilho .9s ease-out; }

/* troca o ícone da sacola pelo ✓ durante a animação */
.cart-btn .ico-check{ display:none; }
.cart-btn.adicionou .ico-cart{ display:none; }
.cart-btn.adicionou .ico-check{ display:block; }

/* ============================================================
   VISIBILIDADE MOBILE/DESKTOP (regras próprias — imunes à ordem
   do Tailwind compilado, que estava fazendo .hidden vencer)
   ============================================================ */
.cat-mob{ display:flex; }              /* hambúrguer: só mobile */
.cart-mob{ display:flex; }             /* carrinho ícone: só mobile */
.cart-desk{ display:none; }            /* carrinho botão: só desktop */

@media (min-width:768px){
  .cat-mob{ display:none; }
  .cart-mob{ display:none; }
  .cart-desk{ display:inline-flex; }
}

/* badges do carrinho */
#cart-badge:not(.hidden), #cart-badge-2:not(.hidden){ display:flex; }

/* ============================================================
   CORREÇÃO GERAL: no Tailwind compilado o .hidden estava vindo
   DEPOIS das classes md:*, então vencia por ordem e escondia
   elementos que deveriam aparecer no desktop.
   Estas regras restauram o comportamento correto.
   ============================================================ */
@media (min-width:768px){
  .hidden.md\:block{ display:block !important; }
  .hidden.md\:flex{ display:flex !important; }
  .hidden.md\:inline-flex{ display:inline-flex !important; }
  .hidden.md\:grid{ display:grid !important; }
  .md\:hidden{ display:none !important; }
}

/* ===== rolagem fluida no mobile ===== */
#cat-grid{
  contain:layout style;      /* isola a grade: rolar não recalcula a página toda */
}
body{
  -webkit-overflow-scrolling:touch;   /* rolagem com inércia no iOS */
}

/* =========================================================
   CARROSSEL DE BANNERS (topo da home)
========================================================= */
.bnr-wrap{ max-width:72rem; margin:0 auto; padding:1rem .75rem 0; }
.bnr-palco{ position:relative; overflow:hidden; border-radius:.9rem; background:#eef1f5; }
.bnr-slides{ display:flex; transition:transform .5s ease; }
.bnr-slide{ min-width:100%; }
.bnr-slide{ aspect-ratio:2/1; }
.bnr-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.bnr-seta{ display:none; }
.bnr-dots{ position:absolute; bottom:.6rem; left:0; right:0; display:flex; justify-content:center; gap:.375rem; }
.bnr-dot{ height:.5rem; width:.5rem; border-radius:9999px; background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.bnr-dot.sel{ background:#fff; width:1.25rem; }
@media (min-width:768px){
  .bnr-wrap{ padding:1.25rem 1.25rem 0; }
  .bnr-seta{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%;
    transform:translateY(-50%); z-index:5; height:2.6rem; width:2.6rem; border-radius:9999px;
    background:rgba(255,255,255,.85); color:#334155; box-shadow:0 2px 10px rgba(15,23,42,.15); transition:all .15s; }
  .bnr-seta:hover{ background:var(--cor); color:#fff; }
  .bnr-seta.prev{ left:1rem; } .bnr-seta.next{ right:1rem; }
}

/* =========================================================
   HOME ORGANIZADA POR CATEGORIA (carrossel horizontal)
========================================================= */
.sec-cat{ margin-bottom:2rem; }
.sec-cat-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.sec-cat-nome{ font-family:Sora,sans-serif; font-weight:700; font-size:1.05rem; color:#1e293b; }
.sec-cat-ver{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; color:var(--cor); }
.sec-cat-lista{ display:grid; grid-auto-flow:column; grid-auto-columns:44%; gap:.5rem;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:.25rem; }
.sec-cat-lista::-webkit-scrollbar{ display:none; }
.sec-cat-lista > *{ scroll-snap-align:start; }
@media (min-width:640px){ .sec-cat-lista{ grid-auto-columns:30%; gap:.75rem; } }
@media (min-width:1024px){ .sec-cat-lista{ grid-auto-columns:calc(25% - .75rem); gap:1rem; } }

/* =========================================================
   VEJA TAMBÉM (rodapé da página do produto)
========================================================= */
.pp-rel{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid #eef1f5; }
.pp-rel.hidden{ display:none; }
.pp-rel-titulo{ font-family:Sora,sans-serif; font-weight:700; font-size:1.05rem; color:#1e293b; margin-bottom:.75rem; }
.pp-rel-lista{ display:flex; gap:.75rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.25rem; }
.pp-rel-lista::-webkit-scrollbar{ display:none; }
.pp-rel-lista > *{ scroll-snap-align:start; }
@media (min-width:768px){
  .pp-rel{ margin-top:3rem; padding-top:2rem; }
  .pp-rel-lista{ gap:1rem; }
  .pp-rel-lista > *{ width:170px; }
}
/* no mobile o bloco entra no scroll da coluna de infos */
@media (max-width:767px){ .pp-rel{ margin-top:1.25rem; } }

/* miniaturas de banners no admin */
.cfg-bnr{ position:relative; border-radius:.6rem; overflow:hidden; border:1px solid #e2e8f0; }
.cfg-bnr img{ width:100%; height:4.5rem; object-fit:cover; display:block; }
.cfg-bnr button{ position:absolute; top:.25rem; right:.25rem; background:rgba(239,68,68,.95); color:#fff;
  border-radius:9999px; height:1.4rem; width:1.4rem; font-size:.7rem; line-height:1; }

/* ===== MENU do topo (desktop) / chips (mobile) ===== */
.menu-desk{ display:none; }
.chips-mob{ display:block; }
@media (min-width:768px){
  .menu-desk{ display:block; }
  .chips-mob{ display:none; }
}
.menu-item{ display:inline-flex; align-items:center; gap:.3rem; padding:.7rem .9rem; font-size:.9rem;
  font-weight:600; color:#334155; border-radius:.5rem; transition:all .15s; white-space:nowrap; }
.menu-item:hover{ background:#f5f7fa; color:var(--cor); }
.menu-drop{ position:relative; }
.menu-drop-lista{ display:none; position:absolute; left:0; top:100%; z-index:40; min-width:230px;
  background:#fff; border:1px solid #eef1f5; border-radius:.7rem; box-shadow:0 12px 30px rgba(15,23,42,.12);
  padding:.4rem; max-height:60vh; overflow-y:auto; }
.menu-drop:hover .menu-drop-lista{ display:block; }   /* abre passando o mouse */
.menu-drop-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  padding:.55rem .7rem; border-radius:.5rem; font-size:.87rem; color:#475569; text-align:left; }
.menu-drop-item:hover{ background:#f5f7fa; color:var(--cor); }
.menu-drop-item span{ font-size:.75rem; color:#94a3b8; }

/* lupa da busca no painel */
.input-com-lupa{ padding-left:2.5rem !important; }
.lupa-admin{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }


/* ===== cupom de desconto no carrinho ===== */
.cupom-ok{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:#f0fdf4; border:1px solid #bbf7d0; color:#166534;
  border-radius:.6rem; padding:.6rem .8rem; font-size:.82rem; }
.cupom-ok.hidden{ display:none; }
.cupom-ok button{ color:#16a34a; font-weight:700; padding:0 .25rem; }
.cupom-ok button:hover{ color:#991b1b; }

/* ===== itens do carrinho compactos ===== */
.cart-item{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #f1f5f9; }
.cart-item-img{ height:2.75rem; width:2.75rem; border-radius:.5rem; object-fit:cover; background:#f1f5f9; flex-shrink:0; }
.cart-item-nome{ font-size:.82rem; font-weight:600; color:#1e293b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item-var{ font-size:.7rem; color:#94a3b8; }
.cart-item-preco{ font-size:.82rem; font-weight:700; }
.cart-qtd{ display:flex; align-items:center; border:1px solid #e2e8f0; border-radius:.5rem; font-size:.8rem; flex-shrink:0; }
.cart-qtd button{ padding:.15rem .5rem; color:#475569; }
.cart-qtd span{ padding:0 .35rem; min-width:1.2rem; text-align:center; }
.cart-item-x{ color:#cbd5e1; flex-shrink:0; padding:.25rem; }
.cart-item-x:hover{ color:#dc2626; }

/* ============================================================
   CUPOM APLICADO — ticket 3D
   ============================================================ */
.cupom-ticket{
  position:relative; display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-radius:.75rem;
  background:linear-gradient(135deg, color-mix(in srgb, var(--cor) 92%, #000) 0%, var(--cor) 100%);
  color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb, var(--cor) 35%, transparent),
             0 2px 4px rgba(0,0,0,.15),
             inset 0 1px 0 rgba(255,255,255,.15);
  transform-style:preserve-3d;
}
/* recortes serrilhados nas laterais (cara de bilhete) */
.cupom-ticket::before, .cupom-ticket::after{
  content:''; position:absolute; top:50%; width:1rem; height:1rem;
  background:#fff; border-radius:9999px; transform:translateY(-50%);
}
.cupom-ticket::before{ left:-.5rem; }
.cupom-ticket::after{ right:-.5rem; }
.cupom-ticket-icone{
  display:flex; align-items:center; justify-content:center;
  height:2.5rem; width:2.5rem; border-radius:.6rem; flex-shrink:0;
  background:rgba(255,255,255,.18);
}
.cupom-ticket-info{ flex:1; min-width:0; }
.cupom-ticket-codigo{ font-family:Sora,sans-serif; font-weight:800; font-size:1rem;
  letter-spacing:.03em; text-transform:uppercase; line-height:1.1; }
.cupom-ticket-valor{ font-size:.75rem; opacity:.85; margin-top:.1rem; }
.cupom-ticket-x{
  display:flex; align-items:center; justify-content:center;
  height:1.8rem; width:1.8rem; border-radius:9999px; flex-shrink:0;
  background:rgba(255,255,255,.15); color:#fff; transition:background .15s;
}
.cupom-ticket-x:hover{ background:rgba(255,255,255,.3); }

/* animação: o cupom "salta" ao ser aplicado */
@keyframes cupom-entra{
  0%   { opacity:0; transform:perspective(600px) rotateX(-40deg) translateY(-12px) scale(.92); }
  55%  { opacity:1; transform:perspective(600px) rotateX(8deg)   translateY(0)     scale(1.03); }
  100% { opacity:1; transform:perspective(600px) rotateX(0deg)   translateY(0)     scale(1); }
}
.cupom-ticket.entra{ animation:cupom-entra .5s cubic-bezier(.34,1.56,.64,1) both; }
@media (prefers-reduced-motion:reduce){ .cupom-ticket.entra{ animation:none; } }


/* ============================================================
   CHECKOUT NO MOBILE — compactar para caber tudo com scroll
   (desktop fica intacto)
   ============================================================ */
@media (max-width:767px){
  #cart-painel{ max-width:100%; }
  /* itens: no mínimo 30% da altura, sempre visíveis, com rolagem própria */
  #cart-painel #cart-itens{ flex:1 1 auto; min-height:30vh; }
  /* rodapé: mais enxuto e com rolagem se precisar */
  #cart-painel #cart-rodape{ padding:.75rem 1rem; max-height:58vh; overflow-y:auto; }
  #cart-painel #cart-rodape > *{ margin-top:.4rem !important; }
  /* campos de dados menores */
  #cart-painel #cart-rodape .input,
  #cart-painel #cart-rodape input,
  #cart-painel #cart-rodape textarea{ padding:.55rem .7rem; font-size:.9rem; }
  #cart-painel #cart-rodape textarea{ min-height:2.5rem; rows:2; }
  /* cupom desligado ocupa só a linha do toggle */
  #cart-painel .cupom-toggle b{ font-size:.82rem; }
  /* itens do carrinho ainda mais compactos no cel */
  #cart-painel .cart-item{ padding:.4rem 0; }
  #cart-painel .cart-item-img{ height:2.4rem; width:2.4rem; }
  /* título do drawer menor pra sobrar espaço */
  #cart-painel > div:first-child{ padding:.75rem 1rem; }
}

/* ============================================================
   SACOLA / CHECKOUT
   Mobile: painel deslizante de tela cheia (empilhado).
   Desktop: página larga com 2 colunas (itens+dados | resumo).
   ============================================================ */
.sacola-painel{
  position:absolute; right:0; top:0; height:100%; width:100%; max-width:30rem;
  background:#fff; display:flex; flex-direction:column; box-shadow:-8px 0 40px rgba(15,23,42,.15);
}
.sacola-topo{ display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; flex-shrink:0; }
.sacola-titulo{ font-family:Sora,sans-serif; font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; gap:.5rem; }
.sacola-x{ color:#94a3b8; padding:.25rem; border-radius:.5rem; }
.sacola-x:hover{ background:#f1f5f9; color:#334155; }
.sacola-corpo{ flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.sacola-esq{ display:flex; flex-direction:column; }
#cart-itens{ padding:.75rem 1.25rem; }
.sacola-secao{ padding:1rem 1.25rem; border-top:1px solid #f1f5f9; }
.sacola-secao-tit{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:.75rem; }
.sacola-secao-tit svg{ color:var(--cor); }
.sacola-resumo{ padding:1rem 1.25rem 1.5rem; }
.sacola-totais{ display:flex; flex-direction:column; gap:.35rem; padding-top:1rem;
  margin-top:.5rem; border-top:1px solid #f1f5f9; }

/* ---- DESKTOP: página centralizada, 2 colunas ---- */
@media (min-width:768px){
  #drawer-carrinho{ overflow-y:auto; padding:2.5rem 1rem; }
  .sacola-painel{
    position:relative; right:auto; top:auto; height:auto; max-width:60rem;
    margin:0 auto; border-radius:1.25rem; box-shadow:0 20px 50px rgba(15,23,42,.18); overflow:hidden;
  }
  .sacola-corpo{ flex-direction:row; overflow:visible; }
  .sacola-esq{ flex:1 1 58%; border-right:1px solid #f1f5f9; }
  .sacola-dir{ flex:1 1 42%; background:#fafbfc; }
  .sacola-resumo{ position:sticky; top:2.5rem; padding:1.5rem; }
  .sacola-secao{ border-top:none; padding:1.25rem 1.5rem; }
  .sacola-esq .sacola-secao{ border-top:1px solid #f1f5f9; }
  #cart-itens{ padding:1.5rem 1.5rem .5rem; }
}