/* Supply module styles. Colours come from the portal's tokens so light and
   dark mode both work; only layout and the stock/status marks live here. */
#bpx .sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
#bpx .sp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1000px){#bpx .sp-two{grid-template-columns:1fr}}
#bpx .sp-r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){#bpx .sp-r2{grid-template-columns:1fr}}
#bpx .sp-inline{width:auto;margin-top:0;padding:10px 18px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
#bpx .sp-sel{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px;background:var(--card,#fff);color:inherit;max-width:260px}
#bpx .sp-check{display:flex;align-items:center;gap:8px;font-size:14px;margin:8px 0 2px;text-transform:none;letter-spacing:0}
#bpx .sp-check input{width:auto;margin:0}
#bpx .sp-note{display:block;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:500;line-height:1.55;margin-bottom:16px;background:var(--tint,#f4f6fa);border:1px solid var(--line);color:inherit}
#bpx .sp-note.warn{background:#fff7ed;border-color:#f59e0b;color:#92400e}
#bpx .sp-note.bad{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
#bpx .sp-note .ms{font-size:18px;vertical-align:-4px;margin-right:7px}

/* suppliers */
#bpx .sp-sup{display:flex;flex-direction:column;gap:10px}
#bpx .sp-sup-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
#bpx .sp-sup-h b{display:block;font-size:16px;letter-spacing:-.01em}
#bpx .sp-sup-h .bpx-mut{display:block;font-size:12.5px;margin-top:2px}
#bpx .sp-drive{flex:none;text-align:center;border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:11.5px;color:var(--grey);min-width:58px;background:var(--tint,#f4f6fa)}
#bpx .sp-drive b{display:block;font-size:18px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
#bpx .sp-sup-meta{font-size:13px;line-height:1.5}
#bpx .sp-sup-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* stock marks */
#bpx .sp-stk{display:inline-block;font-size:11.5px;font-weight:650;border-radius:999px;padding:3px 9px;white-space:nowrap}
#bpx .sp-stk.ok{background:#e7f7ee;color:#137a3f}
#bpx .sp-stk.low{background:#fff3df;color:#9a5b00}
#bpx .sp-stk.out{background:#fdecec;color:#b3392f}
#bpx .sp-stk.unk{background:var(--tint,#f4f6fa);color:var(--grey)}

/* parts list builder */
#bpx .sp-items{margin-top:14px;display:flex;flex-direction:column;gap:6px}
#bpx .sp-item{display:grid;grid-template-columns:minmax(0,1fr) 72px 84px 34px;gap:6px;align-items:center}
#bpx .sp-item.sp-head{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);padding:0 2px}
#bpx .sp-item input{margin:0;padding:9px 11px;font-size:14px}
#bpx .sp-x{width:34px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--card,#fff);color:var(--grey);font-size:18px;cursor:pointer}
#bpx .sp-x:hover{color:#b3392f;border-color:#fca5a5}
#bpx .sp-prio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
#bpx .sp-prio .bpx-jobtabs{margin:0}

/* plans */
#bpx .sp-plan-grid{display:grid;grid-template-columns:1fr;gap:10px}
#bpx .sp-plan{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;background:var(--card,#fff)}
#bpx .sp-plan.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
#bpx .sp-plan-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
#bpx .sp-plan-h b{font-size:15px}
#bpx .sp-plan-big{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px;flex-wrap:wrap}
#bpx .sp-plan-big span{font-size:30px;font-weight:700;letter-spacing:-.03em}
#bpx .sp-plan-big small{font-size:13px;color:var(--grey)}
#bpx .sp-plan-sub{font-size:12.5px;margin-bottom:10px}
#bpx .sp-stop{border-top:1px solid var(--line);padding:10px 0 4px}
#bpx .sp-stop-h{display:flex;align-items:center;gap:10px;font-size:13.5px}
#bpx .sp-stop-h .bpx-mut{flex:1;font-size:12.5px}
#bpx .sp-stop-t{font-weight:650}
#bpx .sp-lines{display:flex;flex-direction:column;gap:4px;margin-top:6px}
#bpx .sp-line{display:grid;grid-template-columns:minmax(0,1fr) auto 84px;gap:8px;align-items:center;font-size:13px}
#bpx .sp-line .bpx-num{text-align:right}
#bpx .sp-line em{font-style:normal;font-size:12px}

/* purchase orders */
#bpx .sp-po{display:flex;flex-direction:column;gap:8px}
#bpx .sp-po-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
#bpx .sp-po-h b{display:block;font-size:15px;letter-spacing:.02em}
#bpx .sp-po-h .bpx-mut{display:block;font-size:12.5px;margin-top:2px}
#bpx .sp-barcode{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
#bpx .sp-barcode span{font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#0b1021}
#bpx .sp-barcode svg{max-width:100%;height:auto}
#bpx .sp-po-meta{font-size:12.5px}
#bpx .sp-po-tot{display:flex;justify-content:space-between;font-size:13.5px}
#bpx .sp-po-tot b{font-variant-numeric:tabular-nums}
#bpx .sp-po-tot small{font-weight:500;color:var(--grey)}
#bpx .sp-ticket{padding:4px 0 8px}
#bpx .sp-ticket-h{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
#bpx .sp-ticket-bar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0;text-align:center}
#bpx .sp-ticket-bar svg{max-width:100%;height:auto}
#bpx .sp-ticket-num{font:600 18px ui-monospace,Menlo,monospace;letter-spacing:.16em;margin-top:6px;color:#0b1021}

/* ---------- scanning paperwork ---------- */
#bpx .sp-drop{border:1.5px dashed var(--line);border-radius:14px;padding:26px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--tint,#f4f6fa);transition:border-color .2s,background .2s}
#bpx .sp-drop.over{border-color:var(--blue);background:var(--blue-l)}
#bpx .sp-drop .ms{font-size:34px;color:var(--blue)}
#bpx .sp-drop b{font-size:15.5px}
#bpx .sp-drop .bpx-mut{font-size:12.5px;max-width:42ch}
#bpx .sp-drop-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#bpx .sp-drop-btns label{cursor:pointer}
#bpx .sp-scanning{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;text-align:center}
#bpx .sp-scanning b{font-size:15px}
#bpx .sp-scanning .bpx-mut{font-size:12.5px}
#bpx .sp-ring{width:34px;height:34px;border-radius:50%;border:3px solid var(--blue-l);border-top-color:var(--blue);animation:spRing .8s linear infinite;margin-bottom:6px}
@keyframes spRing{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#bpx .sp-ring{animation-duration:2.4s}}
#bpx .sp-scan-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin:14px 0 10px}
#bpx .sp-scan-head b{display:block;font-size:16px}
#bpx .sp-scan-head .bpx-mut{display:block;font-size:12.5px;margin-top:2px;text-transform:capitalize}
#bpx .sp-scan-tot{text-align:right;white-space:nowrap}
#bpx .sp-scan-tot .bpx-mut{display:block;font-size:11.5px}
#bpx .sp-scan-tot b{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#bpx .sp-var{font-weight:650}
#bpx .sp-var.bad{color:#b3392f}
#bpx .sp-var.good{color:#137a3f}
#bpx .sp-var small,#bpx .bpx-ctable td small{display:block;font-weight:500;font-size:11px;color:var(--grey)}
#bpx .sp-stk em{font-style:normal;opacity:.7;font-weight:500}
#bpx .sp-stk.stale{opacity:.75}
#bpx .sp-learn{display:inline-flex;align-items:center;gap:4px;background:var(--blue-l);color:var(--blue-d);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:650;white-space:nowrap}
#bpx .sp-learn .ms{font-size:14px}
#bpx .sp-pick{display:flex;flex-direction:column;gap:6px;margin:12px 0}
#bpx .sp-pick-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:10px 13px;cursor:pointer;text-transform:none;letter-spacing:0;margin:0}
#bpx .sp-pick-row input{width:auto;margin:0;flex:none}
#bpx .sp-pick-row span{flex:1;min-width:0}
#bpx .sp-pick-row b{display:block;font-size:13.5px;font-weight:600}
#bpx .sp-pick-row .bpx-mut{font-size:12px}
#bpx .sp-pick-row em{font-style:normal;font-size:11.5px;font-weight:650;color:var(--grey);white-space:nowrap}
#bpx .sp-pick-row:has(input:checked){border-color:#fca5a5;background:#fef2f2}
#bpx .sp-pick-row:has(input:checked) em{color:#b3392f}
#bpx .sp-relink{display:block;margin-top:4px;background:none;border:0;padding:0;font:600 12px var(--sans,inherit);color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#bpx .sp-relink:hover{color:var(--blue-d)}

/* ---------- job kits ---------- */
#bpx .sp-kits{display:flex;flex-direction:column;gap:10px;margin:14px 0;max-height:56vh;overflow:auto}
#bpx .sp-kit{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card,#fff)}
#bpx .sp-kit-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
#bpx .sp-kit-h b{display:block;font-size:15px}
#bpx .sp-kit-h .bpx-mut{display:block;font-size:12.5px;margin-top:2px}
#bpx .sp-kit-size{display:flex;align-items:flex-end;gap:10px;margin-top:10px;flex-wrap:wrap}
#bpx .sp-kit-size label{flex:1;min-width:150px;margin:0;font-size:12px;text-transform:none;letter-spacing:0}
#bpx .sp-kit-size input{margin:4px 0 0;padding:9px 12px;font-size:15px;max-width:110px}
#bpx .sp-kit-size .bpx-btn{flex:none}
#bpx .sp-kit-prev{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2,var(--line))}
#bpx .sp-kit-pill{background:var(--tint,#f4f6fa);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--grey)}
#bpx .sp-kit-pill b{color:var(--ink);font-variant-numeric:tabular-nums}
#bpx .sp-kit-fix{display:flex;flex-direction:column;gap:2px;margin:10px 0 2px;max-height:34vh;overflow:auto}
#bpx .sp-kit-fix .sp-check{margin:0;padding:5px 0;align-items:flex-start}
#bpx .sp-kit-fix em{font-style:normal;font-size:12px}
#bpx .sp-kitcue{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:16px;border:1px dashed var(--line);border-radius:14px;background:var(--tint,#f4f6fa)}
#bpx .sp-kitcue .ms{font-size:30px;color:var(--blue);flex:none}
#bpx .sp-kitcue div{flex:1;min-width:210px}
#bpx .sp-kitcue b{display:block;font-size:15px}
#bpx .sp-kitcue .bpx-mut{display:block;font-size:12.5px;margin-top:3px;line-height:1.5}

/* ---------- first run ---------- */
#bpx .sp-first{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#bpx .sp-first > .ms{font-size:38px;color:var(--blue);flex:none}
#bpx .sp-first > div{flex:1;min-width:240px}
#bpx .sp-first b{display:block;font-size:16px}
#bpx .sp-first .bpx-mut{display:block;font-size:13px;margin-top:4px;line-height:1.55;max-width:62ch}
#bpx .sp-first-btns{display:flex;gap:8px;flex-wrap:wrap}
#bpx .sp-newsup{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:8px}
#bpx .sp-newsup label{margin:0 0 7px;font-size:12.5px;text-transform:none;letter-spacing:0}
#bpx .sp-newsup .bpx-jobtabs{margin:0 0 7px}
#bpx .sp-newsup .bpx-mut{display:block;font-size:12px}

/* ---------- supplier directory ---------- */
#bpx .sp-dir-q{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;margin:4px 0 10px}
#bpx .sp-dir-trades{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
#bpx .sp-dir-list{max-height:52vh;overflow:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
#bpx .sp-dir-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin:14px 0 8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
#bpx .sp-dir-h:first-child{margin-top:2px}
#bpx .sp-dir-h span{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey-l,var(--grey))}
#bpx .sp-dir-c{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--card,#fff);transition:border-color .15s,box-shadow .15s}
#bpx .sp-dir-c:hover{border-color:var(--blue);box-shadow:0 6px 18px -12px rgba(var(--sh-c,16 24 40),.5)}
#bpx .sp-dir-c.added{opacity:.72}
#bpx .sp-dir-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px}
#bpx .sp-dir-sh{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--grey)}
#bpx .sp-dir-car{font-size:13px;margin-top:4px}
#bpx .sp-dir-n{font-size:12.5px;line-height:1.55;color:var(--grey);margin-top:5px}
#bpx .sp-dir-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#bpx .sp-dir-a a.bpx-rowbtn{text-decoration:none;display:inline-flex;align-items:center}
@media(max-width:600px){#bpx .sp-dir-sh{margin-left:0;width:100%}#bpx .sp-dir-list{max-height:none}}
#bpx .sp-dir-miss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--grey);margin:12px 0 2px}

/* ---------- the cold start: one instruction, one button ---------- */
#bpx .sp-note.good{background:#f0fdf4;border-color:#86efac;color:#14532d}
#bpx .sp-start{padding:0;overflow:hidden}
#bpx .sp-start-top{text-align:center;padding:38px 26px 30px;max-width:520px;margin:0 auto}
#bpx .sp-start-top .ms{font-size:44px;color:var(--blue);display:block;margin-bottom:12px}
#bpx .sp-start-top h3{font-size:21px;line-height:1.3;margin:0 0 8px}
#bpx .sp-start-top p{font-size:14.5px;line-height:1.65;color:var(--grey);margin:0 0 20px}
#bpx .sp-start-go{width:auto;min-width:200px;margin:0 auto;padding:13px 30px;font-size:15px}
#bpx .sp-start-alt{margin-top:14px;font-size:12.5px;color:var(--grey)}
#bpx .bpx-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#bpx .sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
#bpx .sp-step{background:var(--card,#fff);padding:18px 20px;display:flex;gap:12px;align-items:flex-start}
#bpx .sp-step>span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
#bpx .sp-step b{display:block;font-size:14px;margin-bottom:3px}
#bpx .sp-step small{font-size:12.5px;line-height:1.55;color:var(--grey)}
@media(max-width:760px){#bpx .sp-steps{grid-template-columns:1fr}#bpx .sp-start-top{padding:30px 20px 24px}#bpx .sp-start-go{width:100%}}

/* ---------- where I buy: the visible dependency ---------- */
#bpx .sp-where{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--grey);margin:2px 2px 16px}
#bpx .sp-where b{color:var(--ink);font-weight:600}
#bpx .sp-where-a{display:flex;gap:14px;margin-left:auto}

/* what each option is actually worth */
#bpx .sp-win{background:#0f7a3d;color:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.01em}
#bpx.bpx-dark .sp-win{background:#16a34a}
#bpx .sp-two .bpx-ptitle .lg2{margin-left:9px}
#bpx .bpx-stat .sp-ex{display:block;font-size:11.5px;font-weight:700;color:#92400e;letter-spacing:0}

/* the ticket: a delivery is not a counter visit */
#bpx .sp-ticket-del{display:flex;gap:12px;align-items:center;border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin:16px 0}
#bpx .sp-ticket-del .ms{font-size:28px;color:var(--blue)}
#bpx .sp-ticket-del b{display:block;font-size:14.5px}
#bpx .sp-ticket-del .bpx-mut{font-size:12.5px}
#bpx .sp-ticket-ask{display:block;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.6;color:var(--grey)}
#bpx .sp-ticket-ask .ms{font-size:17px;color:#b45309;vertical-align:-4px;margin-right:5px}
#bpx .sp-skip{text-align:center;font-size:12.5px;color:var(--grey);margin-top:-4px;padding-bottom:2px}

/* near me + quote request */
#bpx .sp-near-bar{display:flex;gap:8px;align-items:center;margin:4px 0 10px}
#bpx .sp-near-bar .sp-dir-q{margin:0;flex:1;min-width:0}
#bpx .sp-near-bar .bpx-btn{margin:0;white-space:nowrap}
#bpx .sp-dir-a a.bpx-rowbtn{text-decoration:none}
#bpx .sp-qa{width:100%;min-height:260px;font:13px/1.55 ui-monospace,Menlo,monospace;padding:12px;border:1px solid var(--line);border-radius:10px;margin:6px 0 10px;resize:vertical;color:inherit;background:var(--card,#fff)}
@media(max-width:600px){#bpx .sp-near-bar{flex-direction:column;align-items:stretch}}

/* calmer cards: two buttons that matter, the rest as text */
#bpx .sp-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px}
#bpx .sp-links .bpx-linkbtn{color:var(--grey);text-decoration:none;font-weight:500}
#bpx .sp-links .bpx-linkbtn:hover{color:var(--ink);text-decoration:underline}
#bpx .sp-links .sp-quiet-del{margin-left:auto;color:#b3392f}
#bpx .sp-sup-empty{font-size:12.5px;margin:-2px 0 4px}
#bpx .sp-kitcue-b{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#bpx .sp-foot{display:flex;justify-content:flex-end;margin-top:16px;opacity:.8}
#bpx .bpx-jt i{font-style:normal;font-size:11px;font-weight:800;background:var(--blue);color:#fff;border-radius:999px;padding:1px 6px;margin-left:4px;vertical-align:1px}
#bpx .bpx-jt.on i{background:var(--ink)}

/* an item the branch prices, on the plan and on the ticket */
#bpx .sp-tbc{display:inline-block;font-size:11px;font-weight:700;color:#b45309;background:rgba(180,83,9,.1);border-radius:999px;padding:2px 8px;white-space:nowrap}
#bpx.bpx-dark .sp-tbc{color:#e5a45a;background:rgba(229,164,90,.14)}

/* asking for the branch email, inside the ticket */
#bpx .sp-ask{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0 4px;background:var(--soft)}
#bpx .sp-ask-h{display:flex;gap:10px;align-items:flex-start}
#bpx .sp-ask-h .ms{color:var(--blue);font-size:22px}
#bpx .sp-ask-h b{display:block;font-size:13.5px}
#bpx .sp-ask-h span{display:block;font-size:12.5px;line-height:1.45}
#bpx .sp-ask-f{display:flex;gap:8px;margin-top:10px}
#bpx .sp-ask-f input{flex:1;min-width:0;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card,#fff);color:inherit}
#bpx .sp-ask-f .bpx-btn{margin:0;white-space:nowrap}
@media(max-width:520px){#bpx .sp-ask-f{flex-direction:column}}

/* the Materials tab on a project */
#bpx .sp-mat-sum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 0 12px;font-size:13.5px;color:var(--grey)}
#bpx .sp-mat-sum b{font-size:20px;letter-spacing:-.02em;color:var(--ink)}
#bpx .sp-mat-sum em{font-style:normal;color:#b45309;font-weight:600}
#bpx .sp-mat-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 20px;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
#bpx .sp-mat-row:hover .sp-mat-who b{color:var(--blue)}
#bpx .sp-mat-row .ms{color:var(--grey-l);font-size:20px}
#bpx .sp-mat-who{min-width:0}
#bpx .sp-mat-who b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .sp-mat-who span{display:block;font-size:12px;color:var(--grey)}
#bpx .sp-mat-st{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--grey);white-space:nowrap}
#bpx .sp-mat-st.good{color:#0f7a3d;background:rgba(15,122,61,.1)}
#bpx .sp-mat-st.warn{color:#b45309;background:rgba(180,83,9,.1)}
#bpx .sp-mat-row.draft{grid-template-columns:minmax(0,1fr) auto 20px}
#bpx .sp-mat-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
#bpx .sp-mat-acts .bpx-btn{margin:0}
@media(max-width:560px){#bpx .sp-mat-row{grid-template-columns:minmax(0,1fr) auto 20px}#bpx .sp-mat-row>b{display:none}}

/* ---------- material icons ----------
   One drawn icon per price-book category (see the icon table in supply.js).
   The family tint groups results at a glance; the name is always beside it,
   so colour is never carrying the meaning on its own. */
#bpx .sp-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--soft);color:var(--grey)}
#bpx .sp-chip .sp-ic{width:22px;height:22px}
#bpx .sp-chip.sm{width:30px;height:30px;border-radius:8px}
#bpx .sp-chip.sm .sp-ic{width:18px;height:18px}
#bpx .sp-chip[data-fam=roof] {color:#a2542c;background:rgba(162,84,44,.1)}
#bpx .sp-chip[data-fam=hvac] {color:#1f7a8c;background:rgba(31,122,140,.1)}
#bpx .sp-chip[data-fam=plumb]{color:#2b5fad;background:rgba(43,95,173,.1)}
#bpx .sp-chip[data-fam=elec] {color:#a4711a;background:rgba(164,113,26,.11)}
#bpx .sp-chip[data-fam=paint]{color:#7a4fa3;background:rgba(122,79,163,.1)}
#bpx .sp-chip[data-fam=land] {color:#2f7d4f;background:rgba(47,125,79,.1)}
#bpx .sp-chip[data-fam=conc] {color:#5b6472;background:rgba(91,100,114,.12)}
/* the tints are mixed for a white card, so on the dark card they are lifted
   rather than re-picked, which keeps the same hue reading */
#bpx.bpx-dark .sp-chip{background:rgba(255,255,255,.06)}
#bpx.bpx-dark .sp-chip[data-fam=roof] {color:#d99366;background:rgba(217,147,102,.13)}
#bpx.bpx-dark .sp-chip[data-fam=hvac] {color:#5fb6c6;background:rgba(95,182,198,.13)}
#bpx.bpx-dark .sp-chip[data-fam=plumb]{color:#7ba6e8;background:rgba(123,166,232,.13)}
#bpx.bpx-dark .sp-chip[data-fam=elec] {color:#e0b055;background:rgba(224,176,85,.13)}
#bpx.bpx-dark .sp-chip[data-fam=paint]{color:#b28cd6;background:rgba(178,140,214,.13)}
#bpx.bpx-dark .sp-chip[data-fam=land] {color:#6cbd8a;background:rgba(108,189,138,.13)}
#bpx.bpx-dark .sp-chip[data-fam=conc] {color:#a3adbb;background:rgba(163,173,187,.13)}

/* ---------- the search-first picker ---------- */
#bpx .sp-pk{margin-top:14px}
#bpx .sp-pk-box{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);padding:0 12px}
#bpx .sp-pk-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,111,255,.12)}
#bpx .sp-pk-box .ms{font-size:20px;color:var(--grey);flex:none}
#bpx .sp-pk-box input{flex:1;min-width:0;margin:0;border:0;background:none;padding:12px 0;font:inherit;font-size:14.5px;color:inherit;outline:none}
#bpx .sp-pk-clr{flex:none;border:0;background:none;color:var(--grey);font-size:20px;line-height:1;cursor:pointer;padding:4px 2px}
#bpx .sp-pk-clr:hover{color:var(--ink)}
#bpx .sp-pk-lbl{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin:14px 2px 7px}
/* a scroll box, because a price book match can run to dozens of rows and
   the list being built has to stay on screen underneath it */
#bpx .sp-pk-list{display:flex;flex-direction:column;gap:2px;max-height:310px;overflow:auto;margin-top:8px;padding-right:2px}
#bpx .sp-pk-list.recent{max-height:none;overflow:visible}
#bpx .sp-pk-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid transparent;border-radius:11px;background:none;padding:8px 9px;cursor:pointer;font:inherit;color:inherit}
#bpx .sp-pk-row:hover,#bpx .sp-pk-row:focus-visible{background:var(--soft);border-color:var(--line);outline:none}
#bpx .sp-pk-txt{flex:1;min-width:0}
#bpx .sp-pk-txt>b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .sp-pk-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--grey);margin-top:2px}
#bpx .sp-pk-meta>b{font-size:13px;font-weight:650;color:var(--ink)}
#bpx .sp-pk-sup{white-space:nowrap}
#bpx .sp-pk-stk{font-size:11.5px;font-weight:600}
#bpx .sp-pk-stk.ok{color:#0f7a3d}
#bpx .sp-pk-stk.out{color:#b45309}
#bpx .sp-pk-more,#bpx .sp-pk-none{font-size:11.5px;color:var(--grey-l,var(--grey))}
#bpx .sp-pk-add{flex:none;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;color:var(--grey);background:var(--card,#fff);padding:0 9px}
#bpx .sp-pk-row:hover .sp-pk-add{border-color:var(--blue);color:var(--blue)}
#bpx .sp-pk-empty{border:1px dashed var(--line);border-radius:12px;padding:15px;margin-top:10px;background:var(--tint,#f4f6fa)}
#bpx .sp-pk-empty b{display:block;font-size:14px}
#bpx .sp-pk-empty span{display:block;font-size:12.5px;line-height:1.55;color:var(--grey);margin-top:4px}
#bpx .sp-pk-empty-b{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:11px}
#bpx .sp-pk-flash{height:0;overflow:hidden;opacity:0;font-size:12.5px;font-weight:600;color:#0f7a3d;transition:opacity .18s}
#bpx .sp-pk-flash.on{height:auto;opacity:1;margin-top:9px}
/* the list being built, now with the category chip in front */
#bpx .sp-item{grid-template-columns:30px minmax(0,1fr) 72px 84px 34px}
#bpx .sp-list-hd{display:flex;align-items:baseline;gap:9px;margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line)}
#bpx .sp-list-hd b{font-size:13.5px;font-weight:650}
#bpx .sp-list-hd span{font-size:12px;color:var(--grey)}
#bpx .sp-items{margin-top:10px}
#bpx .sp-items-none{margin-top:10px;padding:14px;border:1px dashed var(--line);border-radius:12px;font-size:13px;color:var(--grey);background:var(--tint,#f4f6fa)}
@media(max-width:560px){
  #bpx .sp-item{grid-template-columns:30px minmax(0,1fr) 60px 34px}
  #bpx .sp-item>input:nth-of-type(3),#bpx .sp-item.sp-head>span:nth-of-type(4){display:none}
  #bpx .sp-pk-list{max-height:260px}
}

/* ---------- who sells it, and at what kind of price ----------
   The store chips are the answer to the question a contractor actually
   has. A chain they already buy from is solid with a tick; the rest are
   quiet outlines that add themselves as a supplier when tapped. */
#bpx .sp-pk-stores{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
#bpx .sp-store{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:999px;background:var(--card,#fff);color:var(--grey);font:inherit;font-size:11.5px;font-weight:600;padding:3px 9px;cursor:pointer;white-space:nowrap}
#bpx .sp-store:hover{border-color:var(--blue);color:var(--blue)}
#bpx .sp-store .ms{font-size:13px;line-height:1}
#bpx .sp-store.mine{background:#e7f7ee;border-color:#9fd9b8;color:#0f7a3d}
#bpx .sp-store.mine:hover{border-color:#0f7a3d;color:#0f7a3d}
#bpx .sp-store-more{align-self:center;font-size:11.5px;color:var(--grey-l,var(--grey))}
#bpx.bpx-dark .sp-store.mine{background:rgba(52,168,110,.16);border-color:rgba(52,168,110,.4);color:#6cbd8a}
/* a typical price is never mistaken for a quote */
#bpx .sp-pk-meta>b.typ{font-weight:600;color:var(--grey)}
#bpx .sp-pk-yours,#bpx .sp-pk-typ{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:2px 5px}
#bpx .sp-pk-yours{background:#e7f7ee;color:#0f7a3d}
#bpx .sp-pk-typ{background:var(--soft);color:var(--grey);cursor:help}
#bpx.bpx-dark .sp-pk-yours{background:rgba(52,168,110,.16);color:#6cbd8a}
#bpx .sp-pk-cue{font-size:12px;color:var(--grey);margin:8px 2px 0;line-height:1.5}
#bpx .sp-pk-cue em{font-style:normal;font-weight:650;color:#0f7a3d}
#bpx .sp-pk-cue .bpx-linkbtn{font-size:12px}
#bpx .sp-pk-row{align-items:flex-start}
#bpx .sp-pk-row .sp-chip{margin-top:1px}
#bpx .sp-pk-list{max-height:400px}
/* the day-one banner, over a page that already works */
#bpx .sp-firstrun{border:1px dashed var(--line);border-radius:14px;padding:15px 16px;margin-bottom:14px;background:var(--tint,#f4f6fa)}
#bpx .sp-firstrun-t{display:flex;gap:12px;align-items:flex-start}
#bpx .sp-firstrun-t .ms{font-size:26px;color:var(--blue);flex:none}
#bpx .sp-firstrun-t b{display:block;font-size:14.5px}
#bpx .sp-firstrun-t span{display:block;font-size:12.5px;line-height:1.55;color:var(--grey);margin-top:3px}
#bpx .sp-firstrun-b{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-left:38px}
@media(max-width:560px){#bpx .sp-firstrun-b{padding-left:0}}

/* ==================================================================
   THE SHELF — materials laid out like a store, full width.
   auto-fill with a 200px floor lands on 5 across at a normal desktop
   width and reflows down to 2 on a phone, rather than pinning a count
   that would squash the cards on a laptop.
   ================================================================== */
#bpx .sp-shop{padding-bottom:18px}
#bpx .sp-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;margin-top:10px}
@media(min-width:1700px){#bpx .sp-shelf{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
@media(max-width:900px){#bpx .sp-shelf{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}}
@media(max-width:520px){#bpx .sp-shelf{grid-template-columns:1fr 1fr;gap:9px}}

#bpx .sp-card{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:14px;background:var(--card,#fff);padding:11px;cursor:pointer;text-align:left;position:relative;transition:border-color .15s,box-shadow .15s,transform .15s}
#bpx .sp-card:hover,#bpx .sp-card:focus-visible{border-color:var(--blue);box-shadow:0 6px 18px rgba(0,111,255,.1);transform:translateY(-2px);outline:none}
#bpx .sp-card.on{border-color:#9fd9b8;background:linear-gradient(0deg,rgba(15,122,61,.04),rgba(15,122,61,.04)),var(--card,#fff)}
@media(prefers-reduced-motion:reduce){#bpx .sp-card{transition:none}#bpx .sp-card:hover{transform:none}}
/* the picture well: a big category icon, since there are no photographs */
#bpx .sp-card-art{position:relative;display:flex;align-items:center;justify-content:center;height:86px;border-radius:10px;background:var(--soft);color:var(--grey)}
#bpx .sp-card-art .sp-ic.big{width:40px;height:40px}
#bpx .sp-card-n{position:absolute;top:6px;right:6px;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#0f7a3d;color:#fff;font-size:11.5px;font-weight:700;padding:0 6px}
#bpx .sp-card-nm{font-size:13px;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
#bpx .sp-card-price{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--grey);min-height:20px}
#bpx .sp-card-price>b{font-size:14px;font-weight:700;color:var(--ink)}
#bpx .sp-card-price>b.typ{font-size:13px;font-weight:650;color:var(--grey)}
/* inside a card the price line is a stack, not a sentence */
#bpx .sp-card-price .sp-pk-sup,#bpx .sp-card-price .sp-pk-more{flex-basis:100%;font-size:11.5px}
#bpx .sp-card-price .sp-pk-stk{font-size:11px}
#bpx .sp-card .sp-pk-stores{padding-top:2px}
#bpx .sp-card .sp-store{font-size:10.5px;padding:2px 7px}
#bpx .sp-card-add{display:block;text-align:center;border:1px solid var(--line);border-radius:9px;padding:7px 0;font-size:12.5px;font-weight:650;color:var(--grey);background:var(--tint,#f4f6fa)}
#bpx .sp-card:hover .sp-card-add{border-color:var(--blue);color:#fff;background:var(--blue)}
#bpx .sp-card.on .sp-card-add{color:#0f7a3d;border-color:#9fd9b8;background:#e7f7ee}
#bpx.bpx-dark .sp-card-art{background:rgba(255,255,255,.05)}
#bpx.bpx-dark .sp-card.on{border-color:rgba(52,168,110,.45)}
#bpx.bpx-dark .sp-card.on .sp-card-add{color:#6cbd8a;background:rgba(52,168,110,.14);border-color:rgba(52,168,110,.35)}

/* departments, the way a store has aisles */
#bpx .sp-depts{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
#bpx .sp-dept{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--card,#fff);color:var(--grey);font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;cursor:pointer;white-space:nowrap}
#bpx .sp-dept .sp-ic{width:15px;height:15px}
#bpx .sp-dept i{font-style:normal;font-size:11px;font-weight:600;opacity:.6}
#bpx .sp-dept:hover{border-color:var(--blue);color:var(--blue)}
#bpx .sp-dept.on{background:var(--ink);border-color:var(--ink);color:#fff}
#bpx .sp-dept.on i{opacity:.75}
#bpx.bpx-dark .sp-dept.on{background:var(--blue);border-color:var(--blue)}

#bpx .sp-more{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px}
#bpx .sp-more .bpx-mut{font-size:12px}
/* the shelf is the page now, so the old scrolling row list is retired */
#bpx .sp-pk-list{max-height:none;overflow:visible}

/* shop header: the subtitle sits beside the title on a wide panel, so it
   needs the gap that a wrapped line used to give it for free */
#bpx .sp-shop .bpx-ptitle .lg2{margin-left:10px}
/* a card is not a row: the supplier line carries the stock, and "+2 more"
   is dropped because the store chips underneath already say who else has it */
#bpx .sp-card-price .sp-pk-more{display:none}
#bpx .sp-card-price .sp-pk-sup{flex-basis:100%;margin-bottom:-2px}

/* The portal's base input rule sets border, background, radius and an
   inset shadow with !important, so a plain override loses and the field
   draws its own box inside the search wrapper — the "two boxes" look.
   The wrapper owns the frame here, so the input has to give up all four. */
/* Specificity, not !important, decides this one. The base rule is
   #bpx input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   — one id, four attribute selectors, one element — and both declarations
   are !important, so the more specific wins. Carrying the same chain plus
   the wrapper class outranks it; a plain `.sp-pk-box input` does not, which
   is why the field kept drawing a second box inside the first. */
#bpx .sp-pk-box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
  border:0 !important;background:none !important;border-radius:0 !important;box-shadow:none !important}
#bpx .sp-pk-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,99,230,.16)}
#bpx .sp-pk-box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus{
  border:0 !important;box-shadow:none !important}

/* ==================================================================
   SUPPLIERS — logos, the chains we already know, and what their
   prices are actually worth.
   ================================================================== */
/* The lettermark is the floor. A real logo drops on top of it and the
   parent gains .has, which hides the letters. Nothing is fetched, so a
   missing file costs nothing and never shows a broken image. */
#bpx .sp-mark{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:var(--soft);overflow:hidden}
#bpx .sp-mark i{font-style:normal;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--mk,var(--grey))}
#bpx .sp-mark img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
#bpx .sp-mark.has i{visibility:hidden}
#bpx .sp-mark.lg{width:46px;height:46px;border-radius:11px}
#bpx .sp-mark.lg i{font-size:16px}
/* a white logo would vanish on the dark card, so the tile stays light */
#bpx.bpx-dark .sp-mark{background:#f2f5f9}
#bpx.bpx-dark .sp-mark i{color:var(--mk,#5b6472)}

#bpx .sp-sup-h{align-items:center;gap:11px}
#bpx .sp-sup-id{flex:1;min-width:0}
#bpx .sp-sup-id b{display:block;font-size:15.5px;letter-spacing:-.01em}
#bpx .sp-sup-id .bpx-mut{display:block;font-size:12.5px;margin-top:1px}
/* the three numbers that say whether this supplier is pulling its weight */
#bpx .sp-sup-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:1px solid var(--line);border-radius:11px;padding:9px 6px;background:var(--tint,#f4f6fa)}
#bpx .sp-sup-nums>div{text-align:center;min-width:0}
#bpx .sp-sup-nums b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
#bpx .sp-sup-nums span{display:block;font-size:10.5px;color:var(--grey);margin-top:1px}
#bpx .sp-sup-vs{display:flex;flex-direction:column;gap:3px}
#bpx .sp-sup-vs .bpx-mut{font-size:11.5px;line-height:1.4}
#bpx .sp-vs{align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
#bpx .sp-vs.good{background:#e7f7ee;color:#0f7a3d}
#bpx .sp-vs.bad{background:#fdecec;color:#b3392f}
#bpx .sp-vs.even{background:var(--soft);color:var(--grey)}
#bpx.bpx-dark .sp-vs.good{background:rgba(52,168,110,.16);color:#6cbd8a}
#bpx.bpx-dark .sp-vs.bad{background:rgba(214,92,80,.16);color:#e08a80}

/* the chains we already know: a directory you can see, not a modal */
#bpx .sp-chains{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
@media(max-width:560px){#bpx .sp-chains{grid-template-columns:1fr}}
#bpx .sp-chain{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);padding:10px 12px;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
#bpx .sp-chain:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,111,255,.08)}
#bpx .sp-chain.on{border-color:#9fd9b8;background:linear-gradient(0deg,rgba(15,122,61,.04),rgba(15,122,61,.04)),var(--card,#fff)}
#bpx .sp-chain-t{flex:1;min-width:0}
#bpx .sp-chain-t b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .sp-chain-t span{display:block;font-size:11.5px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#bpx .sp-chain-a{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:650;color:var(--grey);border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--tint,#f4f6fa)}
#bpx .sp-chain-a .ms{font-size:14px}
#bpx .sp-chain:hover .sp-chain-a{border-color:var(--blue);color:#fff;background:var(--blue)}
#bpx .sp-chain.on .sp-chain-a{color:#0f7a3d;border-color:#9fd9b8;background:#e7f7ee}
#bpx.bpx-dark .sp-chain.on .sp-chain-a{color:#6cbd8a;background:rgba(52,168,110,.14);border-color:rgba(52,168,110,.35)}

/* On a wide panel the subtitle sits beside the title instead of wrapping
   under it, so it needs the gap the wrap used to give it. Applies to every
   Supply heading, not just the shop. */
#bpx .sp-shop .bpx-ptitle .lg2,#bpx .bpx-chead .bpx-ptitle .lg2{margin-left:10px;font-weight:500}

/* A brand that only publishes a square app-icon lockup brings its own
   background, so it fills the chip rather than floating inset on ours. */
#bpx .sp-mark.full img{inset:0;width:100%;height:100%;object-fit:cover}
#bpx .sp-mark.full{background:transparent}
/* a chain tile has horizontal room, so a wide wordmark gets a wider chip
   than the square marks need */
#bpx .sp-chain .sp-mark{width:54px;border-radius:8px}
#bpx .sp-chain .sp-mark.full{width:38px}

/* ==================================================================
   THE CARD, as a shelf tag.
   The art well used to be a flat grey box with a grey icon, which read
   as a missing image. It now carries the category's own tint and names
   the category, so a shelf of cards has colour and the eye can group it
   before reading a word.
   ================================================================== */
#bpx .sp-card{gap:8px;padding:10px}
#bpx .sp-card-art{position:relative;height:104px;border-radius:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--soft);color:var(--grey)}
#bpx .sp-card-art .sp-ic.big{width:46px;height:46px;stroke-width:1.5}
/* the same family tints the category chips use, so one material reads the
   same colour wherever it appears */
#bpx .sp-card-art[data-fam=roof] {color:#a2542c;background:rgba(162,84,44,.09)}
#bpx .sp-card-art[data-fam=hvac] {color:#1f7a8c;background:rgba(31,122,140,.09)}
#bpx .sp-card-art[data-fam=plumb]{color:#2b5fad;background:rgba(43,95,173,.09)}
#bpx .sp-card-art[data-fam=elec] {color:#a4711a;background:rgba(164,113,26,.1)}
#bpx .sp-card-art[data-fam=paint]{color:#7a4fa3;background:rgba(122,79,163,.09)}
#bpx .sp-card-art[data-fam=land] {color:#2f7d4f;background:rgba(47,125,79,.09)}
#bpx .sp-card-art[data-fam=conc] {color:#5b6472;background:rgba(91,100,114,.1)}
#bpx .sp-card-art[data-fam=pool] {color:#0277bd;background:rgba(2,119,189,.09)}
#bpx .sp-card-art[data-fam=surf] {color:#8d6e63;background:rgba(141,110,99,.1)}
#bpx .sp-card-art[data-fam=wood] {color:#6d4c41;background:rgba(109,76,65,.1)}
#bpx.bpx-dark .sp-card-art{background:rgba(255,255,255,.05)}
#bpx.bpx-dark .sp-card-art[data-fam=roof] {color:#d99366} #bpx.bpx-dark .sp-card-art[data-fam=hvac]{color:#5fb6c6}
#bpx.bpx-dark .sp-card-art[data-fam=plumb]{color:#7ba6e8} #bpx.bpx-dark .sp-card-art[data-fam=elec]{color:#e0b055}
#bpx.bpx-dark .sp-card-art[data-fam=paint]{color:#b28cd6} #bpx.bpx-dark .sp-card-art[data-fam=land]{color:#6cbd8a}
#bpx.bpx-dark .sp-card-art[data-fam=conc] {color:#a3adbb} #bpx.bpx-dark .sp-card-art[data-fam=pool]{color:#63b8e8}
#bpx.bpx-dark .sp-card-art[data-fam=surf] {color:#c8a89c} #bpx.bpx-dark .sp-card-art[data-fam=wood]{color:#c2a094}
/* the aisle this thing came from, bottom-left of the picture */
#bpx .sp-card-cat{position:absolute;left:8px;bottom:7px;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;opacity:.72}
#bpx .sp-card-n{top:7px;right:7px}

#bpx .sp-card-nm{font-size:13px;line-height:1.35;min-height:35px;margin-top:1px}
/* price first and big, the way a shelf tag reads */
#bpx .sp-card-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;row-gap:2px;min-height:22px}
#bpx .sp-card-price>b{font-size:17px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
#bpx .sp-card-price>b.typ{font-size:16px;font-weight:700;color:var(--ink)}
#bpx .sp-per{font-size:11px;color:var(--grey)}
/* flex-basis:100% puts the badge on its own line; max-width stops it
   stretching into a full-width bar across the card */
#bpx .sp-card-price .sp-pk-typ,#bpx .sp-card-price .sp-pk-yours{
  flex-basis:100%;max-width:fit-content;margin-right:auto}
#bpx .sp-card-price .sp-pk-sup{flex-basis:100%;font-size:11.5px;margin-top:-1px}
#bpx .sp-card-price .sp-pk-stk{font-size:11px}
#bpx .sp-card-price .sp-pk-none{font-size:12px}

/* who carries it, as marks — the way you scan a shelf */
/* The store row no longer claims the spare space — the Add button does,
   so every button in a row sits on the same line whatever the card above
   it holds. Cards in a grid row already stretch to equal height, so an
   auto top margin on the last child is all the alignment needs. A card
   with no price and no stockists is exactly the one that used to ride up. */
#bpx .sp-card-at{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-top:4px;min-height:26px}
#bpx .sp-at{border:0;background:none;padding:0;cursor:pointer;line-height:0;border-radius:7px}
#bpx .sp-at .sp-mark{width:26px;height:26px;border-radius:7px;border:1px solid var(--line)}
#bpx .sp-at .sp-mark i{font-size:9.5px}
#bpx .sp-at .sp-mark img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
#bpx .sp-at .sp-mark.full img{inset:0;width:100%;height:100%}
#bpx .sp-at:hover .sp-mark{border-color:var(--blue)}
#bpx .sp-at.mine .sp-mark{border-color:#7fc9a3;box-shadow:0 0 0 1px #7fc9a3}
#bpx .sp-at-more{font-size:11px;color:var(--grey-l,var(--grey));margin-left:2px}

#bpx .sp-card-add{margin-top:auto;padding:8px 0;font-size:12.5px}
#bpx .sp-card:hover .sp-card-add{background:var(--blue);border-color:var(--blue);color:#fff}

/* ==================================================================
   ONE MATERIAL, IN FULL — the aisle-side label behind a card.
   ================================================================== */
#bpx .sp-md{display:flex;flex-direction:column;gap:16px}
#bpx .sp-md-top{display:flex;gap:16px;align-items:flex-start}
#bpx .sp-md-art{flex:none;width:116px;height:116px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;background:var(--soft);color:var(--grey)}
#bpx .sp-md-art .sp-ic.huge{width:62px;height:62px;stroke-width:1.4}
#bpx .sp-md-art[data-fam=roof] {color:#a2542c;background:rgba(162,84,44,.09)}
#bpx .sp-md-art[data-fam=hvac] {color:#1f7a8c;background:rgba(31,122,140,.09)}
#bpx .sp-md-art[data-fam=plumb]{color:#2b5fad;background:rgba(43,95,173,.09)}
#bpx .sp-md-art[data-fam=elec] {color:#a4711a;background:rgba(164,113,26,.1)}
#bpx .sp-md-art[data-fam=paint]{color:#7a4fa3;background:rgba(122,79,163,.09)}
#bpx .sp-md-art[data-fam=land] {color:#2f7d4f;background:rgba(47,125,79,.09)}
#bpx .sp-md-art[data-fam=conc] {color:#5b6472;background:rgba(91,100,114,.1)}
#bpx .sp-md-art[data-fam=pool] {color:#0277bd;background:rgba(2,119,189,.09)}
#bpx .sp-md-art[data-fam=surf] {color:#8d6e63;background:rgba(141,110,99,.1)}
#bpx .sp-md-art[data-fam=wood] {color:#6d4c41;background:rgba(109,76,65,.1)}
#bpx .sp-md-id{flex:1;min-width:0}
#bpx .sp-md-id h3{margin:0 0 6px;font-size:19px;line-height:1.3;letter-spacing:-.01em}
#bpx .sp-md-meta{display:flex;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--grey);margin-bottom:10px}
#bpx .sp-md-meta span{background:var(--soft);border-radius:999px;padding:3px 9px;text-transform:capitalize}
#bpx .sp-md-cat{font-weight:700;letter-spacing:.03em;text-transform:uppercase !important}
#bpx .sp-md-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#bpx .sp-md-head b{font-size:26px;font-weight:750;letter-spacing:-.03em}
#bpx .sp-md-head small{flex-basis:100%;font-size:12px;color:var(--grey)}
#bpx .sp-md-sec{border-top:1px solid var(--line);padding-top:14px}
#bpx .sp-md-h{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grey);margin-bottom:9px}
#bpx .sp-md-rows{display:flex;flex-direction:column;gap:6px}
#bpx .sp-md-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13px}
#bpx .sp-md-who{display:flex;align-items:center;gap:9px;min-width:0}
#bpx .sp-md-who .sp-mark{width:28px;height:28px;border-radius:7px}
#bpx .sp-md-who .sp-mark i{font-size:10px}
#bpx .sp-md-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
#bpx .sp-md-p{font-weight:750;font-variant-numeric:tabular-nums}
#bpx .sp-md-s em{font-style:normal;font-size:11.5px;color:var(--grey-l,var(--grey))}
#bpx .sp-md-sku{font:600 11px ui-monospace,Menlo,monospace;color:var(--grey-l,var(--grey))}
/* minmax(0,1fr), not 1fr: a grid track's default minimum is min-content,
   so a long chain name and its Add button pushed the second column out
   past the edge of the modal instead of ellipsing inside it. */
#bpx .sp-md-chains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:560px){#bpx .sp-md-chains{grid-template-columns:minmax(0,1fr)}
  #bpx .sp-md-row{grid-template-columns:minmax(0,1fr) auto}#bpx .sp-md-sku{display:none}}
#bpx .sp-md-chain{display:flex;align-items:center;gap:10px;text-align:left;width:100%;font:inherit;color:inherit;
  border:1px solid var(--line);border-radius:11px;background:var(--card,#fff);padding:9px 11px;cursor:pointer}
#bpx .sp-md-chain:hover{border-color:var(--blue)}
#bpx .sp-md-chain.on{border-color:#9fd9b8;background:linear-gradient(0deg,rgba(15,122,61,.04),rgba(15,122,61,.04)),var(--card,#fff)}
#bpx .sp-md-chain>span{flex:1;min-width:0}
#bpx .sp-md-chain b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .sp-md-chain small{display:block;font-size:11px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .sp-md-tag{flex:none;font-size:11.5px;font-weight:650;color:var(--grey);
  border:1px solid var(--line);border-radius:7px;padding:4px 9px;background:var(--tint,#f4f6fa)}
#bpx .sp-md-chain.on .sp-md-tag{color:#0f7a3d;border-color:#9fd9b8;background:#e7f7ee}
#bpx .sp-md-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px}
#bpx .sp-md-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#bpx .sp-md-qty button{border:0;background:var(--tint,#f4f6fa);color:var(--ink);font-size:17px;
  width:38px;height:40px;cursor:pointer;line-height:1}
#bpx .sp-md-qty button:hover{background:var(--blue);color:#fff}
#bpx .sp-md-qty input{width:58px;height:40px;text-align:center;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;background:var(--card,#fff) !important;font-weight:650;margin:0}
#bpx .sp-md-foot .bpx-btn{margin:0}
#bpx.bpx-dark .sp-md-art{background:rgba(255,255,255,.05)}

/* a category photo fills the well the drawn icon sits inside, so a set
   that is only half photographed still reads as one shelf */
#bpx .sp-art-img{width:100%;height:100%;object-fit:cover;display:block}
#bpx .sp-md-art .sp-art-img{border-radius:14px}

/* category tiles: the landing view of the picker */
#bpx .sp-aisles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:10px 0 18px}
#bpx .sp-aisle{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--card,#fff);color:var(--ink);font:inherit;padding:12px 12px 12px 12px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
#bpx .sp-aisle:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(0,21,48,.08);transform:translateY(-1px)}
#bpx .sp-aisle:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#bpx .sp-aisle-art{flex:0 0 52px;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#eef3f9}
#bpx .sp-aisle-art .sp-ic{width:28px;height:28px}
#bpx .sp-aisle-art .sp-art-img{width:100%;height:100%;object-fit:cover}
#bpx .sp-aisle-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#bpx .sp-aisle-txt b{font-size:14px;font-weight:600}
#bpx .sp-aisle-txt small{font-size:12px;color:var(--grey)}
#bpx .sp-aisle-txt em{font-style:normal;font-size:11.5px;color:var(--grey);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .sp-aisle-go{flex:0 0 auto;color:var(--grey);font-size:22px;line-height:1}
#bpx .sp-aisle-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
#bpx .sp-aisle-h{display:flex;align-items:center;gap:8px}
#bpx .sp-aisle-h .sp-ic{width:22px;height:22px}
#bpx .sp-aisle-h b{font-size:17px;font-weight:600}
#bpx .sp-aisle-h span{font-size:12.5px;color:var(--grey)}
@media(max-width:520px){#bpx .sp-aisles{grid-template-columns:1fr}}