:root{
      --bg:#f5f7fb; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#e5e7eb;
      --blue:#2563eb; --blue2:#1d4ed8; --shadow:0 10px 30px rgba(2,8,23,.08);
      --radius:16px; --danger:#dc2626; --danger2:#b91c1c;
      --rowGreen: rgba(34,197,94,.08);
      --rowYellow: rgba(250,204,21,.10);
      --rowRed: rgba(239,68,68,.10);
      --rowBlue: rgba(37,99,235,.10);
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:var(--bg);color:var(--text)}
    .wrap{max-width:1600px;margin:18px auto;padding:0 18px}
    .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap}
    .topbar{position:sticky;top:0;z-index:50;padding:10px 0;background:rgba(245,247,251,.86);backdrop-filter: blur(10px)}
    .topbar.scrolled{box-shadow:0 10px 30px rgba(2,8,23,.10)}

    /* Micro-interações (ícones topo) */
    .iconBtn{transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease}
    .iconBtn:active{transform:scale(.96)}
    .iconBtn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
    .iconBadge.bump{animation:bump .25s ease}
    @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

    .brand{display:flex;align-items:center;gap:16px;min-width:280px}
    .logo{width:148px;height:88px;object-fit:contain}
    .brandLogoLink{display:inline-flex;align-items:center;}
    .title h1{margin:0;font-size:26px;letter-spacing:-.3px}
    .title p{margin:4px 0 0;color:var(--muted);font-size:13px}

    .userBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .clientPill{display:inline-flex;align-items:center;gap:10px;background:#ffffffb3;border:1px solid var(--line);backdrop-filter: blur(8px);padding:10px 12px;border-radius:999px;color:#0f172a;font-size:13px;min-height:44px;overflow:visible}
#clientName{display:block;flex:1;min-width:0;line-height:1.25;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .clientDot{width:8px;height:8px;border-radius:50%;background:#22c55e}

    .btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:700}
    .btn:disabled{opacity:.55;cursor:not-allowed}
    .btnPrimary{background:var(--blue);border-color:var(--blue);color:#fff}
    .btnPrimary:hover{background:var(--blue2)}
	    /* Loading state on action buttons (order send) */
	    .btnLoading{position:relative;pointer-events:none;}
	    .btnLoading .btnSpin{display:inline-block;vertical-align:-3px;margin-left:8px;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:btnSpin 0.8s linear infinite;}
	    .btnSpin{display:none;}
	    @keyframes btnSpin{to{transform:rotate(360deg)}}
    .btnGhost:hover{background:#f8fafc}
    .btnDanger{background:var(--danger);border-color:var(--danger);color:#fff}
    .btnDanger:hover{background:var(--danger2)}
    .btnSm{padding:8px 10px;border-radius:10px;font-weight:700}


    /* ===== BANHOAZIS: cliente selecionado no carrinho (mais ênfase) ===== */
    #bzClientChosen{font-weight:900;color:#0f172a;font-size:14px;line-height:1.25}
    #bzClientChosen.bzChosenActive{
      background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;
      padding:10px 12px;border-radius:12px;
      display:flex;align-items:center;gap:10px
    }
    #bzClientChosen.bzChosenActive::before{
      content:"✓";
      width:22px;height:22px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:#1d4ed8;color:#fff;font-weight:900;font-size:12px;
      flex:0 0 auto;
    }
    #bzClientChosenMeta{color:#475569}


    /* --- UX tweaks (requested) --- */
    /* Login/Registo switch buttons */
    #authToLogin, #authToRegister{background:#fff;border-color:var(--line);color:#0f172a}
    #authToLogin:hover, #authToRegister:hover{background:#f8fafc}
    #authToLogin.isActive, #authToRegister.isActive{background:var(--blue);border-color:var(--blue);color:#fff}
    #authToLogin.isActive:hover, #authToRegister.isActive:hover{background:var(--blue2)}

    /* Tab selected state: clearer highlight */
    .tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
    .tab.active:hover{background:var(--blue2)}

    /* Cart badge: when has items, use blue instead of black */
    .badge.hasItems{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}

    /* Orders history: 'Ver detalhes' button with same blue as primary */
    .btnOrderDetails{background:var(--blue);border-color:var(--blue);color:#fff}
    .btnOrderDetails:hover{background:var(--blue2)}

    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .controls{padding:14px}

/* ===== Dock de filtros (sticky entre cabeçalho e legendas) ===== */
.filtersDock{
  position: sticky;
  top: calc(var(--topbarH, 72px) + 10px);
  /* abaixo do cabeçalho, sem tapar as colunas/linhas: sticky mantém o layout em fluxo */
  z-index: 25;

  margin-bottom: var(--dockGap, 14px);
}
:root{--dockGap:14px}

.filtersDockPlaceholder{height:0}
/* Fallback robusto (quando sticky falha): fixa sem sobrepor a tabela (usa placeholder) */
.filtersDock.docked{
  position: fixed;
  top: calc(var(--topbarH, 72px) + 10px);
  left: var(--dockLeft, 0px);
  width: var(--dockWidth, 100%);
  z-index: 60;
}
.filtersDock.docked{box-shadow:0 10px 30px rgba(2,8,23,.10)}
.filtersDockPlaceholder.docked{height: calc(var(--dockH, 0px) + var(--dockGap, 14px));}


.filtersHeadRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 0;
  flex-wrap:wrap;
}
.filtersHeadRow .btn{border-radius:14px}
.filtersHeadRow .famQuick{
  flex:1;
  min-width: 280px;
}

    .grid{display:grid;grid-template-columns: 2.1fr 1fr 1fr .8fr 1.1fr .6fr .6fr;gap:10px;align-items:end}
    /* Botões de filtros: encostar ao máximo à direita (até ao limite do container) */
    .gridActions{display:flex;gap:10px;align-items:end;justify-content:flex-end;grid-column:1/-1;width:100%}
    .stockLegend{margin-top:12px;margin-left:16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
    .stockLegendItem{display:flex;align-items:center;gap:8px;font-size:13px;color:#334155;font-weight:800}
    .stockLegendDot{width:12px;height:12px;border-radius:4px;border:1px solid rgba(15,23,42,.16)}
    .dotGreen{background:#22c55e}
    .dotYellow{background:#facc15}
    .dotRed{background:#ef4444}
    .dotBlue{background:#2563eb}

    label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px}
    input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;outline:none;background:#fff}
    input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
    textarea{min-height:108px;resize:vertical}
    .meta{padding:0 14px 12px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .pager{display:flex;align-items:center;gap:8px}
    .sortHint{font-size:11px;color:#64748b;margin-left:6px}

    .tabs{display:flex;gap:10px;align-items:center;margin:12px 0 14px}
    .tab{
      border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 14px;
      font-weight:800; cursor:pointer; display:inline-flex; gap:10px; align-items:center;
    }
    .tab svg{width:18px;height:18px;display:block}
    .tab.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
    .badge{background:#0f172a;color:#fff;border-radius:999px;padding:2px 8px;font-size:12px}

    .tableWrap{border-top:1px solid var(--line);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    table{width:100%;border-collapse:separate;border-spacing:0;max-width:100%}
    /* ===== STOCK: adaptar larguras sem forcar scroll em ecras grandes ===== */
    #panelStock .tableWrap{width:100%}
    #panelStock table{table-layout:fixed}
    #panelStock th, #panelStock td{overflow:hidden;text-overflow:ellipsis}
    /* Sem reticências na descrição e no favorito */
    #panelStock td.colDesc, #panelStock th.colDesc{overflow:visible;text-overflow:clip;white-space:normal}
    #panelStock td.colFav, #panelStock th.colFav{overflow:visible;text-overflow:clip}
    #panelStock td.colEan, #panelStock th.colEan{overflow:visible;text-overflow:clip;white-space:nowrap}
    #panelStock td:last-child, #panelStock th:last-child{overflow:visible;text-overflow:clip}
    .cartTable td:nth-child(4), .cartTable th:nth-child(4){overflow:visible;text-overflow:clip;white-space:nowrap}
    .cartChildRow{background:#f8fafc}
    .cartChildRow td:first-child{padding-left:32px;position:relative}
    .cartChildRow td:first-child::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;border-left:2px solid #cbd5e1}
    .childRefWrap{display:flex;align-items:center;gap:8px}
    .childArrow{font-weight:900;color:#0ea5e9}
    .orderChildRow{background:#f8fafc}
    .orderChildRow td:first-child{padding-left:32px;position:relative}
    .orderChildRow td:first-child::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;border-left:2px solid #cbd5e1}

    thead th{position:sticky;top:0;background:#fbfdff;border-bottom:1px solid var(--line);text-align:left;font-size:12px;color:#475569;padding:12px 14px;cursor:pointer;user-select:none}
    tbody td{border-bottom:1px solid var(--line);padding:12px 14px;font-size:13px;vertical-align:top}
    tbody tr:hover{background:#f8fafc}
    tbody tr.stock-green{background:var(--rowGreen)}
    tbody tr.stock-yellow{background:var(--rowYellow)}
    tbody tr.stock-red{background:var(--rowRed)}
    tbody tr.stock-blue{background:var(--rowBlue)}
    .num{text-align:right;font-variant-numeric:tabular-nums}
    .muted{color:var(--muted)}
    .hintLine{font-size:12px}
    .actionsCell{white-space:nowrap;text-align:right}
    .actionsCell .actionWrap{display:inline-flex;align-items:center;gap:8px}
    .xRemoveBtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900;line-height:1}
    .xRemoveBtn{border:1px solid #fecaca;background:#fff;color:#b91c1c}
    .xRemoveBtn:hover{background:#fef2f2}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .qtyInput{width:86px;text-align:center;font-weight:800}
    .rowBtn{padding:8px 10px;border-radius:999px}

    /* ===== Suggestions (Conta) ===== */
    .acctToggleBtn{width:34px;height:34px;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-weight:950}
    .acctTblWrap{border:1px solid var(--line);border-radius:14px;overflow:auto}
    .acctTbl{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
    .acctTbl thead th{position:sticky;top:0;background:#fbfdff;border-bottom:1px solid var(--line);font-size:12px;color:#475569;padding:10px 12px;cursor:default}
    .acctTbl tbody td{border-bottom:1px solid var(--line);padding:10px 12px;font-size:13px;vertical-align:middle}
    .acctTbl tbody tr:last-child td{border-bottom:0}
    .acctTbl .num{text-align:right;font-variant-numeric:tabular-nums}
    .acctTbl .act{white-space:nowrap;text-align:right}
    .acctTbl .desc{max-width:none;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.25}
    /* Mobile: evitar overflow na Conta (Sugestões/Avisos/Histórico) */
    .accountGrid, .accountGrid > *{min-width:0}
    #panelAccount .fullRow{max-width:100%;overflow:hidden}

    @media (max-width: 620px){
      /* Conta (Sugestões): manter dentro do card e permitir scroll horizontal (sem esmagar/overlap de colunas) */
      #panelAccount .acctTblWrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
      #panelAccount .acctTbl{min-width:720px;width:720px;table-layout:auto}
      #panelAccount .acctTbl th, #panelAccount .acctTbl td{white-space:nowrap}
      #panelAccount .acctTbl .desc{white-space:normal}
      #panelAccount .acctTbl .act{white-space:nowrap}
    }

    #acctSuggestTop{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .acctTblWrap{max-width:100%}
    .accountGrid h3{font-size:15px}

    .secTitle{margin:0 0 4px;font-weight:800;font-size:15px}
    .secSub{font-size:12px;color:var(--muted);margin:0}

    /* Mobile: tornar sugestões/histórico mais responsivos */
    @media (max-width: 520px){
      /* Histórico: permitir scroll sem forçar min-width */
      #ordersHistoryTableWrap table{min-width:0 !important}
    }


    .suggestTabs{display:flex;gap:8px;flex-wrap:wrap}
    .pillTab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px;cursor:pointer}
    .pillTab.active{border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
    .suggestList{display:flex;gap:10px;flex-wrap:wrap}
    .suggestChip{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .suggestChip .ref{font-weight:950;letter-spacing:.2px}
    .suggestChip .meta{padding:0;margin:0;font-size:11px;color:var(--muted)}
    .suggestChip .openBtn{padding:7px 10px;border-radius:999px}
    .suggestChip .rmBtn{width:34px;height:34px}

    /* ===== Stock inline qty + actions (single line) ===== */
    #panelStock .actionsCell .actionWrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap}
    #panelStock .actionsCell .rowBtn{padding:8px 10px;font-size:12px;line-height:1}
    #panelStock .actionsCell .iconBtn{width:40px;height:40px;border-radius:999px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
    #panelStock .actionsCell .iconBtn.on{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;font-weight:900}
    #panelStock tr.compareOn{outline:2px solid #2563eb;outline-offset:-2px}

    .qtyInline{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .qtyBtn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:950;font-size:18px;line-height:1}
    .qtyBtn:hover{background:#f8fafc}
    .qtyInp{width:52px;min-width:52px;text-align:center;font-weight:950;color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:6px 6px;font-size:16px}

    @media (max-width: 480px){
      #panelStock .actionsCell .actionWrap{gap:6px}
      #panelStock .actionsCell .rowBtn{font-size:11px;padding:7px 9px}
      #panelStock .actionsCell .iconBtn{width:38px;height:38px;font-size:15px}
      .qtyBtn{width:32px;height:32px;font-size:17px}
      .qtyInp{width:48px;min-width:48px;font-size:16px}
    }


    .panel{display:none}
    .panel.show{display:block}
    /* --- VIEW SWITCH (robusto): garante que só um painel fica visível --- */
    body[data-view="stock"] #panelCart,
    body[data-view="stock"] #panelAccount{display:none !important;}
    body[data-view="cart"] #panelStock,
    body[data-view="cart"] #panelAccount{display:none !important;}
    body[data-view="account"] #panelStock,
    body[data-view="account"] #panelCart{display:none !important;}


    .overlay{position:fixed;inset:0;background:rgba(15,23,42,.38);display:none;align-items:center;justify-content:center;padding:18px;z-index:70}
    .overlay.show{display:flex}
    .loaderCard{width:min(560px, 92vw);background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
    .loaderTitle{font-weight:900;margin:0 0 6px}
    .loaderText{margin:0 0 12px;color:var(--muted);font-size:13px}
    .bar{height:10px;background:#eef2ff;border-radius:999px;overflow:hidden;border:1px solid #e5e7eb}
    .bar > div{height:100%;width:35%;background:linear-gradient(90deg,#2563eb,#60a5fa);animation:move 1s infinite ease-in-out}
    @keyframes move{0%{transform:translateX(-60%)}100%{transform:translateX(220%)}}

    #appShell{display:none}

    .authOverlay{
      position:fixed; inset:0; background:rgba(15,23,42,.55);
      display:none; align-items:center; justify-content:center; padding:18px; z-index:90;
    }
    .authOverlay.show{display:flex}

    .authCard{width:min(900px,92vw);background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
    .authHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
    .authHeader h2{margin:0;font-size:18px}
    .authHeader p{margin:3px 0 0;color:var(--muted);font-size:13px}
    .authSwitch{display:flex;gap:8px}
    .authSwitch .btn{padding:8px 12px;border-radius:999px;font-weight:900}
    .authGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
    .authFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
    .link{color:#2563eb;text-decoration:none;font-weight:800;cursor:pointer}
    .link:hover{text-decoration:underline}
    .pwWrap{position:relative}
    .pwWrap input{padding-right:44px}
    .eyeBtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:#64748b}

    /* Tenta remover ícones nativos de revelar password (Edge/alguns browsers) */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear{display:none}
    .authErr{margin-top:10px;font-size:13px;color:#b91c1c;font-weight:800}

    .modalOverlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:95}
    .modalOverlay.show{display:flex}
    .modalCard{width:min(720px,92vw);background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);padding:16px}
    .modalTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .modalTop h3{margin:0;font-size:16px}
    .modalTop p{margin:4px 0 0;color:var(--muted);font-size:13px}
    .modalX{border:0;background:transparent;cursor:pointer;font-size:20px;color:#64748b}
    .modalBtns{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
    .infoBox{
      margin-top:10px; padding:10px 12px; border-radius:12px;
      border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; font-size:13px;
    }

    .cartCard{padding:14px}
    .cartTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
    .cartTop h2{margin:0;font-size:16px}
    .cartTop p{margin:4px 0 0;color:var(--muted);font-size:13px}
    .cartSummary{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .cartTable th{cursor:default}
    .miniNote{color:#94a3b8;font-size:12px;margin-top:8px}
    .attachRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .attachPill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff}
    .attachPill button{border:0;background:transparent;cursor:pointer;color:#64748b;font-weight:900}

    .accountCard{padding:14px}
    .accountGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
    
    /* Conta: campos editáveis (lápis) */
    .accEditable{display:flex;align-items:center;gap:8px}
    .editMini{border:1px solid var(--line);background:#fff;color:#0f172a;padding:6px 10px;border-radius:10px;min-width:36px}
    .editMini:hover{background:#f8fafc;border-color:#cbd5e1}
/* Em desktop, algumas secções devem ocupar toda a largura (ex.: Sugestões) */
    .accountGrid .fullRow{grid-column:1 / -1}

    /* Separador visual entre blocos (span total) */
    .accountGrid .hr{grid-column:1 / -1;height:1px;background:var(--line);border:0;margin:0}
    .box{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
    .box h3{margin:0 0 8px;font-size:14px}
    .kv{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;font-size:13px}
    .kv div:nth-child(odd){color:#64748b}
    .emailRow{display:flex;gap:8px;align-items:center}
    .emailRow input{flex:1}
    .chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;margin:6px 6px 0 0;background:#fff}
    .chip button{border:0;background:transparent;cursor:pointer;color:#64748b;font-weight:900}

    .chk{display:flex;align-items:center;gap:8px;margin-bottom:2px}
    .chk input{width:auto}
    .chkTight{margin-top:22px;margin-bottom:0}

    
    .filtersChecksRow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-top:6px;margin-bottom:6px;grid-column:1/6}
    .pageSizeBox{grid-column:6/-1}
    .chkCol{display:flex;flex-direction:column;gap:4px}
    @media (max-width: 620px){ .filtersChecksRow{gap:12px} }
.greenFilterBox{
      border:1px solid var(--line);
      background:#f8fafc;
      border-radius:14px;
      padding:10px 12px;
      display:flex;
      flex-direction:column;
      gap:4px;
      align-self:stretch;
      justify-content:center;
    }

    @media (max-width: 980px){
      .grid{grid-template-columns: 1.7fr 1fr 1fr 1fr; }
      .grid .span2{grid-column:span 2}
      .grid .span4{grid-column:span 4}
      .gridActions{grid-column:1/-1;justify-content:flex-end}
      .authGrid{grid-template-columns:1fr}
      .accountGrid{grid-template-columns:1fr}
      .logo{width:132px;height:78px}
    }
    @media (max-width: 620px){
      /* App-like mobile shell */

      /* Auth header: stack title + switch cleanly on mobile */
      .authHeader{flex-direction:column;align-items:stretch}
      .authSwitch{width:100%}
      .authSwitch .btn{flex:1;justify-content:center}

      body{background:#f1f5f9}
      .wrap{max-width:none;margin:0;padding:0}
      #appShell{min-height:100vh}
      .topbar{position:sticky;top:0;z-index:30;background:rgba(241,245,249,.92);backdrop-filter: blur(10px);
        padding:10px 12px;border-bottom:1px solid var(--line);margin:0;gap:10px}
      .brand{min-width:0;gap:10px}
      .logo{width:96px;height:54px}
      .title h1{font-size:18px}
      .title p{display:none}
      .userBar{width:100%;justify-content:space-between}
      .clientPill{max-width:100%;min-height:46px;display:inline-flex;align-items:center;padding:10px 12px;overflow:visible}
      #clientName{line-height:1.3;padding:3px 0}
      #logoutBtn{padding:10px 12px}

      /* Tabs as bottom navigation */
      .tabs{
        position:fixed;left:0;right:0;bottom:0;z-index:40;
        margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background:rgba(255,255,255,.92);backdrop-filter: blur(10px);
        border-top:1px solid var(--line);
        justify-content:space-between;
      }
      .tab{flex:1;justify-content:center;padding:12px 10px;font-size:13px}
      .tab + .tab{margin-left:10px}
      .badge{font-size:12px}

      /* Give space for bottom tabs */
      .panel{padding:12px 12px calc(90px + env(safe-area-inset-bottom, 0px))}
      .card{border-radius:16px;box-shadow:var(--shadow)}
      .controls{padding:12px}

      /* Filters grid tuning */
      .grid{grid-template-columns:1fr 1fr; gap:10px}
      .grid .span2{grid-column:1/-1}
      label{font-size:12px}
      input,select,textarea{padding:12px 12px;border-radius:14px;font-size:15px}
      #cor{min-width:0}

      /* Actions row: stack nicely */
      .gridActions{grid-column:1/-1;justify-content:flex-end;gap:10px;flex-wrap:wrap}
      .gridActions .btn{flex:1;min-width:140px}
      .gridActions .btnSm{flex:0 0 auto}

      /* Table: make it usable on mobile */
      .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
      table{min-width:860px}
      thead th, tbody td{padding:10px 12px;font-size:13px}

      /* STOCK (mobile): evitar coluna Descrição a colapsar (texto por letra) */
      #panelStock table{table-layout:auto;min-width:920px}
      #panelStock th.colFav, #panelStock td.colFav{width:52px !important}
      #panelStock th[data-sort="ref"]{width:120px !important}
      #panelStock th.num[data-sort="stock"]{width:70px !important}
      #panelStock th.colEan[data-sort="ean"]{width:130px !important}
      #panelStock th[data-sort="semana"]{width:120px !important}
      #panelStock th:last-child{width:160px !important}
      #panelStock th.colDesc, #panelStock td.colDesc{min-width:260px !important}
      #panelStock td.colDesc .descText{white-space:normal;overflow-wrap:break-word;word-break:normal}
      /* Pager/Meta compact */
      .meta{padding:8px 12px 10px;font-size:12px;gap:10px;flex-wrap:wrap}
      .pager{width:100%;justify-content:space-between}

      /* Stock actions: make buttons app-like and prevent overflow */
      #panelStock .gridActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
      #panelStock .gridActions .btn{width:100%;white-space:normal;line-height:1.1;padding:12px 10px;font-size:14px}
      #panelStock .gridActions .btn.btnPrimary{min-height:44px}

      /* Header: client name pill should not overflow */
      .clientPill{max-width:100%}
      #clientName{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}

      /* Info modal: allow full content on mobile */
      .infoModal{width:min(96vw,520px);max-height:88vh}
      .infoBody{max-height:calc(88vh - 110px);overflow:auto}
      .infoBodyGrid{grid-template-columns:1fr;gap:12px}
      .techLegend{width:100%;margin-top:6px}

      /* Orders history: keep Actions column visible on mobile */
      #ordersHistoryBox table th, #ordersHistoryBox table td{white-space:nowrap}
      #panelAccount .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

      /* General: long labels wrap instead of spilling */
      .btn{word-break:break-word}



      /* Auth (mobile): align login/reg buttons */
      .authHeader{flex-direction:column;align-items:stretch}
      .authSwitch{width:100%}
      .authSwitch .btn{flex:1;justify-content:center}

      /* Topbar: avoid client name being visually cut */
      .clientPill{min-height:38px}
      #clientName{line-height:1.2;padding-top:1px}

      /* Em mobile, alguns browsers mostram um ícone nativo de revelar password.
         Para evitar duplicação, escondemos o nosso botão custom no mobile. */
      .pwWrap .eyeBtn{display:none}

    }

    @media (max-width: 420px){
      .tab{font-size:12px;padding:11px 8px}
      .grid{grid-template-columns:1fr}
      .gridActions .btn{min-width:0}
      table{min-width:780px}
    }
    /* LOGIN watermark */
    .authOverlay::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:url("https://i.ibb.co/Y7qM44q1/LOGO-BANHOAZIS-PRETO-AZUL-AQUABATH.png");
      background-repeat:no-repeat;
      background-position:center;
      background-size:70vw auto;
      opacity:0.08;
      pointer-events:none;
    }
  
  /* Info modal + icon */
  .descCell{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:8px;min-width:0}
  .descText{min-width:0;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.25;overflow-wrap:break-word;word-break:normal}
  .infoBtn{align-self:start}
  .infoBtn{flex:0 0 auto;width:18px;height:18px;border-radius:999px;border:1px solid #cbd5e1;background:#eef2ff;color:#1d4ed8;font-weight:800;font-size:12px;line-height:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .infoBtn:hover{background:#e0e7ff}
  .infoOverlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:18px}
  .conjOverlay{z-index:9998}
  .infoOverlay.open{display:flex}
  .infoModal{width:min(860px,94vw);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(2,6,23,.35);overflow:hidden;border:1px solid #e5e7eb}
  .infoModalHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8fafc;border-bottom:1px solid #e5e7eb}
  .infoModalHeader h3{margin:0;font-size:15px;color:#0f172a}
  .infoClose{border:0;background:transparent;font-size:22px;line-height:1;color:#475569;cursor:pointer;padding:4px 8px}
  .infoBody{padding:14px 16px}
  .infoGrid{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;font-size:13px}
    .infoBodyGrid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
  .infoLeft{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;min-width:0}
  .infoPairs{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;align-items:start;min-width:0}
  .infoModules{min-width:0}
  .infoModules [data-info-compostos="1"]{margin-top:0}
  @media (max-width: 860px){
    .infoBodyGrid{grid-template-columns:1fr;}
    .infoLeft{grid-template-columns:1fr;}
    .techWrap{order:3}
  }

  .techWrap{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .techLegend{margin-top:8px;font-size:12px;color:#64748b;display:grid;gap:4px;width:100%}
  .techLegend .k{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;border-radius:6px;background:#eef2ff;color:#1d4ed8;font-weight:900;font-size:12px;margin-right:6px}
.infoLabel{color:#64748b}
  .infoValue{color:#0f172a;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .infoFooter{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid #e5e7eb;background:#fff}


    /* ===== Header icon actions (requested) ===== */
    .topActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .iconBtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative}
    .iconBtn:hover{background:#f8fafc}
    .iconBtn svg{width:20px;height:20px;display:block}
    .iconBtn.active{background:#eff6ff;border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(37,99,235,.10);color:#1d4ed8}
    .iconBadge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:#0f172a;color:#fff;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:2px solid #fff}
    .iconBadge.hasItems{background:#dbeafe;color:#1d4ed8;border-color:#fff}

    /* ===== ACCOUNT: tabelas compactas (Sugestoes / Historico) ===== */
    .acctTableWrap{border:1px solid var(--line);border-radius:14px;overflow:auto;background:#fff}
    .acctTable{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}
    .acctTable th{position:sticky;top:0;background:#f8fafc;font-size:12px;color:#334155;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
    .acctTable td{padding:10px 12px;border-bottom:1px solid #eef2f7;vertical-align:middle}
    .acctTable tr:last-child td{border-bottom:none}
    .acctToggleBtn{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
    .acctXBtn{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900}

    /* ===== Footer (requested) ===== */
    .footer{display:none;margin-top:18px;padding:18px 0;border-top:1px solid var(--line);color:var(--text)}
    .footerInner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;align-items:start;padding:0 18px}
    .footer h3{margin:0 0 8px;font-size:14px}
    .footer p{margin:0 0 6px;color:var(--muted);font-size:13px;line-height:1.4}
    .hours{width:100%;border-collapse:collapse;font-size:13px}
    .hours td{padding:4px 0;color:#334155;border-bottom:1px dashed #e5e7eb}
    .hours td:first-child{color:#64748b;width:120px}
    .footer a{color:#2563eb;text-decoration:none;font-weight:800}
    .footer a:hover{text-decoration:underline}

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

    /* ===== SUGESTOES PESQUISA (ponto 5) ===== */
    .suggestWrap{position:relative}
    .suggestBox{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-top:6px;max-height:260px;overflow:auto}
    .suggestItem{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
    .suggestItem:hover,.suggestItem.active{background:rgba(37,99,235,.08)}
    .suggestMain{min-width:0;flex:1}
    .suggestTitle{font-weight:800;font-size:13px;line-height:1.2}
    .suggestMeta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .suggestTag{font-size:11px;border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--muted);flex:0 0 auto}
    .suggestEmpty{padding:10px 12px;color:var(--muted);font-size:13px}

    
  
/* === MOBILE FIXES: prevent horizontal overflow in footer (horário) === */
body{overflow-x:hidden}
.footer, .footer *{max-width:100%}
.hours{width:100%; table-layout:fixed}
.hours td{white-space:normal; word-break:break-word}
.hours td:first-child{width:auto}

/* Reduce dashed line visual weight on small screens */
@media (max-width: 620px){
  .hours td{border-bottom:1px dashed #e5e7eb}
}


/* mobile-hours-fix */
@media (max-width: 768px){
  .horario, .hours, .schedule {
    border-style: dashed;
    border-width: 1px;
  }
  .horario hr, .hours hr, .schedule hr {
    border-top: 1px dashed rgba(0,0,0,.25);
    margin: 4px 0;
  }
}


/* === UX: Logout afastado dos ícones (desktop+mobile) === */
#logoutBtn{margin-left:12px}

/* === FAVORITOS (UI) === */
.favBtn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;line-height:1;font-size:16px;
}
.favBtn:hover{background:#f8fafc}
.favBtn.on{background:#fff7ed;border-color:#fed7aa}
.favBtn .star{transform:translateY(-1px)}

/* === MOBILE: reduzir “tracejado” do horário (linhas muito grandes) === */
@media (max-width: 620px){
  .hours td{
    border-bottom:1px dotted rgba(148,163,184,.65);
    padding:3px 0;
  }
}


/* === MOBILE: HORÁRIO sem caixa e sem overflow === */
@media (max-width: 620px){
  .horario, .hours, .schedule{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .footer{overflow-x:hidden}
  .hours{
    width:100% !important;
    max-width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
  }
  .hours td{
    border-bottom:1px dotted rgba(148,163,184,.65) !important;
    padding:4px 6px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* === Logout sempre à direita === */
.top-actions{display:flex;align-items:center;gap:10px}
#logoutBtn{margin-left:auto !important}


/* === MOBILE: HORÁRIO com 2 colunas visíveis e sem overflow === */
@media (max-width: 620px){
  .footer{overflow-x:hidden}
  .hours{width:100% !important;max-width:100% !important;table-layout:fixed !important;border-collapse:collapse !important}
  .hours tr{max-width:100%}
  .hours td{padding:4px 6px !important;border-bottom:1px dotted rgba(148,163,184,.65) !important;vertical-align:top}
  .hours td:nth-child(1){
    width:34% !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hours td:nth-child(2){
    width:66% !important;
    white-space:normal !important;
    overflow-wrap:break-word;
    word-break:normal;
  }
}


/* === FIX: topActions layout (logout hard-right) === */
.topActions{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
#logoutBtn{margin-left:auto !important;}
/* === FIX: hours typography consistency on mobile === */
@media (max-width: 640px){
  .infoFooter .hoursTable td{font-size:12px;font-weight:600;color:var(--muted);line-height:1.2;}
  .infoFooter .hoursTable td:nth-child(2){font:inherit;}
}




/* === FIX FINAL: HORÁRIO (dias e horas) com o MESMO tamanho/peso em todos os dispositivos === */
.hours td,
.hours td:first-child{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  line-height: 1.4 !important;
}



    /* ===== INLINE QTY (Stock -> depois de adicionar) ===== */
    .qtyInline{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
    .qtyBtn{width:30px;height:30px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:900;line-height:1}
    .qtyInp{width:44px;height:30px;border-radius:10px;border:1px solid var(--line);text-align:center;font-weight:800}
    .iconBtn{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
    .iconBtn:hover{background:rgba(37,99,235,.08)}
    .iconBtn.on{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.10)}
    .actionWrap{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
    .comparePill{display:inline-flex;align-items:center;gap:8px}



/* =========================
   PATCH: Ações em 2 linhas (evita sobreposição)
   ========================= */
td.actionsCell{ overflow:visible; }
td.actionsCell .actionWrap2{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  max-width:100%;
}
td.actionsCell .actionTop{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}
td.actionsCell .actionBottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}
td.actionsCell .rowBtn{max-width:none;white-space:nowrap;overflow:visible;text-overflow:clip}
/* === Stock: botão adicionar loading imediato === */
button.loading{opacity:.75; cursor:progress;}


/* Compare state stronger */
tr.compareOn{ outline:2px solid rgba(37,99,235,.35); outline-offset:-2px; }
.iconBtn.on{ border-color: rgba(37,99,235,.65) !important; background: rgba(37,99,235,.12) !important; }

/* === AVISOS: botão do sino em destaque quando pendente === */
.iconBtn.alertOn{border-color:#f59e0b;background:#fffbeb;color:#92400e;font-weight:900}

/* === Modal info (conjuntos): linha de composto selecionada === */
#infoModules tr.compRow{cursor:pointer;}
#infoModules tr.compSelected{outline:2px solid rgba(37,99,235,.45); outline-offset:-2px; background: rgba(37,99,235,.06);}


/* === MTO: remover sino (artigos por encomenda / MTO) === */
tr.stock-blue button[data-alert]{
  display:none !important;
}

/* === MTO: remover sino (artigos por encomenda / MTO) === */
tr.stock-blue .iconBtn.alertOn,
tr.stock-blue .iconBtn.alert{
  display:none !important;
}

.iconBtn.alertOn{border-color:#f59e0b;background:#fffbeb;color:#92400e;font-weight:900}

/* === Modal info (conjuntos): linha de composto selecionada === */
#infoModules tr.compRow{cursor:pointer;}
#infoModules tr.compSelected{outline:2px solid rgba(37,99,235,.45); outline-offset:-2px; background: rgba(37,99,235,.06);}




/* ===== MOBILE: botão para abrir/fechar filtros ===== */
.mobileFilterBar{
  position:fixed;
  left:0; right:0;
  top: calc(var(--topbarH) + var(--filtersStickyGap));
  z-index: 55;
  background: rgba(245,247,251,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 10px 0 8px;
}
.filtersCollapsible{display:block}
@media (max-width: 620px){
  .mobileFilterBar{display:flex}
  .filtersCollapsible{display:none}
  .filtersCollapsible.open{display:block}
}


/* ===== MOBILE: filtros como modal (scroll interno + bloqueio do fundo) ===== */
.filtersModal{display:none}
body.filtersOpen{overflow:hidden; touch-action:none;}
body.filtersOpen #appShell{touch-action:none;}
.filtersModal{
  position:fixed; inset:0;
  z-index: 80;
  display:none;
}
.filtersModal.open{display:block;}
.filtersModalBackdrop{
  position:absolute; inset:0;
  background: rgba(15,23,42,.35);
}
.filtersModalSheet{
  position:absolute;
  left:12px; right:12px;
  top: calc(var(--topbarH,72px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); /* acima da barra tabs mobile */
  background: rgba(255,255,255,.98);
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(2,8,23,.22);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.filtersModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.filtersModalTitle{font-weight:900;font-size:14px;color:#0f172a}
.filtersModalClose{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:12px;
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  cursor:pointer;
}
.filtersModalBody{
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* Mobile: mostrar só o ícone do botão de filtros e esconder família rápida/labels */
@media (max-width: 620px){
  .filtersHeadRow{justify-content:flex-end; padding:10px 12px 10px;}
  .filtersHeadRow .famQuick{display:none !important;}

  /* Botão Filtros (ícone + texto por baixo) */
  #filterToggleBtn{
    width:72px;
    min-height:70px;
    padding:6px 4px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  #filterToggleBtn .flabel{
    display:block !important;
    font-size:12px;
    line-height:1;
  }
  #filterToggleBtn .ficon svg{width:22px;height:22px;}

  /* no mobile, o filtersBox não deve ocupar espaço na página (vai para modal) */
  .controls{display:none !important;}

  /* Inputs maiores dentro do modal */
  .filtersModalBody .grid{grid-template-columns:1fr !important;}
  .filtersModalBody input,
  .filtersModalBody select{
    min-height:46px !important;
    font-size:16px !important;
  }

  /* Botões no filtro: texto sempre horizontal */
  .filtersModalBody .gridActions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .filtersModalBody .gridActions .btn{
    width:100% !important;
    white-space:nowrap !important;
    word-break:normal !important;
  }
}

/* ===== FOOTER: alinhar com o container (desktop) ===== */
.footer{width:100%;padding-left:18px;padding-right:18px;box-sizing:border-box}
.footerInner{width:100%;max-width:1600px}

/* ===== CONTA (mobile): títulos/subtítulos consistentes ===== */
@media (max-width: 620px){
  #panelAccount .box h3,
  #panelAccount .secTitle{font-size:15px !important;font-weight:800 !important;line-height:1.25 !important;margin:0 0 6px !important}
  #panelAccount .secSub{font-size:12px !important;line-height:1.35 !important;color:var(--muted) !important;margin:0 !important}
}


  /* seleção de composto no modal */
  .compSelected{ outline:2px solid var(--brand); outline-offset:-2px; }

/* Filtros: colapsável por defeito (desktop + mobile) */
.mobileFilterBar{display:flex;justify-content:flex-start;gap:10px;}
#filterToggleBtn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:86px;min-height:62px;gap:6px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--card);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#filterToggleBtn .flabel{font-size:12px;line-height:1}
#filterToggleBtn .ficon{display:inline-flex}

#filterToggleBtn .filterBadge{
  position:absolute;
  top:6px;
  right:8px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#dc2626; /* vermelho */
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:none;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* ===== Filtro rápido por família (sticky/fixo abaixo do cabeçalho) ===== */
:root{ --topbarH: 72px; --filtersStickyGap: 8px; }

/* barra fixa (full-width) */
.mobileFilterBar{
  position:fixed;
  left:0; right:0;
  top: calc(var(--topbarH) + var(--filtersStickyGap));
  z-index: 55;
  background: rgba(245,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: 10px 0 8px;
}

/* garante alinhamento com o container (.wrap) */
#mobileFilterSpacer{height:0}

.mobileFilterInner{
  max-width:1600px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}


.famQuick{
  display:flex;
  align-items:flex-start;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex:1 1 auto;
  min-width:0;
  padding: 2px 2px 0;
}
.famQuick::-webkit-scrollbar{ display:none; }

/* Desktop: se não cabe, quebra em nova linha (sem cortar) */
@media (min-width: 621px){
  .famQuick{ flex-wrap:wrap; overflow-x:visible; overflow-y:visible; }
}

/* Mobile: manter como no original (sem “menu” de imagens/ícones) */
@media (max-width: 620px){
  .famQuick{ display:none !important; }
  .mobileFilterInner{ justify-content:flex-end; }
}

/* estilo semelhante ao menu por ícones (como a tua imagem) */
.famBtn{
  flex:0 0 auto;
  width:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  background:transparent;
  color:#0f172a;
  cursor:pointer;
  user-select:none;
  padding:6px 4px 8px;
  border-radius:12px;
}
.famBtn .ficon{display:inline-flex; opacity:.95; color:#6b7280}

.famBtn .famPng{
  width:28px;height:28px;
  display:block;
  object-fit:contain;
  /* tornar monocromático cinza (sem precisar SVG) */
  filter: grayscale(1) brightness(0.45);
  opacity:.92;
}
.famBtn.on .famPng{
  /* azul ativo (aprox. #2563eb) */
  filter: invert(27%) sepia(94%) saturate(1820%) hue-rotate(210deg) brightness(95%) contrast(98%);
  opacity:1;
}

.famBtn .flabel{font-size:12px;line-height:1.1;white-space:nowrap;font-weight:700;color:#0f172a}
.famBtn:hover .ficon{opacity:1; color:#374151}
.famBtn.on{
  background:rgba(37,99,235,.06);
}
.famBtn.on .ficon, .famBtn.on .flabel{ color: var(--blue2); }
.famBtn.on::after{
  content:"";
  width:28px;
  height:3px;
  border-radius:999px;
  background: var(--blue2);
  margin-top:4px;
}

.filtersCollapsible{display:none}
.filtersCollapsible.open{display:block}


    .accInput{
      width:100%;
      min-height:40px;
      padding:10px 12px;
      border:1px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      color:#0f172a;
      outline:none;
    }
    .accInput:focus{ border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.12); }

  
    /* Permissão: ocultar coluna Stock (tabela stock + carrinho + modais) */
    body.hideStockCol .colStock{display:none !important;}

/* OVERRIDE: mobileFilterBar fixed (garante fixo mesmo com CSS duplicado) */
.mobileFilterBar{position:fixed !important;left:0;right:0;z-index:55 !important;margin:0 !important;}

/* ===== HOTFIX MOBILE FILTROS (modal) ===== */
@media (max-width: 620px){
  /* Grid dos filtros: 1 coluna dentro do modal (sem “end alignment” que causa sobreposições visuais) */
  .filtersModal.open .filtersModalBody .grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .filtersModal.open .filtersModalBody .grid > *{ min-width: 0; }
  .filtersModal.open .filtersModalBody .grid .span2,
  .filtersModal.open .filtersModalBody .grid .span3,
  .filtersModal.open .filtersModalBody .grid .span4{ grid-column: 1 / -1 !important; }

  /* Inputs confortáveis (NÃO aplicar a checkboxes) */
  .filtersModal.open .filtersModalBody input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  .filtersModal.open .filtersModalBody select,
  .filtersModal.open .filtersModalBody textarea{
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
  }
  .filtersModal.open .filtersModalBody label{ font-size: 13px !important; }

  /* Checks (Conjuntos/Verde/Favoritos): em coluna, compactos e alinhados */
  .filtersModal.open .filtersModalBody .filtersChecksRow{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .filtersModal.open .filtersModalBody .chkCol{
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
  }
  .filtersModal.open .filtersModalBody .chk{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .filtersModal.open .filtersModalBody input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    min-height:0 !important;
    margin:0 !important;
    accent-color: var(--blue);
    flex:0 0 auto;
  }
  .filtersModal.open .filtersModalBody .chk label{
    margin:0 !important;
    font-size:14px !important;
    line-height:1.2 !important;
  }
  .filtersModal.open .filtersModalBody .chkCol .muted{
    margin-top:6px;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  /* Ações: botões a 100%, mais altos, texto sempre dentro */
  .filtersModal.open .filtersModalBody .gridActions{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .filtersModal.open .filtersModalBody .gridActions .btn{
    width:100% !important;
    max-width:none !important;
    min-height:56px !important;
    padding:14px 16px !important;
    line-height:1.15 !important;
    font-size:16px !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    text-align:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* --- FIX: grelha de campos no modal (evita sobreposições iOS) --- */
  .filtersModal.open #filtersBox .grid{
    grid-template-columns: 1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .filtersModal.open #filtersBox .span2{ grid-column: 1 / -1 !important; }
  .filtersModal.open #filtersBox .grid > div{ min-width:0 !important; }
  .filtersModal.open #filtersBox label{
    display:block !important;
    margin:0 0 6px 0 !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  .filtersModal.open #filtersBox input,
  .filtersModal.open #filtersBox select{
    width:100% !important;
  }

  /* Inputs de texto confortáveis (sem afetar checkboxes/radios) */
  .filtersModal.open #filtersBox input:not([type="checkbox"]):not([type="radio"]),
  .filtersModal.open #filtersBox select,
  .filtersModal.open #filtersBox textarea{
    min-height:48px !important;
    font-size:16px !important;
  }

  /* Checkboxes compactas e alinhadas */
  .filtersModal.open #filtersBox input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    min-height:0 !important;
    flex:0 0 22px !important;
  }
  .filtersModal.open #filtersBox .filtersChecksRow{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:12px !important;
    margin-top:6px !important;
  }
  .filtersModal.open #filtersBox .chkCol{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  .filtersModal.open #filtersBox .chkCol label{
    margin:0 !important;
  }
  /* SUPER FIX (mobile/modal): força layout em coluna para evitar sobreposições/overflows no iOS */
  .filtersModal.open #filtersBox .grid{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .filtersModal.open #filtersBox .grid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .filtersModal.open #filtersBox .filtersChecksRow{
    margin:0 !important;
  }
  .filtersModal.open #filtersBox .pageSizeBox select{
    width:100% !important;
  }


}

/* ======= SPLIT: next block ======= */

/* ===== MOBILE FILTERS HARD FIX (v4) ===== */
@media (max-width: 620px) {

  /* force single column layout inside modal */
  .filtersModalSheet .filtersGrid,
  .filtersModalSheet .grid,
  .filtersModalSheet .controls,
  .filtersModalSheet .filtersRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* labels must be block and above inputs */
  .filtersModalSheet label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
  }

  /* text inputs/selects full width */
  .filtersModalSheet input[type="text"],
  .filtersModalSheet input[type="number"],
  .filtersModalSheet select {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* logical fields (checkbox rows) compact and aligned */
  .filtersModalSheet .logical,
  .filtersModalSheet .checkboxRow {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .filtersModalSheet input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  /* buttons: always taller than text */
  .filtersModalSheet button,
  .filtersModalSheet .btn {
    min-height: 56px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}