.print-head,.print-foot,.watermark{display:none}
/* the print frame is a plain block on screen */
.print-frame,.print-frame>tbody,.print-frame>tbody>tr,.print-frame>tbody>tr>td{
  display:block;width:100%;border:0;padding:0;margin:0}
.print-frame>thead,.print-frame>tfoot{display:none}
/* MF Fastener — datasheet pages (v18)
   Loads after pages.css. Provides the drawing panel, handbook tables and the
   A4 print layout with letterhead and watermark. */

/* ---------------------------------------------------- two-column sheet body */
.ds-body .dcols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:48px;align-items:start}
@media(max-width:1000px){.ds-body .dcols{grid-template-columns:minmax(0,1fr);gap:34px}}
/* grid and flex children default to min-width:auto, which lets a wide drawing
   or table push the column past the screen. */
.ds-body .dcols > *{min-width:0}
.ds-body .scroll{max-width:100%}
.dwg{max-width:100%;overflow:hidden}
.dwg svg{max-width:100%}

.ds-body h2.sec{font-family:var(--fd);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.6vw,32px);line-height:1;color:#fff;margin:0 0 6px;letter-spacing:.01em}
.ds-body .sec-note{color:var(--mut);font-size:14.5px;margin:0 0 24px;max-width:62ch}
.ds-body .rule{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--hairline);
  padding-bottom:12px;margin:0 0 26px}
.ds-body .rule .tag{font-family:var(--fm);font-size:11.5px;color:var(--mut);
  letter-spacing:.06em;margin-left:auto}
.ds-body section+section{margin-top:56px}

/* drawing panel */
.dwg{background:var(--panel);border:1px solid var(--hairline);border-top:3px solid var(--gold);padding:8px}
.dwg svg{width:100%;height:auto;display:block}
.dwg-cap{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--mut);
  padding:12px 16px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:6px 18px}
@media(max-width:620px){.dwg-cap{font-size:10px;padding:10px 12px;gap:4px 12px}
  .dwg{padding:5px}}

/* On a phone both the drawing and the wide tables have to scroll sideways.
   Without an obvious signal that reads as a broken, half-cut page, so each
   scrolling panel gets a fade on the right edge and a short instruction. */
.ds-scrollable{position:relative}
.ds-scrollable::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;
  pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(90deg,rgba(32,36,40,0),var(--panel))}
.ds-scrollable.is-scrollable::after{opacity:1}
.ds-scrollable.at-end::after{opacity:0}
.ds-hint{display:none;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;
  color:var(--gold-bright);padding:0 0 8px;align-items:center;gap:7px}
.ds-hint.on{display:flex}
.ds-hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}

@media(max-width:760px){
  .dwg{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dwg svg{min-width:520px;max-width:none}
  /* the tables are legible a size down, which lets most of them fit outright */
  .ds-body table{font-size:12px}
  .ds-body th{font-size:9.5px;letter-spacing:.06em}
  .ds-body td{font-size:11.5px}
  .ds-body th,.ds-body td{padding:8px 9px}
  .ds-body .sec-note{font-size:14px;margin-bottom:18px}
  .ds-body section+section{margin-top:38px}
}
@media(max-width:420px){
  .dwg svg{min-width:460px}
  .ds-body table{font-size:11px}
  .ds-body td{font-size:11px}
  .ds-body th,.ds-body td{padding:7px 7px}
}
@media print{.ds-hint,.ds-scrollable::after{display:none!important}}
.dwg-cap b{color:var(--gold-bright);font-weight:400}

.ds-body table{width:100%;border-collapse:collapse;font-size:14.5px}
.ds-body th,.ds-body td{border:1px solid var(--hairline);padding:10px 12px;text-align:left}
.ds-body th{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-bright);background:rgba(255,255,255,.03);white-space:nowrap}
.ds-body td{font-family:var(--fm);font-size:13.5px}
.ds-body td:first-child{color:#fff;font-weight:500}
.ds-body tbody tr:hover{background:rgba(255,255,255,.02)}
.scroll{overflow-x:auto}

.ds-body .kv{width:100%;border-collapse:collapse;font-size:14.5px}
.ds-body .kv th,.ds-body .kv td{border:0;border-top:1px solid var(--hairline);padding:11px 0;font-family:var(--fb)}
.kv tr:first-child th,.kv tr:first-child td{border-top:0}
.kv th{width:40%;color:var(--mut);font-weight:500;text-transform:none;letter-spacing:0;
  font-size:14.5px;background:none}
.kv td{color:var(--txt);font-size:14.5px}

.callout{background:var(--panel);border:1px solid var(--hairline);border-left:3px solid var(--gold);
  padding:22px 24px;margin-top:28px}
.callout h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:20px;
  color:#fff;margin:0 0 12px}
.callout p{color:#c3c8cb;font-size:14.5px;margin:0 0 12px}
.callout p:last-child{margin:0}

.warn{border-left-color:var(--crimson)}
.aside h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:22px;
  color:#fff;margin:0 0 12px}
.aside p{color:#c3c8cb;font-size:15px;margin:0 0 14px}
.aside+.aside{margin-top:32px;padding-top:28px;border-top:1px solid var(--hairline)}
.ds-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.btn-print{background:transparent;color:var(--gold-bright);border:1px solid var(--hairline);
  font-family:var(--fb);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.btn-print:hover{border-color:var(--gold);background:rgba(217,169,63,.08)}
.btn-print svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

@media print{
  @page{size:A4 portrait;margin:12mm 14mm 12mm}

  /* watermark, repeated on every sheet */
  .watermark{display:block!important;position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%) rotate(-28deg);width:135mm;height:auto;
    opacity:.055;z-index:0;pointer-events:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page-head,.pg,.print-head,.print-foot{position:relative;z-index:1}

  /* hide the web furniture */
  .mocknote,.ds-actions,.crumbs,.eyebrow,.btn,.aside-quote,.ref-only{display:none!important}
  /* the quote prompt is redundant on paper — the footer carries the contact line */
  .ds-body .aside:last-of-type{display:none!important}

  /* the site header, footer and floating widgets have no place on a datasheet */
  .util,.chrome,header,footer,nav.main,.burger,.header-cta,
  .approvals-line,.scopeline,.ds-band,.skip-link,
  #wpadminbar,
  [id*="getbutton" i],[class*="getbutton" i],
  [id^="gtb"],[class^="gtb"],
  [class*="whatsapp" i],[id*="whatsapp" i],
  [class*="chat-widget" i],[id*="chat-widget" i],
  #cookie-notice,.cookie-notice-container,.cli-bar-container,
  .wpcf7,.optin-monster-overlay,
  .joinchat,.ht-ctc,.ht_ctc_chat_greeting_box,.wa__floating_chat_box,.wa__btn_popup,
  #whatsapp-chat,.gtb-container,.gtb-widget,#gtb,
  body > iframe,
  [style*="position: fixed"],[style*="position:fixed"]{display:none!important}

  /* our own print furniture must survive the purge above */
  .watermark{display:block!important}

  html,body{background:#fff!important;color:#000!important}
  body{font-family:"Times New Roman",Georgia,serif;font-size:9pt;line-height:1.32;orphans:2;widows:2}
  .ds-body .rule{display:block}
  .ds-body .rule .tag{float:right}
  .wrap{width:100%;max-width:none}

  /* running header on every page */
  /* repeat the letterhead and footer on every sheet */
  .print-frame{display:table!important;width:100%;border-collapse:collapse}
  .print-frame>thead{display:table-header-group!important}
  .print-frame>tfoot{display:table-footer-group!important}
  .print-frame>tbody{display:table-row-group!important}
  .print-frame>*>tr,.print-frame>*>tr>td{display:table-row;border:0;padding:0}
  .print-frame>*>tr>td{display:table-cell;padding:0}

  .print-head{display:flex!important;align-items:flex-end;justify-content:space-between;gap:8mm;
    border-bottom:1.2pt solid #000;padding-bottom:1.4mm;margin-bottom:2mm;
    font-family:"Times New Roman",serif;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ph-brand{display:flex;align-items:center;gap:3.5mm}
  .ph-logo{width:12mm;height:auto;flex:none}
  .ph-name b{display:block;font-size:9.5pt;letter-spacing:.06em;line-height:1.1}
  .ph-name i{display:block;font-size:6.2pt;font-style:italic;color:#333;margin-top:0.8mm}
  .ph-doc{text-align:right;white-space:nowrap}
  .ph-doc b{display:block;font-size:7pt;font-variant:small-caps;letter-spacing:.1em}
  .ph-doc i{display:block;font-size:7pt;font-style:italic;margin-top:0.8mm}

  /* running footer on every page */
  .print-foot{display:block!important;border-top:0.6pt solid #000;padding-top:1mm;margin-top:2mm;
    font-size:6.3pt;line-height:1.28;color:#000}
  .print-foot{display:flex!important;gap:6mm;justify-content:space-between;align-items:baseline}
  .print-foot .disc{font-style:italic;flex:1 1 auto}
  .print-foot .meta{font-variant:small-caps;letter-spacing:.05em;white-space:nowrap;flex:none}

  /* title block, like a handbook section opener */
  .page-head{background:none!important;border:0;padding:0 0 2.5mm;margin-bottom:3.5mm;
    border-bottom:1.4pt solid #000}
  h1,h1.display,.page-head h1{font-family:"Times New Roman",serif!important;font-weight:700;
    font-size:16pt;line-height:1.05;color:#000!important;text-transform:none;letter-spacing:0}
  h1 span,.page-head h1 span{color:#000!important}
  .sub{color:#000!important;max-width:none;font-size:8.6pt;margin-top:1.5mm}

  .pg{padding:0}
  .dcols{display:block}
  section+section{margin-top:2.6mm}

  /* section headings, numbered like a book */
  h2.sec,.ds-body h2.sec{font-family:"Times New Roman",serif!important;font-weight:700;
    font-size:10.5pt;color:#000!important;text-transform:uppercase;letter-spacing:.06em}
  .ds-body .sec-note{color:#000!important;font-size:8.4pt;max-width:none;margin-bottom:1.5mm}
  .ds-body .rule{border-bottom:0.6pt solid #000;padding-bottom:1mm;margin-bottom:2mm}
  .ds-body .rule .tag{font-size:8.5pt;font-style:italic;color:#000!important}
  .ds-body section+section{margin-top:2mm}
  /* single column on paper — CSS grid does not fragment reliably across pages */
  .ds-body .dcols{display:block}
  .ds-body .dcols > div:last-child{margin-top:3mm}
  .rule{border-bottom:0.6pt solid #000;padding-bottom:1mm;margin-bottom:2mm}
  .rule .tag{font-size:8.5pt;font-style:italic;color:#000!important}
  .sec-note{color:#000!important;font-size:8.4pt;max-width:none;margin-bottom:1.5mm}

  /* figure */
  .dwg{background:#fff!important;border:0.6pt solid #000;padding:2mm;page-break-inside:avoid;
    margin-bottom:2.5mm}
  .dwg svg{max-height:37mm;width:auto;margin:0 auto;display:block}
  .dwg svg{filter:invert(1) hue-rotate(180deg) saturate(0) contrast(1.4)}
  .dwg-cap{color:#000!important;border-top:0.6pt solid #000;font-size:7pt;padding:1.2mm 0 0;
    font-family:"Times New Roman",serif}
  .dwg-cap b{color:#000!important;font-weight:700}
  .dwg::after{content:var(--figcap);
    display:block;font-size:7.4pt;font-style:italic;text-align:center;margin-top:1.2mm}

  /* tables, handbook style: horizontal rules only */
  .scroll{overflow:visible}
  .ds-body table{font-size:7.8pt;border-collapse:collapse;margin-top:1.5mm}
  .ds-body th,.ds-body td{border:0;border-bottom:0.4pt solid #666;padding:0.9mm 2.4mm 0.9mm 0;text-align:left;
    font-family:"Times New Roman",serif}
  .ds-body thead th{border-top:1.2pt solid #000;border-bottom:0.8pt solid #000;
    font-size:7pt;font-variant:small-caps;letter-spacing:.05em;color:#000!important;
    background:none!important;text-transform:none;font-weight:700}
  .ds-body tbody tr:last-child td{border-bottom:1.2pt solid #000}
  .ds-body td{color:#000!important;font-size:7.8pt}
  .ds-body td:first-child{color:#000!important;font-weight:700}
  .ds-body td span{color:#000!important;font-style:italic}
  .ds-body tbody tr:hover{background:none}

  .ds-body .kv th,.ds-body .kv td{color:#000!important;border:0;border-bottom:0.4pt solid #999;
    padding:0.8mm 2.4mm 0.8mm 0;font-size:7.8pt}
  .ds-body .kv th{width:38%;font-variant:small-caps;letter-spacing:.05em;font-weight:700}

  /* notes set as book notes, not coloured boxes */
  .callout{background:none!important;border:0;border-left:1.4pt solid #000;
    padding:0 0 0 3mm;margin:1.8mm 0}
  .callout.warn{border-left:1.6pt solid #000}
  .callout h3{font-family:"Times New Roman",serif;font-size:8.8pt;font-weight:700;
    color:#000!important;text-transform:none;letter-spacing:0;margin-bottom:1.5mm}
  .callout p{color:#000!important;font-size:8.1pt;margin-bottom:0.8mm}

  .aside{margin-top:1.3mm}
  .aside h3,.callout h3{font-family:"Times New Roman",serif!important;font-size:9pt;font-weight:700;
    color:#000!important;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.2mm}
  .aside p{color:#000!important;font-size:8.2pt;margin-bottom:1mm}
  .aside+.aside{border-top:0.4pt solid #999;padding-top:1.2mm}

  .dwg{page-break-inside:avoid}
  /* a table may split across pages, but its column headers come with it */
  .ds-body table thead{display:table-header-group}
  .ds-body table tr{page-break-inside:avoid}
  section{page-break-inside:auto}
  a{color:#000!important;text-decoration:none}
}

.btn{display:inline-block;background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  color:#221803;border:1px solid #8a6a1f;font-weight:800;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;padding:13px 26px;margin-top:6px}