/* PCE Microchip Box Header: the shop masthead with reduced task navigation.

   Values follow the PCE Web design spec: 1440 frame, 80 tall, 12/132
   padding, 24 gap; 65x42 wordmark; 13/20 two-line brand name; 14/21 links
   right aligned; 170x52 outlined Back to website button.

   Colours are written out rather than taken from pce-chrome.css so the
   header renders the same whatever else the page loads. The side gutter
   follows --tr-gut when present, so it lines up with the page content. */

.mbh{background:#FFFFFF;border-bottom:1px solid #E1E9EE;font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif}
.mbh-bar{display:flex;align-items:center;gap:24px;max-width:1440px;min-height:80px;margin:0 auto;padding:12px var(--tr-gut,132px)}

.mbh-brand{flex:none;display:flex;align-items:center;gap:24px;color:#0B1B2E;text-decoration:none}
.mbh-brand:hover{text-decoration:none}
.mbh-mark{flex:none;display:flex;align-items:center;justify-content:center;width:65px;height:42px;padding:8px;background:#094DB0;color:#FFFFFF;font-style:italic;font-weight:700;font-size:22px;line-height:26px}
.mbh-name{display:flex;flex-direction:column;font-weight:600;font-size:13px;line-height:20px;color:#0B1B2E}

.mbh-links{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px;text-align:right}
.mbh-links a{font-weight:500;font-size:14px;line-height:21px;color:#3B4C5E;text-decoration:none}
.mbh-links a:hover{color:#0B1B2E;text-decoration:underline;text-underline-offset:3px}

.mbh-cta{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:170px;min-height:52px;padding:14px 16px;background:#FFFFFF;border:1px solid #CBD8E1;border-radius:2px;font-weight:600;font-size:16px;line-height:24px;color:#0B1B2E;text-align:center;text-decoration:none}
.mbh-cta:hover{border-color:#3B4C5E;text-decoration:none}

.mbh a:focus-visible{outline:3px solid #094DB0;outline-offset:2px}

@media (max-width:1280px){ .mbh-bar{padding-left:var(--tr-gut,48px);padding-right:var(--tr-gut,48px)} }
@media (max-width:1000px){ .mbh-bar{padding-left:var(--tr-gut,32px);padding-right:var(--tr-gut,32px)} }
@media (max-width:720px){
  .mbh-bar{flex-wrap:wrap;gap:14px;padding:14px var(--tr-gut,20px)}
  .mbh-brand{gap:16px}
  .mbh-links{order:3;flex-basis:100%;justify-content:flex-start;text-align:left}
  .mbh-cta{margin-left:auto;min-width:0}
}