@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap');
/* ============================================================
   FEDMICRO - PROCUREMENT PORTAL  2.0   assets/css/theme.css
   A complete site design for the eCommerce package. It restyles
   the package's own markup, so every page it renders takes this
   look. Preserved by the updater, so it survives an update.
   ============================================================ */

:root{
  --fm-brand:#0D1F5B; --fm-brand-dk:#081540; --fm-brand-hi:#2A46A0;   /* the logo navy */
  --fm-ink:#0F1626; --fm-ink-2:#1E2739; --fm-muted:#4A5468;
  --fm-line:#E1E5EE; --fm-line-2:#C7CEDC; --fm-wash:#F1F3F8; --fm-wash-2:#E6EAF3;
  --fm-page:#F6F7FA; --fm-ok:#0E7C4A; --fm-ok-soft:#E4F4EC; --fm-warn:#9A5B00; --fm-err:#B42318;
  --fm-r:7px;

  --primary:var(--fm-brand); --primary-dark:var(--fm-brand-dk); --accent:var(--fm-brand-hi);
  --page-ink:var(--fm-ink); --muted:var(--fm-muted); --hair:var(--fm-line);
  --bg:var(--fm-page); --card:#FFFFFF; --header-ink:var(--fm-ink); --footer-ink:#FFFFFF;
  --price-old:var(--fm-muted);
  --g-fill:#FFFFFF; --g-fill-strong:#FFFFFF; --g-fill-faint:var(--fm-wash);
  --g-edge:var(--fm-line); --g-edge-soft:var(--fm-line); --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 1px 2px rgba(18,25,43,.06); --sh-3:0 12px 34px -16px rgba(18,25,43,.30);
  --r-sm:5px; --r-md:7px; --r-lg:9px; --r-xl:10px; --r-pill:999px;
  --page-w:2000px; --page-gutter:clamp(18px,2vw,40px); --band-w:2000px; --band-pad:clamp(14px,1.6vw,28px);
}
html,body{background:var(--fm-page)}
body{
  color:var(--fm-ink-2);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.6; color:var(--fm-ink-2); letter-spacing:0;
}
.mono,.tile__part,.prow__meta,code,kbd{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
h1,h2,h3,h4{font-family:inherit; color:var(--fm-ink); letter-spacing:-.018em; font-weight:700}
a{color:var(--fm-brand)} a:hover{color:var(--fm-brand-dk)}
.wrap{width:min(var(--page-w),100% - var(--page-gutter))}

/* ---------- buttons: one size everywhere ---------- */
body .btn{
  min-height:40px; padding-inline:16px; border-radius:var(--fm-r); font-weight:650; font-size:.92rem;
  line-height:1.15; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; box-shadow:none; white-space:nowrap; transition:background-color .14s,border-color .14s,color .14s;
}
body .btn,body .btn--accent,body .btn--primary{background:var(--fm-brand); color:#fff; border-color:var(--fm-brand)}
body .btn:hover,body .btn--accent:hover{background:var(--fm-brand-dk); border-color:var(--fm-brand-dk); color:#fff}
body .btn--ghost{background:#fff; color:var(--fm-ink); border-color:var(--fm-line-2)}
body .btn--ghost:hover{background:var(--fm-wash); border-color:var(--fm-ink); color:var(--fm-ink)}
body .btn--sm{min-height:36px; font-size:.88rem; padding-inline:13px}
body .btn--block{width:100%}
body .pbtns{display:flex; flex-wrap:nowrap; align-items:stretch; gap:7px; width:100%}
body .pbtns > *,body .pbtns form{flex:1 1 0; min-width:0; display:flex; margin:0}
body .pbtns .btn,body .tile__add .btn{width:100%}
body .tile__add{margin:0; width:100%; display:flex}

/* ---------- the menu bar ---------- */
body .mainnav{background:#fff; border-top:1px solid var(--fm-line); border-bottom:1px solid var(--fm-line);
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
body .mainnav__in{display:flex; align-items:center; gap:2px; min-height:44px; flex-wrap:nowrap; overflow:visible}
body .mainnav a{padding:9px 13px; border-radius:6px; color:var(--fm-ink-2); font-weight:650; font-size:.92rem;
  white-space:nowrap; border:0; background:transparent}
body .mainnav a:hover{background:var(--fm-wash); color:var(--fm-ink)}
body .mainnav a.is-active,body .mainnav .hasdrop:hover > a,body .mainnav a[aria-current]{background:var(--fm-wash-2); color:var(--fm-brand)}
body .mainnav a.is-active::after,body .mainnav a::after{display:none}
body .mainnav__cta{margin-left:auto; background:var(--fm-brand)!important; color:#fff!important; padding:9px 16px; font-weight:700}
body .mainnav__cta:hover{background:var(--fm-brand-dk)!important; color:#fff!important}
body .navtag{background:var(--fm-ok-soft); color:var(--fm-ok); font-weight:700; border-radius:4px; font-size:.68rem; padding:1px 6px; margin-left:6px}
body .hasdrop{position:relative}
body .dropdown{
  background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); box-shadow:var(--sh-3);
  padding:8px; min-width:250px; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body .dropdown a{display:block; padding:8px 12px; border-radius:5px; color:var(--fm-ink-2); font-weight:600; font-size:.9rem}
body .dropdown a:hover{background:var(--fm-wash); color:var(--fm-brand)}
body .dropdown__more,body .flyout__all{color:var(--fm-brand); font-weight:700}
/* MAIN CATEGORIES ONLY - subcategories stay on the category page */
body .dropdown .flyout,body .flyout{display:none!important}
body .dropdown__parent .flyout__arrow{display:none}
body .dropdown__parent.has-flyout{position:static}
/* the hamburger is for narrow screens, as the package intends */
body .navtoggle{display:none}
@media (max-width:980px){
  body .navtoggle{display:inline-flex!important; align-items:center; justify-content:center; flex-direction:column; gap:4px;
    width:40px; height:40px; border:1px solid var(--fm-line-2); border-radius:var(--fm-r); background:#fff; cursor:pointer}
  body .navtoggle span{display:block; width:17px; height:2px; background:var(--fm-ink); border-radius:2px}
  body .mainnav__in{flex-wrap:wrap; padding-block:6px}
  body .mainnav a{flex:1 1 auto; text-align:center}
  body .mainnav__cta{flex:1 0 100%; margin-left:0}
  body .dropdown{position:static; box-shadow:none; border:0; padding:0 0 0 12px; min-width:0}
}

/* ---------- masthead: navy, flush, no floating cards ---------- */
body .masthead{
  background:var(--fm-brand); border-bottom:0; box-shadow:none; border-radius:0; margin:0;
  position:sticky; top:0; z-index:40; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body .masthead__in{min-height:62px; height:auto; gap:clamp(10px,1.4vw,24px); padding-block:10px; border-radius:0; margin:0; background:transparent}
body .brand{display:flex; align-items:center}
body .brand img{height:38px; width:auto; max-width:210px; background:#fff; padding:6px 10px; border-radius:var(--fm-r)}
body .brand__text{color:#fff; font-weight:800; font-size:1.1rem}
/* search: white fields on the navy bar, white button */
body .masthead__search{flex:1 1 auto; min-width:0; max-width:860px}
body .masthead__search input,body .masthead__dept,body .masthead__search select{
  border:1px solid transparent; background:#fff; min-height:40px; box-shadow:none; font-size:.92rem; color:var(--fm-ink);
  border-radius:var(--fm-r) 0 0 var(--fm-r);
}
body .masthead__dept{border-right:1px solid var(--fm-line); max-width:180px; color:var(--fm-ink-2)}
body .masthead__search input{border-radius:0}
body .masthead__search input::placeholder{color:var(--fm-muted)}
body .masthead__search button{
  background:#fff; color:var(--fm-brand); border:1px solid #fff; border-radius:0 var(--fm-r) var(--fm-r) 0;
  min-height:40px; padding-inline:20px; font-weight:700; box-shadow:none;
}
body .masthead__search button:hover{background:var(--fm-wash-2); color:var(--fm-brand-dk)}
/* quote, sign in, cart */
body .masthead__acts{display:flex; align-items:center; gap:clamp(10px,1.3vw,20px)}
body .masthead__quote,body .masthead__acct{
  background:transparent; border:0; box-shadow:none; border-radius:0; padding:2px;
  display:flex; flex-direction:column; justify-content:center; line-height:1.2; color:#fff;
}
body .masthead__q{display:block; font-weight:650; font-size:.9rem; color:#fff}
body .masthead__qs{display:block; color:#A9B6D8; font-size:.74rem}
body .masthead__quote:hover .masthead__q{text-decoration:underline}
body .masthead__cart{
  background:#fff; color:var(--fm-brand); border:1px solid #fff; border-radius:var(--fm-r);
  min-height:40px; padding-inline:16px; font-weight:700; font-size:.92rem; box-shadow:none;
}
body .masthead__cart:hover{background:var(--fm-wash-2); color:var(--fm-brand-dk)}
body .navcount,body .navco{background:var(--fm-brand-hi); color:#fff; font-weight:700}
body .navtoggle{background:transparent; border-color:rgba(255,255,255,.45)}
body .navtoggle span{display:block; width:17px; height:2px; background:#fff; border-radius:2px}
/* contact strip above it, and a ticker that stops clipping mid-word */
body .utilitybar,body .utilitybar__in,body .utilitybar__panel,body .utilitybar__row{
  background:var(--fm-brand-dk)!important; border:0; box-shadow:none; border-radius:0; margin:0;
  clip-path:none!important; -webkit-clip-path:none!important; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body .utilitybar{border-bottom:1px solid rgba(255,255,255,.12)}
body .utilitybar__row{min-height:34px; font-size:.79rem; gap:clamp(12px,1.6vw,24px); flex-wrap:nowrap}
body .utilitybar .ub,body .utilitybar span{color:#A9B6D8; min-width:0}
body .utilitybar .ub--mail,body .utilitybar .ub:first-child{color:#fff; font-weight:600}
body .utilitybar .ub:hover{color:#fff}
body .utilitybar .ub__reg b{color:#fff; font-family:"JetBrains Mono",monospace; font-weight:500}
body .utilitybar .ub--right{margin-left:auto; min-width:0; overflow:hidden; display:flex; align-items:center; gap:10px}
body .utilitybar .ticker,body .utilitybar .ticker__in{
  display:flex; align-items:center; gap:10px; min-width:0; max-width:100%;
  white-space:nowrap; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
  mask-image:linear-gradient(90deg,#000 90%,transparent);
}
body .utilitybar .ticker__item{color:#C6D0E8; flex:0 0 auto}
/* the menu bar sits white under the navy */
body .mainnav{border-top:0}
@media (max-width:1100px){
  body .utilitybar .ub--addr,body .utilitybar .ub--hours{display:none}
}

/* ---------- page furniture ---------- */
body .hero{background:#fff; border-bottom:1px solid var(--fm-line); color:var(--fm-ink); border-radius:0}
body .hero::before{display:none}
body .hero .wrap{padding-block:clamp(26px,3vw,44px)}
body .hero h1,body .slide__body h1{color:var(--fm-ink); font-size:clamp(1.6rem,2.6vw,2.4rem); letter-spacing:-.025em}
body .hero p,body .slide__body p{color:var(--fm-muted); max-width:70ch}
body .hero .btn--ghost{background:#fff; color:var(--fm-ink); border-color:var(--fm-line-2)}
body .section{padding-block:clamp(24px,2.6vw,40px)}
body .section--soft{background:#fff; border-block:1px solid var(--fm-line)}
body .section__head{margin-bottom:18px; padding-left:0}
body .section__head::before{display:none}
body .eyebrow{display:block; color:var(--fm-brand); font-weight:700; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.35rem}
body .section__head h2{font-size:clamp(1.25rem,1.8vw,1.6rem); font-weight:750}
body .section__lede,body .section__head p{color:var(--fm-muted); max-width:80ch; margin-top:.35rem}
body .pagehead{background:#fff; border-bottom:1px solid var(--fm-line); padding-block:18px 16px}
body .pagehead h1{font-size:clamp(1.4rem,2.2vw,2rem)}
body .crumbs{color:var(--fm-muted); font-size:.83rem}
body .crumbs a{color:var(--fm-muted)} body .crumbs a:hover{color:var(--fm-brand)}

/* ---------- catalogue: compact rows ---------- */
body .catalog{gap:clamp(16px,1.8vw,30px); align-items:start}
body .catfilter{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); font-size:.9rem; overflow:visible; box-shadow:none}
body .catfilter__head{background:var(--fm-wash); color:var(--fm-ink); border-bottom:1px solid var(--fm-line); padding:10px 13px; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase}
body .catfilter__head > span:first-child{background:transparent; color:inherit; padding:0; font:inherit}
body .catfilter__count,body .catfilter__cnt{color:var(--fm-muted); font-weight:500; font-family:"JetBrains Mono",monospace; font-size:.78rem}
body .catfilter__group{border-bottom:1px solid var(--fm-line); padding:10px 13px}
body .catfilter__toggle,body .catfilter__label{font-weight:700; color:var(--fm-ink); font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; background:transparent; border:0; padding:0; width:100%; text-align:left; cursor:pointer}
body .catfilter__list{margin-top:6px; display:grid; gap:1px; max-height:240px; overflow:auto}
body .catfilter__row{display:flex; align-items:center; gap:8px; padding:4px 0; color:var(--fm-ink-2)}
body .catfilter__row:hover{color:var(--fm-brand)}
body .catfilter input[type=checkbox]{accent-color:var(--fm-brand); width:15px; height:15px; flex:0 0 auto; min-height:0}
body .catfilter__cnt{margin-left:auto}
body .catfilter__actions{padding:11px 13px; display:flex; gap:7px; border-top:1px solid var(--fm-line)}
body .catfilter__actions .btn,body .catfilter__apply{flex:1 1 0}
body .catfilter-mobtoggle{border:1px solid var(--fm-line-2); border-radius:var(--fm-r); background:#fff; color:var(--fm-brand); font-weight:700; min-height:42px}
body .toolbar,body .filterbar,body .pf3__res{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); padding:9px 13px; margin-bottom:12px; box-shadow:none}
body .toolbar__count,body .pf3__cnt{font-weight:700; color:var(--fm-ink)}
body .toolbar select,body .filterbar select,body .toolbar input{border:1px solid var(--fm-line-2); border-radius:var(--fm-r); min-height:38px; background:#fff}
body .plist{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); overflow:hidden}
body .prow{background:#fff; border:0; border-bottom:1px solid var(--fm-line); border-radius:0; padding:11px 13px; box-shadow:none; align-items:center}
body .prow:last-child{border-bottom:0}
body .prow:hover{background:var(--fm-wash)}
body .prow__img{background:#fff; border:1px solid var(--fm-line); border-radius:5px}
body .prow__name{font-weight:600; color:var(--fm-ink); font-size:.95rem}
body .prow__meta{color:var(--fm-muted); font-size:.78rem}
body .prow__now{font-size:1.12rem; font-weight:800; color:var(--fm-ink)}
body .prow__was{color:var(--fm-muted); text-decoration:line-through; font-size:.82rem}
body .prow__save{color:var(--fm-ok); font-weight:700; font-size:.78rem}
body .prow__qty input{border:1px solid var(--fm-line-2); border-radius:5px; min-height:38px; width:74px}
body .tile{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); box-shadow:none; display:flex; flex-direction:column; overflow:hidden}
body .tile:hover{border-color:var(--fm-line-2); box-shadow:var(--sh-2)}
body .tile__img{background:#fff; border-bottom:1px solid var(--fm-line); padding:12px}
body .tile__img img{transform:none!important}
body .tile__save{background:var(--fm-ok-soft); color:var(--fm-ok); font-weight:700; border-radius:4px; font-size:.7rem; padding:2px 7px}
body .tile__body{padding:12px; gap:4px; display:flex; flex-direction:column; flex:1 1 auto}
body .tile__brand{color:var(--fm-muted); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
body .tile__name{font-size:.92rem; line-height:1.35; font-weight:600}
body .tile__name a{color:var(--fm-ink)}
body .tile__part{color:var(--fm-muted); font-size:.75rem}
body .tile__price{margin-top:auto; padding-top:6px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
body .price-new,body .price-plain{color:var(--fm-ink); font-size:1.14rem; font-weight:800}
body .price-old{color:var(--fm-muted); font-size:.8rem; text-decoration:line-through}
body .price-ask{color:var(--fm-brand); font-weight:700; font-size:.92rem}
body .tile .pbtns{margin-top:9px}
body .pager a,body .pager span{border:1px solid var(--fm-line); border-radius:var(--fm-r); background:#fff; color:var(--fm-ink-2); min-width:38px; min-height:38px; font-weight:600}
body .pager .is-active,body .pager [aria-current]{background:var(--fm-brand); border-color:var(--fm-brand); color:#fff}
body .catpills__t,body .relcats a{background:#fff; color:var(--fm-ink-2); border:1px solid var(--fm-line); border-radius:var(--fm-r); font-weight:600; padding:6px 12px}
body .catpills__t:hover,body .relcats a:hover{background:var(--fm-brand); color:#fff; border-color:var(--fm-brand)}

/* ---------- product page ---------- */
body .pdp{gap:clamp(18px,2.2vw,38px)}
body .gallery__main{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r)}
body .gallery__thumbs a,body .gallery__thumbs button{background:#fff; border:1px solid var(--fm-line); border-radius:5px}
body .pdp__brand{color:var(--fm-brand); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem}
body .pdp h1{font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.28; font-weight:700}
body .pdp__meta{color:var(--fm-muted); font-size:.85rem}
/* not sticky: the buy box scrolls away and the bottom action bar takes over */
body .pdp__buy{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); padding:16px; box-shadow:none; position:static}
body .pdp__price{font-size:clamp(1.5rem,2.2vw,2rem); font-weight:800; color:var(--fm-ink)}
body .pdp__save{color:var(--fm-ok); background:var(--fm-ok-soft); border-radius:4px; padding:2px 8px; font-weight:700; font-size:.78rem}
body .pdp__assure{color:var(--fm-muted); font-size:.85rem}
body .qty input,body .field input,body .field select,body .field textarea,
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=password],select,textarea{
  border:1px solid var(--fm-line-2); border-radius:var(--fm-r); background:#fff; min-height:40px; color:var(--fm-ink); box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--fm-brand-hi) 45%,transparent); outline-offset:1px; border-color:var(--fm-brand)}
body .tabs{border-bottom:1px solid var(--fm-line); gap:2px}
body .tabs a,body .tabs button{border:0; border-radius:0; background:transparent; color:var(--fm-muted); font-weight:650; padding:10px 14px}
body .tabs .is-on,body .tabs [aria-selected=true]{color:var(--fm-ink); border-bottom:3px solid var(--fm-brand)}
body .spectable{border:1px solid var(--fm-line); border-radius:var(--fm-r); overflow:hidden; border-collapse:separate; border-spacing:0; width:100%}
body .spectable th,body .spectable td{border-bottom:1px solid var(--fm-line); padding:9px 13px; font-size:.9rem}
body .spectable th{background:var(--fm-wash); color:var(--fm-muted); font-weight:600; width:34%; text-align:left}
body .specgroup{background:var(--fm-wash-2); font-weight:800; color:var(--fm-ink)}

/* ---------- the action bar the script adds to a product page ---------- */
.fm-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff;
  border-top:1px solid var(--fm-line-2); box-shadow:0 -10px 30px -18px rgba(18,25,43,.45);
  transform:translateY(102%); transition:transform .2s ease;
  padding:10px clamp(14px,2vw,28px) calc(10px + env(safe-area-inset-bottom,0px));
}
.fm-bar.is-on{transform:none}
.fm-bar__in{display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); max-width:var(--page-w); margin-inline:auto}
.fm-bar__n{flex:1 1 auto; min-width:0; font-weight:600; color:var(--fm-ink); font-size:.93rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fm-bar__mpn{display:block; font-family:"JetBrains Mono",monospace; font-size:.76rem; color:var(--fm-muted); font-weight:400}
.fm-bar__p{font-size:1.15rem; font-weight:800; color:var(--fm-ink); white-space:nowrap}
.fm-bar__a{display:flex; gap:8px; align-items:center}
.fm-bar__a input{width:70px}
@media (max-width:700px){
  .fm-bar__p,.fm-bar__mpn{display:none}
  .fm-bar__a{flex:1 1 auto}
  .fm-bar__a .btn{flex:1 1 0}
}

/* ---------- add to cart -> checkout ---------- */
.fm-drawer{position:fixed; inset:0; z-index:80; display:none}
.fm-drawer.is-on{display:block}
.fm-drawer__scrim{position:absolute; inset:0; background:rgba(18,25,43,.45)}
.fm-drawer__p{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,100%); background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--sh-3);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.fm-drawer__h{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--fm-line); background:var(--fm-brand); color:#fff}
.fm-drawer__h b{font-size:1rem}
.fm-drawer__x{background:transparent; border:0; color:#fff; font-size:1.4rem; line-height:1; cursor:pointer}
.fm-drawer__b{padding:18px; overflow:auto; flex:1 1 auto}
.fm-drawer__item{display:flex; gap:12px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--fm-line); margin-bottom:14px}
.fm-drawer__item b{display:block; color:var(--fm-ink); font-size:.94rem; line-height:1.35}
.fm-drawer__item span{color:var(--fm-muted); font-size:.82rem}
.fm-drawer__row{display:flex; justify-content:space-between; padding:6px 0; color:var(--fm-muted); font-size:.92rem}
.fm-drawer__row b{color:var(--fm-ink)}
.fm-drawer__f{padding:16px 18px; border-top:1px solid var(--fm-line); display:grid; gap:8px}
.fm-drawer__f .btn{width:100%}
.fm-steps{display:flex; gap:8px; margin:0 0 18px; padding:0; list-style:none; flex-wrap:wrap}
.fm-steps li{display:flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--fm-line);
  border-radius:var(--fm-r); background:#fff; color:var(--fm-muted); font-size:.88rem; font-weight:600}
.fm-steps li b{display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--fm-wash-2);
  color:var(--fm-muted); align-items:center; justify-content:center; font-size:.76rem}
.fm-steps li.is-on{border-color:var(--fm-brand); color:var(--fm-brand)}
.fm-steps li.is-on b{background:var(--fm-brand); color:#fff}
.fm-steps li.is-done b{background:var(--fm-ok); color:#fff}
.fm-toast{position:fixed; right:18px; bottom:18px; z-index:90; background:var(--fm-ink); color:#fff;
  padding:12px 16px; border-radius:var(--fm-r); box-shadow:var(--sh-3); font-weight:600; font-size:.92rem}

/* ---------- cart and checkout ---------- */
body .cline{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); padding:12px}
body .summary,body .card,body .panel{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); box-shadow:none}
body .sumrows dt,body .sumrows dd{padding:7px 0; border-bottom:1px solid var(--fm-line)}
body .sumrows .total{font-size:1.1rem; font-weight:800; color:var(--fm-ink); border-bottom:0}
body .notice{border-radius:var(--fm-r)}
body .notice--ok{background:var(--fm-ok-soft); border:1px solid color-mix(in srgb,var(--fm-ok) 30%,#fff); color:var(--fm-ok)}
body .notice--err{background:#FDECEA; border:1px solid #F5C2C0; color:var(--fm-err)}

/* ---------- footer ---------- */
body .sitefoot{background:var(--fm-ink); color:#CBD3E2; border-top:0}
body .sitefoot__grid{display:grid; grid-template-columns:1.5fr 1fr 1.7fr 1.1fr; gap:clamp(18px,2vw,36px);
  padding-block:clamp(26px,2.8vw,40px); align-items:start}
body .sitefoot__name,body .sitefoot h3,body .sitefoot h4{color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px}
/* the Company heading sits over the middle of its two columns */
body .sitefoot__col--company h4{text-align:center}
body .sitefoot__col--company .sitefoot__links{columns:2; column-gap:20px}
body .sitefoot__col--company .sitefoot__links a{display:block; break-inside:avoid}
body .sitefoot a{color:#CBD3E2} body .sitefoot a:hover{color:#fff; text-decoration:underline}
body .sitefoot__col a,body .sitefoot__col span{display:block; padding-block:3px; font-size:.9rem}
body .sitefoot__intro,body .sitefoot__line,body .sitefoot__addr{color:#8B96AC; font-size:.9rem}
body .sitefoot__logo{background:transparent; padding:0; margin-bottom:10px; display:inline-block}
body .sitefoot__logo img{display:block; height:34px!important; width:auto!important; max-width:180px!important;
  object-fit:contain; filter:none; background:#fff; padding:6px 9px; border-radius:6px}
body .sitefoot__regtable,body .sitefoot__regs{color:#8B96AC; font-size:.82rem; font-family:"JetBrains Mono",monospace}
body .sitefoot__regtable b,body .sitefoot__regs b{color:#fff; font-weight:500}
body .sitefoot__bar{background:#0A0F1C; border-top:1px solid rgba(255,255,255,.1); color:#8B96AC; font-size:.83rem}
body .sitefoot__soc a{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:6px; color:#CBD3E2}
body .sitefoot__soc a:hover{background:var(--fm-brand-hi); border-color:var(--fm-brand-hi); color:#fff}
body .sitefoot__cta{background:var(--fm-brand); border-radius:0}
body .sitefoot__cta-btn{background:#fff; color:var(--fm-brand); border:1px solid #fff; border-radius:var(--fm-r); font-weight:700}
body .sitefoot__cta-btn--alt{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
@media (max-width:980px){ body .sitefoot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ body .sitefoot__grid{grid-template-columns:1fr} }

/* ---------- odds and ends ---------- */
body .sitechat__bubble{
  background:#fff url('../uploads/logo/fedmicro-mark.svg') center/60% no-repeat;
  border:2px solid var(--fm-brand); box-shadow:var(--sh-3);
}
body .sitechat__bubble svg,body .sitechat__bubble img{display:none}
body .sitechat__head{background:var(--fm-brand); color:#fff}
body .sitechat__title{color:#fff}
body .sitechat__start{background:var(--fm-brand); color:#fff; border-color:var(--fm-brand)}
body .cookiebar{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); box-shadow:var(--sh-3); color:var(--fm-ink)}
body .empty{border:1px dashed var(--fm-line-2); border-radius:var(--fm-r); background:#fff; color:var(--fm-muted)}
body .catcard,body .catcard--auto,body .tb-ct,body .tb-wc,body .tb-bi,body .artcard{
  background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); box-shadow:none;
}
body .catcard:hover,body .tb-ct:hover,body .artcard:hover{border-color:var(--fm-line-2); box-shadow:var(--sh-2)}
body .catcard__i,body .tb-wc__ic,body .tb-bi__i{background:var(--fm-wash); color:var(--fm-brand); border:1px solid var(--fm-line); border-radius:6px}
::selection{background:color-mix(in srgb,var(--fm-brand-hi) 30%,transparent)}
:focus-visible{outline:3px solid var(--fm-brand-hi); outline-offset:2px}

/* ---------- phone: the search bar takes its own row ---------- */
@media (max-width:760px){
  body .masthead__in{flex-wrap:wrap; row-gap:8px}
  body .brand{margin-right:auto}
  body .brand img{height:32px}
  body .masthead__acts{margin-left:auto; gap:10px}
  body .masthead__quote:not(.masthead__acct){display:none}
  body .utilitybar .ub--right{display:none}
  body .utilitybar__row{justify-content:center; gap:14px}
  body .masthead__search{order:5; flex:1 0 100%; min-width:0; max-width:none; width:100%}
  body .masthead__search input,body .masthead__search select,body .masthead__search button{min-width:0}
  body .masthead__dept{display:none}
  body .masthead__search input{border-left:1px solid var(--fm-line-2); border-radius:var(--fm-r) 0 0 var(--fm-r)}
  body .masthead__acts{margin-left:auto; gap:10px}
  body .masthead__quote .masthead__qs{display:none}
}


/* ============================================================
   v2.3  -  full width, darker text, header that cannot overlap,
   a footer Company column in two columns with or without the
   template patch, and the search box only where it is useful.
   ============================================================ */

/* ---------- full screen: the package caps the page at 1440px ---------- */
:root{
  --page-w:2600px!important;
  --page-gutter:clamp(14px,1.6vw,34px)!important;
  --band-w:min(var(--page-w),100% - var(--page-gutter))!important;
  --band-pad:0px!important;
  --page-inset:calc((100% - min(var(--page-w),100% - var(--page-gutter))) / 2)!important;
}
body .wrap,body .utilitybar__row,body .masthead__in,body .mainnav__in,body .sitefoot__grid,body .sitefoot__bar-in{
  width:min(var(--page-w),100% - var(--page-gutter))!important; max-width:none!important; margin-inline:auto!important;
}
/* no floating rounded cards - every band runs edge to edge */
body .utilitybar,body .utilitybar__in,body .utilitybar__panel,body .utilitybar__row,
body .masthead,body .masthead__in,body .mainnav,body .mainnav__in{
  border-radius:0!important; box-shadow:none!important; margin-block:0!important;
}
body .utilitybar__panel,body .utilitybar__in{padding:0!important; border:0!important}
body .mainnav__in{border:0!important}
body .section > .wrap,body .catalog,body .pdp{max-width:none}

/* ---------- the top strip: nothing can sit on top of anything ---------- */
body .utilitybar__row{
  display:flex!important; align-items:center; flex-wrap:nowrap; overflow:hidden;
  gap:clamp(10px,1.4vw,22px); position:relative;
}
body .utilitybar__row > *{position:static!important; float:none!important; transform:none!important; flex:0 0 auto; min-width:0}
body .utilitybar .ub{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw}
body .utilitybar .ub--right{flex:1 1 auto; justify-content:flex-end; max-width:none}
body .utilitybar .ub__i,body .utilitybar .ub svg,body .utilitybar .ub img{flex:0 0 auto; width:14px; height:14px}

/* ---------- text: darker, not grey ---------- */
body,body p,body li,body td,body dd{color:var(--fm-ink-2)}
body .section__lede,body .section__head p,body .lede{color:#3C465C}
body .tile__name a,body .prow__name,body .card__name{color:var(--fm-ink)}
body .tile__part,body .prow__meta,body .crumbs,body .pdp__meta{color:#55607A}
body .catfilter__row,body .facet label{color:var(--fm-ink-2)}
body .sitefoot__intro,body .sitefoot__line,body .sitefoot__addr,body .sitefoot__col a,body .sitefoot__col span{color:#C3CCDD}
body .mainnav a{color:var(--fm-ink-2)}
body .mainnav a:hover{color:var(--fm-brand)}

/* ---------- footer Company: two columns, heading centred over both ---------- */
body .sitefoot__col--company{columns:2; column-gap:24px}
body .sitefoot__col--company h4{column-span:all; text-align:center; margin-bottom:10px}
body .sitefoot__col--company a{display:block; break-inside:avoid}
body .sitefoot__col--company .sitefoot__links{columns:auto}

/* ---------- the search box belongs on the catalogue ---------- */
body.fm-nosearch .masthead__search{display:none}
body.fm-nosearch .masthead__in{gap:clamp(12px,2vw,30px)}
body.fm-nosearch .masthead__acts{margin-left:auto}
/* quote and sign in sit before the cart */
body .masthead__acts{display:flex; align-items:center}
body .masthead__cart{order:9; margin-left:4px}
body .masthead__quote,body .masthead__acct,body .fm-act{order:1}
body .fm-act{display:flex; flex-direction:column; justify-content:center; line-height:1.2; color:#fff; padding:2px}
body .fm-act .masthead__q{color:#fff; font-weight:650; font-size:.9rem}
body .fm-act .masthead__qs{color:#A9B6D8; font-size:.74rem}
body .fm-act:hover .masthead__q{text-decoration:underline}


/* ============================================================
   v2.4  -  corrections from the live site
   ============================================================ */

/* the package paints the menu bar with the header colour - it stays white */
body .mainnav,body header .mainnav,body .masthead .mainnav{background:#fff!important; border-top:0!important; border-bottom:1px solid var(--fm-line)!important}
body .mainnav a{color:var(--fm-ink)!important; background:transparent}
body .mainnav a:hover{background:var(--fm-wash)!important; color:var(--fm-brand)!important}
body .mainnav a.is-active,body .mainnav a[aria-current],body .mainnav .hasdrop:hover > a{background:var(--fm-wash-2)!important; color:var(--fm-brand)!important}
body .mainnav a.mainnav__cta{background:var(--fm-brand)!important; color:#fff!important}
body .dropdown a{color:var(--fm-ink-2)!important}

/* no outline box around the search row */
body .masthead__in{border:0!important; outline:0!important; box-shadow:none!important}
body .masthead{border:0!important}

/* the rotating line fades at both ends instead of chopping a word */
body .utilitybar .ub--right,body .utilitybar .ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);
}

/* the search box belongs to catalogue pages - no script needed to decide */
body:not(:has(.catalog)) .masthead__search{display:none}
body:not(:has(.catalog)) .masthead__acts{margin-left:auto}

/* footer: full width, no rounded card, logo that reads on the dark */
body .sitefoot{border-radius:0!important; margin:0!important; box-shadow:none!important; width:auto!important}
body img.sitefoot__logo,body .sitefoot__logo img{
  display:block; height:40px!important; width:auto!important; max-width:200px!important;
  background:transparent!important; padding:0!important; border-radius:0!important; filter:none!important; margin-bottom:14px;
}
body .sitefoot__col--intro p,body .sitefoot__intro{color:#C3CCDD}

/* ============================================================
   v2.5  -  header row, menu bar, banners
   ============================================================ */

/* the navy on the menu bar is on its inner row, not the bar */
body .mainnav__in,body .mainnav > .wrap{background:transparent!important; background-image:none!important; box-shadow:none!important}
body .mainnav::before,body .mainnav::after,body .mainnav__in::before,body .mainnav__in::after{
  background:none!important; box-shadow:none!important; opacity:0!important;
}

/* the cart is printed straight into the row - it goes to the right,
   with Request a quote and Sign in in front of it */
body .masthead__in > .masthead__cart{margin-left:auto}
body .masthead__acts{margin-left:auto; display:flex; align-items:center; gap:clamp(12px,1.4vw,22px)}
body .masthead__acts .masthead__cart{margin-left:0}

/* banners: edge to edge, no dots */
body .hero,body .hero__inner{
  width:100%!important; max-width:none!important; margin-inline:0!important;
  border-radius:0!important; box-shadow:none!important; border:0!important;
}
body .hero .slide,body .hero .slide__link,body .hero .slide__mask,body .hero img{border-radius:0!important}
body .hero .slide--plain img{width:100%!important; max-width:none!important}
body .hero__dots,body .hero__prev,body .hero__next,body .hero__arrow,body .hero__arrows{display:none!important}
body .hero{margin-block:0!important}
/* one Request a quote in the header, not two */
body:has(.masthead__acts .fm-act, .masthead__acts .masthead__quote) .mainnav a.mainnav__cta{display:none!important}

/* ============================================================
   v2.8  -  CHIPS: every card of this family, on every page that
   prints one - home categories and markets, the Markets page,
   About Us, subcategories on a category page, child tab pages.
   Icon and name in a slim rounded chip; the description stays on
   the page the chip opens. --cc is pinned to the logo navy's hue
   so nothing the package derives from it can come out another
   colour.
   ============================================================ */
body .catcard,body .catcard--auto{--cc:226!important}
body .catcard,body .catcard--auto,
body.cs-tint .catcard--auto,body.cs-solid .catcard--auto,body.cs-outline .catcard--auto{
  display:flex!important; flex-direction:row!important; align-items:center!important; gap:10px!important;
  background:#fff!important; background-image:none!important;
  border:1px solid var(--fm-line-2)!important; border-radius:999px!important; box-shadow:none!important;
  padding:6px 16px 6px 6px!important; min-height:44px!important; overflow:hidden;
  transition:background-color .14s ease,border-color .14s ease;
}
body .catcard--auto::before,body .catcard::before{display:none!important}
body .catcard__bg{display:none!important}
body .catcard__i,body.cs-solid .catcard__i,body.cs-outline .catcard__i{
  width:30px!important; height:30px!important; border-radius:50%!important; margin:0!important; border:0!important;
  background:var(--fm-brand)!important; color:#fff!important;
  display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 auto;
}
body .catcard__i svg{width:16px!important; height:16px!important}
body .catcard h3{
  font-size:.9rem!important; font-weight:700; line-height:1.25; margin:0!important; color:var(--fm-ink)!important;
  min-width:0; flex:1 1 auto; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* the description and the product count stay off the chip */
body .catcard p,body .catcard > span,body .catcard--auto > span,body .catcard__mk{display:none!important}
/* a chip with no icon (tab pages, some category pages) */
body .catcard:not(:has(.catcard__i)){padding:10px 16px 10px 18px!important}
/* the arrow at the end of every chip */
body .catcard::after,body .catcard--auto::after{
  display:block!important; content:"\2192"; flex:0 0 auto; margin-left:auto; padding-left:6px;
  color:var(--fm-brand); font-weight:700; font-size:.95rem;
}
body .catcard:hover,body .catcard--auto:hover,body.cs-tint .catcard--auto:hover{
  background:var(--fm-wash)!important; border-color:var(--fm-brand)!important;
}
body .catcard--auto:hover .catcard__i,body.cs-solid .catcard--auto:hover .catcard__i,body.cs-outline .catcard--auto:hover .catcard__i{
  background:var(--fm-brand-hi)!important; color:#fff!important;
}
/* grids of chips */
body .grid:has(> .catcard){gap:10px!important}
body .grid--4:has(> .catcard){grid-template-columns:repeat(4,minmax(0,1fr))!important}
body .grid--3:has(> .catcard){grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* a single category is one chip, not a bar across the page */
body .grid--3:has(> .catcard:only-child){grid-template-columns:minmax(0,480px)!important}
body .grid--3 > .catcard:only-child::after{content:"Shop now \2192"; font-size:.86rem}
/* the sections that hold them stay compact */
body .section:has(.catcard){padding-block:clamp(16px,1.8vw,26px)}
body .section:has(.catcard) .section__head{margin-bottom:10px}
body .section:has(.catcard) .section__head h2{font-size:clamp(1.15rem,1.5vw,1.35rem)}
body .section:has(.catcard) .section__head p{font-size:.88rem; margin-top:2px}
@media (max-width:1100px){
  body .grid--4:has(> .catcard),body .grid--3:has(> .catcard){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:600px){
  body .grid--4:has(> .catcard),body .grid--3:has(> .catcard),body .grid--3:has(> .catcard:only-child){grid-template-columns:minmax(0,1fr)!important}
}

/* ============================================================
   v2.7  -  the top strip: white text, real line icons
   ============================================================ */
body .utilitybar,body .utilitybar *{color:#fff!important}
body .utilitybar .ticker__dot,body .utilitybar .ticker__sep{opacity:.55}
/* the package prints emoji here - the envelope shows as a box on most machines */
body .utilitybar .ub__i{display:none!important}
body .utilitybar a.ub[href^="mailto:"]::before,
body .utilitybar a.ub[href^="tel:"]::before,
body .utilitybar .ub--addr::before{
  content:""; display:inline-block; width:15px; height:15px; flex:0 0 auto; margin-right:2px;
  background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
}
body .utilitybar a.ub[href^="mailto:"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E")}
body .utilitybar a.ub[href^="tel:"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
body .utilitybar .ub--addr::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}

/* ============================================================
   v2.9  -  the rotating line is white. Strong enough to beat
   Custom CSS written with !important, and it covers the ticker
   wherever the package prints it (strip or masthead).
   ============================================================ */
html body .utilitybar .ticker .ticker__track .ticker__item,
html body .utilitybar .ticker .ticker__item,
html body .masthead .ticker .ticker__item,
html body .ticker .ticker__track .ticker__item{
  color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:1!important; filter:none!important;
}
html body .utilitybar .ticker,html body .utilitybar .ticker .ticker__track,html body .ticker .ticker__track{opacity:1!important; filter:none!important}
html body .ticker .ticker__sep{color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:.6!important}
/* the fade at the ends is kept short so the line reads white across the strip */
body .utilitybar .ub--right{-webkit-mask-image:none!important; mask-image:none!important}
body .utilitybar .ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 96%,transparent)!important;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 96%,transparent)!important;
}


/* ============================================================
   v3.0  -  the header as chosen:
   contact bar B (slim with dividers), logo I (reversed with
   the company line), buttons J (big quote, round icons).
   ============================================================ */

/* ---------- contact bar: slim, thin rules between items ---------- */
body .utilitybar{padding:0!important; margin:0!important}
body .utilitybar__row{padding-block:0!important; min-height:30px!important; font-size:.76rem!important; gap:0!important}
body .utilitybar .ub{font-weight:500!important; padding:0 14px!important; border-right:1px solid rgba(255,255,255,.22)!important; font-size:.76rem!important}
body .utilitybar .ub:first-child{padding-left:0!important}
body .utilitybar .ticker{padding-left:14px}
html body .utilitybar .ticker .ticker__item{font-size:.76rem!important; font-weight:500!important}
body .utilitybar a.ub::before,body .utilitybar .ub--addr::before{width:12px!important; height:12px!important}

/* ---------- logo: reversed on the navy, with the company line ---------- */
body .masthead .brand{display:flex!important; align-items:center}
body .masthead .brand img{
  content:url('../uploads/logo/fedmicro-logo-reverse.svg');
  height:50px!important; width:auto!important; max-width:280px!important;
  background:transparent!important; padding:0!important; border-radius:0!important; box-shadow:none!important;
}
body .masthead .brand::after{
  content:"IT hardware, software & services\A for government and business"; white-space:pre;
  display:block; color:#fff; font-size:.8rem; font-weight:500; line-height:1.3; opacity:.9;
  margin-left:16px; padding-left:16px; border-left:1px solid rgba(255,255,255,.25);
}

/* ---------- buttons: one big Request a quote, Sign in and Cart as round icons ---------- */
body .fm-act--quote::before,body .fm-act--acct::before,body .fm-cart__i{
  content:""; display:inline-block; flex:0 0 auto; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
body .fm-act--quote::before{width:18px; height:18px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E")}
body .fm-act--acct::before{width:19px; height:19px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
body .fm-cart__i{width:19px; height:19px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.1a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.5L22 8H6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.1a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.5L22 8H6'/%3E%3C/svg%3E")}
body .masthead__acts{gap:12px!important}
body .fm-act .masthead__qs{display:none!important}
body a.fm-act--quote{
  flex-direction:row!important; align-items:center; gap:9px; background:#fff!important; color:var(--fm-brand)!important;
  border-radius:var(--fm-r); padding:0 22px!important; min-height:46px;
}
body a.fm-act--quote .masthead__q{color:var(--fm-brand)!important; font-size:.98rem!important; font-weight:700}
body a.fm-act--quote:hover{background:var(--fm-wash-2)!important}
body a.fm-act--quote:hover .masthead__q{text-decoration:none!important}
body a.fm-act--acct,body .masthead__cart.fm-cart{
  position:relative; width:42px!important; height:42px!important; min-height:0!important; padding:0!important;
  display:inline-flex!important; align-items:center; justify-content:center; flex-direction:row!important;
  border-radius:50%!important; background:transparent!important; border:1px solid rgba(255,255,255,.5)!important;
  color:#fff!important;
}
body a.fm-act--acct:hover,body .masthead__cart.fm-cart:hover{background:rgba(255,255,255,.12)!important; border-color:#fff!important}
body a.fm-act--acct .masthead__q,body .fm-cart__t{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
body .fm-cart__n{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:#fff; color:var(--fm-brand); font-size:.7rem; font-weight:800; line-height:19px; text-align:center;
  box-shadow:0 0 0 2px var(--fm-brand);
}

/* ---------- narrow screens ---------- */
@media (max-width:980px){
  body .masthead .brand::after{display:none}
}
@media (max-width:760px){
  body .masthead .brand img{height:40px!important}
  body a.fm-act--quote{padding:0 12px!important; min-height:40px}
  body a.fm-act--quote .masthead__q{font-size:.84rem!important}
  body a.fm-act--quote::before{display:none}
  body a.fm-act--acct,body .masthead__cart.fm-cart{width:38px!important; height:38px!important}
}


/* ============================================================
   v3.1  -  logo strips in full colour, and the header buttons
   hold their shape even before the new script arrives
   ============================================================ */
body .logostrip--style-solid .logostrip__item img,
body .logostrip--style-solid .logostrip__item:hover img{filter:none!important; opacity:1!important}

/* the first two links in the header group are always quote, then sign in */

/* ============================================================
   v3.2  -  the package's fixed line under "Shop by category"
   ("Parts, mounts and accessories held for immediate dispatch.")
   is hidden. It has no class of its own; the catalogue page's
   subcategory lede does, so that one is untouched.
   ============================================================ */
body .section:has(.grid--3 > .catcard) .section__head > p:not([class]){display:none!important}

/* ============================================================
   v3.3  -  POLICY PAGES: accordion (design E). The site script
   folds each section of Terms, Returns, Shipping and Privacy
   under its heading; the first is open. The empty contents
   slot the package prints is hidden.
   ============================================================ */
body .policy{display:block!important}
body .policy__rail{display:none!important}
body .prose--terms{max-width:980px}
body .fm-print{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border:1px solid var(--fm-line-2);
  border-radius:var(--fm-r); background:#fff; color:var(--fm-brand); font-weight:700; font-size:.86rem; cursor:pointer; font-family:inherit}
body .fm-print:hover{border-color:var(--fm-brand)}
body .fm-acc-all{margin-bottom:10px}
body .prose--terms .fm-acc{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); margin:0 0 8px; overflow:hidden}
body .prose--terms .fm-acc > summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 16px; color:var(--fm-ink);
}
body .prose--terms .fm-acc > summary::-webkit-details-marker{display:none}
body .prose--terms .fm-acc > summary::after{content:"+"; font-size:1.3rem; color:var(--fm-brand); font-weight:700; line-height:1; flex:0 0 auto}
body .prose--terms .fm-acc[open] > summary::after{content:"\2212"}
body .prose--terms .fm-acc[open] > summary{border-bottom:1px solid var(--fm-line); background:var(--fm-wash)}
body .prose--terms .fm-acc > summary:hover{background:var(--fm-wash)}
body .prose--terms .fm-acc > summary:focus-visible{outline:3px solid var(--fm-brand-hi); outline-offset:-3px}
body .prose--terms .fm-acc > summary > h2,body .prose--terms .fm-acc > summary > h3{
  margin:0!important; padding:0!important; border:0!important; font-size:1rem!important; font-weight:700; line-height:1.35; color:var(--fm-ink)!important;
}
body .prose--terms .fm-acc__b{padding:12px 16px 4px}
body .prose--terms .fm-acc__b > :last-child{margin-bottom:12px}
@media print{
  body .fm-acc-all{display:none!important}
  body .prose--terms .fm-acc{border:0; margin:0 0 10px}
  body .prose--terms .fm-acc > summary{padding:0 0 4px; background:none!important; border:0!important}
  body .prose--terms .fm-acc > summary::after{display:none}
  body .prose--terms .fm-acc__b{padding:0}
}
body .prose--terms .fm-acc{scroll-margin-top:170px}

/* ============================================================
   v3.4  -  policy text lines up: one left edge for headings,
   paragraphs and lists, inside and outside the folds
   ============================================================ */
body .prose--terms{text-align:left}
body .prose--terms p{margin:0 0 10px; line-height:1.6}
body .prose--terms p span[style]{letter-spacing:normal!important}
body .prose--terms ul,body .prose--terms ol{margin:0 0 12px; padding-left:22px}
body .prose--terms li{margin:3px 0; padding-left:2px}
body .prose--terms ul.fm-lines{list-style:none; padding-left:0}
body .prose--terms ul.fm-lines li{position:relative; padding-left:18px}
body .prose--terms ul.fm-lines li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--fm-brand)}
body .prose--terms .fm-acc > summary > h2 .fm-num{color:var(--fm-brand); margin-right:2px}
body .prose--terms .fm-acc > summary > h2{letter-spacing:.01em}
body .prose--terms > p:first-child{margin-bottom:14px}

/* ============================================================
   v3.5  -  policy pages: the reading column is centred on the
   page; the title and breadcrumb sit on the same column
   ============================================================ */
body .section:has(.prose--terms) > .wrap,
body:has(.prose--terms) .pagehead > .wrap,
body:has(.prose--terms) .crumbs > .wrap{
  width:min(980px, 100% - var(--page-gutter))!important; max-width:none!important; margin-inline:auto!important;
}
body .section:has(.prose--terms) .prose--terms{max-width:none}

/* ============================================================
   v3.6  -  policy pages, layout B: the title, breadcrumb and the
   Open all sections button are centred over the centred column;
   the policy text itself stays left-aligned for reading
   ============================================================ */
body:has(.prose--terms) .pagehead,body:has(.prose--terms) .pagehead h1,body:has(.prose--terms) .pagehead .eyebrow{text-align:center!important}
body:has(.prose--terms) .crumbs,body:has(.prose--terms) .crumbs > .wrap{text-align:center!important; justify-content:center!important}
body .fm-acc-all{display:flex!important; margin-inline:auto!important; width:fit-content}

/* ============================================================
   v3.7  -  Brands index: no filter panel, no search box and no
   "Every brand we carry..." line; the brand list takes the full
   width. A single brand's page keeps its filter.
   ============================================================ */
body .catalog:has(.brandgroup){grid-template-columns:minmax(0,1fr)!important}
body .catalog:has(.brandgroup) > aside,
body .catalog:has(.brandgroup) .catfilter-mobtoggle{display:none!important}
body:has(.brandgroup) .masthead__search{display:none!important}
body:has(.brandgroup) .masthead__acts{margin-left:auto}
body .catalog:has(.brandgroup) > section > p[style],
body .catalog:has(.brandgroup) section > p:has(+ .azbar),
body .catalog:has(.brandgroup) section > p:has(+ .brandgroup){display:none!important}
body .brandgroup{scroll-margin-top:170px}

/* ============================================================
   v3.8  -  Brands index: design H, arrow list. The package's own
   brand-index styling (sticky pill bar, 40px centred letters,
   52px gaps) is reset first, then the arrow list is drawn:
   full-width rows, whole row is the link, three across.
   ============================================================ */
body .azbar{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  position:static; top:auto; z-index:auto;
}
body .azbar a{
  min-width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--fm-line); border-radius:6px;
  font-family:inherit; font-weight:700; color:var(--fm-ink-2); font-size:.86rem; text-align:center;
}
body .azbar a:hover{border-color:var(--fm-brand); color:var(--fm-brand); background:#fff}
body .brandgroup{margin-bottom:0; padding:6px 0 10px; scroll-margin-top:calc(var(--fm-mast-h,137px) + 16px)}
body .brandgroup__letter{
  font-size:1rem; font-weight:800; letter-spacing:0; line-height:1.3; text-align:left; color:var(--fm-brand);
  padding:6px 0; margin-bottom:6px; border-bottom:2px solid var(--fm-brand); width:100%;
}
body .brandcols{list-style:none; margin:0; padding:0; columns:auto; column-gap:normal;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px}
body .brandcols li{margin-bottom:0}
body .brandcols a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 10px; border-bottom:1px solid var(--fm-line); color:var(--fm-ink); font-weight:600;
  font-size:inherit; line-height:1.5;
}
body .brandcols a:hover{background:var(--fm-wash); color:var(--fm-brand)}
body .brandcols__arrow{order:2; color:var(--fm-brand); flex:none; font-size:14px}
@media (max-width:900px){ body .brandcols{grid-template-columns:minmax(0,1fr)} }

/* ============================================================
   v3.9  -  catalogue: the "41657 products found" line is hidden
   ============================================================ */
body .toolbar__count,body .pf3__cnt{display:none!important}

/* ============================================================
   v4.0  -  CATALOGUE, as chosen:
   layout C (navy title band), search H (example searches),
   filter: tabs with the search beside them (was E), cards G (navy foot)
   ============================================================ */

/* ---------- filter: tabs (Categories, Brands, Price) with the search beside them; no sidebar ---------- */
body .catalog:has(#catfilter){grid-template-columns:minmax(0,1fr)!important; display:block!important}
/* no z-index here: a stacking context on the aside would trap anything inside it */
body #catfilter-aside{display:block!important; position:static!important; z-index:auto!important; margin:0 0 14px}
body .catalog:has(#catfilter) .catfilter-mobtoggle{display:none!important}
body .catalog:has(#catfilter) .toolbar{display:none!important}
body .fm-tabs{display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap}
body .fm-tab{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; cursor:pointer;
  border:1px solid var(--fm-line); border-bottom:0; border-radius:var(--fm-r) var(--fm-r) 0 0;
  background:var(--fm-wash); color:var(--fm-ink-2); font:inherit; font-weight:700; font-size:.92rem;
  position:relative; z-index:1;
}
body .fm-tab::after{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); margin-left:2px; opacity:.6}
body .fm-tab:hover{background:#fff; color:var(--fm-brand)}
body .fm-tab.is-on{background:#fff; color:var(--fm-brand); margin-bottom:-1px; padding-bottom:1px}
body .fm-tab.is-on::after{transform:translateY(2px) rotate(-135deg)}
body .fm-tab__n{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--fm-brand); color:#fff; font-size:.72rem}
/* the catalogue search, moved from the header to sit beside the tabs */
body .masthead .masthead__search{display:none!important}
/* search and sort sit together at the right of the tab row, both compact */
body .fm-tools{display:flex; align-items:center; gap:10px; margin:0 0 6px auto; flex:0 1 auto; min-width:0}
body .fm-tabs .masthead__search{display:flex!important; flex:0 1 400px; width:400px; min-width:220px; max-width:400px; margin:0; align-self:center; position:relative}
body .fm-tabs .masthead__search::after{font-size:.84rem!important; max-width:calc(100% - 100px)!important}
body .fm-sort{display:inline-flex; align-items:center; gap:8px; margin:0; font-size:.84rem; font-weight:600; color:var(--fm-muted); white-space:nowrap}
body .fm-sort select{
  min-height:42px; padding:0 34px 0 12px; border:1px solid var(--fm-line-2); border-radius:var(--fm-r); cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1F5B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/14px no-repeat;
  -webkit-appearance:none; appearance:none; font:inherit; font-size:.9rem; font-weight:600; color:var(--fm-ink);
}
body .fm-sort select:hover,body .fm-sort select:focus{border-color:var(--fm-brand)}
body .fm-tabs .masthead__search input{border:1px solid var(--fm-line-2)!important; border-right:0!important; border-radius:var(--fm-r) 0 0 var(--fm-r)!important; min-height:42px; background:#fff!important}
body .fm-tabs .masthead__search input:focus{border-color:var(--fm-brand)!important}
body .fm-tabs .masthead__search button{background:var(--fm-brand)!important; color:#fff!important; border:1px solid var(--fm-brand)!important; border-radius:0 var(--fm-r) var(--fm-r) 0!important; min-height:42px; padding-inline:22px!important}
body .fm-tabs .masthead__search button:hover{background:var(--fm-brand-dk)!important}
/* the panel under the tabs: closed until a tab is chosen */
body #catfilter{display:none!important}
body #catfilter.fm-panel-open{
  display:block!important; position:static!important; max-height:none!important; overflow:visible!important; margin:0!important;
  background:#fff!important; border:1px solid var(--fm-line)!important; border-radius:0 var(--fm-r) var(--fm-r) var(--fm-r)!important; padding:14px 16px!important;
}
body #catfilter .fm-fsec{display:none}
body #catfilter .fm-fsec.is-open{display:block}
body #catfilter .fm-fsec > .catfilter__head{display:none!important}
body #catfilter .fm-fsec .catfilter__searchwrap{max-width:380px; padding:0 0 10px; border:0}
body #catfilter .fm-fsec .catfilter__list,body #catfilter-list,body #brandfilter-list{columns:4 220px; column-gap:24px; max-height:340px!important; overflow:auto; flex:none}
body #catfilter .catfilter__row{break-inside:avoid}
/* categories: each top category runs the full width, its subcategories spread in columns beneath it */
body #catfilter #catfilter-list{columns:auto!important}
body #catfilter .catfilter__group{break-inside:auto}
body #catfilter .catfilter__subs{columns:4 220px; column-gap:24px; padding:8px 10px!important}
body #catfilter .catfilter__actions{
  display:flex!important; justify-content:flex-end; align-items:center; gap:10px;
  border:0!important; border-top:1px solid var(--fm-line)!important; padding:10px 0 0!important; margin-top:10px; background:transparent!important;
}
body #catfilter .catfilter__apply{
  background:var(--fm-brand)!important; color:#fff!important; border:0!important; border-radius:var(--fm-r)!important;
  min-height:40px; padding:0 20px!important; font-weight:700; flex:0 0 auto!important; width:auto!important; cursor:pointer;
}
body #catfilter .catfilter__apply:hover{background:var(--fm-brand-dk)!important}
body #catfilter .catfilter__clear{color:var(--fm-brand)!important; font-weight:700; padding:0 6px}
body #catfilter .catfilter__row--main{column-span:all; margin-bottom:6px}
body #catfilter .fm-fsec > .catfilter__list,body #catfilter #catfilter-list,body #catfilter #brandfilter-list{display:block!important}
body .fm-ftoggle,body .fm-fclose,body .fm-scrim{display:none!important}
body .masthead .masthead__acts,body .masthead .masthead__in > .masthead__cart{margin-left:auto}
@media (max-width:760px){
  body .fm-tools{order:-1; flex:1 0 100%; margin:0 0 8px; flex-wrap:wrap}
  body .fm-tabs .masthead__search{flex:1 1 100%; width:auto; max-width:none; order:0!important}
  body .fm-sort{order:1}
  body .fm-sort{flex:1 1 100%}
  body .fm-sort select{flex:1 1 auto}
  body .fm-tab{flex:1 1 0; justify-content:center; padding:0 10px}
  body #catfilter .fm-fsec .catfilter__list{columns:1}
}

/* ---------- layout C: navy title band over the products, four across ---------- */
body:has(.catalog .tile) .pagehead{background:var(--fm-brand)!important; border:0!important; padding-block:22px!important}
body:has(.catalog .tile) .pagehead h1,body:has(.catalog .tile) .pagehead .eyebrow{color:#fff!important}
body:has(.catalog .tile) .pagehead .eyebrow{opacity:.75}
/* eight across on every screen 1200px or wider - laptops included */
body .catalog:has(#catfilter) .grid--4{grid-template-columns:repeat(8,minmax(0,1fr))!important; gap:8px!important}
@media (max-width:1199px){ body .catalog:has(#catfilter) .grid--4{grid-template-columns:repeat(6,minmax(0,1fr))!important} }
@media (max-width:899px){ body .catalog:has(#catfilter) .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))!important} }
@media (max-width:599px){ body .catalog:has(#catfilter) .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
/* dense cards: the same navy-foot card, sized for eight across */
body .catalog:not(:has(.pdp)) .tile__img{height:140px!important; padding:8px!important}
body .catalog:not(:has(.pdp)) .tile__img img{max-height:118px!important}
body .catalog:not(:has(.pdp)) .tile__brand{font-size:.66rem!important; padding-top:9px!important}
body .catalog:not(:has(.pdp)) .tile__brand,body .catalog:not(:has(.pdp)) .tile__name,body .catalog:not(:has(.pdp)) .tile__part{padding-inline:9px!important}
body .catalog:not(:has(.pdp)) .tile__name{font-size:.8rem!important; line-height:1.3!important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
body .catalog:not(:has(.pdp)) .tile__part{font-size:.68rem!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body .catalog:not(:has(.pdp)) .tile__price{padding:8px 9px 0!important}
body .catalog:not(:has(.pdp)) .tile__price .price-new,body .catalog:not(:has(.pdp)) .tile__price .price-plain{font-size:1rem!important}
body .catalog:not(:has(.pdp)) .tile__price .price-ask{font-size:.8rem!important}
body .catalog:not(:has(.pdp)) .tile__price .price-old{font-size:.72rem!important}
body .catalog:not(:has(.pdp)) .tile .pbtns{flex-direction:column!important; gap:6px!important; padding:7px 9px 9px!important}
body .catalog:not(:has(.pdp)) .tile .pbtns .btn{min-height:32px!important; font-size:.74rem!important; padding-inline:6px!important; white-space:nowrap}
body .catalog:not(:has(.pdp)) .tile__img{position:relative!important}
body .catalog:not(:has(.pdp)) .tile__save{position:absolute!important; top:6px!important; left:6px!important; right:auto!important; z-index:1; font-size:.62rem!important; padding:2px 6px!important; white-space:nowrap}

/* ---------- search H: the empty field shows real searches ---------- */
body .masthead__search{position:relative}
body .masthead__search input::placeholder{color:transparent}
body .masthead__search::after{
  content:"e.g. 74050  \2022  Avery labels  \2022  HP toner"; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#8A95AD; font-size:.9rem; pointer-events:none; white-space:nowrap; overflow:hidden; max-width:calc(100% - 110px);
}
body .masthead__search:focus-within::after,body .masthead__search:has(input:not(:placeholder-shown))::after{display:none}

/* ---------- cards G: a navy band along the foot carries the price and the buttons ---------- */
body .tile__img{aspect-ratio:auto!important; height:200px; display:flex!important; align-items:center; justify-content:center}
body .tile__img img{max-height:170px!important}
body .tile__body{padding:0!important}
body .tile__brand,body .tile__name,body .tile__part{padding-inline:12px}
body .tile__brand{padding-top:12px}
body .tile__price{background:var(--fm-brand); margin-top:auto!important; padding:10px 12px 0!important}
body .tile__price .price-new,body .tile__price .price-plain,body .tile__price .price-ask{color:#fff!important}
body .tile__price .price-old{color:#A9B6D8!important}
body .tile .pbtns,body .tile .tile__add{background:var(--fm-brand); margin:0!important; padding:8px 12px 12px}
body .tile .pbtns .btn,body .tile .tile__add .btn{background:#fff!important; color:var(--fm-brand)!important; border-color:#fff!important}
body .tile .pbtns .btn--ghost{background:transparent!important; color:#fff!important; border-color:rgba(255,255,255,.6)!important}
body .tile .pbtns .btn--ghost:hover{background:rgba(255,255,255,.12)!important}

/* v4.1 marker - tabs, compact search and sort beside them, eight across */


/* ============================================================
   v4.2  -  FILTERS ON CATALOGUE PAGES ONLY, and full rows.
   A catalogue page is one with the catalogue's own filter form
   (#catfilter): the catalogue, its categories and search results.
   Everywhere else - product pages, manufacturer pages, any page -
   every filter panel, bar and button is removed, and the layout
   gives the space back to the content.
   ============================================================ */
body:not(:has(#catfilter)) .catalog > aside,
body:not(:has(#catfilter)) .catfilter-mobtoggle,
body:not(:has(#catfilter)) .pf2,
body:not(:has(#catfilter)) [class*="pf2__"],
body:not(:has(#catfilter)) [class*="pf3__"],
body:not(:has(#catfilter)) .filterbar,
body:not(:has(#catfilter)) .toolbar:has(.filterbar){display:none!important}
body .catalog:not(:has(#catfilter)){grid-template-columns:minmax(0,1fr)!important}
body .catalog:has(> .pdp){display:block!important}

/* manufacturer pages hold 60 products: six across fills every row (60 = 6 x 10),
   and so do four, three and two on smaller screens */
body .catalog:not(:has(#catfilter)):not(:has(.pdp)) .grid--4{grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:8px!important}
@media (max-width:1199px){ body .catalog:not(:has(#catfilter)):not(:has(.pdp)) .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))!important} }
@media (max-width:899px){ body .catalog:not(:has(#catfilter)):not(:has(.pdp)) .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (max-width:599px){ body .catalog:not(:has(#catfilter)):not(:has(.pdp)) .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
/* the catalogue's 48 a page fills every row at 8, 6, 4, 3 and 2 across; at the in-between
   width where 6 would not suit, 900-1199px, the catalogue keeps 6 (48 = 6 x 8) */
/* v4.2 marker - filters only on catalogue pages, full rows */


/* ============================================================
   v4.3  -  PRODUCT PAGE: design B, navy card. Image on the left;
   the title, price, quantity, buttons and assurances in a navy
   card on the right. Related products eight across, compact.
   ============================================================ */

body .catalog:has(> .pdp){display:block!important}
body .gallery__main{height:auto!important;max-height:none!important;min-height:0!important;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff;border:1px solid var(--fm-line);border-radius:var(--fm-r)}
body .gallery__main img{max-height:400px!important;width:auto;max-width:100%}
body .gallery__thumbs{display:flex;gap:8px;margin-top:10px}
body .gallery__thumbs button{flex:0 0 72px;height:62px;padding:4px;border:1px solid var(--fm-line);border-radius:6px;background:#fff;cursor:pointer}
body .gallery__thumbs button.is-on{border-color:var(--fm-brand);box-shadow:0 0 0 1px var(--fm-brand)}
body .gallery__thumbs img{width:100%;height:100%;object-fit:contain}
body .pdp h1{margin:4px 0 10px}
body .pdp__meta{display:flex;flex-wrap:wrap;gap:6px 14px}
body .pdp__meta b.stock-in{color:var(--fm-ok)}
body .pdp__buy{display:flex!important;flex-wrap:wrap;gap:8px;align-items:stretch}
body .pdp__buy .qty{display:inline-flex;align-items:stretch;border:1px solid var(--fm-line-2);border-radius:var(--fm-r);overflow:hidden;background:#fff}
body .pdp__buy .qty button{width:36px;border:0;background:var(--fm-wash);font-size:1.1rem;font-weight:700;color:var(--fm-brand);cursor:pointer}
body .pdp__buy .qty input{width:56px;border:0!important;text-align:center;border-radius:0!important;min-height:44px}
body .pdp__buy .btn{min-height:46px}
body .pdp__assure li svg{color:var(--fm-ok);flex:0 0 auto;margin-top:1px}
body .fm-sec-details h2,body .fm-sec-specs h2{font-size:1.25rem;margin:0 0 10px}
body .fm-sec-details{padding-top:22px}
body .grid--related{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:8px!important}
body .grid--related .tile__img{height:140px!important;padding:8px!important;position:relative!important}
body .grid--related .tile__img img{max-height:118px!important}
body .grid--related .tile__save{position:absolute!important;top:6px!important;left:6px!important;font-size:.62rem!important;padding:2px 6px!important;white-space:nowrap}
body .grid--related .tile__brand,body .grid--related .tile__name,body .grid--related .tile__part{padding-inline:9px!important}
body .grid--related .tile__name{font-size:.8rem!important;line-height:1.3!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body .grid--related .tile__part{font-size:.68rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .grid--related .tile .pbtns{flex-direction:column!important;gap:6px!important;padding:7px 9px 9px!important}
body .grid--related .tile .pbtns .btn{min-height:32px!important;font-size:.74rem!important;padding-inline:6px!important;white-space:nowrap}
@media (max-width:1199px){body .grid--related{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:599px){body .grid--related{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:900px){body .pdp{grid-template-columns:minmax(0,1fr)!important}}

body .pdp{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,40px);align-items:start;padding-top:10px}
body .pdp > div:last-child{background:var(--fm-brand);border-radius:12px;padding:24px;color:#fff}
body .pdp > div:last-child h1,body .pdp__brand{color:#fff!important}
body .pdp__brand{opacity:.75}
body .pdp__meta,body .pdp__meta span,body .pdp__meta b{color:#C6D0E8!important}
body .pdp__meta span{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.18)!important}
body .pdp__meta b.stock-in{color:#7DDBA8!important}
body .pdp__price .price-new,body .pdp__price .pdp__cur{color:#fff!important}
body .pdp__price .price-new{font-size:2.1rem!important}
body .pdp__price .price-old{color:#A9B6D8!important}
body .pdp__save{background:#7DDBA8!important;color:var(--fm-brand)!important}
body .pdp__buy{background:transparent!important;border:0!important;padding:0!important;margin:14px 0 6px}
body .pdp__buy .btn:not(.btn--ghost){background:#fff!important;color:var(--fm-brand)!important;border-color:#fff!important}
body .pdp__buy .btn--ghost{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.6)!important}
body .pdp__note{color:#C6D0E8}
body .pdp__assure li{color:#DCE3F2!important}
body .pdp__assure li svg{color:#7DDBA8!important}

/* the navy card, for every kind of product the template can print */
body .pdp > div:last-child .pdp__sprname{color:#A9B6D8!important}
body .pdp > div:last-child .pdp__meta b{color:#fff!important}
body .pdp > div:last-child .pdp__meta b.stock-in{color:#7DDBA8!important}
body .pdp > div:last-child .price-plain,body .pdp > div:last-child .price-ask{color:#fff!important}
body .pdp > div:last-child .price-plain{font-size:2.1rem!important; font-weight:800}
body .pdp > div:last-child .pricegate,body .pdp > div:last-child .pricegate b,body .pdp > div:last-child .pricegate span{color:#fff!important}
body .pdp > div:last-child .pricegate{background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:var(--fm-r)}
body .pdp > div:last-child .pricegate .btn:not(.btn--ghost){background:#fff!important; color:var(--fm-brand)!important; border-color:#fff!important}
body .pdp > div:last-child .pricegate .btn--ghost{background:transparent!important; color:#fff!important; border-color:rgba(255,255,255,.6)!important}
body .pdp > div:last-child .pdp__brochure{color:#fff!important; text-decoration:underline}
body .pdp > div:last-child a:not(.btn){color:#fff}
/* v4.3 marker - product page navy card */


/* ============================================================
   v4.4  -  ONE FONT, strictly: Inter Tight on every element,
   form control, data value and generated label. The :not(#fm-none)
   gives these rules the weight of an id, so no package rule,
   design variable or inline style can bring another font back.
   ============================================================ */
html body,
html body *:not(#fm-none),
html body *:not(#fm-none)::before,
html body *:not(#fm-none)::after,
html body input:not(#fm-none),html body select:not(#fm-none),html body textarea:not(#fm-none),html body button:not(#fm-none){
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
}
/* numbers in data line up without a second font */
body .mono,body .tile__part,body .pdp__meta,body .spectable td,body .catfilter__cnt,body .catfilter__count,
body .price-new,body .price-old,body .price-plain,body .prow__now,body .prow__was,body .fm-cart__n,body .fm-tab__n{
  font-variant-numeric:tabular-nums;
}

/* the dropdowns: only the entry under the pointer is highlighted, never a whole list */
body .mainnav .dropdown a.is-active,body .mainnav .dropdown a[aria-current]{background:transparent!important; color:var(--fm-ink-2)!important}
body .mainnav .dropdown a:hover,body .mainnav .dropdown a:focus-visible{background:var(--fm-wash)!important; color:var(--fm-brand)!important}

/* the footer's Login / My account link: the header carries both */
body .sitefoot__bar span:has(> a[href*="login"]),body .sitefoot__bar span:has(> a[href*="account"]),
body .sitefoot__bar a[href*="login"],body .sitefoot__bar a[href*="account"]{display:none!important}
/* v4.4 marker - one font, dropdown highlight, no footer login */


/* ============================================================
   v4.5  -  hover states that must beat colours written on the
   element itself (the subcategory chips carry color:inherit inline)
   ============================================================ */
body .relcats a:hover,body .relcats a:focus-visible,body .catpills__t:hover,body .catpills__t:focus-visible{
  background:var(--fm-brand)!important; color:#fff!important; border-color:var(--fm-brand)!important;
}
/* v4.5 marker - readable hovers, single add to cart */


/* ============================================================
   v4.6  -  CONTACT page, design B: a navy title band, and the
   enquiry form in a white card rising into it; the contact details
   as a row of tiles beneath the form. LOGIN page, design C: a navy
   band behind the heading, the sign-in card over it, in the narrow
   column the template intends (the theme's full-width rule had
   stretched it across the page).
   Every rule is tied to its page: .contactgrid exists only on the
   contact page, .loginhead only on the login page.
   ============================================================ */

/* ---------- contact: the form and the details ---------- */
body .contactgrid > div,body .contactgrid > aside{min-width:0}
body .contactgrid .form{max-width:none!important; display:grid; gap:14px}
body .contactgrid .form input,body .contactgrid .form textarea{width:100%!important; box-sizing:border-box}
body .contactgrid .form textarea{min-height:140px}
body .contactgrid .field--2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
body .contactgrid .infolist{list-style:none; margin:0; padding:0; display:grid; gap:12px}
body .contactgrid .infolist li{display:flex!important; align-items:flex-start; gap:12px; margin:0; padding:0; border:0}
body .contactgrid .infolist .k{flex:0 0 36px; width:36px; height:36px; border-radius:9px; display:inline-flex!important; align-items:center; justify-content:center;
  background:var(--fm-wash-2); color:var(--fm-brand); font-weight:800; font-size:.95rem; line-height:1}
body .contactgrid .infolist .v{display:flex; flex-direction:column; gap:2px; min-width:0}
body .contactgrid .infolist .v b{font-weight:700; overflow-wrap:anywhere}
body .contactgrid .infolist .v em{font-style:normal; font-size:.8rem; color:var(--fm-muted)}

/* ---------- contact B: navy band, the form card rising into it ---------- */
body:has(.contactgrid) .pagehead{background:var(--fm-brand)!important; border:0!important; padding-block:30px 90px!important}
body:has(.contactgrid) .pagehead h1,body:has(.contactgrid) .pagehead .eyebrow,body:has(.contactgrid) .pagehead .lede{color:#fff!important}
body:has(.contactgrid) .pagehead .lede{opacity:.85}
body:has(.contactgrid) .crumbs{display:none!important}
body .contactgrid{display:block!important; margin-top:-80px!important; max-width:1100px!important; margin-inline:auto!important; position:relative; z-index:1}
body .contactgrid > div{background:#fff; border-radius:12px; padding:26px; box-shadow:0 24px 60px -30px rgba(13,31,91,.45)}
body .contactgrid > aside{margin-top:16px}
body .contactgrid > aside h3{display:none}
body .contactgrid .infolist{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
body .contactgrid .infolist li{background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r); padding:14px!important}
body .contactmap{max-width:1100px!important; margin-inline:auto!important}
@media (max-width:600px){ body .contactgrid .field--2{grid-template-columns:minmax(0,1fr)} body .contactgrid > div{padding:18px} }

/* ---------- login: the narrow column the template asks for ---------- */
body .section > .wrap:has(> .loginhead){max-width:460px!important; margin-inline:auto!important}

/* ---------- login C: navy band behind the heading, the card over it ---------- */
body .section:has(> .wrap > .loginhead){background:linear-gradient(var(--fm-brand) 0 230px,transparent 230px)!important; padding-top:40px!important}
body .loginhead h2,body .loginhead p,body .loginhead .loginhead__k{color:#fff!important}
body .loginhead p{opacity:.85}
body .wrap:has(> .loginhead) > .card{border-radius:12px!important; box-shadow:0 24px 60px -30px rgba(13,31,91,.5)}
/* v4.6 marker - contact B, login C */


/* ============================================================
   v4.7  -  CART PROCESS, design C: one calm centred column on the
   cart, checkout and confirmation pages - large step circles, the
   order summary above the form, one full-width button to go on.
   The cart page's totals box (with Continue to details) is printed
   by cart.php once the installer restores it on this design.
   ============================================================ */
/* the three pages share one centred column */
body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .section > .wrap,body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .pagehead > .wrap,body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .crumbs > .wrap{max-width:860px!important; margin-inline:auto!important}
body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .pagehead{text-align:center}
body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .pagehead .eyebrow{display:none!important}
body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .fm-steps{justify-content:center}
body:is(:has(.cartfoot),:has(.checkoutgrid),:has(.cobody .notice--ok)) .fm-steps li b{width:34px!important; height:34px!important; font-size:1rem!important}

/* lines */
body .linetable{width:100%; border-collapse:separate; border-spacing:0}
body .linetable th{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fm-muted); text-align:left; padding:10px 12px; border-bottom:1px solid var(--fm-line)}
body .linetable td{padding:14px 12px; border-bottom:1px solid var(--fm-line); vertical-align:middle}
body .lineitem__b{display:block; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fm-brand)}
body .lineitem__p{display:block; font-size:.75rem; color:var(--fm-muted)}
body .lineitem strong{display:block; font-weight:700; color:var(--fm-ink); line-height:1.35}
body .qtybox{width:74px; min-height:38px; text-align:center; border:1px solid var(--fm-line-2); border-radius:var(--fm-r)}

/* totals, stacked under the lines, and one full-width button */
body .totals{display:grid; gap:8px}
body .totals > div{display:flex; justify-content:space-between; gap:12px}
body .totals__grand{border-top:1px solid var(--fm-line); padding-top:10px; font-size:1.15rem; font-weight:800}
body .cartfoot{display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:16px}
body .cartfoot__left{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
body .cartfoot .totals{width:100%; min-width:0}
body .cartfoot .totals .btn,body #coSubmit{width:100%!important; max-width:none!important; box-sizing:border-box; min-height:52px; font-size:1.02rem}
body:has(.cartfoot) .section .card{max-width:none!important}

/* checkout: the summary above the form, in one column */
body .checkoutgrid{display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:22px}
body .checkoutgrid > .ordersummary{order:-1; grid-column:auto!important; grid-row:auto!important; position:static!important; top:auto!important;
  background:var(--fm-wash)!important; border:0!important; border-radius:12px!important; padding:18px!important}
body .ordersummary ul{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px}
body .ordersummary li{display:flex; justify-content:space-between; gap:12px; font-size:.9rem}
body .ordersummary__name em{display:block; font-style:normal; font-size:.8rem; color:var(--fm-muted)}
body .checkoutgrid .form{display:grid; gap:12px; max-width:none!important}
body .checkoutgrid .form input:not([type=radio]):not([type=checkbox]),body .checkoutgrid .form select,body .checkoutgrid .form textarea{width:100%!important; box-sizing:border-box}
body .checkoutgrid .field--2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
body .checkoutgrid .comodes{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
body .checkoutgrid .comode{display:flex!important; flex-direction:column; gap:4px; border:1px solid var(--fm-line-2)!important; border-radius:10px!important; padding:11px 14px!important; background:#fff; cursor:pointer}
body .checkoutgrid .comode:has(input:checked){border-color:var(--fm-brand)!important; box-shadow:0 0 0 1px var(--fm-brand)}
body .checkoutgrid .comode__t{display:flex; align-items:center; justify-content:flex-start; gap:8px; font-weight:700}
body .checkoutgrid .comode__why{font-size:.8rem; color:var(--fm-muted)}
body .checkoutgrid .comode input[type=radio],body .checkoutgrid .checkline input{width:auto!important; flex:0 0 auto}
body .checkoutgrid .form > div:has(> #coSubmit){flex-direction:column}

@media (max-width:900px){
  body .checkoutgrid .comodes{grid-template-columns:minmax(0,1fr)}
  body .checkoutgrid .field--2{grid-template-columns:minmax(0,1fr)}
  body .linetable thead{display:none}
  body .linetable tr{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--fm-line); padding:8px 0}
  body .linetable td{border:0; padding:4px 6px}
  body .linetable td:first-child{grid-column:1 / -1}
  body .linetable td[data-label]::before{content:attr(data-label); display:block; font-size:.7rem; color:var(--fm-muted); text-transform:uppercase}
}
/* v4.7 marker - cart process one column */


/* ============================================================
   v4.8  -  PRODUCT REVIEWS, design B: a navy summary card on the
   left (score, stars, count - or "No reviews yet"), the Write a
   review button, the form and the reviews on the right. The rating
   dropdown gets five clickable stars from the site script; the
   dropdown still carries the value the form sends.
   ============================================================ */

/* the star picker the site script adds over the rating dropdown (the dropdown still carries the value) */
body .fm-stars{display:inline-flex;gap:4px;margin:2px 0 4px}
body .fm-stars button{width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer;font-size:30px;line-height:1;color:#C9D0DE}
body .fm-stars button.is-on{color:#F2B01E}
body .fm-stars button:focus-visible{outline:3px solid var(--fm-brand-hi);outline-offset:2px;border-radius:6px}
body .fm-stars__t{margin-left:10px;align-self:center;font-weight:700;color:var(--fm-ink-2);font-size:.9rem}
body .revform select.fm-has-stars{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none}
body .revstars{color:#F2B01E;letter-spacing:2px}
body .rev__ok{display:inline-flex;align-items:center;gap:5px;color:var(--fm-ok);font-weight:700;font-size:.8rem;margin-right:10px}
body .rev__ok::before{content:"\2713"}
body .rev__when{color:var(--fm-muted);font-size:.84rem}
body .rev__reply{margin-top:10px;padding:10px 12px;background:var(--fm-wash);border-left:3px solid var(--fm-brand);border-radius:0 6px 6px 0;font-size:.9rem}
body .revform form{display:grid;gap:12px}
body .revform input,body .revform textarea,body .revform select{width:100%;box-sizing:border-box}
body .revform .field--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body .revform label u{text-decoration:none;color:var(--fm-muted);font-weight:500;margin-left:4px}
@media (max-width:700px){body .revform .field--2{grid-template-columns:minmax(0,1fr)}}

body #reviews .wrap{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:32px;align-items:start}
body #reviews .revhead{grid-column:1;grid-row:1 / span 3;position:sticky;top:calc(var(--fm-mast-h,137px) + 12px);display:flex;flex-direction:column;gap:10px;
  background:var(--fm-brand);color:#fff;border-radius:14px;padding:22px}
body #reviews .revhead h2,body #reviews .revscore b,body #reviews .revcount{color:#fff!important}
body #reviews .revhead .panel__hint{color:#C6D0E8!important}
body #reviews .revscore{display:grid;gap:4px}body #reviews .revscore b{font-size:2.6rem;line-height:1}
body #reviews .revlist,body #reviews .revform{grid-column:2}
body #reviews .revform{grid-row:1;margin-bottom:12px}
body #reviews .revlist{display:grid;gap:10px}
body #reviews .rev{background:#fff;border:1px solid var(--fm-line);border-radius:12px;padding:16px 18px}
body #reviews .revform > summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--fm-r);background:var(--fm-brand);color:#fff;font-weight:700;cursor:pointer;list-style:none}
body #reviews .revform > summary::-webkit-details-marker{display:none}
body #reviews .revform form{background:#fff;border:1px solid var(--fm-line);border-radius:12px;padding:20px}
@media (max-width:900px){body #reviews .wrap{display:block}body #reviews .revhead{position:static;margin-bottom:12px}}
body #reviews .revhead h2{font-size:1.45rem!important;line-height:1.2}
body #reviews .wrap > .notice{grid-column:2}
body .fm-stars__err{display:none; margin-left:10px; align-self:center; color:#B42318; font-weight:700; font-size:.86rem}
body .fm-stars.is-invalid .fm-stars__err{display:inline}
body .fm-stars.is-invalid button{color:#E7B5AE}
@media (max-width:900px){ body #reviews .wrap > .notice{grid-column:auto} }
/* v4.8 marker - reviews navy summary */


/* ============================================================
   v4.9  -  SIGN-UP page, design C: step by step. One section at a
   time under a five-step progress line, with Next and Back; each
   step is checked before moving on. The step rules apply only once
   the site script has put the form into step mode (.fm-wiz) - with
   no script the whole form shows, as before.
   ============================================================ */

/* the sign-up form's own parts, on every design */
body .signup .signup__body{display:grid;gap:16px;min-width:0}
body .signup .fset__h{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
body .signup .fset__h b{grid-row:1 / span 2;font-size:.95rem;color:var(--fm-brand);font-weight:800}
body .signup .fset__h h2{margin:0;font-size:1.15rem}
body .signup .fset__h em{grid-column:2;font-style:normal;color:var(--fm-muted);font-size:.86rem}
body .signup .fset__b{display:grid;gap:12px;margin-top:12px}
body .signup .field--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body .signup .field--3{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:12px}
body .signup .field label i{color:#B42318;font-style:normal;margin-left:2px}
body .signup .field label u{text-decoration:none;color:var(--fm-muted);font-weight:500;margin-left:6px;font-size:.8rem}
body .signup .field input,body .signup .field select,body .signup .field textarea{width:100%;box-sizing:border-box}
body .signup .hint{display:block;font-size:.78rem;color:var(--fm-muted);margin-top:4px}
body .signup .tick{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
body .signup .tick input{width:auto;margin-top:3px;flex:0 0 auto}
body .signup .fset__off{opacity:.42;pointer-events:none}
body .signup .signup__go{display:grid;gap:12px}
body .signup .signup__go .btn{justify-self:start;min-height:50px;padding-inline:34px}
body .signup .signup__go p{margin:0;color:var(--fm-muted)}
body .signup .signup__why ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body .signup .signup__why li{position:relative;padding-left:24px;line-height:1.45}
body .signup .signup__why li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:800;color:var(--fm-ok)}
body .signup .signup__steps{display:grid;gap:2px}
body .signup .signup__steps h4{margin:0 0 6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fm-muted)}
body .signup .signup__steps a{display:flex;gap:10px;padding:7px 10px;border-radius:6px;color:var(--fm-ink-2);font-weight:600}
body .signup .signup__steps a span{color:var(--fm-muted);font-weight:800;font-size:.8rem}
body .signup .signup__steps a.on{background:var(--fm-wash-2);color:var(--fm-brand)}
body .signup .signup__steps a.on span{color:var(--fm-brand)}
body .signup .signup__steps a.is-done span{color:var(--fm-ok)}
body .signup .fm-wiznav{display:none}
@media (max-width:760px){body .signup .field--2,body .signup .field--3{grid-template-columns:minmax(0,1fr)}}
body .signup{max-width:860px; margin-inline:auto; display:grid; gap:16px}
body .signup .signup__rail{display:contents}
body .signup .signup__why,body .signup .signup__aside{display:none}
body .signup .signup__steps{order:-1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; background:none}
body .signup .signup__steps h4{display:none}
body .signup .signup__steps a{flex-direction:column; align-items:center; text-align:center; gap:6px; padding:8px 4px; border-top:4px solid var(--fm-line); border-radius:0; font-size:.82rem; background:none}
body .signup .signup__steps a.on{border-top-color:var(--fm-brand); background:none}
body .signup .signup__steps a.is-done{border-top-color:var(--fm-ok)}
body .signup .signup__body{background:#fff; border:1px solid var(--fm-line); border-radius:14px; padding:24px}
body .signup .signup__body.fm-wiz .fset{display:none}
body .signup .signup__body.fm-wiz .fset.is-cur{display:block}
body .signup .signup__body.fm-wiz .signup__go{display:none}
body .signup .signup__body.fm-wiz.fm-last .signup__go{display:grid}
body .signup .signup__body.fm-wiz .fm-wiznav{display:flex; justify-content:space-between; gap:10px}
body .signup .signup__body.fm-wiz.fm-last .fm-wiznav .fm-next{display:none}
body .signup .signup__body:not(.fm-wiz) .fset + .fset{border-top:1px solid var(--fm-line); padding-top:18px}
@media (max-width:700px){ body .signup .signup__steps a{font-size:0} body .signup .signup__steps a span{font-size:.8rem} }
/* v4.9 marker - sign-up step by step */


body .policy--cards .fm-leadtitle{font-size:1.3rem; font-weight:800; color:var(--fm-ink); letter-spacing:-.01em; margin:0 0 6px}
body .policy--cards .fm-leadtitle span{letter-spacing:inherit!important}


/* ============================================================
   v5.1  -  COMPANY pages (Ethics, Our History, Economic Impact,
   Our Culture, Compliance, CSR), design E: a timeline. The page's
   opening tagline is the lead statement; every section is a point
   on a vertical line - a navy dot, its title, its text in a card.
   The site script finds the title lines in the plain text.
   ============================================================ */
body:has(.policy--cards) .pagehead{text-align:center}
body .section:has(.policy--cards) > .wrap{max-width:900px!important; margin-inline:auto!important}
body .policy--cards{display:block!important}
body .policy--cards .policy__rail{display:none!important}
/* the same look if a page is ever written with cards, sections or numbered headings */
body .policy--cards .csrcards{display:block!important; position:relative; margin:12px 0 18px; padding-left:34px}
body .policy--cards .csrcards::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--fm-line-2)}
body .policy--cards .csrcard{position:relative; background:#fff; border:1px solid var(--fm-line); border-radius:12px; padding:14px 18px; margin-bottom:12px}
body .policy--cards .csrcard::before{content:""; position:absolute; left:-29px; top:18px; width:14px; height:14px; border-radius:50%; background:var(--fm-brand); box-shadow:0 0 0 4px var(--fm-page)}
body .policy--cards .csrcard h3{margin:0 0 6px; font-size:1.02rem; color:var(--fm-brand)}
body .policy--cards .csrsec .section__head h2{font-size:1.35rem; margin:26px 0 8px}
body .policy--cards .csrtags{list-style:none; padding:0; margin:8px 0 12px; display:flex; flex-wrap:wrap; gap:6px}
body .policy--cards .csrtags li{padding:5px 12px; border:1px solid var(--fm-line-2); border-radius:999px; background:#fff; font-size:.86rem; margin:0}
@media (max-width:600px){
  body .policy--cards .csrcards{padding-left:26px}
  body .policy--cards .csrcards::before{left:7px}
  body .policy--cards .csrcard::before{left:-25px}
}
/* the lead: the page's opening tagline as a statement, its paragraphs as the introduction */
body .policy--cards .csrlead{margin:0 0 16px}
body .policy--cards .csrlead .fm-leadtitle{font-size:1.5rem; line-height:1.25; font-weight:800; color:var(--fm-ink); margin:0 0 8px}
body .policy--cards .csrlead .fm-leadtitle span[style]{letter-spacing:normal!important}
body .policy--cards .csrlead p:not(.fm-leadtitle){font-size:1.06rem; color:var(--fm-ink-2); margin:0 0 10px}
body .policy--cards .csrcard p{margin:0 0 8px; color:var(--fm-ink-2)}
body .policy--cards .csrcard > :last-child{margin-bottom:0}
body .policy--cards .csrcard h3 span[style]{letter-spacing:normal!important}
/* v5.1 marker - company pages timeline */

/* ============================================================
   v5.3  -  MARKET pages, design B: the market's heading and its
   opening paragraph on a navy hero panel, the rest of the text
   below; the market name centred at the top; Shop by category as
   rounded chips; Request a business quote and All markets close.
   Classes come from the site script, on single market pages only.
   ============================================================ */
body .section:has(.fm-mprose) > .wrap{max-width:940px!important; margin-inline:auto!important}
body:has(.fm-mprose) .pagehead{text-align:center}
body .fm-mprose span[style]{letter-spacing:normal!important}
body .fm-mprose p{margin:0 0 14px; color:var(--fm-ink-2); line-height:1.7}
body .fm-mprose .fm-mhead,body .fm-mprose .fm-mfirst{background:var(--fm-brand); color:#fff!important; margin:0!important}
body .fm-mprose .fm-mhead{border-radius:14px 14px 0 0; padding:26px 28px 6px; font-size:1.75rem; line-height:1.2; letter-spacing:-.01em}
body .fm-mprose .fm-mfirst{border-radius:0 0 14px 14px; padding:4px 28px 26px; font-size:1.1rem!important; color:#DCE3F2!important; margin-bottom:22px!important}
body .fm-mprose > .fm-mfirst:first-child{border-radius:14px; padding-top:26px}
body .fm-mprose p:not(.fm-mfirst){padding:0 6px}
body .fm-mcats{margin-top:26px!important}
body .fm-mcats h2{font-size:1.05rem!important}
body .fm-mcats .btn--sm{border-radius:999px!important; min-height:36px; padding-inline:14px!important; background:#fff!important; border:1px solid var(--fm-line-2)!important; color:var(--fm-ink-2)!important; font-weight:600}
body .fm-mcats .btn--sm:hover{background:var(--fm-brand)!important; border-color:var(--fm-brand)!important; color:#fff!important}
body .fm-mcta{display:inline-flex!important; margin-top:22px!important}
body .fm-mcta + .fm-mcta{margin-left:10px!important}
body .fm-mcta .btn{min-height:46px}
@media (max-width:700px){
  body .fm-mcta{display:flex!important} body .fm-mcta + .fm-mcta{margin-left:0!important; margin-top:10px!important}
  body .fm-mprose .fm-mhead{padding:20px 18px 6px; font-size:1.4rem} body .fm-mprose .fm-mfirst{padding:4px 18px 20px}
}
/* v5.3 marker - market pages navy hero */


/* ============================================================
   v5.4  -  PRICE MATCH button in the header, just before Request a
   quote: outlined white, a price-tag icon; a round icon on smaller
   screens, like Sign in. (The old position-based header rules are
   gone - every button carries its own named style.)
   ============================================================ */
body a.fm-act--pm{display:inline-flex!important; flex-direction:row!important; align-items:center; gap:8px; min-height:46px; padding:0 16px!important;
  border:1px solid rgba(255,255,255,.55)!important; border-radius:var(--fm-r)!important; background:transparent!important; color:#fff!important; text-decoration:none}
body a.fm-act--pm:hover{background:rgba(255,255,255,.1)!important; border-color:#fff!important}
body a.fm-act--pm .masthead__q{color:#fff!important; font-size:.95rem!important; font-weight:700}
body a.fm-act--pm .masthead__qs{display:none!important}
body a.fm-act--pm::before{content:""; flex:0 0 auto; width:18px; height:18px; background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L3 13V3h10l7.59 7.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L3 13V3h10l7.59 7.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:1100px){
  body a.fm-act--pm{width:42px; height:42px; min-height:42px; padding:0!important; justify-content:center; border-radius:50%!important}
  body a.fm-act--pm .masthead__q{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
}
/* v5.4 marker - price match */


/* ============================================================
   v5.4  -  PRICE MATCH page (/price-match): a navy band with the
   promise, three steps, the four-part form in a white card rising
   into the band, the country-of-origin match, and the terms folding
   like the policies. The header button is styled above (.fm-act--pm).
   ============================================================ */
/* the page */
body:has(.pm-form) .pagehead{background:var(--fm-brand)!important;border:0!important;padding-block:30px 96px!important;text-align:center}
body:has(.pm-form) .pagehead h1,body:has(.pm-form) .pagehead .eyebrow{color:#fff!important}
body:has(.pm-form) .pagehead .lede{color:#DCE3F2!important;max-width:760px;margin-inline:auto}
body .pm-wrap{max-width:1000px!important;margin:-84px auto 0!important;position:relative}
body .pm-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body .pm-steps li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:12px;padding:14px;box-shadow:0 10px 30px -22px rgba(13,31,91,.5)}
body .pm-steps b{flex:0 0 30px;height:30px;border-radius:50%;background:var(--fm-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
body .pm-steps strong{display:block;color:var(--fm-ink);font-size:.92rem}
body .pm-steps span{color:var(--fm-muted);font-size:.84rem;line-height:1.4}
body .pm-card{background:#fff;border-radius:14px;padding:26px;box-shadow:0 24px 60px -30px rgba(13,31,91,.45)}
body .pm-form{display:grid;gap:8px}
body .pm-sec{padding:6px 0 18px;border-bottom:1px solid var(--fm-line);margin-bottom:10px;display:grid;gap:12px}
body .pm-sec__h{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
body .pm-sec__h b{grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;background:var(--fm-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center}
body .pm-sec__h h2{margin:0;font-size:1.15rem}
body .pm-sec__h em{grid-column:2;font-style:normal;color:var(--fm-muted);font-size:.86rem}
body .pm-form .field label{font-weight:700;font-size:.86rem}
body .pm-form .field label i{color:#B42318;font-style:normal}
body .pm-form .field label u{text-decoration:none;color:var(--fm-muted);font-weight:500;font-size:.78rem;margin-left:4px}
body .pm-form input:not([type=radio]):not([type=checkbox]),body .pm-form textarea{width:100%;box-sizing:border-box}
body .pm-form .hint{display:block;font-size:.78rem;color:var(--fm-muted);margin-top:4px}
body .pm-form .field--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body .pm-form .field--3{display:grid;grid-template-columns:1fr 1fr 150px;gap:12px}
body .pm-or{display:flex;align-items:center;gap:10px;color:var(--fm-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
body .pm-or::before,body .pm-or::after{content:"";flex:1;height:1px;background:var(--fm-line)}
body .pm-coo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body .pm-radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--fm-line-2);border-radius:10px;padding:12px 14px;cursor:pointer;background:#fff}
body .pm-radio:has(input:checked){border-color:var(--fm-brand);box-shadow:0 0 0 1px var(--fm-brand);background:var(--fm-wash)}
body .pm-radio input{margin-top:4px;flex:0 0 auto}
body .pm-radio b{display:block;color:var(--fm-ink)}
body .pm-radio em{font-style:normal;font-size:.8rem;color:var(--fm-muted)}
body .pm-tick{display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:var(--fm-wash-2);border-radius:10px;padding:12px 14px;font-size:.9rem;color:var(--fm-ink-2)}
body .pm-tick input{margin-top:3px;flex:0 0 auto}
body .pm-go{display:grid;gap:12px;padding-top:6px}
body .pm-go .pm-tick{background:none;padding:0}
body .pm-cap{max-width:240px}
body .pm-send{min-height:52px;font-size:1.02rem;justify-self:stretch}
body .pm-err{margin:0;color:#B42318;font-weight:700}
body .pm-done{text-align:center;padding:30px 10px}
body .pm-done h2{margin:0 0 8px}
body .pm-taa{margin:16px 0 0;background:var(--fm-brand);color:#fff;border-radius:14px;padding:18px 22px}
body .pm-taa b{display:block;font-size:1.05rem;margin-bottom:4px}
body .pm-taa p{margin:0;color:#DCE3F2}
body .pm-terms-h{padding-bottom:0!important}
body .pm-terms-title{text-align:center;margin:0}
body .pm-terms-sec{padding-top:10px!important}
@media (max-width:760px){
  body .pm-steps,body .pm-coo{grid-template-columns:minmax(0,1fr)}
  body .pm-form .field--2,body .pm-form .field--3{grid-template-columns:minmax(0,1fr)}
  body .pm-card{padding:18px}
}
body .pm-card .notice--err{margin:0 0 14px}
body .pm-card .notice--err div + div{margin-top:4px}
/* v5.4 marker - price match page */