/* ============================================================
   ASIF TRADERS — category filter, sheet design (filter only; the
   product cards are untouched).
   Bar: [ Filters (n) ] [ Sort ▾ ] ......... N products
   Panel: bottom sheet on phones, right side panel on desktop.
   Sticky offset follows the auto-hiding header via --fx-top.
   ============================================================ */
.filter-bar{display:none !important}
.result-count{display:none}

.fx2-shell{position:sticky;top:var(--fx-top,72px);z-index:34;margin:0 0 14px;transition:top .22s ease}
.fx2-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(43,43,43,.1);border-radius:12px;
  padding:6px 8px;box-shadow:0 8px 20px -20px rgba(43,43,43,.5)}
.fx2-bar.stuck{box-shadow:0 14px 26px -22px rgba(43,43,43,.6);border-color:rgba(252,111,32,.2)}
.fx2-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;
  border:1.5px solid rgba(43,43,43,.14);background:#fff;font-family:var(--font-d);font-weight:700;font-size:12.5px;
  color:#1A1A1A;cursor:pointer;white-space:nowrap}
.fx2-btn:hover{border-color:rgba(252,111,32,.55)}
.fx2-btn.on{border-color:#FC6F20;background:#FDF1E6;color:#8A3B0C}
.fx2-btn .fx2-ico{color:#B4450F;flex:none}
.fx2-btn .fx2-chev{color:#7A7A7A;flex:none;transition:transform .2s}
.fx2-btn.open .fx2-chev{transform:rotate(180deg)}
.fx2-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:#FC6F20;color:#fff;font-size:10px;font-weight:700}
.fx2-gap{flex:1}
.fx2-total{font-family:var(--font-d);font-size:11.5px;font-weight:700;color:#6B6B6B;white-space:nowrap}

/* sort dropdown (same as before, smaller) */
.fx2-dd{position:relative}
.fx2-panel{position:absolute;top:calc(100% + 7px);right:0;z-index:70;min-width:210px;background:#fff;
  border:1px solid rgba(43,43,43,.12);border-radius:12px;padding:6px;box-shadow:0 26px 44px -28px rgba(43,43,43,.6);display:none}
.fx2-dd.open .fx2-panel{display:block}
.fx2-opt{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:9px;border:none;background:#fff;
  font-size:13px;color:#1A1A1A;cursor:pointer;text-align:left}
.fx2-opt:hover{background:#FDF4E9}
.fx2-opt.on{background:#FDF1E6;font-family:var(--font-d);font-weight:700}
.fx2-opt .tick{margin-left:auto;color:#FC6F20;opacity:0}
.fx2-opt.on .tick{opacity:1}

/* ---------- sheet / side panel ---------- */
.fx2-back{position:fixed;inset:0;background:rgba(20,20,20,.42);z-index:190;opacity:0;visibility:hidden;transition:.25s}
.fx2-back.open{opacity:1;visibility:visible}
.fx2-sheet{position:fixed;z-index:200;background:#fff;display:flex;flex-direction:column;
  left:0;right:0;bottom:0;max-height:82vh;border-radius:20px 20px 0 0;transform:translateY(102%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -20px 50px -30px rgba(0,0,0,.5)}
.fx2-sheet.open{transform:none}
.fx2-sheet-head{padding:14px 16px 10px;border-bottom:1px solid rgba(43,43,43,.08);position:relative}
.fx2-grip{width:44px;height:4px;border-radius:99px;background:rgba(43,43,43,.16);margin:0 auto 12px}
.fx2-sheet-head h4{font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8A8A8A}
.fx2-sheet-body{padding:6px 16px 8px;overflow:auto;overscroll-behavior:contain}
.fx2-optrow{display:flex;align-items:center;gap:10px;width:100%;padding:12px 2px;border:none;background:none;
  border-bottom:1px solid rgba(43,43,43,.08);font-size:14px;color:#1A1A1A;cursor:pointer;text-align:left}
.fx2-optrow:last-child{border-bottom:none}
.fx2-radio{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(43,43,43,.3);flex:none;display:grid;place-items:center}
.fx2-optrow.on .fx2-radio{border-color:#FC6F20;background:#FC6F20;box-shadow:inset 0 0 0 3px #fff}
.fx2-optrow .n{margin-left:auto;font-family:var(--font-d);font-size:12px;color:#8A8A8A}
.fx2-sheet-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(43,43,43,.08);display:grid;gap:8px}
.fx2-apply{height:48px;border-radius:12px;background:#FC6F20;color:#fff;border:none;font-family:var(--font-d);
  font-weight:700;font-size:14px;cursor:pointer}
.fx2-apply:hover{background:#E05F0E}
.fx2-clear{height:40px;border-radius:10px;background:#fff;border:1.5px solid rgba(43,43,43,.14);color:#3A3A3A;
  font-family:var(--font-d);font-weight:700;font-size:12.5px;cursor:pointer}

@media (min-width:641px){
  .fx2-sheet{left:auto;top:0;bottom:0;width:392px;max-height:none;border-radius:0;transform:translateX(104%);
    border-left:1px solid rgba(43,43,43,.1);box-shadow:-30px 0 60px -40px rgba(0,0,0,.5)}
  .fx2-grip{display:none}
  .fx2-sheet-head{padding:20px 20px 14px}
  .fx2-sheet-body{padding:8px 20px;flex:1}
  .fx2-sheet-foot{padding:14px 20px 20px}
  .fx2-panel{right:0}
}
@media (max-width:860px){
  .fx2-btn{height:34px;font-size:12px;padding:0 10px}
  .fx2-total{font-size:11px}
}
@media (max-width:400px){
  .fx2-btn{height:32px;font-size:11.5px;padding:0 9px}
  .fx2-total{font-size:10.5px}
}