/* ===========================
   FrutariaTropical – PDV
   Tema Premium (Atacadão/Assaí vibe)
   =========================== */

/* ===== Paleta / tokens ===== */
:root{
  --brand:#0c7a10; --brand2:#0a6a0e;
  --bg:#ffffff; --muted:#6b7280; --text:#111827;
  --accent:#0ea5e9; --danger:#e11d48;
  --card:#fff; --shadow:0 6px 16px rgba(0,0,0,.08);

  /* Premium atacarejo */
  --atk-green:#0b7b11;
  --atk-green-2:#095f0e;
  --atk-amber:#ffb703;      /* Assaí */
  --atk-orange:#ff7a00;     /* Atacadão */
  --atk-ink:#0f172a;
  --atk-surface:#0a240b;
  --atk-glow:0 10px 30px rgba(0,0,0,.22);
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{max-width:100%;display:block}

.topbar{
  background:var(--brand); color:#fff;
  padding:10px 16px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:50
}
.logo{font-weight:800;font-size:1.2rem;letter-spacing:.2px}

/* ===== Busca (default) ===== */
.search-wrap{position:relative;flex:1;max-width:760px;margin:0 auto}
.search{
  width:100%; background:#0e8e14; color:#fff;
  border:2px solid #0b7b11; border-radius:10px;
  padding:14px 44px 14px 16px; font-size:1.25rem; outline:none; font-weight:800;
}
.search::placeholder{color:#cfead1}
.search-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:#0fa015; border:none; color:#111; font-weight:1000;
  border-radius:8px; padding:10px 14px; cursor:pointer; text-transform:uppercase;
}

/* ===== Sugestões ===== */
.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden; display:none; z-index:60;
  max-height:360px; overflow-y:auto
}
.s-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.s-item:hover{background:#f2fbf4}
.s-item.active{background:#e8f6ea}
.s-name{flex:1;font-weight:900;color:#0b1b0e}
.s-price{min-width:120px;text-align:right;font-weight:1000;color:#065f46}
.s-unit{color:#64748b;font-size:.9rem;margin-left:4px;font-weight:700}

/* ===== Conteúdo ===== */
.main{max-width:1100px;margin:24px auto;padding:0 16px}
.empty{margin:40px auto;text-align:center;color:var(--muted)}

/* ===== Card produto/detalhe ===== */
.card{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:var(--card); border-radius:14px; padding:18px; box-shadow:var(--shadow)
}
.title{font-size:1.4rem;font-weight:900;margin:0 0 4px}
.subtitle{color:var(--muted);margin:0 0 12px}
.price-area{display:flex;align-items:baseline;gap:10px}
.price{font-size:2rem;font-weight:900;color:#0f766e}
.old{color:#9ca3af;text-decoration:line-through;font-weight:700}
.unit{font-size:1rem;color:#374151}
.item-calc-preview{
  width:min(360px,100%);
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #eef2f7;
  text-align:left;
}
.item-calc-label{
  color:#6b7280;
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.item-calc-line{
  margin-top:4px;
  color:#0f766e;
  font-size:1.25rem;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.pane{background:#f9fafb;border:1px dashed #e5e7eb;border-radius:12px;padding:12px}
.row{display:flex;gap:10px;margin-top:10px}
.row label{min-width:120px;color:#374151}
/* ===== Quantidade PDV (campo bem grande) ===== */
.qty{
  width:220px;                 /* mais largo */
  height:64px;                 /* mais alto, cara de PDV */
  padding:14px 16px;
  border:2px solid #0b7b11;    /* borda mais forte, na cor da marca */
  border-radius:14px;
  font-size:1.6rem;            /* número grandão */
  font-weight:900;             /* bem “gordinho” */
  text-align:center;
  color:#0b1b0e;
  background:#f1f5f9;
  box-shadow:0 4px 10px rgba(15,23,42,.12);
}

/* quando a UI está em modo “big” (Aa+) ainda cresce um pouco mais */
body.big-ui .qty{
  width:240px;
  height:72px;
  font-size:1.8rem;
}

.total{font-size:1.4rem;font-weight:900;color:#111827}
.ok{background:var(--accent);border:none;color:#fff;font-weight:800;border-radius:10px;padding:12px 16px;cursor:pointer}
.ok[disabled]{opacity:.5;cursor:not-allowed}
.ghost{background:#e5e7eb;color:#111827;border:none;border-radius:10px;padding:12px 16px;cursor:pointer}
.btn-line{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}

/* ===== Grid/itens ===== */
.grid{width:100%;border-collapse:collapse;margin:8px 0}
.grid th,.grid td{padding:10px 8px;border-bottom:1px solid #e5e7eb;text-align:left}
.grid th{font-weight:800;color:#374151;background:#f9fafb}
.right{text-align:right}
.muted{color:#6b7280}
.danger{background:#e11d48 !important;color:#fff}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100}
.modal.show{display:flex}
.modal-card{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:min(560px,96%);padding:18px}
.modal-card h2{margin:0 0 8px}
.modal-row{display:flex;gap:10px;margin:10px 0}
.modal-row>*{flex:1}
.inp{padding:10px;border:1px solid #d1d5db;border-radius:10px;font-size:1.05rem}
.total-line{display:flex;justify-content:space-between;font-weight:800;margin-top:8px}
.warn{color:#b91c1c;font-weight:700}

/* ===== Mascote carrinho vazio ===== */
.mascote-wrap{
  position:relative; width:min(420px, 80vw);
  margin:32px auto 8px; filter: drop-shadow(0 14px 28px rgba(0,0,0,.10));
  animation: float 3.5s ease-in-out infinite; will-change: transform;
}
.mascote-img{ width:100%; display:block; user-select:none; pointer-events:auto; transition:transform .25s ease }
.mascote-wrap:hover .mascote-img{ transform: rotate(-2deg) scale(1.02) }
.mascote-msg{ text-align:center; font-weight:700; margin-top:10px; opacity:.9 }
.sparkles{ position:absolute; inset:0; pointer-events:none }
.sparkles::before, .sparkles::after{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(255,255,255,.0) 60%);
  box-shadow:
    -90px 40px 0 2px rgba(255,215,0,.85),
    -20px 10px 0 1px rgba(255,255,255,.9),
    60px 30px 0 2px rgba(255,215,0,.85),
    95px -10px 0 1px rgba(255,255,255,.9),
    -65px -20px 0 2px rgba(255,215,0,.85);
  animation: twinkle 1.6s ease-in-out infinite;
}
.sparkles::after{ animation-delay:.8s; transform: translateY(6px) }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.9) } 50%{ opacity:1; transform:scale(1.15) } }
@media (prefers-reduced-motion: reduce){
  .mascote-wrap, .sparkles::before, .sparkles::after{ animation:none !important }
}

/* ===== Desconto PDV ===== */
.desc-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
#desc_val{ width:110px; padding:10px; border:1px solid #d1d5db; border-radius:10px; font-size:1rem }
#desc_tipo{ padding:10px; border:1px solid #d1d5db; border-radius:10px; font-size:1rem }
.desc-atalhos{ display:flex; gap:6px }
.desc-atalhos .chip{ border:1px solid #d1d5db; background:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font-size:.9rem }
.desc-atalhos .chip:hover{ background:#f3f4f6 }

/* ===========================
   PREMIUM DOCK (Desktop)
   =========================== */
@media (min-width: 769px){
  /* Dock fixo premium */
  .topbar .search-wrap{
    position:fixed; left:16px; right:340px; bottom:16px; z-index:90;
    display:flex; gap:10px; align-items:center;
    background:linear-gradient(180deg, #0e8e14 0%, #0b7b11 100%);
    padding:10px; border-radius:16px;
    box-shadow: var(--atk-glow), inset 0 1px 0 rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
  }

  /* Campo robusto */
  .topbar .search{
    flex:1 1 520px;
    background:#0e8e14; color:#fff;
    border:2px solid #0a6a0e; border-radius:14px;
    padding:16px 18px; font-size:1.4rem; font-weight:800; letter-spacing:.2px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08);
  }
  .topbar .search::placeholder{ color:#d7f4da; opacity:.9 }

  /* Botão laranja com “peso” */
  .topbar .search-btn{
    position:static; transform:none; cursor:pointer;
    padding:0 20px; height:56px; border-radius:14px;
    background: linear-gradient(180deg, var(--atk-amber), var(--atk-orange));
    color:#111; font-weight:1000; letter-spacing:.3px; font-size:1.1rem;
    border:2px solid #9a3e00;
    box-shadow: 0 6px 0 #7a2f00, 0 12px 18px rgba(0,0,0,.25);
    text-transform:uppercase;
  }
  .topbar .search-btn:active{
    transform: translateY(2px);
    box-shadow: 0 4px 0 #7a2f00, 0 8px 12px rgba(0,0,0,.2);
  }

  /* Sugestões alinhadas ao bloco */
  #suggest{
    position:absolute; left:10px; right:10px; bottom:66px; top:auto;
    max-height:48vh; border-radius:14px; overflow:auto;
    box-shadow: var(--atk-glow);
  }

  /* Totalização: selo/pílula */
  .topbar .total-badge{
    position:fixed; right:16px; bottom:16px; z-index:95;
    display:flex; align-items:center; gap:10px;
    background: linear-gradient(180deg, #122a14, #0a1d0b);
    border:2px solid #0c3a10; border-radius:16px;
    padding:12px 16px; color:#e2f6e4; font-weight:900;
    box-shadow: var(--atk-glow), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .total-badge .tag{
    background: linear-gradient(180deg, var(--atk-amber), var(--atk-orange));
    color:#111; font-weight:1000; padding:6px 10px; border-radius:10px;
    border:2px solid #9a3e00; text-transform:uppercase; font-size:.85rem;
    box-shadow: 0 3px 0 #7a2f00;
  }
  .total-badge .val{
    font-variant-numeric: tabular-nums;
    font-size:1.9rem; line-height:1; letter-spacing:.5px;
  }

  /* FAB Painel (se houver) */
  .fab{
    position:fixed; right:16px; bottom:82px; z-index:90;
    background:#0b7b11; color:#fff; padding:12px 14px; border-radius:12px; font-weight:800;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
  }
  .fab:hover{ background:#0a6a0e }
}

/* ===========================
   MOBILE – grid sem sobreposição
   =========================== */
@media (max-width: 768px){
  body{ padding-bottom:0 }

  .topbar{
    position:sticky; top:0; z-index:50;
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo total"
      "search search"
      "actions actions";
    gap:8px 10px;
    padding:10px 12px;
  }

  .logo{ grid-area:logo; font-size:18px; font-weight:800 }

  /* Total cabeçalho */
  .topbar > div[style*="margin-left:auto"]{
    grid-area:total; position:static !important; margin-left:0 !important;
    background:transparent; color:#fff; padding:0; box-shadow:none;
    font-size:16px; white-space:nowrap; justify-self:end;
  }

  /* Ações (Painel, etc.) */
  .topbar > div[style*="display:flex"][style*="gap:8px"]{
    grid-area:actions; margin-left:0 !important; justify-self:start; display:flex; gap:8px;
  }
  .fab{
    position:static; display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px; border-radius:12px; background:#0b7b11; color:#fff; font-weight:800;
  }

  /* Bloco da busca premium */
  .search-wrap{
    grid-area:search;
    position:relative; max-width:none; margin:0;
    display:grid; grid-template-columns: 1fr auto; gap:8px;
    background: linear-gradient(180deg, #0e8e14, #0b7b11);
    padding:8px; border-radius:14px; box-shadow: var(--atk-glow);
  }
  .search{
    width:100%; min-width:0; font-size:16px; padding:12px 14px;
    border:2px solid #0b7b11; border-radius:12px; background:#0e8e14; color:#fff; font-weight:800;
  }
  .search-btn{
    position:static; transform:none; padding:0 16px; font-size:16px; font-weight:1000;
    border-radius:12px; background: linear-gradient(180deg, var(--atk-amber), var(--atk-orange));
    color:#111; border:2px solid #9a3e00; box-shadow: 0 5px 0 #7a2f00; text-transform:uppercase;
  }

  /* Sugestões sempre abaixo */
  #suggest, .suggest{
    position:absolute; left:8px; right:8px; top:100%; bottom:auto;
    margin-top:6px; max-height:50vh; overflow:auto;
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    box-shadow:var(--shadow); z-index:1000;
  }

  /* Badge compacto no mobile */
  .topbar .total-badge{
    grid-area:total; display:inline-flex; gap:8px; align-items:center;
    background:#0a1d0b; color:#e2f6e4; border:2px solid #0c3a10;
    padding:6px 10px; border-radius:12px;
  }
  .total-badge .val{ font-size:1.2rem; font-variant-numeric: tabular-nums }
}

/* ===========================
   Dock “curto” + ordem (opcional)
   =========================== */
.dock-inner{
  display:flex; flex-direction: row !important; flex-wrap: wrap;
  align-items: center; justify-content: flex-start; gap: 8px !important;
}
.dock-inner .prod-wrap{
  flex: 0 0 380px !important; max-width: 380px !important; min-width: 320px !important;
}
#search.search-big{ width:100% !important }
#go.search-big{ order:2 !important }
#totalBadge{ order:3 !important }

@media (max-width: 980px){
  .dock-inner{ gap: 8px !important }
  .dock-inner .prod-wrap{ flex: 1 1 100% !important; max-width:none !important; min-width:0 !important }
  #go.search-big{ width:auto; order:2 !important }
  #totalBadge{ order:3 !important; width:100%; justify-content:center }
}
/* Dropdown do dock abre para cima e acompanha a largura menor */
#suggest{ left:0; right:0; bottom:56px }

/* ===== Classe utilitária para o selo de total ===== */
.total-badge .tag{ user-select:none }
.val,#tot{ font-variant-numeric: tabular-nums }

/* ===== Estados ===== */
button:focus-visible, .search:focus-visible { outline:2px solid #fff; outline-offset:2px }
/* ====== PDV dock: Campo → BUSCAR → Total (desktop) ====== */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:#ffffffcc; backdrop-filter:saturate(1.2) blur(6px);
  border-top:1px solid #e5e7eb;
}
.dock-inner{
  max-width:1200px; margin:10px auto; padding:8px 12px;
  display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* 1) Campo de produto/EAN (largura controlada e input ocupando 100%) */
.dock .prod-wrap{
  position:relative; flex:0 0 520px;   /* ajuste 420..560 se quiser */
  max-width:520px; min-width:340px;
}
.dock #search{ width:100%; }

/* 2) Botão BUSCAR imediatamente após o campo (nunca absolute) */
.dock #go{
  position:static !important;         /* força ficar ao lado do input */
  transform:none !important;
  height:52px; padding:0 18px;
  border-radius:14px; font-weight:1000; text-transform:uppercase;
  background: linear-gradient(180deg, var(--atk-amber), var(--atk-orange));
  color:#111; border:2px solid #9a3e00;
  box-shadow: 0 5px 0 #7a2f00, 0 12px 18px rgba(0,0,0,.20);
  cursor:pointer;
}

/* 3) Total vem depois do botão (pílula) */
#totalBadge{
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(180deg, #122a14, #0a1d0b);
  color:#e2f6e4; border:2px solid #0c3a10; border-radius:14px;
  height:52px; padding:0 16px; font-weight:900;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
#totalBadge .tag{
  background: linear-gradient(180deg, var(--atk-amber), var(--atk-orange));
  color:#111; border:2px solid #9a3e00; border-radius:10px;
  padding:6px 10px; font-weight:1000; text-transform:uppercase; font-size:.85rem;
  box-shadow: 0 3px 0 #7a2f00;
}
#tot{ font-variant-numeric:tabular-nums; font-size:1.6rem; letter-spacing:.5px }

/* Ordem garantida (caso existam estilos antigos) */
.dock .prod-wrap{ order:1 !important; }
.dock #go       { order:2 !important; }
.dock #totalBadge{ order:3 !important; }

/* Sugestões do produto sobem acima do dock e acompanham a largura do campo */
.dock .prod-wrap #suggest{
  position:absolute; left:0; right:0; bottom:56px; top:auto;
  display:none; max-height:48vh; border-radius:12px; overflow:auto;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* ====== Mobile (≤ 980px): empilhar e manter a ordem ====== */
@media (max-width: 980px){
  .dock-inner{ flex-wrap:wrap; gap:8px; }
  .dock .prod-wrap{ flex:1 1 100%; min-width:0; max-width:none; }
  .dock #go{ height:48px; }
  #totalBadge{ width:100%; justify-content:center; height:48px; }
  .dock .prod-wrap #suggest{ bottom:auto; top:100%; margin-top:6px; }
}

/* ====== Extras úteis ====== */
/* animação quando o total muda → chamar pulseTotal() no JS */
#totalBadge.pulse{ animation:pdv-total-pulse .45s ease; }
@keyframes pdv-total-pulse{
  0%{ transform:scale(1) } 40%{ transform:scale(1.04) } 100%{ transform:scale(1) }
}
/* ===== Centralizar dock ===== */
.dock-inner{
  max-width: 900px;   /* limite opcional, ajuste 800–1100px conforme preferir */
  margin: 10px auto;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;   /* centraliza horizontalmente */
  gap: 10px;

  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Campo ocupa largura fixa proporcional */
.dock .prod-wrap{
  flex: 0 1 420px;   /* largura sugerida do input */
  max-width: 480px;
  min-width: 300px;
}
/* Mascote no carrinho vazio */
.mascote-wrap{
  width:min(420px, 80vw);
  margin:24px auto 8px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.10));
  animation: mascote-float 3.5s ease-in-out infinite;
  will-change: transform;
}
.mascote-wrap img{
  width:100%;
  display:block;
  user-select:none;
  pointer-events:none;
  transition:transform .25s ease;
}
.mascote-wrap:hover img{ transform: rotate(-2deg) scale(1.02) }
.mascote-msg{ text-align:center; color:#6b7280; font-weight:600; }

@keyframes mascote-float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}
/* ===== Mascote com efeitos ===== */
.mascote-wrap{
  position:relative;
  width:min(420px, 80vw);
  margin:32px auto 8px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.10));
  animation: float 3.5s ease-in-out infinite;
  will-change: transform;
}
.mascote-wrap img{
  width:100%;
  display:block;
  user-select:none;
  pointer-events:none;
  transition:transform .25s ease;
}
.mascote-wrap:hover img{ transform: rotate(-2deg) scale(1.02) }
.mascote-msg{ text-align:center; font-weight:700; margin-top:10px; opacity:.9 }

/* ===== Bolinhas (“sparkles”) ===== */
.sparkles{
  position:absolute; inset:0;
  pointer-events:none;
}
.sparkles::before, .sparkles::after{
  content:""; position:absolute;
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(255,255,255,.0) 60%);
  box-shadow:
    -90px 40px 0 2px rgba(255,215,0,.85),
    -20px 10px 0 1px rgba(255,255,255,.9),
    60px 30px 0 2px rgba(255,215,0,.85),
    95px -10px 0 1px rgba(255,255,255,.9),
    -65px -20px 0 2px rgba(255,215,0,.85);
  animation: twinkle 1.6s ease-in-out infinite;
}
.sparkles::after{
  animation-delay:.8s;
  transform: translateY(6px);
}

/* ===== Animações ===== */
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}
@keyframes twinkle{
  0%,100%{ opacity:.15; transform:scale(.9) }
  50%{ opacity:1; transform:scale(1.15) }
}
/* Mascote: flutua, dá um saltinho suave e inclina levemente */
.mascote-wrap{
  position:relative;
  width:min(420px, 80vw);
  margin:32px auto 8px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.10));
  animation: mascFloat 3.4s ease-in-out infinite;
  will-change: transform;
}
.mascote-img{
  width:100%;
  display:block;
  user-select:none;
  pointer-events:none;
  /* leve “vira pra um lado e pro outro” contínuo */
  animation: mascTilt 6s ease-in-out infinite;
  transition: transform .25s ease;
}
/* um tico mais “vivo” quando passa o mouse */
.mascote-wrap:hover .mascote-img{
  transform: rotate(-2deg) scale(1.02);
}

/* bolinhas (se você já tem as .sparkles, pode manter as suas) */
.sparkles{ position:absolute; inset:0; pointer-events:none }
.sparkles::before, .sparkles::after{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(255,255,255,0) 60%);
  box-shadow:
    -90px 40px 0 2px rgba(255,215,0,.85),
    -20px 10px 0 1px rgba(255,255,255,.9),
     60px 30px 0 2px rgba(255,215,0,.85),
     95px -10px 0 1px rgba(255,255,255,.9),
    -65px -20px 0 2px rgba(255,215,0,.85);
  animation: mascTwinkle 1.6s ease-in-out infinite;
}
.sparkles::after{ animation-delay:.8s; transform: translateY(6px) }

/* animações */
@keyframes mascFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }   /* “saltinho” */
}
@keyframes mascTilt{
  0%,100%{ transform:rotate(0deg) }
  25%{ transform:rotate(-1.2deg) }
  75%{ transform:rotate(1.2deg) }
}
@keyframes mascTwinkle{
  0%,100%{ opacity:.15; transform:scale(.9) }
  50%{ opacity:1; transform:scale(1.15) }
}

/* respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  .mascote-wrap, .mascote-img, .sparkles::before, .sparkles::after{
    animation: none !important;
    transform: none !important;
  }
}
/* ============================================
   Acessibilidade & Modos (drop-in, sobrescreve)
   ============================================ */

/* Escala global da UI (Aa+) */
:root{ --scale:1; }
body.big-ui{ --scale:1.25; }          /* ajuste 1.20–1.35 se desejar */
@media (min-width:1600px){
  body.big-ui{ --scale:1.30; }
}

/* Componentes que devem “crescer juntos” */
.search, .search-big, .search-btn, #go,
.total-badge, .btn-top, .btn-outline,
.s-item, .inp, .qty, .ok, .ghost {
  font-size: calc(1rem * var(--scale));
}
.search-big, .search-btn, #go, .total-badge {
  height: calc(52px * var(--scale));
}
.s-item{ padding: calc(12px * var(--scale)) 14px; }
#tot{ font-size: calc(1.8rem * var(--scale)); }

/* Foco visível e consistente (sobrescreve o anterior) */
button:focus-visible, .search:focus-visible, input:focus-visible, select:focus-visible {
  outline:3px solid #fff; outline-offset:2px;
}
body.hc button:focus-visible, body.hc .search:focus-visible,
body.hc input:focus-visible, body.hc select:focus-visible {
  outline:3px solid #000; outline-offset:3px;
}

/* Sugestões mais legíveis e com “ativo” forte */
.s-item .s-name{ font-weight:900; font-size: calc(1.1rem * var(--scale)); }
.s-item .meta{ font-size: calc(.95rem * var(--scale)); opacity:.9; }
.s-item.active{ background:#e8f6ea; outline:2px solid #0a6a0e; }
body.hc .s-item.active{ background:#fff; outline:2px solid #000; }

/* =============== Alto Contraste (HC) =============== */
body.hc{
  --bg:#ffffff; --ink:#000; --line:#000;
  background:#fff; color:#000;
}
body.hc .topbar{ background:#000; color:#fff; }
body.hc .btn-outline{ background:#fff; color:#000; border-color:#000; }
body.hc .btn-top{ background:#000; color:#fff; border-color:#000; }
body.hc .search{
  background:#fff; color:#000; border:2px solid #000;
}
body.hc .search::placeholder{ color:#444; }
body.hc .dock{
  background:#fff; backdrop-filter:none; border-top:2px solid #000;
}
body.hc .dock-inner{
  box-shadow:none; border:2px solid #000;
}
body.hc #totalBadge{
  background:#000; color:#fff; border:2px solid #000; box-shadow:none;
}
body.hc #totalBadge .tag{
  background:#fff; color:#000; border:2px solid #000;
}

/* ================ Modo Noite (🌙) ================= */
body.dark{
  --bg:#0b0f0c; --ink:#e8f6ea; --line:#0f2a13;
  background:var(--bg); color:var(--ink);
}
body.dark .topbar{ background:#0a1d0b; color:#e2f6e4; }
body.dark .search{
  background:#0e8e14; color:#fff; border:2px solid #0a6a0e;
}
body.dark .search::placeholder{ color:#e6ffe9; }
body.dark .dock{
  background:#0b0f0ccc; border-top:1px solid #0f2a13; backdrop-filter:saturate(1.1) blur(4px);
}
body.dark .dock-inner{
  background:#0a1d0b; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
body.dark #totalBadge{
  background:linear-gradient(180deg,#122a14,#0a1d0b);
  color:#e2f6e4; border:2px solid #0c3a10;
}

/* Acessibilidade do aviso de estoque (ícone + contraste) */
#estoqueAlert{ color:#111; }
body.hc #estoqueAlert{
  background:#fff; border:2px solid #000; color:#000;
}

/* Dica de atalhos (opcional, se quiser exibir) */
.a11y-hints{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-weight:700; font-size: calc(.95rem * var(--scale));
  color:#0b1b0e; opacity:.85; margin:6px 0;
}
body.dark .a11y-hints{ color:#e2f6e4; opacity:.9; }
body.hc .a11y-hints{ color:#000; opacity:1; }


/* ===== Modal: sempre acima e com scroll no mobile ===== */
.modal,
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;                 /* padrão: escondido */
  align-items: center;           /* desktop central */
  justify-content: center;
  background: rgba(0,0,0,.45);   /* seu backdrop */
  z-index: 12050 !important;     /* > 9999 (cliSuggest), > 120 (dock) */
}
.modal.show { display: flex; }

.modal-card {
  width: min(560px, 96%);
  max-height: calc(100dvh - 32px); /* usa dvh para mobile */
  overflow: auto;                   /* scroll no conteúdo */
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

/* MOBILE: começa do topo e permite rolar */
@media (max-width: 768px){
  .modal{
    align-items: flex-start;  /* não centraliza verticalmente */
    padding: 12px;            /* respiro ao redor do card */
    height: 100dvh;           /* cobre a tela com barra do navegador */
    overflow: auto;           /* scroll no overlay quando preciso */
  }
  .modal-card{
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }
}

/* Quando qualquer modal abrir: esconda sugestões e desligue cliques do topo/dock */
body.modal-open #cliSuggest,
body.modal-open #suggest,
body.modal-open .suggest { display: none !important; }

body.modal-open { overflow: hidden; touch-action: none; }
body.modal-open .topbar,
body.modal-open .dock { pointer-events: none; }  /* evita toques “por trás” */

/* Modal acima de tudo e com scroll (corrige mobile) */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
         background:rgba(0,0,0,.45); z-index:12050 !important; }
.modal.show { display:flex; }
.modal-card { width:min(560px,96%); max-height:calc(100dvh - 32px); overflow:auto; -webkit-overflow-scrolling:touch; }

/* Mobile: não centralizar verticalmente e permitir rolagem */
@media (max-width:768px){
  .modal{ align-items:flex-start; padding:12px; height:100dvh; overflow:auto; }
  .modal-card{ width:100%; max-height:calc(100dvh - 24px); border-radius:14px; }
}

/* Esconde listas de sugestão quando o modal está aberto */
body.modal-open #cliSuggest,
body.modal-open #suggest,
body.modal-open .suggest { display:none !important; }

/* Opcional: bloquear cliques no topo/dock enquanto modal aberto */
body.modal-open .topbar,
body.modal-open .dock { pointer-events:none; }
body.modal-open { overflow:hidden; }

/* Mobile: botão de pedido sempre acima da busca/sugestões */
@media (max-width: 768px){
  /* use o id real do botão (ex.: #btn-lancar-venda) */
  #btn-lancar-venda{
    position: relative;      /* cria stacking context */
    z-index: 1300 !important;/* > 120 (.dock) e > 1200 (suggest ajustado abaixo) */
  }

  /* garante que a lista de sugestões fique abaixo do botão */
  .dock .prod-wrap #suggest{
    z-index: 1200 !important;
  }
}