/* ==================================================================
   BG MRO — sitewide fix patch / 2026-11-14
   Loaded at the end of <head> on every page, AFTER the theme CSS and
   any per-page <style>, so these rules win without touching originals.
   Scope: issues confirmed by the 2026-11-14 site audit.
   ================================================================== */

/* ---------- 1. Ticker: static, centred, never clipped ---------- */
.ticker div{
  animation:none!important;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 34px;
  padding:9px 20px;
  white-space:normal;
}
.ticker div span:nth-child(n+5){display:none}
@media(max-width:900px){
  .ticker div{gap:4px 18px;font-size:10px;letter-spacing:.06em}
  .ticker div span:nth-child(n+4){display:none}
}

/* ---------- 2. Header: search field, phone, no wrapping ---------- */
.nav .tel{white-space:nowrap;flex:none}
.navsearch{flex:0 0 auto;min-width:236px}
.navsearch input{flex:1 1 auto;width:auto!important;min-width:96px}
.navsearch-btn{flex:none;white-space:nowrap}
.btn,.nav ul a{white-space:nowrap}
/* Keep every header item (including the injected enquiry pill) inside the
   1280px wrap on 1440px desktops. */
@media(min-width:901px){
  .nav{gap:14px}
  .nav ul{gap:13px}
  .navsearch{min-width:196px}
  .nav .enq-pill{height:32px;padding:0 9px;font-size:9.5px}
}
@media(max-width:1180px){.navsearch{min-width:190px}}
@media(max-width:900px){
  .navsearch{order:10;width:100%;min-width:0}
  .navsearch input{min-width:120px}
}

/* ---------- 3. Mobile navigation: hamburger + drawer ---------- */
.bg-menu-btn{
  display:none;align-items:center;justify-content:center;flex:none;
  width:42px;height:40px;padding:0;cursor:pointer;
  border:1px solid rgba(240,236,227,.28);border-radius:9px;
  background:rgba(62,67,56,.85);color:var(--fg,#F0ECE3);
}
.bg-menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.bg-menu-btn:hover{border-color:#D2B08A}
.bg-drawer{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:120;
  background:rgba(14,17,13,.97);backdrop-filter:blur(10px);
  display:none;overflow-y:auto;padding:22px 22px calc(30px + env(safe-area-inset-bottom,0px));
}
.bg-drawer.open{display:block}
.bg-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.bg-drawer-top b{font-family:Oswald,Impact,sans-serif;font-size:21px;letter-spacing:.06em}
.bg-drawer-close{
  width:40px;height:40px;border:1px solid rgba(240,236,227,.25);border-radius:9px;
  background:transparent;color:#F0ECE3;font-size:22px;line-height:1;cursor:pointer;
}
.bg-drawer-kick{font:10px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#8B8B7E;margin:22px 0 8px}
.bg-drawer a.bg-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 2px;border-bottom:1px solid rgba(240,236,227,.12);
  color:#F0ECE3;font-size:16px;text-decoration:none;
}
.bg-drawer a.bg-link:after{content:"→";color:#D2B08A;font-size:15px}
.bg-drawer a.bg-link:hover{color:#D2B08A}
.bg-drawer .bg-cta{
  display:block;margin-top:22px;height:46px;line-height:46px;text-align:center;
  background:#D2B08A;color:#1B1E18;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;
}
.bg-drawer .bg-tel{display:block;margin-top:14px;color:#B9B5A8;font-size:13px;text-align:center;text-decoration:none}
@media(max-width:900px){
  .bg-menu-btn{display:inline-flex}
  .nav ul{display:none!important}
  .nav>.btn.primary{display:none!important}   /* quote CTA lives in the drawer + bottom bar */
  .nav .spacer{display:none}
  .nav{height:auto;min-height:62px;padding-top:8px;padding-bottom:10px;gap:10px;flex-wrap:wrap}
  .nav .logo{font-size:19px}
  .nav .logo img{height:34px}
}

/* ---------- 4. Mobile bottom bar: reserve space, remove duplicate FAB ---------- */
@media(max-width:600px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))!important}
  .bgc-fab{display:none!important}
  .bgc-mobile{height:52px}
}

/* ---------- 5. Product pages: two columns -> single column on phones ---------- */
@media(max-width:700px){
  .wrap[style*="1fr 340px"]{display:block!important}
  .wrap[style*="1fr 340px"] aside{margin-top:26px;display:block}
  .wrap[style*="1fr 340px"] aside [style*="sticky"]{position:static!important}
  .page-hero{padding:40px 0 28px}
  .page-hero h1,.home-banner h1{overflow-wrap:anywhere;word-break:break-word}
  .crumb{white-space:normal;line-height:1.7;overflow-wrap:anywhere}
  .spec,.kv,.sib,.band .inner{display:block;width:100%;overflow-x:auto}
  .spec th,.spec td,.kv td,.kv th,.sib td,.sib th{
    white-space:normal!important;overflow-wrap:anywhere;font-size:12px!important;
  }
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .home-banner .cta .btn{flex:1 1 auto;text-align:center;justify-content:center}
}

/* ---------- 6. Type scale: body / spec / labels ---------- */
.spec{font-size:12.5px!important}
.spec th,.spec td{font-size:12px!important;padding:9px 10px}
.kv td,.kv th,.sib td,.sib th{font-size:12.5px}
.brand-info dl{font-size:13px}
.fbot,.cap{font-size:12px}
.cap,.crumb,.kick,.eyebrow{letter-spacing:.08em;text-transform:none}
.kick,.eyebrow{text-transform:uppercase;letter-spacing:.14em}
.hb-stats span{font-size:9px;letter-spacing:.05em}
.bf-card .bc,.bf-card .bs{letter-spacing:.04em}
@media(max-width:700px){
  .lede,.home-banner p{font-size:14px}
  .pcard .sku{font-size:13px}
  .sec{padding:44px 0}
}

/* ---------- 7. Hero: always-legible headline, deeper scrim ---------- */
.hb-word{opacity:1!important;transform:none!important;animation:none!important}
.hb-title::after,.hb-caret{display:none!important}
.hb-title em{
  animation:none!important;background:none!important;
  -webkit-text-fill-color:var(--blue,#8FA6B4);color:var(--blue,#8FA6B4);
}
.hb-running::after{transform:scaleX(1);animation:none}
.hb-shade{
  background:linear-gradient(90deg,rgba(18,21,17,.96) 0%,rgba(18,21,17,.88) 44%,rgba(18,21,17,.58) 100%),
             linear-gradient(0deg,rgba(18,21,17,.94) 0%,transparent 52%);
}
@media(max-width:900px){
  .hb-shade{background:linear-gradient(180deg,rgba(18,21,17,.92),rgba(18,21,17,.80) 58%,rgba(18,21,17,.96))!important}
  .home-banner{min-height:0}
  .hb-in{padding:40px 0 34px}
  .hb-stats{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .ticker div,.navsearch,.navsearch::before,.navsearch svg,.hb-word,.hb-title em,.hb-running::after{
    animation:none!important;transition:none!important;
  }
}

/* ---------- 8. One primary CTA colour across the site ---------- */
.btn.primary,.band .btn.primary{
  background:#D2B08A!important;border-color:#D2B08A!important;color:#1B1E18!important;font-weight:700;
}
.btn.primary:hover{background:#E3C6A2!important;border-color:#E3C6A2!important;color:#1B1E18!important}

/* ---------- 9. Brand wall: uniform white tiles ---------- */
#brands .bf-card .bi{
  background:#fff;border-radius:6px;padding:5px;margin:5px 0;min-height:26px;
}
#brands .bf-card .bi img{mix-blend-mode:multiply}
#brands .bf-card .bf-wordmark{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font:600 19px/1.05 Oswald,Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;
  text-align:center;border-bottom:2px solid currentColor;
}
#brands .bf-card:hover .bf-wordmark{transform:none}

/* ---------- 10. Enquiry list add-button (injected by enquiry-cart.js) ---------- */
.bg-add-enq{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;
  border:1px solid rgba(240,236,227,.3);border-radius:9px;cursor:pointer;
  background:rgba(62,67,56,.9);color:#F0ECE3;font:600 12px Inter,Arial,sans-serif;
  white-space:nowrap;transition:.18s;
}
.bg-add-enq:hover{border-color:#D2B08A;background:rgba(210,176,138,.16)}
.bg-add-enq.added{border-color:#7E9A7B;color:#B9D3B6}
.bg-add-enq svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* The pill / modal styles now live here (they used to be injected by the JS,
   which caused an unstyled flash and broke when that inline block was moved). */
.enq-pill{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;
  border:1px solid rgba(240,236,227,.22);border-radius:10px;
  background:rgba(62,67,56,.9);color:#F0ECE3;
  font:600 10.5px/1 Inter,Arial,sans-serif;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;flex:none;
}
.enq-pill:hover{border-color:#D2B08A}
.enq-pill b{color:#D2B08A;font-weight:700}
.enq-pill.fixed{position:fixed;right:14px;top:86px;z-index:60;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.enq-modal{
  position:fixed;inset:0;z-index:130;background:rgba(8,10,8,.72);
  display:none;place-items:center;padding:18px;
}
.enq-modal.open{display:grid}
.enq-box{
  width:min(560px,100%);max-height:84vh;overflow:auto;
  background:#242A22;border:1px solid rgba(240,236,227,.18);border-radius:15px;
  padding:20px;color:#F0ECE3;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.enq-box .k{font:10px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:#8FA6B4}
.enq-box h2{font:600 24px/1.1 Oswald,Impact,sans-serif;margin:5px 0 3px;text-transform:uppercase}
.enq-box p{font:12.5px/1.6 Inter,Arial,sans-serif;color:#B9B5A8;margin:5px 0 0}
.enq-list{margin:14px 0;border-top:1px solid rgba(240,236,227,.1)}
.enq-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(240,236,227,.08);
  font:12.5px/1.5 Inter,Arial,sans-serif;color:#B9B5A8;
}
.enq-row a{font:11px/1.5 'JetBrains Mono',ui-monospace,monospace;color:#8FA6B4;text-decoration:none}
.enq-row a:hover{color:#D2B08A}
.enq-row button{border:0;background:none;color:#8B8B7E;font-size:18px;cursor:pointer;line-height:1}
.enq-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.enq-actions a,.enq-actions button{
  height:36px;padding:0 13px;border-radius:8px;border:1px solid rgba(240,236,227,.2);
  background:rgba(62,67,56,.8);color:#F0ECE3;font:700 11px Inter,Arial,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;
}
.enq-actions .go{background:#D2B08A;border-color:#D2B08A;color:#1B1E18}
.enq-actions .x{background:transparent;color:#B9B5A8}
@media(max-width:700px){
  .enq-pill{height:30px;padding:0 8px;font-size:9.5px}
  .enq-pill.fixed{top:70px;right:10px}
  .enq-box{padding:16px}
}

/* ---------- 11. Search page: fill the empty state ---------- */
.bg-suggest{margin:26px 0 10px;padding-top:20px;border-top:1px solid rgba(240,236,227,.12)}
.bg-suggest h2{font:600 15px/1.2 Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px;color:#F0ECE3}
.bg-suggest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.bg-suggest a{
  display:block;padding:12px 14px;border:1px solid rgba(240,236,227,.14);border-radius:9px;
  background:rgba(62,67,56,.5);color:#F0ECE3;font-size:13px;text-decoration:none;transition:.18s;
}
.bg-suggest a:hover{border-color:#D2B08A;background:rgba(210,176,138,.12)}
.bg-suggest a small{display:block;margin-top:3px;color:#8B8B7E;font:10px/1.4 'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}
.search-page .search-results:not(:empty)~.bg-suggest{display:none}

/* ---------- 11b. Empty product image slots -> labelled placeholder ---------- */
.wrap[style*="1fr 340px"] aside div[style*="aspect-ratio"]:empty{
  position:relative;
  background:linear-gradient(135deg,#1B222B,#0D1118)!important;
}
.wrap[style*="1fr 340px"] aside div[style*="aspect-ratio"]:empty::before{
  content:"◇";position:absolute;left:0;right:0;top:36%;text-align:center;
  font-size:34px;line-height:1;color:rgba(143,166,180,.42);
}
.wrap[style*="1fr 340px"] aside div[style*="aspect-ratio"]:empty::after{
  content:"Product image\Aavailable on request";
  white-space:pre-line;position:absolute;left:12px;right:12px;bottom:20%;
  text-align:center;font:10px/1.9 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#7E857D;
}

/* ---------- 12. Add-button variants + header pill on phones ---------- */
.bg-add-mini{
  position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;
  display:grid!important;place-items:center;border-radius:6px;font-size:16px!important;
  line-height:1;background:rgba(42,45,38,.9);border-color:rgba(240,236,227,.28);
}
.bg-add-mini.added{background:#3D5A3B;border-color:#7E9A7B;color:#DCF0D8}
.pcard{padding-right:38px}
@media(max-width:900px){
  .nav .enq-pill{margin-left:auto;height:32px;font-size:9.5px;padding:0 9px}
}
@media(max-width:600px){
  .nav .enq-pill{font-size:9px;padding:0 7px}
  .bg-add-enq{height:36px;font-size:11.5px;padding:0 12px}
  .page-hero .cta .bg-add-enq{flex:1 1 100%;justify-content:center}
}