@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* primary = blue (brand, info, price, nav) */
  --brand:#1B6FD1; --brand-deep:#155CB0; --brand-tint:#EAF2FC;
  /* secondary = green (order actions + savings) */
  --green:#2FA45A; --green-deep:#24803F; --green-tint:#E9F6EE;
  --ink:#17212C; --muted:#6B7480;
  --bg:#F5F8FC; --card:#FFFFFF; --line:#E4E9F0;
  --alert:#B45309;
  --focus:#1B6FD1;
  --header-h:60px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{margin:0;font-weight:700;color:var(--ink);}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}

/* ===== Header ===== */
.topbar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line);}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;}
.brand{display:flex;align-items:center;gap:11px;min-width:0;}
.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark svg{width:21px;height:21px;}
.brand-text{min-width:0;}
.brand-text .display{font-size:17px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-text .tagline{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;}
.topbar-right{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-btn:hover{background:var(--bg);}
.icon-btn:disabled{opacity:.6;cursor:default;}
.icon-btn .refresh-ic{width:19px;height:19px;}
.icon-btn.loading .refresh-ic{animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.call-btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:0 15px;height:40px;font-size:14px;font-weight:600;flex-shrink:0;}
.call-btn:hover{background:var(--brand-deep);}
.call-btn svg{width:16px;height:16px;}

.subbar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:9px 20px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);}
.subbar .step{opacity:.6;}
.subbar .step.active{opacity:1;color:var(--brand);font-weight:600;}
.subbar .sep{opacity:.4;}

/* ===== Sticky search + chips ===== */
.searchbar{background:var(--bg);border-bottom:1px solid var(--line);}
.searchbar-inner{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;flex-direction:column;gap:10px;}
.search-box{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.search-box svg{width:18px;height:18px;color:var(--muted);flex-shrink:0;}
.search-box input{border:none;outline:none;background:transparent;font-size:15px;width:100%;color:var(--ink);}
.search-box input::placeholder{color:#9AA1AC;}
.chip-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .15s;}
.chip:hover{border-color:var(--brand);}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.chip .count{font-family:'IBM Plex Mono',monospace;font-size:11px;background:rgba(0,0,0,.06);padding:1px 6px;border-radius:20px;}
.chip.active .count{background:rgba(255,255,255,.24);}

/* ===== Layout ===== */
.wrap{max-width:1200px;margin:0 auto;padding:20px 20px 80px;display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}

/* ===== Hero (desktop) ===== */
.hero{grid-column:1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px;}
.hero h1{font-size:25px;line-height:1.2;max-width:560px;letter-spacing:-.4px;}
.hero .accent{color:var(--brand);}
.hero p{font-size:14px;color:var(--muted);margin-top:8px;max-width:520px;line-height:1.55;}
.hero-meta{display:flex;gap:24px;}
.hero-meta .num{font-size:23px;font-weight:700;color:var(--brand);}
.hero-meta .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

/* ===== Catalog ===== */
.catalog{grid-column:1;}
.cat-head{display:grid;grid-template-columns:1fr 100px 116px 188px;gap:12px;padding:2px 16px 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.cat-head span:not(:first-child){text-align:right;}
.product{display:grid;grid-template-columns:1fr 100px 116px 188px;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:8px;}

.p-info{display:flex;gap:12px;align-items:center;min-width:0;}
.p-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;}
.p-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.p-name{font-weight:600;font-size:14.5px;color:var(--ink);}
.p-sub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35;}

.p-mrp,.p-rate{text-align:right;}
.p-mrp .val{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);text-decoration:line-through;}
.p-mrp .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:1px;}
.p-rate .val{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;color:var(--brand);}
.margin-pill{display:inline-block;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;background:var(--green-tint);color:var(--green-deep);padding:2px 7px;border-radius:20px;}
.on-request{font-size:12.5px;color:var(--muted);}

.p-action{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.qty-stepper{display:flex;align-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);}
.qty-stepper button{width:36px;height:38px;flex-shrink:0;border:none;background:var(--card);color:var(--ink);font-size:20px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;}
.qty-stepper button:hover{background:var(--bg);}
.qty-stepper button:active{background:var(--line);}
.qty-stepper input{width:38px;height:38px;flex-shrink:0;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--card);text-align:center;color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:14px;-moz-appearance:textfield;appearance:textfield;}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.add-btn{background:var(--green);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s;}
.add-btn:hover{background:var(--green-deep);}
.add-btn.added{background:var(--green-deep);}

.empty-state{text-align:center;padding:44px 20px;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:12px;}

/* ===== Order panel (desktop sidebar) ===== */
.order-col{grid-column:2;position:sticky;top:16px;}
.order-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(20,25,35,.35);}
.order-head{padding:16px 18px;border-bottom:1px solid var(--line);position:relative;}
.order-head .display{font-size:16px;font-weight:700;}
.order-head .sub{font-size:12px;color:var(--muted);margin-top:2px;}
.sheet-close{display:none;}
.order-body{padding:6px 18px;max-height:min(46vh,340px);overflow-y:auto;}
.chit-empty{text-align:center;padding:26px 10px;color:var(--muted);font-size:13px;line-height:1.6;}
.chit-empty svg{width:28px;height:28px;color:var(--line);margin-bottom:8px;}
.chit-line{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);}
.chit-line:last-child{border-bottom:none;}
.cl-name{font-size:13.5px;font-weight:600;}
.cl-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.cl-right{text-align:right;flex-shrink:0;}
.cl-qty{font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
.cl-remove{border:none;background:none;color:var(--muted);font-size:11px;margin-top:4px;text-decoration:underline;padding:0;}
.order-foot{padding:14px 18px 18px;border-top:1px solid var(--line);}
.total-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:4px;}
.total-row.strong{font-size:16px;color:var(--ink);font-weight:700;font-family:'IBM Plex Mono',monospace;}
.field{margin-top:12px;}
.field label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.field input{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--card);color:var(--ink);}
.field input:focus{border-color:var(--brand);outline:none;}
.send-btn{width:100%;margin-top:16px;background:var(--green);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .15s;}
.send-btn:hover:not(:disabled){background:var(--green-deep);}
.send-btn:disabled{background:#CBD2DA;cursor:not-allowed;}
.send-btn svg{width:18px;height:18px;}
.clear-link{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:var(--muted);text-decoration:underline;background:none;border:none;width:100%;}
.order-note{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5;text-align:center;}
.details-toggle{display:none;width:100%;margin-top:12px;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:11px;font-size:13px;font-weight:600;align-items:center;justify-content:center;gap:6px;}
.details-toggle:hover{border-color:var(--brand);}
.details-toggle .opt{color:var(--muted);font-weight:400;}
.req{color:var(--alert);font-weight:700;}
.field input.invalid{border-color:var(--alert);background:#FDF3E7;}
.order-details{display:block;}

/* ===== Footer ===== */
.footer{max-width:1200px;margin:28px auto 0;padding:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);}

/* ===== Cart FAB (mobile) + backdrop ===== */
.cart-fab{display:none;position:fixed;right:16px;bottom:16px;z-index:70;align-items:center;gap:9px;height:54px;padding:0 20px 0 17px;border:none;border-radius:999px;background:var(--green);color:#fff;box-shadow:0 12px 26px -8px rgba(47,164,90,.5);}
.cart-fab svg{width:22px;height:22px;}
.cart-fab-count{position:absolute;top:-5px;left:36px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#fff;color:var(--green-deep);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.cart-fab-total{font-size:15px;font-weight:700;font-family:'IBM Plex Mono',monospace;}
.sheet-backdrop{display:none;position:fixed;inset:0;z-index:75;background:rgba(15,20,30,.45);opacity:0;pointer-events:none;transition:opacity .25s;}
.sheet-backdrop.show{opacity:1;pointer-events:auto;}
body.sheet-open{overflow:hidden;}

/* ===== last-updated + toast ===== */
.last-updated{position:fixed;left:16px;bottom:20px;z-index:60;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:20px;box-shadow:0 6px 16px -10px rgba(0,0,0,.3);font-family:'IBM Plex Mono',monospace;}
.last-updated:empty{display:none;}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(12px);z-index:90;background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 40px);text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.ok{background:var(--green-deep);}
.toast.err{background:var(--alert);}
.toast.warn{background:#B8860B;}

/* ===== Responsive: mobile (<=920px) ===== */
@media (max-width:920px){
  .subbar{display:none;}
  .searchbar{position:sticky;top:var(--header-h);z-index:40;}
  .wrap{grid-template-columns:1fr;gap:0;padding:14px 14px 96px;}
  .hero{display:none;}
  .cat-head{display:none;}

  /* product → clean card */
  .product{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"info info info" "rate mrp action";
    gap:12px 10px;padding:14px;border-radius:14px;margin-bottom:10px;
  }
  .p-info{grid-area:info;}
  .p-rate{grid-area:rate;text-align:left;}
  .p-mrp{grid-area:mrp;text-align:left;align-self:center;}
  .p-mrp .lbl{display:none;}
  .p-action{grid-area:action;justify-content:flex-end;align-self:center;}

  /* order panel → bottom sheet */
  .order-col{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform;}
  .order-col.open{transform:translateY(0);}
  .order-card{display:flex;flex-direction:column;max-height:88vh;border-radius:18px 18px 0 0;box-shadow:0 -14px 44px -10px rgba(0,0,0,.35);}
  .order-card::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--line);margin:9px auto 0;}
  .order-body{max-height:none;flex:1 1 auto;min-height:30vh;}
  .order-foot{padding:12px 18px 16px;}
  .order-foot .total-row:not(.strong){display:none;}
  .order-note{display:none;}
  .details-toggle{display:flex;}
  .order-details{display:none;}
  .order-details.show{display:block;}
  .sheet-close{display:flex;position:absolute;right:12px;top:-2px;width:34px;height:34px;border-radius:50%;border:none;background:var(--bg);color:var(--ink);font-size:22px;line-height:1;align-items:center;justify-content:center;}
  .cart-fab.has-items{display:inline-flex;}
}

@media (max-width:360px){
  /* very small screens: give the action its own row */
  .product{grid-template-columns:auto 1fr;grid-template-areas:"info info" "rate mrp" "action action";}
  .p-action{margin-top:2px;}
}