/* =========================================================
   Sharp Industries — Machine RFQ Demo
   Base design tokens ported from the Sharp ecommerce design
   ========================================================= */
:root{--navy:#0a1a33;--navy2:#102a52;--blue:#1b5fd9;--blue-d:#1749a8;--ink:#101a2b;--muted:#6a788d;--line:#e6eaf1;--bg:#f4f6fa;--gold:#f5a623;--green:#12a150;--red:#d64545;--sf:#00a1e0;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.sx{margin:0;font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;}
.sx h1,.sx h2,.sx h3,.sx h4,.sx h5,.sx h6{font-family:'Poppins',sans-serif;margin:0;color:var(--ink);}
.sx a{text-decoration:none;color:inherit;}
.sx img{max-width:100%;display:block;}
.sx-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.sx svg{width:1em;height:1em;}
.sx button{font-family:inherit;}

/* Topbar */
.sx-top{background:#061021;color:#c4d0e2;font-size:13px;}
.sx-top .sx-wrap{display:flex;justify-content:space-between;align-items:center;height:40px;}
.sx-top a{color:#c4d0e2;} .sx-top a:hover{color:#fff;}
.sx-top .l,.sx-top .r{display:flex;align-items:center;gap:22px;}
.sx-top .i{display:inline-flex;align-items:center;gap:7px;} .sx-top svg{font-size:15px;color:var(--blue);}
.sx-top .user{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;}
.sx-top .user .av{width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;}

/* Header */
.sx-head{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 18px rgba(6,16,33,.28);}
.sx-head .sx-wrap{display:flex;align-items:center;height:76px;gap:32px;}
.sx-brand{display:flex;align-items:center;margin-right:12px;}
.sx-brand img{height:40px;width:auto;display:block;}
.sx-nav{display:flex;gap:30px;margin-left:8px;}
.sx-nav a{color:#d5deee;font-weight:500;font-size:15px;padding:6px 0;position:relative;}
.sx-nav a:hover,.sx-nav a.on{color:#fff;}
.sx-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue);}
.sx-head .sx-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
.sx-ico{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--blue);font-size:19px;position:relative;border:0;cursor:pointer;}
.sx-ico:hover{background:var(--blue-d);color:#fff;}
.sx-ico.soft{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);}
.sx-ico.soft:hover{background:rgba(255,255,255,.16);}
.sx-ico .n{position:absolute;top:-5px;right:-5px;background:#fff;color:var(--navy);font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.sx-ico .n.gold{background:var(--gold);color:#1c1300;}
.sx-ico .n[data-zero="1"]{display:none;}

/* Buttons */
.sx-btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-weight:600;padding:12px 20px;border-radius:9px;border:0;cursor:pointer;font-size:14.5px;transition:.15s;line-height:1.2;}
.sx-btn:hover{background:var(--blue-d);color:#fff;}
.sx-btn:disabled{opacity:.5;cursor:not-allowed;}
.sx-btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);}
.sx-btn.ghost:hover{background:rgba(255,255,255,.16);}
.sx-btn.lg{padding:15px 26px;font-size:15.5px;}
.sx-btn.sm{padding:9px 14px;font-size:13px;border-radius:8px;}
.sx-btn.gold{background:var(--gold);color:#1c1300;} .sx-btn.gold:hover{background:#e0951a;}
.sx-btn.dark{background:var(--navy);color:#fff;} .sx-btn.dark:hover{background:var(--navy2);}
.sx-btn.green{background:var(--green);} .sx-btn.green:hover{background:#0e8442;}
.sx-btn.outline{background:#fff;border:1.6px solid var(--line);color:var(--ink);} .sx-btn.outline:hover{border-color:var(--blue);color:var(--blue);background:#fff;}
.sx-btn.link{background:none;color:var(--blue);padding:6px 4px;} .sx-btn.link:hover{background:none;color:var(--blue-d);}

/* Sections */
.sx-sec{padding:64px 0;}
.sx-sec.alt{background:var(--bg);}
.sx-head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;}
.sx-kicker{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;}
.sx-sec h2{font-size:32px;margin-top:8px;}
.sx-sec .sx-sub{color:var(--muted);font-size:16px;max-width:600px;margin-top:10px;line-height:1.55;}
.sx-viewall{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:600;font-size:15px;}

/* Cards */
.sx-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.sx-prod-grid.three{grid-template-columns:repeat(3,1fr);}
.sx-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;transition:.18s;display:flex;flex-direction:column;}
.sx-card:hover{box-shadow:0 18px 38px rgba(16,26,43,.13);transform:translateY(-3px);border-color:#cdd9ee;}
.sx-card.soon{opacity:.62;} .sx-card.soon:hover{transform:none;box-shadow:none;}
.sx-badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:6px;color:#fff;background:var(--blue);}
.sx-badge-new{background:var(--green);} .sx-badge-best{background:var(--gold);color:#241800;} .sx-badge-oem{background:var(--navy2);} .sx-badge-soon{background:#6a788d;}
.sx-card-img{background:linear-gradient(135deg,#f1f4f9,#e6ebf3);height:240px;display:block;overflow:hidden;padding:22px;}
.sx-card-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.sx-card-body{padding:18px;display:flex;flex-direction:column;flex:1;}
.sx-pn{color:var(--blue);font-size:11.5px;font-weight:700;letter-spacing:.6px;}
.sx-card-title{font-size:16px;line-height:1.32;margin:7px 0 6px;font-weight:600;}
.sx-card-desc{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 12px;}
.sx-fit{display:inline-flex;align-items:center;gap:6px;background:#eef3fb;color:#3763a8;font-size:12px;font-weight:600;padding:5px 9px;border-radius:6px;margin-bottom:14px;align-self:flex-start;}
.sx-fit svg{font-size:14px;color:var(--green);}
.sx-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.sx-price{font-family:'Poppins';font-weight:700;font-size:21px;color:var(--ink);}
.sx-price small{font-family:'Inter';font-weight:500;font-size:12px;color:var(--muted);display:block;}
.sx-cardlink{position:absolute;inset:0;z-index:1;}

/* Trust band */
.sx-trust{background:linear-gradient(120deg,var(--blue-d),var(--blue));color:#fff;}
.sx-trust .sx-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 24px;}
.sx-trust .it{display:flex;align-items:center;gap:16px;}
.sx-trust .ci{width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:26px;flex-shrink:0;}
.sx-trust b{font-family:'Poppins';font-size:16px;display:block;}
.sx-trust span{color:#d3e0ff;font-size:13px;}

/* Footer */
.sx-foot{background:#061021;color:#9fb0c9;padding:60px 0 0;font-size:14.5px;}
.sx-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:44px;}
.sx-foot h6{color:#fff;font-size:15px;margin-bottom:18px;letter-spacing:.3px;}
.sx-foot ul{list-style:none;margin:0;padding:0;} .sx-foot li{margin-bottom:11px;}
.sx-foot a:hover{color:#fff;}
.sx-foot .desc{line-height:1.6;margin:16px 0 0;color:#8093ad;}
.sx-foot .ci{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;} .sx-foot .ci svg{color:var(--blue);font-size:18px;margin-top:2px;flex-shrink:0;}
.sx-foot-brand img{height:44px;width:auto;display:block;margin-bottom:4px;}
.sx-foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;justify-content:space-between;font-size:13px;color:#7386a3;}
.sx-foot-bottom a{color:#7386a3;margin-left:20px;}

/* Breadcrumb */
.pp-crumb{background:var(--bg);border-bottom:1px solid var(--line);}
.pp-crumb .sx-wrap{display:flex;gap:9px;align-items:center;padding:15px 24px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;}
.pp-crumb a:hover{color:var(--blue);} .pp-crumb .sep{opacity:.5;} .pp-crumb .cur{color:var(--ink);font-weight:600;}

/* Page title band */
.pg-band{background:var(--navy);color:#fff;padding:44px 0;}
.pg-band h1{color:#fff;font-size:34px;margin:8px 0 6px;}
.pg-band p{color:#b9c6dc;margin:0;font-size:16px;max-width:640px;line-height:1.5;}
.pg-band .sx-kicker{color:#8fb4ff;}
.pg-band .sx-wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}

/* Generic boxes / pills */
.box{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;}
.box + .box{margin-top:18px;}
.pp-h{font-family:'Poppins';font-size:20px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:10px;}
.pp-h::before{content:"";width:4px;height:22px;border-radius:3px;background:var(--blue);}
.pill{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12px;padding:5px 11px;border-radius:20px;white-space:nowrap;}
.pill.green{background:#e7f6ee;color:var(--green);}
.pill.blue{background:#eef3fb;color:#3763a8;}
.pill.gold{background:#fff3e0;color:#c77700;}
.pill.gray{background:#eef1f5;color:#5b6b85;}
.pill.red{background:#fdecec;color:var(--red);}
.pill.navy{background:var(--navy);color:#fff;}
.pill b.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;}
.net{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;color:#c77700;background:#fff3e0;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:6px;}
.note{color:var(--muted);font-size:13px;line-height:1.5;}
.muted{color:var(--muted);}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;}
.spec{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.spec tr:nth-child(even){background:var(--bg);}
.spec th,.spec td{text-align:left;padding:12px 16px;font-size:14px;border-bottom:1px solid var(--line);}
.spec th{color:var(--muted);font-weight:600;width:48%;}
.spec td{color:var(--ink);font-weight:600;}
.spec tr.grp th{background:#eef3fb;color:var(--navy2);font-family:'Poppins';font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;}

/* Forms */
.f-field{margin-bottom:16px;}
.f-field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.f-field label .req{color:var(--red);margin-left:3px;}
.f-inp,.f-sel,.f-ta{width:100%;border:1.6px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14.5px;font-family:inherit;background:#f8fafc;color:var(--ink);}
.f-ta{min-height:110px;resize:vertical;}
.f-inp:focus,.f-sel:focus,.f-ta:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(27,95,217,.1);}
.f-inp.err,.f-sel.err{border-color:var(--red);background:#fff7f7;}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.f-grid .span2{grid-column:1/-1;}
.f-check{display:flex;align-items:center;gap:10px;font-size:14px;color:#33415a;cursor:pointer;}
.f-check input{width:18px;height:18px;accent-color:var(--blue);}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:13px 18px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(6,16,33,.35);opacity:0;pointer-events:none;transition:.25s;z-index:120;display:flex;align-items:center;gap:10px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{color:#5b91f5;font-size:18px;}

/* =========================
   RFQ DRAWER
   ========================= */
.rfq-overlay{position:fixed;inset:0;background:rgba(6,16,33,.5);opacity:0;pointer-events:none;transition:.25s;z-index:100;}
.rfq-overlay.open{opacity:1;pointer-events:auto;}
.rfq-drawer{position:fixed;top:0;right:0;height:100%;width:460px;max-width:100vw;background:#fff;z-index:110;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(6,16,33,.25);}
.rfq-drawer.open{transform:translateX(0);}
.rfq-dhead{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line);background:var(--navy);color:#fff;}
.rfq-dhead h3{color:#fff;font-size:18px;flex:1;}
.rfq-dhead .cnt{background:var(--gold);color:#1c1300;font-weight:700;font-size:12px;padding:3px 9px;border-radius:12px;}
.rfq-dhead .x{background:rgba(255,255,255,.1);border:0;color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:18px;}
.rfq-dhead .x:hover{background:rgba(255,255,255,.2);}
.rfq-dbody{flex:1;overflow:auto;padding:18px 22px;background:var(--bg);}
.rfq-empty{text-align:center;padding:60px 16px;color:var(--muted);}
.rfq-empty svg{font-size:44px;color:#c4d0e2;margin:0 auto 12px;display:block;}
.rfq-empty b{display:block;color:var(--ink);font-family:'Poppins';font-size:16px;margin-bottom:6px;}
.rfq-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;display:grid;grid-template-columns:72px 1fr;gap:14px;}
.rfq-item .im{width:72px;height:72px;border-radius:9px;background:linear-gradient(135deg,#f1f4f9,#e6ebf3);padding:6px;}
.rfq-item .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.rfq-item .t{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.rfq-item .t b{font-family:'Poppins';font-size:14.5px;}
.rfq-item .t .rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px;padding:2px;}
.rfq-item .t .rm:hover{color:var(--red);}
.rfq-item .pn{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.5px;}
.rfq-item ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:3px;}
.rfq-item li{font-size:12.5px;color:#33415a;display:flex;justify-content:space-between;gap:10px;}
.rfq-item li span:last-child{color:var(--muted);white-space:nowrap;}
.rfq-item .more{color:var(--muted);font-size:12px;margin-top:4px;}
.rfq-item .f{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
.rfq-item .f .tot{font-family:'Poppins';font-weight:700;font-size:15px;}
.rfq-item .f a{color:var(--blue);font-size:12.5px;font-weight:600;}
.rfq-item .qty{font-size:12px;color:var(--muted);}
.rfq-dfoot{border-top:1px solid var(--line);padding:16px 22px 20px;background:#fff;}
.rfq-dfoot .row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:#33415a;}
.rfq-dfoot .row.big{font-family:'Poppins';font-weight:700;font-size:18px;color:var(--ink);margin:8px 0 12px;}
.rfq-dfoot .sx-btn{width:100%;justify-content:center;padding:15px;}
.rfq-dfoot .note{text-align:center;margin-top:10px;}

/* =========================
   MACHINE PAGE
   ========================= */
.mp-top{padding:40px 0 24px;}
.mp-top .sx-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;}
.mp-gallery{position:sticky;top:96px;}
.mp-main{background:linear-gradient(135deg,#f1f4f9,#e4eaf3);border:1px solid var(--line);border-radius:16px;height:520px;padding:30px;display:block;overflow:hidden;position:relative;}
.mp-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.mp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.mp-info .lead{color:var(--muted);font-size:16px;margin:0 0 18px;line-height:1.55;}
.mp-info h1{font-size:36px;line-height:1.12;margin:12px 0 8px;}
.mp-pn{color:var(--muted);font-size:13.5px;margin-left:12px;}
.mp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.mp-quick>div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.mp-quick .k{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.mp-quick .v{font-family:'Poppins';font-weight:700;font-size:15px;margin-top:2px;}
.mp-buy{border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 12px 30px rgba(16,26,43,.06);}
.mp-priceline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.mp-priceline .lbl{color:var(--muted);font-size:13px;font-weight:600;}
.mp-price{font-family:'Poppins';font-weight:800;font-size:36px;color:var(--ink);}
.mp-fob{color:var(--muted);font-size:13px;margin-top:4px;}
.mp-sync{display:inline-flex;align-items:center;gap:7px;background:#e7f6ee;color:var(--green);font-weight:600;font-size:12px;padding:5px 10px;border-radius:6px;margin-top:10px;}
.mp-sync svg{font-size:14px;}
.mp-actions{display:flex;gap:12px;align-items:stretch;margin-top:18px;}
.mp-actions .sx-btn{flex:1;justify-content:center;padding:15px;}
.mp-actions .sx-btn.outline{flex:0 0 auto;}
.mp-share{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;}
.mp-share button{background:none;border:0;color:var(--blue);font-weight:600;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px;padding:0;}
.mp-share button:hover{color:var(--blue-d);}
.mp-support{display:flex;align-items:center;gap:14px;background:#eff4ff;border:1px solid #d7e3fb;border-radius:12px;padding:14px 16px;margin-top:16px;}
.mp-support .ci{width:40px;height:40px;border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:19px;flex-shrink:0;}
.mp-support b{font-size:14px;} .mp-support span{color:var(--muted);font-size:13px;}
.mp-support a{margin-left:auto;color:var(--blue);font-weight:600;font-size:14px;white-space:nowrap;}

/* Configurator */
.cfg{padding:10px 0 30px;}
.cfg .sx-wrap{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start;}
.cfg-step{border:1px solid var(--line);border-radius:14px;margin-bottom:18px;overflow:hidden;background:#fff;}
.cfg-step.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(214,69,69,.12);}
.cfg-sh{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg);border-bottom:1px solid var(--line);}
.cfg-sh .num{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;flex-shrink:0;}
.cfg-sh h3{font-size:16px;flex:1;}
.cfg-sh .req{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--red);background:#fdecec;padding:4px 8px;border-radius:5px;}
.cfg-sh .opt{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:#eef1f5;padding:4px 8px;border-radius:5px;}
.cfg-sh .done{color:var(--green);font-size:18px;display:none;}
.cfg-step.ok .cfg-sh .done{display:block;}
.cfg-sb{padding:14px 20px 18px;}
.cfg-sb .help{color:var(--muted);font-size:13px;margin:0 0 12px;line-height:1.5;}
.cfg-sub{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:14px 0 8px;}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1.6px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:.12s;background:#fff;}
.opt:hover{border-color:#b9c6dc;}
.opt.on{border-color:var(--blue);background:#f7f9fe;}
.opt input{width:18px;height:18px;accent-color:var(--blue);margin:0;}
.opt .l b{display:block;font-size:14px;font-weight:600;}
.opt .l span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
.opt .l .sku{color:var(--blue);font-weight:700;font-size:11px;letter-spacing:.5px;}
.opt .p{font-family:'Poppins';font-weight:700;font-size:14.5px;white-space:nowrap;text-align:right;}
.opt .p small{display:block;font-family:'Inter';font-weight:500;color:var(--muted);font-size:11.5px;}
.opt .p.inc{color:var(--green);font-size:13px;}
.opt .p.por{color:var(--muted);font-size:12.5px;font-weight:600;}
.opt.sub{margin-left:34px;border-style:dashed;padding:9px 12px;}
.opt.sub .l b{font-size:13px;}
.opt .qty{display:flex;align-items:center;gap:6px;margin-left:8px;}
.opt .qty input{width:44px;border:1.4px solid var(--line);border-radius:6px;padding:5px;text-align:center;font-family:inherit;font-weight:600;}
.cfg-note{background:#fff8ec;border:1px solid #f5dfb3;color:#7a5200;font-size:12.5px;padding:10px 12px;border-radius:8px;margin-top:10px;line-height:1.5;}
.cfg-hide{display:none;}

/* Summary panel */
.sum{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(16,26,43,.06);overflow:hidden;}
.sum-h{background:var(--navy);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:10px;}
.sum-h h3{color:#fff;font-size:16px;flex:1;}
.sum-h .pill{background:rgba(255,255,255,.12);color:#fff;}
.sum-b{padding:16px 20px;max-height:52vh;overflow:auto;}
.sum-b .ln{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:7px 0;border-bottom:1px dashed var(--line);}
.sum-b .ln:last-child{border-bottom:0;}
.sum-b .ln .k{color:#33415a;} .sum-b .ln .k small{display:block;color:var(--muted);font-size:11.5px;}
.sum-b .ln .v{font-weight:600;white-space:nowrap;}
.sum-b .ln.base .k{font-weight:700;}
.sum-b .empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 0;}
.sum-f{padding:16px 20px;border-top:1px solid var(--line);background:var(--bg);}
.sum-f .row{display:flex;justify-content:space-between;font-size:14px;color:#33415a;margin-bottom:6px;}
.sum-f .row.big{font-family:'Poppins';font-weight:800;font-size:22px;color:var(--ink);margin:6px 0 10px;}
.sum-f .sx-btn{width:100%;justify-content:center;padding:14px;}
.sum-f .sx-btn + .sx-btn{margin-top:8px;}
.sum-f .qtyrow{display:flex;align-items:center;justify-content:space-between;margin:10px 0 12px;font-size:14px;}
.sum-f .qtyrow .q{display:flex;align-items:center;border:1.6px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;}
.sum-f .qtyrow .q button{width:34px;height:34px;border:0;background:#f5f7fa;cursor:pointer;font-size:16px;}
.sum-f .qtyrow .q input{width:44px;border:0;text-align:center;font-weight:600;font-family:inherit;}
.sum-err{background:#fdecec;color:var(--red);font-size:12.5px;padding:9px 12px;border-radius:8px;margin-bottom:10px;display:none;font-weight:600;}
.sum-err.show{display:block;}

/* Detail sections on machine page */
.mp-detail{padding:20px 0 40px;}
.mp-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px;overflow:auto;}
.mp-tabs a{padding:12px 16px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;}
.mp-tabs a:hover,.mp-tabs a.on{color:var(--blue);border-color:var(--blue);}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.feat{border:1px solid var(--line);border-radius:12px;padding:18px;}
.feat h4{font-size:14.5px;margin-bottom:8px;display:flex;align-items:center;gap:9px;}
.feat h4 svg{color:var(--blue);font-size:18px;flex-shrink:0;}
.feat p{color:#3a475e;font-size:13.5px;line-height:1.6;margin:0;}
.feat ul{margin:0;padding-left:18px;color:#3a475e;font-size:13.5px;line-height:1.6;}
.feat.wide{grid-column:1/-1;}
.terms{border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.terms .r{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line);}
.terms .r:last-child{border-bottom:0;}
.terms .r:nth-child(even){background:var(--bg);}
.terms .k{padding:12px 16px;font-weight:700;font-size:13.5px;color:var(--navy2);}
.terms .v{padding:12px 16px;font-size:13.5px;color:#3a475e;line-height:1.55;}
.terms .v ul{margin:6px 0 0;padding-left:18px;}
details.wty{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:10px;}
details.wty summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:14.5px;list-style:none;display:flex;align-items:center;justify-content:space-between;}
details.wty summary::-webkit-details-marker{display:none;}
details.wty summary::after{content:"+";font-size:18px;color:var(--muted);}
details.wty[open] summary::after{content:"–";}
details.wty .c{padding:0 18px 16px;color:#3a475e;font-size:13.5px;line-height:1.65;}
details.wty .c p{margin:0 0 10px;}
details.wty .c ul{margin:0 0 10px;padding-left:18px;}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fb{border-left:3px solid var(--blue);padding:8px 14px;background:var(--bg);border-radius:0 10px 10px 0;}
.fb b{display:block;font-size:13.5px;} .fb span{color:#3a475e;font-size:13px;line-height:1.5;}

/* =========================
   REVIEW / SUBMIT PAGE
   ========================= */
.rv{padding:36px 0 60px;}
.rv .sx-wrap{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;}
.rv-item{border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:start;background:#fff;}
.rv-item .im{width:96px;height:96px;border-radius:10px;background:linear-gradient(135deg,#f1f4f9,#e6ebf3);padding:8px;}
.rv-item .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.rv-item h4{font-size:16px;margin:2px 0 2px;}
.rv-item .cfgl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.rv-item .cfgl span{background:#eef3fb;color:#33507f;font-size:12px;font-weight:600;padding:5px 9px;border-radius:6px;}
.rv-item .cfgl span.por{background:#fff3e0;color:#c77700;}
.rv-item .r{text-align:right;}
.rv-item .r .tot{font-family:'Poppins';font-weight:700;font-size:18px;}
.rv-item .r .q{color:var(--muted);font-size:12.5px;margin-top:2px;}
.rv-item .r .acts{margin-top:10px;display:flex;gap:10px;justify-content:flex-end;font-size:12.5px;font-weight:600;}
.rv-item .r .acts a{color:var(--blue);} .rv-item .r .acts button{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:600;font-size:12.5px;padding:0;}
.rv-item .r .acts button:hover{color:var(--red);}
.rv-side{position:sticky;top:96px;}
.rv-side .box{padding:20px;}
.rv-side .row{display:flex;justify-content:space-between;font-size:14px;color:#33415a;margin-bottom:8px;}
.rv-side .row.big{font-family:'Poppins';font-weight:800;font-size:19px;color:var(--ink);margin:6px 0 4px;}
.rv-side .sx-btn{width:100%;justify-content:center;padding:15px;margin-top:14px;}
.rv-steps{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 30px;max-width:720px;}
.rv-steps .s{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--muted);}
.rv-steps .s .n{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;}
.rv-steps .s.on{color:var(--ink);} .rv-steps .s.on .n{background:var(--blue);border-color:var(--blue);color:#fff;}
.rv-steps .s.done .n{background:var(--green);border-color:var(--green);color:#fff;}
.rv-steps .ln{flex:1;height:2px;background:var(--line);margin:0 14px;max-width:90px;}

/* =========================
   SUCCESS
   ========================= */
.ok-wrap{max-width:760px;margin:0 auto;padding:60px 24px 70px;text-align:center;}
.ok-ic{width:88px;height:88px;border-radius:50%;background:#e7f6ee;color:var(--green);display:grid;place-items:center;font-size:44px;margin:0 auto 22px;animation:pop .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ok-wrap h1{font-size:34px;margin-bottom:10px;}
.ok-wrap p.l{color:var(--muted);font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:560px;}
.ok-ref{display:inline-flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 22px;margin-bottom:30px;}
.ok-ref .k{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.ok-ref .v{font-family:'Poppins';font-weight:800;font-size:22px;color:var(--navy);}
.ok-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.tl{text-align:left;max-width:560px;margin:40px auto 0;border:1px solid var(--line);border-radius:14px;padding:22px;}
.tl h4{font-size:15px;margin-bottom:14px;}
.tl .st{display:grid;grid-template-columns:28px 1fr;gap:12px;margin-bottom:14px;position:relative;}
.tl .st:last-child{margin-bottom:0;}
.tl .st .d{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:#e7f6ee;color:var(--green);}
.tl .st .d.wait{background:#eef1f5;color:var(--muted);}
.tl .st .d.sf{background:#e6f6fc;color:var(--sf);}
.tl .st b{display:block;font-size:14px;} .tl .st span{color:var(--muted);font-size:12.5px;}

/* =========================
   ACCOUNT / DASHBOARD
   ========================= */
.acct{padding:36px 0 60px;}
.acct .sx-wrap{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start;}
.acct-nav{border:1px solid var(--line);border-radius:14px;overflow:hidden;position:sticky;top:96px;}
.acct-nav .u{padding:18px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;}
.acct-nav .u .av{width:42px;height:42px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:700;font-size:15px;}
.acct-nav .u b{display:block;font-family:'Poppins';font-size:14px;} .acct-nav .u span{font-size:12px;color:#b9c6dc;}
.acct-nav a{display:flex;align-items:center;gap:11px;padding:13px 18px;font-size:14px;font-weight:500;color:#33415a;border-bottom:1px solid var(--line);}
.acct-nav a:last-child{border-bottom:0;}
.acct-nav a svg{color:var(--muted);font-size:17px;}
.acct-nav a:hover{background:var(--bg);}
.acct-nav a.on{background:#eef3fb;color:var(--blue);font-weight:600;border-left:3px solid var(--blue);}
.acct-nav a.on svg{color:var(--blue);}
.acct-nav a .n{margin-left:auto;background:var(--gold);color:#1c1300;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;}
.acct-main h1{font-size:28px;margin-bottom:6px;}
.acct-main .sub{color:var(--muted);font-size:14.5px;margin:0 0 22px;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;}
.stat .k{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.stat .v{font-family:'Poppins';font-weight:800;font-size:26px;margin-top:4px;}
.stat .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px;font-family:'Inter';}
.tbl-tools{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.tbl-tools .f-inp{max-width:260px;padding:10px 12px;}
.tbl-tools .f-sel{max-width:180px;padding:10px 12px;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tbl th{background:var(--bg);text-align:left;padding:12px 14px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);}
.tbl td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:0;}
.tbl tr.row:hover td{background:#f7f9fe;cursor:pointer;}
.tbl .ref{font-family:'Poppins';font-weight:700;color:var(--navy);}
.tbl .sub{color:var(--muted);font-size:12.5px;display:block;margin-top:2px;}
.tbl .amt{font-weight:700;text-align:right;}
.tbl .r{text-align:right;}
.tbl .go{color:var(--muted);font-size:18px;}

/* =========================
   RFQ DETAIL
   ========================= */
.det{padding:36px 0 60px;}
.det .sx-wrap{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start;}
.det-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.det-head h1{font-size:28px;margin:6px 0 4px;}
.det-head .meta{color:var(--muted);font-size:14px;}
.det-head .acts{display:flex;gap:10px;flex-wrap:wrap;}
.det-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px;}
.det-item .h{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;padding:16px 18px;background:var(--bg);border-bottom:1px solid var(--line);}
.det-item .h .im{width:80px;height:80px;border-radius:9px;background:#fff;border:1px solid var(--line);padding:6px;}
.det-item .h .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.det-item .h h4{font-size:16px;margin:2px 0;}
.det-item .h .tot{font-family:'Poppins';font-weight:800;font-size:20px;text-align:right;}
.det-item .h .tot small{display:block;font-family:'Inter';font-weight:500;font-size:12px;color:var(--muted);}
.det-item table{width:100%;border-collapse:collapse;}
.det-item td{padding:10px 18px;font-size:13.5px;border-bottom:1px solid var(--line);}
.det-item tr:last-child td{border-bottom:0;}
.det-item td.g{background:#fff;color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding-top:12px;}
.det-item td.sku{color:var(--blue);font-weight:700;font-size:11.5px;letter-spacing:.4px;white-space:nowrap;width:150px;}
.det-item td.p{text-align:right;font-weight:600;white-space:nowrap;width:120px;}
.det-item tfoot td{background:var(--bg);font-weight:700;}
.det-side .box{padding:20px;}
.det-side .kv{display:grid;grid-template-columns:1fr;gap:10px;}
.det-side .kv div{font-size:13.5px;} .det-side .kv .k{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:2px;} .det-side .kv .v{font-weight:600;line-height:1.45;}
.sf-box{border:1px solid #c9ecfa;background:linear-gradient(180deg,#f2fbfe,#fff);}
.sf-box .sf-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sf-box .sf-h .cloud{width:36px;height:36px;border-radius:9px;background:var(--sf);color:#fff;display:grid;place-items:center;font-size:19px;}
.sf-box .sf-h b{font-family:'Poppins';font-size:14.5px;display:block;} .sf-box .sf-h span{font-size:12px;color:var(--muted);}
.sf-box .kv .v.mono{font-size:13px;}
.hist{list-style:none;padding:0;margin:0;}
.hist li{display:grid;grid-template-columns:12px 1fr;gap:12px;padding-bottom:14px;position:relative;}
.hist li::before{content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:var(--line);}
.hist li:last-child::before{display:none;}
.hist .d{width:12px;height:12px;border-radius:50%;background:var(--blue);margin-top:3px;}
.hist .d.g{background:var(--green);} .hist .d.o{background:var(--gold);} .hist .d.x{background:#c4d0e2;}
.hist b{font-size:13.5px;display:block;} .hist span{color:var(--muted);font-size:12px;}

/* =========================
   START-HERE PAGE
   ========================= */
.hero{background:radial-gradient(900px 600px at 20% 10%,#1c3a6e 0%,var(--navy) 55%),linear-gradient(160deg,#0a1a33,#0c1f3d);color:#fff;padding:70px 0 60px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask:radial-gradient(700px 420px at 30% 25%,#000,transparent 78%);}
.hero .sx-wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero h1{color:#fff;font-size:44px;line-height:1.1;font-weight:800;margin:14px 0 16px;}
.hero h1 em{color:#5b91f5;font-style:normal;}
.hero p{color:#b9c6dc;font-size:17px;line-height:1.6;max-width:540px;margin:0 0 26px;}
.hero .sx-kicker{color:#8fb4ff;}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;}
.hero .vis{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;}
.hero .vis img{border-radius:12px;background:#fff;height:340px;width:100%;object-fit:contain;padding:14px;}
.hero .vis .cap{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:#b9c6dc;}
.hero .vis .cap b{color:#fff;font-family:'Poppins';}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:10px;position:relative;transition:.15s;}
.step:hover{border-color:#cdd9ee;box-shadow:0 14px 30px rgba(16,26,43,.1);transform:translateY(-2px);}
.step .n{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;font-family:'Poppins';font-weight:700;display:grid;place-items:center;}
.step h4{font-size:16px;}
.step p{color:#3a475e;font-size:13.5px;line-height:1.55;margin:0;flex:1;}
.step a.go{color:var(--blue);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cmp .c{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;}
.cmp .c.bad{border-color:#f3d2d2;background:#fffafa;}
.cmp .c.good{border-color:#bfe6cf;background:#f6fcf8;}
.cmp h4{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.cmp ul{margin:0;padding-left:18px;color:#3a475e;font-size:13.5px;line-height:1.7;}
.arch{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:center;}
.arch .nd{border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-align:center;background:#fff;}
.arch .nd b{display:block;font-family:'Poppins';font-size:13.5px;margin-bottom:4px;}
.arch .nd span{font-size:12px;color:var(--muted);line-height:1.4;display:block;}
.arch .nd .ic{width:40px;height:40px;border-radius:10px;background:#eef3fb;color:var(--blue);display:grid;place-items:center;margin:0 auto 10px;font-size:20px;}
.arch .nd.sap .ic{background:#fff3e0;color:#c77700;} .arch .nd.sf .ic{background:#e6f6fc;color:var(--sf);}
.arch .ar{text-align:center;color:var(--blue);font-size:30px;font-weight:700;line-height:1;}
.arch .ar span{display:block;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.demo-tip{position:fixed;left:18px;bottom:18px;z-index:90;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;color:#33415a;box-shadow:0 10px 30px rgba(16,26,43,.15);max-width:280px;display:flex;gap:10px;align-items:flex-start;}
.demo-tip .ic{width:26px;height:26px;border-radius:7px;background:var(--gold);color:#1c1300;display:grid;place-items:center;font-size:14px;flex-shrink:0;}
.demo-tip b{display:block;font-size:12.5px;}
.demo-tip button{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;}

/* Print / PDF sheet (hidden on screen) */
.pdf-host{position:absolute;left:-10000px;top:0;width:816px;}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:1080px){
 .cfg .sx-wrap{grid-template-columns:1fr;} .sum{position:static;}
 .rv .sx-wrap,.det .sx-wrap{grid-template-columns:1fr;} .rv-side{position:static;}
}
@media(max-width:980px){
 .sx-nav,.sx-top{display:none;}
 .sx-prod-grid,.sx-prod-grid.three{grid-template-columns:repeat(2,1fr);}
 .sx-trust .sx-wrap{grid-template-columns:1fr 1fr;}
 .sx-foot-grid{grid-template-columns:1fr 1fr;}
 .mp-top .sx-wrap{grid-template-columns:1fr;} .mp-gallery{position:static;} .mp-main{height:380px;}
 .hero .sx-wrap{grid-template-columns:1fr;} .hero h1{font-size:34px;}
 .flow{grid-template-columns:1fr 1fr;} .acct .sx-wrap{grid-template-columns:1fr;} .acct-nav{position:static;}
 .stat-row{grid-template-columns:1fr 1fr;} .arch{grid-template-columns:1fr;} .arch .ar{transform:rotate(90deg);padding:6px 0;}
 .feat-grid,.fb-grid,.cmp{grid-template-columns:1fr;}
 .demo-tip{display:none;}
}
@media(max-width:640px){
 .sx-prod-grid,.sx-prod-grid.three{grid-template-columns:1fr;}
 .sx-head .sx-wrap{gap:12px;} .sx-btn.hdr-rfq span{display:none;}
 .flow{grid-template-columns:1fr;} .f-grid{grid-template-columns:1fr;}
 .rv-item{grid-template-columns:70px 1fr;} .rv-item .r{grid-column:1/-1;text-align:left;} .rv-item .r .acts{justify-content:flex-start;}
 .mp-quick{grid-template-columns:1fr 1fr;} .mp-actions{flex-direction:column;}
 .stat-row{grid-template-columns:1fr;} .tbl .hide-m{display:none;}
 .det-item .h{grid-template-columns:60px 1fr;} .det-item .h .tot{grid-column:1/-1;text-align:left;}
 .sx-foot-grid{grid-template-columns:1fr;} .sx-foot-bottom{flex-direction:column;gap:8px;}
 .rv-steps .s span.t{display:none;}
}