/* App variables mapped onto the MegaFix brand tokens (see brand.css).
   Everything downstream inherits the rebrand palette from these six. */
:root {
  --navy: var(--mf-navy);
  --orange: var(--mf-action);
  --bg: var(--mf-bg-subtle);
  --line: var(--mf-border);
  --text: var(--mf-text-body);
  --muted: var(--mf-text-muted);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 14px/1.5 var(--mf-font-sans);
  -webkit-font-smoothing: antialiased;
}
main { padding: 16px; margin: 0 auto; }

/* Display type — Monument Extended for page titles / hero moments only.
   Loud extended display over the quiet Aktiv body is the core brand move. */
.login-wrap h1, .picker-wrap h1, .admin-wrap h1, .acct-wrap h1,
.subs-wrap h1, .cart-main h1, .qo-input h1 {
  font-family: var(--mf-font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-tight); line-height: var(--mf-leading-tight);
  color: var(--mf-text-strong);
}

/* Snappy mechanical motion + always-visible orange focus ring */
a, button, input, select, textarea, summary { transition:
  background var(--mf-duration) var(--mf-ease),
  border-color var(--mf-duration) var(--mf-ease),
  color var(--mf-duration) var(--mf-ease); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: none; box-shadow: var(--mf-shadow-focus);
  border-radius: var(--mf-radius-sm);
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =======================================================================
   GLOBAL SHELL — announcement strip, header, primary nav, dropdown menus
   ======================================================================= */

/* Accessibility: skip link appears on first Tab press */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px; font-weight: 700;
  font-size: 14px; text-decoration: none; border-radius: 0 0 var(--mf-radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Announcement strip: the navy band with the brand's orange diagonal
   (mirrors megafix.com.au) now carries the standing trade-account message
   (or the admin-set banner_text) plus the phone number. */
.announce {
  min-height: 40px; display: flex; align-items: center; gap: 18px;
  /* bar spans the viewport; content centres on the container on wide screens */
  padding: 4px max(24px, calc((100% - var(--mf-container)) / 2));
  background: linear-gradient(115deg, var(--navy) 0 86%, var(--orange) 86%);
  color: var(--mf-text-on-navy);
}
.announce-msg {
  margin: 0; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--mf-tracking-wide);
  font-variant-numeric: tabular-nums; /* countdown digits tick without jitter */
  display: flex; align-items: center; gap: 8px;
}
.announce-msg svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--mf-orange-400); }
.announce-phone svg { width: 14px; height: 14px; color: var(--mf-orange-400); margin-right: 6px; vertical-align: -2px; }
.announce-note { cursor: help; opacity: 0.8; margin-left: 2px; }
.announce-phone {
  margin-left: auto; color: #fff; text-decoration: none; font-weight: 700;
  font-size: 13.5px; white-space: nowrap; letter-spacing: var(--mf-tracking-wide);
}
.announce-phone:hover { color: var(--mf-orange-200); }

.topbar {
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--mf-border); box-shadow: var(--mf-shadow-sm);
}
.topbar-main {
  display: flex; align-items: center; gap: 18px; padding: 0 24px;
  height: var(--mf-header-h);
  max-width: calc(var(--mf-container) + 48px); margin: 0 auto;
}
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand-img { height: 34px; display: block; }
.login-logo { width: 200px; margin-bottom: 18px; display: block; }

/* Header search — the single most important header element for trade buyers */
.head-search { flex: 1; display: flex; max-width: 560px; margin: 0 auto; }
.head-spacer { flex: 1; }
.head-search input {
  flex: 1; min-width: 0; padding: 9px 14px; font-size: 14px;
  border: 2px solid var(--mf-border-strong); border-right: none;
  border-radius: var(--mf-radius-md) 0 0 var(--mf-radius-md); background: #fff;
}
.head-search input:focus-visible { box-shadow: none; outline: none; border-color: var(--navy); }
.head-search-btn {
  background: var(--navy); color: #fff; border: 2px solid var(--navy);
  border-radius: 0 var(--mf-radius-md) var(--mf-radius-md) 0;
  padding: 0 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  text-transform: uppercase; letter-spacing: var(--mf-tracking-wide);
}
.head-search-btn:hover { background: var(--mf-navy-600); border-color: var(--mf-navy-600); }

.head-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }
.cart-link { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.badge {
  background: var(--orange); color: #fff; border-radius: 10px; padding: 1px 8px;
  font-size: 12px; margin-left: 2px;
}
/* Header buttons: identical fixed height so Cart / Log in / trade CTA sit on
   one line with a shared baseline (mismatched paddings had them stepping). */
.head-actions .btn-login, .head-actions .btn-trade-cta {
  display: inline-flex; align-items: center; height: 38px;
  margin: 0; padding: 0 16px; font-size: 13px; white-space: nowrap; line-height: 1;
}
.inline { display: inline; }
.btn-plain { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }

/* Dropdown menus (<details class="menu">): account menu + products mega menu */
details.menu { position: relative; }
details.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: normal;
  outline: none;  /* no browser focus box on mouse click - the open panel is the feedback */
}
/* keyboard navigation still gets a visible ring (body.kb-nav set on Tab) */
body.kb-nav details.menu > summary:focus { box-shadow: var(--mf-shadow-focus); }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: " ▾"; font-size: 10px; opacity: 0.7; }
.menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-lg); padding: 8px; min-width: 210px;
}
.menu-panel a {
  display: block; padding: 7px 12px; color: var(--text); text-decoration: none;
  font-size: 13.5px; border-radius: var(--mf-radius-sm);
}
.menu-panel a:hover { background: var(--mf-navy-50); color: var(--navy); }
.menu-caption {
  display: block; padding: 4px 12px 8px; font-size: 11.5px; color: var(--muted);
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.acct-summary { font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.acct-panel { right: 0; }
.acct-panel form { padding: 4px 12px 2px; border-top: 1px solid var(--line); margin-top: 6px; }

/* Primary nav row (navy) with the Products mega menu */
.site-nav {
  display: flex; align-items: stretch;
  padding: 0 max(24px, calc((100% - var(--mf-container)) / 2));
  background: var(--navy);
}
/* thin divider line between items */
.site-nav > * + * { border-left: 1px solid rgba(255,255,255,0.16); }
.site-nav > .nav-cta { border-left: none; }
.site-nav > a, .site-nav details.menu > summary, .site-nav .nav-drop > a {
  display: flex; align-items: center; padding: 0 16px; height: 42px;
  color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--mf-tracking-wide);
  border-bottom: 3px solid transparent;
}
.site-nav > a:hover, .site-nav details.menu > summary:hover,
.site-nav .nav-drop > a:hover { color: var(--mf-orange-200); }
.site-nav > a.active, .site-nav .nav-drop > a.active { border-bottom-color: var(--orange); color: #fff; }
/* Products: clickable label + hover/focus mega menu (replaces the old
   details-toggle Products + separate Catalogue link, 2026-08-07) */
/* .site-nav prefix out-ranks the later ".mega { position: static }" rule -
   the Products wrapper carries both classes */
.site-nav .nav-drop { display: flex; align-items: stretch; position: relative; }
/* flush under the nav (no hover-breaking gap), anchored like the old details */
.site-nav .nav-drop > .mega-panel { top: 100%; }
.site-nav .nav-group-panel { top: 100%; }
/* invisible hover bridge over any residual gap between the nav item and its
   panel - the pointer never leaves the menu subtree while travelling down,
   so hover-opened menus don't snap shut mid-journey */
.site-nav .nav-group-panel::before, .site-nav .mega-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-drop > a::after { content: " ▾"; font-size: 10px; opacity: 0.7; margin-left: 4px; }
.nav-drop > .mega-panel { display: none; }
.nav-drop:hover > .mega-panel, .nav-drop:focus-within > .mega-panel { display: block; }
.nav-drop:hover > a {
  background: rgba(255,255,255,0.14); border-bottom-color: var(--orange); color: #fff;
}
/* Quick order: standing CTA pinned to the right of the nav, in action orange */
.site-nav .nav-cta {
  margin-left: auto; background: var(--orange); color: #fff; font-weight: 800;
  border-bottom: 3px solid transparent;
}
.site-nav .nav-cta:hover { background: var(--mf-action-hover); color: #fff; }
.site-nav .nav-cta.active { border-bottom-color: #fff; }
/* Solutions dropdown: left-anchored, flush under its nav item — the default
   6px panel gap made hover-open menus close while the pointer crossed it */
.nav-group-panel { left: 0; right: auto; min-width: 250px; top: 100%; }
.nav-group-panel .menu-caption { border-bottom: 0; margin-bottom: 0; padding-top: 8px; text-transform: uppercase; letter-spacing: var(--mf-tracking-wide); font-weight: 800; }
.mega { position: static; }
.mega > summary { background: rgba(255,255,255,0.08); }
/* Open state stays in the navy bar - the panel below is signal enough that it
   is open, so the label just brightens and gets the orange underline the
   active nav item uses. .menu (not .mega) so every nav dropdown gets it -
   Industries & Services was missing the underline Products had. */
.site-nav details.menu[open] > summary,
.site-nav details.menu[open] > summary:hover {
  background: rgba(255,255,255,0.14); color: #fff;
  border-bottom-color: var(--orange);
}
.mega-panel {
  /* tracks the nav's centred content edge, not the viewport edge */
  left: max(24px, calc((100% - var(--mf-container)) / 2));
  right: auto; top: 100%; width: min(720px, calc(100vw - 48px));
  padding: 16px 18px;
}
.mega-list {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: 18px;
}
.mega-list a {
  display: block; padding: 5px 8px; font-size: 13.5px;
  break-inside: avoid;
}
.mega-all {
  display: inline-block; margin: 12px 8px 0; font-weight: 700; color: var(--orange) !important;
  font-size: 13px;
}

.banner { background: var(--orange); color: #fff; padding: 7px 18px; font-size: 13px; font-weight: 600; }
.staff-band {
  background: #2c2c2a; color: #f1efe8; padding: 7px 18px; font-size: 12.5px;
  letter-spacing: 0.3px; display: flex; gap: 10px; align-items: center; margin: -16px -16px 14px;
}
.staff-band strong { color: #fff; }
.cust-picker { position: relative; flex: 0 1 420px; }
.cust-picker input {
  width: 100%; padding: 7px 12px; font-size: 13px; border: none; border-radius: 4px;
  background: #444441; color: #fff;
}
.cust-picker input::placeholder { color: #b4b2a9; }
.cust-picker input:focus { outline: 2px solid var(--orange); background: #fff; color: var(--text); }
.cust-dd {
  display: none; position: absolute; top: 34px; left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); max-height: 340px; overflow-y: auto;
}
.cust-dd-label { padding: 7px 12px; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.cust-row-form { margin: 0; }
.cust-row {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid #f0f1f4; padding: 8px 12px;
  font-size: 13px; cursor: pointer; color: var(--text);
}
.cust-row:hover { background: #eef3fa; }
.cust-row .cust-name { flex: 1; }
.cust-warn { color: #a32d2d; font-size: 11px; }
.acting-chip {
  background: var(--orange); color: #fff; padding: 3px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600;
}
.staff-link { color: var(--navy); font-weight: 600; font-size: 13px; border-bottom: 2px solid #2c2c2a; }
.picker-wrap { max-width: 720px; margin: 30px auto; }
.picker-wrap h1 { font-size: 20px; color: var(--navy); }
.picker-wrap h2 { font-size: 13px; color: var(--muted); text-transform: uppercase; margin: 24px 0 8px; }
.picker-wrap input[type=search] {
  width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line);
  border-radius: 6px; margin-bottom: 12px;
}
.code-hit { color: #0c447c; background: #e6f1fb; font-size: 11px; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.qoh { font-weight: 700; }
.qoh-zero { color: #a32d2d; }
.sup-cell { white-space: nowrap; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.sup-cell.htmx-request { opacity: 0.4; }
.sup-line strong { color: var(--navy); }
.sup-status { color: #a32d2d; font-size: 11px; }
.btn-live {
  background: none; border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  font-size: 12px; padding: 0 5px; color: var(--navy);
}
.btn-live:hover { background: var(--navy); color: #fff; }
.supply { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.supply-stock { background: #e9f5e4; color: #2c5e1a; }
.supply-supplier { background: #e6f1fb; color: #0c447c; }
.supply-partial { background: #fdf3e0; color: #8a5a07; }
.supply-none { background: #fdebea; color: #8c2318; }
.check-note { margin: 0; padding: 7px 14px; font-size: 12.5px; background: #f4f7fb; border-bottom: 1px solid var(--line); color: var(--navy); }
.staff-cart > summary { background: #2c2c2a; }
.staff-cart > summary:hover { background: #444441; }
.admin-link { font-weight: 600; font-size: 13px; color: var(--orange); }
.cutoff { font-size: 12px; }

.admin-nav { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 2px solid var(--navy); }
.admin-nav a {
  padding: 7px 14px; color: var(--navy); text-decoration: none; font-size: 13px;
  font-weight: 600; border-radius: 5px 5px 0 0;
}
.admin-nav a.sel { background: var(--navy); color: #fff; }
.admin-wrap h1 { font-size: 20px; color: var(--navy); margin: 0 0 12px; }
.admin-create {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin-bottom: 14px;
}
.admin-create input[type=email], .admin-create input[type=text] {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; width: 210px;
}
.admin-create .check { font-size: 13px; color: var(--muted); }
.admin-create .btn-primary { margin: 0; padding: 8px 14px; }
.reset-form input { width: 130px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.row-disabled td { opacity: 0.55; }
.settings-form label { display: block; font-size: 13px; color: var(--navy); font-weight: 600; margin: 14px 0 0; }
.settings-form input { width: 100%; padding: 8px; margin: 4px 0 2px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; font-weight: 400; }
.settings-form .muted { font-weight: 400; }
.settings-form .btn-primary { margin-top: 16px; }

.flash { padding: 9px 18px; font-size: 13px; }
.flash-error { background: #fdebea; color: #8c2318; }
.flash-success { background: #e9f5e4; color: #2c5e1a; }
/* =======================================================================
   FOOTER — full navigation footer (navy)
   ======================================================================= */
.footer { background: var(--mf-bg-navy-deep); color: #c9d1e2; margin-top: 40px; }
.footer a { color: #c9d1e2; text-decoration: none; font-size: 13px; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 28px;
  margin: 0 auto; padding: 34px 32px 20px;
  max-width: calc(var(--mf-container) + 64px);
}
.footer-col h2 {
  font-family: var(--mf-font-sans); font-weight: 800; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: var(--mf-tracking-widest);
  color: #fff; margin: 0 0 10px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 6px; }
.footer-cats { columns: 2; column-gap: 20px; }
.footer-cats li { break-inside: avoid; }
.footer-contact { margin: 0; line-height: 1.8; font-size: 13px; }
.footer-contact strong { color: #fff; font-size: 15px; }
.footer-base {
  border-top: 1px solid rgba(255,255,255,0.12); text-align: center;
  padding: 14px 24px; font-size: 12px; color: #8d97ad;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* narrow phones: one footer column (two cols of category links overflowed) */
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.login-wrap { max-width: 360px; margin: 60px auto; background: #fff; border: 1px solid var(--line); border-radius: var(--mf-radius-lg); padding: 28px; box-shadow: var(--mf-shadow-md); }
.login-wrap h1 { margin: 0 0 4px; font-size: 20px; color: var(--navy); }
.login-form label { display: block; font-size: 13px; margin: 14px 0 0; color: var(--muted); }
.login-form input { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.btn-primary {
  background: var(--mf-action); color: var(--mf-text-on-orange);
  border: 2px solid transparent; border-radius: var(--mf-radius-md);
  padding: 9px 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer; margin-top: 18px;
}
.btn-primary:hover { background: var(--mf-action-hover); }
.btn-primary:active { background: var(--mf-action-active); transform: translateY(1px); }
.btn-secondary {
  background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: var(--mf-radius-md);
  padding: 7px 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer;
}
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-secondary:active { background: var(--mf-navy-800); transform: translateY(1px); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.muted { color: var(--muted); font-size: 13px; }
a.btn-primary, a.btn-secondary { text-decoration: none; display: inline-block; line-height: 1.2; }
.btn-login { padding: 6px 16px; margin: 0; }

.cart-panel { background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 14px; }
.cart-panel > summary {
  background: var(--navy); color: #fff; padding: 8px 14px; font-size: 13px;
  border-radius: 5px 5px 0 0; letter-spacing: 0.4px;
}
.cart-panel:not([open]) > summary { border-radius: 5px; }
.cart-panel > summary:hover { color: #fff; background: #24437d; }
.cart-panel[open] > summary { margin-bottom: 0; }
.cart-panel-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.cart-panel-bar input, .cart-panel-bar select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px;
}
.po-input { width: 190px; }
.note-input { width: 280px; }
.grow { flex: 1; }
.cart-panel-bar .btn-primary { margin: 0; padding: 7px 14px; }
.cart-table { border: none; }
.cart-empty { margin: 0; padding: 12px 14px; }
.cart-caveat { margin: 0; padding: 8px 14px; font-size: 12px; }
.price { white-space: nowrap; }
.per { color: var(--muted); font-size: 11px; }
.total-row td { font-weight: 700; background: #f4f7fb; border-top: 2px solid var(--navy); }
.breaks-table td { padding: 2px 10px 2px 0; font-size: 13px; }
.star {
  background: none; border: none; cursor: pointer; font-size: 22px;
  color: #b9c0cb; padding: 0 2px; line-height: 1;
}
.star:hover { color: var(--orange); }
.star.on { color: var(--orange); }
.acct-wrap h1 { font-size: 20px; color: var(--navy); margin: 0 0 4px; }
.acct-section-head { display: flex; gap: 12px; align-items: baseline; margin: 22px 0 8px; }
.acct-section-head h2 { font-size: 15px; color: var(--navy); margin: 0; text-transform: uppercase; letter-spacing: 0.4px; }
.htmx-indicator { opacity: 0; transition: opacity 200ms; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.subs-wrap { max-width: 1100px; }
.subs-wrap h1 { font-size: 20px; color: var(--navy); margin: 0 0 12px; }
.sub-row { cursor: pointer; }

.catalogue-layout { display: flex; gap: 14px; align-items: flex-start; }
.sidebar { width: 200px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
summary {
  font-size: 12px; text-transform: uppercase; color: var(--navy); font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer; padding: 2px 0; user-select: none;
}
summary:hover { color: var(--orange); }
/* :not(.menu) — the header dropdowns are also <details>, and this accordion
   spacing was growing the navy nav bar 6px every time a menu opened */
details[open]:not(.menu) > summary { margin-bottom: 6px; }
.cat-list, .sub-list, .facet-group ul { list-style: none; margin: 0; padding: 0; }
.cat-list a, .sub-list a, .facet-group a {
  display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px;
  color: var(--text); text-decoration: none; font-size: 13px; border-radius: 3px; cursor: pointer;
}
.cat-list a:hover, .sub-list a:hover, .facet-group a:hover { background: #eef1f6; }
.cat-list a.sel, .sub-list a.sel { background: var(--navy); color: #fff; }
/* selected category shows a caret hinting "click again to collapse" */
.cat-list > li > a.sel::after { content: "▾"; margin-left: auto; font-size: 10px; opacity: 0.8; }
.sub-list { margin: 2px 0 6px 14px; border-left: 2px solid var(--line); padding-left: 4px; }
/* plain right-aligned grey numbers (option B, Hudson 2026-07-24) */
.count {
  color: #8a92a6; font-size: 12px; font-weight: 400; align-self: center;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.cat-list a.sel .count, .sub-list a.sel .count { color: #c3cbdd; }
.facet-group a.sel .count { font-weight: 700; }

.main-col { flex: 1; min-width: 0; }
#results { min-height: 72vh; }
.idle-prompt {
  min-height: 72vh; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px; color: var(--muted); font-size: 14px;
  background: #fff; border: 1px dashed var(--line); border-radius: 6px; margin-top: 12px;
}
.idle-prompt a { color: var(--navy); font-weight: 600; }
.search-bar input {
  width: 100%; padding: 10px 14px; font-size: 15px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff;
}
.search-bar input:focus { outline: 2px solid var(--navy); }

.results-layout { display: flex; gap: 14px; margin-top: 12px; align-items: flex-start; }
.facets { width: 180px; flex-shrink: 0; }
.facet-group { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; margin-bottom: 8px; }
.facet-group a.sel { font-weight: 600; }
.facet-group .box { font-size: 12px; }
.chips { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--navy); color: #fff; font-size: 12px; padding: 3px 9px;
  border-radius: 12px; text-decoration: none; cursor: pointer;
}

.table-col { flex: 1; min-width: 0; overflow-x: auto; }
.items-table td.desc { white-space: nowrap; }
.result-meta { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.items-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.items-table th {
  text-align: left; background: var(--navy); color: #fff; padding: 7px 9px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.items-table td { padding: 6px 9px; border-top: 1px solid var(--line); vertical-align: middle; }
.items-table tbody tr:hover { background: #f4f7fb; }
.mono { font-family: Consolas, monospace; font-size: 12px; white-space: nowrap; }
.forgot-link { font-family: var(--mf-font-sans); font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--mf-tracking-widest); color: var(--navy);
  text-decoration: none; }
.forgot-link:hover { color: #EC4E2A; text-decoration: none; }
.num { text-align: right; }
.empty { text-align: center; color: var(--muted); padding: 24px; }

.band { padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.band-in_stock { background: #e9f5e4; color: #2c5e1a; }
.band-low { background: #fdf3e0; color: #8a5a07; }
.band-order_in { background: #e6f1fb; color: #0c447c; }
.band-order_far { background: #fdf2e7; color: #8a4d1c; }
.band-call_us { background: #eceef1; color: #555c66; }

.qty-input { width: 64px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.btn-add {
  background: var(--mf-action); color: var(--mf-text-on-orange); border: 2px solid transparent;
  border-radius: var(--mf-radius-md); padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.btn-add:hover { background: var(--mf-action-hover); }
.btn-add:active { background: var(--mf-action-active); transform: translateY(1px); }
.btn-add:disabled, .qty-input:disabled { opacity: 0.45; cursor: not-allowed; }
tr.item-row { cursor: pointer; }
tr.item-row.open { background: #eef3fa; }
tr.item-row.open td { border-bottom: none; }

.thumb-cell { width: 34px; padding: 2px 4px !important; }
.thumb { width: 30px; height: 30px; object-fit: contain; display: block; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.detail-img img { max-width: 180px; max-height: 180px; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 4px; }
.detail-row td { background: #f8fafc; }
.item-detail { padding: 8px 6px; }
.detail-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.detail-head .close { margin-left: auto; color: var(--muted); }
.detail-grid { display: flex; gap: 48px; }
.detail-grid h3 { font-size: 12px; text-transform: uppercase; color: var(--navy); margin: 0 0 6px; }
.spec-list { margin: 0; padding-left: 18px; font-size: 13px; }
.spec-list li { margin-bottom: 2px; }

.cat-blurb { margin: 10px 2px 0; font-size: 13px; color: var(--muted); max-width: 860px; line-height: 1.45; }

/* Feedback form */
.fb-form label { display: block; font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: var(--mf-tracking-wide); margin: 14px 0 4px; }
.fb-form select, .fb-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: #fff; }
.fb-form textarea { resize: vertical; }
.fb-form button { margin-top: 14px; }
.fb-opt { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--muted); }
.fb-scale { display: flex; gap: 6px; }
.fb-scale input { position: absolute; opacity: 0; width: 0; }
.fb-scale label {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 34px; margin: 0; border: 1px solid var(--line);
  border-radius: 4px; background: #fff; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: normal;
}
.fb-scale label:hover { border-color: var(--navy); }
.fb-scale input:checked + label { background: var(--navy); border-color: var(--navy); color: #fff; }
.fb-scale input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 1px; }

/* Marketing pages (homepage / about / contact — the WordPress replacement) */
/* Full-bleed: -16px pulls the band out of main's padding on every edge */
.mk-hero { background: linear-gradient(115deg, var(--navy) 0 88%, var(--orange) 88%); color: #fff; padding: 64px 40px; margin: -16px -16px 0; }
/* Homepage hero: team photo on the right, its left and right 10% masked so
   the picture fades from fully opaque to nothing into the navy. Light navy
   tint keeps the brand cast; the orange diagonal paints above via ::after. */
.mk-hero-photo { position: relative; overflow: hidden; background: var(--navy); }
.mk-hero-photo::before {
  /* right offset keeps the whole team clear of the orange diagonal (::after
     paints over the last ~12% of the hero - at right:0 it swallowed the
     two rightmost people of the wider 2026-08 team photo) */
  content: ""; position: absolute; top: -9%; bottom: -9%; right: 8%;
  aspect-ratio: 846 / 653; z-index: 0;
  background:
    linear-gradient(rgba(32,51,93,0.28), rgba(32,51,93,0.28)),
    url("brand/team-hero-2.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 10%, #000 90%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 10%, #000 90%, rgba(0,0,0,0) 100%);
}
.mk-hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(0,0,0,0) 0 88%, var(--orange) 88%);
}
.mk-hero-photo .mk-hero-inner { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* photo behind text hurts contrast on small screens - navy flag only */
  .mk-hero-photo::before { display: none; }
}
.mk-hero-inner { margin: 0 auto; padding: 0 8px; max-width: var(--mf-container); }
.mk-hero h1 { font-family: var(--mf-font-display); text-transform: uppercase; font-size: 40px; margin: 0 0 12px; letter-spacing: 0.02em; }
.mk-hero p { font-size: 17px; max-width: 620px; margin: 0 0 22px; opacity: 0.92; line-height: 1.5; }
.mk-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
/* buttons inside a CTA row share one height/baseline (kills .btn-primary's
   default margin-top and the primary/secondary padding mismatch) */
.mk-cta-row > :not(.mk-cta) {
  margin: 0; padding: 10px 18px; display: inline-flex; align-items: center;
}
/* margin: 0 kills .btn-primary's default margin-top inside CTA rows - it was
   pushing "Shop products" lower than its neighbour and unbalancing the pair */
.mk-cta { font-size: 15px; padding: 12px 22px; margin: 0; }
/* Marketing sections centre on the brand container (supersedes the 2026-07-31
   full-bleed call — bands keep full-width backgrounds, content is clamped). */
.mk-section { margin: 0 auto; padding: 36px 32px 8px; max-width: calc(var(--mf-container) + 64px); }
.mk-section h2 { font-family: var(--mf-font-display); text-transform: uppercase; color: var(--navy); font-size: 22px; margin: 0 0 6px; }
/* Orange accent bar under top-level section headings — rhythm marker between
   sections (reviews h2 is nested in its flex head, hence the extra selector) */
.mk-section > h2::after, .mk-reviews-head h2::after {
  content: ""; display: block; width: 46px; height: 4px;
  background: var(--orange); border-radius: var(--mf-radius-sm); margin: 10px 0 4px;
}
/* Small orange eyebrow label above section headings */
.mk-eyebrow {
  margin: 0 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-widest); color: var(--orange);
}
/* Full-bleed background bands to break up the page flow. Horizontal padding =
   section's 32px + main's 16px so content stays aligned with plain sections. */
.mk-band {
  margin: 14px -16px; padding: 40px max(48px, calc((100% - var(--mf-container)) / 2)) 34px;
  background: var(--mf-bg); max-width: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.mk-band-navy {
  margin: 14px -16px; padding: 46px max(48px, calc((100% - var(--mf-container)) / 2)) 42px;
  background: linear-gradient(115deg, var(--mf-navy-800) 0 90%, var(--orange) 90%);
  color: #dbe2ef; max-width: none;
}
.mk-band-navy h2 { color: #fff; }
.mk-band-navy .mk-eyebrow { color: var(--mf-orange-400); }
.mk-band-navy > h2::after { background: var(--mf-orange-400); }
.mk-sub { color: var(--muted); margin: 0 0 14px; }
.mk-band-navy .mk-sub { color: #b9c3d8; }
/* Homepage category tiles: larger than the catalogue's dense grid, pinned to
   two rows (13 + 12 of the 25 categories) on desktop. Below 1280px the fixed
   13-up would crush the tiles, so it reverts to an auto-fill flow. */
/* Doubled class beats the later .tile-grid base rule at equal cascade order */
.tile-grid.mk-tiles { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.mk-tiles .cat-tile { padding: 14px 5px 12px; gap: 8px; }
/* image box is a fixed share of the tile so it scales with the grid */
.mk-tiles .cat-tile img, .mk-tiles .cat-tile .tile-ph {
  width: 66%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
}
.mk-tiles .cat-tile .tile-ph { display: flex; align-items: center; justify-content: center; }
.mk-tiles .cat-tile .tile-name { font-size: 11px; }
/* must out-rank the 11px rule above: words are never broken, so names with a
   long word (MANUFACTURED, PETROCHEMICAL) shrink to fit instead */
.mk-tiles .cat-tile .tile-name-tight { font-size: 8.5px; letter-spacing: 0; }
.mk-tiles .tile-all { border-style: dashed; }
.mk-tiles .tile-all .tile-ph { color: var(--orange); font-size: 28px; font-weight: 400; }
@media (min-width: 1000px) {
  .tile-grid.mk-tiles { grid-template-columns: repeat(13, minmax(0, 1fr)); }
}
.mk-why { padding-bottom: 24px; }
.mk-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 14px; }
.mk-point h3 { color: var(--orange); font-size: 14px; text-transform: uppercase; margin: 0 0 6px; }
.mk-point p { margin: 0; font-size: 14px; line-height: 1.5; }
/* On the navy band the points get big Monument numerals (display face is
   safe here — 26px is above its 20px legibility floor) */
.mk-band-navy .mk-points { counter-reset: mk-pt; }
.mk-band-navy .mk-point::before {
  counter-increment: mk-pt; content: "0" counter(mk-pt);
  display: block; font-family: var(--mf-font-display); font-weight: 700;
  font-size: 26px; line-height: 1; color: rgba(255,255,255,0.30);
  margin-bottom: 10px;
}
.mk-band-navy .mk-point h3 { color: var(--mf-orange-400); }
.mk-band-navy .mk-point p { color: #c9d1e2; }
.mk-about-teaser { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding-bottom: 42px; }
.mk-about-teaser p { line-height: 1.55; }
.mk-contact-card { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; background: #f8fafc; height: fit-content; }
.mk-contact-card h3 { margin: 0 0 8px; color: var(--navy); text-transform: uppercase; font-size: 14px; }
.mk-page { max-width: 860px; margin: 0 auto; padding: 26px 24px 46px; }
.mk-page h1 { font-family: var(--mf-font-display); text-transform: uppercase; color: var(--navy); font-size: 28px; }
.mk-page h2 { color: var(--navy); font-size: 19px; margin-top: 28px; }
.mk-page p { line-height: 1.6; }
/* Service page: key points with an image to their right */
.svc-how-media {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px; align-items: center;
}
.svc-how-img {
  width: 100%; border-radius: var(--mf-radius-lg);
  border: 1px solid var(--line); border-top: 3px solid var(--orange);
  background: #fff; padding: 8px; box-shadow: var(--mf-shadow-sm);
}
@media (max-width: 900px) { .svc-how-media { grid-template-columns: 1fr; } }
/* Photo gallery under a service page's key points */
.svc-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 24px;
}
.svc-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--mf-radius-lg); border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  background: #fff; padding: 8px; box-shadow: var(--mf-shadow-sm);
  cursor: zoom-in;
}
.svc-how-img { cursor: zoom-in; }
/* Click-to-enlarge overlay */
.img-lightbox {
  position: fixed; inset: 0; z-index: 300; cursor: zoom-out;
  background: rgba(19, 31, 57, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
}
.img-lightbox img {
  max-width: 100%; max-height: 100%; border-radius: var(--mf-radius-md);
  box-shadow: var(--mf-shadow-lg); background: #fff;
}
@media (max-width: 700px) { .svc-gallery { grid-template-columns: repeat(2, 1fr); } }
/* Media column: side image with extra photos tucked beneath it */
.svc-media-col { display: grid; gap: 12px; align-content: start; }
.svc-gallery-side { grid-template-columns: 1fr 1fr; margin-top: 0; }

/* About-page: intro lede, industry chips, two-column checklist */
.mk-lede { font-size: 15.5px; line-height: 1.6; max-width: 780px; margin: 0; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mk-chips span {
  padding: 9px 16px; background: var(--mf-navy-50); color: var(--navy);
  border: 1px solid var(--mf-navy-100); border-radius: var(--mf-radius-pill);
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-wide);
}
.mk-cols2 { columns: 2; column-gap: 40px; max-width: 900px; }
.mk-cols2 li { break-inside: avoid; }
@media (max-width: 700px) { .mk-cols2 { columns: 1; } }

/* About-page history timeline: orange nodes on a vertical rail, text beside
   the era's photos */
.mk-timeline { position: relative; margin-top: 20px; }
.mk-timeline::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 3px; background: var(--mf-navy-100);
}
.mk-tl-entry {
  position: relative; padding: 0 0 38px 40px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 26px; align-items: center;
}
.mk-tl-entry:last-child { padding-bottom: 6px; }
.mk-tl-entry::before {
  content: ""; position: absolute; left: 2px;
  /* centred on the content row (entry height minus its 38px bottom padding),
     so the dot sits beside the text instead of at the entry's top edge */
  top: calc((100% - 38px) / 2 - 8px);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--orange);
}
.mk-tl-entry:last-child::before { top: calc((100% - 6px) / 2 - 8px); }
/* Monument for the era marker (21px - above the display face's 20px floor) */
.mk-tl-year {
  margin: 0 0 8px; font-family: var(--mf-font-display); text-transform: uppercase;
  font-size: 21px; color: var(--navy); letter-spacing: 0.02em;
}
.mk-tl-year span {
  display: block; font-family: var(--mf-font-sans); font-weight: 800;
  font-size: 13px; color: var(--orange); letter-spacing: var(--mf-tracking-wide);
  margin-top: 2px;
}
.mk-tl-text p { margin: 0; line-height: 1.6; }
/* Each era's photos grouped in one framed card: white mat, orange top edge */
.mk-tl-imgs {
  display: grid; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--mf-radius-lg); padding: 10px;
  box-shadow: var(--mf-shadow-sm);
}
.mk-tl-imgs img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--mf-radius-sm); border: 1px solid var(--line); background: #fff;
}
@media (max-width: 800px) {
  .mk-tl-entry { grid-template-columns: 1fr; gap: 14px; }
}

.mk-faq { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; padding: 10px 14px; background: #fff; }
.mk-faq summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.mk-faq p { margin: 10px 0 4px; }
.mk-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; margin-top: 10px; }
/* Full-width map band on the contact page (scroll-lazy; JS-API styled map
   with a key, keyless embed without). Negative margins bleed through main's
   16px padding so the map runs edge to edge like the current site. */
.map-band {
  margin: 32px -16px -16px; background: var(--mf-navy-800); min-height: 480px;
}
.contact-map, .map-frame-full {
  width: 100%; height: 480px; border: 0; display: block;
}
.mk-enquiry input[type=text], .mk-enquiry input[type=email] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: #fff; }

/* --- homepage: hero kicker, trust strip, industries, features, trade card --- */
.mk-kicker {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-widest); color: var(--mf-orange-400);
  margin: 0 0 10px;
}
.mk-hero h1 { line-height: var(--mf-leading-tight); font-size: 46px; }
/* Solid white so it stands off the navy hero (the transparent version read
   as part of the background - Hudson 2026-07-31) */
.btn-hero-secondary {
  background: #fff; color: var(--navy); border: 2px solid #fff;
  border-radius: var(--mf-radius-md); font-weight: 700; text-decoration: none;
  display: inline-block; line-height: 1.2;
}
.btn-hero-secondary:hover { background: var(--mf-navy-50); border-color: var(--mf-navy-50); }
/* Third-tier hero CTA: outline on the navy, filling white on hover */
.btn-hero-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.75);
  border-radius: var(--mf-radius-md); font-weight: 700; text-decoration: none;
  display: inline-block; line-height: 1.2;
}
.btn-hero-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.mk-trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--mf-navy-900); color: #dbe2ef;
  margin: 0 -16px;
  padding: 0 max(0px, calc((100% - var(--mf-container)) / 2));
}
.mk-trust-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; font-size: 13px; font-weight: 600; line-height: 1.4;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.mk-trust-item svg {
  width: 26px; height: 26px; flex-shrink: 0; color: var(--orange);
}
/* auto-fit alone leaves an awkward 3+1 at tablet widths — pin 2x2 there,
   single column on phones */
@media (max-width: 900px) { .mk-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mk-trust { grid-template-columns: 1fr; } }
.mk-industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.mk-industry {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy);
  border-radius: var(--mf-radius-lg); padding: 16px 18px;
}
/* Small headings use the SANS face, not Monument: the extended display font
   is illegible below ~16px (display type is for hero moments only). */
.mk-industry h3 {
  font-family: var(--mf-font-sans); font-weight: 800; font-size: 14px;
  text-transform: uppercase; color: var(--navy); margin: 0 0 8px;
  letter-spacing: var(--mf-tracking-wide);
}
.mk-industry p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
/* Full-width banner photo on industry click-through pages: fixed 4:1 crop
   so the framing scales with the page instead of changing shape */
.mk-page-banner {
  display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover;
  border-radius: var(--mf-radius-lg); border: 1px solid var(--line);
  margin-top: 18px;
}
/* Scene image atop each industry card (placeholder SVGs today; Hudson's
   approved photos drop in at the same paths and this styling holds) */
.mk-industry-photo {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--mf-radius-md); margin-bottom: 12px;
  border: 1px solid var(--line); background: var(--mf-navy-50);
}
.mk-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mk-feature-text {
  background: #fff; border: 1px solid var(--line); border-radius: var(--mf-radius-lg);
  padding: 22px 24px; box-shadow: var(--mf-shadow-sm);
}
.mk-feature-text h2 { font-size: 20px; }
.mk-feature-text p { line-height: 1.55; font-size: 14px; }
/* Feature card with a photo beside the text */
.mk-feature-with-img { display: flex; gap: 20px; align-items: center; }
.mk-feature-with-img > div { flex: 1; min-width: 0; }
.mk-feature-img {
  /* proportional to the card, fixed 3:4 crop - scales in step with the text */
  width: 32%; min-width: 140px; max-width: 230px;
  aspect-ratio: 3 / 4; align-self: center; flex-shrink: 0; object-fit: cover;
  border-radius: var(--mf-radius-md); border: 1px solid var(--line);
}
@media (max-width: 600px) {
  .mk-feature-with-img { flex-direction: column; align-items: stretch; }
  .mk-feature-img { width: 100%; max-height: 260px; object-position: 50% 20%; }
}
.mk-trade-card {
  display: flex; gap: 28px; align-items: center; justify-content: space-between;
  background: linear-gradient(115deg, var(--navy) 0 88%, var(--orange) 88%);
  color: #fff; border-radius: var(--mf-radius-lg); padding: 26px 30px; flex-wrap: wrap;
}
.mk-trade-card h2 { color: #fff; font-family: var(--mf-font-display); text-transform: uppercase; font-size: 20px; margin: 0 0 8px; }
.mk-trade-card p { margin: 0; max-width: 640px; line-height: 1.5; opacity: 0.94; }
/* Navy utility band stacked straight onto the footer (-56px bottom swallows
   main's 16px padding + the footer's 40px margin) */
.mk-utility {
  display: flex; gap: 8px 28px; flex-wrap: wrap; justify-content: center;
  padding: 18px 24px; margin: 36px -16px -56px;
  background: var(--mf-navy-800); border-top: 2px solid var(--orange);
  color: #b9c3d8; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--mf-tracking-wide);
}

@media (max-width: 800px) {
  .mk-about-teaser, .mk-contact-grid, .mk-feature { grid-template-columns: 1fr; }
  .mk-hero h1 { font-size: 32px; }
  .mk-hero { padding: 48px 24px; }
  .mk-band, .mk-band-navy { padding-left: 24px; padding-right: 24px; }
}

/* Standalone item page (direct link / search-engine landing) */
.crumbs { margin: 10px 2px 6px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--navy); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.item-page h1 { font-size: 20px; margin: 4px 0 2px; color: var(--navy); }
.item-page .item-no-line { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.item-page .item-detail { border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; padding: 14px 16px; }
.item-page-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.items-table .item-link { color: inherit; text-decoration: none; border-bottom: 1px dotted #9aa7c0; }
.items-table .item-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

.pager { display: flex; gap: 14px; align-items: center; padding: 10px 2px; font-size: 13px; }
.pager a { color: var(--navy); cursor: pointer; text-decoration: none; font-weight: 600; }

.qo-layout { display: flex; gap: 24px; align-items: flex-start; max-width: 1300px; }
.qo-input { width: 380px; flex-shrink: 0; }
.qo-input h1 { font-size: 20px; color: var(--navy); margin: 0 0 4px; }
.qo-input textarea {
  width: 100%; font: 13px/1.5 Consolas, monospace; padding: 10px;
  border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; resize: vertical;
}
.qo-results { flex: 1; min-width: 0; padding-top: 6px; }
.qo-h2 { font-size: 15px; color: var(--navy); margin: 18px 0 8px; }
.ok-mark { color: #2c5e1a; font-weight: 700; }
.bad-mark { color: #a32d2d; font-weight: 700; }
.btn-suggest {
  background: #fff; border: 1px solid var(--navy); color: var(--navy); border-radius: 4px;
  padding: 3px 10px; margin-right: 6px; cursor: pointer; font-size: 12px; font-family: Consolas, monospace;
}
.btn-suggest:hover { background: var(--navy); color: #fff; }
.qo-done { background: #e9f5e4; color: #2c5e1a; padding: 12px 16px; border-radius: 6px; font-size: 14px; }
.qo-results .btn-primary { margin-top: 12px; }

.cart-layout { display: flex; gap: 24px; align-items: flex-start; max-width: 1300px; }
.cart-main { flex: 1; min-width: 0; }
.cart-main h1 { font-size: 20px; color: var(--navy); margin: 0 0 12px; }
.cart-side { width: 300px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.cart-side h2 { font-size: 14px; color: var(--navy); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.cart-side label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.cart-side input[type=text], .cart-side select, .cart-side textarea {
  width: 100%; padding: 7px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 4px; font-size: 13px; font-family: inherit;
}
.cart-side .btn-primary { width: 100%; margin-top: 14px; }
.cart-actions { margin-top: 10px; }
.btn-plain.remove { color: #a32d2d; font-size: 13px; }

/* Credit application */
.ca-wrap { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--mf-radius-lg); padding: 28px 34px; box-shadow: var(--mf-shadow-sm); }
.ca-wrap h1 { font-family: var(--mf-font-display); text-transform: uppercase;
  letter-spacing: var(--mf-tracking-tight); color: var(--mf-text-strong); font-size: 22px; margin: 0 0 6px; }
.ca-form h2 { font-size: 13px; text-transform: uppercase; letter-spacing: var(--mf-tracking-widest);
  color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: 5px; margin: 26px 0 12px; }
.ca-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 16px; }
.ca-grid label, .ca-form > label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ca-grid input, .ca-grid select { width: 100%; padding: 7px 9px; margin-top: 3px;
  border: 1px solid var(--line); border-radius: var(--mf-radius-md); font-size: 13px; font-weight: 400; }
.ca-wide { grid-column: span 2; }
.ca-person { margin-bottom: 8px; }
.ca-radios { display: flex; gap: 20px; margin: 6px 0 14px; }
.ca-radio { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ca-check { display: block; font-size: 13px; margin: 12px 0; color: var(--text); }
.ca-terms { max-height: 300px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--mf-radius-md); padding: 12px 16px; font-size: 12px; color: var(--mf-steel-700);
  background: var(--mf-steel-50); }
.ca-terms ol { padding-left: 20px; } .ca-terms li { margin-bottom: 8px; }
.sig-wrap { margin: 14px 0; }
.sig-label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.sig-pad {
  display: block; width: 440px; max-width: 100%; height: 130px; touch-action: none;
  background: #fff; border: 1px dashed var(--mf-border-strong); border-radius: var(--mf-radius-md);
  cursor: crosshair;
}
.sig-pad:hover { border-color: var(--navy); }
.sig-clear { padding: 2px 0; font-size: 12px; }
.sig-img { max-width: 320px; max-height: 110px; border: 1px solid var(--line); border-radius: var(--mf-radius-md); background: #fff; padding: 4px; display: block; }
@media (max-width: 800px) { .ca-grid { grid-template-columns: 1fr; } .ca-wide { grid-column: span 1; } }

/* Invoices & statement */
.page-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .stmt-btn { margin: 0 0 0 auto; }
@media print { .stmt-btn { display: none; } }
.stmt-cards { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; }
.stmt-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--mf-radius-lg);
  padding: 12px 18px; min-width: 128px; box-shadow: var(--mf-shadow-sm);
}
.stmt-label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-widest); color: var(--mf-text-faint); margin-bottom: 4px;
}
.stmt-value { font-family: var(--mf-font-display); font-size: 19px; color: var(--mf-text-strong); }
.stmt-bad { border-color: var(--mf-orange-200); background: var(--mf-orange-50); }
.stmt-bad .stmt-value { color: var(--mf-orange-700); }
.pdf-link { color: var(--navy); font-weight: 700; font-size: 12px; text-decoration: none; }
.pdf-link:hover { color: var(--orange); }

@media print {
  .topbar, .footer, .flash, .banner, .announce, .skip-link { display: none !important; }
  body { background: #fff; }
}

@media (max-width: 1000px) {
  .catalogue-layout, .results-layout { flex-direction: column; }
  .sidebar, .facets { width: 100%; }
  /* Pin every level of the stacked flex chain to the viewport: without this
     the results table's nowrap cells set the intrinsic width and stretch the
     whole page sideways instead of scrolling inside .table-col. */
  .main-col, .results-layout, .table-col { width: 100%; max-width: 100%; }
  .items-table td.desc { white-space: normal; }
}

/* Small screens: fixed-width side panels stack instead of squeezing */
@media (max-width: 800px) {
  .qo-layout, .cart-layout { flex-direction: column; }
  .qo-input, .cart-side { width: 100%; }
  .detail-grid { flex-wrap: wrap; gap: 24px; }
}

/* Responsive header: search drops to its own row, nav scrolls sideways */
@media (max-width: 900px) {
  .topbar-main { flex-wrap: wrap; height: auto; padding: 10px 16px; row-gap: 10px; }
  .head-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .head-spacer { display: none; }
  .head-actions { margin-left: auto; }
  .btn-trade-cta { padding: 7px 10px; font-size: 12px; }
  .site-nav { overflow-x: auto; padding: 0 10px; }
  .site-nav > a, .site-nav details.menu > summary { padding: 0 10px; white-space: nowrap; }
  .announce { padding: 4px 14px; gap: 10px; }
  .announce-msg { font-size: 11px; }
  .mega-panel { left: 8px; width: calc(100vw - 16px); }
  .mega-list { columns: 2; }
}

/* --- category tiles (visual browse grid, trade-catalogue style) --- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin: 12px 0 14px; }
.cat-tile { background: #fff; border: 1px solid #dfe3ea; border-radius: 6px;
  padding: 8px 6px 7px; text-align: center; cursor: pointer; text-decoration: none;
  color: #1B3668; display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden;
  transition: border-color .12s, box-shadow .12s; }
.cat-tile:hover { border-color: #EC4E2A; box-shadow: 0 2px 6px rgba(27,54,104,.14);
  text-decoration: none; }
.cat-tile img { height: 42px; width: auto; max-width: 92%; object-fit: contain; }
.cat-tile .tile-ph { height: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #c6cddc; }
.cat-tile .tile-name { font-size: 10px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .2px; max-width: 100%; }
/* Names whose longest word can't fit the narrow homepage tiles (MANUFACTURED,
   PETROCHEMICAL) drop a size instead of breaking the word (flagged in the
   template by word length) */
.cat-tile .tile-name-tight { font-size: 8.5px; letter-spacing: 0; }
.tile-back { border-style: dashed; color: #7a8299; }

/* --- attribute filter tiles (sub-category level) --- */
.attr-tabs { margin: 0 0 12px; }
.attr-tab-bar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid #dfe3ea;
  margin-bottom: 10px; }
.attr-tab { background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700;
  color: #7a8299; cursor: pointer; }
.attr-tab.active { color: #1B3668; border-bottom-color: #EC4E2A; }
.attr-tab .count { font-weight: 400; font-size: 11px; }
.attr-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.attr-tiles.hidden { display: none; }
.attr-tile { background: #fff; border: 1px solid #dfe3ea; border-radius: 6px;
  padding: 8px 12px; text-align: center; cursor: pointer; text-decoration: none;
  color: #1B3668; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 86px; transition: border-color .12s, box-shadow .12s; }
.attr-tile:hover { border-color: #EC4E2A; box-shadow: 0 2px 6px rgba(27,54,104,.14);
  text-decoration: none; }
.attr-tile .attr-val { font-size: 12px; font-weight: 700; line-height: 1.2; }
.attr-tile .tile-count { font-size: 11px; color: #7a8299; }
.attr-tile.sel { background: #1B3668; border-color: #1B3668; color: #fff; }
.attr-tile.sel .tile-count { color: #b9c4dd; }

/* =======================================================================
   PRODUCT DISCOVERY EXTRAS — header typeahead, sort, sibling sizes, QO CSV
   ======================================================================= */
.head-search { position: relative; }
.suggest-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 95;
}
.suggest-list {
  list-style: none; margin: 0; padding: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-lg); max-height: 420px; overflow-y: auto;
}
.suggest-list a {
  display: block; padding: 7px 10px; font-size: 13px; color: var(--text);
  text-decoration: none; border-radius: var(--mf-radius-sm);
}
.suggest-list a:hover, .suggest-list a:focus-visible { background: var(--mf-navy-50); }
.suggest-kind {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-wide); color: var(--orange); margin-right: 6px;
}
.suggest-all a { font-weight: 700; color: var(--navy); }

.result-meta-row { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.result-meta-row .result-meta { margin: 0; flex: 1; }
.sort-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sort-select {
  margin-left: 6px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: var(--mf-radius-md); font-size: 12.5px; background: #fff;
}
.zero-cats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.zero-cats .chip { background: var(--navy); }

.sibling-sizes { margin-top: 22px; }
.sibling-sizes h2 {
  font-size: 16px; color: var(--navy); margin: 0 0 2px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.sibling-sizes .muted { margin: 0 0 10px; }
.sib-add { display: flex; gap: 6px; align-items: center; }

.qo-csv-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.qo-csv-label { font-size: 12.5px; color: var(--muted); }
.qo-csv-label input { font-size: 12px; }
.qo-csv-tpl { font-size: 12px; color: var(--navy); font-weight: 600; }

/* =======================================================================
   CONTENT PAGES — industries, services, resources, brands, reviews
   ======================================================================= */
.mk-hero-slim { padding: 42px 24px; }
.mk-hero-slim h1 { font-size: 30px; }
.hero-link { color: #fff; text-decoration: underline; }
.svc-points { margin: 14px 0; padding: 0 0 0 2px; list-style: none; max-width: 720px; }
.svc-points li {
  position: relative; padding: 7px 0 7px 30px; font-size: 14.5px; line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.svc-points li::before {
  content: "✓"; position: absolute; left: 4px; color: var(--orange); font-weight: 800;
}
.svc-outcome {
  max-width: 720px; background: var(--mf-navy-50); border-left: 4px solid var(--navy);
  border-radius: var(--mf-radius-md); padding: 12px 16px; font-weight: 600;
  margin: 16px 0 18px;
}
.mk-industry-link { text-decoration: none; display: block; transition: border-color var(--mf-duration) var(--mf-ease), box-shadow var(--mf-duration) var(--mf-ease); }
.mk-industry-link:hover { border-left-color: var(--orange); box-shadow: var(--mf-shadow-md); }
.ref-table { width: 100%; }
.ref-table td, .ref-table th { font-variant-numeric: tabular-nums; }

/* --- downloadable document library (technical charts) --- */
.doc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.doc-filter {
  background: #fff; border: 1px solid var(--line); border-radius: var(--mf-radius-pill);
  padding: 5px 14px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--mf-text-muted); cursor: pointer;
}
.doc-filter:hover { border-color: var(--navy); color: var(--navy); }
.doc-filter.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.doc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.doc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--mf-radius-lg);
  padding: 16px 16px 18px; display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: border-color var(--mf-duration) var(--mf-ease),
                                  box-shadow var(--mf-duration) var(--mf-ease);
}
.doc-card:hover { border-color: var(--orange); box-shadow: var(--mf-shadow-md); }
/* The category filter sets .hidden; without this the "display: flex" above
   out-ranks the browser's built-in [hidden] rule and nothing filters. */
.doc-card[hidden] { display: none; }
.doc-tag {
  align-self: flex-start; background: var(--mf-steel-100); color: var(--mf-text-muted);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mf-tracking-wide); padding: 3px 9px;
  border-radius: var(--mf-radius-sm);
}
.doc-thumb { display: block; margin: 14px 0 16px; }
.doc-thumb img {
  width: 128px; height: auto; display: block; border: 1px solid var(--line);
  box-shadow: var(--mf-shadow-sm); background: #fff;
}
.doc-card:hover .doc-thumb img { border-color: var(--mf-border-strong); }
.doc-title { margin: 0 0 12px; font-size: 14.5px; line-height: 1.35; }
.doc-title a {
  color: var(--navy); text-decoration: none; font-weight: 800;
}
.doc-card:hover .doc-title a { color: var(--orange); }
.doc-dl {
  margin-top: auto; color: var(--navy); text-decoration: none;
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.doc-dl:hover { color: var(--orange); }
.doc-dl-icon { font-size: 15px; }

/* --- individual guide page --- */
.mk-page-wide { max-width: 1100px; }
.guide-kicker { color: var(--orange); margin-bottom: 6px; }
.guide-intro { font-size: 16px; line-height: 1.55; }
.guide-section { margin-top: 30px; }
.guide-section h2 {
  font-size: 17px; color: var(--navy); margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.guide-std {
  background: var(--mf-navy-50); color: var(--navy); border: 1px solid var(--mf-navy-100);
  font-size: 11px; font-weight: 800; letter-spacing: var(--mf-tracking-wide);
  padding: 3px 9px; border-radius: var(--mf-radius-sm); white-space: nowrap;
}
.guide-section .ref-table th { font-size: 11.5px; }
.guide-section .ref-table td { font-size: 12.5px; }
/* Illustrations lifted straight out of the guide PDFs (head mark symbols,
   drive-type art, availability matrices) - the information IS the picture. */
/* The guide rendered page-for-page (vector SVG of the source PDF) */
.guide-pages { margin: 22px 0 8px; }
.guide-page {
  display: block; width: 100%; height: auto; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--mf-radius-md);
  box-shadow: var(--mf-shadow-sm); background: #fff;
}
.guide-text {
  border: 1px solid var(--line); border-radius: var(--mf-radius-lg);
  background: #fff; padding: 12px 16px; margin: 18px 0;
}
.guide-text > summary {
  font-size: 13px; font-weight: 800; color: var(--navy);
  text-transform: none; letter-spacing: normal;
}
.guide-text[open] > summary { margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); }

.guide-fig { margin: 0 0 20px; }
.guide-fig img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--mf-radius-md); background: #fff;
}
.guide-fig figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.mk-brands {
  display: flex; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  align-items: center; margin-top: 18px; padding: 10px 0 6px;
}
.mk-brands img { height: 36px; width: auto; max-width: 200px; object-fit: contain; }
/* squarish marks (badge/lozenge shapes) need more height to read at strip scale */
.mk-brands img.brand-tall { height: 68px; }
.mk-brands img.brand-xl { height: 84px; }
/* white-on-black brand marks render as their natural dark chip */
.mk-brands img.brand-chip { height: 44px; border-radius: var(--mf-radius-md); }
/* Customer reviews banner (migrated from the current megafix.com.au widget) */
.mk-reviews-head {
  display: flex; gap: 24px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 14px;
}
.mk-review-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.mk-review-card {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--orange); border-radius: var(--mf-radius-lg);
  padding: 16px 18px; box-shadow: var(--mf-shadow-sm); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
}
.mk-review-card blockquote {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); flex: 1;
}
.mk-review-card blockquote::before { content: "“"; color: var(--orange); font-weight: 800; margin-right: 1px; }
.mk-review-card blockquote::after { content: "”"; color: var(--orange); font-weight: 800; margin-left: 1px; }
.mk-review-card figcaption { font-size: 12px; color: var(--muted); }
.mk-review-card figcaption strong { color: var(--navy); }

/* Trade-card CTA: white so it never sinks into the navy card or its orange
   diagonal; nudged left so it isn't glued to the accent edge. */
.mk-trade-card .mk-trade-btn { margin-right: 48px; }

/* Credit application: form + sticky benefits side panel */
.ca-layout {
  display: flex; gap: 22px; align-items: flex-start;
  max-width: 1180px; margin: 0 auto;
}
.ca-layout .ca-wrap { flex: 1; min-width: 0; margin: 0; }
.ca-side { width: 280px; flex-shrink: 0; position: sticky; top: 16px; }
.ca-side-card {
  background: linear-gradient(115deg, var(--navy) 0 90%, var(--orange) 90%);
  color: #fff; border-radius: var(--mf-radius-lg); padding: 22px 22px 16px;
  box-shadow: var(--mf-shadow-md);
}
.ca-side-head {
  font-family: var(--mf-font-display); text-transform: uppercase; font-size: 20px;
  /* reversed (white-on-navy) type optically thickens - a little positive
     tracking keeps the extended letterforms from closing up */
  letter-spacing: 0.01em;
  line-height: var(--mf-leading-snug); margin: 0 0 8px;
}
.ca-side-note { font-size: 11.5px; opacity: 0.85; margin: 0 0 14px; }
.ca-side-benefits { list-style: none; margin: 0 0 16px; padding: 0; }
.ca-side-benefits li {
  position: relative; padding: 4px 0 4px 22px; font-size: 13px;
}
.ca-side-benefits li::before {
  content: "✓"; position: absolute; left: 0; color: var(--mf-orange-400); font-weight: 800;
}
.ca-side-jump-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--mf-tracking-widest);
  opacity: 0.7; margin: 0 0 6px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 12px;
}
.ca-side-jump { list-style: none; margin: 0 0 14px; padding: 0; }
.ca-side-jump a { color: #dbe2ef; font-size: 12.5px; text-decoration: none; display: block; padding: 2px 0; }
.ca-side-jump a:hover { color: #fff; text-decoration: underline; }
.ca-side-phone { font-size: 13px; margin: 0; }
.sig-alt { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.sig-alt input {
  display: block; width: 300px; max-width: 100%; padding: 7px 9px; margin-top: 3px;
  border: 1px solid var(--line); border-radius: var(--mf-radius-md); font-size: 13px;
}
@media (max-width: 1000px) { .ca-side { display: none; } }

/* =======================================================================
   CENTRED CONTENT - every page's content is centred with balanced left and
   right margins at every screen size, capped at the brand container (the
   narrower page types keep their own tighter max-widths and centre within
   the same space). ONLY exception: the catalogue workspace stays full-width
   from the far left for the dense results table (plus the internal staff
   tool, which follows the catalogue).
   ======================================================================= */
.mk-page, .ca-wrap, .acct-wrap, .subs-wrap, .admin-wrap,
.qo-layout, .cart-layout, main > .crumbs, .item-page {
  margin-left: auto; margin-right: auto;
}
.acct-wrap, .admin-wrap, .qo-layout, .cart-layout,
main > .crumbs, .item-page {
  max-width: var(--mf-container);
}