/* Muncitorul Catalog v4 */
:root{
  --topH:52px; --pagH:52px; --gap:7px; --rad:12px;
  --stageH:calc(100svh - var(--topH) - var(--pagH));
}
/* Dark theme */
[data-theme="dark"]{
  --bg:#1a1a1a; --bg2:#272727; --surf:#2f2f2f; --surf2:#383838;
  --border:rgba(255,255,255,.1); --border2:rgba(255,255,255,.18);
  --text:#f0f4ff; --text2:rgba(240,244,255,.65); --text3:rgba(240,244,255,.38);
  --accent:#FF6B2B; --topBg:rgba(26,26,26,.92); --drawerBg:#272727;
  --shadow:0 8px 32px rgba(0,0,0,.55);
  --glow:0 0 0 3px rgba(255,107,43,.22);
}
/* Light theme */
[data-theme="light"]{
  --bg:#f0f2f8; --bg2:#e8ebf4; --surf:#fff; --surf2:#f5f7ff;
  --border:rgba(0,0,0,.09); --border2:rgba(0,0,0,.18);
  --text:#131929; --text2:rgba(19,25,41,.6); --text3:rgba(19,25,41,.38);
  --accent:#E8420A; --topBg:rgba(240,242,248,.92); --drawerBg:#fff;
  --shadow:0 4px 20px rgba(0,0,0,.12);
  --glow:0 0 0 3px rgba(232,66,10,.2);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);background:var(--bg);overflow:hidden;transition:background .3s;}
[data-theme="dark"] body{background:
  radial-gradient(800px 600px at 5% 5%,rgba(255,107,43,.09) 0%,transparent 60%),
  radial-gradient(600px 400px at 90% 80%,rgba(255,140,85,.05) 0%,transparent 55%),
  var(--bg);}

/* ── TOPBAR ─────────────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topH);
  display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--topBg);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);z-index:100;transition:background .3s;}
.brand{width:40px;height:40px;flex-shrink:0;border-radius:10px;overflow:hidden;
  background:var(--surf2);border:1px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.brandLogo{width:36px;height:36px;object-fit:contain;}
.searchWrap{flex:1;min-width:0;position:relative;display:flex;align-items:center;}
.searchIcon{position:absolute;left:11px;color:var(--text3);display:flex;align-items:center;pointer-events:none;}
.search{width:100%;padding:9px 34px 9px 34px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--surf);color:var(--text);
  font-size:14px;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s;}
.search:focus{border-color:var(--accent);box-shadow:var(--glow);}
.search::placeholder{color:var(--text3);}
.clearX{position:absolute;right:8px;width:24px;height:24px;border-radius:6px;
  display:none;align-items:center;justify-content:center;
  background:var(--surf2);border:1px solid var(--border);color:var(--text2);cursor:pointer;}
.topbarRight{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.iconBtn{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--border);background:var(--surf);
  color:var(--text2);cursor:pointer;text-decoration:none;transition:all .15s;}
.iconBtn:hover{background:var(--surf2);color:var(--text);}
.iconBtn:active{transform:scale(.95);}
.btnCat{color:var(--accent);border-color:rgba(255,107,43,.3);}
.btnCat:hover{background:rgba(255,107,43,.1);}

/* ── STAGE + PAGER ──────────────────────────────────────────────── */
.stage{position:fixed;top:var(--topH);bottom:var(--pagH);left:0;right:0;overflow:hidden;}
.pageWrap{height:100%;display:flex;flex-direction:column;}
.page{flex:1;overflow:hidden;padding:6px 6px 0;}
/* Grid mode: no scroll, exact fit */
.page:not(.listMode){overflow:hidden;}
/* List mode: scroll allowed */
.page.listMode{overflow-y:auto;overscroll-behavior:contain;}
.pager{position:fixed;bottom:0;left:0;right:0;height:var(--pagH);
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--topBg);backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border);z-index:100;}
.navbtn{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--border);background:var(--surf);
  color:var(--text2);cursor:pointer;transition:all .15s;}
.navbtn:hover{background:var(--surf2);color:var(--text);}
.navbtn:active{transform:scale(.95);}
.navbtn:disabled{opacity:.3;cursor:default;transform:none;}
.pinfo{font-size:13px;font-weight:600;color:var(--text2);min-width:110px;text-align:center;}

/* ── GRID WRAP ──────────────────────────────────────────────────── */
.wrap{display:grid;gap:var(--gap);animation:fadeIn .2s ease;margin-bottom:0;overflow:hidden;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.wrap.g2{grid-template-columns:repeat(2,1fr);}
.wrap.g3{grid-template-columns:repeat(3,1fr);}
.wrap.g4{grid-template-columns:repeat(4,1fr);}
.wrap.g5{grid-template-columns:repeat(5,1fr);}
.wrap.list{grid-template-columns:1fr;}

/* Tile height per mode — fills exactly N rows */
/* Formula: (stageH - categoryHeaders - (rows-1)*gap) / rows */
/* capped for portrait orientation */
/* Tile heights: stageH minus padding(6) minus category headers(50px reserve) minus gaps */
.wrap.g2>   .tile{height:min(calc((var(--stageH) - 56px - 2*var(--gap)) / 3), 350px);}
.wrap.g3>   .tile{height:min(calc((var(--stageH) - 56px - 3*var(--gap)) / 4), 250px);}
.wrap.g4>   .tile{height:min(calc((var(--stageH) - 56px - 4*var(--gap)) / 5), 200px);}
.wrap.g5>   .tile{height:min(calc((var(--stageH) - 56px - 5*var(--gap)) / 6), 165px);}
.wrap.list> .tile{height:min(calc((var(--stageH) - 56px - 9*var(--gap)) / 10), 45px);}
.wrap > .headerRow{height:auto;min-height:0;}

/* ── CATEGORY HEADER ────────────────────────────────────────────── */
.headerRow{grid-column:1/-1;padding:3px 2px 2px;
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--border);line-height:1;}

/* ── TILE CARD ──────────────────────────────────────────────────── */
.tile{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:var(--rad);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:box-shadow .15s,border-color .15s;}
.tile:hover{box-shadow:0 4px 16px rgba(0,0,0,.13);border-color:rgba(0,0,0,.2);}
.tile:active{opacity:.94;}

/* Image area — takes all space above info */
.tileMedia{flex:1;overflow:hidden;min-height:0;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:5px 5px 3px;}
.tileMedia img{width:100%;height:100%;object-fit:contain;}
.noImg{font-size:10px;color:rgba(0,0,0,.3);font-weight:700;text-transform:uppercase;}

/* Info plashka — fixed at bottom */
.tileInfo{flex-shrink:0;background:rgba(0,0,0,.04);border-top:1px solid rgba(0,0,0,.07);}
.tileName{
  padding:4px 7px 2px;font-size:12px;font-weight:600;color:#111;
  line-height:1.35;
  /* Always 2 lines height - empty second line keeps uniform height */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  min-height:calc(12px * 1.35 * 2 + 6px); /* 2 lines + padding */
}
.tilePriceRow{padding:2px 7px 2px;display:flex;align-items:baseline;
  justify-content:space-between;gap:4px;}
.tPriceV{font-size:12px;font-weight:800;color:#018300;white-space:nowrap;}
.tPriceA{font-size:12px;font-weight:800;color:#c70000;white-space:nowrap;}
.tileFoot{padding:2px 7px 5px;display:flex;align-items:center;
  justify-content:space-between;gap:4px;border-top:1px solid rgba(0,0,0,.05);}

/* Code badge */
.code{font-size:10px;font-weight:700;color:#fff;cursor:pointer;
  background:#1a1a1a;border-radius:5px;padding:2px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;
  transition:background .15s;flex-shrink:0;}
.code:hover{background:#333;}
.footRight{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;}
.brandImg{height:15px;object-fit:contain;opacity:.75;flex-shrink:0;}
.brandTxt{font-size:10px;font-weight:700;color:rgba(0,0,0,.4);white-space:nowrap;max-width:40px;overflow:hidden;text-overflow:ellipsis;}
.stockPill{font-size:10px;font-weight:800;padding:2px 6px;border-radius:10px;white-space:nowrap;flex-shrink:0;}
.stockPill.high{background:rgba(1,131,0,.12);color:#016800;border:1px solid rgba(1,131,0,.2);}
.stockPill.mid {background:rgba(180,120,0,.12);color:#7a5200;border:1px solid rgba(180,120,0,.2);}
.stockPill.low {background:rgba(199,0,0,.1);color:#c70000;border:1px solid rgba(199,0,0,.2);}

/* ── LIST TILE ──────────────────────────────────────────────────── */
.listTile{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:var(--rad);
  display:flex;align-items:center;overflow:hidden;padding:4px 10px 4px 4px;
  transition:border-color .15s,box-shadow .15s;gap:10px;}
.listImg{width:56px;height:56px;flex-shrink:0;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:3px;border-radius:8px;border:1px solid rgba(0,0,0,.07);}
.listImg img{width:100%;height:100%;object-fit:contain;}
.listBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.listRow1{display:flex;align-items:center;gap:8px;min-width:0;}
.listName{font-size:13px;font-weight:600;color:#111;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.listRow2{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.listPrices{display:flex;align-items:baseline;gap:8px;}
.listMeta{display:flex;align-items:center;gap:5px;flex-shrink:0;}

/* ── SEARCH ─────────────────────────────────────────────────────── */
.searchCats{margin-bottom:10px;}
.searchCatsTitle{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);margin-bottom:7px;}
.searchCatsList{display:flex;flex-wrap:wrap;gap:6px;}
.searchCatChip{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:18px;
  background:var(--surf);border:1.5px solid var(--border);color:var(--text2);
  font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.searchCatChip:hover{background:rgba(255,107,43,.1);border-color:var(--accent);color:var(--accent);}
.searchResultsTitle{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);margin-bottom:7px;}

/* ── LOADING ────────────────────────────────────────────────────── */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:16px;}
.loadSpinner{width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loadText{font-weight:700;font-size:16px;}
.loadSub{font-size:13px;color:var(--text2);}
.loading.err{color:#c70000;}

/* ── DRAWERS ────────────────────────────────────────────────────── */
.drawer{position:fixed;top:0;bottom:0;width:min(300px,88vw);
  background:var(--drawerBg);border:1px solid var(--border);box-shadow:var(--shadow);
  z-index:300;display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.4,0,.2,1);}
.drawerLeft{left:0;right:auto;border-radius:0 20px 20px 0;border-left:none;transform:translateX(-100%);}
.drawerRight{right:0;left:auto;border-radius:20px 0 0 20px;border-right:none;transform:translateX(100%);}
.drawerLeft.open,.drawerRight.open{transform:translateX(0);}
.drawerHead{height:var(--topH);display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.drawerTitle{font-weight:800;font-size:16px;}
.drawerCloseBtn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:var(--surf2);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;transition:all .15s;}
.drawerCloseBtn:hover{background:var(--border);color:var(--text);}
.drawerBody{flex:1;overflow-y:auto;scrollbar-width:thin;}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;animation:fadeIn .2s ease;}
.backdrop.open{display:block;}

/* Cat tree */
.catNode{padding:0 8px;}
.catParent{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  cursor:pointer;font-weight:700;font-size:13px;color:var(--text2);transition:background .15s,color .15s;}
.catParent:hover{background:var(--surf2);color:var(--text);}
.catParent.active{background:rgba(255,107,43,.12);color:var(--accent);}
.catArrow{margin-left:auto;font-size:11px;transition:transform .2s;opacity:.5;}
.catChildren{display:none;padding-left:8px;}
.catChildren.open{display:block;}
.catChild{padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--text3);transition:background .12s,color .12s;}
.catChild:hover{background:var(--surf2);color:var(--text2);}
.catChild.active{color:var(--accent);background:rgba(255,107,43,.1);}

/* ── SETTINGS ───────────────────────────────────────────────────── */
.settingsBody{padding:8px 0 24px;}
.sSection{padding:12px 16px 10px;}
.sSection+.sSection{border-top:1px solid var(--border);}
.sLabel{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text3);margin-bottom:9px;}
.sCheck{width:18px;height:18px;border-radius:50%;background:var(--accent);margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:800;opacity:0;transition:opacity .2s;}
.sCheck::after{content:'✓';}
.themeRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.themeBtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;
  border-radius:12px;border:1.5px solid var(--border);background:var(--surf2);color:var(--text2);
  font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;}
.themeBtn:hover{border-color:var(--border2);color:var(--text);}
.themeBtn.active{background:rgba(255,107,43,.15);border-color:var(--accent);color:var(--accent);}
.langRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.langBtn{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--surf2);color:var(--text2);
  font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;}
.langBtn:hover{border-color:var(--border2);}
.langBtn.active{background:rgba(255,107,43,.15);border-color:var(--accent);color:var(--accent);}
.langBtn.active .sCheck{opacity:1;}
.flag{font-size:20px;line-height:1;}.langName{flex:1;}
.priceList{display:flex;flex-direction:column;gap:7px;}
.priceBtn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--surf2);color:var(--text2);
  font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;text-align:left;}
.priceBtn:hover{border-color:var(--border2);}
.priceBtn.active{background:rgba(255,107,43,.15);border-color:var(--accent);color:var(--accent);}
.priceBtn.active .sCheck{opacity:1;}
.priceName{flex:1;}
.gridSizeRow{display:flex;gap:7px;flex-wrap:wrap;}
.gridSizeBtn{flex:1;min-width:50px;padding:9px 5px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--surf2);color:var(--text2);
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;}
.gridSizeBtn:hover{border-color:var(--border2);}
.gridSizeBtn.active{background:rgba(255,107,43,.15);border-color:var(--accent);color:var(--accent);}
.sFooter{text-align:center;padding:16px 16px 8px;}
.sApp{font-weight:700;font-size:12px;color:var(--text3);}
.sVer{font-size:10px;color:var(--text3);opacity:.6;margin-top:3px;}

/* ── MODAL ──────────────────────────────────────────────────────── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;
  align-items:center;justify-content:center;padding:16px;}
.modal.open{display:flex;animation:fadeIn .2s ease;}
.modalCard{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:20px;
  width:90vw;max-width:680px;max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.modalHead{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0;background:#fff;}
.modalTitle{font-weight:800;font-size:15px;flex:1;margin-right:10px;color:#131929;}
.modalBody{overflow-y:auto;padding:14px;background:#fff;scrollbar-width:thin;}
.mImgWrap{width:100%;aspect-ratio:16/10;background:#fff;border-radius:12px;overflow:hidden;
  margin-bottom:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.07);position:relative;cursor:zoom-in;}
.mImgWrap img{width:100%;height:100%;object-fit:contain;}
.mImgZoomHint{position:absolute;bottom:7px;right:7px;background:rgba(0,0,0,.3);color:#fff;
  border-radius:6px;padding:2px 7px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none;}
.mImgWrap:hover .mImgZoomHint{opacity:1;}
.mThumbsWrap{display:flex;gap:7px;margin-bottom:12px;}
.mThumb{width:52px;height:52px;border-radius:9px;overflow:hidden;border:2px solid transparent;
  cursor:pointer;background:#f5f5f5;flex-shrink:0;transition:border-color .15s;}
.mThumb.active{border-color:var(--accent);}
.mThumb img{width:100%;height:100%;object-fit:contain;}
/* Price block */
.mPriceBlock{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:12px;
  padding:12px 14px;margin-bottom:12px;}
.mPriceActive{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08);}
.mPAN{font-size:11px;font-weight:700;color:rgba(19,25,41,.5);text-transform:uppercase;letter-spacing:.5px;}
.mPAV{font-size:24px;font-weight:900;}
.mPAV.green{color:#018300;}.mPAV.red{color:#c70000;}
.mPriceOthers{display:flex;flex-direction:column;gap:3px;}
.mPOR{display:flex;align-items:center;justify-content:space-between;font-size:13px;}
.mPOR>span:first-child{color:rgba(19,25,41,.5);font-weight:600;}
.mPO{font-weight:700;}.mPO.green{color:#018300;}.mPO.red{color:#c70000;}.mPO.black{color:#1a1a1a;}
/* Info table */
.mInfoTable{border:1px solid rgba(0,0,0,.09);border-radius:12px;overflow:hidden;margin-bottom:14px;}
.mIR{display:flex;align-items:center;justify-content:space-between;padding:8px 13px;gap:10px;border-bottom:1px solid rgba(0,0,0,.07);transition:background .12s;}
.mIR.even{background:rgba(0,0,0,.025);}.mIR:last-child{border-bottom:none;}
.mStocRow{cursor:pointer;}.mStocRow:hover{background:rgba(255,107,43,.06);}
.mIL{font-size:12px;color:rgba(19,25,41,.5);font-weight:600;min-width:65px;flex-shrink:0;}
.mIV{font-size:13px;font-weight:600;color:#131929;text-align:right;display:flex;align-items:center;gap:5px;justify-content:flex-end;flex-wrap:wrap;}
.mSpecCode{background:#1a1a1a;color:#fff;border-radius:6px;padding:2px 9px;font-weight:700;cursor:pointer;font-size:12px;}
.mSpecCode:hover{background:#333;}
.mRezervBadge{background:#fff0e8;color:#c70000;border:1px solid rgba(199,0,0,.2);border-radius:5px;padding:1px 5px;font-size:10px;font-weight:700;}
.mStocVal{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.mStocTap{font-size:11px;font-weight:700;color:var(--accent);background:rgba(255,107,43,.1);
  border-radius:5px;padding:2px 7px;cursor:pointer;border:1px solid rgba(255,107,43,.2);}
.mST{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:rgba(19,25,41,.4);margin-bottom:7px;}
.mCharsTable{border:1px solid rgba(0,0,0,.09);border-radius:12px;overflow:hidden;margin-bottom:14px;}
.mCR{display:grid;grid-template-columns:1fr 1fr;padding:7px 13px;gap:8px;border-bottom:1px solid rgba(0,0,0,.06);align-items:start;}
.mCR.even{background:rgba(0,0,0,.025);}.mCR:last-child{border-bottom:none;}
.mCK{font-size:12px;font-weight:600;color:rgba(19,25,41,.55);}
.mCV{font-size:12px;font-weight:500;color:#131929;text-align:right;}
.mCBul{display:flex;align-items:baseline;gap:7px;padding:6px 13px;border-bottom:1px solid rgba(0,0,0,.05);background:rgba(0,0,0,.015);}
.mCBul:last-child{border-bottom:none;}
.mCBD{color:var(--accent);font-weight:900;font-size:13px;flex-shrink:0;}
.mCBT{font-size:12px;color:#131929;font-weight:500;line-height:1.4;}
.mDescText{font-size:13px;line-height:1.7;color:rgba(19,25,41,.75);background:rgba(0,0,0,.025);
  border-radius:10px;padding:11px 13px;border:1px solid rgba(0,0,0,.07);margin-bottom:8px;}
.mDetailLoading{display:flex;align-items:center;gap:10px;padding:18px;
  color:rgba(19,25,41,.4);font-size:13px;justify-content:center;}
.mDescSpinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.1);
  border-top-color:var(--accent);animation:spin .7s linear infinite;flex-shrink:0;}
/* Image zoom */
.imgZoomOverlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.93);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:16px;animation:fadeIn .2s ease;}
.imgZoomImg{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}
.imgZoomClose{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.imgZoomClose:hover{background:rgba(255,255,255,.3);}

/* ── STOCK MODAL ─────────────────────────────────────────────────── */
.stockOverlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease;}
.stockModal{background:#fff;border-radius:20px;width:min(480px,92vw);max-height:88vh;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.45);}
.stockHead{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0;}
.stockTitle{font-weight:800;font-size:14px;color:#131929;flex:1;margin-right:10px;}
.stockBody{overflow-y:auto;scrollbar-width:thin;}
.stockSummary{padding:11px 18px 10px;background:#f8f9fa;}
.stockSumRow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;}
.sSL{flex:1;color:rgba(19,25,41,.6);font-weight:600;}
.sSV{font-size:15px;color:#131929;font-weight:700;}
.stockRezBadge{background:#fff0e8;color:#c70000;border:1px solid rgba(199,0,0,.2);
  border-radius:5px;padding:1px 5px;font-size:10px;font-weight:700;margin-left:4px;}
.sPrices{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.sP{flex:1;min-width:85px;border-radius:10px;padding:7px 11px;display:flex;flex-direction:column;gap:2px;
  border:1px solid rgba(0,0,0,.08);background:#fff;}
.sP span{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:rgba(19,25,41,.5);}
.sP b{font-size:16px;font-weight:900;}
.sP.green b{color:#018300;}.sP.red b{color:#c70000;}.sP.black b{color:#1a1a1a;}
.stockDivider{height:1px;background:rgba(0,0,0,.08);}
.stockList{padding:3px 0;}
.stockItem{display:flex;align-items:center;gap:8px;padding:7px 18px;
  border-bottom:1px solid rgba(0,0,0,.05);font-size:13px;}
.stockItem:last-child{border-bottom:none;}
.sIco{font-size:14px;flex-shrink:0;width:20px;text-align:center;}
.sName{flex:1;color:rgba(19,25,41,.7);font-weight:500;}
.sQty{font-weight:800;white-space:nowrap;}
.sQty.has{color:#131929;}.sQty.zero{color:rgba(19,25,41,.25);}
.sRez{font-size:10px;color:#c70000;font-weight:600;margin-left:3px;}

/* ── TOAST ──────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:calc(var(--pagH) + 12px);left:50%;
  transform:translateX(-50%) translateY(10px);background:var(--surf);
  border:1px solid var(--border);color:var(--text);padding:8px 16px;
  border-radius:20px;font-weight:700;font-size:13px;box-shadow:var(--shadow);
  z-index:500;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap;}
.toast.open{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Stock filter settings ──────────────────────────────────────── */
.sSubLabel{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text3);margin-bottom:6px;}
.sMinQtyRow{display:flex;gap:6px;}
.sQtyBtn{flex:1;padding:8px 4px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--surf2);color:var(--text2);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;}
.sQtyBtn.active{background:rgba(255,107,43,.15);border-color:var(--accent);color:var(--accent);}
.sToggleRow{display:flex;gap:6px;}
.sToggleBtn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  border:1.5px solid var(--border);background:var(--surf2);color:var(--text2);
  font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;flex:1;}
.sToggleBtn.active{background:rgba(255,107,43,.15);border-color:var(--accent);color:var(--accent);}
.sToggleIcon{width:18px;height:18px;border-radius:50%;background:var(--surf2);
  border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;transition:all .15s;}
.sToggleBtn.active .sToggleIcon{background:var(--accent);border-color:var(--accent);color:#fff;}
.sStoreList{display:flex;flex-direction:column;gap:4px;}
.sStoreSelectAll{
  margin-bottom:4px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.sStoreSelectAll span{font-size:13px !important;}
.sStoreItem{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);
  transition:background .12s;}
.sStoreItem:hover{background:var(--surf2);}
.sStoreItem input[type="checkbox"]{
  width:17px;height:17px;border-radius:5px;cursor:pointer;
  accent-color:var(--accent);flex-shrink:0;}
.sStoreDivider{height:1px;background:var(--border);margin:4px 0;}

/* ── Row-based grid layout ──────────────────────────────────────── */
.wrapGrid{display:flex;flex-direction:column;gap:0;overflow:hidden;}
.wrapGrid.g2{--cols:2;} .wrapGrid.g3{--cols:3;}
.wrapGrid.g4{--cols:4;} .wrapGrid.g5{--cols:5;}

/* Category label row — minimal, accent colored */
.rowCatLabel{
  padding:4px 8px 3px;
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--accent);
  border-left:3px solid var(--accent);
  margin:4px 0 2px;
  line-height:1;
}
/* First category label has no top margin */
.tileRow:first-child .rowCatLabel{margin-top:0;}

/* Tile row: grid of cols */
.tileRow{display:flex;flex-direction:column;}
.rowTiles{display:grid;gap:var(--gap);}
.rowTiles.g2{grid-template-columns:repeat(2,1fr);}
.rowTiles.g3{grid-template-columns:repeat(3,1fr);}
.rowTiles.g4{grid-template-columns:repeat(4,1fr);}
.rowTiles.g5{grid-template-columns:repeat(5,1fr);}

/* Tile heights inside rowTiles */
.rowTiles.g2 > .tile{height:min(calc((var(--stageH) - 56px - 2*var(--gap)) / 3), 350px);}
.rowTiles.g3 > .tile{height:min(calc((var(--stageH) - 56px - 3*var(--gap)) / 4), 250px);}
.rowTiles.g4 > .tile{height:min(calc((var(--stageH) - 56px - 4*var(--gap)) / 5), 200px);}
.rowTiles.g5 > .tile{height:min(calc((var(--stageH) - 56px - 5*var(--gap)) / 6), 165px);}

/* Placeholder tile (empty slot in last row) */
.tilePlaceholder{
  background:transparent;border-radius:var(--rad);
  border:1.5px dashed rgba(255,255,255,.07);
}
[data-theme="light"] .tilePlaceholder{border-color:rgba(0,0,0,.06);}

/* Category border: left colored stripe when cat changes mid-row */
.tile.catBorder{
  position:relative;
  border-left:3px solid var(--accent) !important;
  border-top:2px solid rgba(255,107,43,.4) !important;
}
/* Mini cat badge at top-left of tile */
.tile.catBorder .tileCatBadge{
  display:block;
  position:absolute;top:4px;left:5px;z-index:2;
  background:var(--accent);color:#fff;
  font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;
  max-width:calc(100% - 10px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.tileCatBadge{display:none;}/* hidden by default, shown only on catBorder tiles */


/* ── Zero-stock tile: desaturated overlay ───────────────────────── */
.tile.tileEmpty{
  opacity:.55;
  filter:grayscale(.6);
}
.tile.tileEmpty:hover{ opacity:.7; }
.tile.tileEmpty .tileInfo{
  background:rgba(0,0,0,.05);
}
.tile.tileEmpty .tileName{ color:rgba(0,0,0,.5); }
.tile.tileEmpty .tPriceV,
.tile.tileEmpty .tPriceA{
  color:rgba(0,0,0,.35) !important;
}
.tile.tileEmpty .stockPill{
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.35);
  border-color:rgba(0,0,0,.1);
}
[data-theme="dark"] .tile.tileEmpty .tileName{ color:rgba(255,255,255,.4); }
[data-theme="dark"] .tile.tileEmpty .tPriceV,
[data-theme="dark"] .tile.tileEmpty .tPriceA{ color:rgba(255,255,255,.25) !important; }
[data-theme="dark"] .tile.tileEmpty .stockPill{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.1);
}

/* ── Modal code — never truncate ────────────────────────────────── */
.mSpecCode{
  max-width:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:12px !important;
}

/* ══════════════════════════════════════════════════════════════════
   SET / BUNDLE — tile, modal, pricelist  (both themes)
   ══════════════════════════════════════════════════════════════════ */

/* CSS vars for SET theme colour — adapts per theme */
[data-theme="dark"]{
  --set-bg:      rgba(167,139,250,.15);   /* soft purple fill */
  --set-border:  rgba(167,139,250,.35);
  --set-text:    #c4b5fd;                 /* light lavender — readable on dark */
  --set-text2:   rgba(196,181,253,.7);
  --set-plus:    #a78bfa;
  --set-row-bg:  rgba(139,92,246,.07);
  --set-row-bg2: rgba(139,92,246,.13);
}
[data-theme="light"]{
  --set-bg:      rgba(109,40,217,.07);
  --set-border:  rgba(109,40,217,.22);
  --set-text:    #5b21b6;                 /* deep violet — readable on white */
  --set-text2:   rgba(91,33,182,.7);
  --set-plus:    #7c3aed;
  --set-row-bg:  rgba(109,40,217,.05);
  --set-row-bg2: rgba(109,40,217,.1);
}

/* Tile: SET badge on image (fixed gradient — always white text) */
.tileMedia{ position:relative; }
.tileSetBadge{
  position:absolute;top:7px;right:7px;z-index:3;
  background:linear-gradient(135deg,#7c3aed,#a78bfa);
  color:#fff;font-size:9px;font-weight:900;letter-spacing:.8px;
  padding:2px 8px;border-radius:20px;
  box-shadow:0 2px 8px rgba(124,58,237,.45);
  text-transform:uppercase;
}

/* Tile: companion product subtitle line */
.tileSetLine{
  font-size:10px;font-weight:600;color:var(--set-text);
  padding:0 7px 3px;letter-spacing:.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}

/* Modal: SET breakdown block — always on white modal card */
.mSetBreakdown{
  display:flex;flex-direction:column;gap:0;
  background:#f5f0ff;                   /* consistent soft purple, always on white */
  border:1.5px solid #d8b4fe;
  border-radius:12px;
  overflow:hidden;
  margin-top:8px;
}
.mSetBreakdown .mSetLabel{
  background:linear-gradient(90deg,#7c3aed,#9333ea);
  color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:6px 13px;
}
.mSetItem{
  display:flex;align-items:flex-start;gap:8px;
  padding:9px 13px;
  border-bottom:1px solid #e9d5ff;
}
.mSetItem:last-child{ border-bottom:none; }
.mSetItem .mSetNum{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:#7c3aed;color:#fff;
  font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px; /* align with first text line */
}
.mSetItem .mSetName{
  flex:1;min-width:0;
  font-size:12px;font-weight:600;color:#1e1b4b;
  /* allow 2-line wrap so long names don't get clipped */
  white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.35;
}
.mSetPrices{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;
  margin-top:1px;
}
.mSetItem .mSetP{
  font-size:13px;font-weight:800;white-space:nowrap;
}
.mSetItem .mSetP.red   { color:#b91c1c; }
.mSetItem .mSetP.green { color:#15803d; }
.mSetItem .mSetP.alt{
  font-size:11px;font-weight:600;color:#15803d;
}
.mSetPlus{
  text-align:center;padding:4px 0;
  font-size:16px;font-weight:900;line-height:1;
  color:#9333ea;background:#ede9fe;
}

/* Modal: SET row in info table */
.mSetRow .mIL{ color:var(--set-text) !important; font-weight:700; }
.mSetWith{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text);
}

/* SET badge pill — used in table, modal, pricelist */
.setBadge,
.plSetBadge{
  display:inline-flex;align-items:center;
  background:linear-gradient(135deg,#7c3aed,#a78bfa);
  color:#fff;font-size:9px;font-weight:900;letter-spacing:.6px;
  padding:2px 7px;border-radius:12px;
  flex-shrink:0;vertical-align:middle;
  box-shadow:0 1px 4px rgba(124,58,237,.35);
  text-transform:uppercase;
}

/* Inline SET tag inside mPAN label */
.mSetTag{
  display:inline-block;
  background:#7c3aed;color:#fff;
  font-size:9px;font-weight:900;letter-spacing:.5px;
  padding:1px 6px;border-radius:8px;
  vertical-align:middle;margin-right:4px;
  text-transform:uppercase;
}

/* Pricelist: companion subtitle */
.plSetSub{
  font-size:10px;font-weight:600;
  color:var(--set-text);
  margin-top:2px;line-height:1.3;
}