/* ============================================================================
   MANIFEST - the only design in this package                  MANIFEST_ONLY_V1
   ----------------------------------------------------------------------------
   Loaded LAST in the head, after style.css and after every block the package
   can still emit. Nothing else in the head may set a colour, a width or a
   corner. What has to beat a page's own inline <style> is in
   manifest_lock_css(), printed at the end of the body instead.

   Two tones, both from the logo: brand blue #0F72AE and brand green #70B048.
   Each tone uses the other colour as its marker. The layout is identical.
   ============================================================================ */

/* The web font is linked from manifest_head_css(), not @imported: an @import
   blocks rendering until it resolves and cannot be preconnected. */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* ONE_FACE_V1. There were two: Archivo for the interface and IBM Plex Mono
     for part numbers, SKUs, prices, counts and the registration codes. The
     reasoning was that an identifier is easier to read in a face where 0 and O
     are different shapes and every character is the same width - but the
     result was a site where the numbers looked like they came from somewhere
     else, and that is what you have been seeing.

     --ff-num now points at the interface face, so every place in this
     stylesheet that asked for the mono face gets Archivo instead. One
     variable, one change, nothing else to hunt down.

     What the mono was doing for free is kept: font-variant-numeric:tabular-nums
     makes every digit the same width in Archivo too, so prices and quantities
     still line up down a column. */
  --ff-ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ff-num:var(--ff-ui);
  --r:2px;
  --rail:248px;
  --row-pad:14px;
  --thumb:84px;
}

body.mf-blue{
  --page:#E8EEF3;  --panel:#FFFFFF; --panel-2:#F2F6FA; --panel-3:#E2EAF1;
  --ink:#0D1B24;   --ink-2:#42535F; --ink-3:#6A7A86;
  --rule:#C3D1DC;  --rule-2:#DDE6EE;
  --accent:#0B6FA8; --accent-2:#08527D; --accent-soft:#DCECF7; --on-accent:#FFFFFF;
  --mark:#7CBE45;  --mark-ink:#14290A;
  --ok:#3F7C31;    --low:#8A5106;   --out:#8C2020;
  --bar:#0D1B24;   --bar-ink:#E8EEF3;
}
body.mf-green{
  --page:#E9EFE6;  --panel:#FFFFFF; --panel-2:#F3F7F1; --panel-3:#E2EBDF;
  --ink:#101C10;   --ink-2:#465547; --ink-3:#6D7C6F;
  --rule:#C6D5C3;  --rule-2:#DFE9DD;
  --accent:#3F7C31; --accent-2:#2E5D24; --accent-soft:#E0EFDA; --on-accent:#FFFFFF;
  --mark:#0F72AE;  --mark-ink:#FFFFFF;
  --ok:#3F7C31;    --low:#8A5106;   --out:#9A2B22;
  --bar:#101C10;   --bar-ink:#E9EFE6;
}

/* the package's own token names, repointed so any rule in style.css that still
   reads them lands on this palette instead of the old one */
body.mf{
  --primary:var(--accent); --primary-dark:var(--accent-2);
  --accent-c:var(--mark);
  --bg:var(--page); --bg-soft:var(--panel-2); --card:var(--panel);
  --hair:var(--rule); --line:var(--rule); --muted:var(--ink-2);
  --page-ink:var(--ink); --page-muted:var(--ink-2);
  --header-bg:var(--panel); --header-ink:var(--ink);
  --footer-bg:var(--bar); --footer-ink:var(--bar-ink);
  --price-old:var(--ink-3); --price-new:var(--ink);
  --r-sm:2px; --r-md:2px; --r-lg:2px; --r-xl:2px;
}

/* ------------------------------------------------------------------ 2. BASE */
body.mf{
  background:var(--page);
  color:var(--ink);
  font-family:var(--ff-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-left:0;
}
body.mf img,body.mf svg{max-width:100%}
body.mf a{color:inherit;text-decoration:none}
body.mf button,body.mf input,body.mf select,body.mf textarea{font-family:inherit;color:inherit}
body.mf :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){body.mf *{animation:none!important;transition:none!important}}

/* FULL_WIDTH_V1: the measure comes from the token, never from a number here.
   Set once in manifest_lock_css() and every band follows it together. */
body.mf .wrap{max-width:var(--page-w,3400px);margin-inline:auto;padding-inline:var(--band-pad,24px)}
body.mf .num,body.mf .mono{font-family:var(--ff-ui);font-variant-numeric:tabular-nums;letter-spacing:0}
body.mf .price,body.mf .price small,body.mf .line-ids,body.mf .mf-kv b,
body.mf .listhead,body.mf .pdp__meta,body.mf .catfilter__cnt,body.mf .pager a,
body.mf .totals,body.mf .ordersummary{font-variant-numeric:tabular-nums}
body.mf .muted,body.mf .dim{color:var(--ink-2)}
body.mf .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body.mf .mf-sprite{display:none}

body.mf h1,body.mf h2,body.mf h3,body.mf h4{
  margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
body.mf h1{font-size:34px}
body.mf h2{font-size:23px}
body.mf h3{font-size:18px;letter-spacing:-.01em}
body.mf p{margin:0 0 12px}

/* the eyebrow is a real label in this package, not decoration - it names the
   section a page belongs to. Kept, made quiet. */
body.mf .eyebrow{
  display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;
  letter-spacing:0;text-transform:none;margin-bottom:6px}
/* TEXT_FULL_WIDTH_V4: the text fills the page like everything else on it.
   The cap that used to sit here is gone - it was the last thing making a page
   of writing look narrower than the page it was on. */
body.mf .lede{font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:none}

/* --------------------------------------------------------------- 3. BUTTONS */
body.mf .btn,body.mf .linkbtn,body.mf .sitefoot__cta-btn,body.mf .catfilter__apply{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--ink);background:var(--ink);color:var(--page);
  padding:8px 14px;border-radius:var(--r);font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.35}
body.mf .btn:hover,body.mf .linkbtn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.mf .btn--ghost,body.mf .btn-o{background:transparent;color:var(--ink);border-color:var(--rule)}
body.mf .btn--ghost:hover,body.mf .btn-o:hover{background:var(--panel-3);color:var(--ink);border-color:var(--ink)}
/* BTN_NAME_V2: the package writes modifiers as .btn--ghost and .btn--sm, and
   the checkout script asks for .btn--a. It was only defined as .btn-a, so the
   Continue button fell back to plain ink - the one button that should have
   been the accent was the same colour as everything else. Both names now. */
body.mf .btn-a,body.mf .btn--a{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.mf .btn-a:hover,body.mf .btn--a:hover{background:var(--accent-2);border-color:var(--accent-2)}
body.mf .btn--sm{padding:5px 11px;font-size:12.5px}
body.mf .btn--lg{padding:11px 20px;font-size:15px}
body.mf .btn--block{display:flex;width:100%}
body.mf .btn[disabled]{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------------- 4. MASTHEAD */
/* CONTACT_BAR_V3: the same colour as the MENU bar, not the accent - so the two
   dark bands top and bottom of the masthead match and the accent is left to
   mean "this is the page you are on". How you reach us goes hard left, where
   you find us goes hard right, and the width between them does the separating
   instead of a gap. */
body.mf .utilitybar{background:var(--ink);border-bottom:0;
  padding:0;margin:0;width:auto;min-height:0}
body.mf .utilitybar__in,body.mf .utilitybar__panel{background:none;padding:0;margin:0;width:auto}
body.mf .utilitybar__row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 30px;
  padding-block:9px;font-size:12.5px;color:#fff;background:none;
  border-radius:0;min-height:0;justify-content:flex-start;text-align:left}
/* the address is the first thing on the right; everything printed after it -
   opening hours, the ticker - follows it there */
body.mf .ub--addr{margin-left:auto;text-align:right}
body.mf .ticker--topbar{margin-left:0}
body.mf .ub{display:inline-flex;align-items:center;gap:8px;color:#fff}
body.mf .ub:hover{color:#fff;text-decoration:underline}
body.mf .ub__i{display:inline-flex;width:14px;height:14px;color:rgba(255,255,255,.78)}
body.mf .ub__i svg{width:100%;height:100%}
body.mf .ticker--topbar{margin-left:0;max-width:40%;overflow:hidden}
body.mf .ticker{max-width:44%;overflow:hidden}
body.mf .ticker__item{font-size:12.5px;color:#fff}
body.mf .ticker__sep{color:rgba(255,255,255,.6);padding-inline:8px}

body.mf .masthead{background:var(--panel);border-bottom:1px solid var(--rule);position:static}
/* MASTHEAD_V5 - THE BOX SHRINKS BEFORE IT BREAKS.
   Two failures in a row, opposite ends of the same mistake. A percentage width
   never reached its ceiling, so the box was too small. A fixed 640px track was
   wider than the row it sat in, so the row overflowed and the Search button
   went off the end of it.

   Both come from stating a width the row might not be able to give. This
   states a PREFERENCE instead: the box wants 640px and will take it whenever
   the row can spare it, and gives width back when it cannot. It can therefore
   never push anything off the edge, and it can never be capped below the size
   it was set to for a reason I did not anticipate.

   Inside the box the same rule applies in order of importance: the department
   dropdown and the Search button are fixed - they are either there in full or
   the design is broken - and the text field is the only part that gives, so the
   button cannot be squeezed out again. */
body.mf .masthead__in{
  display:flex;align-items:center;gap:20px;position:static;min-height:72px;
  padding-block:12px;background:none;border:0;border-radius:0;box-shadow:none}
body.mf .brand{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;max-width:340px}
body.mf .brand img{max-height:56px;width:auto;height:auto;display:block}
body.mf .brand__text{font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
body.mf .mf-mark{
  width:34px;height:34px;border-radius:var(--r);flex:0 0 34px;
  display:grid;place-items:center;color:#fff;font-family:var(--ff-num);font-weight:600;font-size:15px;
  background:linear-gradient(135deg,var(--brand-blue-d) 0%,var(--brand-blue) 42%,var(--brand-green) 100%)}

/* SEARCH_WIDTH_V5. Wide enough that the whole placeholder fits, and no wider
   than the bar can spare. The box is centred by absolute positioning, so it
   has to leave room on BOTH sides for the widest of the two things in the
   flow - the logo on the left, the quote/account/cart group on the right.
   calc(100% - 860px) is that reserve: 430px each side, which the logo never
   needs and the right-hand group only approaches when it is showing its
   second lines. 900px is the ceiling, because past that the box stops looking
   like a field and starts looking like a band. */
body.mf .masthead__search{
  flex:1 1 640px;max-width:640px;min-width:0;margin-inline:auto;
  position:relative;transform:none;
  display:flex;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--panel);padding:0;box-shadow:none}
body.mf .masthead__search select{
  border:0;background:var(--panel-2);border-right:1px solid var(--rule-2);
  padding:0 11px;font-size:13px;color:var(--ink-2);
  flex:0 0 auto;width:auto;max-width:152px;border-radius:0}
body.mf .masthead__search input{
  flex:1 1 0;border:0;padding:12px 13px;background:transparent;min-width:0;
  font-size:14px;border-radius:0;box-shadow:none}
body.mf .masthead__search input::placeholder{color:var(--ink-3)}
/* THE_ACTUAL_BUG_V1. style.css lays out the search button as an OVERLAY:

       .masthead__search button{position:absolute;right:4px;top:4px;bottom:4px}

   pinned to the right edge of its positioned parent, which in the original
   design was the form itself. My rule restyled the button's colour, padding
   and flex behaviour - and never said position:static. So the absolute stayed,
   and when I later set the form to position:static the button's reference
   point became the next positioned ancestor up: the masthead, which style.css
   makes position:sticky. right:4px of the masthead is the far right of the
   page. That is where it has been since the first screenshot, first hidden
   behind the Cart button - dark on dark - then visible on top of the account
   links once I forced it a width.

   It was inside the form in the HTML all along, which is why the diagnostic
   said INSIDE and the picture said otherwise. Both were right. One property. */
body.mf .masthead__search button{
  position:static;right:auto;top:auto;bottom:auto;left:auto;
  flex:0 0 auto;border:0;background:var(--ink);color:var(--page);padding:0 18px;
  font-weight:600;cursor:pointer;border-radius:0;font-size:14px;box-shadow:none}
body.mf .masthead__search button:hover{background:var(--accent)}

body.mf .mf-right{flex:0 0 auto;display:flex;align-items:center;gap:12px}
body.mf .mf-util{display:flex;align-items:center;gap:6px;flex:0 0 auto}
body.mf .util{display:flex;flex-direction:column;line-height:1.2;padding:6px 10px;border-radius:var(--r)}
body.mf .util:hover{background:var(--panel-2)}
body.mf .util b{font-size:13.5px;font-weight:600}
body.mf .util span{font-size:11.5px;color:var(--ink-3)}
body.mf .masthead__cart{
  display:inline-flex;flex-direction:row;align-items:center;gap:9px;
  background:var(--ink);color:var(--page);padding:9px 14px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;border:0}
body.mf .masthead__cart:hover{background:var(--accent);color:var(--on-accent)}
body.mf .masthead__cart .cnt{
  font-family:var(--ff-num);font-size:12px;background:var(--mark);color:var(--mark-ink);
  border-radius:2px;padding:1px 6px;font-weight:600}

body.mf .navtoggle{display:none;background:none;border:1px solid var(--rule);border-radius:var(--r);
  width:40px;height:38px;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
body.mf .navtoggle span{display:block;width:18px;height:2px;background:var(--ink)}

/* ------------------------------------------------------- 5. THE CATEGORY BAR */
body.mf .mainnav{background:var(--ink);color:var(--page);border:0;box-shadow:none}
/* DROPDOWN_CLIP_V1. This row had overflow-x:auto so a long list of categories
   could scroll sideways. An overflow on one axis forces the other axis to auto
   as well, and the dropdown panels are position:absolute BELOW the bar - so
   the moment Catalog or Authorized Brands opened, the panel was clipped to the
   bar's own height and nothing appeared. Overflow visible; a row that is too
   long wraps instead, which is the honest fallback. */
body.mf .mainnav{position:relative;z-index:50;overflow:visible}
body.mf .mainnav__in{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;overflow:visible;background:none!important;
  border:0;border-radius:0;padding-block:0;min-height:0}
body.mf .mainnav__in > a,body.mf .hasdrop > a{
  padding:11px 13px;font-size:13.5px;white-space:nowrap;color:var(--page);opacity:.86;
  border-radius:0;background:none;font-weight:500}
body.mf .mainnav__in > a:hover,body.mf .hasdrop > a:hover{background:rgba(255,255,255,.1);opacity:1}
body.mf .mainnav__in > a.is-active,body.mf .hasdrop > a.is-active{
  background:var(--accent);opacity:1;font-weight:600;color:var(--on-accent)}
body.mf .hasdrop{position:relative}
body.mf .mf-ship{
  margin-left:auto;font-family:var(--ff-num);font-size:11.5px;opacity:.6;
  padding-right:4px;white-space:nowrap;color:var(--page)}
body.mf .mainnav__cta{
  padding:11px 13px;font-size:13.5px;font-weight:600;color:var(--page);background:rgba(255,255,255,.1)}
body.mf .navcount{font-family:var(--ff-num);background:var(--mark);color:var(--mark-ink);
  border-radius:2px;padding:0 5px;font-size:11.5px}

body.mf .dropdown,body.mf .flyout{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 6px 24px rgba(13,27,36,.12);padding:6px 0;min-width:230px;
  margin-top:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body.mf .dropdown a,body.mf .flyout a{
  display:block;padding:7px 14px;font-size:13.5px;color:var(--ink-2);opacity:1;background:none}
body.mf .dropdown a:hover,body.mf .flyout a:hover{background:var(--panel-2);color:var(--ink)}
body.mf .dropdown__more,body.mf .flyout__all{color:var(--accent);font-weight:600}

/* -------------------------------------------------------- 6. THE TRUST STRIP */
body.mf .mf-strip{background:var(--panel-2);border-bottom:1px solid var(--rule-2);font-size:12.5px}
body.mf .mf-strip .wrap{display:flex;gap:34px;padding-block:8px;overflow-x:auto;
  color:var(--ink-2);justify-content:center}
body.mf .mf-strip span{white-space:nowrap}
body.mf .mf-strip b{font-weight:600;color:var(--ink);font-family:var(--ff-num)}

/* ------------------------------------------------------ 7. PAGE HEAD / CRUMB */
body.mf .pagehead{padding-block:26px 18px;border-bottom:1px solid var(--rule);margin-bottom:0}
body.mf .pagehead .wrap{padding-inline:0}
body.mf .crumbs{font-size:12.5px;color:var(--ink-3);margin-bottom:9px;display:flex;flex-wrap:wrap;gap:5px}
body.mf .crumbs a:hover{color:var(--accent);text-decoration:underline}
body.mf .section{padding-block:26px}
body.mf .section--soft{background:var(--panel-2);border-block:1px solid var(--rule-2)}
body.mf .section__head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:16px}
body.mf .section__head h2,body.mf .tb-sechead{flex:0 0 auto;margin:0}
body.mf .section__head p{margin:0;font-size:13.5px;color:var(--ink-2)}

/* ------------------------------------------------------- 8. THE LINE ROW */
body.mf .listhead{
  display:grid;grid-template-columns:4px var(--thumb) minmax(0,1fr) 132px 210px;
  gap:16px;align-items:center;padding:9px 14px;
  background:var(--ink);color:var(--page);
  border-radius:var(--r) var(--r) 0 0;font-size:12px;font-weight:500}
body.mf .listhead .r{text-align:right}

body.mf .plist,body.mf .lines{
  border:1px solid var(--rule);border-top:0;background:var(--panel);
  border-radius:0 0 var(--r) var(--r);display:block;gap:0;margin:0}
body.mf .line{
  display:grid;grid-template-columns:4px var(--thumb) minmax(0,1fr) 132px 210px;
  gap:16px;align-items:center;padding:var(--row-pad);
  border-bottom:1px solid var(--rule-2);position:relative;background:none}
body.mf .line:last-child{border-bottom:0}
body.mf .line:hover{background:var(--panel-2)}

body.mf .stock-tick{align-self:stretch;border-radius:1px;background:var(--ok);min-height:56px}
body.mf .stock-tick.low{background:var(--low)}
body.mf .stock-tick.out{background:var(--out);opacity:.55}

body.mf .line .thumb{
  width:var(--thumb);height:var(--thumb);border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--panel);display:grid;place-items:center;padding:6px;overflow:hidden}
body.mf .line .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
body.mf .line .thumb svg{width:100%;height:100%;color:var(--ink-3)}

body.mf .line-main{min-width:0}
body.mf .line-brand{font-size:11.5px;color:var(--ink-3);font-weight:600}
body.mf .line-title{
  display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;
  margin:1px 0 5px;line-height:1.3;color:var(--ink)}
body.mf .line-title:hover{color:var(--accent);text-decoration:underline}
body.mf .line-ids{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--ff-num);font-size:11.5px;color:var(--ink-3)}
body.mf .line-ids b{font-weight:500;color:var(--ink-2)}
body.mf .line-specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
body.mf .spec{font-size:11.5px;color:var(--ink-2);background:var(--panel-3);border-radius:2px;padding:2px 7px}

body.mf .line-avail{font-size:12.5px}
body.mf .line-avail b{display:block;font-weight:600;font-size:13.5px}
body.mf .line-avail b.in{color:var(--ok)}
body.mf .line-avail b.low{color:var(--low)}
body.mf .line-avail b.out{color:var(--out)}
body.mf .line-avail span{color:var(--ink-3);font-family:var(--ff-num);font-size:11.5px}

/* P2: price, quantity and Add read as ONE block rather than three things
   that happen to be near each other. The panel bleeds to the row's edges with
   a negative margin, so it is a column down the right of the whole list. */
body.mf .line-buy{
  text-align:right;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--panel-2);border-left:1px solid var(--rule-2);
  margin:calc(var(--row-pad) * -1) calc(var(--row-pad) * -1) calc(var(--row-pad) * -1) 0;
  padding:var(--row-pad)}
body.mf .line:hover .line-buy{background:var(--panel-3)}
body.mf .price{
  font-family:var(--ff-num);font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
body.mf .price small{
  font-size:11.5px;font-weight:400;color:var(--ink-3);display:block;
  letter-spacing:0;font-family:var(--ff-ui)}
body.mf .price s{color:var(--ink-3);font-size:13px;font-weight:400;margin-right:6px}
body.mf .price--ask{font-size:14px;font-family:var(--ff-ui);color:var(--ink-2);font-weight:600}
body.mf .tape{
  background:var(--mark);color:var(--mark-ink);padding:1px 6px;font-size:11px;
  font-weight:600;border-radius:1px;display:inline-block;margin-right:6px;
  font-family:var(--ff-ui);letter-spacing:0}

body.mf .buyrow{display:flex;gap:6px;justify-content:flex-end;margin-top:9px;align-items:center}
body.mf .qty{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
body.mf .qty button{width:26px;border:0;background:var(--panel-2);cursor:pointer;
  color:var(--ink-2);font-size:15px;line-height:1;padding:0}
body.mf .qty button:hover{background:var(--panel-3)}
body.mf .qty input{
  width:42px;border:0;text-align:center;font-family:var(--ff-num);font-size:13px;
  background:var(--panel);padding:6px 0;-moz-appearance:textfield}
body.mf .qty input::-webkit-outer-spin-button,
body.mf .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* a grid of tiles becomes a list of rows - product-tile.php prints a row now,
   so the container is the only thing left to flatten */
body.mf .grid--4,body.mf .grid--8,body.mf .grid--related,body.mf .grid--1row{
  display:block;border:1px solid var(--rule);background:var(--panel);border-radius:var(--r)}
body.mf .grid--4 > .line:last-child,body.mf .grid--8 > .line:last-child,
body.mf .grid--related > .line:last-child{border-bottom:0}
body.mf .plist--feature,body.mf .plist--rows{border:1px solid var(--rule);border-top:0}

/* ------------------------------------------------------ 9. TOOLBAR + PAGER */
body.mf .toolbar,body.mf .filterbar,body.mf .listbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 0 13px;border-bottom:1px solid var(--rule);margin-bottom:16px;background:none}
body.mf .toolbar__count{font-size:13.5px;color:var(--ink-2)}
body.mf .toolbar__count b{font-family:var(--ff-num);color:var(--ink)}
body.mf .filterbar form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
body.mf .filterbar input,body.mf .filterbar select,
body.mf .toolbar select,body.mf .listbar select{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:6px 9px;font-size:13.5px}
body.mf .filterbar__check{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}
body.mf .filterbar__check input{accent-color:var(--accent)}
body.mf .filterbar__clear{font-size:13px;color:var(--accent);font-weight:600}

body.mf .pager{display:flex;gap:5px;align-items:center;justify-content:center;
  padding-top:22px;flex-wrap:wrap}
body.mf .pager a,body.mf .pager span{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:6px 11px;font-family:var(--ff-num);font-size:13px;color:var(--ink-2)}
body.mf .pager .is-on{background:var(--ink);color:var(--page);border-color:var(--ink);font-weight:600}
body.mf .pager a:hover{border-color:var(--ink);color:var(--ink)}
body.mf .pager__gap{border:0;background:none}

/* -------------------------------------------------- 10. THE CATALOGUE SPLIT */
body.mf .catalog{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:28px;align-items:start;padding-top:22px}
body.mf .catalog > aside,body.mf #catfilter-aside{position:sticky;top:16px}
body.mf .catfilter-mobtoggle{
  display:none;border:1px solid var(--ink);background:var(--panel);color:var(--ink);
  border-radius:var(--r);padding:9px 14px;font-weight:600;font-size:13.5px;
  width:100%;margin-bottom:14px;cursor:pointer}

/* ------------------------------------------------------------ 11. PANELS */
body.mf .card,body.mf .panel,body.mf .ordersummary,body.mf .tblwrap,body.mf .empty,
body.mf .catcard,body.mf .artcard,body.mf .contactmap,body.mf .infolist{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);box-shadow:none}
body.mf .card,body.mf .panel,body.mf .ordersummary{padding:16px}
body.mf .empty{padding:34px 20px;text-align:center;color:var(--ink-2)}
body.mf .notice{
  border:1px solid var(--rule);border-left:4px solid var(--accent);background:var(--panel);
  border-radius:var(--r);padding:11px 14px;font-size:13.5px;margin-bottom:14px}
body.mf .notice--ok{border-left-color:var(--ok)}
body.mf .notice--err{border-left-color:var(--out)}

/* ------------------------------------------------------------- 12. FORMS */
body.mf .field{margin-bottom:13px}
body.mf .field label,body.mf .field > .k{
  display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--ink)}
body.mf .field input,body.mf .field select,body.mf .field textarea,
body.mf .form input,body.mf .form select,body.mf .form textarea{
  width:100%;border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:9px 11px;font-size:14px;box-shadow:none}
body.mf .field input:focus,body.mf .field select:focus,body.mf .field textarea:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
body.mf .field textarea{min-height:96px;resize:vertical}
body.mf .field--2,body.mf .contactgrid,body.mf .checkoutgrid{display:grid;gap:16px}
body.mf .field--2{grid-template-columns:1fr 1fr}
body.mf .contactgrid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
body.mf .checkoutgrid{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:34px}
body.mf .comodes{display:grid;gap:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
body.mf .comode{display:flex;gap:11px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--rule-2);cursor:pointer;background:var(--panel)}
body.mf .comode:last-child{border-bottom:0}
body.mf .comode input{accent-color:var(--accent)}

/* ------------------------------------------------ 12b. THE CHECKOUT (K3)
   One page of panels. A finished panel collapses to a line saying what you
   chose, with an Edit link; the one you are working in is open. And one button
   size everywhere on this page, because a row of buttons that are all
   different heights is the thing that made the old checkout look unfinished. */
body.pg-checkout{--btn-h:44px;--btn-w:180px}
body.pg-checkout .btn{
  height:var(--btn-h);min-width:var(--btn-w);padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px}
body.pg-checkout .btn--sm{height:34px;min-width:0;padding:0 13px;font-size:13px}
/* CHECKBOX_SIZE_V2. This set a height and a padding on "input", which is a
   tick box and a radio as much as it is a text field - so the checkbox came
   out as a 44px empty square with its label knocked onto the next line, and
   the three order-type radios came out as circles the size of a thumbnail.
   Height belongs to the things you type in. */
body.pg-checkout .field input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.pg-checkout .field select,
body.pg-checkout .form input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.pg-checkout .form select{height:var(--btn-h);padding:0 12px}
body.pg-checkout .field textarea,body.pg-checkout .form textarea{height:92px;padding:10px 12px}
body.mf input[type=checkbox],body.mf input[type=radio]{
  width:16px!important;height:16px!important;min-height:0!important;
  flex:0 0 16px!important;margin:0!important;padding:0!important;accent-color:var(--accent)}
body.mf input[type=file]{height:auto!important;padding:9px 11px!important}

/* a tick box and its words are one line, not two */
body.mf .checkline{
  display:flex!important;align-items:center;gap:10px;
  font-size:14px;font-weight:500;color:var(--ink-2);
  padding:10px 0;margin:0;width:auto;cursor:pointer}
/* :has() is kept in a rule of its own - an older browser drops an entire rule
   when one selector in its list is unknown, and .checkline above is the one
   that actually matters */
body.mf .form > label:has(input[type=checkbox]),
body.mf .field > label:has(input[type=checkbox]){
  display:flex;align-items:center;gap:10px;padding:10px 0;margin:0;width:auto;cursor:pointer}

body.mf .acc{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);margin-bottom:14px}
body.mf .acc__h{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  font-weight:600;font-size:15px;cursor:pointer}
body.mf .acc:not(.is-open) .acc__h:hover{background:var(--panel-2)}
body.mf .acc__h b{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);color:var(--ink-2);font-family:var(--ff-num);font-size:12px;font-weight:600}
body.mf .acc.is-open .acc__h b{background:var(--accent);color:var(--on-accent)}
body.mf .acc--done .acc__h b{background:var(--ok);color:#fff}
body.mf .acc__t{flex:1;min-width:0}
body.mf .acc__h .edit{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--accent);flex:0 0 auto}
body.mf .acc__h .edit:hover{text-decoration:underline}
body.mf .acc__done{
  padding:0 16px 14px 52px;font-size:13.5px;color:var(--ink-2);line-height:1.5;
  overflow-wrap:anywhere}
body.mf .acc__done b{color:var(--ink);font-family:var(--ff-num)}
body.mf .acc__b{display:none;padding:0 16px 16px;border-top:1px solid var(--rule-2);padding-top:16px}
body.mf .acc.is-open > .acc__b{display:block}
body.mf .acc__next{margin-top:6px}
body.mf .acc__b > h3:first-child{margin-top:0}
body.mf .btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.mf .btnrow--end{justify-content:flex-end}
body.mf .btnrow--split{justify-content:space-between}

/* the summary panel keeps pace with the panels beside it */
body.mf .ordersummary{position:sticky;top:16px;padding:0}
body.mf .ordersummary > h3{
  padding:12px 16px;margin:0;border-bottom:1px solid var(--rule-2);font-size:14.5px}
body.mf .ordersummary > ul{list-style:none;margin:0;padding:12px 16px 0}
body.mf .ordersummary li{
  display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;color:var(--ink-2)}
body.mf .ordersummary li b{font-family:var(--ff-num);color:var(--ink);font-weight:500}
body.mf .ordersummary__name em{
  display:block;font-style:normal;font-family:var(--ff-num);font-size:11.5px;color:var(--ink-3);margin-top:2px}
body.mf .ordersummary .totals{margin:0;padding:8px 16px 16px;max-width:none}
body.mf .ordersummary .totals > div{
  display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;color:var(--ink-2)}
body.mf .ordersummary .totals > div b{font-family:var(--ff-num);color:var(--ink);font-weight:500}
body.mf .ordersummary .totals__grand{
  border-top:2px solid var(--ink)!important;margin-top:8px;padding-top:11px!important;
  font-size:17px;font-weight:600;color:var(--ink)}
body.mf .ordersummary > p{padding:0 16px 16px;margin:0}

/* the order-type choices, as one row of equal cells */
body.mf .comodes{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin:4px 0 18px!important}
body.mf .comode{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:11px!important;text-align:left!important;
  border:0!important;border-right:1px solid var(--rule-2)!important;border-radius:0!important;
  padding:14px 16px!important;margin:0!important;flex:none!important;
  background:var(--panel);font-size:14px!important;font-weight:600!important;line-height:1.3}
body.mf .comode span{flex:1;min-width:0}
body.mf .comode:last-child{border-right:0!important}
body.mf .comode:has(input:checked){background:var(--accent-soft)}
@media(max-width:760px){
  body.mf .comodes{grid-template-columns:1fr}
  body.mf .comode{border-right:0!important;border-bottom:1px solid var(--rule-2)!important}
}

/* --------------------------------------------- 12c. BUTTONS BESIDE FIELDS
   A row of inputs with a button on the end only looks right if the button is
   the same height as the inputs AND sits on the same baseline. The fields
   carry a label above them and the button does not, so a plain flex row hangs
   the button a label's height too high - which is what the "Add line" row on
   the cart was doing. align-items:flex-end puts them on the same bottom edge
   and the shared height does the rest. */
body.mf .inlineform{
  display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
body.mf .inlineform .field{margin-bottom:0;flex:1 1 180px;min-width:0}
body.mf .inlineform .field:last-of-type{flex:0 0 110px}
body.mf .inlineform input:not([type=checkbox]):not([type=radio]),
body.mf .inlineform select{height:44px;padding:0 12px}
body.mf .inlineform .btn{height:44px;min-width:150px;flex:0 0 auto}
body.mf #validateAddrBtn{height:44px;min-width:220px;margin-top:6px}

/* -------------------------------------------------------- 13. DATA TABLES */
body.mf .linetable,body.mf table.data{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel)}
body.mf .linetable th,body.mf table.data th{
  text-align:left;font-weight:600;font-size:12px;color:var(--page);background:var(--ink);
  padding:8px 12px;white-space:nowrap;border:0}
body.mf .linetable td,body.mf table.data td{
  padding:10px 12px;border-bottom:1px solid var(--rule-2);vertical-align:top;border-left:0;border-right:0}
body.mf .linetable tbody tr:hover,body.mf table.data tbody tr:hover{background:var(--panel-2)}
body.mf .totals{margin-left:auto;max-width:340px;font-size:13.5px}
body.mf .totals tr td{padding:7px 0;border:0;color:var(--ink-2)}
body.mf .totals__grand td{
  border-top:2px solid var(--ink)!important;padding-top:11px;font-size:17px;
  font-weight:600;color:var(--ink);font-family:var(--ff-num)}
body.mf .qtybox{width:74px;text-align:center;font-family:var(--ff-num)}

/* -------------------------------------------------------- 14. PRODUCT PAGE */
/* PDP_C_V1: two columns, not three. The page only ever printed two children -
   the gallery and the column beside it - so the third track was always empty,
   which is the dead space on the right of every product page. The gallery now
   takes 42% and everything else takes the rest. */
body.mf .pdp{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:44px;
  align-items:start;padding-top:24px}
body.mf .gallery__main{height:auto;aspect-ratio:1;max-height:none}
body.mf .gallery__main{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  aspect-ratio:1;display:grid;place-items:center;padding:24px;overflow:hidden}
body.mf .gallery__main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
body.mf .gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
body.mf .gallery__thumbs img,body.mf .gallery__thumbs button{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  aspect-ratio:1;padding:6px;object-fit:contain;cursor:pointer}
body.mf .gallery__thumbs .is-on{border-color:var(--ink);border-width:2px}
body.mf .pdp__brand{font-size:12.5px;color:var(--ink-3);font-weight:600}
body.mf .pdp__meta{
  display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--ff-num);
  font-size:12.5px;color:var(--ink-3);margin-top:8px}
body.mf .pdp__meta b{color:var(--ink-2);font-weight:500}
body.mf .pdp__buy{
  border:1px solid var(--rule);border-top:3px solid var(--ink);background:var(--panel);
  border-radius:var(--r);padding:16px;position:sticky;top:16px}
body.mf .pdp__price,body.mf .pdp__cur{
  font-family:var(--ff-num);font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
body.mf .pdp__was{color:var(--ink-3);font-size:15px;text-decoration:line-through;font-family:var(--ff-num)}
body.mf .pdp__save{background:var(--mark);color:var(--mark-ink);padding:2px 8px;
  border-radius:1px;font-size:12px;font-weight:600}
body.mf .pdp__note,body.mf .pdp__assure{font-size:13px;color:var(--ink-2)}
body.mf .pdp__assure{
  list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--rule-2);
  display:flex;flex-direction:column;gap:8px}
body.mf .pdp__assure li{padding-left:15px;position:relative}
body.mf .pdp__assure li::before{
  content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  background:var(--accent);border-radius:1px}
body.mf .marketing-info,body.mf .prose{
  max-width:none;font-size:15.5px;line-height:1.7;color:var(--ink-2);
  hyphens:auto;-webkit-hyphens:auto}
body.mf .prose h2,body.mf .prose h3,body.mf .marketing-info h2,body.mf .marketing-info h3{
  color:var(--ink);margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--rule-2)}
body.mf .prose a,body.mf .marketing-info a{color:var(--accent);text-decoration:underline}

/* --------------------------------------------------- 14b. THE BUY BAR
   Pinned to the bottom of the window on a product page, so price, quantity and
   Add to Cart are on screen wherever you have read to. The page gets bottom
   padding to match, so the bar never covers the footer. */
body.mf .pdp__bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--panel);border-top:2px solid var(--ink);
  box-shadow:0 -6px 22px rgba(13,27,36,.10)}
body.mf .pdp__bar-in{
  display:flex;align-items:center;gap:24px;padding-block:12px;flex-wrap:wrap}
body.mf .pdp__bar-nm{flex:1 1 260px;min-width:0}
body.mf .pdp__bar-nm b{
  display:block;font-size:14.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mf .pdp__bar-nm span{font-family:var(--ff-num);font-size:11.5px;color:var(--ink-3)}
body.mf .pdp__bar .pdp__price{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0;font-size:25px}
body.mf .pdp__bar .pdp__price > div{display:flex;align-items:baseline;gap:9px}
body.mf .pdp__bar .pdp__price .price-new,
body.mf .pdp__bar .pdp__price .price-plain{
  font-family:var(--ff-num);font-size:25px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
body.mf .pdp__bar .pdp__price .price-old{
  font-family:var(--ff-num);font-size:14px;color:var(--ink-3);text-decoration:line-through}
body.mf .pdp__bar .pdp__price .price-ask{font-size:16px;font-weight:600;color:var(--ink-2)}
body.mf .pdp__bar .pdp__cur{font-size:13px;color:var(--ink-3);font-family:var(--ff-ui)}
body.mf .pdp__buy{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
body.mf .pdp__buy .btn{flex:0 0 auto}
body.mf .pdp__buy .qty input{width:56px;padding:9px 0}
body.mf .pdp__buy .qty button{width:32px}
body.pg-product{padding-bottom:104px}
@media(max-width:900px){
  body.mf .pdp__bar-nm{display:none}
  body.mf .pdp__bar-in{gap:14px;justify-content:space-between}
  body.mf .pdp__buy{flex:1 1 100%}
  body.mf .pdp__buy .btn{flex:1 1 auto}
  body.pg-product{padding-bottom:150px}
}

/* ------------------------------------------------------------ 15. BRANDS */
body.mf .azbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:18px}
body.mf .azbar a,body.mf .azbar span{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:4px 10px;font-family:var(--ff-num);font-size:12.5px;color:var(--ink-2)}
body.mf .azbar a:hover,body.mf .azbar .is-on{background:var(--ink);color:var(--page);border-color:var(--ink)}
body.mf .brandgroup{margin-bottom:22px}
body.mf .brandgroup__letter{
  font-family:var(--ff-num);font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
body.mf .brandcols{columns:4;column-gap:26px;font-size:13.5px}
body.mf .brandcols a{display:block;padding:4px 0;color:var(--ink-2)}
body.mf .brandcols a:hover{color:var(--accent)}

/* ------------------------------------------------------------ 16. FOOTER */
/* FOOTER_TEXT_V4 - ONE COLOUR, ONE FACE, EVERYWHERE IN THE FOOTER.
   Three separate things were making the footer look like four different
   footers stacked up, and all three were inherited rules nobody had looked at
   on a dark background:

     .sitefoot__col a      color-mix(footer-ink 78%)   - links and phone/email
     .sitefoot__line       color-mix(footer-ink 58%)   - the address
     .sitefoot__regs       color: var(--muted)         - the codes
     .sitefoot__regs b     color: var(--ink)           - the code LABELS

   So the address came out visibly greyer than the phone number beside it, the
   registration codes came out greyer still - and the labels on those codes,
   set to --ink, were being painted near-black on a near-black band, which is
   why the footer showed three bare values with no "CAGE Code" or "DUNS" in
   front of them. They were there the whole time, in the same colour as what
   was behind them.

   Everything in the footer now takes ONE colour and ONE face. Headings are
   white; everything else is white at 86%, which is a single deliberate step
   down rather than four accidental ones. Nothing uses opacity, because opacity
   was what made these drift apart in the first place - the colours are stated. */
/* FOOTER_FULL_BLEED_V3. style.css sets the footer to
   width:min(--page-w, 100% - --page-gutter) with a rounded corner and a bottom
   margin, which is why it floated as an inset slab with the page showing down
   both sides. It is a band now, like the menu bar: full width, square, flush
   to the bottom. Its CONTENT still sits on the same 24px inset as the menu,
   so the logo, the menu links and the footer columns share one left edge. */
body.mf .sitefoot{
  --foot-ink:#FFFFFF;
  --foot-txt:rgba(255,255,255,.86);
  --foot-dim:rgba(255,255,255,.62);
  background:var(--bar);color:var(--foot-txt);
  width:auto;max-width:none;margin:40px 0 0;
  border:0;border-radius:0;padding-block:0;overflow:visible}

/* one colour and one face for every piece of text in the band */
body.mf .sitefoot,body.mf .sitefoot p,body.mf .sitefoot span,body.mf .sitefoot a,
body.mf .sitefoot b,body.mf .sitefoot strong,body.mf .sitefoot em,body.mf .sitefoot i,
body.mf .sitefoot div,body.mf .sitefoot li{
  font-family:var(--ff-ui);opacity:1}
body.mf .sitefoot p,body.mf .sitefoot span,body.mf .sitefoot div,
body.mf .sitefoot__intro,body.mf .sitefoot__line,body.mf .sitefoot__regs,
body.mf .sitefoot__col a,body.mf .sitefoot__ico,body.mf .sitefoot__bar-in{
  color:var(--foot-txt)}
body.mf .sitefoot h4,body.mf .sitefoot__name,body.mf .sitefoot__col > strong,
body.mf .sitefoot__regs b,body.mf .sitefoot strong{
  color:var(--foot-ink)}
body.mf .sitefoot a:hover,body.mf .sitefoot__ico:hover{color:var(--foot-ink)}
body.mf .sitefoot__cta{border-bottom:1px solid rgba(255,255,255,.14)}
body.mf .sitefoot__cta-in{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:16px}
body.mf .sitefoot__cta-txt{flex:1;font-size:15px;color:var(--foot-ink)}
body.mf .sitefoot__cta-btn{
  background:var(--bar-ink);border-color:var(--bar-ink);color:var(--bar)}
body.mf .sitefoot__cta-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* FOOTER_GRID_V2: four tracks for the four columns the footer actually
   prints. It was five, so the last track was always empty and every column
   sat a track to the left of where it should have been. */
body.mf .sitefoot__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:18px 34px;padding-block:26px 0}
body.mf .sitefoot__col h4,body.mf .sitefoot__col > strong{
  font-size:13px;margin-bottom:9px;font-weight:600;display:block;color:var(--foot-ink)}
body.mf .sitefoot__col a{display:block;font-size:13px;padding:3px 0;color:var(--foot-txt)}
body.mf .sitefoot__col a:hover{color:var(--foot-ink);text-decoration:underline}
body.mf .sitefoot__name{font-weight:700;font-size:16.5px;letter-spacing:-.03em;margin-bottom:8px}
body.mf .sitefoot__logo{max-height:36px;width:auto;margin-bottom:10px;padding:6px 8px}
body.mf .sitefoot__intro{font-size:13px;color:var(--foot-txt);max-width:48ch;line-height:1.55;margin:0}
/* the registration codes are identifiers, so they are set in the mono face and
   put on one line under a hairline instead of drifting as three grey words */
body.mf .sitefoot__regs{
  display:flex;flex-wrap:wrap;gap:6px 22px;max-width:none;
  margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--ff-ui);font-size:13px;line-height:1.5;color:var(--foot-txt)}
body.mf .sitefoot__regs span{display:inline-flex;gap:6px;margin:0;white-space:nowrap}
body.mf .sitefoot__regs b{font-weight:600;color:var(--foot-ink)}
body.mf .sitefoot__ico,body.mf .sitefoot__line{
  display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:4px 0;
  color:var(--foot-txt);line-height:1.5}
body.mf .sitefoot__ico i,body.mf .sitefoot__line i{
  width:15px;height:15px;flex:0 0 15px;margin-top:3px;color:var(--foot-dim)}
body.mf .sitefoot__ico i svg,body.mf .sitefoot__line i svg{opacity:1}
body.mf .sitefoot__soc{display:flex;gap:9px;margin-top:12px}
body.mf .sitefoot__soc a{
  width:32px;height:32px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r);color:var(--foot-txt)}
body.mf .sitefoot__soc a:hover{background:rgba(255,255,255,.1);color:var(--foot-ink)}
body.mf .sitefoot__soc svg{width:16px;height:16px}
body.mf .sitefoot__logos{padding-block:14px 0}
body.mf .sitefoot__bar{margin-top:20px;border-top:1px solid rgba(255,255,255,.14)}
body.mf .sitefoot__bar-in{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  padding-block:12px;font-size:12.5px;color:var(--foot-txt)}

body.mf .cookiebar{
  background:var(--bar);color:var(--bar-ink);border-top:1px solid rgba(255,255,255,.16)}
body.mf .cookiebar__in{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  max-width:var(--page-w,3400px);margin-inline:auto;padding:14px var(--band-pad,24px)}
body.mf .cookiebar__txt{flex:1 1 320px;margin:0;font-size:13.5px;line-height:1.5}
body.mf .cookiebar__btns{display:flex;gap:10px;flex:0 0 auto}
body.mf .cookiebar__btns .btn{min-width:130px;height:40px;padding:0 18px}

/* ------------------------------------------------ 16b. WRITTEN PAGES
   About, Contact, Login, Terms and the rest are documents, not catalogue
   pages. Full width is right for a list of products and wrong for a paragraph:
   at 1900px the text was a narrow ribbon pinned to the left edge with half the
   screen empty beside it. These pages take a document measure instead, centred,
   and the catalogue keeps the full width it needs. */
/* FULL_WIDTH_V3. Every page is full width. No page sets --band-max, so every
   band on every page falls back to the page width and they all start on the
   same left edge as the logo - which is what "aligned" means here.

   The previous version boxed the written pages at 1200-1340px to give a
   paragraph a readable measure. That was the wrong trade: it made those pages
   read as a different, narrower site sitting inside the wide one, and it left
   the heading floating in the middle of a screen where everything else ran
   edge to edge.

   The measure still has to come from somewhere - a 1,900px line of text is
   unreadable - so it comes from the COLUMN instead of the page. The reading
   column is capped and the panels beside it take the rest, so the band is full
   width, both its edges line up with the header and the footer, and the text
   inside it is still 78 characters a line.

   --band-max is left in the lock as the escape hatch. Nothing sets it now. */

body.pg-about .prose,body.pg-markets .prose{
  max-width:none;font-size:16.5px;line-height:1.75}

/* POLICY_TYPE_V2. The policy pages were set at the same size as About, and a
   policy is not read the way an About page is - it is scanned for the clause
   that answers a question. So the body drops to 15px with the leading opened
   up to compensate, and the headings get a real hierarchy instead of all being
   one size: a numbered-feeling h2 with a rule over it, a smaller h3 with no
   rule, and lists set as rows so a clause is a line rather than a paragraph
   with a dot. Smaller type, more of it on screen, easier to scan. */
body.pg-terms .mf-doc__body,body.pg-privacy .mf-doc__body,
body.pg-returns .mf-doc__body,body.pg-shipping .mf-doc__body{
  font-size:15px;line-height:1.72;max-width:none}
body.pg-terms .mf-doc__body p,body.pg-privacy .mf-doc__body p,
body.pg-returns .mf-doc__body p,body.pg-shipping .mf-doc__body p{margin:0 0 13px}
body.pg-terms .mf-doc__body h2,body.pg-privacy .mf-doc__body h2,
body.pg-returns .mf-doc__body h2,body.pg-shipping .mf-doc__body h2{
  font-size:18px;margin:34px 0 12px;padding-top:16px;
  border-top:2px solid var(--ink);color:var(--ink);letter-spacing:-.015em}
body.pg-terms .mf-doc__body h3,body.pg-privacy .mf-doc__body h3,
body.pg-returns .mf-doc__body h3,body.pg-shipping .mf-doc__body h3{
  font-size:15.5px;margin:22px 0 8px;padding-top:0;border-top:0;color:var(--ink)}
body.pg-terms .mf-doc__body h4,body.pg-privacy .mf-doc__body h4,
body.pg-returns .mf-doc__body h4,body.pg-shipping .mf-doc__body h4{
  font-size:14px;margin:18px 0 6px;color:var(--ink-2);font-weight:600}
body.pg-terms .mf-doc__body ul li,body.pg-privacy .mf-doc__body ul li,
body.pg-returns .mf-doc__body ul li,body.pg-shipping .mf-doc__body ul li{
  padding:6px 0 6px 17px;font-size:14.5px}
body.pg-terms .mf-doc__body ul li::before,body.pg-privacy .mf-doc__body ul li::before,
body.pg-returns .mf-doc__body ul li::before,body.pg-shipping .mf-doc__body ul li::before{top:14px}
body.pg-terms .mf-doc__body ol,body.pg-privacy .mf-doc__body ol,
body.pg-returns .mf-doc__body ol,body.pg-shipping .mf-doc__body ol{font-size:14.5px}
body.pg-terms .mf-doc__idx a,body.pg-privacy .mf-doc__idx a,
body.pg-returns .mf-doc__idx a,body.pg-shipping .mf-doc__idx a{font-size:13px}
body.pg-about .prose h2,body.pg-about .prose h3{font-size:19px}
body.pg-about .prose p{margin:0 0 14px}
body.pg-about .prose ul,body.pg-about .prose ol{margin:0 0 16px;padding-left:20px}
body.pg-about .prose li{margin-bottom:5px}
body.pg-about .prose strong{color:var(--ink)}
body.pg-about .prose hr{border:0;border-top:1px solid var(--rule-2);margin:26px 0}

/* the login card is a form with two fields in it - it should not be as wide as
   a monitor, and the heading belongs over the card rather than off to one side */
body.pg-login .pagehead{border-bottom:0;text-align:center;padding-bottom:6px}
body.pg-login .card{max-width:520px;margin-inline:auto;padding:24px}
body.pg-login .loginhead{text-align:center;margin-bottom:18px}
body.pg-login .btn{width:100%}
body.pg-login .linkbtn{width:auto}

/* contact: the form leads, the details sit beside it and stop at the top */
body.mf .contactgrid{grid-template-columns:minmax(0,1fr) 360px;gap:40px}
body.mf .contactgrid > aside{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:16px 18px;position:sticky;top:16px}
body.mf .contactgrid > aside h3{
  font-size:15px;padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--ink)}
body.mf .infolist{list-style:none;margin:0;padding:0}
body.mf .infolist li{
  display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--rule-2)}
body.mf .infolist li:last-child{border-bottom:0}
body.mf .infolist .k{
  display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r);
  background:var(--panel-3);color:var(--accent);font-family:var(--ff-num);
  font-size:12px;font-weight:600}
body.mf .infolist .v{display:flex;flex-direction:column;min-width:0}
body.mf .infolist .v b{font-weight:600;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
body.mf .infolist .v em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px}
body.mf .infolist .v a:hover{color:var(--accent);text-decoration:underline}
body.mf .infolist__intro{font-size:13px;color:var(--ink-2);margin:0 0 4px}
body.mf .contactmap{margin-top:26px}
body.mf .contactmap iframe{
  width:100%;height:380px;border:1px solid var(--rule);border-radius:var(--r);display:block}

/* --------------------------------------------- 16b-ii. DOCUMENT LAYOUT
   About and the other long written pages. Three columns: the contents rail
   built from the page's own headings, the text at a measure somebody can read,
   and the facts a buyer checks pinned beside it. Both side columns are sticky,
   so the contents and the phone number stay with you the whole way down a long
   page - which is the entire reason for laying a document out this way rather
   than stacking everything. */
/* the text track takes everything between the contents rail and the panel, so
   the document runs edge to edge like the rest of the site */
body.mf .mf-doc{
  display:grid;grid-template-columns:230px minmax(0,1fr) 340px;
  gap:44px;align-items:start}
body.mf .mf-doc--noindex{grid-template-columns:minmax(0,1fr) 340px;gap:40px}

/* RAIL_NO_SCROLL_V2: this used to be capped at the window height with
   overflow:auto, which drew a second grey ruler down the side of every policy
   page - a shipping policy with fourteen headings is taller than the screen,
   so the bar was always there. The cap and the overflow are gone. On a page
   with a short contents list the rail still sticks; on a long one it scrolls
   with the page, which is the honest behaviour and costs nothing. */
body.mf .mf-doc__idx{position:sticky;top:16px;max-height:none;overflow:visible}
body.pg-terms .mf-doc__idx,body.pg-privacy .mf-doc__idx,
body.pg-returns .mf-doc__idx,body.pg-shipping .mf-doc__idx{position:static}
body.mf .mf-doc__idx h4{
  font-size:12.5px;color:var(--ink-3);font-weight:500;margin:0 0 10px;letter-spacing:0}
body.mf .mf-doc__idx a{
  display:block;padding:7px 0 7px 14px;font-size:13.5px;line-height:1.4;
  color:var(--ink-2);border-left:2px solid var(--rule-2)}
body.mf .mf-doc__idx a:hover{color:var(--accent);border-left-color:var(--rule)}
body.mf .mf-doc__idx a.on{color:var(--ink);font-weight:600;border-left-color:var(--accent)}

body.mf .mf-doc__body{
  max-width:none;font-size:16.5px;line-height:1.75;
  hyphens:auto;-webkit-hyphens:auto}
body.mf .mf-doc__body > :first-child{margin-top:0;padding-top:0;border-top:0}
body.mf .mf-doc__body h2,body.mf .mf-doc__body h3{
  color:var(--ink);font-size:20px;margin:34px 0 12px;padding-top:18px;
  border-top:1px solid var(--rule-2);scroll-margin-top:24px}
body.mf .mf-doc__body h4{font-size:16px;margin:22px 0 8px;color:var(--ink)}
body.mf .mf-doc__body p{margin:0 0 15px}
body.mf .mf-doc__body ul,body.mf .mf-doc__body ol{margin:0 0 16px;padding-left:0;list-style:none}
body.mf .mf-doc__body ol{list-style:decimal;padding-left:20px}
body.mf .mf-doc__body ul li{
  position:relative;padding:7px 0 7px 18px;border-bottom:1px solid var(--rule-2)}
body.mf .mf-doc__body ul li::before{
  content:"";position:absolute;left:0;top:15px;width:8px;height:2px;background:var(--accent)}
body.mf .mf-doc__body ul li:last-child{border-bottom:0}
body.mf .mf-doc__body strong{color:var(--ink);font-weight:600}
body.mf .mf-doc__body hr{border:0;border-top:1px solid var(--rule-2);margin:28px 0}
body.mf .mf-doc__body a{color:var(--accent);text-decoration:underline}
body.mf .mf-doc__body img{border:1px solid var(--rule);border-radius:var(--r);height:auto}

/* the panel hugs the right edge of the page, so the document has two straight
   edges rather than a column of text and a lot of nothing */
body.mf .mf-doc__side{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
body.mf .mf-doc__side .panel-b{padding:16px}
body.mf .mf-kv{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:13px}
body.mf .mf-kv:last-child{border-bottom:0}
body.mf .mf-kv span{color:var(--ink-3)}
body.mf .mf-kv b{
  font-family:var(--ff-num);font-size:13px;text-align:right;overflow-wrap:anywhere}
body.mf .mf-doc__contact{font-size:13.5px;color:var(--ink-2);line-height:1.65}
body.mf .mf-doc__contact b{color:var(--ink);font-weight:600}
body.mf .mf-doc__contact a:hover{color:var(--accent);text-decoration:underline}

@media(max-width:1180px){
  body.mf .mf-doc{grid-template-columns:200px minmax(0,1fr);gap:32px}
  body.mf .mf-doc--noindex{grid-template-columns:minmax(0,1fr)}
  body.mf .mf-doc__side{
    grid-column:1 / -1;position:static;flex-direction:row;flex-wrap:wrap}
  body.mf .mf-doc__side > .panel{flex:1 1 300px}
}
@media(max-width:900px){
  body.mf .mf-doc{grid-template-columns:1fr;gap:24px}
  body.mf .mf-doc__idx{
    position:static;max-height:none;border:1px solid var(--rule);
    background:var(--panel);border-radius:var(--r);padding:14px 16px}
  body.mf .mf-doc__side{flex-direction:column}
  body.mf .mf-doc__body{font-size:15.5px}
}

/* ------------------------------------- 16b-iii. POLICY / CONTACT NAV
   The list of the four policies down the left of a policy page, and the
   "on this page" list under it. Boxed rows rather than the hairline ticks the
   About rail uses, because these are links to OTHER pages - a different kind
   of thing, and it should not look like the same list continued. */
body.mf .mf-doc__idx h4{margin-top:0}
body.mf .mf-polnav{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r)}
body.mf .mf-polnav a{
  display:block;padding:10px 13px;font-size:13.5px;line-height:1.35;
  color:var(--ink-2);background:var(--panel);border-bottom:1px solid var(--rule-2)}
body.mf .mf-polnav a:last-child{border-bottom:0}
body.mf .mf-polnav a:hover{background:var(--panel-2);color:var(--ink)}
body.mf .mf-polnav a.on{background:var(--ink);color:var(--page);font-weight:600;border-color:var(--ink)}
body.mf .mf-polnav--sub{border:0;border-radius:0}
body.mf .mf-polnav--sub a{
  border:0;border-left:2px solid var(--rule-2);background:none;padding:7px 0 7px 14px}
body.mf .mf-polnav--sub a:hover{background:none;color:var(--accent);border-left-color:var(--rule)}
body.mf .mf-polnav--sub a.on{
  background:none;color:var(--ink);border-left-color:var(--accent);font-weight:600}

body.mf .mf-check{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--ink-2)}
body.mf .mf-check li{position:relative;padding:8px 0 8px 18px;border-bottom:1px solid var(--rule-2);line-height:1.5}
body.mf .mf-check li:last-child{border-bottom:0}
body.mf .mf-check li::before{
  content:"";position:absolute;left:0;top:16px;width:9px;height:2px;background:var(--accent)}

/* the contact page is the same document, so its form has to sit in it without
   the field grid fighting the column */
body.mf .mf-doc__body .form,body.mf .mf-doc__body .field--2{max-width:none}
body.mf .mf-doc__body .section__head:first-child{margin-top:0}
body.mf .mf-doc__body .contactmap iframe{height:340px}
body.mf .mf-doc__body .linetable td:first-child{color:var(--ink-2)}

/* ---------------------------------------------------- 16c. CHAT WITH US */
body.mf .mfchat{padding:18px}
body.mf .mfchat__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.mf .mfchat__err{font-size:13px;color:var(--out)}
body.mf .mfchat__log{
  border:1px solid var(--rule-2);border-radius:var(--r);background:var(--panel-2);
  padding:14px;height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
body.mf .mfchat__m{max-width:72%;display:flex;flex-direction:column;gap:2px}
body.mf .mfchat__m b{font-size:11px;font-weight:600;color:var(--ink-3)}
body.mf .mfchat__m span{
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:9px 12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
body.mf .mfchat__m i{font-style:normal;font-family:var(--ff-num);font-size:10.5px;color:var(--ink-3)}
body.mf .mfchat__m--me{align-self:flex-end;align-items:flex-end}
body.mf .mfchat__m--me span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.mf .mfchat__say{display:flex;gap:8px;margin-top:12px}
body.mf .mfchat__say input{
  flex:1;border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);
  padding:10px 12px;font-size:14px;min-width:0}
body.mf .mfchat__say input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* ------------------------------------------------------- 16d. ONE CARD
   Categories on the home page, categories in the list block, markets on the
   home page and markets on the About page were four different cards. They are
   one card now: hairline box, a rule across the top that takes the accent on
   hover, the count in the mono face because it is a figure, the name, and one
   line of context under it. No watermark illustration, no per-card hue - the
   old cards picked a colour per keyword, which is why five industries came out
   purple, blue, pink, green and grey down one page. */
body.mf .mf-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
body.mf .catcard{
  display:block;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-top:3px solid var(--ink);
  background:var(--panel);border-radius:var(--r);padding:16px;
  --cc:0!important}
body.mf .catcard:hover{border-top-color:var(--accent);background:var(--panel-2)}
body.mf .catcard__bg{display:none!important}
body.mf .catcard__i{
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--panel-2);color:var(--accent)}
body.mf .catcard__i svg{width:17px;height:17px}
body.mf .catcard > span{
  display:block;font-family:var(--ff-num);font-size:11.5px;color:var(--ink-3);
  letter-spacing:0;margin-bottom:3px}
body.mf .catcard h3{font-size:15.5px;margin:0 0 5px;letter-spacing:-.01em}
body.mf .catcard p{min-height:0}
body.mf .catcard p{
  font-size:13px;color:var(--ink-2);margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:620px){body.mf .mf-cards{grid-template-columns:1fr}}

/* -------------------------------------------- 16e. THE BENEFITS BAR (B2)
   The packaged bar builds each of the four from its own hue - trust green,
   shipping blue, pricing amber, support violet - with a gradient across the
   top of each card. Four colours and four gradients is why the four read as
   four unrelated things rather than one statement about how the company
   trades. It is one dark band now, the same colour as the menu above it, with
   the four separated by hairlines and one accent on every mark.

   home-blocks.php prints its own <style> inside the BODY, so these are stated
   at a specificity that beats it and the properties it sets are marked, rather
   than trusting source order against a block that comes later in the page. */
body.mf .tb-benefits{
  background:var(--ink)!important;color:var(--page);
  border:0;border-radius:0!important;margin:0;padding-block:0;box-shadow:none!important}
body.mf .tb-benefits__row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0}
body.mf .tb-bi{
  --cc:0;
  display:flex;gap:14px;align-items:center;padding:18px 20px;
  background:none!important;border:0!important;border-right:1px solid rgba(255,255,255,.14)!important;
  border-radius:0!important;box-shadow:none!important}
body.mf .tb-bi:last-child{border-right:0!important}
body.mf .tb-bi::before,body.mf .tb-bi::after{display:none!important}
body.mf .tb-bi__i{
  flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;padding:0;
  background:none!important;border:0!important;border-radius:0!important;
  color:var(--mark)!important;box-shadow:none!important}
body.mf .tb-bi__i svg{width:23px;height:23px}
body.mf .tb-bi h3{font-size:15px;font-weight:600;margin:0 0 2px;color:#fff;letter-spacing:-.01em}
body.mf .tb-bi p{font-size:12.5px;margin:0;color:rgba(255,255,255,.72);line-height:1.45}
@media(max-width:1000px){
  body.mf .tb-benefits__row{grid-template-columns:1fr 1fr}
  body.mf .tb-bi:nth-child(2){border-right:0!important}
  body.mf .tb-bi:nth-child(1),body.mf .tb-bi:nth-child(2){
    border-bottom:1px solid rgba(255,255,255,.14)!important}
}
@media(max-width:620px){
  body.mf .tb-benefits__row{grid-template-columns:1fr}
  body.mf .tb-bi{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
  body.mf .tb-bi:last-child{border-bottom:0!important}
}

/* ------------------------------------------- 16f. LOGO STRIP HEADINGS (L2)
   The brand strip had no heading at all and the customer strip had a
   left-aligned one, so the two bands looked unrelated. One centred heading
   with the site's 2px rule running out to both edges, on both. */
body.mf .mf-striphead{display:flex;align-items:center;gap:22px;padding-bottom:18px;margin:0}
body.mf .mf-striphead::before,body.mf .mf-striphead::after{
  content:"";flex:1;height:2px;background:var(--ink)}
body.mf .mf-striphead h2{font-size:20px;white-space:nowrap;margin:0;letter-spacing:-.02em}
@media(max-width:620px){
  body.mf .mf-striphead{gap:12px}
  body.mf .mf-striphead h2{font-size:17px;white-space:normal;text-align:center}
}

/* ---------------------------------------------------------- 17. HOME BLOCKS */
/* BANNER_FULL_BLEED_V3: style.css insets the hero the same way it insets the
   footer - a rounded slab narrower than the page. A banner is a band. */
body.mf .hero,body.mf .hero__inner{
  width:auto;max-width:none;margin-inline:0}
body.mf .hero{
  background:var(--panel);border-bottom:1px solid var(--rule);
  margin:0;border-radius:0;box-shadow:none;overflow:hidden}
body.mf .hero .wrap{padding-block:38px}
body.mf .logostrip,body.mf .section--soft{border-radius:0}
body.mf .hero h1,body.mf .slide__body h1,body.mf .slide__body h2{
  font-size:40px;line-height:1.05;max-width:18ch;letter-spacing:-.03em}
body.mf .hero p,body.mf .slide__body p{font-size:16px;color:var(--ink-2);max-width:62ch}
body.mf .logostrip{background:var(--panel-2);border-block:1px solid var(--rule-2)}
body.mf .catcard,body.mf .artcard{padding:15px 14px;display:block}
body.mf .catcard:hover,body.mf .artcard:hover{background:var(--panel-2)}
body.mf .grid--3{display:grid;gap:16px}

/* on a very wide monitor a paragraph is a long line, so it gets more leading
   and the headings get more room above them - the page stays full width and
   the spacing does the work the margin used to do */
@media(min-width:1700px){
  body.mf .mf-doc__body,body.mf .prose{line-height:1.85}
  body.mf .mf-doc__body h2,body.mf .mf-doc__body h3{margin-top:42px;padding-top:22px}
}

/* ------------------------------------------------- 17b. WIDE SCREENS
   Full width is the point, but a line of text 2,000px long is unreadable, so
   what stops growing is the COLUMN, not the page: the product name is capped,
   prose keeps its measure, and the extra width goes to the specs and the gap
   between the name and the price where it is useful. */
@media(min-width:1600px){
  body.mf .listhead,body.mf .line{grid-template-columns:4px var(--thumb) minmax(0,1fr) 200px 260px;gap:26px}
  body.mf .line-title{max-width:92ch}
  body.mf .catalog{gap:36px}
  body.mf .pdp{grid-template-columns:360px minmax(0,1fr) 380px;gap:36px}
}
@media(min-width:2100px){
  body.mf .line-main{max-width:120ch}
  body.mf .hero h1{font-size:48px}
}

/* ------------------------------------------------- 17c. THE PROMO TILES
   The same band as the benefits bar directly above them: one dark strip, the
   three tiles as cells divided by hairlines, the label small in the accent
   mark colour, the category as the white line you read, and Shop now as a
   plain white-outlined button. Two dark bands in a row read as one system;
   a dark band over three light cards read as two. home-blocks.php prints its
   own tile styles inside the body, so these are stated firmly. */
body.mf .tb-promos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  background:var(--ink);border-radius:var(--r);overflow:hidden}
body.mf .tb-promo{
  position:relative;overflow:hidden;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:20px 22px 22px!important;color:#fff!important;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  border-right:1px solid rgba(255,255,255,.14)!important}
body.mf .tb-promo:last-child{border-right:0!important}
body.mf .tb-promo:hover{background:rgba(255,255,255,.06)!important}
body.mf .tb-promo::before,body.mf .tb-promo::after{display:none!important}
body.mf .tb-promo h3{
  margin:0!important;font-size:12.5px!important;font-weight:600!important;
  color:var(--mark)!important;line-height:1.3!important;letter-spacing:0}
body.mf .tb-promo p{
  margin:0 0 14px!important;font-size:17px!important;font-weight:600!important;
  color:#fff!important;opacity:1!important;line-height:1.3;letter-spacing:-.01em}
body.mf .tb-promo .tb-shop{
  align-self:flex-start;display:inline-flex;align-items:center;
  background:transparent!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.45)!important;border-radius:var(--r)!important;
  padding:8px 14px!important;font-size:13px!important;font-weight:600!important}
body.mf .tb-promo:hover .tb-shop{background:var(--accent)!important;border-color:var(--accent)!important}
@media(max-width:900px){
  body.mf .tb-promos{grid-template-columns:1fr}
  body.mf .tb-promo{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
  body.mf .tb-promo:last-child{border-bottom:0!important}
}

/* --------------------------------------------------------- 18. RESPONSIVE */
@media(max-width:1180px){
  body.mf .pdp{grid-template-columns:250px minmax(0,1fr)}
  body.mf .pdp__buy{grid-column:1 / -1;position:static}
}
@media(max-width:1080px){
  body.mf .sitefoot__grid{grid-template-columns:1fr 1fr 1fr}
  body.mf .catalog{grid-template-columns:1fr}
  body.mf .catalog > aside,body.mf #catfilter-aside{position:static}
  body.mf .contactgrid,body.mf .checkoutgrid{grid-template-columns:1fr}
  body.mf .contactgrid > aside{position:static}
  body.mf .sitefoot__grid{grid-template-columns:1fr 1fr 1fr}
  body.mf .brandcols{columns:3}
}
@media(max-width:1500px){
  /* the second line under each utility link is the widest thing in the right
     track. Dropped first, so the search stays centred for another 300px of
     screen before the layout has to change shape. */
  body.mf .mf-util .util span{display:none}
  body.mf .mf-util .util{padding-block:9px}
}
@media(max-width:1180px){
  body.mf .masthead__in{flex-wrap:wrap;gap:12px 18px;min-height:0}
  body.mf .masthead__search{order:3;flex:1 1 100%;max-width:none;margin-inline:0}
  body.mf .mf-right{margin-left:auto}
}
@media(max-width:900px){
  body.mf .masthead__in{flex-wrap:wrap}
  body.mf .masthead__search{order:3;flex-basis:100%}
  body.mf .navtoggle{display:flex;margin-left:auto}
  body.mf .mainnav{display:none}
  body.mf .mainnav.is-open{display:block}
  body.mf .mainnav__in{flex-direction:column;align-items:stretch;overflow:visible}
  body.mf .mainnav__in > a,body.mf .hasdrop > a{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
  body.mf .mf-ship{display:none}
  body.mf .listhead{display:none}
  body.mf .line{
    grid-template-columns:4px var(--thumb) minmax(0,1fr);
    grid-template-areas:"t i m" "t a a" "t b b";row-gap:10px}
  body.mf .line .stock-tick{grid-area:t}
  body.mf .line .thumb{grid-area:i}
  body.mf .line-main{grid-area:m}
  body.mf .line-avail{grid-area:a}
  body.mf .line-buy{
    grid-area:b;text-align:left;margin:0;padding:0;
    background:none;border-left:0;display:block}
  body.mf .line:hover .line-buy{background:none}
  body.mf .buyrow{justify-content:flex-start}
  body.mf .field--2{grid-template-columns:1fr}
  body.mf .catfilter-mobtoggle{display:block}
  body.mf .pdp{grid-template-columns:1fr}
  body.mf h1{font-size:26px}
  body.mf .hero h1{font-size:28px}
  body.mf .brandcols{columns:2}
}
@media(max-width:620px){
  body.mf .sitefoot__grid{grid-template-columns:1fr 1fr}
  body.mf .brandcols{columns:1}
  body.mf .mf-util .util{display:none}
  body.mf .mf-strip .wrap{gap:16px}
}

/* --------------------------------------------------------- 18b. TOAST
   The confirmation for an add that did not move the page. Bottom left, out of
   the way of the cart in the top right, so it does not cover the thing it is
   telling you about. */
#mf-toast{
  position:fixed;left:20px;bottom:20px;z-index:60;
  max-width:340px;padding:12px 16px;border-radius:var(--r);
  background:var(--ink);color:var(--page);font-size:13.5px;font-weight:600;
  border-left:4px solid var(--ok);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease}
#mf-toast.is-on{opacity:1;transform:translateY(0)}
#mf-toast.is-bad{border-left-color:var(--out)}
@media (prefers-reduced-motion:reduce){#mf-toast{transition:none}}

/* ------------------------------------------------------------- 19. PRINT */
@media print{
  body.mf .utilitybar,body.mf .mainnav,body.mf .mf-strip,body.mf .sitefoot,
  body.mf .cookiebar,body.mf .buyrow{display:none!important}
  body.mf{background:#fff}
}