:root{--ink:#182534;--nav:#141e2b;--muted:#516173;--line:#dfe5eb;--canvas:#f4f6f8;--paper:#fff;--green:#22664b;--green-bg:#e8f5ed;--amber:#ffbd50;--orange:#78501a;--warm:#fff2d9;--shadow:0 10px 28px #1725360a;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--canvas)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #3b7ec3;outline-offset:3px}h1,h2,h3,p{margin:0}svg{width:21px;height:21px;display:block;stroke-width:1.7;flex-shrink:0}small{display:block}.shell{max-width:1376px;padding-inline:48px;margin-inline:auto}
.mast{background:var(--nav);color:#fff}.top{min-height:88px;display:flex;align-items:center;gap:30px}.brand{display:flex;gap:12px;align-items:center;font-size:20px;font-weight:850;line-height:1.03;letter-spacing:.04em;white-space:nowrap}.brand-pro{color:var(--amber)}.brand small{font-size:9px;letter-spacing:.17em;color:#bac4d1;margin-top:7px}.mark{height:41px;width:41px;display:grid;place-items:center;background:var(--amber);border-radius:9px;color:#182534}.mark svg{width:25px;height:25px}.search{display:flex;align-items:center;background:#fff;color:var(--muted);flex:1;margin-left:9px;border-radius:7px;overflow:hidden;min-width:140px;padding-left:13px}.search input{border:0;min-width:0;width:100%;height:42px;padding:0 10px;color:var(--ink);background:white}.search button{border:0;background:#edf1f5;color:var(--ink);align-self:stretch;padding:0 15px;font-weight:700;font-size:13px}.account,.cart{background:none;color:white;border:0;display:flex;align-items:center;gap:10px;padding:0;white-space:nowrap}.account{text-align:left;font-size:13px;font-weight:700}.account small{color:#bac4d1;margin-top:4px;font-weight:500}.avatar{display:grid;place-items:center;background:#344457;width:35px;height:35px;border-radius:8px}.account svg{width:14px}.cart{position:relative;padding:8px}.cart b{background:var(--amber);color:#172332;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;border-radius:20px;font-size:11px;position:absolute;top:-3px;right:-5px}
.nav-wrap{background:white;border-bottom:1px solid var(--line)}.nav-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.nav-row nav{display:flex;gap:27px;overflow:auto;scrollbar-width:none}.nav-row a{display:flex;align-items:center;gap:8px;min-height:56px;white-space:nowrap;border-bottom:3px solid transparent;padding:2px 1px 0;color:var(--muted);font-size:14px;font-weight:650}.nav-row a.active{border-color:#d58d1d;color:var(--ink)}.demo{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#624718;white-space:nowrap;background:var(--warm);padding:6px 10px;border-radius:20px}.demo i{height:6px;width:6px;border-radius:50%;background:#be7913}
main{min-height:70vh;padding-top:28px;padding-bottom:25px}.intro{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:19px}.crumb{font-size:13px;color:var(--muted);margin-bottom:10px}.crumb strong{color:var(--ink)}h1{font-size:clamp(29px,4vw,39px);letter-spacing:-.044em;line-height:1.12}h2{font-size:24px;letter-spacing:-.037em}.sub{font-size:14px;color:var(--muted);line-height:1.55;margin-top:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:750;border:1px solid var(--line);background:white;color:var(--ink);border-radius:7px;min-height:39px;padding:8px 13px}.btn svg{width:17px;height:17px}.btn:hover,.chip:hover{border-color:#8194a7}.primary{background:var(--amber);border-color:var(--amber)}.dark{background:var(--nav);color:white;border-color:var(--nav)}.full{width:100%}
.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;min-height:260px;background:linear-gradient(115deg,#162332 24%,#2b3e50);color:white;display:flex;align-items:center;padding:33px 38px}.hero:before{content:"";position:absolute;z-index:-2;inset:0 0 0 29%;background:repeating-linear-gradient(145deg,transparent 0 24px,#8194a536 26px,#101926 30px,transparent 35px 52px),linear-gradient(140deg,#162432,#25394b 55%,#76644e);background-image:url('./roof.webp'),repeating-linear-gradient(145deg,transparent 0 24px,#8194a536 26px,#101926 30px,transparent 35px 52px),linear-gradient(140deg,#162432,#25394b 55%,#76644e);background-size:cover;background-position:center 56%}.hero:after{content:"";z-index:-1;position:absolute;inset:0;background:linear-gradient(90deg,#142130 22%,#152331f2 39%,#15233126 100%)}.hero .over{display:flex;align-items:center;gap:8px;color:#ffd487;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px}.hero h2{font-size:clamp(29px,4.2vw,47px);line-height:1.03;max-width:565px}.hero p{max-width:450px;font-size:14px;line-height:1.5;color:#e1e8f0;margin:12px 0 19px}.band{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:15px}.band button{background:white;border:0;display:flex;align-items:center;gap:11px;padding:13px;text-align:left;color:var(--ink)}.band button:hover{background:#fafbfc}.band .next{margin-left:auto;color:var(--muted);width:15px}.band strong{font-size:13px}.band small{margin-top:3px;color:var(--muted);font-size:11px}.tile-icon{display:grid;place-items:center;background:#eef2f6;color:#264058;width:37px;height:37px;border-radius:7px;flex:none}.tile-icon.warm{background:var(--warm);color:#875819}
.section{margin-top:29px}.section-top{display:flex;gap:14px;justify-content:space-between;align-items:end;margin-bottom:13px}.section-top .sub{margin-top:4px}.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}.chip{background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:12px;font-weight:700;padding:8px 11px;min-height:34px}.chip.active{background:#213245;border-color:#213245;color:white}.filters select{margin-left:auto}.select,input.field{background:white;color:var(--ink);border:1px solid #cdd6df;border-radius:7px;padding:9px 11px;font-size:13px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card,.panel{background:white;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:0}.product{display:flex;flex-direction:column;overflow:hidden}.product-visual{position:relative;display:grid;place-items:center;height:168px;overflow:hidden;background:#c5d4e2;border-bottom:1px solid #bacbdc}.product-visual img{display:block;width:100%;height:100%;max-height:168px;object-fit:contain}.product-visual .code,.product-visual .sample{position:absolute;bottom:8px;font-size:10px;font-weight:700;color:#334b61;border-radius:4px;background:#f5f8fbe8;padding:3px 5px}.product-visual .code{left:8px;letter-spacing:.04em}.product-visual .sample{right:8px}.product-body{padding:13px 13px 0;flex:1}.vendor{font-size:10px;font-weight:800;letter-spacing:.055em;color:var(--muted);text-transform:uppercase}.product h3{font-size:15px;margin:6px 0 4px;line-height:1.25}.spec{color:var(--muted);font-size:11px;line-height:1.4;min-height:17px}.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;background:var(--green-bg);color:var(--green);border-radius:5px;font-size:11px;font-weight:750;white-space:nowrap}.pill.warn{background:var(--warm);color:var(--orange)}.pill.neutral{background:#eef2f6;color:#42586d}.product-body .pill{margin-top:9px}.product-foot{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:12px 13px}.price{font-size:18px;font-weight:820;white-space:nowrap}.price+small{font-size:10px;color:var(--muted);margin-top:2px}.buy{padding-inline:9px}.panel{padding:20px}.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:16px;align-items:start}.stack{display:grid;gap:13px}.row{display:flex;align-items:center;justify-content:space-between;gap:14px}.line{border-bottom:1px solid var(--line);padding:12px 0}.line:last-child{border-bottom:0}.line small{color:var(--muted);margin-top:4px}.notice{background:#eef3f8;color:#344b62;border-radius:7px;padding:11px 13px;font-size:13px;line-height:1.48}.notice.good{background:var(--green-bg);color:var(--green)}.notice.warn{background:var(--warm);color:var(--orange)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}td,th{padding:12px;vertical-align:middle;border-bottom:1px solid var(--line)}th{background:#f1f4f7;color:#435366;white-space:nowrap}tr:last-child td{border-bottom:0}.controls{display:flex;gap:5px;align-items:center}.controls button{min-height:32px;min-width:32px;padding:2px}.controls output{min-width:25px;text-align:center}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:16px}.metric{padding:15px}.metric b{font-size:25px;display:block;margin:4px 0}.metric small{color:var(--muted)}.choice{display:flex;gap:10px;align-items:start;border:1px solid var(--line);padding:11px;border-radius:7px;font-size:13px}.choice small{margin-top:4px;color:var(--muted)}.choice:has(input:checked){border-color:#b5791b;background:#fffbf3}.form-grid{display:grid;grid-template-columns:1fr 2fr;gap:9px}.label{font-size:12px;font-weight:700;display:grid;gap:5px}.label input{width:100%}.footer{padding-top:17px;padding-bottom:22px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}dialog{width:min(480px,calc(100% - 26px));border:1px solid var(--line);border-radius:12px;padding:23px;color:var(--ink);box-shadow:0 25px 90px #0005}dialog::backdrop{background:#14213199}#toast{position:fixed;z-index:4;bottom:17px;right:17px;max-width:calc(100% - 34px);background:#162535;color:white;padding:11px 15px;border-radius:8px;box-shadow:var(--shadow);font-size:13px}#toast:empty{display:none}
@media(max-width:1050px){.shell{padding-inline:28px}.top{gap:17px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:740px){.shell{padding-inline:16px}.top{flex-wrap:wrap;gap:12px;min-height:0;padding-block:13px}.search{order:4;flex-basis:100%;margin:0}.account{margin-left:auto}.account>span:nth-child(2),.account>span:last-child{display:none}.nav-row nav{gap:17px}.nav-row a{font-size:12px;min-height:47px}.nav-row a svg{width:16px}.nav-row .demo{display:none}main{padding-top:19px}.hero{padding:25px 21px;min-height:228px}.band strong{font-size:11px}.band small,.band .next{display:none}.band button{padding:8px 6px;gap:5px}.tile-icon{width:27px;height:27px}.tile-icon svg{width:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product-body{padding:10px 9px 0}.product-foot{padding:9px;flex-wrap:wrap}.section-top .sub{display:none}.section-top select{max-width:130px}.cols{grid-template-columns:1fr}.panel{padding:12px}.intro{align-items:start;flex-direction:column}.metrics{gap:6px}.metric{padding:9px;font-size:11px}.metric b{font-size:20px}.footer{flex-wrap:wrap}}
.job-picker{display:grid;grid-template-columns:minmax(210px,1fr) minmax(190px,1fr) auto;align-items:center;gap:20px}.job-picker strong{display:flex;align-items:center;gap:7px;font-size:13px}.job-picker strong svg{width:16px;height:16px}.job-picker .sub{margin-top:4px}.job-metrics{margin:0}.job-line{border:1px solid var(--line);border-radius:8px;padding:14px}.job-line .sub{margin-top:4px}.job-quantities{margin:13px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px;background:#f2f5f8;border-radius:7px}.job-quantities dt{font-size:11px;color:var(--muted);margin-bottom:4px}.job-quantities dd{margin:0;font-size:13px;font-weight:750}.job-quantities .pill{white-space:normal}.job-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}.job-actions:empty{display:none}
@media(max-width:740px){.job-picker{grid-template-columns:1fr 1fr;gap:12px}.job-picker .label{grid-column:1/-1}.job-picker>.btn{justify-self:end}.job-line .row{align-items:start}.job-line{padding:10px}.job-quantities{gap:8px;padding:9px}}
.express-mark{position:absolute;z-index:1;top:8px;left:8px;display:flex;gap:4px;align-items:center;background:#ffcf72;color:#392608;padding:5px 7px;border-radius:5px;font-size:11px;font-weight:850}.express-mark svg,.express-filter svg,.delivery-option strong svg{width:14px;height:14px}.express-filter{display:inline-flex;align-items:center;gap:5px;background:var(--warm);color:var(--orange);border-color:#e6ca94}.express-filter.active{background:#714a10;border-color:#714a10}.delivery-option{align-items:center;min-height:58px}.delivery-option span{flex:1;min-width:0}.delivery-option strong{display:flex;align-items:center;gap:5px}.delivery-option b{font-size:13px;white-space:nowrap}.delivery-express strong{color:#775016}.total{padding-top:11px;border-top:1px solid var(--line);font-size:16px}.checkout-note{color:var(--muted);text-align:center;line-height:1.45}#addressFields[hidden]{display:none}

/* Procurement workspace */
.top{min-height:70px;gap:24px}.nav-row a{min-height:48px}.cart{background:#2b394b;padding:9px 12px;border-radius:8px}.cart b{position:static}.cart-label{font-size:13px;font-weight:700}.shop-layout{display:grid;grid-template-columns:222px minmax(0,1fr);gap:28px;align-items:start}.shop-sidebar{display:grid;gap:14px;position:sticky;top:20px}.shop-categories,.shop-shortcuts{background:white;border:1px solid var(--line);border-radius:10px;padding:9px;display:grid;gap:3px}.shop-categories h2{font-size:13px;letter-spacing:0;color:var(--muted);padding:8px 9px 9px}.shop-category,.shop-shortcuts a{display:flex;gap:9px;align-items:center;text-align:left;border:0;border-radius:7px;background:white;color:var(--ink);font-size:13px;padding:10px 8px;min-height:41px}.shop-category svg,.shop-shortcuts svg,.shop-express-link>svg{width:17px;height:17px}.shop-category:hover,.shop-shortcuts a:hover{background:#f1f4f7}.shop-category.active{background:#eaf0f6;font-weight:780;color:#203d59}.shop-shortcuts small,.shop-express-link small{margin-top:3px;color:var(--muted);font-size:11px}.category-next{margin-left:auto;width:13px!important;color:var(--muted)}
.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}.shop-heading h1{overflow-wrap:anywhere}.shop-heading .sub{margin-top:4px}.shop-express-link{display:flex;align-items:center;gap:9px;border:1px solid #ecd29f;background:#fff5df;border-radius:8px;padding:9px 11px;font-size:12px;color:#684718;flex-shrink:0}.shop-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px}.shop-toolbar .select,.shop-toolbar .chip{min-height:38px}.shop-toolbar #shopCategory{display:none}.shop-toolbar #vendor{margin-left:auto}.shop-status{font-size:12px;color:var(--muted);min-height:39px;padding:2px}.clear-filters{background:transparent;border:0;min-height:32px;text-decoration:underline;text-underline-offset:2px}.shop-results .grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-results .product-visual{height:154px}.shop-results .product-body{padding-top:12px}.shop-results .buy{min-height:40px}.shop-results .price{font-size:19px}.checkout-summary{position:sticky;top:20px}.checkout-summary [data-order]{min-height:47px}
@media(max-width:1110px){.shop-layout{grid-template-columns:190px minmax(0,1fr);gap:16px}.shop-results .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cart-label{display:none}}
@media(max-width:740px){
 body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}.mast{position:sticky;top:0;z-index:3;box-shadow:0 3px 12px #14213122}.top{min-height:0;gap:9px;padding-block:9px}.brand{font-size:17px;gap:7px}.mark{width:34px;height:34px}.mark svg{width:20px;height:20px}.brand small{display:none}.search input{height:40px}.cart{padding:7px 8px;gap:6px}.nav-wrap{position:fixed;z-index:3;inset:auto 0 0;border:0;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px #14213112}.nav-row{padding-inline:4px}.nav-row nav{width:100%;gap:0;overflow:visible;justify-content:space-around}.nav-row a{flex:1;min-width:0;min-height:58px;justify-content:center;flex-direction:column;gap:4px;font-size:10px;line-height:1.1;text-align:center;padding:4px 2px;border-bottom:0;border-top:3px solid transparent;white-space:normal}.nav-row a svg{width:18px;height:18px}.nav-row a.active{background:#fff7e8;border-color:#d58d1d}.shop-layout{display:block}.shop-sidebar{display:none}.shop-toolbar #shopCategory{display:block}.shop-heading{margin-bottom:12px;gap:7px;align-items:start}.shop-heading h1{font-size:25px}.shop-heading .sub{font-size:12px}.shop-express-link{min-height:36px;padding:7px;font-size:11px;gap:4px}.shop-express-link>svg{width:14px;height:14px}.shop-express-link small,.shop-express-link .category-next{display:none}.shop-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:7px;gap:6px}.shop-toolbar .express-filter{grid-column:1/-1;justify-content:center}.shop-toolbar #vendor{margin:0;width:100%}.shop-toolbar .select{font-size:12px;padding-inline:5px;width:100%}.shop-status{min-height:34px}.shop-results .grid{grid-template-columns:1fr}.shop-results .product{display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto}.shop-results .product-visual{grid-row:1/3;height:auto;min-height:122px;border:0;border-right:1px solid var(--line)}.shop-results .product-visual img{max-height:105px}.shop-results .product-visual .code{display:none}.shop-results .product-visual .sample{right:4px;bottom:4px;font-size:8px}.shop-results .express-mark{top:4px;left:4px;padding:3px 4px;font-size:10px}.shop-results .product-body{padding:8px 8px 0}.shop-results .product-body .pill{margin-top:4px}.shop-results .product-foot{padding:6px 8px 8px;flex-wrap:nowrap}.shop-results .price{font-size:16px}.shop-results .buy{font-size:11px;min-height:39px;padding:5px 6px;gap:4px;white-space:nowrap}.shop-results .buy svg{width:13px;height:13px}.checkout-summary{position:static}.toast,#toast{bottom:calc(66px + env(safe-area-inset-bottom))}
}