/* PrimeRange Fluid Power — industrial parts catalog UI
   Self-contained: system font stacks only, no external font loads. */

:root{
  --ink:#16191d;          /* near-black graphite */
  --steel:#3a4149;        /* body text */
  --sub:#6b7580;          /* secondary */
  --line:#dde1e6;         /* hairlines */
  --line-2:#eef1f4;       /* faint fill */
  --bg:#f4f6f8;           /* page */
  --panel:#ffffff;
  --amber:#f5a300;        /* safety amber accent (native to pneumatics) */
  --amber-ink:#7a5200;
  --ok:#1f8a4c;           /* in stock */
  --low:#c0392b;          /* low/out */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:var(--sans); color:var(--steel); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.mono{font-family:var(--mono);}

/* ---- top bar --------------------------------------------------------- */
.topbar{
  background:var(--ink); color:#fff; border-bottom:3px solid var(--amber);
}
.topbar .wrap{
  max-width:1200px; margin:0 auto; padding:0 20px; height:60px;
  display:flex; align-items:center; gap:24px;
}
.logo{display:flex; align-items:baseline; gap:8px; font-weight:800; letter-spacing:-.02em; font-size:19px;}
.logo b{color:var(--amber);}
.logo small{font-family:var(--mono); font-weight:500; font-size:11px; color:#aeb6bf; letter-spacing:.08em;}
.search{flex:1; display:flex;}
.search input{
  flex:1; border:none; height:38px; padding:0 12px; font:inherit;
  border-radius:4px 0 0 4px; outline:none;
}
.search button{
  border:none; background:var(--amber); color:var(--ink); font-weight:700;
  padding:0 18px; border-radius:0 4px 4px 0; cursor:pointer; font:inherit;
}
.topbar nav{display:flex; gap:18px; font-size:13px; color:#cfd5db;}
.topbar nav a:hover{color:#fff;}
.cartlink{color:var(--amber)!important; font-weight:700;}

/* ---- utility strip --------------------------------------------------- */
.strip{background:#20252b; color:#9aa3ad; font-size:12px; font-family:var(--mono);}
.strip .wrap{max-width:1200px; margin:0 auto; padding:6px 20px; display:flex; gap:26px;}
.strip b{color:#e4e8ec;}

/* ---- layout ---------------------------------------------------------- */
.page{max-width:1200px; margin:22px auto; padding:0 20px; display:grid;
      grid-template-columns:220px 1fr; gap:24px;}
.page.single{grid-template-columns:1fr; max-width:920px;}
.rail h4{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sub);
         margin:0 0 10px; font-weight:700;}
.rail a{display:block; padding:7px 10px; border-radius:4px; color:var(--steel);
        font-size:14px; border-left:2px solid transparent;}
.rail a:hover{background:var(--line-2); border-left-color:var(--amber);}
.rail a.active{background:#fff; border-left-color:var(--amber); font-weight:600; color:var(--ink);}

/* ---- headings -------------------------------------------------------- */
.crumb{font-size:12px; color:var(--sub); font-family:var(--mono); margin:0 0 6px;}
.crumb a:hover{color:var(--amber-ink);}
h1.title{font-size:22px; color:var(--ink); margin:0 0 2px; letter-spacing:-.01em;}
.subttl{color:var(--sub); margin:0 0 18px; font-size:14px;}

/* ---- product grid ---------------------------------------------------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:8px;
      padding:14px; display:flex; flex-direction:column; transition:box-shadow .12s, border-color .12s;}
.card:hover{border-color:var(--amber); box-shadow:0 4px 16px rgba(20,25,29,.08);}
.card .sku{font-family:var(--mono); font-size:12px; color:var(--sub);}
.card .cat{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-ink);
           font-weight:700; margin:2px 0;}
.card .name{font-weight:600; color:var(--ink); margin:2px 0 10px; line-height:1.3; min-height:40px;}
.card .row{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.card .price{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--ink);}
.stock{font-size:12px; font-family:var(--mono);}
.stock.ok::before{content:"● "; color:var(--ok);}
.stock.low::before{content:"● "; color:var(--low);}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-block; border:none; border-radius:5px; cursor:pointer; font:inherit;
     font-weight:700; padding:10px 16px; background:var(--amber); color:var(--ink);}
.btn:hover{filter:brightness(1.05);}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--ink);}
.btn.block{display:block; width:100%; text-align:center;}

/* ---- product detail -------------------------------------------------- */
.detail{background:var(--panel); border:1px solid var(--line); border-radius:8px;
        padding:26px; display:grid; grid-template-columns:1fr 320px; gap:30px;}
.detail .imgbox{background:var(--line-2); border-radius:6px; min-height:280px; display:flex;
                align-items:center; justify-content:center; color:var(--sub); font-family:var(--mono);}
.spec{width:100%; border-collapse:collapse; margin-top:14px; font-size:14px;}
.spec td{padding:8px 10px; border-bottom:1px solid var(--line);}
.spec td:first-child{color:var(--sub); width:45%;}
.spec td:last-child{font-family:var(--mono); color:var(--ink);}
.buybox{border:1px solid var(--line); border-radius:8px; padding:18px; align-self:start;}
.buybox .price{font-family:var(--mono); font-size:28px; font-weight:800; color:var(--ink);}

/* ---- forms / cart ---------------------------------------------------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; color:var(--sub); margin-bottom:5px;}
.field input{width:100%; height:40px; border:1px solid var(--line); border-radius:5px;
             padding:0 12px; font:inherit; outline:none;}
.field input:focus{border-color:var(--amber);}
.note{font-size:13px; color:var(--sub); margin-top:12px;}
table.lines{width:100%; border-collapse:collapse;}
table.lines th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
               color:var(--sub); border-bottom:2px solid var(--line); padding:8px;}
table.lines td{padding:10px 8px; border-bottom:1px solid var(--line); font-size:14px;}
table.lines .m{font-family:var(--mono);}

/* ---- footer ---------------------------------------------------------- */
footer{border-top:1px solid var(--line); margin-top:40px; background:#fff;}
footer .wrap{max-width:1200px; margin:0 auto; padding:24px 20px; color:var(--sub); font-size:13px;
             display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* ---- chatbot --------------------------------------------------------- */
#chatToggle{position:fixed; right:22px; bottom:22px; background:var(--ink); color:#fff;
            border:2px solid var(--amber); border-radius:999px; padding:13px 20px; font-weight:700;
            cursor:pointer; box-shadow:0 6px 20px rgba(20,25,29,.28); z-index:50;}
#chat{position:fixed; right:22px; bottom:78px; width:340px; max-height:62vh; background:#fff;
      border:1px solid var(--line); border-radius:12px; display:none; flex-direction:column;
      box-shadow:0 16px 48px rgba(20,25,29,.25); overflow:hidden; z-index:50;}
#chat .head{background:var(--ink); color:#fff; padding:12px 14px; font-weight:700;
            border-bottom:3px solid var(--amber);}
#log{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px;}
.msg{padding:8px 11px; border-radius:10px; max-width:86%; white-space:pre-wrap; font-size:14px;}
.msg.user{align-self:flex-end; background:var(--ink); color:#fff;}
.msg.bot{align-self:flex-start; background:var(--line-2); color:var(--steel);}
#inrow{display:flex; border-top:1px solid var(--line);}
#inrow input{flex:1; border:none; padding:12px; font:inherit; outline:none;}
#inrow button{border:none; background:#fff; padding:0 14px; font-weight:700; color:var(--amber-ink); cursor:pointer;}

@media(max-width:760px){
  .page,.detail{grid-template-columns:1fr;}
  .topbar .wrap{flex-wrap:wrap; height:auto; padding:10px 16px;}
  .search{order:3; flex-basis:100%;}
}