/*
 * BNF PLUS storefront.
 *
 * The palette is taken from the goods themselves rather than from a brand
 * guide: cool shop-drawing greys, bearing-steel mid tones, and brass as the one
 * warm accent — bronze cages and brass shims are what is actually in these
 * boxes. Nothing here is decorative; brass marks only the things a customer
 * acts on.
 *
 * Type is monospace-forward on purpose. This trade speaks in part numbers and
 * three-number size stamps (45 x 72 x 10), and those only read correctly when
 * the digits line up in a column. Prose gets the sans face; every identifier,
 * dimension and count gets the mono.
 */

:root {
  --paper:  #eef1f3;
  --card:   #ffffff;
  --ink:    #10151a;
  --steel:  #5d6975;
  --rule:   #d3dae0;
  --rule-2: #e6ebee;
  --brass:  #9d6f1c;
  --brass-lt: #f5ecd8;
  --stock:  #17724a;
  --low:    #8a5a0d;
  --indent: #6b7681;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` has to win. The drawer and scrim both set a display value in their
 * own rules, which outranks the browser's [hidden] { display: none } — leaving
 * a full-height invisible panel over the right of the page, eating every click
 * that landed on it. Anything that sets display and toggles hidden needs this.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ── top bar ─────────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex; align-items: baseline; gap: 7px;
  text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.brand-bnf {
  font-family: var(--sans);
  font-weight: 800; font-size: 20px; letter-spacing: -0.04em;
}
.brand-plus {
  font-family: var(--sans);
  font-weight: 800; font-size: 20px; letter-spacing: -0.04em;
  color: var(--brass);
}
.brand-sub {
  font-family: var(--mono);
  font-size: 10.5px; color: var(--steel);
  letter-spacing: 0.02em;
}

.find { flex: 1; max-width: 520px; }
.find input {
  width: 100%; height: 38px;
  padding: 0 13px;
  font-family: var(--mono); font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.find input::placeholder { color: var(--steel); }
.find input:focus { background: var(--card); border-color: var(--brass); outline: none; }

.listbtn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 15px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 3px;
  cursor: pointer; white-space: nowrap;
}
.listbtn:hover { border-color: var(--brass); }
.listcount {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--paper); color: var(--steel);
  border-radius: 2px;
}
.listbtn[data-filled="1"] .listcount { background: var(--brass); color: #fff; }

/* ── the dimension finder ────────────────────────────────────────────── */

.gauge {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  padding: 46px 20px 34px;
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass);
}

.gauge h1 {
  margin: 0;
  font-size: clamp(27px, 4.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.lede {
  margin: 14px auto 0; max-width: 46ch;
  color: var(--steel); font-size: 15px;
}

/*
 * The two lead categories. Bearings and filters carry BNF's deepest stock and
 * are the reason most people arrive, so they get the width — the third tile is
 * a door to the rest of the catalogue, not an equal partner, and is styled
 * quieter to say so.
 */
.lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.9fr);
  gap: 10px;
  width: 100%;
  max-width: 880px;
  text-align: left;
}

.lane {
  display: grid; gap: 3px; align-content: start;
  padding: 16px 17px 15px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
}
.lane:hover { border-color: var(--brass); }
.lane[aria-selected="true"] {
  background: var(--brass-lt);
  border-color: var(--brass);
}

.lane-n {
  font-size: 19px; font-weight: 800; letter-spacing: -0.03em;
}
.lane[aria-selected="true"] .lane-n { color: var(--brass); }

.lane-how {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
}
.lane-count {
  font-family: var(--mono); font-size: 11.5px; color: var(--steel);
  margin-top: 4px;
}
.lane-count b { color: var(--ink); font-weight: 700; }

/*
 * The catch-all is a door to the rest of the catalogue, not a third headline
 * category. It stays quiet even when it is the active one — highlighting it in
 * brass would pull the eye away from the two shelves this business runs on,
 * which is the opposite of what the page is for.
 */
.lane-all {
  background: transparent;
  border-color: var(--rule);
  border-style: dashed;
}
.lane-all .lane-n { font-size: 15px; font-weight: 700; color: var(--steel); }
.lane-all .lane-how { font-size: 10px; }
.lane-all[aria-selected="true"] {
  background: transparent;
  border-color: var(--steel);
  border-style: solid;
}
.lane-all[aria-selected="true"] .lane-n { color: var(--ink); }

/*
 * Both finders are always present. The lane picks which leads: a bearing is
 * usually looked up on callipers, a filter on the number — but either works for
 * either, so neither is ever taken away. The secondary one is set back rather
 * than hidden, so switching lanes never makes a control disappear under the
 * cursor.
 */
.finders {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; width: 100%;
}
.finders[data-primary="number"] .dims { order: 2; }
.finders[data-primary="number"] .findnum { order: 1; }
.finders[data-primary="size"] .dims { order: 1; }
.finders[data-primary="size"] .findnum { order: 2; }

/* The secondary finder is quieter, and comes back to full strength on focus. */
.finders[data-primary="number"] .dims,
.finders[data-primary="size"] .findnum {
  opacity: 0.62;
  transform: scale(0.94);
}
.finders[data-primary="number"] .dims:focus-within,
.finders[data-primary="size"] .findnum:focus-within,
.finders[data-primary="number"] .dims:hover,
.finders[data-primary="size"] .findnum:hover {
  opacity: 1;
  transform: none;
}

.dims-hint {
  flex-basis: 100%; margin: 2px 0 0; text-align: center;
  font-size: 12.5px; color: var(--steel);
}
.dims-hint:empty { display: none; }

.findnum { display: grid; gap: 7px; justify-items: center; width: 100%; max-width: 560px; }
.findnum-l {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel);
}
.findnum input {
  width: 100%; height: 58px;
  padding: 0 16px;
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--rule); border-radius: 3px;
}
.findnum input::placeholder { color: #b4bec7; font-weight: 400; font-size: 16px; }
.findnum input:focus { border-color: var(--brass); background: var(--card); outline: none; }
.findnum-hint { margin: 0; font-size: 12.5px; color: var(--steel); max-width: 44ch; text-align: center; }

/*
 * The three inputs read as the stamp on the part — 45 × 72 × 10 — so they are
 * sized like the number, not like a form field, and the × stays between them
 * at every width.
 */
.dims {
  display: flex; align-items: flex-end; justify-content: center;
  flex-wrap: wrap; gap: 10px;
}

.dim { position: relative; display: grid; gap: 6px; }
.dim label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel);
}
.dim input {
  width: 116px; height: 62px;
  padding: 0 34px 0 14px;
  font-family: var(--mono); font-size: 25px; font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
}
.dim input::placeholder { color: #b4bec7; font-weight: 400; }
.dim input:focus { border-color: var(--brass); background: var(--card); outline: none; }
.dim input[data-set="1"] { border-color: var(--brass); background: var(--brass-lt); }
.unit {
  position: absolute; right: 12px; bottom: 21px;
  font-family: var(--mono); font-size: 11.5px; color: var(--steel);
  pointer-events: none;
}

.times {
  font-family: var(--mono); font-size: 19px; color: var(--steel);
  padding-bottom: 20px;
}

.tol {
  display: grid; gap: 6px; margin-left: 14px; text-align: left;
}
.tol label {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel);
}
.tol input { width: 132px; accent-color: var(--brass); }

.counts {
  margin: 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--steel);
}
.counts strong { color: var(--ink); font-weight: 700; }

/* ── board: filters + results ────────────────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 20px 60px;
  align-items: start;
}

.filters {
  position: sticky; top: calc(var(--bar-h) + 16px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 15px;
}
.filter-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.filter-head h2 {
  margin: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel);
  font-weight: 600;
}
.clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; color: var(--brass);
  text-decoration: underline; text-underline-offset: 2px;
}

.facet + .facet { margin-top: 16px; border-top: 1px solid var(--rule-2); padding-top: 14px; }
.facet h3 {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel);
  font-weight: 600;
}
.opt {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; cursor: pointer;
  font-size: 13.5px;
}
.opt input { accent-color: var(--brass); margin: 0; flex: none; }
.opt span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt em {
  font-family: var(--mono); font-size: 11px; color: var(--steel); font-style: normal;
}
.facet-more {
  margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--brass); text-decoration: underline; text-underline-offset: 2px;
}

.results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 11px;
}
.tally { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--steel); }
.tally strong { color: var(--ink); }
#sort {
  height: 32px; padding: 0 8px;
  font-family: var(--sans); font-size: 13px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
}

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

/*
 * Rows are deliberately tight. This is a list to scan, not to browse — the
 * customer is looking for one size among thousands, so fitting more lines on
 * screen beats giving each one room to breathe.
 */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 9px 13px;
}
.row:hover { border-color: #b9c4cd; }

.row-main { min-width: 0; }
.row-pn {
  font-family: var(--mono); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.row-brand {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brass);
}
.row-desc {
  margin: 1px 0 0; color: var(--steel); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-meta {
  margin: 2px 0 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--steel);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.row-meta b { color: var(--ink); font-weight: 600; }
/* the size that matched the calliper reading */
.row-meta .hit { background: var(--brass-lt); color: var(--brass); padding: 0 4px; border-radius: 2px; }

.avail {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.avail::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.avail[data-a="stock"]  { color: var(--stock); }
.avail[data-a="low"]    { color: var(--low); }
.avail[data-a="indent"] { color: var(--indent); }

.add {
  height: 34px; padding: 0 13px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 3px;
  cursor: pointer; white-space: nowrap;
}
.add:hover { border-color: var(--brass); color: var(--brass); }
.add[data-in="1"] { background: var(--brass); border-color: var(--brass); color: #fff; }

.more {
  margin: 18px auto 0; display: block;
  height: 40px; padding: 0 26px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px; cursor: pointer;
}
.more:hover { border-color: var(--brass); }

.empty {
  background: var(--card); border: 1px solid var(--rule); border-radius: 3px;
  padding: 34px 22px; text-align: center;
}
.empty h3 { margin: 0 0 7px; font-size: 16px; }
.empty p { margin: 0; color: var(--steel); font-size: 14px; }

/* ── enquiry drawer ──────────────────────────────────────────────────── */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 100%);
  background: var(--card);
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--rule);
}
.drawer-head h2 { margin: 0; font-size: 16px; letter-spacing: -0.02em; }
.x {
  background: none; border: 0; cursor: pointer;
  font-size: 25px; line-height: 1; color: var(--steel); padding: 0 4px;
}
.drawer-rows {
  list-style: none; margin: 0; padding: 10px 18px;
  overflow-y: auto; flex: 1; display: grid; gap: 9px; align-content: start;
}
.dline {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 9px;
}
.dline-pn { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.dline-desc {
  font-size: 12px; color: var(--steel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qty {
  width: 58px; height: 30px; padding: 0 7px;
  font-family: var(--mono); font-size: 13px; text-align: right;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
}
.drop {
  background: none; border: 0; cursor: pointer;
  color: var(--steel); font-size: 17px; line-height: 1; padding: 0 3px;
}
.drop:hover { color: #b03636; }

.drawer-foot { border-top: 1px solid var(--rule); padding: 15px 18px; }

.who { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.fld { display: grid; gap: 4px; min-width: 0; }
.fld-wide { grid-column: 1 / -1; }
.fld span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
}
.fld input, .fld textarea {
  width: 100%; padding: 7px 9px;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px;
  resize: vertical;
}
.fld input:focus, .fld textarea:focus { background: var(--card); border-color: var(--brass); outline: none; }

.quote-note { margin: 0 0 10px; font-size: 12.5px; color: var(--steel); }
.sendmsg { margin: 0 0 10px; font-size: 13px; min-height: 0; }
.sendmsg[data-kind="ok"] { color: var(--stock); font-family: var(--mono); }
.sendmsg[data-kind="err"] { color: #a33; }
.sendmsg:empty { display: none; }
.send {
  width: 100%; height: 44px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 700;
  background: var(--brass); color: #fff;
  border: 0; border-radius: 3px; cursor: pointer;
}
.send:disabled { background: var(--rule); color: var(--steel); cursor: not-allowed; }

.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 21, 26, 0.35);
}

/* ── footer ──────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule);
  background: var(--card);
  padding: 34px 20px;
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1320px; margin: 0 auto;
  font-size: 13px; color: var(--steel);
}
.foot p { margin: 0 0 5px; }
.foot-brand {
  font-weight: 800; font-size: 16px; letter-spacing: -0.03em; color: var(--ink);
}
.foot-h {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 7px;
}

/* ── narrow ──────────────────────────────────────────────────────────── */

/* Desktop always shows the facets; the toggle is a small-screen affordance. */
.togglefilters { display: none; }

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
  .filters { position: static; }
  .foot { grid-template-columns: 1fr; }

  .filter-head { margin-bottom: 0; }
  .togglefilters {
    display: inline-block; margin-left: auto; margin-right: 14px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--sans); font-size: 12px; color: var(--brass);
    text-decoration: underline; text-underline-offset: 2px;
  }
  #facets { display: none; }
  .filters[data-open="1"] #facets { display: block; margin-top: 12px; }
}

@media (max-width: 760px) {
  .lanes { grid-template-columns: 1fr 1fr; }
  .lane-all { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .bar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .brand-sub { display: none; }
  .find { order: 3; flex-basis: 100%; max-width: none; }
  .gauge { padding: 30px 14px 26px; }
  .dim input { width: 92px; height: 54px; font-size: 20px; padding-right: 28px; }
  .unit { bottom: 18px; right: 9px; }
  .tol { margin-left: 0; flex-basis: 100%; justify-items: center; text-align: center; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .add { grid-column: 2; }
  .avail { grid-column: 1 / -1; }
  .board { padding: 16px 14px 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .row, .add, .listbtn { transition: border-color .12s ease, color .12s ease, background .12s ease; }
}