*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:#252525;background:#faf9f7}
.top{height:74px;background:#fff;border-bottom:1px solid #e8e5df;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;z-index:20}
.brand{display:flex;gap:10px;align-items:center}.brandmark{width:38px;height:38px;border:1px solid #222;border-radius:50%;display:grid;place-items:center;font-weight:700}.brand strong{display:block;letter-spacing:2px;font-size:15px}.brand span{font-size:11px;color:#777}
.basket{border:1px solid #222;background:#222;color:#fff;border-radius:6px;padding:11px 15px;cursor:pointer}.basket b{background:#fff;color:#222;border-radius:10px;padding:2px 6px;margin-left:6px}
.hero{background:#24211e;color:#fff;padding:62px 8vw}.hero>div{max-width:900px}.eyebrow{font-size:12px;letter-spacing:2px;opacity:.7}.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.05;margin:12px 0}.hero p{font-size:16px;line-height:1.7;max-width:750px;color:#ddd}
.toolbar{padding:24px 5vw;display:flex;gap:10px;position:sticky;top:74px;background:#faf9f7;z-index:10;border-bottom:1px solid #e8e5df}.toolbar input,.toolbar select{height:44px;border:1px solid #d8d4cd;background:#fff;border-radius:6px;padding:0 13px;font-size:14px}.toolbar input{flex:1}.toolbar select{min-width:210px}.ghost{border:1px solid #bbb;background:#fff;border-radius:6px;padding:0 15px}
.grid{padding:28px 5vw 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}.card{background:#fff;border:1px solid #e5e1da;border-radius:8px;overflow:hidden}.pic{aspect-ratio:1/1;background:#f3f1ed;display:grid;place-items:center}.pic img{width:100%;height:100%;object-fit:contain}.info{padding:16px}.code{font-size:11px;color:#777;letter-spacing:.6px}.name{font-size:16px;font-weight:700;margin:5px 0}.meta{font-size:12px;color:#666;min-height:34px}.commercial{display:flex;justify-content:space-between;gap:10px;margin:13px 0}.commercial div{font-size:12px}.commercial b{display:block;font-size:16px;color:#222}.qty{display:flex;align-items:center;gap:8px}.qty button{width:36px;height:36px;border:1px solid #bbb;background:#fff;border-radius:5px;font-size:20px;cursor:pointer}.qty input{width:70px;height:36px;border:1px solid #bbb;border-radius:5px;text-align:center}.add{width:100%;margin-top:10px;height:40px;background:#222;color:#fff;border:0;border-radius:5px;cursor:pointer}
.drawer{position:fixed;right:-510px;top:0;width:min(510px,100vw);height:100vh;background:#fff;z-index:40;box-shadow:-10px 0 40px #0002;transition:.25s;padding:22px;overflow:auto}.drawer.open{right:0}.drawerHead{display:flex;justify-content:space-between;align-items:center}.drawerHead button{border:0;background:none;font-size:30px}.basketRow{display:grid;grid-template-columns:55px 1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid #eee}.basketRow img{width:55px;height:55px;object-fit:contain;background:#f4f2ee}.basketRow .mini{font-size:12px;color:#777}.basketRow .lineQty{display:flex;align-items:center;gap:4px;margin-top:6px}.lineQty button{border:1px solid #bbb;background:#fff;border-radius:4px}.summary{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f6f4f0;padding:13px;margin:18px 0}.summary b{text-align:right}.drawer form{display:grid;gap:9px}.drawer input,.drawer textarea{width:100%;border:1px solid #ccc;border-radius:5px;padding:11px;font:inherit}.drawer textarea{min-height:90px;resize:vertical}.primary{height:45px;background:#222;color:#fff;border:0;border-radius:5px;font-weight:700}.small{font-size:11px;color:#777;line-height:1.5}.success{padding:20px;background:#eef7ef;border:1px solid #b9d7bd;border-radius:6px;line-height:1.6}.hidden{display:none}.backdrop{display:none;position:fixed;inset:0;background:#0008;z-index:30}.backdrop.open{display:block}
@media(max-width:650px){.top{padding:0 15px}.hero{padding:40px 20px}.toolbar{top:74px;padding:12px 15px;flex-wrap:wrap}.toolbar input{flex-basis:100%}.toolbar select{flex:1;min-width:0}.grid{padding:18px 15px 50px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.info{padding:11px}.name{font-size:14px}.commercial{display:block}.commercial div+div{margin-top:6px}.qty input{width:54px}.drawer{padding:17px}}
.add.added{opacity:.85}

.topActions{display:flex;align-items:center;gap:10px}
.currencyPicker{display:flex;align-items:center;gap:6px;font-size:11px;color:#666}
.currencyPicker select{height:40px;border:1px solid #bbb;background:#fff;border-radius:6px;padding:0 10px;font-size:13px;color:#222}
.currencyNote{font-size:11px;color:#777;background:#f8f6f2;border:1px solid #e8e5df;border-radius:6px;padding:9px 11px;margin:18px 0 0}
@media(max-width:650px){
  .topActions{gap:6px}
  .currencyPicker span{display:none}
  .currencyPicker select{max-width:105px;height:38px;padding:0 6px}
}

/* Satyankit original brand logo */
.brandMark.imageLogo{
  width:260px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  background:transparent;
}
.brandMark.imageLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}
@media(max-width:650px){
  .brandMark.imageLogo{
    width:205px;
    height:54px;
  }
}

/* ---------- Product discovery & image viewer ---------- */
#sort{min-width:190px}
.pic{position:relative;cursor:zoom-in;overflow:hidden}
.pic img{cursor:zoom-in}
.zoomHint{position:absolute;right:8px;bottom:8px;background:#222d;color:#fff;padding:5px 8px;border-radius:4px;font-size:10px;opacity:0;transition:.2s;pointer-events:none}
.pic:hover .zoomHint{opacity:1}
.copyCode{margin-left:6px;border:1px solid #ddd;background:#f8f7f4;border-radius:4px;font-size:10px;padding:3px 6px;cursor:pointer;color:#444}
.moqHelp{font-size:10px;color:#777;margin-top:5px}
.cardActions{display:flex;gap:7px;margin-top:10px}
.cardActions .add{margin-top:0;flex:1}
.quickBtn{border:1px solid #bbb;background:#fff;border-radius:5px;padding:0 10px;cursor:pointer;font-size:12px}

.lightbox{display:none;position:fixed;inset:0;background:#000b;z-index:100;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightboxPanel{position:relative;width:min(1100px,96vw);height:min(92vh,900px);display:flex;align-items:center;justify-content:center}
.lightboxViewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.lightboxViewport img{max-width:92%;max-height:84%;object-fit:contain;transform-origin:center;transition:transform .12s ease;user-select:none;-webkit-user-drag:none}
.lightboxClose{position:absolute;right:0;top:-4px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#222;font-size:28px;line-height:1;z-index:3;cursor:pointer}
.lightboxNav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:60px;border:0;border-radius:6px;background:#fff;color:#222;font-size:38px;line-height:1;z-index:3;cursor:pointer}
.lightboxNav.prev{left:4px}.lightboxNav.next{right:4px}
.zoomControls{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.zoomControls button{height:38px;min-width:38px;border:1px solid #bbb;background:#fff;border-radius:5px;cursor:pointer}
.quickViewInfo{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);background:#fff;color:#222;border-radius:7px;padding:9px 14px;display:flex;gap:12px;align-items:center;max-width:90%;font-size:12px;box-shadow:0 5px 25px #0004}
.quickViewInfo span{color:#666}
body.lightboxOpen{overflow:hidden}
@media(max-width:650px){
  #sort{flex:1;min-width:0}
  .zoomHint{opacity:1}
  .lightbox{padding:8px}
  .lightboxPanel{width:100%;height:90vh}
  .lightboxViewport img{max-width:94%;max-height:76%}
  .lightboxNav{width:38px;height:50px;font-size:32px}
  .quickViewInfo{bottom:54px;flex-wrap:wrap;justify-content:center;gap:5px 10px}
}