:root{
  --ink:#e8eaed; --ink-2:#b3b9c4; --ink-3:#868e9c;
  --line:#2a2f37; --line-2:#232830; --bg:#14161a; --surface:#1e2228;
  --surface-2:#262b33; --paper:#f4f5f7;
  --accent:#f26522; --accent-w:#38200f;
  --ok:#4ecb8b; --warn:#e0a640; --bad:#ef5a50;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --bar:56px; --pick:48px; --foot:30px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.5 var(--sans);color:var(--ink);background:var(--bg);
     display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}

/* ---------- header ---------- */
.bar{height:var(--bar);flex:none;display:flex;align-items:center;gap:18px;
     padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:18px;letter-spacing:-.03em}
.brand b{color:var(--accent)}
.search{position:relative;flex:1;max-width:620px;display:flex;align-items:center}
.search svg{position:absolute;left:11px;color:var(--ink-3)}
.search input{width:100%;height:38px;padding:0 40px 0 34px;border:1.5px solid var(--line);
              border-radius:8px;background:var(--surface-2);font:inherit;outline:none}
.search input:focus{border-color:var(--accent);background:var(--surface-2)}
.search kbd{position:absolute;right:10px;font:600 10px var(--mono);color:var(--ink-3);
            border:1px solid var(--line);border-radius:4px;padding:2px 5px;background:var(--surface-2)}
.cartbtn{display:flex;align-items:center;gap:8px;padding:8px 13px;
         border:1.5px solid var(--line);background:var(--surface-2);border-radius:8px;font-weight:600;color:var(--ink-2)}
.cartbtn:hover{border-color:var(--accent);color:var(--accent)}
.acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.cartbtn.quote .count{background:var(--warn)}
.cartbtn .count{background:var(--accent);color:#fff;font-size:11px;font-weight:700;
                min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}

.sug{position:absolute;top:42px;left:0;right:0;background:var(--surface);border:1px solid var(--line);
     border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.45);overflow:hidden;z-index:60;max-height:60vh;overflow-y:auto}
.sug div{padding:9px 13px;display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line-2);cursor:pointer}
.sug div:last-child{border-bottom:none}
.sug div:hover,.sug div.on{background:var(--accent-w)}
.sug .pn{font:600 12px var(--mono)}
.sug .ds{color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug .pr{font-weight:700;font-variant-numeric:tabular-nums}
.sug .at{font-size:11px;color:var(--ink-3)}

/* ---------- model picker ---------- */
.picker{height:var(--pick);flex:none;display:flex;align-items:center;gap:16px;padding:0 16px;
        background:var(--surface);border-bottom:1px solid var(--line)}
.picker label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
              letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.picker select{height:32px;padding:0 26px 0 9px;border:1.5px solid var(--line);border-radius:7px;
               background:var(--surface-2);font:14px var(--sans);color:var(--ink);outline:none;
               text-transform:none;letter-spacing:normal;font-weight:500;max-width:340px}
.picker select:focus{border-color:var(--accent)}
.vmeta{font-size:12.5px;color:var(--ink-3)}
.invstate{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.invstate b{color:var(--warn)}

/* ---------- workspace ---------- */
.work{flex:1;min-height:0;display:grid;
      grid-template-columns:210px minmax(320px,1fr) minmax(380px,520px)}
.plates{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.phead{flex:none;padding:9px 13px;font-size:11px;font-weight:700;letter-spacing:.07em;
       text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);
       display:flex;align-items:center;gap:10px}
.plates ul{list-style:none;margin:0;padding:5px;overflow-y:auto;flex:1}
.plates li{padding:7px 9px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink-2);
           display:flex;gap:8px;align-items:baseline}
.plates li:hover{background:var(--line-2)}
.plates li.on{background:var(--accent-w);color:var(--accent);font-weight:600}
.plates li .n{font:600 11px var(--mono);color:var(--ink-3);min-width:22px}
.plates li.on .n{color:var(--accent)}
.plates li .c{margin-left:auto;font-size:11px;color:var(--ink-3)}

.diagram{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);
         border-right:1px solid var(--line)}
.dtools{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;
        background:var(--surface);border-bottom:1px solid var(--line-2)}
.dtitle{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{margin-left:auto}
.dtools button{width:28px;height:28px;border:1px solid var(--line);background:var(--surface-2);border-radius:6px;
               color:var(--ink-2);line-height:1}
.dtools button#zoomfit{width:auto;padding:0 10px;font-size:12px;font-weight:600}
.dtools button:hover{border-color:var(--accent);color:var(--accent)}
.zlabel{font:600 11px var(--mono);color:var(--ink-3);min-width:38px;text-align:center}
.dscroll{flex:1;overflow:auto;padding:12px;min-height:0}
.dinner img{margin:0 auto 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);
            box-shadow:0 1px 3px rgba(0,0,0,.35)}
.dempty{height:100%;display:grid;place-items:center;color:var(--ink-3);text-align:center;padding:30px}

.parts{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.parts .phead input{margin-left:auto;height:28px;width:170px;padding:0 9px;border:1.5px solid var(--line);
                    border-radius:6px;font:13px var(--sans);outline:none;text-transform:none;
                    letter-spacing:normal;font-weight:400;color:var(--ink)}
.parts .phead input:focus{border-color:var(--accent)}
.ptable{flex:1;overflow-y:auto}
.prow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:9px 13px;border-bottom:1px solid var(--line-2)}
.prow:hover{background:var(--surface-2)}
.prow .pn{font:600 12px var(--mono);color:var(--ink)}
.prow .ds{font-size:13px;color:var(--ink-2)}
.prow .meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.prow .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.prow .price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .price.none{color:var(--ink-3);font-weight:500;font-size:12px}
.addrow{display:flex;gap:5px;align-items:center}
.addrow input{width:46px;height:28px;text-align:center;border:1.5px solid var(--line);border-radius:6px;
              font:600 13px var(--sans);outline:none}
.addrow input:focus{border-color:var(--accent)}
.addrow button{height:28px;padding:0 12px;border:none;border-radius:6px;background:var(--accent);
               color:#fff;font-weight:700;font-size:12.5px}
.addrow button:hover{background:#ff7a3d}
.addrow button:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}
.fits{display:inline-flex;align-items:center;gap:4px;background:var(--line-2);border-radius:4px;
      padding:1px 6px;font-size:11px;color:var(--ink-2);cursor:help}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
     padding:1px 5px;border-radius:3px}
.tag.in{color:var(--ok);background:rgba(78,203,139,.14)}
.tag.out{color:var(--bad);background:rgba(239,90,80,.14)}
.tag.na{color:var(--ink-3);background:var(--line-2)}
.pempty{padding:40px 20px;text-align:center;color:var(--ink-3)}

.foot{height:var(--foot);flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;
      background:var(--surface);border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}

/* ---------- cart ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70}
.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:93vw;background:var(--bg);
        z-index:71;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.55)}
.drawer header{display:flex;align-items:center;padding:15px 17px;background:var(--surface);border-bottom:1px solid var(--line)}
.drawer header h3{margin:0;font-size:16px}
.drawer header button{margin-left:auto;border:none;background:none;font-size:21px;color:var(--ink-3);line-height:1}
.drawer .items{flex:1;overflow-y:auto;padding:11px;display:flex;flex-direction:column;gap:9px}
.citem{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px;display:flex;gap:10px}
.citem .t{flex:1;min-width:0}
.citem .pn{font:600 11.5px var(--mono)}
.citem .ds{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem .m{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.citem .rm{border:none;background:none;color:var(--ink-3);font-size:17px;line-height:1;align-self:flex-start}
.citem .rm:hover{color:var(--bad)}
.drawer footer{padding:15px 17px;background:var(--surface);border-top:1px solid var(--line)}
.drawer .sum{display:flex;font-weight:700;font-size:16px;margin-bottom:11px}
.drawer .sum span{margin-left:auto;font-variant-numeric:tabular-nums}
.drawer .note{font-size:11.5px;color:var(--warn);margin-bottom:10px}
.drawer .go{width:100%;height:44px;border:none;border-radius:8px;background:var(--accent);
            color:#fff;font-weight:700;font-size:14.5px}
.drawer .go:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}

@media(max-width:1100px){
  .work{grid-template-columns:180px 1fr}
  .parts{grid-column:1/-1;border-top:1px solid var(--line);max-height:46vh}
  .work{grid-template-rows:1fr auto}
}
@media(max-width:720px){
  .work{grid-template-columns:1fr}
  .plates{max-height:150px}
  .search kbd{display:none}
}


/* ask-price button + enquiry drawer fields */
.addrow button.ask{background:var(--surface-2);color:var(--warn);border:1.5px solid rgba(224,166,64,.45)}
.addrow button.ask:hover{background:rgba(224,166,64,.14);border-color:var(--warn)}
.qfields{display:grid;gap:7px;margin-bottom:10px}
.qfields input{height:34px;padding:0 10px;border:1.5px solid var(--line);border-radius:7px;
               font:14px var(--sans);outline:none}
.qfields input:focus{border-color:var(--accent)}

/* price provenance: inventory price vs catalogue list price */
.psrc{font-size:10.5px;letter-spacing:.03em;color:var(--ink-3);margin-top:-2px}
.psrc.live{color:var(--ok);font-weight:600}

/* price-list provenance strip */
.pricebar{flex:none;display:flex;align-items:center;gap:14px;padding:6px 16px;
          background:rgba(90,140,235,.12);border-bottom:1px solid rgba(90,140,235,.28);font-size:12.5px;color:var(--ink-2)}
.pricebar b{color:var(--ink)}
.pricebar.stale{background:rgba(224,166,64,.14);border-bottom-color:rgba(224,166,64,.45)}
.pricebar .warn{margin-left:auto;font-weight:700;color:var(--warn)}

/* per-variant advisory, e.g. a book covering two brake set-ups */
.vnote{font-size:12px;color:var(--warn);background:rgba(224,166,64,.14);border:1px solid rgba(224,166,64,.45);
       border-radius:5px;padding:2px 9px;max-width:52ch;overflow:hidden;
       text-overflow:ellipsis;white-space:nowrap}
.vnote:hover{white-space:normal;overflow:visible;max-width:none}

/* own-brand alternatives shown beneath the genuine part */
.alts{grid-column:1/-1;margin-top:7px;border-top:1px dashed var(--line);padding-top:7px}
.altlabel{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
          color:var(--warn);margin-bottom:4px}
.alt{display:flex;gap:9px;align-items:baseline;font-size:12.5px;padding:2px 0}
.alt .apn{font:600 11.5px var(--mono)}
.alt .abrand{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
             background:var(--accent-w);color:var(--accent);padding:1px 6px;border-radius:3px}
.alt .aname{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.alt .aprice{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- site navigation ----------
   The catalogue used to be a dead end: no way back to the shop, no way to
   reach an account. The brand is now the home link, with the rest beside it. */
.brand{text-decoration:none;color:var(--ink);flex:none}
.sitenav{display:flex;align-items:center;gap:4px;flex:none}
.sitenav a{padding:6px 10px;border-radius:7px;text-decoration:none;font-weight:600;
           font-size:13px;color:var(--ink-2);white-space:nowrap}
.sitenav a:hover{background:var(--surface-2);color:var(--accent)}
/* The way out, made obvious. A brand that happens to be a link is not a
   back button to anyone who has not been told it is one. */
.sitenav a.back{border:1px solid var(--line);color:var(--ink);margin-right:6px}
.sitenav a.back:hover{border-color:var(--accent)}

/* Form controls inherit the browser's light defaults, so on a dark page the
   text is black on near-black. Set both explicitly, once, for all of them. */
input,select,textarea{color:var(--ink);background:var(--surface-2)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
select option{color:var(--ink);background:var(--surface)}

/* On a phone the bar has no room for seven links, but hiding them outright
   made every other page unreachable from here. Scroll them sideways instead -
   nothing is removed, it just takes a swipe. */
@media(max-width:980px){
  .sitenav a{padding:6px 8px;font-size:12.5px}
}
@media(max-width:720px){
  /* On a phone the brand, nav, search box and two buttons cannot share one
     row - the search box lost, ending up 76px wide, and searching a part
     number is the main thing anyone comes here to do. Let the bar wrap:
     brand and buttons on top, nav scrolling beneath, search full width. */
  .bar{height:auto;flex-wrap:wrap;gap:8px;padding:8px 12px}
  .brand{order:1}
  .acts{order:2;margin-left:auto}
  .sitenav{order:3;width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .sitenav::-webkit-scrollbar{display:none}
  .sitenav a{padding:6px 8px;font-size:12.5px}
  .search{order:4;flex:1 1 100%;max-width:none}
  .cartbtn{padding:8px 10px}

  /* Same squeeze on the model picker, and choosing the bike is the first
     thing a customer does. Two full-width dropdowns instead of a cramped row. */
  .picker{height:auto;flex-wrap:wrap;gap:8px;padding:9px 12px}
  .picker label{font-size:11px}
  .picker select{flex:1 1 auto;min-width:150px;max-width:none}
  .vmeta,.invstate{width:100%;margin-left:0;font-size:11.5px}

  /* The footer is a fixed 30px bar. On a phone its text wraps to three
     lines and spills over the parts list. Give it room, or drop the
     wording that is only there for a desktop reader. */
  .foot{height:auto;min-height:var(--foot);flex-wrap:wrap;gap:2px 10px;
        padding:6px 12px;line-height:1.35}
  .foot .spacer{display:none}
}

/* ---------- results that exist in the shop but not on a diagram ---------- */
.sughead{padding:7px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
         color:var(--ink-3);background:var(--surface-2);border-top:1px solid var(--line);
         border-bottom:1px solid var(--line)}
.sug .shopres{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
              padding:8px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2)}
.sug .shopres:hover{background:var(--surface-2)}
.sug .shopres .pn{font:600 12px var(--mono)}
.sug .shopres .ds{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.sug .shopres .at{color:var(--ink-3);font-size:11.5px;white-space:nowrap}
.sug .shopres .pr{font-weight:700;font-variant-numeric:tabular-nums}

/* Chrome paints autofilled fields pale yellow with black text, which on a
 dark form is unreadable - the sign-in box looked broken. There is no way
 to set the background directly, so an inset shadow covers it. The long
 transition stops Chrome repainting it on focus.
 Two token names are in use across the site, hence the fallbacks. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
-webkit-text-fill-color: var(--text, var(--ink, #e8eaed));
-webkit-box-shadow: 0 0 0 1000px var(--panel-2, var(--surface-2, #242932)) inset;
caret-color: var(--text, var(--ink, #e8eaed));
transition: background-color 9999s ease-in-out 0s;
}

/* ---------- questions and answers ---------- */
.qawrap{grid-column:1/-1;margin-top:8px}
.qatoggle{background:none;border:none;padding:0;color:var(--ink-3);font-size:11.5px;
          font-weight:600;letter-spacing:.02em}
.qatoggle:hover{color:var(--accent)}
.qatoggle:before{content:"+ ";font-weight:700}
.qatoggle.open:before{content:"- "}
.qabox{margin-top:8px;border-left:2px solid var(--line);padding-left:11px}
.qamuted{color:var(--ink-3);font-size:12.5px;padding:2px 0 8px}
.qaq{padding:6px 0 8px;border-bottom:1px solid var(--line-2)}
.qaq:last-of-type{border-bottom:none}
.qaqt{font-size:13px;font-weight:600}
.qaa{margin:6px 0 0 12px;padding-left:10px;border-left:2px solid var(--accent)}
.qaat{font-size:13px;color:var(--ink-2)}
.qawho{font-size:11px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px;align-items:center}
.rbadge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
        padding:1px 6px;border-radius:3px}
.rbadge.mech{background:rgba(78,203,139,.16);color:var(--ok)}
.rbadge.own{background:var(--accent-w);color:var(--accent)}
.qaform{display:grid;gap:6px;margin-top:9px;max-width:460px}
.qaform input,.qaform textarea{padding:7px 9px;border:1.5px solid var(--line);border-radius:6px;
                               font:13px var(--sans);outline:none;resize:vertical}
.qaform input:focus,.qaform textarea:focus{border-color:var(--accent)}
.qaform button{justify-self:start;padding:6px 16px;border:none;border-radius:6px;
               background:var(--accent);color:#fff;font-weight:700;font-size:12.5px}
.qaform button:hover{background:#ff7a3d}
.qamsg{font-size:12px;color:var(--ink-3)}
.qamsg a{color:var(--accent)}