/* ===========================================================
   WJ · Pedido China — design system (Inter, paleta quente, vinho WJ)
   =========================================================== */
:root{
  --ink:#262220; --ink2:#5C554F; --mut:#928B83; --mut2:#B6AFA7;
  --bg:#F6F4F1; --card:#FFFFFF; --line:#ECE8E3; --line2:#F3F0EC;
  --vinho:#8B2635; --vinho-d:#73202C; --vinho-l:#F7ECEE;
  --ok:#1E7A4D; --ok-l:#E9F6EF; --amarelo:#FDF6E3; --amarelo-b:#EBD9A6;
  --nav:#211D1B; --nav-w:230px;
  --r:11px; --r-sm:8px;
  --sh:0 1px 2px rgba(40,30,20,.04), 0 1px 3px rgba(40,30,20,.06);
  --sh-h:0 6px 24px rgba(40,30,20,.10);
  --tr:.16s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;letter-spacing:-.05px}
a{color:inherit;text-decoration:none}
h1{font-size:19px;font-weight:600;letter-spacing:-.3px;margin:0}
h2{font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0}
.dica{color:var(--mut);font-size:13px;margin:6px 0 22px}
::selection{background:var(--vinho-l)}

/* ---- inputs / botões base ---- */
input,textarea,select{font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;transition:border-color var(--tr),box-shadow var(--tr)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--vinho);box-shadow:0 0 0 3px var(--vinho-l)}
input::placeholder,textarea::placeholder{color:var(--mut2)}
textarea{resize:vertical}
button{font-family:inherit;cursor:pointer;font-size:13px;font-weight:500;border:none;border-radius:var(--r-sm);
  padding:9px 16px;background:var(--ink);color:#fff;transition:var(--tr);letter-spacing:-.1px}
button:hover{background:#000;transform:translateY(-1px)}
button:active{transform:translateY(0)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;padding:10px 16px;
  border-radius:var(--r-sm);font-size:13px;font-weight:500;transition:var(--tr)}
.btn:hover{background:#000;transform:translateY(-1px);box-shadow:var(--sh)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#fff;border-color:var(--ink);box-shadow:var(--sh)}
.btn.export{background:var(--vinho)}.btn.export:hover{background:var(--vinho-d)}

/* ===== NAV lateral ===== */
.nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav-w);background:var(--nav);overflow-y:auto;
  padding:24px 0 80px;z-index:100}
.nav-brand{display:block;padding:4px 24px 22px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo-wj{display:block;font-size:22px;font-weight:700;letter-spacing:1px;color:#fff;line-height:1}
.logo-img{display:block;width:104px;height:auto;margin-bottom:4px}
.login-logo{display:block;width:116px;height:auto;margin:0 auto 18px}
.logo-sub{display:block;font-size:10px;font-weight:500;letter-spacing:.5px;color:#A39B92;margin-top:5px}
.nav-stage{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#6E665F;padding:18px 24px 6px}
.nav-link{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#BDB6AE;font-size:13.5px;
  font-weight:450;padding:9px 24px;border-left:2.5px solid transparent;cursor:pointer;transition:var(--tr)}
a.nav-link:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-link.on{color:#fff;border-left-color:var(--vinho);background:rgba(139,38,53,.16)}
.nav-link.soon{color:#6E665F;cursor:default}
.tag{font-style:normal;font-size:9px;font-weight:500;letter-spacing:.3px;color:#8A827A;
  border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:2px 6px}
.nav-foot{position:absolute;left:0;right:0;bottom:0;padding:16px 24px;border-top:1px solid rgba(255,255,255,.07);
  background:var(--nav);display:flex;flex-direction:column;gap:5px}
.nav-user{font-size:11px;color:#8A827A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-sair{font-size:12px;color:#BDB6AE;font-weight:500}.nav-sair:hover{color:#fff}

/* ===== MAIN ===== */
.main{padding:34px 40px 80px;max-width:1200px}
body.com-nav .main{margin-left:var(--nav-w)}

/* ===== LOGIN ===== */
.login{max-width:360px;margin:11vh auto;background:#fff;padding:40px 36px;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh)}
.login h1{text-align:center;margin-bottom:6px}
.login .sub{text-align:center;color:var(--mut);font-size:12.5px;margin-bottom:24px}
.login label{display:block;margin:14px 0;font-size:12px;font-weight:500;color:var(--ink2)}
.login input{width:100%;margin-top:6px;padding:12px}
.login button{width:100%;margin-top:14px;padding:13px;font-size:14px}
.erro{color:var(--vinho);font-size:12.5px;text-align:center;background:var(--vinho-l);padding:9px;border-radius:var(--r-sm)}

/* ===== CARDS fornecedor ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--sh);transition:var(--tr)}
.card:hover{box-shadow:var(--sh-h);transform:translateY(-2px)}
.card h3{font-size:16px;margin:0}
.contagem{color:var(--mut);font-size:12.5px;margin:6px 0 18px}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.colecao{margin-bottom:30px}
.col-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--vinho);padding-bottom:7px;margin:8px 0 16px}
.col-title{margin:0;font-size:18px;color:var(--vinho)}
.col-count{font-size:12px;color:var(--mut);font-weight:500;margin-left:auto}
.col-export{padding:7px 14px;font-size:12.5px;flex-shrink:0}

/* ===== SHELL (topo estilo navegador: ‹ › · abas · +) ===== */
.shell-body{overflow:hidden}
.shell{height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;background:var(--nav);padding:0 12px;height:48px;flex-shrink:0}
.topbrand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.topbrand img{height:22px;width:auto;display:block}
.topbrand span{color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.3px}
.navbtns{display:flex;gap:2px;flex-shrink:0}
.navbtn{background:rgba(255,255,255,.06);color:#CFC8C0;border:0;font-size:19px;line-height:1;width:28px;height:28px;
  border-radius:6px;cursor:pointer;font-family:inherit;padding:0;transition:var(--tr)}
.navbtn:hover{background:rgba(255,255,255,.15);color:#fff}
.tabbar{display:flex;align-items:flex-end;gap:4px;flex:1;overflow-x:auto;height:100%;padding-top:9px}
.aba{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);color:#CFC8C0;
  font-size:12.5px;font-weight:500;padding:8px 11px;border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap;
  border:0;font-family:inherit;max-width:200px;transition:background .15s,color .15s}
.aba:hover{background:rgba(255,255,255,.13);color:#fff}
.aba.on{background:var(--bg);color:var(--ink)}
.aba b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.aba .x{font-style:normal;opacity:.45;font-size:15px;line-height:1;border-radius:4px;padding:0 3px;flex-shrink:0}
.aba .x:hover{opacity:1;color:var(--vinho);background:rgba(0,0,0,.06)}
.novaaba{background:rgba(255,255,255,.06);color:#CFC8C0;border:0;font-size:18px;width:30px;height:30px;border-radius:6px;
  cursor:pointer;flex-shrink:0;font-family:inherit;padding:0;align-self:center;margin-left:2px;transition:var(--tr)}
.novaaba:hover{background:rgba(255,255,255,.15);color:#fff}
.topuser{font-size:11px;color:#8A827A;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.topsair{font-size:12px;color:#BDB6AE;font-weight:500;flex-shrink:0}.topsair:hover{color:#fff}
.views{flex:1;position:relative;background:var(--bg);overflow:hidden}
.views .frame{position:absolute;inset:0;width:100%;height:100%;border:0}

/* tela de escolha (/inicio) + em construção */
.inicio{padding:6px 0}
.inicio h1{font-size:22px}
.card.mod{display:block;text-decoration:none;color:inherit;cursor:pointer}
.card.mod:hover{box-shadow:var(--sh-h);transform:translateY(-2px)}
.construcao{text-align:center;padding:64px 20px;color:var(--mut)}
.construcao h1{color:var(--ink);margin-bottom:8px}

/* ===== MÓDULO (sidebar lateral + conteúdo) — carrega dentro da aba ===== */
.mod-body{display:flex;height:100vh;overflow:hidden;background:var(--bg)}
.msidebar{width:208px;flex-shrink:0;background:var(--nav);overflow-y:auto;padding:18px 0}
.m-nome{color:#fff;font-size:14px;font-weight:700;letter-spacing:.3px;padding:2px 22px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.m-stage{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#6E665F;padding:16px 22px 5px}
.m-link{display:flex;align-items:center;gap:8px;color:#BDB6AE;font-size:13.5px;font-weight:450;padding:9px 22px;
  border-left:2.5px solid transparent;text-decoration:none;transition:var(--tr)}
a.m-link:hover{color:#fff;background:rgba(255,255,255,.04)}
.m-link.on{color:#fff;border-left-color:var(--vinho);background:rgba(139,38,53,.16)}
.m-link.soon{color:#6E665F;cursor:default}
.m-link .tag{font-size:9px;background:rgba(255,255,255,.08);color:#8A827A;padding:2px 6px;border-radius:20px;
  font-style:normal;font-weight:600}
.m-main{flex:1;overflow:auto;padding:30px 36px 70px}

/* ===== EDITOR ===== */
.editor-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;
  position:sticky;top:0;background:var(--bg);padding:14px 0;z-index:40}
.editor-top h1{font-size:17px}
.voltar{font-size:13px;color:var(--mut);font-weight:500;transition:var(--tr)}.voltar:hover{color:var(--vinho)}
.flash{position:fixed;top:18px;right:24px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--r-sm);
  font-size:13px;font-weight:500;box-shadow:var(--sh-h);z-index:200;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dirty-ind{margin-left:auto;color:var(--vinho);font-size:12px;font-weight:600}
.selall-l{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);font-weight:500;cursor:pointer}
.selall-l input{width:16px;height:16px;accent-color:var(--vinho);cursor:pointer}

.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 18px}
.busca{min-width:260px;padding:10px 13px}
.conta{font-size:12.5px;color:var(--ink2);font-weight:500}
.dica-inline{font-size:12px;color:var(--mut)}

.paginacao{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 18px}
.paginacao .pg{background:#fff;color:var(--ink2);border:1px solid var(--line);padding:7px 13px;font-size:12.5px;font-weight:500}
.paginacao .pg:hover{border-color:var(--ink);transform:none}
.paginacao .pg.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.produto{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  margin-bottom:18px;box-shadow:var(--sh);scroll-margin-top:84px;transition:box-shadow var(--tr)}
.produto:hover{box-shadow:var(--sh-h)}
.produto.cancelado{background:#FBFAF9}
.produto.cancelado .grid,.produto.cancelado .cores,.produto.cancelado .coment-ped,.produto.cancelado .prow,.produto.cancelado .ref,.produto.cancelado .foto-wrap,.produto.cancelado .coment{opacity:.42}
.phead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid var(--line2)}
.chk{display:flex;align-items:center}
.chk input{width:18px;height:18px;cursor:pointer;accent-color:var(--vinho)}
.ord-in{width:48px;padding:7px 4px;text-align:center;font-size:16px;font-weight:600;color:var(--vinho);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.ref{font-weight:600;font-size:14.5px;letter-spacing:-.2px}
.foto{height:130px;width:130px;object-fit:contain;background:#FAF8F6;border-radius:var(--r-sm);border:1px solid var(--line);
  cursor:zoom-in;transition:var(--tr)}
.foto:hover{box-shadow:var(--sh-h);transform:scale(1.04)}
.foto-vazia{display:inline-flex;align-items:center;justify-content:center;height:130px;width:130px;
  border:1px dashed var(--mut2);border-radius:var(--r-sm);color:var(--mut2);font-size:36px;cursor:pointer}
.foto-vazia:hover{border-color:var(--vinho);color:var(--vinho)}
.foto-wrap{position:relative;display:inline-flex;flex-shrink:0;outline:none;border-radius:var(--r-sm)}
.foto-wrap:focus{box-shadow:0 0 0 2px var(--vinho-l)}
.foto-add{position:absolute;right:-10px;bottom:-10px;width:40px;height:40px;border-radius:50%;border:2px solid #fff;
  background:var(--ink);color:#fff;font-size:18px;line-height:1;padding:0;cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--sh);transition:var(--tr)}
.foto-add:hover{background:var(--vinho);transform:scale(1.12)}
.movs button.btn-excluir{background:var(--vinho);color:#fff;border:1px solid var(--vinho)}
.movs button.btn-excluir:hover{background:var(--vinho-d)}
.movs button.btn-excluir.armed{background:#C0392B;border-color:#C0392B;color:#fff;font-weight:700;animation:pulsa .9s ease-in-out infinite}
/* pop-up de confirmação (excluir): cancelar cinza · excluir vermelho/bordô */
.confirm-ov{position:fixed;inset:0;background:rgba(25,20,18,.55);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fade .15s ease}
.confirm-box{background:#fff;border-radius:var(--r);padding:26px 26px 20px;max-width:380px;width:90%;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.confirm-tit{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px}
.confirm-msg{font-size:13.5px;color:var(--ink2);line-height:1.5;margin:0 0 20px}
.confirm-acts{display:flex;gap:10px;justify-content:flex-end}
.cbtn-cancel{background:#F0EDEA;color:var(--ink2);border:0;padding:10px 18px;border-radius:var(--r-sm);font-weight:500;cursor:pointer;font-family:inherit;font-size:13.5px;transition:var(--tr)}
.cbtn-cancel:hover{background:#E6E2DD}
.cbtn-del{background:var(--vinho);color:#fff;border:0;padding:10px 18px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;font-family:inherit;font-size:13.5px;transition:var(--tr)}
.cbtn-del:hover{background:var(--vinho-d)}

/* ===== FAMÍLIAS (organização interna) ===== */
.fam-cell{display:flex;flex-direction:column;gap:4px}
.fam-lbl{font-size:11px;color:var(--mut);font-weight:500}
.fam-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fam-chip{background:var(--vinho-l);color:var(--vinho);border:1px solid #E8CDD2;border-radius:var(--r-sm);padding:5px 11px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;transition:var(--tr)}
.fam-chip:hover{background:var(--vinho);color:#fff}
.fam-none{font-size:12.5px;color:var(--mut2);font-style:italic}
.fam-trocar{background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;font-size:12px;cursor:pointer;font-family:inherit;transition:var(--tr)}
.fam-trocar:hover{border-color:var(--ink);color:var(--ink);background:#F4F1EE;transform:none}
.fam-membros{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;color:var(--mut)}
.fam-ov{position:fixed;inset:0;background:rgba(25,20,18,.6);display:flex;align-items:center;justify-content:center;z-index:10001;padding:30px;animation:fade .15s ease}
.fam-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:19px;line-height:1;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.fam-x:hover{background:var(--vinho)}
.fam-tit{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px;padding-right:42px}
.fam-tit span{font-weight:400;color:var(--mut);font-size:14px}
.fam-hint{font-size:12.5px;color:var(--ink2);margin-bottom:12px}
.fam-board-box,.fam-box{position:relative;background:#fff;border-radius:var(--r);padding:22px 24px;max-width:1020px;width:96%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.fam-scroll{overflow:auto;flex:1;min-height:0;margin-top:6px}
.fam-box{max-width:560px}
.fam-token{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;background:var(--ink);color:#fff;border:1.5px dashed rgba(255,255,255,.45);border-radius:var(--r-sm);padding:9px 15px;font-size:13px;margin-bottom:12px;cursor:grab;user-select:none;touch-action:none;animation:bobtoken 1.8s ease-in-out infinite}
.fam-token:active{cursor:grabbing;animation:none}
.fam-grip{font-size:15px;opacity:.85;letter-spacing:-2px}
.fam-seta{font-size:17px;font-weight:700}
@keyframes bobtoken{50%{transform:translateX(5px)}}
.fam-ghost{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:10002;opacity:.92;box-shadow:var(--sh-h)}
.fam-board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fam-col-h{font-size:12px;font-weight:600;text-align:center;padding:4px 0 7px;border-bottom:2px solid var(--line);margin-bottom:8px;color:var(--ink)}
.fam-col-h.mix{color:var(--vinho);border-bottom-color:var(--vinho)}
.fam-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin-bottom:8px;cursor:pointer;transition:var(--tr)}
.fam-card:hover{border-color:var(--ink2);background:#fff}
.fam-card.atual{border:2px solid var(--vinho);background:var(--vinho-l)}
.fam-card.hot{border:2px dashed var(--vinho);background:var(--vinho-l)}
.fam-card-h{display:flex;align-items:center;justify-content:space-between;gap:4px}
.fam-card-r{display:inline-flex;align-items:center;gap:5px}
.fam-eye{border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;padding:5px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  line-height:0;width:34px;height:34px;flex-shrink:0}
.fam-eye:hover{background:var(--vinho-l);border-color:var(--vinho);color:var(--vinho);transform:none}
.fam-code{font-weight:600;font-size:12.5px;color:var(--ink)}
.fam-atual{font-size:10px;color:var(--vinho);font-weight:600}
.fam-refs{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.fam-refs span{min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;background:#fff;border:1px solid var(--line);border-radius:5px;font-size:11.5px;color:var(--ink2)}
.fam-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.fam-acao{background:var(--vinho-l);color:var(--vinho);border:1px solid #E8CDD2;border-radius:var(--r-sm);padding:8px 14px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:500}
.fam-acao:hover{background:var(--vinho);color:#fff}
.fam-membros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-top:6px}
.fam-membro{display:flex;gap:9px;align-items:center;width:100%;text-align:left;font-family:inherit;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px;cursor:pointer;transition:var(--tr)}
.fam-membro:hover{border-color:var(--vinho);background:var(--vinho-l)}
.fam-membro img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:6px;border:1px solid var(--line);flex-shrink:0}
.fam-noimg{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--mut2);border:1px dashed var(--line);border-radius:6px;flex-shrink:0}
.fam-membro b{display:block;font-size:13px;color:var(--ink)}
.fam-membro span{font-size:11.5px;color:var(--mut)}
.fam-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 20px;border-radius:var(--r-sm);font-size:13.5px;z-index:10003;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:var(--sh-h)}
.fam-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes pulsa{50%{opacity:.55}}
/* foto cancelada continua clara o suficiente; movs (excluir/reativar) sempre 100% */
.produto.cancelado .movs{opacity:1}
.produto.cancelado .movs button.ok{background:var(--ok-l);color:var(--ok);font-weight:600}
/* lightbox com zoom/pan (scroll = zoom, arrastar = mover, full-res) */
.lbox-frame{position:relative;display:inline-block;line-height:0}
.lbox-img{display:block;cursor:zoom-in;transform-origin:center;will-change:transform}
.lbox-img:active{cursor:grabbing}
.lbox-dica{position:fixed;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:12px;opacity:.7;pointer-events:none}
.lbox-x{position:absolute;top:-13px;right:-13px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:var(--ink);color:#fff;font-size:19px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.45);transition:var(--tr)}
.lbox-x:hover{background:var(--vinho)}
/* destaque do produto recém-criado/editado */
.flash-novo{animation:flashnovo 1.8s ease}
@keyframes flashnovo{0%,45%{box-shadow:0 0 0 3px var(--vinho)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
/* seletor de qtd por página */
.perpage-l{font-size:12px;color:var(--ink2);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.perpage-l select{padding:5px 7px;font-size:12.5px}
.busca2{flex:0 1 210px;min-width:140px}
.ir-fim{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:0;font-size:22px;line-height:1;cursor:pointer;z-index:200;box-shadow:var(--sh-h);display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.ir-fim:hover{background:#000;transform:translateY(-2px)}
.movs{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.movs button{background:#F4F1EE;color:var(--ink2);padding:8px 11px;font-size:13px}
.movs button:hover{background:#EBE7E2;transform:none}
.movs button.warn{background:#fff;color:var(--vinho);border:1px solid #E8CDD2}
.movs button.warn:hover{background:var(--vinho);color:#fff}
.movs button.ok{background:var(--ok-l);color:var(--ok)}
.troca-sel{font-size:12px;padding:8px;max-width:160px}

.flags{background:var(--amarelo);border:1px solid var(--amarelo-b);border-radius:var(--r-sm);
  padding:10px 13px;font-size:12.5px;color:#806A2C;margin-bottom:15px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:13px;margin-bottom:16px}
.grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:500;color:var(--mut)}
.grid label.wide{grid-column:span 2}
.grid input{font-size:13.5px;padding:9px 11px}

table.cores{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:14px;table-layout:fixed}
.cores th{font-size:10.5px;font-weight:600;color:var(--mut);text-align:left;padding:0 8px 6px;letter-spacing:.2px}
.cores td{padding:0 6px 8px;vertical-align:top}
.cores textarea,.cores input{width:100%;font-size:13px;padding:9px}
.cores .num{text-align:right}
.cores th.cmat,.cores td.cmat{width:24%}
.cores th.ctrim,.cores td.ctrim{width:22%}
.cores th.ccor,.cores td.ccor{width:16%}
.cores th.cnum,.cores td.cnum{width:13%}
.cores th.cdel,.cores td.cdel{width:5%}
.del{background:#fff;color:var(--vinho);border:1px solid #E8CDD2;padding:9px 12px;width:100%}
.del:hover{background:var(--vinho);color:#fff;transform:none}
.prow{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.addcor{background:var(--vinho-l);color:var(--vinho);font-weight:500}
.addcor:hover{background:var(--vinho);color:#fff;transform:none}

.coment-ped{display:block;margin-top:14px;font-size:11px;font-weight:500;color:var(--mut)}
.coment-ped span{font-weight:400;color:var(--mut2)}
.coment-ped textarea{display:block;width:100%;margin-top:6px;font-size:13.5px;padding:10px;color:var(--ink)}
.coment{margin-top:12px;font-size:12.5px;color:var(--ink2)}
.coment summary{cursor:pointer;color:var(--vinho);font-size:11px;font-weight:500;list-style:none}
.coment summary::-webkit-details-marker{display:none}
.coment summary::before{content:'▸ ';color:var(--mut2)}
.coment[open] summary::before{content:'▾ '}
.coment p{background:#FBFAF9;border-left:2.5px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:11px 14px;margin:9px 0 0;line-height:1.65;color:var(--ink2)}

/* ===== combo do app ===== */
.combo-pop{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  max-height:280px;overflow-y:auto;z-index:9999;box-shadow:var(--sh-h);padding:4px}
.combo-opt{padding:9px 11px;font-size:13px;cursor:pointer;border-radius:6px;white-space:nowrap;transition:background .1s}
.combo-opt:hover{background:var(--vinho-l);color:var(--vinho)}

/* ===== lightbox da foto ===== */
.lbox{position:fixed;inset:0;background:rgba(25,20,18,.86);display:flex;align-items:center;justify-content:center;
  z-index:9999;cursor:zoom-out;padding:40px;overflow:hidden;overscroll-behavior:contain;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lbox img{max-width:92vw;max-height:92vh;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ===== importar / placeholder ===== */
.drop{border:1.5px dashed var(--mut2);border-radius:var(--r);padding:34px 22px;text-align:center;background:#FBFAF9}
.drop-hint{font-size:12.5px;color:var(--mut);margin:0 0 14px}
.placeholder{background:#fff;border:1.5px dashed var(--line);border-radius:var(--r);padding:48px;text-align:center;color:var(--mut)}
.placeholder .big{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}

/* ===== fotos do comentário do pedido ===== */
.ped-fotos{display:flex;gap:10px;margin-top:10px;align-items:flex-start;flex-wrap:wrap}
.ped-foto-slot{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:68px;min-height:68px}
.ped-foto-add{width:68px;height:68px;border:1.5px dashed var(--mut2);border-radius:var(--r-sm);
  background:#FBFAF9;color:var(--mut2);font-size:22px;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;transition:var(--tr);transform:none}
.ped-foto-add:hover{border-color:var(--vinho);color:var(--vinho);background:var(--vinho-l);transform:none}
.ped-img{height:84px;width:84px;object-fit:contain;background:#FAF8F6;border-radius:var(--r-sm);border:1px solid var(--line);display:block}
.ped-foto-del{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:14px;line-height:1;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
  box-shadow:var(--sh);transition:var(--tr);transform:none}
.ped-foto-del:hover{background:var(--vinho);transform:none}

@media(max-width:640px){
  .main{padding:18px;margin-left:0}
  .nav{width:100%;height:auto;position:static;padding:14px 0}
  body.com-nav .main{margin-left:0}
  .grid{grid-template-columns:1fr 1fr}
}