{"id":13198,"date":"2026-09-23T23:02:31","date_gmt":"2026-09-23T23:02:31","guid":{"rendered":"https:\/\/vanguardsteelvancouver.com\/wp20\/?page_id=13198"},"modified":"2026-10-08T01:03:52","modified_gmt":"2026-10-08T01:03:52","slug":"vgd-distributor-tools","status":"publish","type":"page","link":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/","title":{"rendered":"VGD Distributor Tools"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13198\" class=\"elementor elementor-13198\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17c2a50 e-con-full e-flex e-con e-parent\" data-id=\"17c2a50\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5656704 elementor-widget elementor-widget-template\" data-id=\"5656704\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<header data-elementor-type=\"header\" data-elementor-id=\"3375\" class=\"elementor elementor-3375\" data-elementor-post-type=\"elementor_library\">\n\t\t\t<div class=\"elementor-element elementor-element-664a292 e-flex e-con-boxed e-con e-parent\" data-id=\"664a292\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e91ff3 elementor-widget elementor-widget-menu-anchor\" data-id=\"6e91ff3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"topheader\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e820292 elementor-widget elementor-widget-html\" data-id=\"e820292\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Existing header code above -->\r\n\r\n<button\r\n  class=\"vgd-back-to-top\"\r\n  type=\"button\"\r\n  aria-label=\"Back to top\"\r\n  title=\"Back to top\"\r\n>\r\n  <span aria-hidden=\"true\">\u2191<\/span>\r\n<\/button>\r\n\r\n<style>\r\n  .vgd-back-to-top {\r\n    position: fixed;\r\n    right: 22px;\r\n    bottom: 88px;\r\n    z-index: 9998;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 48px;\r\n    height: 48px;\r\n    padding: 0;\r\n\r\n    color: #ffffff;\r\n    background: #1b1e20;\r\n    border: 2px solid #f26a21;\r\n    border-radius: 50%;\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    font-size: 25px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateY(12px);\r\n\r\n    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);\r\n\r\n    transition:\r\n      opacity 0.22s ease,\r\n      visibility 0.22s ease,\r\n      transform 0.22s ease,\r\n      background-color 0.22s ease;\r\n  }\r\n\r\n  .vgd-back-to-top.vgd-back-to-top--visible {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .vgd-back-to-top:hover,\r\n  .vgd-back-to-top:focus-visible {\r\n    background: #f26a21;\r\n  }\r\n\r\n  .vgd-back-to-top:focus-visible {\r\n    outline: 3px solid rgba(242, 106, 33, 0.4);\r\n    outline-offset: 3px;\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .vgd-back-to-top {\r\n      right: 16px;\r\n      bottom: 16px;\r\n      width: 46px;\r\n      height: 46px;\r\n      font-size: 24px;\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .vgd-back-to-top {\r\n      transition: none;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function () {\r\n    const backToTopButton = document.querySelector(\".vgd-back-to-top\");\r\n\r\n    if (!backToTopButton) return;\r\n\r\n    function updateBackToTopButton() {\r\n      backToTopButton.classList.toggle(\r\n        \"vgd-back-to-top--visible\",\r\n        window.scrollY > 700\r\n      );\r\n    }\r\n\r\n    backToTopButton.addEventListener(\"click\", function () {\r\n      const reduceMotion = window.matchMedia(\r\n        \"(prefers-reduced-motion: reduce)\"\r\n      ).matches;\r\n\r\n      window.scrollTo({\r\n        top: 0,\r\n        behavior: reduceMotion ? \"auto\" : \"smooth\"\r\n      });\r\n    });\r\n\r\n    window.addEventListener(\"scroll\", updateBackToTopButton, {\r\n      passive: true\r\n    });\r\n\r\n    updateBackToTopButton();\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5a81cf elementor-widget elementor-widget-html\" data-id=\"c5a81cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .vgd-utility-wrap {\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n    background: #080808;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.09);\r\n    font-family: Arial, Helvetica, sans-serif;\r\n  }\r\n\r\n  .vgd-utility-bar {\r\n    max-width: 1440px;\r\n    min-height: 38px;\r\n    margin: 0 auto;\r\n    padding: 0 28px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 24px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-utility-branch {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: #ffffff;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n    letter-spacing: 1.2px;\r\n    text-transform: uppercase;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .vgd-utility-branch::before {\r\n    content: \"\";\r\n    width: 3px;\r\n    height: 14px;\r\n    background: #f26a21;\r\n    display: block;\r\n    flex: 0 0 auto;\r\n  }\r\n\r\n  .vgd-utility-company {\r\n    color: #b9b9b9;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .vgd-utility-divider {\r\n    color: #555555;\r\n  }\r\n\r\n  .vgd-utility-phones {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 24px;\r\n  }\r\n\r\n  .vgd-utility-phone {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #ffffff;\r\n    font-size: 12px;\r\n    line-height: 1;\r\n    letter-spacing: 0.6px;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    transition: color 0.2s ease;\r\n  }\r\n\r\n  .vgd-utility-phone:hover,\r\n  .vgd-utility-phone:focus {\r\n    color: #f26a21;\r\n  }\r\n\r\n  .vgd-phone-label {\r\n    color: #8d8d8d;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .vgd-utility-bar {\r\n      min-height: 42px;\r\n      padding: 0 16px;\r\n      gap: 12px;\r\n    }\r\n\r\n    .vgd-utility-company,\r\n    .vgd-utility-divider,\r\n    .vgd-phone-label {\r\n      display: none;\r\n    }\r\n\r\n    .vgd-utility-branch {\r\n      font-size: 10px;\r\n      letter-spacing: 0.9px;\r\n    }\r\n\r\n    .vgd-utility-phones {\r\n      gap: 12px;\r\n    }\r\n\r\n    .vgd-utility-phone {\r\n      font-size: 11px;\r\n      letter-spacing: 0;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .vgd-utility-bar {\r\n      min-height: 46px;\r\n      flex-wrap: wrap;\r\n      justify-content: center;\r\n      gap: 5px 16px;\r\n      padding-top: 6px;\r\n      padding-bottom: 6px;\r\n    }\r\n\r\n    .vgd-utility-branch {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"vgd-utility-wrap\">\r\n  <div class=\"vgd-utility-bar\">\r\n\r\n    <div class=\"vgd-utility-branch\">\r\n      <span class=\"vgd-utility-company\">Vanguard Steel Ltd.<\/span>\r\n      <span class=\"vgd-utility-divider\">|<\/span>\r\n      <span>Vancouver Branch<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"vgd-utility-phones\">\r\n      <a\r\n        class=\"vgd-utility-phone\"\r\n        href=\"tel:+16042943191\"\r\n        aria-label=\"Call Vanguard Steel Vancouver at 604-294-3191\"\r\n      >\r\n        <span class=\"vgd-phone-label\">Local<\/span>\r\n        <span>604-294-3191<\/span>\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"vgd-utility-phone\"\r\n        href=\"tel:+18662943191\"\r\n        aria-label=\"Call Vanguard Steel toll free at 1-866-294-3191\"\r\n      >\r\n        <span class=\"vgd-phone-label\">Toll Free<\/span>\r\n        <span>1-866-294-3191<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1845db3 elementor-widget elementor-widget-html\" data-id=\"1845db3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .vgd-main-header-wrap,\r\n  .vgd-main-header-wrap *,\r\n  .vgd-main-header-wrap *::before,\r\n  .vgd-main-header-wrap *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-main-header-wrap {\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n    position: relative;\r\n    z-index: 999;\r\n    background: #151719;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n    font-family: Arial, Helvetica, sans-serif;\r\n  }\r\n\r\n  .vgd-main-header {\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    min-height: 94px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 34px;\r\n    margin: 0 auto;\r\n    padding: 0 28px;\r\n  }\r\n\r\n  \/*\r\n   * LOGO\r\n   *\/\r\n\r\n  .vgd-main-logo-link {\r\n    flex: 0 1 330px;\r\n    max-width: 330px;\r\n    display: flex;\r\n    align-items: center;\r\n    text-decoration: none;\r\n  }\r\n\r\n  .vgd-main-logo {\r\n    display: block;\r\n    width: 100%;\r\n    height: auto;\r\n    max-height: 76px;\r\n    object-fit: contain;\r\n    object-position: left center;\r\n  }\r\n\r\n  \/*\r\n   * DESKTOP NAVIGATION\r\n   *\/\r\n\r\n  .vgd-main-navigation {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n    gap: 25px;\r\n    margin-left: auto;\r\n  }\r\n\r\n  .vgd-main-navigation > a,\r\n  .vgd-main-nav-parent-row > a {\r\n    position: relative;\r\n    color: #ffffff !important;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    line-height: 1.2;\r\n    letter-spacing: 0.5px;\r\n    text-decoration: none !important;\r\n    text-transform: uppercase;\r\n    white-space: nowrap;\r\n    transition: color 0.2s ease;\r\n  }\r\n\r\n  .vgd-main-navigation > a:not(.vgd-contact-button)::after,\r\n  .vgd-main-nav-parent-row > a::after {\r\n    position: absolute;\r\n    bottom: -9px;\r\n    left: 0;\r\n    width: 0;\r\n    height: 2px;\r\n    background: #f26a21;\r\n    content: \"\";\r\n    transition: width 0.2s ease;\r\n  }\r\n\r\n  .vgd-main-navigation > a:not(.vgd-contact-button):hover,\r\n  .vgd-main-navigation > a:not(.vgd-contact-button):focus,\r\n  .vgd-main-nav-parent-row > a:hover,\r\n  .vgd-main-nav-parent-row > a:focus {\r\n    color: #f26a21 !important;\r\n  }\r\n\r\n  .vgd-main-navigation > a:not(.vgd-contact-button):hover::after,\r\n  .vgd-main-navigation > a:not(.vgd-contact-button):focus::after,\r\n  .vgd-main-nav-parent-row > a:hover::after,\r\n  .vgd-main-nav-parent-row > a:focus::after {\r\n    width: 100%;\r\n  }\r\n\r\n  \/*\r\n   * INDUSTRIAL HARDWARE DROPDOWN\r\n   *\/\r\n\r\n  .vgd-main-nav-item {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n\r\n  .vgd-main-nav-parent-row {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n  }\r\n\r\n  .vgd-main-submenu-toggle {\r\n    width: 21px;\r\n    height: 30px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0;\r\n    padding: 0;\r\n    color: #ffffff;\r\n    background: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    appearance: none;\r\n  }\r\n\r\n  .vgd-main-submenu-toggle:hover,\r\n  .vgd-main-submenu-toggle:focus-visible {\r\n    color: #f26a21;\r\n    outline: none;\r\n  }\r\n\r\n  .vgd-main-submenu-toggle:focus-visible {\r\n    box-shadow: inset 0 0 0 2px #f26a21;\r\n  }\r\n\r\n  .vgd-main-submenu-chevron {\r\n    width: 8px;\r\n    height: 8px;\r\n    margin-top: -4px;\r\n    border-right: 1.5px solid currentColor;\r\n    border-bottom: 1.5px solid currentColor;\r\n    transform: rotate(45deg);\r\n    transition: transform 0.18s ease;\r\n  }\r\n\r\n  .vgd-main-nav-item.is-submenu-open\r\n    .vgd-main-submenu-chevron {\r\n    margin-top: 4px;\r\n    transform: rotate(225deg);\r\n  }\r\n\r\n  .vgd-main-submenu {\r\n    position: absolute;\r\n    top: calc(100% + 29px);\r\n    left: 0;\r\n    z-index: 1010;\r\n    width: 245px;\r\n    visibility: hidden;\r\n    margin: 0;\r\n    padding: 9px;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    background: #1d2022;\r\n    border-top: 3px solid #f26a21;\r\n    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);\r\n    transform: translateY(7px);\r\n    transition:\r\n      opacity 0.16s ease,\r\n      visibility 0.16s ease,\r\n      transform 0.16s ease;\r\n  }\r\n\r\n  .vgd-main-nav-item.is-submenu-open .vgd-main-submenu,\r\n  .vgd-main-nav-item:focus-within .vgd-main-submenu {\r\n    visibility: visible;\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .vgd-main-submenu a {\r\n    display: block;\r\n    width: 100%;\r\n    padding: 12px 13px;\r\n    color: #e4e7e9 !important;\r\n    background: transparent !important;\r\n    border-left: 3px solid transparent;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n    letter-spacing: 0.2px;\r\n    text-decoration: none !important;\r\n    text-transform: none;\r\n    transition:\r\n      color 0.15s ease,\r\n      background-color 0.15s ease,\r\n      border-color 0.15s ease;\r\n  }\r\n\r\n  .vgd-main-submenu a:hover,\r\n  .vgd-main-submenu a:focus-visible {\r\n    color: #ffffff !important;\r\n    background: #303438 !important;\r\n    border-left-color: #f26a21;\r\n    outline: none;\r\n  }\r\n\r\n  @media (min-width: 1161px) {\r\n    .vgd-main-nav-item:hover .vgd-main-submenu {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      pointer-events: auto;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  \/*\r\n   * CONTACT BUTTON\r\n   *\/\r\n\r\n  .vgd-main-navigation .vgd-contact-button {\r\n    min-height: 46px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0 20px;\r\n    color: #ffffff !important;\r\n    background: #f26a21;\r\n    border: 1px solid #f26a21;\r\n    transition:\r\n      background 0.2s ease,\r\n      border-color 0.2s ease;\r\n  }\r\n\r\n  .vgd-main-navigation .vgd-contact-button:hover,\r\n  .vgd-main-navigation .vgd-contact-button:focus {\r\n    color: #ffffff !important;\r\n    background: #d95512;\r\n    border-color: #d95512;\r\n  }\r\n\r\n  \/*\r\n   * CORPORATE MOBILE MENU BUTTON\r\n   *\/\r\n\r\n  .vgd-menu-toggle {\r\n    display: none;\r\n    width: 44px;\r\n    height: 44px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0;\r\n    background: transparent;\r\n    border: 1px solid rgba(255, 255, 255, 0.25);\r\n    cursor: pointer;\r\n  }\r\n\r\n  .vgd-menu-toggle-lines {\r\n    position: relative;\r\n    width: 20px;\r\n    height: 14px;\r\n  }\r\n\r\n  .vgd-menu-toggle-lines span {\r\n    position: absolute;\r\n    left: 0;\r\n    width: 20px;\r\n    height: 2px;\r\n    background: #ffffff;\r\n    transition:\r\n      transform 0.25s ease,\r\n      opacity 0.25s ease,\r\n      top 0.25s ease;\r\n  }\r\n\r\n  .vgd-menu-toggle-lines span:nth-child(1) {\r\n    top: 0;\r\n  }\r\n\r\n  .vgd-menu-toggle-lines span:nth-child(2) {\r\n    top: 6px;\r\n  }\r\n\r\n  .vgd-menu-toggle-lines span:nth-child(3) {\r\n    top: 12px;\r\n  }\r\n\r\n  .vgd-menu-toggle[aria-expanded=\"true\"]\r\n    .vgd-menu-toggle-lines span:nth-child(1) {\r\n    top: 6px;\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  .vgd-menu-toggle[aria-expanded=\"true\"]\r\n    .vgd-menu-toggle-lines span:nth-child(2) {\r\n    opacity: 0;\r\n  }\r\n\r\n  .vgd-menu-toggle[aria-expanded=\"true\"]\r\n    .vgd-menu-toggle-lines span:nth-child(3) {\r\n    top: 6px;\r\n    transform: rotate(-45deg);\r\n  }\r\n\r\n  \/*\r\n   * TABLET AND MOBILE\r\n   *\/\r\n\r\n  @media (max-width: 1160px) {\r\n    .vgd-main-header {\r\n      min-height: 84px;\r\n      position: relative;\r\n    }\r\n\r\n    .vgd-main-logo-link {\r\n      flex-basis: 285px;\r\n      max-width: 285px;\r\n    }\r\n\r\n    .vgd-menu-toggle {\r\n      flex: 0 0 44px;\r\n      display: flex;\r\n    }\r\n\r\n    .vgd-main-navigation {\r\n      position: absolute;\r\n      top: 100%;\r\n      right: 0;\r\n      left: 0;\r\n      display: none;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      gap: 0;\r\n      margin: 0;\r\n      padding: 18px 28px 24px;\r\n      background: #151719;\r\n      border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n      box-shadow: 0 14px 25px rgba(0, 0, 0, 0.28);\r\n    }\r\n\r\n    .vgd-main-navigation.vgd-menu-open {\r\n      display: flex;\r\n    }\r\n\r\n    .vgd-main-navigation > a {\r\n      width: 100%;\r\n      padding: 14px 0;\r\n      border-bottom: 1px solid rgba(255, 255, 255, 0.09);\r\n    }\r\n\r\n    .vgd-main-navigation > a:not(.vgd-contact-button)::after,\r\n    .vgd-main-nav-parent-row > a::after {\r\n      display: none;\r\n    }\r\n\r\n    \/*\r\n     * MOBILE INDUSTRIAL HARDWARE GROUP\r\n     *\/\r\n\r\n    .vgd-main-nav-item {\r\n      width: 100%;\r\n      display: block;\r\n      border-bottom: 1px solid rgba(255, 255, 255, 0.09);\r\n    }\r\n\r\n    .vgd-main-nav-parent-row {\r\n      width: 100%;\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) 48px;\r\n      gap: 0;\r\n    }\r\n\r\n    .vgd-main-nav-parent-row > a {\r\n      min-height: 48px;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 14px 0;\r\n    }\r\n\r\n    .vgd-main-submenu-toggle {\r\n      width: 48px;\r\n      height: 48px;\r\n      color: #f26a21;\r\n      border-left: 1px solid rgba(255, 255, 255, 0.09);\r\n    }\r\n\r\n    .vgd-main-submenu {\r\n      position: static;\r\n      width: 100%;\r\n      display: none;\r\n      visibility: visible;\r\n      margin: 0;\r\n      padding: 5px 0 10px 12px;\r\n      opacity: 1;\r\n      pointer-events: auto;\r\n      background: #1d2022;\r\n      border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n      box-shadow: none;\r\n      transform: none;\r\n      transition: none;\r\n    }\r\n\r\n    .vgd-main-nav-item.is-submenu-open .vgd-main-submenu {\r\n      display: block;\r\n    }\r\n\r\n    .vgd-main-submenu a {\r\n      padding: 12px 14px;\r\n      border-left: 2px solid #41464a;\r\n      font-size: 12px;\r\n    }\r\n\r\n    .vgd-main-navigation .vgd-contact-button {\r\n      width: 100%;\r\n      margin-top: 18px;\r\n      padding: 0 18px;\r\n      border-bottom: 1px solid #f26a21;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .vgd-main-header {\r\n      min-height: 76px;\r\n      padding: 0 16px;\r\n    }\r\n\r\n    .vgd-main-logo-link {\r\n      flex-basis: 235px;\r\n      max-width: 235px;\r\n    }\r\n\r\n    .vgd-main-logo {\r\n      max-height: 62px;\r\n    }\r\n\r\n    .vgd-main-navigation {\r\n      padding-right: 18px;\r\n      padding-left: 18px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 420px) {\r\n    .vgd-main-logo-link {\r\n      flex-basis: 205px;\r\n      max-width: 205px;\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .vgd-main-header-wrap *,\r\n    .vgd-main-header-wrap *::before,\r\n    .vgd-main-header-wrap *::after {\r\n      transition: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<header class=\"vgd-main-header-wrap\">\r\n  <div class=\"vgd-main-header\">\r\n\r\n    <a\r\n      class=\"vgd-main-logo-link\"\r\n      href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/\"\r\n      aria-label=\"Vanguard Steel Vancouver home\"\r\n    >\r\n      <img decoding=\"async\"\r\n        class=\"vgd-main-logo lazyload\"\r\n        data-src=\"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/Vanguard-Steel-Ltd.-Logo-white-with-orange-copy.webp\"\r\n        alt=\"Vanguard Steel Ltd. Vancouver\"\r\n       src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/220;\">\r\n    <\/a>\r\n\r\n    <button\r\n      class=\"vgd-menu-toggle\"\r\n      type=\"button\"\r\n      aria-expanded=\"false\"\r\n      aria-controls=\"vgd-main-navigation\"\r\n      aria-label=\"Open navigation menu\"\r\n    >\r\n      <span class=\"vgd-menu-toggle-lines\" aria-hidden=\"true\">\r\n        <span><\/span>\r\n        <span><\/span>\r\n        <span><\/span>\r\n      <\/span>\r\n    <\/button>\r\n\r\n    <nav\r\n      class=\"vgd-main-navigation\"\r\n      id=\"vgd-main-navigation\"\r\n      aria-label=\"Main navigation\"\r\n    >\r\n      <a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/specialty-steel\/\">\r\n        Specialty Steel\r\n      <\/a>\r\n\r\n      <!-- INDUSTRIAL HARDWARE WITH SUBMENU -->\r\n\r\n      <div class=\"vgd-main-nav-item\">\r\n\r\n        <div class=\"vgd-main-nav-parent-row\">\r\n\r\n          <a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/hardware\/\">\r\n            Industrial Hardware\r\n          <\/a>\r\n\r\n          <button\r\n            class=\"vgd-main-submenu-toggle\"\r\n            type=\"button\"\r\n            aria-expanded=\"false\"\r\n            aria-controls=\"vgd-industrial-hardware-submenu\"\r\n            aria-label=\"Open Industrial Hardware submenu\"\r\n          >\r\n            <span\r\n              class=\"vgd-main-submenu-chevron\"\r\n              aria-hidden=\"true\"\r\n            ><\/span>\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n        <div\r\n          class=\"vgd-main-submenu\"\r\n          id=\"vgd-industrial-hardware-submenu\"\r\n        >\r\n          <a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/hardware\/\">\r\n            Industrial Hardware Overview\r\n          <\/a>\r\n\r\n          <a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/lifting\/\">\r\n            VGD Lifting Solutions\r\n          <\/a>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/cable-wire-rope\/\">\r\n        Cable &amp; Wire Rope\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/welding\/\">\r\n        Welding\r\n      <\/a>\r\n\r\n<a href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/\">\r\n  Distributor Tools\r\n<\/a>\r\n\r\n      <a\r\n        class=\"vgd-contact-button\"\r\n        href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/contact\/\"\r\n      >\r\n        Contact Vancouver\r\n      <\/a>\r\n    <\/nav>\r\n\r\n  <\/div>\r\n<\/header>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function () {\r\n    const header = document.querySelector(\".vgd-main-header-wrap\");\r\n\r\n    if (!header) {\r\n      return;\r\n    }\r\n\r\n    const menuToggle = header.querySelector(\".vgd-menu-toggle\");\r\n    const navigation = header.querySelector(\".vgd-main-navigation\");\r\n    const submenuItem = header.querySelector(\".vgd-main-nav-item\");\r\n    const submenuToggle = header.querySelector(\r\n      \".vgd-main-submenu-toggle\"\r\n    );\r\n\r\n    function closeSubmenu() {\r\n      if (!submenuItem || !submenuToggle) {\r\n        return;\r\n      }\r\n\r\n      submenuItem.classList.remove(\"is-submenu-open\");\r\n      submenuToggle.setAttribute(\"aria-expanded\", \"false\");\r\n      submenuToggle.setAttribute(\r\n        \"aria-label\",\r\n        \"Open Industrial Hardware submenu\"\r\n      );\r\n    }\r\n\r\n    function closeMainMenu() {\r\n      if (!menuToggle || !navigation) {\r\n        return;\r\n      }\r\n\r\n      menuToggle.setAttribute(\"aria-expanded\", \"false\");\r\n      menuToggle.setAttribute(\r\n        \"aria-label\",\r\n        \"Open navigation menu\"\r\n      );\r\n\r\n      navigation.classList.remove(\"vgd-menu-open\");\r\n      closeSubmenu();\r\n    }\r\n\r\n    if (menuToggle && navigation) {\r\n      menuToggle.addEventListener(\"click\", function () {\r\n        const isOpen =\r\n          menuToggle.getAttribute(\"aria-expanded\") === \"true\";\r\n\r\n        menuToggle.setAttribute(\r\n          \"aria-expanded\",\r\n          String(!isOpen)\r\n        );\r\n\r\n        menuToggle.setAttribute(\r\n          \"aria-label\",\r\n          isOpen\r\n            ? \"Open navigation menu\"\r\n            : \"Close navigation menu\"\r\n        );\r\n\r\n        navigation.classList.toggle(\r\n          \"vgd-menu-open\",\r\n          !isOpen\r\n        );\r\n\r\n        if (isOpen) {\r\n          closeSubmenu();\r\n        }\r\n      });\r\n    }\r\n\r\n    if (submenuItem && submenuToggle) {\r\n      submenuToggle.addEventListener(\"click\", function (event) {\r\n        event.stopPropagation();\r\n\r\n        const isOpen =\r\n          submenuToggle.getAttribute(\"aria-expanded\") === \"true\";\r\n\r\n        submenuItem.classList.toggle(\r\n          \"is-submenu-open\",\r\n          !isOpen\r\n        );\r\n\r\n        submenuToggle.setAttribute(\r\n          \"aria-expanded\",\r\n          String(!isOpen)\r\n        );\r\n\r\n        submenuToggle.setAttribute(\r\n          \"aria-label\",\r\n          isOpen\r\n            ? \"Open Industrial Hardware submenu\"\r\n            : \"Close Industrial Hardware submenu\"\r\n        );\r\n      });\r\n    }\r\n\r\n    if (navigation) {\r\n      navigation.querySelectorAll(\"a\").forEach(function (link) {\r\n        link.addEventListener(\"click\", function () {\r\n          closeMainMenu();\r\n        });\r\n      });\r\n    }\r\n\r\n    document.addEventListener(\"click\", function (event) {\r\n      if (!header.contains(event.target)) {\r\n        closeMainMenu();\r\n      }\r\n    });\r\n\r\n    document.addEventListener(\"keydown\", function (event) {\r\n      if (event.key === \"Escape\") {\r\n        closeMainMenu();\r\n      }\r\n    });\r\n\r\n    window.addEventListener(\"resize\", function () {\r\n      if (window.innerWidth > 1160) {\r\n        if (menuToggle && navigation) {\r\n          menuToggle.setAttribute(\"aria-expanded\", \"false\");\r\n          menuToggle.setAttribute(\r\n            \"aria-label\",\r\n            \"Open navigation menu\"\r\n          );\r\n\r\n          navigation.classList.remove(\"vgd-menu-open\");\r\n        }\r\n\r\n        closeSubmenu();\r\n      }\r\n    });\r\n  });\r\n<\/script>\r\n\r\n<style>\r\n  @media (min-width: 1161px) {\r\n    .vgd-main-nav-item {\r\n      align-self: stretch;\r\n      align-items: center;\r\n    }\r\n\r\n    .vgd-main-nav-parent-row {\r\n      height: 100%;\r\n    }\r\n\r\n    .vgd-main-submenu {\r\n      top: 100%;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<\/script>\r\n\r\n<style>\r\n  \/*\r\n   * CORPORATE HEADER STACKING FIX\r\n   *\/\r\n\r\n  .elementor-widget-html:has(\r\n    > .elementor-widget-container > .vgd-main-header-wrap\r\n  ) {\r\n    position: relative !important;\r\n    z-index: 10000 !important;\r\n    overflow: visible !important;\r\n  }\r\n\r\n  .elementor-widget-html:has(\r\n    > .elementor-widget-container > .vgd-main-header-wrap\r\n  ) > .elementor-widget-container {\r\n    overflow: visible !important;\r\n  }\r\n\r\n  .vgd-main-header-wrap {\r\n    z-index: 10000 !important;\r\n    overflow: visible !important;\r\n  }\r\n\r\n  .vgd-main-header,\r\n  .vgd-main-navigation,\r\n  .vgd-main-nav-item,\r\n  .vgd-main-nav-parent-row {\r\n    overflow: visible !important;\r\n  }\r\n\r\n  .vgd-main-submenu {\r\n    z-index: 10020 !important;\r\n  }\r\n\r\n  .elementor-widget-html:has(\r\n    > .elementor-widget-container > .vgd-lifting-nav\r\n  ) {\r\n    position: relative !important;\r\n    z-index: 100 !important;\r\n  }\r\n\r\n  .vgd-lifting-nav {\r\n    z-index: 100 !important;\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/header>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36ff207 e-con-full e-flex e-con e-parent\" data-id=\"36ff207\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9870db elementor-widget elementor-widget-html\" data-id=\"c9870db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .vgd-distributor-hero,\r\n  .vgd-distributor-hero * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-distributor-hero {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 640px;\r\n    display: flex;\r\n    align-items: center;\r\n    overflow: hidden;\r\n    background:\r\n      linear-gradient(90deg, rgba(5, 10, 18, 0.92) 0%, rgba(5, 10, 18, 0.82) 38%, rgba(5, 10, 18, 0.45) 62%, rgba(5, 10, 18, 0.18) 100%),\r\n      url(\"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/VGD-Distributor-Tools.webp\") center right \/ cover no-repeat;\r\n    color: #ffffff;\r\n    padding: 90px 24px;\r\n  }\r\n\r\n  .vgd-distributor-hero-inner {\r\n    width: 100%;\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n\r\n  .vgd-distributor-hero-content {\r\n    max-width: 620px;\r\n    z-index: 2;\r\n  }\r\n\r\n  .vgd-distributor-eyebrow {\r\n    display: inline-block;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.8px;\r\n    text-transform: uppercase;\r\n    color: #f26a21;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .vgd-distributor-hero h1 {\r\n    margin: 0 0 18px 0;\r\n    font-size: clamp(38px, 6vw, 68px);\r\n    line-height: 1.02;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .vgd-distributor-hero p {\r\n    margin: 0 0 18px 0;\r\n    font-size: 20px;\r\n    line-height: 1.55;\r\n    color: rgba(255, 255, 255, 0.92);\r\n  }\r\n\r\n  .vgd-distributor-hero p.vgd-distributor-hero-small {\r\n    font-size: 17px;\r\n    line-height: 1.65;\r\n    color: rgba(255, 255, 255, 0.78);\r\n    max-width: 560px;\r\n  }\r\n\r\n  .vgd-distributor-hero-actions {\r\n    margin-top: 28px;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 14px;\r\n  }\r\n\r\n  .vgd-distributor-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 52px;\r\n    padding: 0 24px;\r\n    border-radius: 6px;\r\n    text-decoration: none;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.3px;\r\n    transition: all 0.25s ease;\r\n  }\r\n\r\n  .vgd-distributor-btn-primary {\r\n    background: #f26a21;\r\n    color: #ffffff;\r\n    border: 2px solid #f26a21;\r\n  }\r\n\r\n  .vgd-distributor-btn-primary:hover {\r\n    background: #ff7a30;\r\n    border-color: #ff7a30;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .vgd-distributor-btn-secondary {\r\n    background: transparent;\r\n    color: #ffffff;\r\n    border: 2px solid rgba(255, 255, 255, 0.25);\r\n  }\r\n\r\n  .vgd-distributor-btn-secondary:hover {\r\n    border-color: #ffffff;\r\n    color: #ffffff;\r\n  }\r\n\r\n  @media (max-width: 991px) {\r\n    .vgd-distributor-hero {\r\n      min-height: 560px;\r\n      padding: 70px 20px;\r\n      background:\r\n        linear-gradient(180deg, rgba(5, 10, 18, 0.88) 0%, rgba(5, 10, 18, 0.84) 40%, rgba(5, 10, 18, 0.72) 100%),\r\n        url(\"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/VGD-Distributor-Tools.webp\") center center \/ cover no-repeat;\r\n    }\r\n\r\n    .vgd-distributor-hero-content {\r\n      max-width: 100%;\r\n    }\r\n\r\n    .vgd-distributor-hero p {\r\n      font-size: 18px;\r\n    }\r\n\r\n    .vgd-distributor-hero p.vgd-distributor-hero-small {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .vgd-distributor-hero {\r\n      min-height: auto;\r\n      padding: 56px 16px;\r\n    }\r\n\r\n    .vgd-distributor-eyebrow {\r\n      font-size: 12px;\r\n      letter-spacing: 1.5px;\r\n    }\r\n\r\n    .vgd-distributor-hero h1 {\r\n      font-size: 36px;\r\n    }\r\n\r\n    .vgd-distributor-hero p {\r\n      font-size: 17px;\r\n    }\r\n\r\n    .vgd-distributor-hero-actions {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n\r\n    .vgd-distributor-btn {\r\n      width: 100%;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"vgd-distributor-hero\">\r\n  <div class=\"vgd-distributor-hero-inner\">\r\n    <div class=\"vgd-distributor-hero-content\">\r\n      <span class=\"vgd-distributor-eyebrow\">VGD Distributor Tools<\/span>\r\n\r\n      <h1>Find the VGD product your customer needs.<\/h1>\r\n\r\n      <p>\r\n        Select the product, enter the customer\u2019s requirements and get the VGD part number.\r\n      <\/p>\r\n\r\n      <p class=\"vgd-distributor-hero-small\">\r\n        Built to help Vanguard distributors identify products quickly at the counter, by phone or from a customer request.\r\n      <\/p>\r\n\r\n      <div class=\"vgd-distributor-hero-actions\">\r\n        <a href=\"#vgd-product-search\" class=\"vgd-distributor-btn vgd-distributor-btn-primary\">Find a Product<\/a>\r\n        <a href=\"#vgd-product-families\" class=\"vgd-distributor-btn vgd-distributor-btn-secondary\">Browse Product Families<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ae59de elementor-widget elementor-widget-html\" data-id=\"7ae59de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD DISTRIBUTOR TOOLS\r\n     SEARCH + PRODUCT FAMILIES + ACTIVE WORKSPACE\r\n     ========================================================= *\/\r\n\r\n  .vgd-distributor-tools,\r\n  .vgd-distributor-tools * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-distributor-tools {\r\n    width: 100%;\r\n    background: #080d12;\r\n    color: #ffffff;\r\n    font-family: inherit;\r\n  }\r\n\r\n  .vgd-tools-inner {\r\n    width: min(100% - 40px, 1280px);\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .vgd-tools-section {\r\n    padding: 70px 0;\r\n  }\r\n\r\n  .vgd-tools-section + .vgd-tools-section {\r\n    border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  .vgd-tools-eyebrow {\r\n    margin: 0 0 10px;\r\n    color: #f26a21;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    letter-spacing: 1.6px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-tools-heading {\r\n    margin: 0 0 12px;\r\n    color: #ffffff;\r\n    font-size: clamp(30px, 4vw, 44px);\r\n    line-height: 1.08;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-tools-intro {\r\n    max-width: 720px;\r\n    margin: 0 0 32px;\r\n    color: rgba(255, 255, 255, 0.72);\r\n    font-size: 17px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SECTION 2\r\n     SEARCH\r\n     ========================================================= *\/\r\n\r\n  .vgd-search-panel {\r\n    padding: 34px;\r\n    background: #11181e;\r\n    border: 1px solid rgba(255, 255, 255, 0.08);\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .vgd-search-label {\r\n    display: block;\r\n    margin-bottom: 12px;\r\n    color: #ffffff;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-search-wrap {\r\n    position: relative;\r\n  }\r\n\r\n  .vgd-search-row {\r\n    display: flex;\r\n    width: 100%;\r\n  }\r\n\r\n  #vgd-search-input {\r\n    width: 100%;\r\n    height: 58px;\r\n    padding: 0 20px;\r\n    border: 1px solid #4b545c;\r\n    border-right: 0;\r\n    border-radius: 6px 0 0 6px;\r\n    outline: none;\r\n    background: #ffffff;\r\n    color: #13181d;\r\n    font-family: inherit;\r\n    font-size: 17px;\r\n  }\r\n\r\n  #vgd-search-input:focus {\r\n    border-color: #f26a21;\r\n  }\r\n\r\n  .vgd-search-button {\r\n    width: 68px;\r\n    height: 58px;\r\n    border: 0;\r\n    border-radius: 0 6px 6px 0;\r\n    background: #f26a21;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-size: 23px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-search-button:hover {\r\n    background: #ff7a30;\r\n  }\r\n\r\n  .vgd-search-results {\r\n    display: none;\r\n    position: absolute;\r\n    z-index: 20;\r\n    top: calc(100% + 7px);\r\n    left: 0;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    background: #ffffff;\r\n    border-radius: 7px;\r\n    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .vgd-search-results.is-open {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-search-result {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 20px;\r\n    padding: 17px 20px;\r\n    border: 0;\r\n    border-bottom: 1px solid #e4e6e7;\r\n    background: #ffffff;\r\n    color: #11171b;\r\n    text-align: left;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n  }\r\n\r\n  .vgd-search-result:last-child {\r\n    border-bottom: 0;\r\n  }\r\n\r\n  .vgd-search-result:hover {\r\n    background: #f4f5f5;\r\n  }\r\n\r\n  .vgd-search-result-name {\r\n    display: block;\r\n    margin-bottom: 3px;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-search-result-copy {\r\n    display: block;\r\n    color: #697178;\r\n    font-size: 13px;\r\n  }\r\n\r\n  .vgd-search-result-arrow {\r\n    color: #f26a21;\r\n    font-size: 26px;\r\n    line-height: 1;\r\n  }\r\n\r\n  .vgd-search-empty {\r\n    padding: 18px 20px;\r\n    color: #626a70;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .vgd-try-row {\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n    margin-top: 18px;\r\n  }\r\n\r\n  .vgd-try-label {\r\n    margin-right: 3px;\r\n    color: rgba(255, 255, 255, 0.6);\r\n    font-size: 14px;\r\n  }\r\n\r\n  .vgd-try-button {\r\n    padding: 8px 15px;\r\n    border: 1px solid rgba(255, 255, 255, 0.18);\r\n    border-radius: 20px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .vgd-try-button:hover {\r\n    border-color: #f26a21;\r\n    color: #f26a21;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SECTION 3\r\n     PRODUCT FAMILY CARDS\r\n     ========================================================= *\/\r\n\r\n  .vgd-family-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 18px;\r\n  }\r\n\r\n  .vgd-family-card {\r\n    padding: 0;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(255, 255, 255, 0.12);\r\n    border-radius: 8px;\r\n    background: #10171c;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    text-align: left;\r\n    font-family: inherit;\r\n    transition:\r\n      transform 0.2s ease,\r\n      border-color 0.2s ease,\r\n      background 0.2s ease;\r\n  }\r\n\r\n  .vgd-family-card:hover {\r\n    transform: translateY(-3px);\r\n    border-color: #f26a21;\r\n    background: #141d23;\r\n  }\r\n\r\n  .vgd-family-image-placeholder {\r\n    aspect-ratio: 3 \/ 2;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background:\r\n      linear-gradient(\r\n        135deg,\r\n        #1c242a 0%,\r\n        #12191e 100%\r\n      );\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n    color: rgba(255, 255, 255, 0.36);\r\n    text-align: center;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .vgd-family-image {\r\n    width: 100%;\r\n    aspect-ratio: 3 \/ 2;\r\n    display: block;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .vgd-family-card-body {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 15px;\r\n    padding: 20px;\r\n  }\r\n\r\n  .vgd-family-card-title {\r\n    margin: 0;\r\n    color: #ffffff;\r\n    font-size: 19px;\r\n    line-height: 1.2;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-family-card-arrow {\r\n    flex: 0 0 auto;\r\n    color: #f26a21;\r\n    font-size: 28px;\r\n    line-height: 1;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SECTION 4\r\n     ACTIVE WORKSPACE\r\n     ========================================================= *\/\r\n\r\n  #vgd-active-workspace {\r\n    display: none;\r\n    padding: 70px 0;\r\n    background: #0d1318;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n  }\r\n\r\n  #vgd-active-workspace.is-active {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-workspace-panel {\r\n    overflow: hidden;\r\n    background: #121a20;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .vgd-workspace-header {\r\n    padding: 30px 32px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .vgd-workspace-body {\r\n    padding: 32px;\r\n  }\r\n\r\n  .vgd-workspace-title {\r\n    margin: 0 0 8px;\r\n    color: #ffffff;\r\n    font-size: clamp(26px, 4vw, 36px);\r\n    line-height: 1.1;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-workspace-copy {\r\n    margin: 0;\r\n    color: rgba(255, 255, 255, 0.68);\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .vgd-form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 28px;\r\n  }\r\n\r\n  .vgd-field-label {\r\n    display: block;\r\n    margin-bottom: 10px;\r\n    color: #ffffff;\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-field-select {\r\n    width: 100%;\r\n    height: 54px;\r\n    padding: 0 15px;\r\n    border: 1px solid #48525a;\r\n    border-radius: 6px;\r\n    outline: none;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    font-family: inherit;\r\n    font-size: 16px;\r\n  }\r\n\r\n  .vgd-field-select:focus {\r\n    border-color: #f26a21;\r\n  }\r\n\r\n  .vgd-style-options {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 12px;\r\n  }\r\n\r\n  .vgd-style-option {\r\n    position: relative;\r\n  }\r\n\r\n  .vgd-style-option input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .vgd-style-option label {\r\n    min-height: 100px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 15px;\r\n    border: 1px solid #48525a;\r\n    border-radius: 6px;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    text-align: center;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    line-height: 1.35;\r\n  }\r\n\r\n  .vgd-style-option input:checked + label {\r\n    border-color: #f26a21;\r\n    box-shadow: inset 0 0 0 1px #f26a21;\r\n  }\r\n\r\n  .vgd-find-button {\r\n    width: 100%;\r\n    height: 56px;\r\n    margin-top: 18px;\r\n    border: 0;\r\n    border-radius: 6px;\r\n    background: #f26a21;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-find-button:hover {\r\n    background: #ff7a30;\r\n  }\r\n\r\n  .vgd-prototype-note {\r\n    margin: 18px 0 0;\r\n    color: rgba(255, 255, 255, 0.43);\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .vgd-placeholder-module {\r\n    padding: 16px 0 4px;\r\n  }\r\n\r\n  .vgd-placeholder-box {\r\n    padding: 32px;\r\n    border: 1px dashed rgba(255, 255, 255, 0.22);\r\n    border-radius: 8px;\r\n    background: rgba(255, 255, 255, 0.025);\r\n  }\r\n\r\n  .vgd-placeholder-box h3 {\r\n    margin: 0 0 10px;\r\n    color: #ffffff;\r\n    font-size: 23px;\r\n  }\r\n\r\n  .vgd-placeholder-box p {\r\n    margin: 0;\r\n    color: rgba(255, 255, 255, 0.65);\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SECTION 5\r\n     PRODUCT RESULT\r\n     ========================================================= *\/\r\n\r\n  #vgd-product-result {\r\n    display: none;\r\n    padding-top: 24px;\r\n  }\r\n\r\n  #vgd-product-result.is-active {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-result-panel {\r\n    display: grid;\r\n    grid-template-columns: 240px 1fr 260px;\r\n    gap: 28px;\r\n    align-items: center;\r\n    padding: 28px;\r\n    background: #161f25;\r\n    border: 1px solid rgba(255, 255, 255, 0.11);\r\n    border-radius: 9px;\r\n  }\r\n\r\n  .vgd-result-image {\r\n    aspect-ratio: 3 \/ 2;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: #e7e8e9;\r\n    border-radius: 6px;\r\n    color: #757a7d;\r\n    text-align: center;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .vgd-result-heading {\r\n    margin: 0 0 16px;\r\n    color: #ffffff;\r\n    font-size: 25px;\r\n    line-height: 1.2;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-result-details {\r\n    display: grid;\r\n    grid-template-columns: 115px 1fr;\r\n    gap: 7px 14px;\r\n    margin-bottom: 19px;\r\n    color: rgba(255, 255, 255, 0.82);\r\n    font-size: 15px;\r\n  }\r\n\r\n  .vgd-result-label {\r\n    color: rgba(255, 255, 255, 0.5);\r\n  }\r\n\r\n  .vgd-part-label {\r\n    margin: 0 0 6px;\r\n    color: rgba(255, 255, 255, 0.55);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-part-number {\r\n    padding: 12px 15px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    color: #ffffff;\r\n    font-size: 31px;\r\n    line-height: 1;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .vgd-result-actions {\r\n    display: grid;\r\n    gap: 10px;\r\n  }\r\n\r\n  .vgd-result-button {\r\n    min-height: 50px;\r\n    padding: 10px 15px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-align: center;\r\n  }\r\n\r\n  .vgd-result-button.primary {\r\n    border-color: #f26a21;\r\n    background: #f26a21;\r\n  }\r\n\r\n  .vgd-result-button:hover {\r\n    border-color: #f26a21;\r\n  }\r\n\r\n  .vgd-result-button.primary:hover {\r\n    background: #ff7a30;\r\n  }\r\n\r\n  .vgd-back-row {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    padding-top: 20px;\r\n  }\r\n\r\n  .vgd-back-button {\r\n    padding: 12px 18px;\r\n    border: 1px solid #4e585f;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .vgd-back-button:hover {\r\n    border-color: #f26a21;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESPONSIVE\r\n     ========================================================= *\/\r\n\r\n  @media (max-width: 991px) {\r\n    .vgd-family-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .vgd-result-panel {\r\n      grid-template-columns: 180px 1fr;\r\n    }\r\n\r\n    .vgd-result-actions {\r\n      grid-column: 1 \/ -1;\r\n      grid-template-columns: 1fr 1fr;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 700px) {\r\n    .vgd-tools-inner {\r\n      width: min(100% - 30px, 1280px);\r\n    }\r\n\r\n    .vgd-tools-section {\r\n      padding: 52px 0;\r\n    }\r\n\r\n    .vgd-search-panel {\r\n      padding: 22px;\r\n    }\r\n\r\n    .vgd-family-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-form-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-style-options {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-style-option label {\r\n      min-height: 65px;\r\n    }\r\n\r\n    .vgd-workspace-header,\r\n    .vgd-workspace-body {\r\n      padding: 24px 20px;\r\n    }\r\n\r\n    .vgd-result-panel {\r\n      grid-template-columns: 1fr;\r\n      padding: 20px;\r\n    }\r\n\r\n    .vgd-result-image {\r\n      max-width: 360px;\r\n    }\r\n\r\n    .vgd-result-actions {\r\n      grid-column: auto;\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-part-number {\r\n      font-size: 27px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<div class=\"vgd-distributor-tools\">\r\n\r\n\r\n  <!-- =======================================================\r\n       SECTION 2\r\n       SEARCH\r\n       ======================================================= -->\r\n\r\n  <section\r\n    class=\"vgd-tools-section\"\r\n    id=\"vgd-product-search\"\r\n  >\r\n    <div class=\"vgd-tools-inner\">\r\n\r\n      <p class=\"vgd-tools-eyebrow\">\r\n        VGD Distributor Tools\r\n      <\/p>\r\n\r\n      <h2 class=\"vgd-tools-heading\">\r\n        What does your customer need?\r\n      <\/h2>\r\n\r\n      <p class=\"vgd-tools-intro\">\r\n        Search by product name or choose a product family below.\r\n      <\/p>\r\n\r\n      <div class=\"vgd-search-panel\">\r\n\r\n        <label\r\n          class=\"vgd-search-label\"\r\n          for=\"vgd-search-input\"\r\n        >\r\n          Search for a product\r\n        <\/label>\r\n\r\n        <div class=\"vgd-search-wrap\">\r\n\r\n          <div class=\"vgd-search-row\">\r\n\r\n            <input\r\n              id=\"vgd-search-input\"\r\n              type=\"text\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"Shackle, web sling, connector link, wire rope clip...\"\r\n            >\r\n\r\n            <button\r\n              class=\"vgd-search-button\"\r\n              id=\"vgd-search-button\"\r\n              type=\"button\"\r\n              aria-label=\"Search\"\r\n            >\r\n              &#128269;\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n          <div\r\n            class=\"vgd-search-results\"\r\n            id=\"vgd-search-results\"\r\n          ><\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"vgd-try-row\">\r\n\r\n          <span class=\"vgd-try-label\">\r\n            Try:\r\n          <\/span>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-try-button\"\r\n            data-tool=\"shackles\"\r\n          >\r\n            Shackles\r\n          <\/button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-try-button\"\r\n            data-tool=\"slings\"\r\n          >\r\n            Lifting Slings\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n\r\n  <!-- =======================================================\r\n       SECTION 3\r\n       PRODUCT FAMILIES\r\n       ======================================================= -->\r\n\r\n  <section\r\n    class=\"vgd-tools-section\"\r\n    id=\"vgd-product-families\"\r\n  >\r\n    <div class=\"vgd-tools-inner\">\r\n\r\n      <p class=\"vgd-tools-eyebrow\">\r\n        Browse\r\n      <\/p>\r\n\r\n      <h2 class=\"vgd-tools-heading\">\r\n        Select a product family\r\n      <\/h2>\r\n\r\n      <p class=\"vgd-tools-intro\">\r\n        Choose the product group that best matches the customer request.\r\n      <\/p>\r\n\r\n\r\n      <div class=\"vgd-family-grid\">\r\n\r\n\r\n        <!-- SHACKLES -->\r\n\r\n        <button\r\n          class=\"vgd-family-card\"\r\n          type=\"button\"\r\n          data-tool=\"shackles\"\r\n        >\r\n\r\n<img decoding=\"async\"\r\n  class=\"vgd-family-image lazyload\"\r\n  data-src=\"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/GP-Anchor-Shackle.webp\"\r\n  alt=\"VGD Golden Pin shackle\"\r\n src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/800;\">\r\n\r\n          <div class=\"vgd-family-card-body\">\r\n            <h3 class=\"vgd-family-card-title\">\r\n              Shackles\r\n            <\/h3>\r\n\r\n            <span class=\"vgd-family-card-arrow\">\r\n              \u203a\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/button>\r\n\r\n\r\n        <!-- LIFTING SLINGS -->\r\n\r\n        <button\r\n          class=\"vgd-family-card\"\r\n          type=\"button\"\r\n          data-tool=\"slings\"\r\n        >\r\n\r\n<img decoding=\"async\"\r\n  class=\"vgd-family-image lazyload\"\r\n  data-src=\"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2025\/01\/Polyester-Lifting-Slings-E-type-3-2024-720x420-min.png\"\r\n  alt=\"LIFTING slings\"\r\n src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 720px; --smush-placeholder-aspect-ratio: 720\/420;\">\r\n\r\n          <div class=\"vgd-family-card-body\">\r\n            <h3 class=\"vgd-family-card-title\">\r\n              Lifting Slings\r\n            <\/h3>\r\n\r\n            <span class=\"vgd-family-card-arrow\">\r\n              \u203a\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/button>\r\n\r\n\r\n        <!-- GRADE 100 -->\r\n\r\n        <button\r\n          class=\"vgd-family-card\"\r\n          type=\"button\"\r\n          data-tool=\"grade100\"\r\n        >\r\n\r\n          <div class=\"vgd-family-image-placeholder\">\r\n            IMAGE PLACEHOLDER<br>\r\n            1200 \u00d7 800\r\n          <\/div>\r\n\r\n          <div class=\"vgd-family-card-body\">\r\n            <h3 class=\"vgd-family-card-title\">\r\n              Grade 100 Components\r\n            <\/h3>\r\n\r\n            <span class=\"vgd-family-card-arrow\">\r\n              \u203a\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/button>\r\n\r\n\r\n        <!-- GRADE 80 -->\r\n\r\n        <button\r\n          class=\"vgd-family-card\"\r\n          type=\"button\"\r\n          data-tool=\"grade80\"\r\n        >\r\n\r\n          <div class=\"vgd-family-image-placeholder\">\r\n            IMAGE PLACEHOLDER<br>\r\n            1200 \u00d7 800\r\n          <\/div>\r\n\r\n          <div class=\"vgd-family-card-body\">\r\n            <h3 class=\"vgd-family-card-title\">\r\n              Grade 80 Components\r\n            <\/h3>\r\n\r\n            <span class=\"vgd-family-card-arrow\">\r\n              \u203a\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/button>\r\n\r\n\r\n        <!-- WIRE ROPE HARDWARE -->\r\n\r\n        <button\r\n          class=\"vgd-family-card\"\r\n          type=\"button\"\r\n          data-tool=\"wirerope\"\r\n        >\r\n\r\n          <div class=\"vgd-family-image-placeholder\">\r\n            IMAGE PLACEHOLDER<br>\r\n            1200 \u00d7 800\r\n          <\/div>\r\n\r\n          <div class=\"vgd-family-card-body\">\r\n            <h3 class=\"vgd-family-card-title\">\r\n              Wire Rope Hardware\r\n            <\/h3>\r\n\r\n            <span class=\"vgd-family-card-arrow\">\r\n              \u203a\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/button>\r\n\r\n\r\n        <!-- CARGO CONTROL -->\r\n\r\n        <button\r\n          class=\"vgd-family-card\"\r\n          type=\"button\"\r\n          data-tool=\"cargo\"\r\n        >\r\n\r\n          <div class=\"vgd-family-image-placeholder\">\r\n            IMAGE PLACEHOLDER<br>\r\n            1200 \u00d7 800\r\n          <\/div>\r\n\r\n          <div class=\"vgd-family-card-body\">\r\n            <h3 class=\"vgd-family-card-title\">\r\n              Cargo Control\r\n            <\/h3>\r\n\r\n            <span class=\"vgd-family-card-arrow\">\r\n              \u203a\r\n            <\/span>\r\n          <\/div>\r\n\r\n        <\/button>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n\r\n  <!-- =======================================================\r\n       SECTION 4\r\n       SHARED ACTIVE WORKSPACE\r\n       ======================================================= -->\r\n\r\n  <section id=\"vgd-active-workspace\">\r\n\r\n    <div class=\"vgd-tools-inner\">\r\n\r\n      <div\r\n        class=\"vgd-workspace-panel\"\r\n        id=\"vgd-workspace-panel\"\r\n      >\r\n\r\n        <!-- Javascript loads the selected tool here -->\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- ===================================================\r\n           SECTION 5\r\n           PRODUCT RESULT\r\n           =================================================== -->\r\n\r\n      <div id=\"vgd-product-result\">\r\n\r\n        <div class=\"vgd-result-panel\">\r\n\r\n          <div class=\"vgd-result-image\">\r\n            PRODUCT IMAGE<br>\r\n            1200 \u00d7 800\r\n          <\/div>\r\n\r\n          <div>\r\n\r\n            <h3\r\n              class=\"vgd-result-heading\"\r\n              id=\"vgd-result-heading\"\r\n            ><\/h3>\r\n\r\n            <div\r\n              class=\"vgd-result-details\"\r\n              id=\"vgd-result-details\"\r\n            ><\/div>\r\n\r\n            <p class=\"vgd-part-label\">\r\n              VGD Part Number\r\n            <\/p>\r\n\r\n            <div\r\n              class=\"vgd-part-number\"\r\n              id=\"vgd-part-number\"\r\n            ><\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"vgd-result-actions\">\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"vgd-result-button primary\"\r\n              id=\"vgd-copy-part\"\r\n            >\r\n              Copy Part Number\r\n            <\/button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"vgd-result-button\"\r\n              id=\"vgd-copy-description\"\r\n            >\r\n              Copy Product Description\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-back-row\">\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-back-button\"\r\n          id=\"vgd-back-families\"\r\n        >\r\n          Back to Product Families\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* =========================================================\r\n     PRODUCT SEARCH INDEX\r\n     ========================================================= *\/\r\n\r\n  const productIndex = [\r\n\r\n    {\r\n      key: \"shackles\",\r\n      name: \"VGD Shackles\",\r\n      description: \"Golden Pin anchor, bolt type and chain shackles\",\r\n      keywords: [\r\n        \"shackle\",\r\n        \"shackles\",\r\n        \"anchor shackle\",\r\n        \"bow shackle\",\r\n        \"gold pin\",\r\n        \"golden pin\",\r\n        \"safety shackle\",\r\n        \"chain shackle\"\r\n      ]\r\n    },\r\n\r\n    {\r\n      key: \"slings\",\r\n      name: \"VGD Lifting Slings\",\r\n      description: \"Polyester web slings and lifting sling selection\",\r\n      keywords: [\r\n        \"sling\",\r\n        \"slings\",\r\n        \"web sling\",\r\n        \"poly sling\",\r\n        \"polyester sling\",\r\n        \"lifting sling\",\r\n        \"flat sling\"\r\n      ]\r\n    },\r\n\r\n    {\r\n      key: \"grade100\",\r\n      name: \"Grade 100 Components\",\r\n      description: \"Chain and Grade 100 lifting components\",\r\n      keywords: [\r\n        \"grade 100\",\r\n        \"g100\",\r\n        \"connector link\",\r\n        \"grab hook\",\r\n        \"sling hook\",\r\n        \"master link\"\r\n      ]\r\n    },\r\n\r\n    {\r\n      key: \"grade80\",\r\n      name: \"Grade 80 Components\",\r\n      description: \"Chain and Grade 80 lifting components\",\r\n      keywords: [\r\n        \"grade 80\",\r\n        \"g80\",\r\n        \"grade 80 chain\",\r\n        \"grade 80 hook\"\r\n      ]\r\n    },\r\n\r\n    {\r\n      key: \"wirerope\",\r\n      name: \"Wire Rope Hardware\",\r\n      description: \"Clips, thimbles and wire rope fittings\",\r\n      keywords: [\r\n        \"wire rope\",\r\n        \"wire rope clip\",\r\n        \"cable clip\",\r\n        \"clip\",\r\n        \"thimble\"\r\n      ]\r\n    },\r\n\r\n    {\r\n      key: \"cargo\",\r\n      name: \"Cargo Control\",\r\n      description: \"Load binders and cargo control hardware\",\r\n      keywords: [\r\n        \"cargo control\",\r\n        \"binder\",\r\n        \"load binder\",\r\n        \"transport chain\"\r\n      ]\r\n    }\r\n\r\n  ];\r\n\r\n\r\n  \/* =========================================================\r\n     BASIC SHACKLE PROTOTYPE DATA\r\n\r\n     Common sizes only for the prototype.\r\n     Full catalogue data can replace this later.\r\n     ========================================================= *\/\r\n\r\n  const shackleSizes = [\r\n\r\n    {\r\n      size: '7\/16\"',\r\n      wll: '1-1\/2 Ton',\r\n      codeEnd: '0028'\r\n    },\r\n\r\n    {\r\n      size: '1\/2\"',\r\n      wll: '2 Ton',\r\n      codeEnd: '0032'\r\n    },\r\n\r\n    {\r\n      size: '5\/8\"',\r\n      wll: '3-1\/4 Ton',\r\n      codeEnd: '0040'\r\n    },\r\n\r\n    {\r\n      size: '3\/4\"',\r\n      wll: '4-3\/4 Ton',\r\n      codeEnd: '0048'\r\n    },\r\n\r\n    {\r\n      size: '7\/8\"',\r\n      wll: '6-1\/2 Ton',\r\n      codeEnd: '0056'\r\n    },\r\n\r\n    {\r\n      size: '1\"',\r\n      wll: '8-1\/2 Ton',\r\n      codeEnd: '0100'\r\n    },\r\n\r\n    {\r\n      size: '1-1\/8\"',\r\n      wll: '9-1\/2 Ton',\r\n      codeEnd: '0108'\r\n    },\r\n\r\n    {\r\n      size: '1-1\/4\"',\r\n      wll: '12 Ton',\r\n      codeEnd: '0116'\r\n    },\r\n\r\n    {\r\n      size: '1-3\/8\"',\r\n      wll: '13-1\/2 Ton',\r\n      codeEnd: '0124'\r\n    },\r\n\r\n    {\r\n      size: '1-1\/2\"',\r\n      wll: '17 Ton',\r\n      codeEnd: '0132'\r\n    }\r\n\r\n  ];\r\n\r\n\r\n  const shackleTypes = {\r\n\r\n    anchor: {\r\n      name: \"VGD Golden Pin Screw Pin Anchor Shackle\",\r\n      series: \"2902 Series\",\r\n      prefix: \"2902\"\r\n    },\r\n\r\n    bolt: {\r\n      name: \"VGD Golden Pin Bolt Type Anchor Shackle\",\r\n      series: \"2914 Series\",\r\n      prefix: \"2914\"\r\n    },\r\n\r\n    chain: {\r\n      name: \"VGD Golden Pin Screw Pin Chain Shackle\",\r\n      series: \"3912 Series\",\r\n      prefix: \"3912\"\r\n    }\r\n\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     SIMPLE TYPE 3 WEB SLING PROTOTYPE DATA\r\n     ========================================================= *\/\r\n\r\n  const slingWidths = {\r\n\r\n    1: {\r\n      width: '1\"',\r\n      model: \"EE2-901\",\r\n      vertical: \"3,100 lb\",\r\n      widthCode: \"01\"\r\n    },\r\n\r\n    2: {\r\n      width: '2\"',\r\n      model: \"EE2-902\",\r\n      vertical: \"6,200 lb\",\r\n      widthCode: \"02\"\r\n    },\r\n\r\n    3: {\r\n      width: '3\"',\r\n      model: \"EE2-903\",\r\n      vertical: \"8,800 lb\",\r\n      widthCode: \"03\"\r\n    },\r\n\r\n    4: {\r\n      width: '4\"',\r\n      model: \"EE2-904\",\r\n      vertical: \"11,000 lb\",\r\n      widthCode: \"04\"\r\n    }\r\n\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     ELEMENTS\r\n     ========================================================= *\/\r\n\r\n  const searchInput =\r\n    document.getElementById(\"vgd-search-input\");\r\n\r\n  const searchButton =\r\n    document.getElementById(\"vgd-search-button\");\r\n\r\n  const searchResults =\r\n    document.getElementById(\"vgd-search-results\");\r\n\r\n  const workspace =\r\n    document.getElementById(\"vgd-active-workspace\");\r\n\r\n  const workspacePanel =\r\n    document.getElementById(\"vgd-workspace-panel\");\r\n\r\n  const productResult =\r\n    document.getElementById(\"vgd-product-result\");\r\n\r\n  const resultHeading =\r\n    document.getElementById(\"vgd-result-heading\");\r\n\r\n  const resultDetails =\r\n    document.getElementById(\"vgd-result-details\");\r\n\r\n  const partNumber =\r\n    document.getElementById(\"vgd-part-number\");\r\n\r\n  const copyPartButton =\r\n    document.getElementById(\"vgd-copy-part\");\r\n\r\n  const copyDescriptionButton =\r\n    document.getElementById(\"vgd-copy-description\");\r\n\r\n  const backFamilies =\r\n    document.getElementById(\"vgd-back-families\");\r\n\r\n\r\n  let currentDescription = \"\";\r\n  let currentPartNumber = \"\";\r\n\r\n\r\n  \/* =========================================================\r\n     SEARCH\r\n     ========================================================= *\/\r\n\r\n  function runSearch() {\r\n\r\n    const term =\r\n      searchInput.value.trim().toLowerCase();\r\n\r\n    if (!term) {\r\n      searchResults.classList.remove(\"is-open\");\r\n      searchResults.innerHTML = \"\";\r\n      return;\r\n    }\r\n\r\n\r\n    const matches =\r\n      productIndex.filter(function (item) {\r\n\r\n        const searchable =\r\n          item.name.toLowerCase() +\r\n          \" \" +\r\n          item.description.toLowerCase() +\r\n          \" \" +\r\n          item.keywords.join(\" \").toLowerCase();\r\n\r\n        return searchable.includes(term);\r\n\r\n      });\r\n\r\n\r\n    if (!matches.length) {\r\n\r\n      searchResults.innerHTML =\r\n        '<div class=\"vgd-search-empty\">' +\r\n        'No matching product found yet.' +\r\n        '<\/div>';\r\n\r\n      searchResults.classList.add(\"is-open\");\r\n\r\n      return;\r\n    }\r\n\r\n\r\n    searchResults.innerHTML =\r\n      matches.map(function (item) {\r\n\r\n        return (\r\n          '<button type=\"button\" ' +\r\n          'class=\"vgd-search-result\" ' +\r\n          'data-tool=\"' + item.key + '\">' +\r\n\r\n            '<span>' +\r\n\r\n              '<span class=\"vgd-search-result-name\">' +\r\n                item.name +\r\n              '<\/span>' +\r\n\r\n              '<span class=\"vgd-search-result-copy\">' +\r\n                item.description +\r\n              '<\/span>' +\r\n\r\n            '<\/span>' +\r\n\r\n            '<span class=\"vgd-search-result-arrow\">\u203a<\/span>' +\r\n\r\n          '<\/button>'\r\n        );\r\n\r\n      }).join(\"\");\r\n\r\n\r\n    searchResults.classList.add(\"is-open\");\r\n\r\n  }\r\n\r\n\r\n  searchInput.addEventListener(\r\n    \"input\",\r\n    runSearch\r\n  );\r\n\r\n\r\n  searchInput.addEventListener(\r\n    \"keydown\",\r\n    function (event) {\r\n\r\n      if (event.key === \"Enter\") {\r\n\r\n        event.preventDefault();\r\n\r\n        const firstResult =\r\n          searchResults.querySelector(\r\n            \".vgd-search-result\"\r\n          );\r\n\r\n        if (firstResult) {\r\n          firstResult.click();\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  searchButton.addEventListener(\r\n    \"click\",\r\n    runSearch\r\n  );\r\n\r\n\r\n  searchResults.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const result =\r\n        event.target.closest(\r\n          \"[data-tool]\"\r\n        );\r\n\r\n      if (!result) {\r\n        return;\r\n      }\r\n\r\n      loadTool(\r\n        result.dataset.tool\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      if (\r\n        !event.target.closest(\r\n          \".vgd-search-wrap\"\r\n        )\r\n      ) {\r\n\r\n        searchResults.classList.remove(\r\n          \"is-open\"\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     FAMILY CARDS + TRY BUTTONS\r\n     ========================================================= *\/\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const trigger =\r\n        event.target.closest(\r\n          \".vgd-family-card, .vgd-try-button\"\r\n        );\r\n\r\n      if (!trigger) {\r\n        return;\r\n      }\r\n\r\n      loadTool(\r\n        trigger.dataset.tool\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     LOAD ACTIVE TOOL\r\n     ========================================================= *\/\r\n\r\n  function loadTool(tool) {\r\n\r\n    searchResults.classList.remove(\r\n      \"is-open\"\r\n    );\r\n\r\n    productResult.classList.remove(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    if (tool === \"shackles\") {\r\n\r\n      loadShackleTool();\r\n\r\n    }\r\n\r\n    else if (tool === \"slings\") {\r\n\r\n      loadSlingTool();\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      loadPlaceholderTool(tool);\r\n\r\n    }\r\n\r\n\r\n    workspace.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      workspace.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"start\"\r\n      });\r\n\r\n    }, 50);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SHACKLE TOOL\r\n     ========================================================= *\/\r\n\r\n  function loadShackleTool() {\r\n\r\n    const wllOptions =\r\n      shackleSizes.map(function (item, index) {\r\n\r\n        return (\r\n          '<option value=\"' + index + '\">' +\r\n            item.wll +\r\n          '<\/option>'\r\n        );\r\n\r\n      }).join(\"\");\r\n\r\n\r\n    workspacePanel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Golden Pin Shackles\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          VGD Shackle Finder\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          Select the shackle style and required working\r\n          load limit.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n        <div class=\"vgd-form-grid\">\r\n\r\n\r\n          <div>\r\n\r\n            <span class=\"vgd-field-label\">\r\n              1. Shackle Style\r\n            <\/span>\r\n\r\n            <div class=\"vgd-style-options\">\r\n\r\n\r\n              <div class=\"vgd-style-option\">\r\n\r\n                <input\r\n                  type=\"radio\"\r\n                  name=\"vgd-shackle-style\"\r\n                  id=\"vgd-anchor\"\r\n                  value=\"anchor\"\r\n                  checked\r\n                >\r\n\r\n                <label for=\"vgd-anchor\">\r\n                  Screw Pin<br>\r\n                  Anchor Shackle\r\n                <\/label>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"vgd-style-option\">\r\n\r\n                <input\r\n                  type=\"radio\"\r\n                  name=\"vgd-shackle-style\"\r\n                  id=\"vgd-bolt\"\r\n                  value=\"bolt\"\r\n                >\r\n\r\n                <label for=\"vgd-bolt\">\r\n                  Bolt Type<br>\r\n                  Anchor Shackle\r\n                <\/label>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"vgd-style-option\">\r\n\r\n                <input\r\n                  type=\"radio\"\r\n                  name=\"vgd-shackle-style\"\r\n                  id=\"vgd-chain\"\r\n                  value=\"chain\"\r\n                >\r\n\r\n                <label for=\"vgd-chain\">\r\n                  Screw Pin<br>\r\n                  Chain Shackle\r\n                <\/label>\r\n\r\n              <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div>\r\n\r\n            <label\r\n              class=\"vgd-field-label\"\r\n              for=\"vgd-shackle-wll\"\r\n            >\r\n              2. Required Working Load Limit\r\n            <\/label>\r\n\r\n            <select\r\n              class=\"vgd-field-select\"\r\n              id=\"vgd-shackle-wll\"\r\n            >\r\n\r\n              <option value=\"\">\r\n                Select WLL\r\n              <\/option>\r\n\r\n              ${wllOptions}\r\n\r\n            <\/select>\r\n\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"vgd-find-button\"\r\n              id=\"vgd-find-shackle\"\r\n            >\r\n              Find Product\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <p class=\"vgd-prototype-note\">\r\n          Prototype selection set for distributor tool testing.\r\n          The complete catalogue table can be inserted after\r\n          the page concept is approved.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    document\r\n      .getElementById(\"vgd-find-shackle\")\r\n      .addEventListener(\r\n        \"click\",\r\n        findShackle\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function findShackle() {\r\n\r\n    const selectedStyle =\r\n      document.querySelector(\r\n        'input[name=\"vgd-shackle-style\"]:checked'\r\n      );\r\n\r\n    const selectedSize =\r\n      document.getElementById(\r\n        \"vgd-shackle-wll\"\r\n      ).value;\r\n\r\n\r\n    if (!selectedStyle || selectedSize === \"\") {\r\n\r\n      alert(\r\n        \"Please select a shackle style and working load limit.\"\r\n      );\r\n\r\n      return;\r\n    }\r\n\r\n\r\n    const type =\r\n      shackleTypes[\r\n        selectedStyle.value\r\n      ];\r\n\r\n    const size =\r\n      shackleSizes[\r\n        Number(selectedSize)\r\n      ];\r\n\r\n    const code =\r\n      type.prefix +\r\n      size.codeEnd;\r\n\r\n\r\n    showResult({\r\n\r\n      heading:\r\n        type.name,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        type.name +\r\n        \", \" +\r\n        size.size +\r\n        \", WLL \" +\r\n        size.wll +\r\n        \", VGD \" +\r\n        code,\r\n\r\n      details: [\r\n        [\"Series\", type.series],\r\n        [\"Size\", size.size],\r\n        [\"WLL\", size.wll]\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SLING TOOL\r\n     ========================================================= *\/\r\n\r\n  function loadSlingTool() {\r\n\r\n    workspacePanel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Lifting Slings\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          Polyester Web Sling Finder\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          Select the sling width and finished length.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n        <div class=\"vgd-form-grid\">\r\n\r\n\r\n          <div>\r\n\r\n            <label\r\n              class=\"vgd-field-label\"\r\n              for=\"vgd-sling-width\"\r\n            >\r\n              1. Sling Width\r\n            <\/label>\r\n\r\n            <select\r\n              class=\"vgd-field-select\"\r\n              id=\"vgd-sling-width\"\r\n            >\r\n\r\n              <option value=\"\">\r\n                Select Width\r\n              <\/option>\r\n\r\n              <option value=\"1\">\r\n                1 inch\r\n              <\/option>\r\n\r\n              <option value=\"2\">\r\n                2 inch\r\n              <\/option>\r\n\r\n              <option value=\"3\">\r\n                3 inch\r\n              <\/option>\r\n\r\n              <option value=\"4\">\r\n                4 inch\r\n              <\/option>\r\n\r\n            <\/select>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div>\r\n\r\n            <label\r\n              class=\"vgd-field-label\"\r\n              for=\"vgd-sling-length\"\r\n            >\r\n              2. Finished Length\r\n            <\/label>\r\n\r\n            <select\r\n              class=\"vgd-field-select\"\r\n              id=\"vgd-sling-length\"\r\n            >\r\n\r\n              <option value=\"\">\r\n                Select Length\r\n              <\/option>\r\n\r\n              <option value=\"02\">2 ft<\/option>\r\n              <option value=\"04\">4 ft<\/option>\r\n              <option value=\"06\">6 ft<\/option>\r\n              <option value=\"08\">8 ft<\/option>\r\n              <option value=\"10\">10 ft<\/option>\r\n              <option value=\"12\">12 ft<\/option>\r\n              <option value=\"16\">16 ft<\/option>\r\n              <option value=\"20\">20 ft<\/option>\r\n\r\n            <\/select>\r\n\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"vgd-find-button\"\r\n              id=\"vgd-find-sling\"\r\n            >\r\n              Find Product\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <p class=\"vgd-prototype-note\">\r\n          Type 3 eye and eye polyester web sling prototype.\r\n          Additional sling styles can be connected later.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    document\r\n      .getElementById(\"vgd-find-sling\")\r\n      .addEventListener(\r\n        \"click\",\r\n        findSling\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function findSling() {\r\n\r\n    const widthValue =\r\n      document.getElementById(\r\n        \"vgd-sling-width\"\r\n      ).value;\r\n\r\n    const lengthValue =\r\n      document.getElementById(\r\n        \"vgd-sling-length\"\r\n      ).value;\r\n\r\n\r\n    if (!widthValue || !lengthValue) {\r\n\r\n      alert(\r\n        \"Please select a sling width and length.\"\r\n      );\r\n\r\n      return;\r\n    }\r\n\r\n\r\n    const sling =\r\n      slingWidths[\r\n        widthValue\r\n      ];\r\n\r\n    const lengthNumber =\r\n      Number(lengthValue);\r\n\r\n    const code =\r\n      \"3403\" +\r\n      sling.widthCode +\r\n      lengthValue;\r\n\r\n\r\n    const productName =\r\n      \"VGD Type 3 Polyester Web Sling\";\r\n\r\n\r\n    showResult({\r\n\r\n      heading:\r\n        productName,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        productName +\r\n        \", \" +\r\n        sling.model +\r\n        \" x \" +\r\n        lengthNumber +\r\n        \" ft, Vertical WLL \" +\r\n        sling.vertical +\r\n        \", VGD \" +\r\n        code,\r\n\r\n      details: [\r\n        [\"Model\", sling.model],\r\n        [\"Width\", sling.width],\r\n        [\"Length\", lengthNumber + \" ft\"],\r\n        [\"Vertical WLL\", sling.vertical]\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PLACEHOLDER TOOLS\r\n     ========================================================= *\/\r\n\r\n  function loadPlaceholderTool(tool) {\r\n\r\n    const names = {\r\n\r\n      grade100:\r\n        \"Grade 100 Components\",\r\n\r\n      grade80:\r\n        \"Grade 80 Components\",\r\n\r\n      wirerope:\r\n        \"Wire Rope Hardware\",\r\n\r\n      cargo:\r\n        \"Cargo Control\"\r\n\r\n    };\r\n\r\n\r\n    const name =\r\n      names[tool] ||\r\n      \"Product Finder\";\r\n\r\n\r\n    workspacePanel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Distributor Tools\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          ${name}\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          This product family is now part of the distributor\r\n          tool framework.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n        <div class=\"vgd-placeholder-module\">\r\n\r\n          <div class=\"vgd-placeholder-box\">\r\n\r\n            <h3>\r\n              Selector Module Placeholder\r\n            <\/h3>\r\n\r\n            <p>\r\n              The product family is connected to the shared\r\n              workspace. The selector questions and VGD product\r\n              data will be added after the distributor tool\r\n              concept is approved.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT RESULT\r\n     ========================================================= *\/\r\n\r\n  function showResult(data) {\r\n\r\n    currentPartNumber =\r\n      data.partNumber;\r\n\r\n    currentDescription =\r\n      data.description;\r\n\r\n\r\n    resultHeading.textContent =\r\n      data.heading;\r\n\r\n    partNumber.textContent =\r\n      data.partNumber;\r\n\r\n\r\n    resultDetails.innerHTML =\r\n      data.details.map(function (item) {\r\n\r\n        return (\r\n          '<div class=\"vgd-result-label\">' +\r\n            item[0] +\r\n          '<\/div>' +\r\n\r\n          '<div>' +\r\n            item[1] +\r\n          '<\/div>'\r\n        );\r\n\r\n      }).join(\"\");\r\n\r\n\r\n    productResult.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      productResult.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"nearest\"\r\n      });\r\n\r\n    }, 80);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY BUTTONS\r\n     ========================================================= *\/\r\n\r\n  function copyText(text) {\r\n\r\n    if (\r\n      navigator.clipboard &&\r\n      window.isSecureContext\r\n    ) {\r\n\r\n      navigator.clipboard.writeText(\r\n        text\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const temporary =\r\n      document.createElement(\r\n        \"textarea\"\r\n      );\r\n\r\n    temporary.value =\r\n      text;\r\n\r\n    document.body.appendChild(\r\n      temporary\r\n    );\r\n\r\n    temporary.select();\r\n\r\n    document.execCommand(\r\n      \"copy\"\r\n    );\r\n\r\n    temporary.remove();\r\n\r\n  }\r\n\r\n\r\n  copyPartButton.addEventListener(\r\n    \"click\",\r\n    function () {\r\n\r\n      copyText(\r\n        currentPartNumber\r\n      );\r\n\r\n      const original =\r\n        copyPartButton.textContent;\r\n\r\n      copyPartButton.textContent =\r\n        \"Copied\";\r\n\r\n      setTimeout(function () {\r\n\r\n        copyPartButton.textContent =\r\n          original;\r\n\r\n      }, 1200);\r\n\r\n    }\r\n  );\r\n\r\n\r\n  copyDescriptionButton.addEventListener(\r\n    \"click\",\r\n    function () {\r\n\r\n      copyText(\r\n        currentDescription\r\n      );\r\n\r\n      const original =\r\n        copyDescriptionButton.textContent;\r\n\r\n      copyDescriptionButton.textContent =\r\n        \"Copied\";\r\n\r\n      setTimeout(function () {\r\n\r\n        copyDescriptionButton.textContent =\r\n          original;\r\n\r\n      }, 1200);\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     BACK TO PRODUCT FAMILIES\r\n     ========================================================= *\/\r\n\r\n  backFamilies.addEventListener(\r\n    \"click\",\r\n    function () {\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-product-families\"\r\n        )\r\n        .scrollIntoView({\r\n          behavior: \"smooth\",\r\n          block: \"start\"\r\n        });\r\n\r\n    }\r\n  );\r\n\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0910ed5 elementor-widget elementor-widget-html\" data-id=\"0910ed5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD COMPLETE SHACKLE DISTRIBUTOR MODULE\r\n     ========================================================= *\/\r\n\r\n  .vgd-shackle-full-options,\r\n  .vgd-shackle-full-options * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-shackle-full-options {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 14px;\r\n  }\r\n\r\n  .vgd-shackle-full-option {\r\n    position: relative;\r\n  }\r\n\r\n  .vgd-shackle-full-option input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .vgd-shackle-full-option label {\r\n    height: 100%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border: 1px solid #48525a;\r\n    border-radius: 7px;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    transition:\r\n      border-color 0.2s ease,\r\n      background 0.2s ease,\r\n      transform 0.2s ease;\r\n  }\r\n\r\n  .vgd-shackle-full-option label:hover {\r\n    border-color: #f26a21;\r\n    background: #141d23;\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .vgd-shackle-full-option input:checked + label {\r\n    border-color: #f26a21;\r\n    box-shadow: inset 0 0 0 1px #f26a21;\r\n    background: #141d23;\r\n  }\r\n\r\n  .vgd-shackle-style-image {\r\n    width: 100%;\r\n    aspect-ratio: 3 \/ 2;\r\n    display: block;\r\n    object-fit: cover;\r\n    background: #e5e6e7;\r\n    border-bottom: 1px solid rgba(255,255,255,0.08);\r\n  }\r\n\r\n  .vgd-shackle-style-title {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 70px;\r\n    padding: 14px 12px;\r\n    text-align: center;\r\n    font-size: 14px;\r\n    line-height: 1.35;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-shackle-size-area {\r\n    margin-top: 28px;\r\n    max-width: 660px;\r\n  }\r\n\r\n  .vgd-shackle-style-note {\r\n    display: none;\r\n    margin-top: 16px;\r\n    padding: 13px 15px;\r\n    border-left: 3px solid #f26a21;\r\n    background: rgba(242, 106, 33, 0.08);\r\n    color: rgba(255,255,255,0.82);\r\n    font-size: 13px;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  .vgd-shackle-style-note.is-active {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-shackle-warning-text {\r\n    color: #f26a21;\r\n    font-weight: 800;\r\n  }\r\n\r\n  #vgd-shackle-specs-link {\r\n    display: none;\r\n    min-height: 50px;\r\n    padding: 10px 15px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-align: center;\r\n  }\r\n\r\n  #vgd-shackle-specs-link.is-active {\r\n    display: flex;\r\n  }\r\n\r\n  #vgd-shackle-specs-link:hover {\r\n    border-color: #f26a21;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .vgd-result-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .vgd-shackle-full-options {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .vgd-shackle-full-options {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-shackle-style-image {\r\n      aspect-ratio: 3 \/ 2;\r\n    }\r\n\r\n    .vgd-shackle-style-title {\r\n      min-height: 58px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* =========================================================\r\n     SHACKLE CATALOG\r\n     ========================================================= *\/\r\n\r\n  const SHACKLE_PDF =\r\n    \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2020\/06\/Shackles-Rev1-2018-compressed.pdf\";\r\n\r\n\r\n  \/* =========================================================\r\n     SHACKLE IMAGES\r\n     ========================================================= *\/\r\n\r\n  const SHACKLE_IMAGES = {\r\n\r\n    anchor:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/GP-Anchor-Shackle.webp\",\r\n\r\n    bolt:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/GP-Safety-Anchor-Shackle.webp\",\r\n\r\n    chain:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/GP-Chain-Shackle.webp\",\r\n\r\n    silver:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-silver-pin-anchor-shackle-1200x800-1.webp\",\r\n\r\n    nonrated:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/VGD-Non-Rated.vgd-non-rated-shackle-2946-1200x800-1.webp\",\r\n\r\n    stainless:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-stainless-steel-shackle-3913-1200x800-1.webp\"\r\n\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT DATA\r\n     ========================================================= *\/\r\n\r\n  const SHACKLE_STYLES = {\r\n\r\n\r\n    \/* ---------------------------------------------------------\r\n       GOLDEN PIN SCREW PIN ANCHOR\r\n       --------------------------------------------------------- *\/\r\n\r\n    anchor: {\r\n\r\n      name:\r\n        \"VGD Golden Pin Screw Pin Anchor Shackle\",\r\n\r\n      shortName:\r\n        \"Golden Pin Screw Pin Anchor Shackle\",\r\n\r\n      series:\r\n        \"2902 Series\",\r\n\r\n      resourceLabel:\r\n        \"2902\",\r\n\r\n      page:\r\n        4,\r\n\r\n      image:\r\n        SHACKLE_IMAGES.anchor,\r\n\r\n      alt:\r\n        \"VGD Golden Pin screw pin anchor shackle\",\r\n\r\n      products: [\r\n\r\n        { size: \"3\/16\", wll: \"1\/3 Ton\", code: \"29020012\" },\r\n        { size: \"1\/4\", wll: \"1\/2 Ton\", code: \"29020016\" },\r\n        { size: \"5\/16\", wll: \"3\/4 Ton\", code: \"29020020\" },\r\n        { size: \"3\/8\", wll: \"1 Ton\", code: \"29020024\" },\r\n        { size: \"7\/16\", wll: \"1-1\/2 Ton\", code: \"29020028\" },\r\n        { size: \"1\/2\", wll: \"2 Ton\", code: \"29020032\" },\r\n        { size: \"5\/8\", wll: \"3-1\/4 Ton\", code: \"29020040\" },\r\n        { size: \"3\/4\", wll: \"4-3\/4 Ton\", code: \"29020048\" },\r\n        { size: \"7\/8\", wll: \"6-1\/2 Ton\", code: \"29020056\" },\r\n        { size: \"1\", wll: \"8-1\/2 Ton\", code: \"29020100\" },\r\n        { size: \"1-1\/8\", wll: \"9-1\/2 Ton\", code: \"29020108\" },\r\n        { size: \"1-1\/4\", wll: \"12 Ton\", code: \"29020116\" },\r\n        { size: \"1-3\/8\", wll: \"13-1\/2 Ton\", code: \"29020124\" },\r\n        { size: \"1-1\/2\", wll: \"17 Ton\", code: \"29020132\" },\r\n        { size: \"1-3\/4\", wll: \"25 Ton\", code: \"29020148\" },\r\n        { size: \"2\", wll: \"35 Ton\", code: \"29020200\" },\r\n        { size: \"2-1\/2\", wll: \"55 Ton\", code: \"29020232\" }\r\n\r\n      ]\r\n\r\n    },\r\n\r\n\r\n    \/* ---------------------------------------------------------\r\n       GOLDEN PIN BOLT TYPE ANCHOR\r\n       --------------------------------------------------------- *\/\r\n\r\n    bolt: {\r\n\r\n      name:\r\n        \"VGD Golden Pin Bolt Type Anchor Shackle\",\r\n\r\n      shortName:\r\n        \"Golden Pin Bolt Type Anchor Shackle\",\r\n\r\n      series:\r\n        \"2914 Series\",\r\n\r\n      resourceLabel:\r\n        \"2914\",\r\n\r\n      page:\r\n        6,\r\n\r\n      image:\r\n        SHACKLE_IMAGES.bolt,\r\n\r\n      alt:\r\n        \"VGD Golden Pin bolt type safety anchor shackle\",\r\n\r\n      products: [\r\n\r\n        { size: \"1\/4\", wll: \"1\/2 Ton\", code: \"29140016\" },\r\n        { size: \"5\/16\", wll: \"3\/4 Ton\", code: \"29140020\" },\r\n        { size: \"3\/8\", wll: \"1 Ton\", code: \"29140024\" },\r\n        { size: \"7\/16\", wll: \"1-1\/2 Ton\", code: \"29140028\" },\r\n        { size: \"1\/2\", wll: \"2 Ton\", code: \"29140032\" },\r\n        { size: \"5\/8\", wll: \"3-1\/4 Ton\", code: \"29140040\" },\r\n        { size: \"3\/4\", wll: \"4-3\/4 Ton\", code: \"29140048\" },\r\n        { size: \"7\/8\", wll: \"6-1\/2 Ton\", code: \"29140056\" },\r\n        { size: \"1\", wll: \"8-1\/2 Ton\", code: \"29140100\" },\r\n        { size: \"1-1\/8\", wll: \"9-1\/2 Ton\", code: \"29140108\" },\r\n        { size: \"1-1\/4\", wll: \"12 Ton\", code: \"29140116\" },\r\n        { size: \"1-3\/8\", wll: \"13-1\/2 Ton\", code: \"29140124\" },\r\n        { size: \"1-1\/2\", wll: \"17 Ton\", code: \"29140132\" },\r\n        { size: \"1-3\/4\", wll: \"25 Ton\", code: \"29140148\" },\r\n        { size: \"2\", wll: \"35 Ton\", code: \"29140200\" },\r\n        { size: \"2-1\/2\", wll: \"55 Ton\", code: \"29140232\" },\r\n        { size: \"3\", wll: \"85 Ton\", code: \"29140300\" }\r\n\r\n      ]\r\n\r\n    },\r\n\r\n\r\n    \/* ---------------------------------------------------------\r\n       GOLDEN PIN SCREW PIN CHAIN\r\n       --------------------------------------------------------- *\/\r\n\r\n    chain: {\r\n\r\n      name:\r\n        \"VGD Golden Pin Screw Pin Chain Shackle\",\r\n\r\n      shortName:\r\n        \"Golden Pin Screw Pin Chain Shackle\",\r\n\r\n      series:\r\n        \"3912 Series\",\r\n\r\n      resourceLabel:\r\n        \"3912\",\r\n\r\n      page:\r\n        5,\r\n\r\n      image:\r\n        SHACKLE_IMAGES.chain,\r\n\r\n      alt:\r\n        \"VGD Golden Pin screw pin chain shackle\",\r\n\r\n      products: [\r\n\r\n        { size: \"1\/4\", wll: \"1\/2 Ton\", code: \"39120016\" },\r\n        { size: \"5\/16\", wll: \"3\/4 Ton\", code: \"39120020\" },\r\n        { size: \"3\/8\", wll: \"1 Ton\", code: \"39120024\" },\r\n        { size: \"7\/16\", wll: \"1-1\/2 Ton\", code: \"39120028\" },\r\n\r\n        \/* Corrected catalogue code *\/\r\n        { size: \"1\/2\", wll: \"2 Ton\", code: \"39120032\" },\r\n\r\n        { size: \"5\/8\", wll: \"3-1\/4 Ton\", code: \"39120040\" },\r\n        { size: \"3\/4\", wll: \"4-3\/4 Ton\", code: \"39120048\" },\r\n        { size: \"7\/8\", wll: \"6-1\/2 Ton\", code: \"39120056\" },\r\n        { size: \"1\", wll: \"8-1\/2 Ton\", code: \"39120100\" },\r\n        { size: \"1-1\/8\", wll: \"9-1\/2 Ton\", code: \"39120108\" },\r\n        { size: \"1-1\/4\", wll: \"12 Ton\", code: \"39120116\" },\r\n        { size: \"1-3\/8\", wll: \"13-1\/2 Ton\", code: \"39120124\" },\r\n        { size: \"1-1\/2\", wll: \"17 Ton\", code: \"39120132\" },\r\n        { size: \"1-3\/4\", wll: \"25 Ton\", code: \"39120148\" },\r\n        { size: \"2\", wll: \"35 Ton\", code: \"39120200\" }\r\n\r\n      ]\r\n\r\n    },\r\n\r\n\r\n    \/* ---------------------------------------------------------\r\n       SILVER PIN ANCHOR\r\n       --------------------------------------------------------- *\/\r\n\r\n    silver: {\r\n\r\n      name:\r\n        \"VGD Silver Pin Screw Pin Anchor Shackle\",\r\n\r\n      shortName:\r\n        \"Silver Pin Screw Pin Anchor Shackle\",\r\n\r\n      series:\r\n        \"2902\/50 Series\",\r\n\r\n      resourceLabel:\r\n        \"Silver Pin\",\r\n\r\n      page:\r\n        8,\r\n\r\n      image:\r\n        SHACKLE_IMAGES.silver,\r\n\r\n      alt:\r\n        \"VGD Silver Pin screw pin anchor shackle\",\r\n\r\n      products: [\r\n\r\n        { size: \"3\/16\", wll: \"1\/3 Ton\", code: \"29025012\" },\r\n        { size: \"1\/4\", wll: \"1\/2 Ton\", code: \"29025016\" },\r\n        { size: \"5\/16\", wll: \"3\/4 Ton\", code: \"29025020\" },\r\n        { size: \"3\/8\", wll: \"1 Ton\", code: \"29025024\" },\r\n        { size: \"7\/16\", wll: \"1-1\/2 Ton\", code: \"29025028\" },\r\n        { size: \"1\/2\", wll: \"2 Ton\", code: \"29025032\" },\r\n        { size: \"5\/8\", wll: \"3-1\/4 Ton\", code: \"29025040\" },\r\n        { size: \"3\/4\", wll: \"4-3\/4 Ton\", code: \"29025048\" },\r\n        { size: \"7\/8\", wll: \"6-1\/2 Ton\", code: \"29025056\" },\r\n        { size: \"1\", wll: \"8-1\/2 Ton\", code: \"29025100\" },\r\n        { size: \"1-1\/8\", wll: \"9-1\/2 Ton\", code: \"29025108\" },\r\n        { size: \"1-1\/4\", wll: \"12 Ton\", code: \"29025116\" },\r\n        { size: \"1-3\/8\", wll: \"13-1\/2 Ton\", code: \"29025124\" },\r\n        { size: \"1-1\/2\", wll: \"17 Ton\", code: \"29025132\" },\r\n        { size: \"1-3\/4\", wll: \"25 Ton\", code: \"29025148\" },\r\n        { size: \"2\", wll: \"35 Ton\", code: \"29025200\" },\r\n        { size: \"2-1\/2\", wll: \"55 Ton\", code: \"29025232\" }\r\n\r\n      ]\r\n\r\n    },\r\n\r\n\r\n    \/* ---------------------------------------------------------\r\n       NON-RATED ANCHOR\r\n       --------------------------------------------------------- *\/\r\n\r\n    nonrated: {\r\n\r\n      name:\r\n        \"VGD Non-Rated Anchor Shackle\",\r\n\r\n      shortName:\r\n        \"Non-Rated Anchor Shackle\",\r\n\r\n      series:\r\n        \"2946 Series\",\r\n\r\n      resourceLabel:\r\n        \"2946\",\r\n\r\n      page:\r\n        9,\r\n\r\n      image:\r\n        SHACKLE_IMAGES.nonrated,\r\n\r\n      alt:\r\n        \"VGD 2946 non rated anchor shackle\",\r\n\r\n      nonRated:\r\n        true,\r\n\r\n      products: [\r\n\r\n        { size: \"3\/16\", code: \"29465012\" },\r\n        { size: \"1\/4\", code: \"29465016\" },\r\n        { size: \"5\/16\", code: \"29465020\" },\r\n        { size: \"3\/8\", code: \"29465024\" },\r\n        { size: \"7\/16\", code: \"29465028\" },\r\n        { size: \"1\/2\", code: \"29465032\" },\r\n        { size: \"5\/8\", code: \"29465040\" },\r\n        { size: \"3\/4\", code: \"29465048\" },\r\n\r\n        \/* Corrected catalogue code *\/\r\n        { size: \"7\/8\", code: \"29465056\" },\r\n\r\n        { size: \"1\", code: \"29465100\" }\r\n\r\n      ]\r\n\r\n    },\r\n\r\n\r\n    \/* ---------------------------------------------------------\r\n       T-316 STAINLESS STEEL ANCHOR\r\n       --------------------------------------------------------- *\/\r\n\r\n    stainless: {\r\n\r\n      name:\r\n        \"VGD T-316 Stainless Steel Anchor Shackle\",\r\n\r\n      shortName:\r\n        \"T-316 Stainless Steel Anchor Shackle\",\r\n\r\n      series:\r\n        \"3913 Series\",\r\n\r\n      resourceLabel:\r\n        \"3913\",\r\n\r\n      page:\r\n        10,\r\n\r\n      image:\r\n        SHACKLE_IMAGES.stainless,\r\n\r\n      alt:\r\n        \"VGD 3913 T-316 stainless steel anchor shackle\",\r\n\r\n      products: [\r\n\r\n        { size: \"3\/16\", wll: \"1\/4 Ton\", code: \"39130012\" },\r\n        { size: \"1\/4\", wll: \"1\/4 Ton\", code: \"39130016\" },\r\n        { size: \"5\/16\", wll: \"1\/3 Ton\", code: \"39130020\" },\r\n        { size: \"3\/8\", wll: \"1\/2 Ton\", code: \"39130024\" },\r\n        { size: \"7\/16\", wll: \"2\/3 Ton\", code: \"39130028\" },\r\n        { size: \"1\/2\", wll: \"1 Ton\", code: \"39130032\" },\r\n        { size: \"5\/8\", wll: \"1-1\/2 Ton\", code: \"39130040\" },\r\n        { size: \"3\/4\", wll: \"2-1\/4 Ton\", code: \"39130048\" },\r\n        { size: \"7\/8\", wll: \"3 Ton\", code: \"39130056\" },\r\n        { size: \"1\", wll: \"4 Ton\", code: \"39130100\" }\r\n\r\n      ]\r\n\r\n    }\r\n\r\n  };\r\n\r\n\r\n  let shackleResultActive = false;\r\n  let currentShacklePart = \"\";\r\n  let currentShackleDescription = \"\";\r\n\r\n\r\n  \/* =========================================================\r\n     INTERCEPT SHACKLE TOOL\r\n     ========================================================= *\/\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const trigger =\r\n        event.target.closest(\r\n          \"[data-tool]\"\r\n        );\r\n\r\n      if (!trigger) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        trigger.dataset.tool ===\r\n        \"shackles\"\r\n      ) {\r\n\r\n        shackleResultActive =\r\n          false;\r\n\r\n        setTimeout(\r\n          renderCompleteShackleTool,\r\n          0\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        shackleResultActive =\r\n          false;\r\n\r\n        hideShackleSpecs();\r\n\r\n        resetResultImage();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     RENDER SELECTOR\r\n     ========================================================= *\/\r\n\r\n  function renderCompleteShackleTool() {\r\n\r\n    const workspace =\r\n      document.getElementById(\r\n        \"vgd-active-workspace\"\r\n      );\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const productResult =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (\r\n      !workspace ||\r\n      !panel\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    if (productResult) {\r\n\r\n      productResult.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    panel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Shackles\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          VGD Shackle Finder\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          Select the shackle style, then choose the\r\n          required size or working load limit.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          1. Shackle Style\r\n        <\/span>\r\n\r\n\r\n        <div class=\"vgd-shackle-full-options\">\r\n\r\n\r\n          ${buildStyleCard(\r\n            \"anchor\",\r\n            \"Golden Pin<br>Screw Pin Anchor\"\r\n          )}\r\n\r\n\r\n          ${buildStyleCard(\r\n            \"bolt\",\r\n            \"Golden Pin<br>Bolt Type Anchor\"\r\n          )}\r\n\r\n\r\n          ${buildStyleCard(\r\n            \"chain\",\r\n            \"Golden Pin<br>Screw Pin Chain\"\r\n          )}\r\n\r\n\r\n          ${buildStyleCard(\r\n            \"silver\",\r\n            \"Silver Pin<br>Anchor Shackle\"\r\n          )}\r\n\r\n\r\n          ${buildStyleCard(\r\n            \"nonrated\",\r\n            \"Non-Rated<br>Anchor Shackle\"\r\n          )}\r\n\r\n\r\n          ${buildStyleCard(\r\n            \"stainless\",\r\n            \"T-316 Stainless<br>Anchor Shackle\"\r\n          )}\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-shackle-size-area\">\r\n\r\n          <label\r\n            class=\"vgd-field-label\"\r\n            for=\"vgd-full-shackle-size\"\r\n          >\r\n            2. Shackle Size \/ Working Load Limit\r\n          <\/label>\r\n\r\n\r\n          <select\r\n            class=\"vgd-field-select\"\r\n            id=\"vgd-full-shackle-size\"\r\n          ><\/select>\r\n\r\n\r\n          <div\r\n            class=\"vgd-shackle-style-note\"\r\n            id=\"vgd-shackle-style-note\"\r\n          ><\/div>\r\n\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-find-button\"\r\n            id=\"vgd-find-full-shackle\"\r\n          >\r\n            Find Product\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    workspace.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    document\r\n      .querySelectorAll(\r\n        'input[name=\"vgd-full-shackle-style\"]'\r\n      )\r\n      .forEach(\r\n        function (input) {\r\n\r\n          input.addEventListener(\r\n            \"change\",\r\n            function () {\r\n\r\n              populateShackleSizes(\r\n                input.value\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-full-shackle\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findCompleteShackle\r\n      );\r\n\r\n\r\n    populateShackleSizes(\r\n      \"anchor\"\r\n    );\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      workspace.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"start\"\r\n      });\r\n\r\n    }, 60);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STYLE CARD\r\n     ========================================================= *\/\r\n\r\n  function buildStyleCard(\r\n    key,\r\n    title\r\n  ) {\r\n\r\n    const style =\r\n      SHACKLE_STYLES[key];\r\n\r\n\r\n    return `\r\n\r\n      <div class=\"vgd-shackle-full-option\">\r\n\r\n        <input\r\n          type=\"radio\"\r\n          name=\"vgd-full-shackle-style\"\r\n          id=\"vgd-shackle-style-${key}\"\r\n          value=\"${key}\"\r\n          ${key === \"anchor\" ? \"checked\" : \"\"}\r\n        >\r\n\r\n        <label\r\n          for=\"vgd-shackle-style-${key}\"\r\n        >\r\n\r\n          <img decoding=\"async\"\r\n            class=\"vgd-shackle-style-image\"\r\n            src=\"${style.image}\"\r\n            alt=\"${style.alt}\"\r\n          >\r\n\r\n          <span class=\"vgd-shackle-style-title\">\r\n            ${title}\r\n          <\/span>\r\n\r\n        <\/label>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     POPULATE SIZES\r\n     ========================================================= *\/\r\n\r\n  function populateShackleSizes(\r\n    styleKey\r\n  ) {\r\n\r\n    const style =\r\n      SHACKLE_STYLES[\r\n        styleKey\r\n      ];\r\n\r\n    const select =\r\n      document.getElementById(\r\n        \"vgd-full-shackle-size\"\r\n      );\r\n\r\n    const note =\r\n      document.getElementById(\r\n        \"vgd-shackle-style-note\"\r\n      );\r\n\r\n\r\n    if (\r\n      !style ||\r\n      !select\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    let options = `\r\n\r\n      <option value=\"\">\r\n        Select Size \/ WLL\r\n      <\/option>\r\n\r\n    `;\r\n\r\n\r\n    style.products.forEach(\r\n      function (product, index) {\r\n\r\n        let label =\r\n          product.size +\r\n          '\"';\r\n\r\n\r\n        if (style.nonRated) {\r\n\r\n          label +=\r\n            \" | Non-Rated\";\r\n\r\n        }\r\n\r\n        else {\r\n\r\n          label +=\r\n            \" | \" +\r\n            product.wll +\r\n            \" WLL\";\r\n\r\n        }\r\n\r\n\r\n        options += `\r\n\r\n          <option value=\"${index}\">\r\n            ${label}\r\n          <\/option>\r\n\r\n        `;\r\n\r\n      }\r\n    );\r\n\r\n\r\n    select.innerHTML =\r\n      options;\r\n\r\n\r\n    if (note) {\r\n\r\n      if (style.nonRated) {\r\n\r\n        note.innerHTML =\r\n          \"<strong>Important:<\/strong> \" +\r\n          \"This shackle is non-rated and is not intended for lifting applications.\";\r\n\r\n        note.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        note.innerHTML =\r\n          \"\";\r\n\r\n        note.classList.remove(\r\n          \"is-active\"\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND PRODUCT\r\n     ========================================================= *\/\r\n\r\n  function findCompleteShackle() {\r\n\r\n    const selectedStyle =\r\n      document.querySelector(\r\n        'input[name=\"vgd-full-shackle-style\"]:checked'\r\n      );\r\n\r\n    const sizeSelect =\r\n      document.getElementById(\r\n        \"vgd-full-shackle-size\"\r\n      );\r\n\r\n\r\n    if (\r\n      !selectedStyle ||\r\n      !sizeSelect ||\r\n      sizeSelect.value === \"\"\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select a shackle style and size.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const styleKey =\r\n      selectedStyle.value;\r\n\r\n    const style =\r\n      SHACKLE_STYLES[\r\n        styleKey\r\n      ];\r\n\r\n    const product =\r\n      style.products[\r\n        Number(\r\n          sizeSelect.value\r\n        )\r\n      ];\r\n\r\n\r\n    if (\r\n      !style ||\r\n      !product\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    showCompleteShackleResult(\r\n      styleKey,\r\n      style,\r\n      product\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SHOW RESULT\r\n     ========================================================= *\/\r\n\r\n  function showCompleteShackleResult(\r\n    styleKey,\r\n    style,\r\n    product\r\n  ) {\r\n\r\n    const productResult =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n    const heading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n    const details =\r\n      document.getElementById(\r\n        \"vgd-result-details\"\r\n      );\r\n\r\n    const part =\r\n      document.getElementById(\r\n        \"vgd-part-number\"\r\n      );\r\n\r\n    const imageArea =\r\n      document.querySelector(\r\n        \".vgd-result-image\"\r\n      );\r\n\r\n\r\n    if (\r\n      !productResult ||\r\n      !heading ||\r\n      !details ||\r\n      !part\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    currentShacklePart =\r\n      product.code;\r\n\r\n\r\n    if (style.nonRated) {\r\n\r\n      currentShackleDescription =\r\n        style.name +\r\n        \", \" +\r\n        product.size +\r\n        '\", Non-Rated, VGD ' +\r\n        product.code;\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      currentShackleDescription =\r\n        style.name +\r\n        \", \" +\r\n        product.size +\r\n        '\", WLL ' +\r\n        product.wll +\r\n        \", VGD \" +\r\n        product.code;\r\n\r\n    }\r\n\r\n\r\n    heading.textContent =\r\n      style.name;\r\n\r\n\r\n    part.textContent =\r\n      product.code;\r\n\r\n\r\n    if (style.nonRated) {\r\n\r\n      details.innerHTML = `\r\n\r\n        <div class=\"vgd-result-label\">\r\n          Series\r\n        <\/div>\r\n\r\n        <div>\r\n          ${style.series}\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-result-label\">\r\n          Size\r\n        <\/div>\r\n\r\n        <div>\r\n          ${product.size}\"\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-result-label\">\r\n          Rating\r\n        <\/div>\r\n\r\n        <div class=\"vgd-shackle-warning-text\">\r\n          Non-Rated \u00b7 Not for Lifting\r\n        <\/div>\r\n\r\n      `;\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      details.innerHTML = `\r\n\r\n        <div class=\"vgd-result-label\">\r\n          Series\r\n        <\/div>\r\n\r\n        <div>\r\n          ${style.series}\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-result-label\">\r\n          Size\r\n        <\/div>\r\n\r\n        <div>\r\n          ${product.size}\"\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-result-label\">\r\n          WLL\r\n        <\/div>\r\n\r\n        <div>\r\n          ${product.wll}\r\n        <\/div>\r\n\r\n      `;\r\n\r\n    }\r\n\r\n\r\n    if (imageArea) {\r\n\r\n      imageArea.innerHTML = `\r\n\r\n        <img decoding=\"async\"\r\n          src=\"${style.image}\"\r\n          alt=\"${style.alt}\"\r\n        >\r\n\r\n      `;\r\n\r\n    }\r\n\r\n\r\n    shackleResultActive =\r\n      true;\r\n\r\n\r\n    ensureShackleSpecsButton();\r\n\r\n    updateShackleSpecsButton(\r\n      style\r\n    );\r\n\r\n\r\n    productResult.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    resetVgdListQuantity();\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      productResult.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"nearest\"\r\n      });\r\n\r\n    }, 80);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SPECS PDF BUTTON\r\n     ========================================================= *\/\r\n\r\n  function ensureShackleSpecsButton() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \".vgd-result-actions\"\r\n      );\r\n\r\n\r\n    if (!actions) {\r\n      return null;\r\n    }\r\n\r\n\r\n    let link =\r\n      document.getElementById(\r\n        \"vgd-shackle-specs-link\"\r\n      );\r\n\r\n\r\n    if (!link) {\r\n\r\n      link =\r\n        document.createElement(\r\n          \"a\"\r\n        );\r\n\r\n\r\n      link.id =\r\n        \"vgd-shackle-specs-link\";\r\n\r\n      link.target =\r\n        \"_blank\";\r\n\r\n      link.rel =\r\n        \"noopener\";\r\n\r\n\r\n      const listControls =\r\n        document.getElementById(\r\n          \"vgd-list-result-controls\"\r\n        );\r\n\r\n\r\n      if (listControls) {\r\n\r\n        actions.insertBefore(\r\n          link,\r\n          listControls\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        actions.appendChild(\r\n          link\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    return link;\r\n\r\n  }\r\n\r\n\r\n  function updateShackleSpecsButton(\r\n    style\r\n  ) {\r\n\r\n    const link =\r\n      ensureShackleSpecsButton();\r\n\r\n\r\n    if (!link) {\r\n      return;\r\n    }\r\n\r\n\r\n    link.href =\r\n      SHACKLE_PDF +\r\n      \"#page=\" +\r\n      style.page;\r\n\r\n\r\n    link.textContent =\r\n      \"Shackle Dimensions & Specs \u00b7 \" +\r\n      style.resourceLabel;\r\n\r\n\r\n    link.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function hideShackleSpecs() {\r\n\r\n    const link =\r\n      document.getElementById(\r\n        \"vgd-shackle-specs-link\"\r\n      );\r\n\r\n\r\n    if (link) {\r\n\r\n      link.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESET RESULT IMAGE FOR OTHER PRODUCT FAMILIES\r\n     ========================================================= *\/\r\n\r\n  function resetResultImage() {\r\n\r\n    const imageArea =\r\n      document.querySelector(\r\n        \".vgd-result-image\"\r\n      );\r\n\r\n\r\n    if (!imageArea) {\r\n      return;\r\n    }\r\n\r\n\r\n    imageArea.innerHTML =\r\n      \"PRODUCT IMAGE<br>1200 \u00d7 800\";\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESET VGD LIST QUANTITY\r\n     ========================================================= *\/\r\n\r\n  function resetVgdListQuantity() {\r\n\r\n    const value =\r\n      document.getElementById(\r\n        \"vgd-result-qty-value\"\r\n      );\r\n\r\n    const minus =\r\n      document.getElementById(\r\n        \"vgd-result-qty-minus\"\r\n      );\r\n\r\n\r\n    if (\r\n      !value ||\r\n      !minus\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    let safety =\r\n      100;\r\n\r\n\r\n    while (\r\n      Number(\r\n        value.textContent\r\n      ) > 1 &&\r\n      safety > 0\r\n    ) {\r\n\r\n      minus.click();\r\n\r\n      safety--;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY BUTTON SUPPORT\r\n     ========================================================= *\/\r\n\r\n  function attachShackleCopyButtons() {\r\n\r\n    const copyPart =\r\n      document.getElementById(\r\n        \"vgd-copy-part\"\r\n      );\r\n\r\n    const copyDescription =\r\n      document.getElementById(\r\n        \"vgd-copy-description\"\r\n      );\r\n\r\n\r\n    if (copyPart) {\r\n\r\n      copyPart.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (\r\n            !shackleResultActive\r\n          ) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copyShackleText(\r\n            currentShacklePart\r\n          );\r\n\r\n\r\n          flashShackleButton(\r\n            copyPart,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (copyDescription) {\r\n\r\n      copyDescription.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (\r\n            !shackleResultActive\r\n          ) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copyShackleText(\r\n            currentShackleDescription\r\n          );\r\n\r\n\r\n          flashShackleButton(\r\n            copyDescription,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SEARCH ALIASES\r\n     ========================================================= *\/\r\n\r\n  function attachShackleSearchAliases() {\r\n\r\n    const input =\r\n      document.getElementById(\r\n        \"vgd-search-input\"\r\n      );\r\n\r\n    const results =\r\n      document.getElementById(\r\n        \"vgd-search-results\"\r\n      );\r\n\r\n\r\n    if (\r\n      !input ||\r\n      !results\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const aliases = [\r\n\r\n      \"silver pin\",\r\n      \"silver pin shackle\",\r\n      \"non rated shackle\",\r\n      \"non-rated shackle\",\r\n      \"stainless shackle\",\r\n      \"stainless steel shackle\",\r\n      \"316 shackle\",\r\n      \"t316 shackle\",\r\n      \"bolt type shackle\",\r\n      \"bolt shackle\",\r\n      \"safety anchor shackle\",\r\n      \"gold pin shackle\",\r\n      \"golden pin shackle\",\r\n      \"chain shackle\",\r\n      \"anchor shackle\"\r\n\r\n    ];\r\n\r\n\r\n    input.addEventListener(\r\n      \"input\",\r\n      function () {\r\n\r\n        setTimeout(\r\n          augmentShackleSearch,\r\n          0\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function augmentShackleSearch() {\r\n\r\n      const term =\r\n        input.value\r\n          .trim()\r\n          .toLowerCase();\r\n\r\n\r\n      if (\r\n        term.length < 2\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const match =\r\n        aliases.some(\r\n          function (alias) {\r\n\r\n            return (\r\n              alias.includes(term) ||\r\n              term.includes(alias)\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      if (!match) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        results.querySelector(\r\n          '[data-tool=\"shackles\"]'\r\n        )\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const button =\r\n        document.createElement(\r\n          \"button\"\r\n        );\r\n\r\n\r\n      button.type =\r\n        \"button\";\r\n\r\n      button.className =\r\n        \"vgd-search-result\";\r\n\r\n      button.dataset.tool =\r\n        \"shackles\";\r\n\r\n\r\n      button.innerHTML = `\r\n\r\n        <span>\r\n\r\n          <span class=\"vgd-search-result-name\">\r\n            VGD Shackles\r\n          <\/span>\r\n\r\n          <span class=\"vgd-search-result-copy\">\r\n            Golden Pin, Silver Pin, non-rated and stainless steel shackles\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n        <span class=\"vgd-search-result-arrow\">\r\n          \u203a\r\n        <\/span>\r\n\r\n      `;\r\n\r\n\r\n      const empty =\r\n        results.querySelector(\r\n          \".vgd-search-empty\"\r\n        );\r\n\r\n\r\n      if (empty) {\r\n        empty.remove();\r\n      }\r\n\r\n\r\n      results.appendChild(\r\n        button\r\n      );\r\n\r\n\r\n      results.classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY HELPERS\r\n     ========================================================= *\/\r\n\r\n  function copyShackleText(\r\n    text\r\n  ) {\r\n\r\n    if (\r\n      navigator.clipboard &&\r\n      window.isSecureContext\r\n    ) {\r\n\r\n      navigator.clipboard.writeText(\r\n        text\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const temp =\r\n      document.createElement(\r\n        \"textarea\"\r\n      );\r\n\r\n    temp.value =\r\n      text;\r\n\r\n    document.body.appendChild(\r\n      temp\r\n    );\r\n\r\n    temp.select();\r\n\r\n    document.execCommand(\r\n      \"copy\"\r\n    );\r\n\r\n    temp.remove();\r\n\r\n  }\r\n\r\n\r\n  function flashShackleButton(\r\n    button,\r\n    message\r\n  ) {\r\n\r\n    const original =\r\n      button.textContent;\r\n\r\n\r\n    button.textContent =\r\n      message;\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      button.textContent =\r\n        original;\r\n\r\n    }, 1200);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  function initializeCompleteShackleModule() {\r\n\r\n    attachShackleCopyButtons();\r\n\r\n    attachShackleSearchAliases();\r\n\r\n    ensureShackleSpecsButton();\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initializeCompleteShackleModule\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    initializeCompleteShackleModule();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-501d4fb elementor-widget elementor-widget-html\" data-id=\"501d4fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD SHACKLE FINDER\r\n     COMPACT STYLE SELECTION\r\n     ========================================================= *\/\r\n\r\n  .vgd-shackle-full-options {\r\n    grid-template-columns: repeat(6, 1fr) !important;\r\n    gap: 10px !important;\r\n  }\r\n\r\n  .vgd-shackle-style-image {\r\n    aspect-ratio: 3 \/ 2;\r\n  }\r\n\r\n  .vgd-shackle-style-title {\r\n    min-height: 54px !important;\r\n    padding: 10px 8px !important;\r\n    font-size: 12px !important;\r\n    line-height: 1.25 !important;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     AFTER A STYLE IS SELECTED\r\n     ========================================================= *\/\r\n\r\n  .vgd-shackle-full-options.vgd-style-selected {\r\n    display: block !important;\r\n    max-width: 380px;\r\n  }\r\n\r\n  .vgd-shackle-full-options.vgd-style-selected\r\n  .vgd-shackle-full-option {\r\n    display: none;\r\n  }\r\n\r\n  .vgd-shackle-full-options.vgd-style-selected\r\n  .vgd-shackle-full-option.is-selected {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-shackle-full-options.vgd-style-selected\r\n  .vgd-shackle-full-option.is-selected label {\r\n    display: grid;\r\n    grid-template-columns: 125px 1fr;\r\n    align-items: center;\r\n  }\r\n\r\n  .vgd-shackle-full-options.vgd-style-selected\r\n  .vgd-shackle-style-image {\r\n    width: 125px;\r\n    height: 88px;\r\n    aspect-ratio: auto;\r\n    object-fit: cover;\r\n    border-bottom: 0;\r\n    border-right: 1px solid rgba(255,255,255,0.08);\r\n  }\r\n\r\n  .vgd-shackle-full-options.vgd-style-selected\r\n  .vgd-shackle-style-title {\r\n    min-height: 88px !important;\r\n    padding: 12px !important;\r\n    font-size: 13px !important;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STEP 2\r\n     HIDDEN UNTIL STYLE CHOSEN\r\n     ========================================================= *\/\r\n\r\n  .vgd-shackle-size-area.vgd-size-hidden {\r\n    display: none;\r\n  }\r\n\r\n  .vgd-shackle-size-area.vgd-size-visible {\r\n    display: block;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHANGE STYLE BUTTON\r\n     ========================================================= *\/\r\n\r\n  #vgd-change-shackle-style {\r\n    display: none;\r\n    margin: 14px 0 4px;\r\n    padding: 9px 14px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  #vgd-change-shackle-style:hover {\r\n    border-color: #f26a21;\r\n    color: #f26a21;\r\n  }\r\n\r\n  #vgd-change-shackle-style.is-active {\r\n    display: inline-flex;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TABLET\r\n     ========================================================= *\/\r\n\r\n  @media (max-width: 1100px) {\r\n\r\n    .vgd-shackle-full-options {\r\n      grid-template-columns: repeat(3, 1fr) !important;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     MOBILE\r\n     ========================================================= *\/\r\n\r\n  @media (max-width: 600px) {\r\n\r\n    .vgd-shackle-full-options {\r\n      grid-template-columns: repeat(2, 1fr) !important;\r\n      gap: 9px !important;\r\n    }\r\n\r\n    .vgd-shackle-style-title {\r\n      min-height: 50px !important;\r\n      padding: 8px 6px !important;\r\n      font-size: 11px !important;\r\n    }\r\n\r\n    .vgd-shackle-full-options.vgd-style-selected {\r\n      max-width: 100%;\r\n    }\r\n\r\n    .vgd-shackle-full-options.vgd-style-selected\r\n    .vgd-shackle-full-option.is-selected label {\r\n      grid-template-columns: 105px 1fr;\r\n    }\r\n\r\n    .vgd-shackle-full-options.vgd-style-selected\r\n    .vgd-shackle-style-image {\r\n      width: 105px;\r\n      height: 76px;\r\n    }\r\n\r\n    .vgd-shackle-full-options.vgd-style-selected\r\n    .vgd-shackle-style-title {\r\n      min-height: 76px !important;\r\n      font-size: 12px !important;\r\n    }\r\n\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  function initializeCompactShackleSelector() {\r\n\r\n    const grid =\r\n      document.querySelector(\r\n        \".vgd-shackle-full-options\"\r\n      );\r\n\r\n    const sizeArea =\r\n      document.querySelector(\r\n        \".vgd-shackle-size-area\"\r\n      );\r\n\r\n\r\n    if (\r\n      !grid ||\r\n      !sizeArea\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    \/*\r\n       Avoid initializing twice.\r\n    *\/\r\n\r\n    if (\r\n      grid.dataset.compactReady === \"yes\"\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    grid.dataset.compactReady =\r\n      \"yes\";\r\n\r\n\r\n    \/*\r\n       Start with no style selected.\r\n    *\/\r\n\r\n    const radios =\r\n      grid.querySelectorAll(\r\n        'input[name=\"vgd-full-shackle-style\"]'\r\n      );\r\n\r\n\r\n    radios.forEach(\r\n      function (radio) {\r\n\r\n        radio.checked = false;\r\n\r\n      }\r\n    );\r\n\r\n\r\n    sizeArea.classList.add(\r\n      \"vgd-size-hidden\"\r\n    );\r\n\r\n\r\n    \/*\r\n       Add Change Style button.\r\n    *\/\r\n\r\n    let changeButton =\r\n      document.getElementById(\r\n        \"vgd-change-shackle-style\"\r\n      );\r\n\r\n\r\n    if (!changeButton) {\r\n\r\n      changeButton =\r\n        document.createElement(\r\n          \"button\"\r\n        );\r\n\r\n\r\n      changeButton.id =\r\n        \"vgd-change-shackle-style\";\r\n\r\n      changeButton.type =\r\n        \"button\";\r\n\r\n      changeButton.textContent =\r\n        \"Change Shackle Style\";\r\n\r\n\r\n      grid.insertAdjacentElement(\r\n        \"afterend\",\r\n        changeButton\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n       Style selected.\r\n    *\/\r\n\r\n    radios.forEach(\r\n      function (radio) {\r\n\r\n        radio.addEventListener(\r\n          \"change\",\r\n          function () {\r\n\r\n            if (!radio.checked) {\r\n              return;\r\n            }\r\n\r\n\r\n            grid\r\n              .querySelectorAll(\r\n                \".vgd-shackle-full-option\"\r\n              )\r\n              .forEach(\r\n                function (card) {\r\n\r\n                  card.classList.remove(\r\n                    \"is-selected\"\r\n                  );\r\n\r\n                }\r\n              );\r\n\r\n\r\n            const selectedCard =\r\n              radio.closest(\r\n                \".vgd-shackle-full-option\"\r\n              );\r\n\r\n\r\n            if (selectedCard) {\r\n\r\n              selectedCard.classList.add(\r\n                \"is-selected\"\r\n              );\r\n\r\n            }\r\n\r\n\r\n            grid.classList.add(\r\n              \"vgd-style-selected\"\r\n            );\r\n\r\n\r\n            changeButton.classList.add(\r\n              \"is-active\"\r\n            );\r\n\r\n\r\n            sizeArea.classList.remove(\r\n              \"vgd-size-hidden\"\r\n            );\r\n\r\n\r\n            sizeArea.classList.add(\r\n              \"vgd-size-visible\"\r\n            );\r\n\r\n\r\n            \/*\r\n               Move user naturally to Step 2.\r\n            *\/\r\n\r\n            setTimeout(\r\n              function () {\r\n\r\n                sizeArea.scrollIntoView({\r\n                  behavior: \"smooth\",\r\n                  block: \"center\"\r\n                });\r\n\r\n              },\r\n              120\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    \/*\r\n       Change Style\r\n    *\/\r\n\r\n    changeButton.addEventListener(\r\n      \"click\",\r\n      function () {\r\n\r\n        grid.classList.remove(\r\n          \"vgd-style-selected\"\r\n        );\r\n\r\n\r\n        grid\r\n          .querySelectorAll(\r\n            \".vgd-shackle-full-option\"\r\n          )\r\n          .forEach(\r\n            function (card) {\r\n\r\n              card.classList.remove(\r\n                \"is-selected\"\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n\r\n        radios.forEach(\r\n          function (radio) {\r\n\r\n            radio.checked = false;\r\n\r\n          }\r\n        );\r\n\r\n\r\n        changeButton.classList.remove(\r\n          \"is-active\"\r\n        );\r\n\r\n\r\n        sizeArea.classList.remove(\r\n          \"vgd-size-visible\"\r\n        );\r\n\r\n\r\n        sizeArea.classList.add(\r\n          \"vgd-size-hidden\"\r\n        );\r\n\r\n\r\n        setTimeout(\r\n          function () {\r\n\r\n            grid.scrollIntoView({\r\n              behavior: \"smooth\",\r\n              block: \"center\"\r\n            });\r\n\r\n          },\r\n          60\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n     Watch because the Shackle Finder is dynamically loaded.\r\n  *\/\r\n\r\n  const workspace =\r\n    document.getElementById(\r\n      \"vgd-workspace-panel\"\r\n    );\r\n\r\n\r\n  if (workspace) {\r\n\r\n    const observer =\r\n      new MutationObserver(\r\n        function () {\r\n\r\n          setTimeout(\r\n            initializeCompactShackleSelector,\r\n            40\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    observer.observe(\r\n      workspace,\r\n      {\r\n        childList: true,\r\n        subtree: true\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n     Also catch initial load.\r\n  *\/\r\n\r\n  setTimeout(\r\n    initializeCompactShackleSelector,\r\n    100\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8f8593 elementor-widget elementor-widget-html\" data-id=\"e8f8593\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD SHACKLE RESULT NAVIGATION\r\n     ========================================================= *\/\r\n\r\n  #vgd-shackle-result-nav {\r\n    display: none;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  #vgd-shackle-result-nav.is-active {\r\n    display: grid;\r\n  }\r\n\r\n  .vgd-shackle-nav-button {\r\n    min-height: 46px;\r\n    padding: 9px 12px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n    text-align: center;\r\n  }\r\n\r\n  .vgd-shackle-nav-button:hover {\r\n    border-color: #f26a21;\r\n    color: #f26a21;\r\n  }\r\n\r\n  \/*\r\n     Hide the old bottom navigation only\r\n     while a shackle result is active.\r\n  *\/\r\n\r\n  .vgd-back-row.vgd-hide-shackle-back {\r\n    display: none;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    #vgd-shackle-result-nav {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  function ensureShackleResultNav() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \".vgd-result-actions\"\r\n      );\r\n\r\n    if (!actions) {\r\n      return null;\r\n    }\r\n\r\n\r\n    let nav =\r\n      document.getElementById(\r\n        \"vgd-shackle-result-nav\"\r\n      );\r\n\r\n\r\n    if (!nav) {\r\n\r\n      nav =\r\n        document.createElement(\r\n          \"div\"\r\n        );\r\n\r\n      nav.id =\r\n        \"vgd-shackle-result-nav\";\r\n\r\n\r\n      nav.innerHTML = `\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-shackle-nav-button\"\r\n          id=\"vgd-another-shackle\"\r\n        >\r\n          Choose Another Shackle\r\n        <\/button>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-shackle-nav-button\"\r\n          id=\"vgd-result-product-families\"\r\n        >\r\n          Product Families\r\n        <\/button>\r\n\r\n      `;\r\n\r\n\r\n      actions.appendChild(\r\n        nav\r\n      );\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-another-shackle\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          chooseAnotherShackle\r\n        );\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-result-product-families\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          goToProductFamilies\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return nav;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHOOSE ANOTHER SHACKLE\r\n     ========================================================= *\/\r\n\r\n  function chooseAnotherShackle() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    \/*\r\n       Hide current product result.\r\n    *\/\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n       Use the existing Change Shackle Style\r\n       behaviour from the compact selector.\r\n    *\/\r\n\r\n    const changeButton =\r\n      document.getElementById(\r\n        \"vgd-change-shackle-style\"\r\n      );\r\n\r\n\r\n    if (changeButton) {\r\n\r\n      changeButton.click();\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      const grid =\r\n        document.querySelector(\r\n          \".vgd-shackle-full-options\"\r\n        );\r\n\r\n\r\n      if (grid) {\r\n\r\n        grid.scrollIntoView({\r\n          behavior: \"smooth\",\r\n          block: \"center\"\r\n        });\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    hideShackleResultNav();\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT FAMILIES\r\n     ========================================================= *\/\r\n\r\n  function goToProductFamilies() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    const families =\r\n      document.getElementById(\r\n        \"vgd-product-families\"\r\n      );\r\n\r\n\r\n    if (families) {\r\n\r\n      families.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"start\"\r\n      });\r\n\r\n    }\r\n\r\n\r\n    hideShackleResultNav();\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SHOW NAVIGATION FOR SHACKLE RESULTS\r\n     ========================================================= *\/\r\n\r\n  function updateShackleResultNav() {\r\n\r\n    const heading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n    const nav =\r\n      ensureShackleResultNav();\r\n\r\n    const oldBackRow =\r\n      document.querySelector(\r\n        \".vgd-back-row\"\r\n      );\r\n\r\n\r\n    if (\r\n      !heading ||\r\n      !nav\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const isShackle =\r\n      heading.textContent\r\n        .toLowerCase()\r\n        .includes(\"shackle\");\r\n\r\n\r\n    if (isShackle) {\r\n\r\n      nav.classList.add(\r\n        \"is-active\"\r\n      );\r\n\r\n\r\n      if (oldBackRow) {\r\n\r\n        oldBackRow.classList.add(\r\n          \"vgd-hide-shackle-back\"\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      nav.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n\r\n      if (oldBackRow) {\r\n\r\n        oldBackRow.classList.remove(\r\n          \"vgd-hide-shackle-back\"\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function hideShackleResultNav() {\r\n\r\n    const nav =\r\n      document.getElementById(\r\n        \"vgd-shackle-result-nav\"\r\n      );\r\n\r\n    const oldBackRow =\r\n      document.querySelector(\r\n        \".vgd-back-row\"\r\n      );\r\n\r\n\r\n    if (nav) {\r\n\r\n      nav.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (oldBackRow) {\r\n\r\n      oldBackRow.classList.remove(\r\n        \"vgd-hide-shackle-back\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     WATCH RESULT CHANGES\r\n     ========================================================= *\/\r\n\r\n  function watchShackleResults() {\r\n\r\n    const heading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n\r\n    if (!heading) {\r\n      return;\r\n    }\r\n\r\n\r\n    const observer =\r\n      new MutationObserver(\r\n        function () {\r\n\r\n          setTimeout(\r\n            updateShackleResultNav,\r\n            20\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    observer.observe(\r\n      heading,\r\n      {\r\n        childList: true,\r\n        subtree: true,\r\n        characterData: true\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n     If another product family is selected,\r\n     restore the normal navigation.\r\n  *\/\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const trigger =\r\n        event.target.closest(\r\n          \"[data-tool]\"\r\n        );\r\n\r\n\r\n      if (\r\n        trigger &&\r\n        trigger.dataset.tool !==\r\n        \"shackles\"\r\n      ) {\r\n\r\n        hideShackleResultNav();\r\n\r\n      }\r\n\r\n\r\n      if (\r\n        event.target.closest(\r\n          \"#vgd-find-full-shackle\"\r\n        )\r\n      ) {\r\n\r\n        setTimeout(\r\n          updateShackleResultNav,\r\n          120\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  function initializeShackleResultNavigation() {\r\n\r\n    ensureShackleResultNav();\r\n\r\n    watchShackleResults();\r\n\r\n    updateShackleResultNav();\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initializeShackleResultNavigation\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    initializeShackleResultNavigation();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-863a40f elementor-widget elementor-widget-html\" data-id=\"863a40f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD SHACKLE RESULT\r\n     TIGHTER DESKTOP LAYOUT\r\n     ========================================================= *\/\r\n\r\n  @media (min-width: 1101px) {\r\n\r\n    #vgd-product-result.vgd-shackle-result-layout\r\n    .vgd-result-panel {\r\n      grid-template-columns:\r\n        185px\r\n        minmax(0, 1fr)\r\n        320px;\r\n\r\n      gap: 22px;\r\n      padding: 26px;\r\n    }\r\n\r\n    #vgd-product-result.vgd-shackle-result-layout\r\n    .vgd-result-image {\r\n      width: 185px;\r\n      max-width: 185px;\r\n      justify-self: start;\r\n    }\r\n\r\n    #vgd-product-result.vgd-shackle-result-layout\r\n    .vgd-result-actions {\r\n      width: 100%;\r\n      min-width: 0;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     HIDE FINDER AFTER PRODUCT IS FOUND\r\n     ========================================================= *\/\r\n\r\n  #vgd-workspace-panel.vgd-shackle-finder-collapsed {\r\n    display: none;\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  function collapseShackleFinder() {\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (panel) {\r\n\r\n      panel.classList.add(\r\n        \"vgd-shackle-finder-collapsed\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.add(\r\n        \"vgd-shackle-result-layout\"\r\n      );\r\n\r\n\r\n      setTimeout(function () {\r\n\r\n        result.scrollIntoView({\r\n          behavior: \"smooth\",\r\n          block: \"start\"\r\n        });\r\n\r\n      }, 50);\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function restoreShackleFinder() {\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n\r\n    if (panel) {\r\n\r\n      panel.classList.remove(\r\n        \"vgd-shackle-finder-collapsed\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function clearShackleLayout() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"vgd-shackle-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      \/*\r\n         Product found.\r\n         Allow the existing shackle code\r\n         to generate the result first.\r\n      *\/\r\n\r\n      if (\r\n        event.target.closest(\r\n          \"#vgd-find-full-shackle\"\r\n        )\r\n      ) {\r\n\r\n        setTimeout(\r\n          collapseShackleFinder,\r\n          140\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/*\r\n         Choose Another Shackle.\r\n         Existing code already resets\r\n         the shackle choices.\r\n      *\/\r\n\r\n      if (\r\n        event.target.closest(\r\n          \"#vgd-another-shackle\"\r\n        )\r\n      ) {\r\n\r\n        restoreShackleFinder();\r\n\r\n\r\n        setTimeout(function () {\r\n\r\n          const panel =\r\n            document.getElementById(\r\n              \"vgd-workspace-panel\"\r\n            );\r\n\r\n\r\n          if (panel) {\r\n\r\n            panel.scrollIntoView({\r\n              behavior: \"smooth\",\r\n              block: \"start\"\r\n            });\r\n\r\n          }\r\n\r\n        }, 80);\r\n\r\n      }\r\n\r\n\r\n      \/*\r\n         Opening Shackles from Product Families\r\n         must always restore the finder.\r\n      *\/\r\n\r\n      const tool =\r\n        event.target.closest(\r\n          \"[data-tool]\"\r\n        );\r\n\r\n\r\n      if (\r\n        tool &&\r\n        tool.dataset.tool === \"shackles\"\r\n      ) {\r\n\r\n        restoreShackleFinder();\r\n\r\n      }\r\n\r\n\r\n      \/*\r\n         Leaving Shackles removes the\r\n         shackle-specific result sizing.\r\n      *\/\r\n\r\n      if (\r\n        tool &&\r\n        tool.dataset.tool !== \"shackles\"\r\n      ) {\r\n\r\n        restoreShackleFinder();\r\n\r\n        clearShackleLayout();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3cf850 elementor-widget elementor-widget-html\" data-id=\"f3cf850\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD COMPLETE SLING FINDER\r\n     SEPARATE DISTRIBUTOR TOOL MODULE\r\n     ========================================================= *\/\r\n\r\n  .vgd-sling-options,\r\n  .vgd-sling-options * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-sling-options {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 10px;\r\n  }\r\n\r\n  .vgd-sling-option {\r\n    position: relative;\r\n  }\r\n\r\n  .vgd-sling-option input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .vgd-sling-option label {\r\n    height: 100%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border: 1px solid #48525a;\r\n    border-radius: 7px;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    transition:\r\n      border-color 0.2s ease,\r\n      background 0.2s ease,\r\n      transform 0.2s ease;\r\n  }\r\n\r\n  .vgd-sling-option label:hover {\r\n    border-color: #f26a21;\r\n    background: #141d23;\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .vgd-sling-option input:checked + label {\r\n    border-color: #f26a21;\r\n    box-shadow: inset 0 0 0 1px #f26a21;\r\n    background: #141d23;\r\n  }\r\n\r\n  .vgd-sling-style-image {\r\n    width: 100%;\r\n    aspect-ratio: 3 \/ 2;\r\n    display: block;\r\n    object-fit: cover;\r\n    background: #e5e6e7;\r\n    border-bottom: 1px solid rgba(255,255,255,0.08);\r\n  }\r\n\r\n  .vgd-sling-style-title {\r\n    flex: 1;\r\n    min-height: 54px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px 8px;\r\n    color: #ffffff;\r\n    text-align: center;\r\n    font-size: 12px;\r\n    line-height: 1.3;\r\n    font-weight: 800;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SELECTED SLING\r\n     ========================================================= *\/\r\n\r\n  .vgd-sling-options.vgd-sling-selected {\r\n    display: block !important;\r\n    max-width: 380px;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-option {\r\n    display: none;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-option.is-selected {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-option.is-selected label {\r\n    display: grid;\r\n    grid-template-columns: 125px 1fr;\r\n    align-items: center;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-style-image {\r\n    width: 125px;\r\n    height: 88px;\r\n    aspect-ratio: auto;\r\n    object-fit: cover;\r\n    border-bottom: 0;\r\n    border-right: 1px solid rgba(255,255,255,0.08);\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-style-title {\r\n    min-height: 88px;\r\n    font-size: 13px;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHANGE SLING BUTTON\r\n     ========================================================= *\/\r\n\r\n  #vgd-change-sling-style {\r\n    display: none;\r\n    margin: 14px 0 4px;\r\n    padding: 9px 14px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  #vgd-change-sling-style:hover {\r\n    border-color: #f26a21;\r\n    color: #f26a21;\r\n  }\r\n\r\n  #vgd-change-sling-style.is-active {\r\n    display: inline-flex;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CONFIGURATION AREA\r\n     ========================================================= *\/\r\n\r\n  #vgd-sling-configuration {\r\n    display: none;\r\n    margin-top: 30px;\r\n    max-width: 760px;\r\n  }\r\n\r\n  #vgd-sling-configuration.is-active {\r\n    display: block;\r\n  }\r\n\r\n  .vgd-sling-config-section {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .vgd-sling-ply-options {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 180px));\r\n    gap: 10px;\r\n  }\r\n\r\n  .vgd-sling-ply-button {\r\n    min-height: 52px;\r\n    padding: 10px 15px;\r\n    border: 1px solid #48525a;\r\n    border-radius: 6px;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-sling-ply-button:hover,\r\n  .vgd-sling-ply-button.is-selected {\r\n    border-color: #f26a21;\r\n    box-shadow: inset 0 0 0 1px #f26a21;\r\n  }\r\n\r\n  .vgd-sling-info-note {\r\n    margin-top: 12px;\r\n    padding: 12px 14px;\r\n    border-left: 3px solid #f26a21;\r\n    background: rgba(242,106,33,0.07);\r\n    color: rgba(255,255,255,0.7);\r\n    font-size: 12px;\r\n    line-height: 1.55;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SPECS BUTTON\r\n     ========================================================= *\/\r\n\r\n  #vgd-sling-specs-link {\r\n    display: none;\r\n    min-height: 50px;\r\n    padding: 10px 15px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-align: center;\r\n  }\r\n\r\n  #vgd-sling-specs-link.is-active {\r\n    display: flex;\r\n  }\r\n\r\n  #vgd-sling-specs-link:hover {\r\n    border-color: #f26a21;\r\n    color: #ffffff;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESULT NAVIGATION\r\n     ========================================================= *\/\r\n\r\n  #vgd-sling-result-nav {\r\n    display: none;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px;\r\n  }\r\n\r\n  #vgd-sling-result-nav.is-active {\r\n    display: grid;\r\n  }\r\n\r\n  .vgd-sling-nav-button {\r\n    min-height: 46px;\r\n    padding: 9px 12px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n    text-align: center;\r\n  }\r\n\r\n  .vgd-sling-nav-button:hover {\r\n    border-color: #f26a21;\r\n    color: #f26a21;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COLLAPSE FINDER AFTER RESULT\r\n     ========================================================= *\/\r\n\r\n  #vgd-workspace-panel.vgd-sling-finder-collapsed {\r\n    display: none;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SLING RESULT LAYOUT\r\n     ========================================================= *\/\r\n\r\n  .vgd-result-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  @media (min-width: 1101px) {\r\n\r\n    #vgd-product-result.vgd-sling-result-layout\r\n    .vgd-result-panel {\r\n      grid-template-columns:\r\n        185px\r\n        minmax(0, 1fr)\r\n        320px;\r\n\r\n      gap: 22px;\r\n      padding: 26px;\r\n    }\r\n\r\n    #vgd-product-result.vgd-sling-result-layout\r\n    .vgd-result-image {\r\n      width: 185px;\r\n      max-width: 185px;\r\n      justify-self: start;\r\n    }\r\n\r\n    #vgd-product-result.vgd-sling-result-layout\r\n    .vgd-result-actions {\r\n      width: 100%;\r\n      min-width: 0;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TABLET\r\n     ========================================================= *\/\r\n\r\n  @media (max-width: 900px) {\r\n\r\n    .vgd-sling-options {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     MOBILE\r\n     ========================================================= *\/\r\n\r\n  @media (max-width: 600px) {\r\n\r\n    .vgd-sling-options {\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 9px;\r\n    }\r\n\r\n    .vgd-sling-style-title {\r\n      min-height: 50px;\r\n      padding: 8px 6px;\r\n      font-size: 11px;\r\n    }\r\n\r\n    .vgd-sling-options.vgd-sling-selected {\r\n      max-width: 100%;\r\n    }\r\n\r\n    .vgd-sling-options.vgd-sling-selected\r\n    .vgd-sling-option.is-selected label {\r\n      grid-template-columns: 105px 1fr;\r\n    }\r\n\r\n    .vgd-sling-options.vgd-sling-selected\r\n    .vgd-sling-style-image {\r\n      width: 105px;\r\n      height: 76px;\r\n    }\r\n\r\n    .vgd-sling-options.vgd-sling-selected\r\n    .vgd-sling-style-title {\r\n      min-height: 76px;\r\n      font-size: 12px;\r\n    }\r\n\r\n    .vgd-sling-ply-options {\r\n      grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    #vgd-sling-result-nav {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* =========================================================\r\n     BASIC SETTINGS\r\n     ========================================================= *\/\r\n\r\n  const SLING_PDF =\r\n    \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2023\/02\/Slings-Rev2-2023-compressed.pdf\";\r\n\r\n\r\n  const FAMILY_IMAGE =\r\n    \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/vgd-lifting-slings-1200x900-1.webp\";\r\n\r\n\r\n  const SLING_IMAGES = {\r\n\r\n    type3:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-type-3.4-polyester-web-sling-1200x800-1.webp\",\r\n\r\n    type4:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-type-4-polyester-web-sling-1200x800-1.webp\",\r\n\r\n    round:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-endless-round-sling-1200x800-1.webp\",\r\n\r\n    wire:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-wire-rope-sling-1200x800-1.webp\"\r\n\r\n  };\r\n\r\n\r\n  const STANDARD_LENGTHS = [\r\n    2,\r\n    4,\r\n    6,\r\n    8,\r\n    10,\r\n    12,\r\n    16,\r\n    20\r\n  ];\r\n\r\n\r\n  \/* =========================================================\r\n     WEB SLING PRODUCT DATA\r\n     ========================================================= *\/\r\n\r\n  const WEB_SLINGS = {\r\n\r\n    type3: {\r\n\r\n      name:\r\n        \"VGD Type 3 Flat Eye Polyester Web Sling\",\r\n\r\n      image:\r\n        SLING_IMAGES.type3,\r\n\r\n      alt:\r\n        \"VGD Type 3 flat eye polyester web sling\",\r\n\r\n      plies: {\r\n\r\n        single: {\r\n\r\n          label:\r\n            \"Single Ply\",\r\n\r\n          page:\r\n            5,\r\n\r\n          widths: [\r\n\r\n            {\r\n              width: '1\"',\r\n              vertical: 1600,\r\n              choker: 1280,\r\n              basket: 3200,\r\n              prefix: \"340311\"\r\n            },\r\n\r\n            {\r\n              width: '2\"',\r\n              vertical: 3100,\r\n              choker: 2480,\r\n              basket: 6200,\r\n              prefix: \"340312\"\r\n            },\r\n\r\n            {\r\n              width: '3\"',\r\n              vertical: 4700,\r\n              choker: 3760,\r\n              basket: 9400,\r\n              prefix: \"340313\"\r\n            },\r\n\r\n            {\r\n              width: '4\"',\r\n              vertical: 6200,\r\n              choker: 4960,\r\n              basket: 12400,\r\n              prefix: \"340314\"\r\n            }\r\n\r\n          ]\r\n\r\n        },\r\n\r\n\r\n        double: {\r\n\r\n          label:\r\n            \"Double Ply\",\r\n\r\n          page:\r\n            4,\r\n\r\n          widths: [\r\n\r\n            {\r\n              width: '1\"',\r\n              vertical: 3100,\r\n              choker: 2400,\r\n              basket: 6200,\r\n              prefix: \"340301\"\r\n            },\r\n\r\n            {\r\n              width: '2\"',\r\n              vertical: 6200,\r\n              choker: 4960,\r\n              basket: 12400,\r\n              prefix: \"340302\"\r\n            },\r\n\r\n            {\r\n              width: '3\"',\r\n              vertical: 8800,\r\n              choker: 7040,\r\n              basket: 17600,\r\n              prefix: \"340303\"\r\n            },\r\n\r\n            {\r\n              width: '4\"',\r\n              vertical: 11000,\r\n              choker: 8800,\r\n              basket: 22000,\r\n              prefix: \"340304\"\r\n            },\r\n\r\n            {\r\n              width: '6\"',\r\n              vertical: 16500,\r\n              choker: 13200,\r\n              basket: 33000,\r\n              prefix: \"340306\"\r\n            }\r\n\r\n          ]\r\n\r\n        }\r\n\r\n      }\r\n\r\n    },\r\n\r\n\r\n    type4: {\r\n\r\n      name:\r\n        \"VGD Type 4 Twisted Eye Polyester Web Sling\",\r\n\r\n      image:\r\n        SLING_IMAGES.type4,\r\n\r\n      alt:\r\n        \"VGD Type 4 twisted eye polyester web sling\",\r\n\r\n      plies: {\r\n\r\n        double: {\r\n\r\n          label:\r\n            \"Double Ply\",\r\n\r\n          page:\r\n            4,\r\n\r\n          widths: [\r\n\r\n            {\r\n              width: '1\"',\r\n              vertical: 3100,\r\n              choker: 2400,\r\n              basket: 6200,\r\n              prefix: \"340401\"\r\n            },\r\n\r\n            {\r\n              width: '2\"',\r\n              vertical: 6200,\r\n              choker: 4960,\r\n              basket: 12400,\r\n              prefix: \"340402\"\r\n            },\r\n\r\n            {\r\n              width: '3\"',\r\n              vertical: 8800,\r\n              choker: 7040,\r\n              basket: 17600,\r\n              prefix: \"340403\"\r\n            },\r\n\r\n            {\r\n              width: '4\"',\r\n              vertical: 11000,\r\n              choker: 8800,\r\n              basket: 22000,\r\n              prefix: \"340404\"\r\n            },\r\n\r\n            {\r\n              width: '6\"',\r\n              vertical: 16500,\r\n              choker: 13200,\r\n              basket: 33000,\r\n              prefix: \"340406\"\r\n            }\r\n\r\n          ]\r\n\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     ENDLESS ROUND SLING DATA\r\n     ========================================================= *\/\r\n\r\n  const ROUND_SLINGS = [\r\n\r\n    {\r\n      item: \"ENRS-1\",\r\n      colour: \"Purple\",\r\n      vertical: 2600,\r\n      choker: 2080,\r\n      basket: 5200,\r\n      prefix: \"340610\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-2\",\r\n      colour: \"Green\",\r\n      vertical: 5300,\r\n      choker: 4200,\r\n      basket: 10600,\r\n      prefix: \"340620\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-3\",\r\n      colour: \"Yellow\",\r\n      vertical: 8400,\r\n      choker: 6700,\r\n      basket: 16800,\r\n      prefix: \"340630\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-4\",\r\n      colour: \"Tan\",\r\n      vertical: 10600,\r\n      choker: 8480,\r\n      basket: 21200,\r\n      prefix: \"340640\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-5\",\r\n      colour: \"Red\",\r\n      vertical: 13200,\r\n      choker: 10560,\r\n      basket: 26400,\r\n      prefix: \"340650\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-6\",\r\n      colour: \"White\",\r\n      vertical: 17000,\r\n      choker: 13400,\r\n      basket: 33600,\r\n      prefix: \"340660\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-7\",\r\n      colour: \"Blue\",\r\n      vertical: 21200,\r\n      choker: 17000,\r\n      basket: 42400,\r\n      prefix: \"340670\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-8\",\r\n      colour: \"Orange\",\r\n      vertical: 25000,\r\n      choker: 20000,\r\n      basket: 50000,\r\n      prefix: \"340680\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-9\",\r\n      colour: \"Gray\",\r\n      vertical: 31000,\r\n      choker: 24800,\r\n      basket: 62000,\r\n      prefix: \"340690\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-10\",\r\n      colour: \"Orange\",\r\n      vertical: 40000,\r\n      choker: 32000,\r\n      basket: 80000,\r\n      prefix: \"340601\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-11\",\r\n      colour: \"Brown\",\r\n      vertical: 53000,\r\n      choker: 42400,\r\n      basket: 106000,\r\n      prefix: \"340611\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-12\",\r\n      colour: \"Olive\",\r\n      vertical: 66000,\r\n      choker: 52800,\r\n      basket: 132000,\r\n      prefix: \"340612\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-13\",\r\n      colour: \"Black\",\r\n      vertical: 90000,\r\n      choker: 72000,\r\n      basket: 180000,\r\n      prefix: \"340613\"\r\n    }\r\n\r\n  ];\r\n\r\n\r\n  let currentSlingStyle =\r\n    \"\";\r\n\r\n  let currentSlingPly =\r\n    \"\";\r\n\r\n  let currentSlingPart =\r\n    \"\";\r\n\r\n  let currentSlingDescription =\r\n    \"\";\r\n\r\n  let slingResultActive =\r\n    false;\r\n\r\n\r\n  \/* =========================================================\r\n     UPDATE FAMILY IMAGE AUTOMATICALLY\r\n     ========================================================= *\/\r\n\r\n  function updateSlingFamilyImage() {\r\n\r\n    const card =\r\n      document.querySelector(\r\n        '.vgd-family-card[data-tool=\"slings\"]'\r\n      );\r\n\r\n\r\n    if (!card) {\r\n      return;\r\n    }\r\n\r\n\r\n    const image =\r\n      card.querySelector(\r\n        \".vgd-family-image\"\r\n      );\r\n\r\n\r\n    if (image) {\r\n\r\n      image.src =\r\n        FAMILY_IMAGE;\r\n\r\n      image.alt =\r\n        \"VGD lifting slings\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INTERCEPT LIFTING SLINGS\r\n     ========================================================= *\/\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const trigger =\r\n        event.target.closest(\r\n          \"[data-tool]\"\r\n        );\r\n\r\n\r\n      if (!trigger) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        trigger.dataset.tool ===\r\n        \"slings\"\r\n      ) {\r\n\r\n        slingResultActive =\r\n          false;\r\n\r\n\r\n        restoreSlingFinder();\r\n\r\n        clearSlingResultLayout();\r\n\r\n\r\n        setTimeout(\r\n          renderSlingFinder,\r\n          0\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        slingResultActive =\r\n          false;\r\n\r\n        hideSlingSpecs();\r\n\r\n        hideSlingResultNav();\r\n\r\n        restoreSlingFinder();\r\n\r\n        clearSlingResultLayout();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     RENDER MAIN SLING FINDER\r\n     ========================================================= *\/\r\n\r\n  function renderSlingFinder() {\r\n\r\n    const workspace =\r\n      document.getElementById(\r\n        \"vgd-active-workspace\"\r\n      );\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (\r\n      !workspace ||\r\n      !panel\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    currentSlingStyle =\r\n      \"\";\r\n\r\n    currentSlingPly =\r\n      \"\";\r\n\r\n\r\n    panel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Lifting Slings\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          VGD Sling Finder\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          Select the sling style, then enter the\r\n          customer requirements to identify the\r\n          correct VGD product.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          1. Sling Style\r\n        <\/span>\r\n\r\n\r\n        <div\r\n          class=\"vgd-sling-options\"\r\n          id=\"vgd-sling-options\"\r\n        >\r\n\r\n          ${buildSlingCard(\r\n            \"type3\",\r\n            \"Type 3<br>Flat Eye\",\r\n            SLING_IMAGES.type3,\r\n            \"VGD Type 3 flat eye polyester web sling\"\r\n          )}\r\n\r\n          ${buildSlingCard(\r\n            \"type4\",\r\n            \"Type 4<br>Twisted Eye\",\r\n            SLING_IMAGES.type4,\r\n            \"VGD Type 4 twisted eye polyester web sling\"\r\n          )}\r\n\r\n          ${buildSlingCard(\r\n            \"round\",\r\n            \"Endless<br>Round Sling\",\r\n            SLING_IMAGES.round,\r\n            \"VGD endless polyester round sling\"\r\n          )}\r\n\r\n          ${buildSlingCard(\r\n            \"wire\",\r\n            \"Wire Rope<br>Sling\",\r\n            SLING_IMAGES.wire,\r\n            \"VGD wire rope lifting sling\"\r\n          )}\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          id=\"vgd-change-sling-style\"\r\n        >\r\n          Change Sling Style\r\n        <\/button>\r\n\r\n\r\n        <div\r\n          id=\"vgd-sling-configuration\"\r\n        ><\/div>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    workspace.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    panel\r\n      .querySelectorAll(\r\n        'input[name=\"vgd-sling-style\"]'\r\n      )\r\n      .forEach(\r\n        function (input) {\r\n\r\n          input.addEventListener(\r\n            \"change\",\r\n            function () {\r\n\r\n              chooseSlingStyle(\r\n                input.value\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-change-sling-style\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        resetSlingStyle\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STYLE CARD\r\n     ========================================================= *\/\r\n\r\n  function buildSlingCard(\r\n    key,\r\n    title,\r\n    image,\r\n    alt\r\n  ) {\r\n\r\n    return `\r\n\r\n      <div class=\"vgd-sling-option\">\r\n\r\n        <input\r\n          type=\"radio\"\r\n          name=\"vgd-sling-style\"\r\n          id=\"vgd-sling-${key}\"\r\n          value=\"${key}\"\r\n        >\r\n\r\n        <label for=\"vgd-sling-${key}\">\r\n\r\n          <img decoding=\"async\"\r\n            class=\"vgd-sling-style-image\"\r\n            src=\"${image}\"\r\n            alt=\"${alt}\"\r\n          >\r\n\r\n          <span class=\"vgd-sling-style-title\">\r\n            ${title}\r\n          <\/span>\r\n\r\n        <\/label>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHOOSE STYLE\r\n     ========================================================= *\/\r\n\r\n  function chooseSlingStyle(\r\n    styleKey\r\n  ) {\r\n\r\n    currentSlingStyle =\r\n      styleKey;\r\n\r\n    currentSlingPly =\r\n      \"\";\r\n\r\n\r\n    const grid =\r\n      document.getElementById(\r\n        \"vgd-sling-options\"\r\n      );\r\n\r\n    const selected =\r\n      document.getElementById(\r\n        \"vgd-sling-\" +\r\n        styleKey\r\n      );\r\n\r\n\r\n    if (\r\n      !grid ||\r\n      !selected\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    grid\r\n      .querySelectorAll(\r\n        \".vgd-sling-option\"\r\n      )\r\n      .forEach(\r\n        function (card) {\r\n\r\n          card.classList.remove(\r\n            \"is-selected\"\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    const selectedCard =\r\n      selected.closest(\r\n        \".vgd-sling-option\"\r\n      );\r\n\r\n\r\n    selectedCard.classList.add(\r\n      \"is-selected\"\r\n    );\r\n\r\n\r\n    grid.classList.add(\r\n      \"vgd-sling-selected\"\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-change-sling-style\"\r\n      )\r\n      .classList.add(\r\n        \"is-active\"\r\n      );\r\n\r\n\r\n    if (\r\n      styleKey === \"type3\"\r\n    ) {\r\n\r\n      renderType3Configuration();\r\n\r\n    }\r\n\r\n    else if (\r\n      styleKey === \"type4\"\r\n    ) {\r\n\r\n      renderType4Configuration();\r\n\r\n    }\r\n\r\n    else if (\r\n      styleKey === \"round\"\r\n    ) {\r\n\r\n      renderRoundConfiguration();\r\n\r\n    }\r\n\r\n    else if (\r\n      styleKey === \"wire\"\r\n    ) {\r\n\r\n      renderWireRopeConfiguration();\r\n\r\n    }\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-sling-configuration\"\r\n        )\r\n        .scrollIntoView({\r\n          behavior: \"smooth\",\r\n          block: \"center\"\r\n        });\r\n\r\n    }, 100);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESET STYLE\r\n     ========================================================= *\/\r\n\r\n  function resetSlingStyle() {\r\n\r\n    const grid =\r\n      document.getElementById(\r\n        \"vgd-sling-options\"\r\n      );\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n    const change =\r\n      document.getElementById(\r\n        \"vgd-change-sling-style\"\r\n      );\r\n\r\n\r\n    currentSlingStyle =\r\n      \"\";\r\n\r\n    currentSlingPly =\r\n      \"\";\r\n\r\n\r\n    if (grid) {\r\n\r\n      grid.classList.remove(\r\n        \"vgd-sling-selected\"\r\n      );\r\n\r\n\r\n      grid\r\n        .querySelectorAll(\r\n          \".vgd-sling-option\"\r\n        )\r\n        .forEach(\r\n          function (card) {\r\n\r\n            card.classList.remove(\r\n              \"is-selected\"\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      grid\r\n        .querySelectorAll(\r\n          'input[name=\"vgd-sling-style\"]'\r\n        )\r\n        .forEach(\r\n          function (radio) {\r\n\r\n            radio.checked =\r\n              false;\r\n\r\n          }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if (config) {\r\n\r\n      config.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      config.innerHTML =\r\n        \"\";\r\n\r\n    }\r\n\r\n\r\n    if (change) {\r\n\r\n      change.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TYPE 3\r\n     ========================================================= *\/\r\n\r\n  function renderType3Configuration() {\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          2. Ply\r\n        <\/span>\r\n\r\n        <div class=\"vgd-sling-ply-options\">\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-sling-ply-button\"\r\n            data-sling-ply=\"single\"\r\n          >\r\n            Single Ply\r\n          <\/button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-sling-ply-button\"\r\n            data-sling-ply=\"double\"\r\n          >\r\n            Double Ply\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        id=\"vgd-web-sling-fields\"\r\n      ><\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    config\r\n      .querySelectorAll(\r\n        \"[data-sling-ply]\"\r\n      )\r\n      .forEach(\r\n        function (button) {\r\n\r\n          button.addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n              selectWebSlingPly(\r\n                \"type3\",\r\n                button.dataset.slingPly,\r\n                button\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TYPE 4\r\n     ========================================================= *\/\r\n\r\n  function renderType4Configuration() {\r\n\r\n    currentSlingPly =\r\n      \"double\";\r\n\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          2. Ply\r\n        <\/span>\r\n\r\n        <div class=\"vgd-sling-ply-options\">\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-sling-ply-button is-selected\"\r\n            disabled\r\n          >\r\n            Double Ply\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"vgd-sling-info-note\">\r\n          The current VGD product code table lists\r\n          Type 4 twisted eye slings in double ply.\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        id=\"vgd-web-sling-fields\"\r\n      ><\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    renderWebSlingFields(\r\n      \"type4\",\r\n      \"double\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SELECT PLY\r\n     ========================================================= *\/\r\n\r\n  function selectWebSlingPly(\r\n    style,\r\n    ply,\r\n    clickedButton\r\n  ) {\r\n\r\n    currentSlingPly =\r\n      ply;\r\n\r\n\r\n    document\r\n      .querySelectorAll(\r\n        \".vgd-sling-ply-button\"\r\n      )\r\n      .forEach(\r\n        function (button) {\r\n\r\n          button.classList.remove(\r\n            \"is-selected\"\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    clickedButton.classList.add(\r\n      \"is-selected\"\r\n    );\r\n\r\n\r\n    renderWebSlingFields(\r\n      style,\r\n      ply\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     WEB SLING FIELDS\r\n     ========================================================= *\/\r\n\r\n  function renderWebSlingFields(\r\n    styleKey,\r\n    plyKey\r\n  ) {\r\n\r\n    const fields =\r\n      document.getElementById(\r\n        \"vgd-web-sling-fields\"\r\n      );\r\n\r\n    const data =\r\n      WEB_SLINGS[\r\n        styleKey\r\n      ].plies[\r\n        plyKey\r\n      ];\r\n\r\n\r\n    if (\r\n      !fields ||\r\n      !data\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const widthOptions =\r\n      data.widths.map(\r\n        function (\r\n          item,\r\n          index\r\n        ) {\r\n\r\n          return `\r\n\r\n            <option value=\"${index}\">\r\n              ${item.width} | Vertical WLL ${formatNumber(item.vertical)} lb\r\n            <\/option>\r\n\r\n          `;\r\n\r\n        }\r\n      ).join(\"\");\r\n\r\n\r\n    const lengthOptions =\r\n      buildLengthOptions();\r\n\r\n\r\n    fields.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-web-sling-width\"\r\n        >\r\n          3. Width \/ Vertical Working Load Limit\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-web-sling-width\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Width \/ Vertical WLL\r\n          <\/option>\r\n\r\n          ${widthOptions}\r\n\r\n        <\/select>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-web-sling-length\"\r\n        >\r\n          4. Finished Length\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-web-sling-length\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Length\r\n          <\/option>\r\n\r\n          ${lengthOptions}\r\n\r\n        <\/select>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-find-button\"\r\n          id=\"vgd-find-web-sling\"\r\n        >\r\n          Find Product\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-web-sling\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findWebSling\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND WEB SLING\r\n     ========================================================= *\/\r\n\r\n  function findWebSling() {\r\n\r\n    const widthSelect =\r\n      document.getElementById(\r\n        \"vgd-web-sling-width\"\r\n      );\r\n\r\n    const lengthSelect =\r\n      document.getElementById(\r\n        \"vgd-web-sling-length\"\r\n      );\r\n\r\n\r\n    if (\r\n      !widthSelect ||\r\n      !lengthSelect ||\r\n      widthSelect.value === \"\" ||\r\n      lengthSelect.value === \"\"\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select the sling width and finished length.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const style =\r\n      WEB_SLINGS[\r\n        currentSlingStyle\r\n      ];\r\n\r\n    const ply =\r\n      style.plies[\r\n        currentSlingPly\r\n      ];\r\n\r\n    const sling =\r\n      ply.widths[\r\n        Number(\r\n          widthSelect.value\r\n        )\r\n      ];\r\n\r\n    const length =\r\n      Number(\r\n        lengthSelect.value\r\n      );\r\n\r\n    const code =\r\n      sling.prefix +\r\n      formatLength(\r\n        length\r\n      );\r\n\r\n\r\n    const description =\r\n      style.name +\r\n      \", \" +\r\n      ply.label +\r\n      \", \" +\r\n      sling.width +\r\n      \" x \" +\r\n      length +\r\n      \" ft\" +\r\n      \", Vertical WLL \" +\r\n      formatNumber(\r\n        sling.vertical\r\n      ) +\r\n      \" lb\" +\r\n      \", VGD \" +\r\n      code;\r\n\r\n\r\n    showSlingResult({\r\n\r\n      heading:\r\n        style.name,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        description,\r\n\r\n      image:\r\n        style.image,\r\n\r\n      alt:\r\n        style.alt,\r\n\r\n      page:\r\n        ply.page,\r\n\r\n      resourceLabel:\r\n        ply.label,\r\n\r\n      details: [\r\n\r\n        [\r\n          \"Ply\",\r\n          ply.label\r\n        ],\r\n\r\n        [\r\n          \"Width\",\r\n          sling.width\r\n        ],\r\n\r\n        [\r\n          \"Length\",\r\n          length + \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Vertical WLL\",\r\n          formatNumber(\r\n            sling.vertical\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Choker WLL\",\r\n          formatNumber(\r\n            sling.choker\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Basket WLL\",\r\n          formatNumber(\r\n            sling.basket\r\n          ) + \" lb\"\r\n        ]\r\n\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     ROUND SLING\r\n     ========================================================= *\/\r\n\r\n  function renderRoundConfiguration() {\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    const capacityOptions =\r\n      ROUND_SLINGS.map(\r\n        function (\r\n          sling,\r\n          index\r\n        ) {\r\n\r\n          return `\r\n\r\n            <option value=\"${index}\">\r\n              ${sling.colour} | ${formatNumber(sling.vertical)} lb Vertical WLL\r\n            <\/option>\r\n\r\n          `;\r\n\r\n        }\r\n      ).join(\"\");\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-round-capacity\"\r\n        >\r\n          2. Colour \/ Vertical Working Load Limit\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-round-capacity\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Colour \/ Vertical WLL\r\n          <\/option>\r\n\r\n          ${capacityOptions}\r\n\r\n        <\/select>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-round-length\"\r\n        >\r\n          3. Finished Length\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-round-length\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Length\r\n          <\/option>\r\n\r\n          ${buildLengthOptions()}\r\n\r\n        <\/select>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-find-button\"\r\n          id=\"vgd-find-round-sling\"\r\n        >\r\n          Find Product\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-round-sling\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findRoundSling\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND ROUND SLING\r\n     ========================================================= *\/\r\n\r\n  function findRoundSling() {\r\n\r\n    const capacity =\r\n      document.getElementById(\r\n        \"vgd-round-capacity\"\r\n      );\r\n\r\n    const lengthSelect =\r\n      document.getElementById(\r\n        \"vgd-round-length\"\r\n      );\r\n\r\n\r\n    if (\r\n      !capacity ||\r\n      !lengthSelect ||\r\n      capacity.value === \"\" ||\r\n      lengthSelect.value === \"\"\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select the round sling capacity and finished length.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const sling =\r\n      ROUND_SLINGS[\r\n        Number(\r\n          capacity.value\r\n        )\r\n      ];\r\n\r\n    const length =\r\n      Number(\r\n        lengthSelect.value\r\n      );\r\n\r\n    const code =\r\n      sling.prefix +\r\n      formatLength(\r\n        length\r\n      );\r\n\r\n\r\n    const productName =\r\n      \"VGD Polyester Endless Round Sling\";\r\n\r\n\r\n    showSlingResult({\r\n\r\n      heading:\r\n        productName,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        productName +\r\n        \", \" +\r\n        sling.item +\r\n        \", \" +\r\n        sling.colour +\r\n        \", \" +\r\n        length +\r\n        \" ft\" +\r\n        \", Vertical WLL \" +\r\n        formatNumber(\r\n          sling.vertical\r\n        ) +\r\n        \" lb\" +\r\n        \", VGD \" +\r\n        code,\r\n\r\n      image:\r\n        SLING_IMAGES.round,\r\n\r\n      alt:\r\n        \"VGD endless polyester round sling\",\r\n\r\n      page:\r\n        6,\r\n\r\n      resourceLabel:\r\n        \"Round Sling\",\r\n\r\n      details: [\r\n\r\n        [\r\n          \"Size\",\r\n          sling.item +\r\n          \" | \" +\r\n          sling.colour +\r\n          \" | \" +\r\n          length +\r\n          \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Model\",\r\n          sling.item\r\n        ],\r\n\r\n        [\r\n          \"Colour\",\r\n          sling.colour\r\n        ],\r\n\r\n        [\r\n          \"Length\",\r\n          length + \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Vertical WLL\",\r\n          formatNumber(\r\n            sling.vertical\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Choker WLL\",\r\n          formatNumber(\r\n            sling.choker\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Basket WLL\",\r\n          formatNumber(\r\n            sling.basket\r\n          ) + \" lb\"\r\n        ]\r\n\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     WIRE ROPE SLING\r\n     ========================================================= *\/\r\n\r\n  function renderWireRopeConfiguration() {\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-info-note\">\r\n\r\n        <strong>\r\n          Wire Rope Sling Finder\r\n        <\/strong>\r\n\r\n        <br><br>\r\n\r\n        The current VGD catalogue provides wire rope sling\r\n        sizes, lengths and working load limits, but does not\r\n        provide a distributor product code pattern.\r\n\r\n        <br><br>\r\n\r\n        We will connect the full wire rope sling selector once\r\n        the VGD product codes are confirmed.\r\n\r\n      <\/div>\r\n\r\n\r\n      <a\r\n        class=\"vgd-find-button\"\r\n        style=\"\r\n          display:flex;\r\n          align-items:center;\r\n          justify-content:center;\r\n          text-decoration:none;\r\n        \"\r\n        href=\"${SLING_PDF}#page=9\"\r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n      >\r\n        View Wire Rope Sling Specs\r\n      <\/a>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SHOW RESULT\r\n     ========================================================= *\/\r\n\r\n  function showSlingResult(\r\n    data\r\n  ) {\r\n\r\n    const productResult =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n    const heading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n    const details =\r\n      document.getElementById(\r\n        \"vgd-result-details\"\r\n      );\r\n\r\n    const part =\r\n      document.getElementById(\r\n        \"vgd-part-number\"\r\n      );\r\n\r\n    const image =\r\n      document.querySelector(\r\n        \".vgd-result-image\"\r\n      );\r\n\r\n\r\n    if (\r\n      !productResult ||\r\n      !heading ||\r\n      !details ||\r\n      !part\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    currentSlingPart =\r\n      data.partNumber;\r\n\r\n    currentSlingDescription =\r\n      data.description;\r\n\r\n    slingResultActive =\r\n      true;\r\n\r\n\r\n    heading.textContent =\r\n      data.heading;\r\n\r\n\r\n    part.textContent =\r\n      data.partNumber;\r\n\r\n\r\n    details.innerHTML =\r\n      data.details.map(\r\n        function (item) {\r\n\r\n          return `\r\n\r\n            <div class=\"vgd-result-label\">\r\n              ${item[0]}\r\n            <\/div>\r\n\r\n            <div>\r\n              ${item[1]}\r\n            <\/div>\r\n\r\n          `;\r\n\r\n        }\r\n      ).join(\"\");\r\n\r\n\r\n    if (image) {\r\n\r\n      image.innerHTML = `\r\n\r\n        <img decoding=\"async\"\r\n          src=\"${data.image}\"\r\n          alt=\"${data.alt}\"\r\n        >\r\n\r\n      `;\r\n\r\n    }\r\n\r\n\r\n    updateSlingSpecs(\r\n      data.page,\r\n      data.resourceLabel\r\n    );\r\n\r\n\r\n    showSlingResultNav();\r\n\r\n\r\n    productResult.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n    productResult.classList.add(\r\n      \"vgd-sling-result-layout\"\r\n    );\r\n\r\n\r\n    resetVgdListQuantity();\r\n\r\n\r\n    setTimeout(\r\n      collapseSlingFinder,\r\n      100\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SPECS BUTTON\r\n     ========================================================= *\/\r\n\r\n  function ensureSlingSpecsButton() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \".vgd-result-actions\"\r\n      );\r\n\r\n\r\n    if (!actions) {\r\n      return null;\r\n    }\r\n\r\n\r\n    let link =\r\n      document.getElementById(\r\n        \"vgd-sling-specs-link\"\r\n      );\r\n\r\n\r\n    if (!link) {\r\n\r\n      link =\r\n        document.createElement(\r\n          \"a\"\r\n        );\r\n\r\n      link.id =\r\n        \"vgd-sling-specs-link\";\r\n\r\n      link.target =\r\n        \"_blank\";\r\n\r\n      link.rel =\r\n        \"noopener\";\r\n\r\n\r\n      const listControls =\r\n        document.getElementById(\r\n          \"vgd-list-result-controls\"\r\n        );\r\n\r\n\r\n      if (listControls) {\r\n\r\n        actions.insertBefore(\r\n          link,\r\n          listControls\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        actions.appendChild(\r\n          link\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    return link;\r\n\r\n  }\r\n\r\n\r\n  function updateSlingSpecs(\r\n    page,\r\n    label\r\n  ) {\r\n\r\n    const link =\r\n      ensureSlingSpecsButton();\r\n\r\n\r\n    if (!link) {\r\n      return;\r\n    }\r\n\r\n\r\n    link.href =\r\n      SLING_PDF +\r\n      \"#page=\" +\r\n      page;\r\n\r\n\r\n    link.textContent =\r\n      \"Sling Capacity & Specs \u00b7 \" +\r\n      label;\r\n\r\n\r\n    link.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function hideSlingSpecs() {\r\n\r\n    const link =\r\n      document.getElementById(\r\n        \"vgd-sling-specs-link\"\r\n      );\r\n\r\n\r\n    if (link) {\r\n\r\n      link.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESULT NAVIGATION\r\n     ========================================================= *\/\r\n\r\n  function ensureSlingResultNav() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \".vgd-result-actions\"\r\n      );\r\n\r\n\r\n    if (!actions) {\r\n      return null;\r\n    }\r\n\r\n\r\n    let nav =\r\n      document.getElementById(\r\n        \"vgd-sling-result-nav\"\r\n      );\r\n\r\n\r\n    if (!nav) {\r\n\r\n      nav =\r\n        document.createElement(\r\n          \"div\"\r\n        );\r\n\r\n      nav.id =\r\n        \"vgd-sling-result-nav\";\r\n\r\n\r\n      nav.innerHTML = `\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-sling-nav-button\"\r\n          id=\"vgd-another-sling\"\r\n        >\r\n          Choose Another Sling\r\n        <\/button>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-sling-nav-button\"\r\n          id=\"vgd-sling-product-families\"\r\n        >\r\n          Product Families\r\n        <\/button>\r\n\r\n      `;\r\n\r\n\r\n      const listControls =\r\n        document.getElementById(\r\n          \"vgd-list-result-controls\"\r\n        );\r\n\r\n\r\n      if (listControls) {\r\n\r\n        actions.insertBefore(\r\n          nav,\r\n          listControls\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        actions.appendChild(\r\n          nav\r\n        );\r\n\r\n      }\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-another-sling\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          chooseAnotherSling\r\n        );\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-sling-product-families\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          goToSlingProductFamilies\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return nav;\r\n\r\n  }\r\n\r\n\r\n  function showSlingResultNav() {\r\n\r\n    const nav =\r\n      ensureSlingResultNav();\r\n\r\n\r\n    if (nav) {\r\n\r\n      nav.classList.add(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    const oldBack =\r\n      document.querySelector(\r\n        \".vgd-back-row\"\r\n      );\r\n\r\n\r\n    if (oldBack) {\r\n\r\n      oldBack.style.display =\r\n        \"none\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function hideSlingResultNav() {\r\n\r\n    const nav =\r\n      document.getElementById(\r\n        \"vgd-sling-result-nav\"\r\n      );\r\n\r\n\r\n    if (nav) {\r\n\r\n      nav.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    const oldBack =\r\n      document.querySelector(\r\n        \".vgd-back-row\"\r\n      );\r\n\r\n\r\n    if (oldBack) {\r\n\r\n      oldBack.style.display =\r\n        \"\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHOOSE ANOTHER SLING\r\n     ========================================================= *\/\r\n\r\n  function chooseAnotherSling() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      result.classList.remove(\r\n        \"vgd-sling-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    restoreSlingFinder();\r\n\r\n    hideSlingResultNav();\r\n\r\n    hideSlingSpecs();\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      renderSlingFinder();\r\n\r\n\r\n      setTimeout(function () {\r\n\r\n        const panel =\r\n          document.getElementById(\r\n            \"vgd-workspace-panel\"\r\n          );\r\n\r\n\r\n        if (panel) {\r\n\r\n          panel.scrollIntoView({\r\n            behavior: \"smooth\",\r\n            block: \"start\"\r\n          });\r\n\r\n        }\r\n\r\n      }, 50);\r\n\r\n    }, 20);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT FAMILIES\r\n     ========================================================= *\/\r\n\r\n  function goToSlingProductFamilies() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      result.classList.remove(\r\n        \"vgd-sling-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    restoreSlingFinder();\r\n\r\n    hideSlingResultNav();\r\n\r\n    hideSlingSpecs();\r\n\r\n\r\n    const families =\r\n      document.getElementById(\r\n        \"vgd-product-families\"\r\n      );\r\n\r\n\r\n    if (families) {\r\n\r\n      families.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"start\"\r\n      });\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COLLAPSE \/ RESTORE FINDER\r\n     ========================================================= *\/\r\n\r\n  function collapseSlingFinder() {\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (panel) {\r\n\r\n      panel.classList.add(\r\n        \"vgd-sling-finder-collapsed\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (result) {\r\n\r\n      setTimeout(function () {\r\n\r\n        result.scrollIntoView({\r\n          behavior: \"smooth\",\r\n          block: \"start\"\r\n        });\r\n\r\n      }, 40);\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function restoreSlingFinder() {\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n\r\n    if (panel) {\r\n\r\n      panel.classList.remove(\r\n        \"vgd-sling-finder-collapsed\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function clearSlingResultLayout() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"vgd-sling-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY BUTTON SUPPORT\r\n     ========================================================= *\/\r\n\r\n  function attachSlingCopyButtons() {\r\n\r\n    const copyPart =\r\n      document.getElementById(\r\n        \"vgd-copy-part\"\r\n      );\r\n\r\n    const copyDescription =\r\n      document.getElementById(\r\n        \"vgd-copy-description\"\r\n      );\r\n\r\n\r\n    if (copyPart) {\r\n\r\n      copyPart.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (\r\n            !slingResultActive\r\n          ) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copySlingText(\r\n            currentSlingPart\r\n          );\r\n\r\n\r\n          flashSlingButton(\r\n            copyPart,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (copyDescription) {\r\n\r\n      copyDescription.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (\r\n            !slingResultActive\r\n          ) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copySlingText(\r\n            currentSlingDescription\r\n          );\r\n\r\n\r\n          flashSlingButton(\r\n            copyDescription,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESET VGD LIST QUANTITY\r\n     ========================================================= *\/\r\n\r\n  function resetVgdListQuantity() {\r\n\r\n    const value =\r\n      document.getElementById(\r\n        \"vgd-result-qty-value\"\r\n      );\r\n\r\n    const minus =\r\n      document.getElementById(\r\n        \"vgd-result-qty-minus\"\r\n      );\r\n\r\n\r\n    if (\r\n      !value ||\r\n      !minus\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    let safety =\r\n      100;\r\n\r\n\r\n    while (\r\n      Number(\r\n        value.textContent\r\n      ) > 1 &&\r\n      safety > 0\r\n    ) {\r\n\r\n      minus.click();\r\n\r\n      safety--;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SEARCH ALIASES\r\n     ========================================================= *\/\r\n\r\n  function attachSlingSearchAliases() {\r\n\r\n    const input =\r\n      document.getElementById(\r\n        \"vgd-search-input\"\r\n      );\r\n\r\n    const results =\r\n      document.getElementById(\r\n        \"vgd-search-results\"\r\n      );\r\n\r\n\r\n    if (\r\n      !input ||\r\n      !results\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const aliases = [\r\n\r\n      \"type 3\",\r\n      \"type 3 sling\",\r\n      \"flat eye sling\",\r\n      \"type 4\",\r\n      \"type 4 sling\",\r\n      \"twisted eye sling\",\r\n      \"round sling\",\r\n      \"endless round sling\",\r\n      \"wire rope sling\",\r\n      \"polyester web sling\",\r\n      \"poly sling\",\r\n      \"lifting sling\"\r\n\r\n    ];\r\n\r\n\r\n    input.addEventListener(\r\n      \"input\",\r\n      function () {\r\n\r\n        setTimeout(\r\n          augmentSlingSearch,\r\n          0\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function augmentSlingSearch() {\r\n\r\n      const term =\r\n        input.value\r\n          .trim()\r\n          .toLowerCase();\r\n\r\n\r\n      if (\r\n        term.length < 2\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const match =\r\n        aliases.some(\r\n          function (alias) {\r\n\r\n            return (\r\n              alias.includes(term) ||\r\n              term.includes(alias)\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      if (!match) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        results.querySelector(\r\n          '[data-tool=\"slings\"]'\r\n        )\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const button =\r\n        document.createElement(\r\n          \"button\"\r\n        );\r\n\r\n\r\n      button.type =\r\n        \"button\";\r\n\r\n      button.className =\r\n        \"vgd-search-result\";\r\n\r\n      button.dataset.tool =\r\n        \"slings\";\r\n\r\n\r\n      button.innerHTML = `\r\n\r\n        <span>\r\n\r\n          <span class=\"vgd-search-result-name\">\r\n            VGD Lifting Slings\r\n          <\/span>\r\n\r\n          <span class=\"vgd-search-result-copy\">\r\n            Type 3, Type 4, round and wire rope slings\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n        <span class=\"vgd-search-result-arrow\">\r\n          \u203a\r\n        <\/span>\r\n\r\n      `;\r\n\r\n\r\n      const empty =\r\n        results.querySelector(\r\n          \".vgd-search-empty\"\r\n        );\r\n\r\n\r\n      if (empty) {\r\n\r\n        empty.remove();\r\n\r\n      }\r\n\r\n\r\n      results.appendChild(\r\n        button\r\n      );\r\n\r\n\r\n      results.classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     HELPERS\r\n     ========================================================= *\/\r\n\r\n  function buildLengthOptions() {\r\n\r\n    return STANDARD_LENGTHS.map(\r\n      function (length) {\r\n\r\n        return `\r\n\r\n          <option value=\"${length}\">\r\n            ${length} ft\r\n          <\/option>\r\n\r\n        `;\r\n\r\n      }\r\n    ).join(\"\");\r\n\r\n  }\r\n\r\n\r\n  function formatLength(\r\n    length\r\n  ) {\r\n\r\n    return String(\r\n      length\r\n    ).padStart(\r\n      2,\r\n      \"0\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function formatNumber(\r\n    number\r\n  ) {\r\n\r\n    return Number(\r\n      number\r\n    ).toLocaleString(\r\n      \"en-CA\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function copySlingText(\r\n    text\r\n  ) {\r\n\r\n    if (\r\n      navigator.clipboard &&\r\n      window.isSecureContext\r\n    ) {\r\n\r\n      navigator.clipboard.writeText(\r\n        text\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const temp =\r\n      document.createElement(\r\n        \"textarea\"\r\n      );\r\n\r\n    temp.value =\r\n      text;\r\n\r\n    document.body.appendChild(\r\n      temp\r\n    );\r\n\r\n    temp.select();\r\n\r\n    document.execCommand(\r\n      \"copy\"\r\n    );\r\n\r\n    temp.remove();\r\n\r\n  }\r\n\r\n\r\n  function flashSlingButton(\r\n    button,\r\n    message\r\n  ) {\r\n\r\n    const original =\r\n      button.textContent;\r\n\r\n\r\n    button.textContent =\r\n      message;\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      button.textContent =\r\n        original;\r\n\r\n    }, 1200);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  function initializeVgdSlingFinder() {\r\n\r\n    updateSlingFamilyImage();\r\n\r\n    attachSlingCopyButtons();\r\n\r\n    attachSlingSearchAliases();\r\n\r\n    ensureSlingSpecsButton();\r\n\r\n    ensureSlingResultNav();\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initializeVgdSlingFinder\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    initializeVgdSlingFinder();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14a9585 elementor-widget elementor-widget-html\" data-id=\"14a9585\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   VGD COMPLETE SLING FINDER\r\n   Separate add-on for VGD Distributor Tools\r\n   ========================================================= *\/\r\n\r\n.vgd-sling-options,\r\n.vgd-sling-options * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.vgd-sling-options {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 10px;\r\n}\r\n\r\n.vgd-sling-option {\r\n  position: relative;\r\n}\r\n\r\n.vgd-sling-option input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.vgd-sling-option label {\r\n  height: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n  border: 1px solid #48525a;\r\n  border-radius: 7px;\r\n  background: #0d1318;\r\n  color: #ffffff;\r\n  cursor: pointer;\r\n  transition:\r\n    border-color 0.2s ease,\r\n    background 0.2s ease,\r\n    transform 0.2s ease;\r\n}\r\n\r\n.vgd-sling-option label:hover {\r\n  border-color: #f26a21;\r\n  background: #141d23;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.vgd-sling-option input:checked + label {\r\n  border-color: #f26a21;\r\n  box-shadow: inset 0 0 0 1px #f26a21;\r\n  background: #141d23;\r\n}\r\n\r\n.vgd-sling-style-image {\r\n  width: 100%;\r\n  aspect-ratio: 3 \/ 2;\r\n  display: block;\r\n  object-fit: cover;\r\n  background: #e6e7e8;\r\n  border-bottom: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n.vgd-sling-style-title {\r\n  flex: 1;\r\n  min-height: 56px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 10px 8px;\r\n  color: #ffffff;\r\n  text-align: center;\r\n  font-size: 13px;\r\n  line-height: 1.3;\r\n  font-weight: 800;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SELECTED STYLE\r\n   ========================================================= *\/\r\n\r\n.vgd-sling-options.vgd-sling-selected {\r\n  display: block;\r\n  max-width: 410px;\r\n}\r\n\r\n.vgd-sling-options.vgd-sling-selected .vgd-sling-option {\r\n  display: none;\r\n}\r\n\r\n.vgd-sling-options.vgd-sling-selected\r\n.vgd-sling-option.is-selected {\r\n  display: block;\r\n}\r\n\r\n.vgd-sling-options.vgd-sling-selected\r\n.vgd-sling-option.is-selected label {\r\n  display: grid;\r\n  grid-template-columns: 135px 1fr;\r\n  align-items: center;\r\n}\r\n\r\n.vgd-sling-options.vgd-sling-selected\r\n.vgd-sling-style-image {\r\n  width: 135px;\r\n  height: 90px;\r\n  aspect-ratio: auto;\r\n  object-fit: cover;\r\n  border-bottom: 0;\r\n  border-right: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n.vgd-sling-options.vgd-sling-selected\r\n.vgd-sling-style-title {\r\n  min-height: 90px;\r\n  font-size: 14px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CHANGE STYLE\r\n   ========================================================= *\/\r\n\r\n#vgd-change-sling-style {\r\n  display: none;\r\n  margin: 14px 0 0;\r\n  padding: 10px 15px;\r\n  border: 1px solid #59636b;\r\n  border-radius: 5px;\r\n  background: transparent;\r\n  color: #ffffff;\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n}\r\n\r\n#vgd-change-sling-style.is-active {\r\n  display: inline-flex;\r\n}\r\n\r\n#vgd-change-sling-style:hover {\r\n  border-color: #f26a21;\r\n  color: #f26a21;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONFIGURATION\r\n   ========================================================= *\/\r\n\r\n#vgd-sling-configuration {\r\n  display: none;\r\n  max-width: 760px;\r\n  margin-top: 32px;\r\n}\r\n\r\n#vgd-sling-configuration.is-active {\r\n  display: block;\r\n}\r\n\r\n.vgd-sling-config-section {\r\n  margin-bottom: 25px;\r\n}\r\n\r\n.vgd-sling-ply-options {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 180px));\r\n  gap: 10px;\r\n}\r\n\r\n.vgd-sling-ply-button {\r\n  min-height: 52px;\r\n  padding: 10px 15px;\r\n  border: 1px solid #48525a;\r\n  border-radius: 6px;\r\n  background: #0d1318;\r\n  color: #ffffff;\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  font-size: 14px;\r\n  font-weight: 800;\r\n}\r\n\r\n.vgd-sling-ply-button:hover,\r\n.vgd-sling-ply-button.is-selected {\r\n  border-color: #f26a21;\r\n  box-shadow: inset 0 0 0 1px #f26a21;\r\n}\r\n\r\n.vgd-sling-ply-button:disabled {\r\n  cursor: default;\r\n  opacity: 1;\r\n}\r\n\r\n.vgd-sling-note {\r\n  margin-top: 12px;\r\n  padding: 12px 14px;\r\n  border-left: 3px solid #f26a21;\r\n  background: rgba(242,106,33,0.07);\r\n  color: rgba(255,255,255,0.70);\r\n  font-size: 12px;\r\n  line-height: 1.55;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT TECHNICAL BUTTON\r\n   ========================================================= *\/\r\n\r\n#vgd-sling-specs-link {\r\n  display: none;\r\n  min-height: 50px;\r\n  padding: 10px 15px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid #59636b;\r\n  border-radius: 5px;\r\n  background: transparent;\r\n  color: #ffffff;\r\n  text-decoration: none;\r\n  font-family: inherit;\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n  text-align: center;\r\n}\r\n\r\n#vgd-sling-specs-link.is-active {\r\n  display: flex;\r\n}\r\n\r\n#vgd-sling-specs-link:hover {\r\n  border-color: #f26a21;\r\n  color: #ffffff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT NAVIGATION\r\n   ========================================================= *\/\r\n\r\n#vgd-sling-result-nav {\r\n  display: none;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 10px;\r\n}\r\n\r\n#vgd-sling-result-nav.is-active {\r\n  display: grid;\r\n}\r\n\r\n.vgd-sling-nav-button {\r\n  min-height: 46px;\r\n  padding: 9px 10px;\r\n  border: 1px solid #59636b;\r\n  border-radius: 5px;\r\n  background: transparent;\r\n  color: #ffffff;\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  line-height: 1.3;\r\n  font-weight: 800;\r\n  text-align: center;\r\n}\r\n\r\n.vgd-sling-nav-button:hover {\r\n  border-color: #f26a21;\r\n  color: #f26a21;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COLLAPSE FINDER AFTER RESULT\r\n   ========================================================= *\/\r\n\r\n#vgd-workspace-panel.vgd-sling-finder-collapsed {\r\n  display: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT IMAGE + DESKTOP LAYOUT\r\n   ========================================================= *\/\r\n\r\n#vgd-product-result.vgd-sling-result-layout\r\n.vgd-result-image img {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n  border-radius: 6px;\r\n}\r\n\r\n#vgd-product-result.vgd-sling-result-layout\r\n.vgd-result-details {\r\n  grid-template-columns: 130px 1fr;\r\n}\r\n\r\n@media (min-width: 1101px) {\r\n\r\n  #vgd-product-result.vgd-sling-result-layout\r\n  .vgd-result-panel {\r\n    grid-template-columns:\r\n      185px\r\n      minmax(0, 1fr)\r\n      320px;\r\n    gap: 22px;\r\n    padding: 26px;\r\n  }\r\n\r\n  #vgd-product-result.vgd-sling-result-layout\r\n  .vgd-result-image {\r\n    width: 185px;\r\n    max-width: 185px;\r\n    justify-self: start;\r\n  }\r\n\r\n  #vgd-product-result.vgd-sling-result-layout\r\n  .vgd-result-actions {\r\n    width: 100%;\r\n    min-width: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n  .vgd-sling-options {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n  .vgd-sling-options {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 9px;\r\n  }\r\n\r\n  .vgd-sling-style-title {\r\n    min-height: 50px;\r\n    padding: 8px 5px;\r\n    font-size: 11px;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected {\r\n    max-width: 100%;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-option.is-selected label {\r\n    grid-template-columns: 105px 1fr;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-style-image {\r\n    width: 105px;\r\n    height: 76px;\r\n  }\r\n\r\n  .vgd-sling-options.vgd-sling-selected\r\n  .vgd-sling-style-title {\r\n    min-height: 76px;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .vgd-sling-ply-options {\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  #vgd-sling-result-nav {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* =========================================================\r\n     SETTINGS\r\n     ========================================================= *\/\r\n\r\n  const SLING_CATALOG =\r\n    \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2023\/02\/Slings-Rev2-2023-compressed.pdf\";\r\n\r\n\r\n  const FAMILY_IMAGE =\r\n    \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/vgd-lifting-slings-1200x900-1.webp\";\r\n\r\n\r\n  const IMAGES = {\r\n\r\n    type3:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-type-3.4-polyester-web-sling-1200x800-1.webp\",\r\n\r\n    type4:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-type-4-polyester-web-sling-1200x800-1.webp\",\r\n\r\n    round:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-endless-round-sling-1200x800-1.webp\",\r\n\r\n    wire:\r\n      \"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/10\/vgd-wire-rope-sling-1200x800-1.webp\"\r\n\r\n  };\r\n\r\n\r\n  const WEB_LENGTHS =\r\n    [2, 4, 6, 8, 10, 12, 16, 20];\r\n\r\n\r\n  const ROUND_LENGTHS =\r\n    [2, 4, 6, 8, 10, 12, 16, 20];\r\n\r\n\r\n  const WIRE_LENGTHS =\r\n    [4, 6, 8, 10, 12];\r\n\r\n\r\n  \/* =========================================================\r\n     POLYESTER WEB SLINGS\r\n     ========================================================= *\/\r\n\r\n  const WEB_SLINGS = {\r\n\r\n    type3: {\r\n\r\n      name:\r\n        \"VGD Type 3 Flat Eye Polyester Web Sling\",\r\n\r\n      image:\r\n        IMAGES.type3,\r\n\r\n      alt:\r\n        \"VGD Type 3 flat eye polyester web sling\",\r\n\r\n      plies: {\r\n\r\n        single: {\r\n\r\n          label:\r\n            \"Single Ply\",\r\n\r\n          page:\r\n            5,\r\n\r\n          widths: [\r\n\r\n            {\r\n              width: '1\"',\r\n              vertical: 1600,\r\n              choker: 1280,\r\n              basket: 3200,\r\n              prefix: \"340311\"\r\n            },\r\n\r\n            {\r\n              width: '2\"',\r\n              vertical: 3100,\r\n              choker: 2325,\r\n              basket: 6200,\r\n              prefix: \"340312\"\r\n            },\r\n\r\n            {\r\n              width: '3\"',\r\n              vertical: 4700,\r\n              choker: 3525,\r\n              basket: 9400,\r\n              prefix: \"340313\"\r\n            },\r\n\r\n            {\r\n              width: '4\"',\r\n              vertical: 6200,\r\n              choker: 4650,\r\n              basket: 12400,\r\n              prefix: \"340314\"\r\n            }\r\n\r\n          ]\r\n\r\n        },\r\n\r\n\r\n        double: {\r\n\r\n          label:\r\n            \"Double Ply\",\r\n\r\n          page:\r\n            4,\r\n\r\n          widths: [\r\n\r\n            {\r\n              width: '1\"',\r\n              vertical: 3100,\r\n              choker: 2480,\r\n              basket: 6200,\r\n              prefix: \"340301\"\r\n            },\r\n\r\n            {\r\n              width: '2\"',\r\n              vertical: 6200,\r\n              choker: 4960,\r\n              basket: 12400,\r\n              prefix: \"340302\"\r\n            },\r\n\r\n            {\r\n              width: '3\"',\r\n              vertical: 8800,\r\n              choker: 7040,\r\n              basket: 17600,\r\n              prefix: \"340303\"\r\n            },\r\n\r\n            {\r\n              width: '4\"',\r\n              vertical: 11000,\r\n              choker: 8800,\r\n              basket: 22000,\r\n              prefix: \"340304\"\r\n            },\r\n\r\n            {\r\n              width: '6\"',\r\n              vertical: 16500,\r\n              choker: 13200,\r\n              basket: 33000,\r\n              prefix: \"340306\"\r\n            }\r\n\r\n          ]\r\n\r\n        }\r\n\r\n      }\r\n\r\n    },\r\n\r\n\r\n    type4: {\r\n\r\n      name:\r\n        \"VGD Type 4 Twisted Eye Polyester Web Sling\",\r\n\r\n      image:\r\n        IMAGES.type4,\r\n\r\n      alt:\r\n        \"VGD Type 4 twisted eye polyester web sling\",\r\n\r\n      plies: {\r\n\r\n        double: {\r\n\r\n          label:\r\n            \"Double Ply\",\r\n\r\n          page:\r\n            4,\r\n\r\n          widths: [\r\n\r\n            {\r\n              width: '1\"',\r\n              vertical: 3100,\r\n              choker: 2480,\r\n              basket: 6200,\r\n              prefix: \"340401\"\r\n            },\r\n\r\n            {\r\n              width: '2\"',\r\n              vertical: 6200,\r\n              choker: 4960,\r\n              basket: 12400,\r\n              prefix: \"340402\"\r\n            },\r\n\r\n            {\r\n              width: '3\"',\r\n              vertical: 8800,\r\n              choker: 7040,\r\n              basket: 17600,\r\n              prefix: \"340403\"\r\n            },\r\n\r\n            {\r\n              width: '4\"',\r\n              vertical: 11000,\r\n              choker: 8800,\r\n              basket: 22000,\r\n              prefix: \"340404\"\r\n            },\r\n\r\n            {\r\n              width: '6\"',\r\n              vertical: 16500,\r\n              choker: 13200,\r\n              basket: 33000,\r\n              prefix: \"340406\"\r\n            }\r\n\r\n          ]\r\n\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n  };\r\n\r\n\r\n  \/* =========================================================\r\n     POLYESTER ENDLESS ROUND SLINGS\r\n     ========================================================= *\/\r\n\r\n  const ROUND_SLINGS = [\r\n\r\n    {\r\n      item: \"ENRS-1\",\r\n      colour: \"Purple\",\r\n      vertical: 2600,\r\n      choker: 2080,\r\n      basket: 5200,\r\n      prefix: \"340610\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-2\",\r\n      colour: \"Green\",\r\n      vertical: 5300,\r\n      choker: 4200,\r\n      basket: 10600,\r\n      prefix: \"340620\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-3\",\r\n      colour: \"Yellow\",\r\n      vertical: 8400,\r\n      choker: 6700,\r\n      basket: 16800,\r\n      prefix: \"340630\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-4\",\r\n      colour: \"Tan\",\r\n      vertical: 10600,\r\n      choker: 8480,\r\n      basket: 21200,\r\n      prefix: \"340640\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-5\",\r\n      colour: \"Red\",\r\n      vertical: 13200,\r\n      choker: 10560,\r\n      basket: 26400,\r\n      prefix: \"340650\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-6\",\r\n      colour: \"White\",\r\n      vertical: 17000,\r\n      choker: 13400,\r\n      basket: 33600,\r\n      prefix: \"340660\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-7\",\r\n      colour: \"Blue\",\r\n      vertical: 21200,\r\n      choker: 17000,\r\n      basket: 42400,\r\n      prefix: \"340670\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-8\",\r\n      colour: \"Orange\",\r\n      vertical: 25000,\r\n      choker: 20000,\r\n      basket: 50000,\r\n      prefix: \"340680\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-9\",\r\n      colour: \"Gray\",\r\n      vertical: 31000,\r\n      choker: 24800,\r\n      basket: 62000,\r\n      prefix: \"340690\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-10\",\r\n      colour: \"Orange\",\r\n      vertical: 40000,\r\n      choker: 32000,\r\n      basket: 80000,\r\n      prefix: \"340601\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-11\",\r\n      colour: \"Brown\",\r\n      vertical: 53000,\r\n      choker: 42400,\r\n      basket: 106000,\r\n      prefix: \"340611\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-12\",\r\n      colour: \"Olive\",\r\n      vertical: 66000,\r\n      choker: 52800,\r\n      basket: 132000,\r\n      prefix: \"340612\"\r\n    },\r\n\r\n    {\r\n      item: \"ENRS-13\",\r\n      colour: \"Black\",\r\n      vertical: 90000,\r\n      choker: 72000,\r\n      basket: 180000,\r\n      prefix: \"340613\"\r\n    }\r\n\r\n  ];\r\n\r\n\r\n  \/* =========================================================\r\n     GOLDEN EYE WIRE ROPE SLINGS\r\n     Toronto catalogue ratings supplied by Vanguard\r\n     7\/8\" intentionally excluded\r\n     ========================================================= *\/\r\n\r\n  const WIRE_SLINGS = [\r\n\r\n    {\r\n      diameter: '1\/4\"',\r\n      diameterCode: \"16\",\r\n      vertical: 1300,\r\n      choker: 960,\r\n      basket: 2600\r\n    },\r\n\r\n    {\r\n      diameter: '3\/8\"',\r\n      diameterCode: \"24\",\r\n      vertical: 2800,\r\n      choker: 2200,\r\n      basket: 5800\r\n    },\r\n\r\n    {\r\n      diameter: '1\/2\"',\r\n      diameterCode: \"32\",\r\n      vertical: 5000,\r\n      choker: 3800,\r\n      basket: 10200\r\n    },\r\n\r\n    {\r\n      diameter: '5\/8\"',\r\n      diameterCode: \"40\",\r\n      vertical: 7800,\r\n      choker: 5800,\r\n      basket: 15600\r\n    },\r\n\r\n    {\r\n      diameter: '3\/4\"',\r\n      diameterCode: \"48\",\r\n      vertical: 11200,\r\n      choker: 8200,\r\n      basket: 22000\r\n    },\r\n\r\n    {\r\n      diameter: '1\"',\r\n      diameterCode: \"64\",\r\n      vertical: 19600,\r\n      choker: 14400,\r\n      basket: 40000\r\n    }\r\n\r\n  ];\r\n\r\n\r\n  let currentSlingStyle = \"\";\r\n  let currentSlingPly = \"\";\r\n  let currentSlingPart = \"\";\r\n  let currentSlingDescription = \"\";\r\n  let slingResultActive = false;\r\n\r\n\r\n  \/* =========================================================\r\n     FAMILY CARD IMAGE\r\n     ========================================================= *\/\r\n\r\n  function updateFamilyImage() {\r\n\r\n    const card =\r\n      document.querySelector(\r\n        '.vgd-family-card[data-tool=\"slings\"]'\r\n      );\r\n\r\n    if (!card) {\r\n      return;\r\n    }\r\n\r\n    const image =\r\n      card.querySelector(\".vgd-family-image\");\r\n\r\n    if (!image) {\r\n      return;\r\n    }\r\n\r\n    image.src = FAMILY_IMAGE;\r\n    image.alt = \"VGD lifting slings\";\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INTERCEPT SLING FAMILY\r\n     ========================================================= *\/\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const trigger =\r\n        event.target.closest(\"[data-tool]\");\r\n\r\n      if (!trigger) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (trigger.dataset.tool === \"slings\") {\r\n\r\n        slingResultActive = false;\r\n\r\n        restoreSlingFinder();\r\n        clearSlingResultLayout();\r\n        hideSlingExtras();\r\n        hideShackleExtras();\r\n\r\n        \/*\r\n          Let the original distributor-tool code run first,\r\n          then replace its prototype sling module.\r\n        *\/\r\n\r\n        setTimeout(function () {\r\n          renderSlingFinder();\r\n        }, 0);\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        slingResultActive = false;\r\n\r\n        hideSlingExtras();\r\n        restoreSlingFinder();\r\n        clearSlingResultLayout();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     MAIN SLING FINDER\r\n     ========================================================= *\/\r\n\r\n  function renderSlingFinder() {\r\n\r\n    const workspace =\r\n      document.getElementById(\r\n        \"vgd-active-workspace\"\r\n      );\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (!workspace || !panel) {\r\n      return;\r\n    }\r\n\r\n\r\n    if (result) {\r\n      result.classList.remove(\"is-active\");\r\n    }\r\n\r\n\r\n    currentSlingStyle = \"\";\r\n    currentSlingPly = \"\";\r\n    slingResultActive = false;\r\n\r\n\r\n    panel.classList.remove(\r\n      \"vgd-sling-finder-collapsed\"\r\n    );\r\n\r\n\r\n    panel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Lifting Slings\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          VGD Sling Finder\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          Select the sling style, then enter the customer requirements\r\n          to identify the correct VGD product.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          1. Sling Style\r\n        <\/span>\r\n\r\n\r\n        <div\r\n          class=\"vgd-sling-options\"\r\n          id=\"vgd-sling-options\"\r\n        >\r\n\r\n          ${buildSlingCard(\r\n            \"type3\",\r\n            \"Type 3<br>Flat Eye\",\r\n            IMAGES.type3,\r\n            \"VGD Type 3 flat eye polyester web sling\"\r\n          )}\r\n\r\n          ${buildSlingCard(\r\n            \"type4\",\r\n            \"Type 4<br>Twisted Eye\",\r\n            IMAGES.type4,\r\n            \"VGD Type 4 twisted eye polyester web sling\"\r\n          )}\r\n\r\n          ${buildSlingCard(\r\n            \"round\",\r\n            \"Endless<br>Round Sling\",\r\n            IMAGES.round,\r\n            \"VGD endless polyester round sling\"\r\n          )}\r\n\r\n          ${buildSlingCard(\r\n            \"wire\",\r\n            \"Wire Rope<br>Sling\",\r\n            IMAGES.wire,\r\n            \"VGD wire rope lifting sling\"\r\n          )}\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          id=\"vgd-change-sling-style\"\r\n        >\r\n          Change Sling Style\r\n        <\/button>\r\n\r\n\r\n        <div\r\n          id=\"vgd-sling-configuration\"\r\n        ><\/div>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    workspace.classList.add(\"is-active\");\r\n\r\n\r\n    panel\r\n      .querySelectorAll(\r\n        'input[name=\"vgd-sling-style\"]'\r\n      )\r\n      .forEach(function (input) {\r\n\r\n        input.addEventListener(\r\n          \"change\",\r\n          function () {\r\n\r\n            chooseSlingStyle(\r\n              input.value\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n      });\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-change-sling-style\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        resetSlingStyle\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STYLE CARDS\r\n     ========================================================= *\/\r\n\r\n  function buildSlingCard(\r\n    key,\r\n    title,\r\n    image,\r\n    alt\r\n  ) {\r\n\r\n    return `\r\n\r\n      <div class=\"vgd-sling-option\">\r\n\r\n        <input\r\n          type=\"radio\"\r\n          name=\"vgd-sling-style\"\r\n          id=\"vgd-sling-${key}\"\r\n          value=\"${key}\"\r\n        >\r\n\r\n        <label for=\"vgd-sling-${key}\">\r\n\r\n          <img decoding=\"async\"\r\n            class=\"vgd-sling-style-image\"\r\n            src=\"${image}\"\r\n            alt=\"${alt}\"\r\n          >\r\n\r\n          <span class=\"vgd-sling-style-title\">\r\n            ${title}\r\n          <\/span>\r\n\r\n        <\/label>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     STYLE SELECTED\r\n     ========================================================= *\/\r\n\r\n  function chooseSlingStyle(styleKey) {\r\n\r\n    currentSlingStyle = styleKey;\r\n    currentSlingPly = \"\";\r\n\r\n\r\n    const grid =\r\n      document.getElementById(\r\n        \"vgd-sling-options\"\r\n      );\r\n\r\n    const selected =\r\n      document.getElementById(\r\n        \"vgd-sling-\" + styleKey\r\n      );\r\n\r\n\r\n    if (!grid || !selected) {\r\n      return;\r\n    }\r\n\r\n\r\n    grid\r\n      .querySelectorAll(\r\n        \".vgd-sling-option\"\r\n      )\r\n      .forEach(function (card) {\r\n\r\n        card.classList.remove(\r\n          \"is-selected\"\r\n        );\r\n\r\n      });\r\n\r\n\r\n    const selectedCard =\r\n      selected.closest(\r\n        \".vgd-sling-option\"\r\n      );\r\n\r\n\r\n    selectedCard.classList.add(\r\n      \"is-selected\"\r\n    );\r\n\r\n\r\n    grid.classList.add(\r\n      \"vgd-sling-selected\"\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-change-sling-style\"\r\n      )\r\n      .classList.add(\r\n        \"is-active\"\r\n      );\r\n\r\n\r\n    if (styleKey === \"type3\") {\r\n\r\n      renderType3();\r\n\r\n    }\r\n\r\n    else if (styleKey === \"type4\") {\r\n\r\n      renderType4();\r\n\r\n    }\r\n\r\n    else if (styleKey === \"round\") {\r\n\r\n      renderRound();\r\n\r\n    }\r\n\r\n    else if (styleKey === \"wire\") {\r\n\r\n      renderWire();\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHANGE SLING STYLE\r\n     ========================================================= *\/\r\n\r\n  function resetSlingStyle() {\r\n\r\n    const grid =\r\n      document.getElementById(\r\n        \"vgd-sling-options\"\r\n      );\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n    const change =\r\n      document.getElementById(\r\n        \"vgd-change-sling-style\"\r\n      );\r\n\r\n\r\n    currentSlingStyle = \"\";\r\n    currentSlingPly = \"\";\r\n\r\n\r\n    if (grid) {\r\n\r\n      grid.classList.remove(\r\n        \"vgd-sling-selected\"\r\n      );\r\n\r\n\r\n      grid\r\n        .querySelectorAll(\r\n          \".vgd-sling-option\"\r\n        )\r\n        .forEach(function (card) {\r\n\r\n          card.classList.remove(\r\n            \"is-selected\"\r\n          );\r\n\r\n        });\r\n\r\n\r\n      grid\r\n        .querySelectorAll(\r\n          'input[name=\"vgd-sling-style\"]'\r\n        )\r\n        .forEach(function (radio) {\r\n\r\n          radio.checked = false;\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    if (config) {\r\n\r\n      config.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      config.innerHTML = \"\";\r\n\r\n    }\r\n\r\n\r\n    if (change) {\r\n\r\n      change.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TYPE 3\r\n     ========================================================= *\/\r\n\r\n  function renderType3() {\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          2. Ply\r\n        <\/span>\r\n\r\n        <div class=\"vgd-sling-ply-options\">\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-sling-ply-button\"\r\n            data-sling-ply=\"single\"\r\n          >\r\n            Single Ply\r\n          <\/button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-sling-ply-button\"\r\n            data-sling-ply=\"double\"\r\n          >\r\n            Double Ply\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div id=\"vgd-web-sling-fields\"><\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    config\r\n      .querySelectorAll(\r\n        \"[data-sling-ply]\"\r\n      )\r\n      .forEach(function (button) {\r\n\r\n        button.addEventListener(\r\n          \"click\",\r\n          function () {\r\n\r\n            selectPly(\r\n              \"type3\",\r\n              button.dataset.slingPly,\r\n              button\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n      });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TYPE 4\r\n     ========================================================= *\/\r\n\r\n  function renderType4() {\r\n\r\n    currentSlingPly = \"double\";\r\n\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <span class=\"vgd-field-label\">\r\n          2. Ply\r\n        <\/span>\r\n\r\n        <div class=\"vgd-sling-ply-options\">\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-sling-ply-button is-selected\"\r\n            disabled\r\n          >\r\n            Double Ply\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div id=\"vgd-web-sling-fields\"><\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    renderWebFields(\r\n      \"type4\",\r\n      \"double\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PLY SELECTION\r\n     ========================================================= *\/\r\n\r\n  function selectPly(\r\n    style,\r\n    ply,\r\n    button\r\n  ) {\r\n\r\n    currentSlingPly = ply;\r\n\r\n\r\n    document\r\n      .querySelectorAll(\r\n        \".vgd-sling-ply-button\"\r\n      )\r\n      .forEach(function (item) {\r\n\r\n        item.classList.remove(\r\n          \"is-selected\"\r\n        );\r\n\r\n      });\r\n\r\n\r\n    button.classList.add(\r\n      \"is-selected\"\r\n    );\r\n\r\n\r\n    renderWebFields(\r\n      style,\r\n      ply\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TYPE 3 \/ TYPE 4 FIELDS\r\n     ========================================================= *\/\r\n\r\n  function renderWebFields(\r\n    styleKey,\r\n    plyKey\r\n  ) {\r\n\r\n    const fields =\r\n      document.getElementById(\r\n        \"vgd-web-sling-fields\"\r\n      );\r\n\r\n    const data =\r\n      WEB_SLINGS[\r\n        styleKey\r\n      ].plies[\r\n        plyKey\r\n      ];\r\n\r\n\r\n    if (!fields || !data) {\r\n      return;\r\n    }\r\n\r\n\r\n    const widths =\r\n      data.widths\r\n        .map(function (\r\n          item,\r\n          index\r\n        ) {\r\n\r\n          return `\r\n\r\n            <option value=\"${index}\">\r\n              ${item.width} | Vertical WLL ${formatNumber(item.vertical)} lb\r\n            <\/option>\r\n\r\n          `;\r\n\r\n        })\r\n        .join(\"\");\r\n\r\n\r\n    fields.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-web-sling-width\"\r\n        >\r\n          3. Width \/ Vertical Working Load Limit\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-web-sling-width\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Width \/ Vertical WLL\r\n          <\/option>\r\n\r\n          ${widths}\r\n\r\n        <\/select>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-web-sling-length\"\r\n        >\r\n          4. Finished Length\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-web-sling-length\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Length\r\n          <\/option>\r\n\r\n          ${buildLengthOptions(WEB_LENGTHS)}\r\n\r\n        <\/select>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-find-button\"\r\n          id=\"vgd-find-web-sling\"\r\n        >\r\n          Find Product\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-web-sling\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findWebSling\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND TYPE 3 \/ TYPE 4\r\n     ========================================================= *\/\r\n\r\n  function findWebSling() {\r\n\r\n    const widthSelect =\r\n      document.getElementById(\r\n        \"vgd-web-sling-width\"\r\n      );\r\n\r\n    const lengthSelect =\r\n      document.getElementById(\r\n        \"vgd-web-sling-length\"\r\n      );\r\n\r\n\r\n    if (\r\n      !widthSelect ||\r\n      !lengthSelect ||\r\n      widthSelect.value === \"\" ||\r\n      lengthSelect.value === \"\"\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select the sling width and finished length.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const style =\r\n      WEB_SLINGS[\r\n        currentSlingStyle\r\n      ];\r\n\r\n    const ply =\r\n      style.plies[\r\n        currentSlingPly\r\n      ];\r\n\r\n    const sling =\r\n      ply.widths[\r\n        Number(widthSelect.value)\r\n      ];\r\n\r\n    const length =\r\n      Number(lengthSelect.value);\r\n\r\n\r\n    const code =\r\n      sling.prefix +\r\n      twoDigit(length);\r\n\r\n\r\n    const description =\r\n      style.name +\r\n      \", \" +\r\n      ply.label +\r\n      \", \" +\r\n      sling.width +\r\n      \" x \" +\r\n      length +\r\n      \" ft\" +\r\n      \", Vertical WLL \" +\r\n      formatNumber(\r\n        sling.vertical\r\n      ) +\r\n      \" lb\" +\r\n      \", VGD \" +\r\n      code;\r\n\r\n\r\n    showSlingResult({\r\n\r\n      heading:\r\n        style.name,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        description,\r\n\r\n      image:\r\n        style.image,\r\n\r\n      alt:\r\n        style.alt,\r\n\r\n      page:\r\n        ply.page,\r\n\r\n      specsLabel:\r\n        currentSlingStyle === \"type3\"\r\n          ? \"Type 3 \" + ply.label\r\n          : \"Type 4 \" + ply.label,\r\n\r\n      details: [\r\n\r\n        [\r\n          \"Ply\",\r\n          ply.label\r\n        ],\r\n\r\n        [\r\n          \"Width\",\r\n          sling.width\r\n        ],\r\n\r\n        [\r\n          \"Length\",\r\n          length + \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Vertical WLL\",\r\n          formatNumber(\r\n            sling.vertical\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Choker WLL\",\r\n          formatNumber(\r\n            sling.choker\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Basket WLL\",\r\n          formatNumber(\r\n            sling.basket\r\n          ) + \" lb\"\r\n        ]\r\n\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     ROUND SLING\r\n     ========================================================= *\/\r\n\r\n  function renderRound() {\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    const capacities =\r\n      ROUND_SLINGS\r\n        .map(function (\r\n          sling,\r\n          index\r\n        ) {\r\n\r\n          return `\r\n\r\n            <option value=\"${index}\">\r\n              ${sling.colour} | Vertical WLL ${formatNumber(sling.vertical)} lb\r\n            <\/option>\r\n\r\n          `;\r\n\r\n        })\r\n        .join(\"\");\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-round-capacity\"\r\n        >\r\n          2. Colour \/ Vertical Working Load Limit\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-round-capacity\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Colour \/ Vertical WLL\r\n          <\/option>\r\n\r\n          ${capacities}\r\n\r\n        <\/select>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-round-length\"\r\n        >\r\n          3. Finished Length\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-round-length\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Length\r\n          <\/option>\r\n\r\n          ${buildLengthOptions(ROUND_LENGTHS)}\r\n\r\n        <\/select>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-find-button\"\r\n          id=\"vgd-find-round-sling\"\r\n        >\r\n          Find Product\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-round-sling\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findRoundSling\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND ROUND SLING\r\n     ========================================================= *\/\r\n\r\n  function findRoundSling() {\r\n\r\n    const capacity =\r\n      document.getElementById(\r\n        \"vgd-round-capacity\"\r\n      );\r\n\r\n    const lengthSelect =\r\n      document.getElementById(\r\n        \"vgd-round-length\"\r\n      );\r\n\r\n\r\n    if (\r\n      !capacity ||\r\n      !lengthSelect ||\r\n      capacity.value === \"\" ||\r\n      lengthSelect.value === \"\"\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select the round sling capacity and finished length.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const sling =\r\n      ROUND_SLINGS[\r\n        Number(capacity.value)\r\n      ];\r\n\r\n    const length =\r\n      Number(lengthSelect.value);\r\n\r\n\r\n    const code =\r\n      sling.prefix +\r\n      twoDigit(length);\r\n\r\n\r\n    const productName =\r\n      \"VGD Polyester Endless Round Sling\";\r\n\r\n\r\n    showSlingResult({\r\n\r\n      heading:\r\n        productName,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        productName +\r\n        \", \" +\r\n        sling.item +\r\n        \", \" +\r\n        sling.colour +\r\n        \", \" +\r\n        length +\r\n        \" ft\" +\r\n        \", Vertical WLL \" +\r\n        formatNumber(\r\n          sling.vertical\r\n        ) +\r\n        \" lb\" +\r\n        \", VGD \" +\r\n        code,\r\n\r\n      image:\r\n        IMAGES.round,\r\n\r\n      alt:\r\n        \"VGD endless polyester round sling\",\r\n\r\n      page:\r\n        6,\r\n\r\n      specsLabel:\r\n        \"Round Sling\",\r\n\r\n      details: [\r\n\r\n        [\r\n          \"Size\",\r\n          sling.item +\r\n          \" | \" +\r\n          sling.colour +\r\n          \" | \" +\r\n          length +\r\n          \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Colour\",\r\n          sling.colour\r\n        ],\r\n\r\n        [\r\n          \"Length\",\r\n          length + \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Vertical WLL\",\r\n          formatNumber(\r\n            sling.vertical\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Choker WLL\",\r\n          formatNumber(\r\n            sling.choker\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Basket WLL\",\r\n          formatNumber(\r\n            sling.basket\r\n          ) + \" lb\"\r\n        ]\r\n\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     WIRE ROPE SLING\r\n     ========================================================= *\/\r\n\r\n  function renderWire() {\r\n\r\n    const config =\r\n      document.getElementById(\r\n        \"vgd-sling-configuration\"\r\n      );\r\n\r\n\r\n    const sizes =\r\n      WIRE_SLINGS\r\n        .map(function (\r\n          sling,\r\n          index\r\n        ) {\r\n\r\n          return `\r\n\r\n            <option value=\"${index}\">\r\n              ${sling.diameter} | Vertical WLL ${formatNumber(sling.vertical)} lb\r\n            <\/option>\r\n\r\n          `;\r\n\r\n        })\r\n        .join(\"\");\r\n\r\n\r\n    config.innerHTML = `\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-wire-size\"\r\n        >\r\n          2. Diameter \/ Vertical Working Load Limit\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-wire-size\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Diameter \/ Vertical WLL\r\n          <\/option>\r\n\r\n          ${sizes}\r\n\r\n        <\/select>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-sling-config-section\">\r\n\r\n        <label\r\n          class=\"vgd-field-label\"\r\n          for=\"vgd-wire-length\"\r\n        >\r\n          3. Finished Length\r\n        <\/label>\r\n\r\n        <select\r\n          class=\"vgd-field-select\"\r\n          id=\"vgd-wire-length\"\r\n        >\r\n\r\n          <option value=\"\">\r\n            Select Length\r\n          <\/option>\r\n\r\n          ${buildLengthOptions(WIRE_LENGTHS)}\r\n\r\n        <\/select>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-find-button\"\r\n          id=\"vgd-find-wire-sling\"\r\n        >\r\n          Find Product\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    config.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-wire-sling\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findWireSling\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND WIRE ROPE SLING\r\n     ========================================================= *\/\r\n\r\n  function findWireSling() {\r\n\r\n    const sizeSelect =\r\n      document.getElementById(\r\n        \"vgd-wire-size\"\r\n      );\r\n\r\n    const lengthSelect =\r\n      document.getElementById(\r\n        \"vgd-wire-length\"\r\n      );\r\n\r\n\r\n    if (\r\n      !sizeSelect ||\r\n      !lengthSelect ||\r\n      sizeSelect.value === \"\" ||\r\n      lengthSelect.value === \"\"\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select the wire rope diameter and finished length.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const sling =\r\n      WIRE_SLINGS[\r\n        Number(sizeSelect.value)\r\n      ];\r\n\r\n    const length =\r\n      Number(lengthSelect.value);\r\n\r\n\r\n    const code =\r\n      \"3202\" +\r\n      sling.diameterCode +\r\n      twoDigit(length);\r\n\r\n\r\n    const productName =\r\n      \"VGD Golden Eye Wire Rope Sling\";\r\n\r\n\r\n    showSlingResult({\r\n\r\n      heading:\r\n        productName,\r\n\r\n      partNumber:\r\n        code,\r\n\r\n      description:\r\n        productName +\r\n        \", \" +\r\n        sling.diameter +\r\n        \" x \" +\r\n        length +\r\n        \" ft\" +\r\n        \", 6x26 IWRC EIPS Bright Wire Rope\" +\r\n        \", Standard Eye \/ Eye\" +\r\n        \", Vertical WLL \" +\r\n        formatNumber(\r\n          sling.vertical\r\n        ) +\r\n        \" lb\" +\r\n        \", VGD \" +\r\n        code,\r\n\r\n      image:\r\n        IMAGES.wire,\r\n\r\n      alt:\r\n        \"VGD Golden Eye wire rope lifting sling\",\r\n\r\n      page:\r\n        9,\r\n\r\n      specsLabel:\r\n        \"Wire Rope Sling\",\r\n\r\n      details: [\r\n\r\n        [\r\n          \"Size\",\r\n          sling.diameter +\r\n          \" x \" +\r\n          length +\r\n          \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Diameter\",\r\n          sling.diameter\r\n        ],\r\n\r\n        [\r\n          \"Construction\",\r\n          \"6x26 IWRC EIPS\"\r\n        ],\r\n\r\n        [\r\n          \"Length\",\r\n          length + \" ft\"\r\n        ],\r\n\r\n        [\r\n          \"Vertical WLL\",\r\n          formatNumber(\r\n            sling.vertical\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Choker WLL\",\r\n          formatNumber(\r\n            sling.choker\r\n          ) + \" lb\"\r\n        ],\r\n\r\n        [\r\n          \"Basket WLL\",\r\n          formatNumber(\r\n            sling.basket\r\n          ) + \" lb\"\r\n        ]\r\n\r\n      ]\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT RESULT\r\n     ========================================================= *\/\r\n\r\n  function showSlingResult(data) {\r\n\r\n    const productResult =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n    const heading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n    const details =\r\n      document.getElementById(\r\n        \"vgd-result-details\"\r\n      );\r\n\r\n    const part =\r\n      document.getElementById(\r\n        \"vgd-part-number\"\r\n      );\r\n\r\n    const image =\r\n      document.querySelector(\r\n        \"#vgd-product-result .vgd-result-image\"\r\n      );\r\n\r\n\r\n    if (\r\n      !productResult ||\r\n      !heading ||\r\n      !details ||\r\n      !part\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    currentSlingPart =\r\n      data.partNumber;\r\n\r\n    currentSlingDescription =\r\n      data.description;\r\n\r\n    slingResultActive = true;\r\n\r\n\r\n    heading.textContent =\r\n      data.heading;\r\n\r\n\r\n    part.textContent =\r\n      data.partNumber;\r\n\r\n\r\n    details.innerHTML =\r\n      data.details\r\n        .map(function (item) {\r\n\r\n          return `\r\n\r\n            <div class=\"vgd-result-label\">\r\n              ${item[0]}\r\n            <\/div>\r\n\r\n            <div>\r\n              ${item[1]}\r\n            <\/div>\r\n\r\n          `;\r\n\r\n        })\r\n        .join(\"\");\r\n\r\n\r\n    if (image) {\r\n\r\n      image.innerHTML = `\r\n\r\n        <img decoding=\"async\"\r\n          src=\"${data.image}\"\r\n          alt=\"${data.alt}\"\r\n        >\r\n\r\n      `;\r\n\r\n    }\r\n\r\n\r\n    updateSpecsButton(\r\n      data.page,\r\n      data.specsLabel\r\n    );\r\n\r\n\r\n    showResultNavigation();\r\n\r\n    positionSlingExtras();\r\n\r\n\r\n    productResult.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n    productResult.classList.add(\r\n      \"vgd-sling-result-layout\"\r\n    );\r\n\r\n\r\n    resetListQuantity();\r\n\r\n\r\n    setTimeout(\r\n      collapseSlingFinder,\r\n      100\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TECHNICAL SPECS BUTTON\r\n     ========================================================= *\/\r\n\r\n  function ensureSpecsButton() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \"#vgd-product-result .vgd-result-actions\"\r\n      );\r\n\r\n\r\n    if (!actions) {\r\n      return null;\r\n    }\r\n\r\n\r\n    let link =\r\n      document.getElementById(\r\n        \"vgd-sling-specs-link\"\r\n      );\r\n\r\n\r\n    if (!link) {\r\n\r\n      link =\r\n        document.createElement(\"a\");\r\n\r\n      link.id =\r\n        \"vgd-sling-specs-link\";\r\n\r\n      link.target =\r\n        \"_blank\";\r\n\r\n      link.rel =\r\n        \"noopener\";\r\n\r\n      actions.appendChild(link);\r\n\r\n    }\r\n\r\n\r\n    return link;\r\n\r\n  }\r\n\r\n\r\n  function updateSpecsButton(\r\n    page,\r\n    label\r\n  ) {\r\n\r\n    const link =\r\n      ensureSpecsButton();\r\n\r\n\r\n    if (!link) {\r\n      return;\r\n    }\r\n\r\n\r\n    link.href =\r\n      SLING_CATALOG +\r\n      \"#page=\" +\r\n      page;\r\n\r\n\r\n    link.textContent =\r\n      \"Sling Capacity & Specs \u00b7 \" +\r\n      label;\r\n\r\n\r\n    link.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESULT NAVIGATION\r\n     ========================================================= *\/\r\n\r\n  function ensureResultNav() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \"#vgd-product-result .vgd-result-actions\"\r\n      );\r\n\r\n\r\n    if (!actions) {\r\n      return null;\r\n    }\r\n\r\n\r\n    let nav =\r\n      document.getElementById(\r\n        \"vgd-sling-result-nav\"\r\n      );\r\n\r\n\r\n    if (!nav) {\r\n\r\n      nav =\r\n        document.createElement(\"div\");\r\n\r\n      nav.id =\r\n        \"vgd-sling-result-nav\";\r\n\r\n\r\n      nav.innerHTML = `\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-sling-nav-button\"\r\n          id=\"vgd-another-sling\"\r\n        >\r\n          Choose Another Sling\r\n        <\/button>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-sling-nav-button\"\r\n          id=\"vgd-sling-product-families\"\r\n        >\r\n          Product Families\r\n        <\/button>\r\n\r\n      `;\r\n\r\n\r\n      actions.appendChild(nav);\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-another-sling\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          chooseAnotherSling\r\n        );\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"vgd-sling-product-families\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          goToProductFamilies\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return nav;\r\n\r\n  }\r\n\r\n\r\n  function showResultNavigation() {\r\n\r\n    const nav =\r\n      ensureResultNav();\r\n\r\n\r\n    if (nav) {\r\n\r\n      nav.classList.add(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    const oldBack =\r\n      document.querySelector(\r\n        \".vgd-back-row\"\r\n      );\r\n\r\n\r\n    if (oldBack) {\r\n\r\n      oldBack.style.display =\r\n        \"none\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PUT SPECS + NAV BEFORE QUANTITY \/ ADD TO LIST\r\n     ========================================================= *\/\r\n\r\n  function positionSlingExtras() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \"#vgd-product-result .vgd-result-actions\"\r\n      );\r\n\r\n    const listControls =\r\n      document.getElementById(\r\n        \"vgd-list-result-controls\"\r\n      );\r\n\r\n    const specs =\r\n      document.getElementById(\r\n        \"vgd-sling-specs-link\"\r\n      );\r\n\r\n    const nav =\r\n      document.getElementById(\r\n        \"vgd-sling-result-nav\"\r\n      );\r\n\r\n\r\n    if (!actions) {\r\n      return;\r\n    }\r\n\r\n\r\n    if (listControls) {\r\n\r\n      if (specs) {\r\n\r\n        actions.insertBefore(\r\n          specs,\r\n          listControls\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if (nav) {\r\n\r\n        actions.insertBefore(\r\n          nav,\r\n          listControls\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHOOSE ANOTHER SLING\r\n     ========================================================= *\/\r\n\r\n  function chooseAnotherSling() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    slingResultActive = false;\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      result.classList.remove(\r\n        \"vgd-sling-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    restoreSlingFinder();\r\n    hideSlingExtras();\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      renderSlingFinder();\r\n\r\n\r\n      setTimeout(function () {\r\n\r\n        const panel =\r\n          document.getElementById(\r\n            \"vgd-workspace-panel\"\r\n          );\r\n\r\n\r\n        if (panel) {\r\n\r\n          panel.scrollIntoView({\r\n            behavior: \"smooth\",\r\n            block: \"start\"\r\n          });\r\n\r\n        }\r\n\r\n      }, 30);\r\n\r\n    }, 10);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT FAMILIES\r\n     ========================================================= *\/\r\n\r\n  function goToProductFamilies() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    slingResultActive = false;\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      result.classList.remove(\r\n        \"vgd-sling-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    restoreSlingFinder();\r\n    hideSlingExtras();\r\n\r\n\r\n    const families =\r\n      document.getElementById(\r\n        \"vgd-product-families\"\r\n      );\r\n\r\n\r\n    if (families) {\r\n\r\n      families.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"start\"\r\n      });\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COLLAPSE \/ RESTORE\r\n     ========================================================= *\/\r\n\r\n  function collapseSlingFinder() {\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (panel) {\r\n\r\n      panel.classList.add(\r\n        \"vgd-sling-finder-collapsed\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (result) {\r\n\r\n      setTimeout(function () {\r\n\r\n        result.scrollIntoView({\r\n          behavior: \"smooth\",\r\n          block: \"start\"\r\n        });\r\n\r\n      }, 30);\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function restoreSlingFinder() {\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n\r\n    if (panel) {\r\n\r\n      panel.classList.remove(\r\n        \"vgd-sling-finder-collapsed\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function clearSlingResultLayout() {\r\n\r\n    const result =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (result) {\r\n\r\n      result.classList.remove(\r\n        \"vgd-sling-result-layout\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     HIDE SLING RESULT CONTROLS\r\n     ========================================================= *\/\r\n\r\n  function hideSlingExtras() {\r\n\r\n    const specs =\r\n      document.getElementById(\r\n        \"vgd-sling-specs-link\"\r\n      );\r\n\r\n    const nav =\r\n      document.getElementById(\r\n        \"vgd-sling-result-nav\"\r\n      );\r\n\r\n\r\n    if (specs) {\r\n\r\n      specs.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (nav) {\r\n\r\n      nav.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    const oldBack =\r\n      document.querySelector(\r\n        \".vgd-back-row\"\r\n      );\r\n\r\n\r\n    if (oldBack) {\r\n\r\n      oldBack.style.display = \"\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     HIDE SHACKLE CONTROLS WHEN SLINGS OPEN\r\n     ========================================================= *\/\r\n\r\n  function hideShackleExtras() {\r\n\r\n    const specs =\r\n      document.getElementById(\r\n        \"vgd-shackle-specs-link\"\r\n      );\r\n\r\n    const nav =\r\n      document.getElementById(\r\n        \"vgd-shackle-result-nav\"\r\n      );\r\n\r\n\r\n    if (specs) {\r\n\r\n      specs.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      specs.style.display =\r\n        \"none\";\r\n\r\n    }\r\n\r\n\r\n    if (nav) {\r\n\r\n      nav.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n      nav.style.display =\r\n        \"none\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY PART \/ DESCRIPTION\r\n     The original functions are inside the main block's closure,\r\n     so sling results intercept them here.\r\n     ========================================================= *\/\r\n\r\n  function attachCopyButtons() {\r\n\r\n    const copyPart =\r\n      document.getElementById(\r\n        \"vgd-copy-part\"\r\n      );\r\n\r\n    const copyDescription =\r\n      document.getElementById(\r\n        \"vgd-copy-description\"\r\n      );\r\n\r\n\r\n    if (copyPart) {\r\n\r\n      copyPart.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (!slingResultActive) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copyText(\r\n            currentSlingPart\r\n          );\r\n\r\n\r\n          flashButton(\r\n            copyPart,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (copyDescription) {\r\n\r\n      copyDescription.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (!slingResultActive) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copyText(\r\n            currentSlingDescription\r\n          );\r\n\r\n\r\n          flashButton(\r\n            copyDescription,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESET MY VGD LIST QUANTITY TO 1\r\n     ========================================================= *\/\r\n\r\n  function resetListQuantity() {\r\n\r\n    const value =\r\n      document.getElementById(\r\n        \"vgd-result-qty-value\"\r\n      );\r\n\r\n    const minus =\r\n      document.getElementById(\r\n        \"vgd-result-qty-minus\"\r\n      );\r\n\r\n\r\n    if (!value || !minus) {\r\n      return;\r\n    }\r\n\r\n\r\n    let safety = 100;\r\n\r\n\r\n    while (\r\n      Number(value.textContent) > 1 &&\r\n      safety > 0\r\n    ) {\r\n\r\n      minus.click();\r\n\r\n      safety--;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     EXTRA SEARCH TERMS\r\n     ========================================================= *\/\r\n\r\n  function attachSearchAliases() {\r\n\r\n    const input =\r\n      document.getElementById(\r\n        \"vgd-search-input\"\r\n      );\r\n\r\n    const results =\r\n      document.getElementById(\r\n        \"vgd-search-results\"\r\n      );\r\n\r\n\r\n    if (!input || !results) {\r\n      return;\r\n    }\r\n\r\n\r\n    const aliases = [\r\n\r\n      \"type 3\",\r\n      \"type 3 sling\",\r\n      \"flat eye\",\r\n      \"flat eye sling\",\r\n\r\n      \"type 4\",\r\n      \"type 4 sling\",\r\n      \"twisted eye\",\r\n      \"twisted eye sling\",\r\n\r\n      \"round sling\",\r\n      \"endless round sling\",\r\n      \"polyester round sling\",\r\n\r\n      \"wire rope sling\",\r\n      \"golden eye\",\r\n      \"eye and eye sling\",\r\n\r\n      \"polyester sling\",\r\n      \"web sling\",\r\n      \"lifting sling\"\r\n\r\n    ];\r\n\r\n\r\n    input.addEventListener(\r\n      \"input\",\r\n      function () {\r\n\r\n        setTimeout(\r\n          augmentSearch,\r\n          0\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function augmentSearch() {\r\n\r\n      const term =\r\n        input.value\r\n          .trim()\r\n          .toLowerCase();\r\n\r\n\r\n      if (term.length < 2) {\r\n        return;\r\n      }\r\n\r\n\r\n      const match =\r\n        aliases.some(\r\n          function (alias) {\r\n\r\n            return (\r\n              alias.includes(term) ||\r\n              term.includes(alias)\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      if (!match) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        results.querySelector(\r\n          '[data-tool=\"slings\"]'\r\n        )\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const empty =\r\n        results.querySelector(\r\n          \".vgd-search-empty\"\r\n        );\r\n\r\n\r\n      if (empty) {\r\n        empty.remove();\r\n      }\r\n\r\n\r\n      const button =\r\n        document.createElement(\r\n          \"button\"\r\n        );\r\n\r\n\r\n      button.type = \"button\";\r\n\r\n      button.className =\r\n        \"vgd-search-result\";\r\n\r\n      button.dataset.tool =\r\n        \"slings\";\r\n\r\n\r\n      button.innerHTML = `\r\n\r\n        <span>\r\n\r\n          <span class=\"vgd-search-result-name\">\r\n            VGD Lifting Slings\r\n          <\/span>\r\n\r\n          <span class=\"vgd-search-result-copy\">\r\n            Type 3, Type 4, round and wire rope slings\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n        <span class=\"vgd-search-result-arrow\">\r\n          \u203a\r\n        <\/span>\r\n\r\n      `;\r\n\r\n\r\n      results.appendChild(button);\r\n\r\n      results.classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     HELPERS\r\n     ========================================================= *\/\r\n\r\n  function buildLengthOptions(lengths) {\r\n\r\n    return lengths\r\n      .map(function (length) {\r\n\r\n        return `\r\n\r\n          <option value=\"${length}\">\r\n            ${length} ft\r\n          <\/option>\r\n\r\n        `;\r\n\r\n      })\r\n      .join(\"\");\r\n\r\n  }\r\n\r\n\r\n  function twoDigit(number) {\r\n\r\n    return String(number)\r\n      .padStart(\r\n        2,\r\n        \"0\"\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function formatNumber(number) {\r\n\r\n    return Number(number)\r\n      .toLocaleString(\r\n        \"en-CA\"\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function copyText(text) {\r\n\r\n    if (\r\n      navigator.clipboard &&\r\n      window.isSecureContext\r\n    ) {\r\n\r\n      navigator.clipboard.writeText(\r\n        text\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const temporary =\r\n      document.createElement(\r\n        \"textarea\"\r\n      );\r\n\r\n\r\n    temporary.value = text;\r\n\r\n    document.body.appendChild(\r\n      temporary\r\n    );\r\n\r\n    temporary.select();\r\n\r\n    document.execCommand(\r\n      \"copy\"\r\n    );\r\n\r\n    temporary.remove();\r\n\r\n  }\r\n\r\n\r\n  function flashButton(\r\n    button,\r\n    text\r\n  ) {\r\n\r\n    const original =\r\n      button.textContent;\r\n\r\n\r\n    button.textContent =\r\n      text;\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      button.textContent =\r\n        original;\r\n\r\n    }, 1200);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  function initializeSlingFinder() {\r\n\r\n    updateFamilyImage();\r\n\r\n    attachCopyButtons();\r\n\r\n    attachSearchAliases();\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initializeSlingFinder\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    initializeSlingFinder();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8127404 elementor-widget elementor-widget-html\" data-id=\"8127404\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD DISTRIBUTOR LIST\r\n     ADD-ON FOR EXISTING DISTRIBUTOR TOOL\r\n     ========================================================= *\/\r\n\r\n  .vgd-list-result-controls,\r\n  .vgd-list-result-controls * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-list-result-controls {\r\n    display: grid;\r\n    gap: 10px;\r\n    margin-top: 4px;\r\n  }\r\n\r\n  .vgd-list-qty-label {\r\n    color: rgba(255, 255, 255, 0.58);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-list-qty-control {\r\n    display: grid;\r\n    grid-template-columns: 46px 1fr 46px;\r\n    height: 48px;\r\n    overflow: hidden;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n  }\r\n\r\n  .vgd-list-qty-button {\r\n    border: 0;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .vgd-list-qty-button:hover {\r\n    background: #192229;\r\n  }\r\n\r\n  .vgd-list-qty-value {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-left: 1px solid #59636b;\r\n    border-right: 1px solid #59636b;\r\n    background: #121a20;\r\n    color: #ffffff;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-list-add-button {\r\n    min-height: 52px;\r\n    padding: 10px 16px;\r\n    border: 1px solid #f26a21;\r\n    border-radius: 5px;\r\n    background: #f26a21;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-list-add-button:hover {\r\n    background: #ff7a30;\r\n    border-color: #ff7a30;\r\n  }\r\n\r\n\r\n  \/* FLOATING BUTTON *\/\r\n\r\n  #vgd-list-floating-button {\r\n    position: fixed;\r\n    right: 24px;\r\n    bottom: 24px;\r\n    z-index: 9998;\r\n    min-height: 54px;\r\n    padding: 0 20px;\r\n    border: 1px solid #f26a21;\r\n    border-radius: 28px;\r\n    background: #f26a21;\r\n    color: #ffffff;\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  #vgd-list-floating-button:hover {\r\n    background: #ff7a30;\r\n  }\r\n\r\n\r\n  \/* OVERLAY *\/\r\n\r\n  #vgd-list-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 9998;\r\n    display: none;\r\n    background: rgba(0, 0, 0, 0.58);\r\n  }\r\n\r\n  #vgd-list-overlay.is-open {\r\n    display: block;\r\n  }\r\n\r\n\r\n  \/* DRAWER *\/\r\n\r\n  #vgd-list-drawer {\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    z-index: 9999;\r\n    width: min(440px, 92vw);\r\n    height: 100vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n    transform: translateX(105%);\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.35);\r\n    transition: transform 0.25s ease;\r\n  }\r\n\r\n  #vgd-list-drawer.is-open {\r\n    transform: translateX(0);\r\n  }\r\n\r\n  .vgd-list-drawer-header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 20px;\r\n    padding: 24px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .vgd-list-drawer-title {\r\n    margin: 0;\r\n    color: #ffffff;\r\n    font-size: 23px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-list-close {\r\n    width: 42px;\r\n    height: 42px;\r\n    border: 1px solid rgba(255, 255, 255, 0.18);\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-size: 22px;\r\n  }\r\n\r\n  .vgd-list-close:hover {\r\n    border-color: #f26a21;\r\n  }\r\n\r\n  .vgd-list-items {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 18px 24px;\r\n  }\r\n\r\n  .vgd-list-empty {\r\n    padding: 30px 10px;\r\n    color: rgba(255, 255, 255, 0.55);\r\n    text-align: center;\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n\r\n  \/* INDIVIDUAL LIST ITEM *\/\r\n\r\n  .vgd-list-item {\r\n    padding: 18px 0;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n  }\r\n\r\n  .vgd-list-item:last-child {\r\n    border-bottom: 0;\r\n  }\r\n\r\n  .vgd-list-item-top {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n  }\r\n\r\n  .vgd-list-item-name {\r\n    margin: 0 0 6px;\r\n    color: #ffffff;\r\n    font-size: 15px;\r\n    line-height: 1.4;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-list-item-spec {\r\n    margin: 0 0 5px;\r\n    color: rgba(255, 255, 255, 0.67);\r\n    font-size: 14px;\r\n  }\r\n\r\n  .vgd-list-item-part {\r\n    margin: 0;\r\n    color: #f26a21;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.4px;\r\n  }\r\n\r\n  .vgd-list-remove {\r\n    flex: 0 0 auto;\r\n    border: 0;\r\n    background: transparent;\r\n    color: rgba(255, 255, 255, 0.45);\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .vgd-list-remove:hover {\r\n    color: #ffffff;\r\n  }\r\n\r\n  .vgd-list-item-bottom {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    margin-top: 14px;\r\n  }\r\n\r\n  .vgd-list-small-qty {\r\n    display: grid;\r\n    grid-template-columns: 34px 44px 34px;\r\n    overflow: hidden;\r\n    border: 1px solid #48525a;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .vgd-list-small-qty button {\r\n    height: 34px;\r\n    border: 0;\r\n    background: #151e24;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-size: 17px;\r\n  }\r\n\r\n  .vgd-list-small-qty span {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-left: 1px solid #48525a;\r\n    border-right: 1px solid #48525a;\r\n    color: #ffffff;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-list-line-total {\r\n    color: rgba(255, 255, 255, 0.5);\r\n    font-size: 12px;\r\n  }\r\n\r\n\r\n  \/* DRAWER FOOTER *\/\r\n\r\n  .vgd-list-footer {\r\n    padding: 20px 24px 24px;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n    background: #10171c;\r\n  }\r\n\r\n  .vgd-list-total {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 15px;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    font-size: 14px;\r\n  }\r\n\r\n  .vgd-list-total strong {\r\n    color: #ffffff;\r\n    font-size: 18px;\r\n  }\r\n\r\n  .vgd-list-footer-buttons {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px;\r\n  }\r\n\r\n  .vgd-list-footer-button {\r\n    min-height: 50px;\r\n    padding: 10px 15px;\r\n    border: 1px solid #59636b;\r\n    border-radius: 5px;\r\n    background: transparent;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .vgd-list-footer-button.primary {\r\n    border-color: #f26a21;\r\n    background: #f26a21;\r\n  }\r\n\r\n  .vgd-list-footer-button:hover {\r\n    border-color: #f26a21;\r\n  }\r\n\r\n  .vgd-list-footer-button.primary:hover {\r\n    background: #ff7a30;\r\n  }\r\n\r\n\r\n  @media (max-width: 600px) {\r\n\r\n    #vgd-list-floating-button {\r\n      right: 14px;\r\n      bottom: 14px;\r\n      min-height: 50px;\r\n      padding: 0 17px;\r\n    }\r\n\r\n    #vgd-list-drawer {\r\n      width: 100%;\r\n    }\r\n\r\n    .vgd-list-footer-buttons {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  const STORAGE_KEY =\r\n    \"vgdDistributorListV1\";\r\n\r\n  let vgdList = [];\r\n\r\n  let resultQty = 1;\r\n\r\n\r\n  \/* =========================================================\r\n     STORAGE\r\n     ========================================================= *\/\r\n\r\n  function loadStoredList() {\r\n\r\n    try {\r\n\r\n      const stored =\r\n        localStorage.getItem(\r\n          STORAGE_KEY\r\n        );\r\n\r\n      if (stored) {\r\n\r\n        const parsed =\r\n          JSON.parse(stored);\r\n\r\n        if (Array.isArray(parsed)) {\r\n          vgdList = parsed;\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n    catch (error) {\r\n\r\n      vgdList = [];\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function saveList() {\r\n\r\n    try {\r\n\r\n      localStorage.setItem(\r\n        STORAGE_KEY,\r\n        JSON.stringify(vgdList)\r\n      );\r\n\r\n    }\r\n\r\n    catch (error) {\r\n\r\n      \/* Browser storage unavailable *\/\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CREATE RESULT CONTROLS\r\n     ========================================================= *\/\r\n\r\n  function createResultControls() {\r\n\r\n    const actions =\r\n      document.querySelector(\r\n        \".vgd-result-actions\"\r\n      );\r\n\r\n    if (!actions) {\r\n      return;\r\n    }\r\n\r\n\r\n    if (\r\n      document.getElementById(\r\n        \"vgd-list-result-controls\"\r\n      )\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const controls =\r\n      document.createElement(\r\n        \"div\"\r\n      );\r\n\r\n    controls.id =\r\n      \"vgd-list-result-controls\";\r\n\r\n    controls.className =\r\n      \"vgd-list-result-controls\";\r\n\r\n\r\n    controls.innerHTML = `\r\n\r\n      <div class=\"vgd-list-qty-label\">\r\n        Quantity\r\n      <\/div>\r\n\r\n      <div class=\"vgd-list-qty-control\">\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-list-qty-button\"\r\n          id=\"vgd-result-qty-minus\"\r\n          aria-label=\"Decrease quantity\"\r\n        >\r\n          \u2212\r\n        <\/button>\r\n\r\n        <div\r\n          class=\"vgd-list-qty-value\"\r\n          id=\"vgd-result-qty-value\"\r\n        >\r\n          1\r\n        <\/div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-list-qty-button\"\r\n          id=\"vgd-result-qty-plus\"\r\n          aria-label=\"Increase quantity\"\r\n        >\r\n          +\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"vgd-list-add-button\"\r\n        id=\"vgd-add-to-list\"\r\n      >\r\n        Add to My VGD List\r\n      <\/button>\r\n\r\n    `;\r\n\r\n\r\n    actions.appendChild(\r\n      controls\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-result-qty-minus\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        function () {\r\n\r\n          if (resultQty > 1) {\r\n            resultQty--;\r\n          }\r\n\r\n          updateResultQty();\r\n\r\n        }\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-result-qty-plus\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        function () {\r\n\r\n          resultQty++;\r\n\r\n          updateResultQty();\r\n\r\n        }\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-add-to-list\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        addCurrentProduct\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function updateResultQty() {\r\n\r\n    const display =\r\n      document.getElementById(\r\n        \"vgd-result-qty-value\"\r\n      );\r\n\r\n    if (display) {\r\n\r\n      display.textContent =\r\n        resultQty;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     EXTRACT CURRENT PRODUCT\r\n     FROM EXISTING RESULT PANEL\r\n     ========================================================= *\/\r\n\r\n  function getCurrentProduct() {\r\n\r\n    const heading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n    const part =\r\n      document.getElementById(\r\n        \"vgd-part-number\"\r\n      );\r\n\r\n    const details =\r\n      document.getElementById(\r\n        \"vgd-result-details\"\r\n      );\r\n\r\n\r\n    if (\r\n      !heading ||\r\n      !part ||\r\n      !part.textContent.trim()\r\n    ) {\r\n\r\n      return null;\r\n\r\n    }\r\n\r\n\r\n    const detailPairs = {};\r\n\r\n    if (details) {\r\n\r\n      const children =\r\n        Array.from(\r\n          details.children\r\n        );\r\n\r\n\r\n      for (\r\n        let i = 0;\r\n        i < children.length;\r\n        i += 2\r\n      ) {\r\n\r\n        const label =\r\n          children[i];\r\n\r\n        const value =\r\n          children[i + 1];\r\n\r\n\r\n        if (\r\n          label &&\r\n          value\r\n        ) {\r\n\r\n          detailPairs[\r\n            label.textContent\r\n              .trim()\r\n              .toLowerCase()\r\n          ] =\r\n            value.textContent.trim();\r\n\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    let spec = \"\";\r\n\r\n\r\n    \/*\r\n       Web Sling:\r\n       width + length\r\n    *\/\r\n\r\n    if (\r\n      detailPairs[\"width\"] &&\r\n      detailPairs[\"length\"]\r\n    ) {\r\n\r\n      spec =\r\n        detailPairs[\"width\"] +\r\n        \" x \" +\r\n        detailPairs[\"length\"];\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n       Shackle:\r\n       just size\r\n    *\/\r\n\r\n    else if (\r\n      detailPairs[\"size\"]\r\n    ) {\r\n\r\n      spec =\r\n        detailPairs[\"size\"];\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n       Future products:\r\n       use model if no size data exists\r\n    *\/\r\n\r\n    else if (\r\n      detailPairs[\"model\"]\r\n    ) {\r\n\r\n      spec =\r\n        detailPairs[\"model\"];\r\n\r\n    }\r\n\r\n\r\n    let name =\r\n      heading.textContent.trim();\r\n\r\n\r\n    name =\r\n      name.replace(\r\n        \/^VGD\\s+\/i,\r\n        \"\"\r\n      );\r\n\r\n\r\n    return {\r\n\r\n      partNumber:\r\n        part.textContent.trim(),\r\n\r\n      name:\r\n        name,\r\n\r\n      spec:\r\n        spec,\r\n\r\n      quantity:\r\n        resultQty\r\n\r\n    };\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     ADD PRODUCT\r\n     ========================================================= *\/\r\n\r\n  function addCurrentProduct() {\r\n\r\n    const product =\r\n      getCurrentProduct();\r\n\r\n\r\n    if (!product) {\r\n\r\n      alert(\r\n        \"Please select a product first.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const existing =\r\n      vgdList.find(function (item) {\r\n\r\n        return (\r\n          item.partNumber ===\r\n          product.partNumber\r\n        );\r\n\r\n      });\r\n\r\n\r\n    if (existing) {\r\n\r\n      existing.quantity +=\r\n        product.quantity;\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      vgdList.push(\r\n        product\r\n      );\r\n\r\n    }\r\n\r\n\r\n    saveList();\r\n\r\n    renderList();\r\n\r\n\r\n    resultQty = 1;\r\n\r\n    updateResultQty();\r\n\r\n\r\n    const button =\r\n      document.getElementById(\r\n        \"vgd-add-to-list\"\r\n      );\r\n\r\n\r\n    if (button) {\r\n\r\n      const original =\r\n        button.textContent;\r\n\r\n      button.textContent =\r\n        \"Added to My VGD List\";\r\n\r\n      setTimeout(function () {\r\n\r\n        button.textContent =\r\n          original;\r\n\r\n      }, 1300);\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CREATE FLOATING BUTTON + DRAWER\r\n     ========================================================= *\/\r\n\r\n  function createListInterface() {\r\n\r\n    if (\r\n      document.getElementById(\r\n        \"vgd-list-floating-button\"\r\n      )\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const floatingButton =\r\n      document.createElement(\r\n        \"button\"\r\n      );\r\n\r\n    floatingButton.id =\r\n      \"vgd-list-floating-button\";\r\n\r\n    floatingButton.type =\r\n      \"button\";\r\n\r\n    floatingButton.innerHTML =\r\n      'My VGD List \u00b7 <span id=\"vgd-list-floating-count\">0<\/span>';\r\n\r\n    document.body.appendChild(\r\n      floatingButton\r\n    );\r\n\r\n\r\n    const overlay =\r\n      document.createElement(\r\n        \"div\"\r\n      );\r\n\r\n    overlay.id =\r\n      \"vgd-list-overlay\";\r\n\r\n    document.body.appendChild(\r\n      overlay\r\n    );\r\n\r\n\r\n    const drawer =\r\n      document.createElement(\r\n        \"aside\"\r\n      );\r\n\r\n    drawer.id =\r\n      \"vgd-list-drawer\";\r\n\r\n    drawer.setAttribute(\r\n      \"aria-label\",\r\n      \"My VGD List\"\r\n    );\r\n\r\n\r\n    drawer.innerHTML = `\r\n\r\n      <div class=\"vgd-list-drawer-header\">\r\n\r\n        <h2 class=\"vgd-list-drawer-title\">\r\n          My VGD List\r\n        <\/h2>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"vgd-list-close\"\r\n          id=\"vgd-list-close\"\r\n          aria-label=\"Close list\"\r\n        >\r\n          \u00d7\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"vgd-list-items\"\r\n        id=\"vgd-list-items\"\r\n      ><\/div>\r\n\r\n\r\n      <div class=\"vgd-list-footer\">\r\n\r\n        <div class=\"vgd-list-total\">\r\n\r\n          <span>\r\n            Total Items\r\n          <\/span>\r\n\r\n          <strong id=\"vgd-list-total-count\">\r\n            0\r\n          <\/strong>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-list-footer-buttons\">\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-list-footer-button primary\"\r\n            id=\"vgd-copy-list\"\r\n          >\r\n            Copy List\r\n          <\/button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-list-footer-button\"\r\n            id=\"vgd-clear-list\"\r\n          >\r\n            Clear List\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    document.body.appendChild(\r\n      drawer\r\n    );\r\n\r\n\r\n    floatingButton.addEventListener(\r\n      \"click\",\r\n      openDrawer\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-list-close\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        closeDrawer\r\n      );\r\n\r\n\r\n    overlay.addEventListener(\r\n      \"click\",\r\n      closeDrawer\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-copy-list\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        copyFullList\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-clear-list\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        clearList\r\n      );\r\n\r\n\r\n    document.addEventListener(\r\n      \"keydown\",\r\n      function (event) {\r\n\r\n        if (\r\n          event.key === \"Escape\"\r\n        ) {\r\n\r\n          closeDrawer();\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function openDrawer() {\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-list-drawer\"\r\n      )\r\n      .classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-list-overlay\"\r\n      )\r\n      .classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function closeDrawer() {\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-list-drawer\"\r\n      )\r\n      .classList.remove(\r\n        \"is-open\"\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-list-overlay\"\r\n      )\r\n      .classList.remove(\r\n        \"is-open\"\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RENDER LIST\r\n     ========================================================= *\/\r\n\r\n  function renderList() {\r\n\r\n    const container =\r\n      document.getElementById(\r\n        \"vgd-list-items\"\r\n      );\r\n\r\n    if (!container) {\r\n      return;\r\n    }\r\n\r\n\r\n    const total =\r\n      vgdList.reduce(\r\n        function (sum, item) {\r\n\r\n          return (\r\n            sum +\r\n            Number(item.quantity)\r\n          );\r\n\r\n        },\r\n        0\r\n      );\r\n\r\n\r\n    const floatingCount =\r\n      document.getElementById(\r\n        \"vgd-list-floating-count\"\r\n      );\r\n\r\n    const totalCount =\r\n      document.getElementById(\r\n        \"vgd-list-total-count\"\r\n      );\r\n\r\n\r\n    if (floatingCount) {\r\n      floatingCount.textContent = total;\r\n    }\r\n\r\n    if (totalCount) {\r\n      totalCount.textContent = total;\r\n    }\r\n\r\n\r\n    if (!vgdList.length) {\r\n\r\n      container.innerHTML = `\r\n\r\n        <div class=\"vgd-list-empty\">\r\n\r\n          Your VGD list is empty.<br><br>\r\n\r\n          Find a product and select\r\n          <strong>Add to My VGD List<\/strong>.\r\n\r\n        <\/div>\r\n\r\n      `;\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    container.innerHTML =\r\n      vgdList.map(\r\n        function (item, index) {\r\n\r\n          const specHtml =\r\n            item.spec\r\n              ?\r\n              '<p class=\"vgd-list-item-spec\">' +\r\n                escapeHtml(item.spec) +\r\n              '<\/p>'\r\n              :\r\n              \"\";\r\n\r\n\r\n          return `\r\n\r\n            <div\r\n              class=\"vgd-list-item\"\r\n              data-index=\"${index}\"\r\n            >\r\n\r\n              <div class=\"vgd-list-item-top\">\r\n\r\n                <div>\r\n\r\n                  <p class=\"vgd-list-item-name\">\r\n                    ${escapeHtml(item.name)}\r\n                  <\/p>\r\n\r\n                  ${specHtml}\r\n\r\n                  <p class=\"vgd-list-item-part\">\r\n                    VGD ${escapeHtml(item.partNumber)}\r\n                  <\/p>\r\n\r\n                <\/div>\r\n\r\n\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"vgd-list-remove\"\r\n                  data-remove=\"${index}\"\r\n                >\r\n                  Remove\r\n                <\/button>\r\n\r\n              <\/div>\r\n\r\n\r\n              <div class=\"vgd-list-item-bottom\">\r\n\r\n                <div class=\"vgd-list-small-qty\">\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    data-minus=\"${index}\"\r\n                    aria-label=\"Decrease quantity\"\r\n                  >\r\n                    \u2212\r\n                  <\/button>\r\n\r\n                  <span>\r\n                    ${item.quantity}\r\n                  <\/span>\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    data-plus=\"${index}\"\r\n                    aria-label=\"Increase quantity\"\r\n                  >\r\n                    +\r\n                  <\/button>\r\n\r\n                <\/div>\r\n\r\n\r\n                <span class=\"vgd-list-line-total\">\r\n                  Qty ${item.quantity}\r\n                <\/span>\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n          `;\r\n\r\n        }\r\n      )\r\n      .join(\"\");\r\n\r\n\r\n    container\r\n      .querySelectorAll(\r\n        \"[data-minus]\"\r\n      )\r\n      .forEach(\r\n        function (button) {\r\n\r\n          button.addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n              changeListQuantity(\r\n                Number(\r\n                  button.dataset.minus\r\n                ),\r\n                -1\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    container\r\n      .querySelectorAll(\r\n        \"[data-plus]\"\r\n      )\r\n      .forEach(\r\n        function (button) {\r\n\r\n          button.addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n              changeListQuantity(\r\n                Number(\r\n                  button.dataset.plus\r\n                ),\r\n                1\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n\r\n    container\r\n      .querySelectorAll(\r\n        \"[data-remove]\"\r\n      )\r\n      .forEach(\r\n        function (button) {\r\n\r\n          button.addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n              removeListItem(\r\n                Number(\r\n                  button.dataset.remove\r\n                )\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CHANGE QUANTITY\r\n     ========================================================= *\/\r\n\r\n  function changeListQuantity(\r\n    index,\r\n    amount\r\n  ) {\r\n\r\n    const item =\r\n      vgdList[index];\r\n\r\n    if (!item) {\r\n      return;\r\n    }\r\n\r\n\r\n    item.quantity =\r\n      Number(item.quantity) +\r\n      amount;\r\n\r\n\r\n    if (\r\n      item.quantity <= 0\r\n    ) {\r\n\r\n      vgdList.splice(\r\n        index,\r\n        1\r\n      );\r\n\r\n    }\r\n\r\n\r\n    saveList();\r\n\r\n    renderList();\r\n\r\n  }\r\n\r\n\r\n  function removeListItem(index) {\r\n\r\n    vgdList.splice(\r\n      index,\r\n      1\r\n    );\r\n\r\n    saveList();\r\n\r\n    renderList();\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CLEAR\r\n     ========================================================= *\/\r\n\r\n  function clearList() {\r\n\r\n  if (!vgdList.length) {\r\n    return;\r\n  }\r\n\r\n\r\n  const button =\r\n    document.getElementById(\r\n      \"vgd-clear-list\"\r\n    );\r\n\r\n\r\n  \/*\r\n     First tap asks for confirmation.\r\n  *\/\r\n\r\n  if (\r\n    button &&\r\n    button.dataset.confirmClear !== \"yes\"\r\n  ) {\r\n\r\n    button.dataset.confirmClear =\r\n      \"yes\";\r\n\r\n    button.textContent =\r\n      \"Tap Again to Clear\";\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      if (\r\n        button.dataset.confirmClear ===\r\n        \"yes\"\r\n      ) {\r\n\r\n        button.dataset.confirmClear =\r\n          \"\";\r\n\r\n        button.textContent =\r\n          \"Clear List\";\r\n\r\n      }\r\n\r\n    }, 3000);\r\n\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n     Second tap clears the list.\r\n  *\/\r\n\r\n  vgdList = [];\r\n\r\n  saveList();\r\n\r\n  renderList();\r\n\r\n\r\n  if (button) {\r\n\r\n    button.dataset.confirmClear =\r\n      \"\";\r\n\r\n    button.textContent =\r\n      \"Clear List\";\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n  \/* =========================================================\r\n     COPY LIST\r\n     ========================================================= *\/\r\n\r\n  function copyFullList() {\r\n\r\n    if (!vgdList.length) {\r\n\r\n      alert(\r\n        \"Your VGD list is empty.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const lines = [\r\n      \"VGD PRODUCT LIST\",\r\n      \"\"\r\n    ];\r\n\r\n\r\n    vgdList.forEach(\r\n      function (item) {\r\n\r\n        let line =\r\n          \"Qty \" +\r\n          item.quantity +\r\n          \" | \" +\r\n          item.partNumber +\r\n          \" | \" +\r\n          item.name;\r\n\r\n\r\n        if (item.spec) {\r\n\r\n          line +=\r\n            \" | \" +\r\n            item.spec;\r\n\r\n        }\r\n\r\n\r\n        lines.push(\r\n          line\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    const text =\r\n      lines.join(\"\\n\");\r\n\r\n\r\n    copyText(text);\r\n\r\n\r\n    const button =\r\n      document.getElementById(\r\n        \"vgd-copy-list\"\r\n      );\r\n\r\n\r\n    const original =\r\n      button.textContent;\r\n\r\n\r\n    button.textContent =\r\n      \"Copied\";\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      button.textContent =\r\n        original;\r\n\r\n    }, 1300);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY HELPER\r\n     ========================================================= *\/\r\n\r\n  function copyText(text) {\r\n\r\n    if (\r\n      navigator.clipboard &&\r\n      window.isSecureContext\r\n    ) {\r\n\r\n      navigator.clipboard.writeText(\r\n        text\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const temp =\r\n      document.createElement(\r\n        \"textarea\"\r\n      );\r\n\r\n    temp.value =\r\n      text;\r\n\r\n    document.body.appendChild(\r\n      temp\r\n    );\r\n\r\n    temp.select();\r\n\r\n    document.execCommand(\r\n      \"copy\"\r\n    );\r\n\r\n    temp.remove();\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     HTML SAFETY\r\n     ========================================================= *\/\r\n\r\n  function escapeHtml(text) {\r\n\r\n    const div =\r\n      document.createElement(\r\n        \"div\"\r\n      );\r\n\r\n    div.textContent =\r\n      text || \"\";\r\n\r\n    return div.innerHTML;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  function initializeVgdList() {\r\n\r\n    loadStoredList();\r\n\r\n    createResultControls();\r\n\r\n    createListInterface();\r\n\r\n    renderList();\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n     Wait until the existing distributor\r\n     prototype has loaded first.\r\n  *\/\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initializeVgdList\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    initializeVgdList();\r\n\r\n  }\r\n\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7411931 elementor-widget elementor-widget-html\" data-id=\"7411931\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     VGD GRADE 100 DISTRIBUTOR MODULE\r\n     ADD-ON FOR EXISTING DISTRIBUTOR TOOL\r\n     ========================================================= *\/\r\n\r\n  .vgd-g100-options,\r\n  .vgd-g100-options * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-g100-options {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 12px;\r\n  }\r\n\r\n  .vgd-g100-option {\r\n    position: relative;\r\n  }\r\n\r\n  .vgd-g100-option input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .vgd-g100-option label {\r\n    min-height: 92px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 14px;\r\n    border: 1px solid #48525a;\r\n    border-radius: 6px;\r\n    background: #0d1318;\r\n    color: #ffffff;\r\n    cursor: pointer;\r\n    text-align: center;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    line-height: 1.35;\r\n    transition:\r\n      border-color 0.2s ease,\r\n      background 0.2s ease;\r\n  }\r\n\r\n  .vgd-g100-option label:hover {\r\n    border-color: #f26a21;\r\n    background: #141d23;\r\n  }\r\n\r\n  .vgd-g100-option input:checked + label {\r\n    border-color: #f26a21;\r\n    box-shadow: inset 0 0 0 1px #f26a21;\r\n    background: #141d23;\r\n  }\r\n\r\n  .vgd-g100-size-area {\r\n    margin-top: 28px;\r\n    max-width: 520px;\r\n  }\r\n\r\n  .vgd-g100-note {\r\n    margin: 18px 0 0;\r\n    color: rgba(255, 255, 255, 0.45);\r\n    font-size: 12px;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .vgd-g100-options {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .vgd-g100-options {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-g100-option label {\r\n      min-height: 64px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n  \/* =========================================================\r\n     VANGUARD GRADE 100 PRODUCT DATA\r\n     ========================================================= *\/\r\n\r\n  const G100_DATA = {\r\n\r\n    \"9\/32\": {\r\n      chain: \"38151016\",\r\n      master: \"395300403\",\r\n      sub: \"395400483\",\r\n      conn: \"39565016\",\r\n      grab: \"39505016\",\r\n      slip: \"39515016\",\r\n      selfLock: \"39625016\"\r\n    },\r\n\r\n    \"3\/8\": {\r\n      chain: \"38151024\",\r\n      master: \"395300563\",\r\n      sub: \"395401003\",\r\n      conn: \"39565024\",\r\n      grab: \"39505024\",\r\n      slip: \"39515024\",\r\n      selfLock: \"39625024\"\r\n    },\r\n\r\n    \"1\/2\": {\r\n      chain: \"38151032\",\r\n      master: \"395301003\",\r\n      sub: \"395401163\",\r\n      conn: \"39565032\",\r\n      grab: \"39505032\",\r\n      slip: \"39515032\",\r\n      selfLock: \"39625032\"\r\n    },\r\n\r\n    \"5\/8\": {\r\n      chain: \"38151040\",\r\n      master: \"395301323\",\r\n      sub: \"395401323\",\r\n      conn: \"39565040\",\r\n      grab: \"39505040\",\r\n      slip: \"39515040\",\r\n      selfLock: \"396200403\"\r\n    }\r\n\r\n  };\r\n\r\n\r\n  const G100_COMPONENTS = {\r\n\r\n    conn: {\r\n      short: \"Connecting Link\",\r\n      full: \"VGD Grade 100 Connecting Link\"\r\n    },\r\n\r\n    grab: {\r\n      short: \"Clevis Grab Hook\",\r\n      full: \"VGD Grade 100 Clevis Grab Hook\"\r\n    },\r\n\r\n    slip: {\r\n      short: \"Clevis Sling Hook\",\r\n      full: \"VGD Grade 100 Clevis Sling Hook\"\r\n    },\r\n\r\n    selfLock: {\r\n      short: \"Self Locking Hook\",\r\n      full: \"VGD Grade 100 Self Locking Hook\"\r\n    },\r\n\r\n    master: {\r\n      short: \"Master Link\",\r\n      full: \"VGD Grade 100 Master Link\"\r\n    },\r\n\r\n    sub: {\r\n      short: \"Master Link Assembly\",\r\n      full: \"VGD Grade 100 Master Link Assembly\"\r\n    },\r\n\r\n    chain: {\r\n      short: \"Grade 100 Chain\",\r\n      full: \"VGD Grade 100 Chain\"\r\n    }\r\n\r\n  };\r\n\r\n\r\n  let g100ResultActive = false;\r\n  let currentG100Part = \"\";\r\n  let currentG100Description = \"\";\r\n\r\n\r\n  \/* =========================================================\r\n     INTERCEPT GRADE 100 FAMILY SELECTION\r\n\r\n     Existing distributor code loads its placeholder first.\r\n     This immediately replaces that placeholder with the\r\n     working Grade 100 module.\r\n     ========================================================= *\/\r\n\r\n  document.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n\r\n      const trigger =\r\n        event.target.closest(\r\n          \"[data-tool]\"\r\n        );\r\n\r\n      if (!trigger) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        trigger.dataset.tool !==\r\n        \"grade100\"\r\n      ) {\r\n\r\n        g100ResultActive = false;\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      g100ResultActive = false;\r\n\r\n\r\n      setTimeout(\r\n        renderGrade100Tool,\r\n        0\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =========================================================\r\n     RENDER GRADE 100 FINDER\r\n     ========================================================= *\/\r\n\r\n  function renderGrade100Tool() {\r\n\r\n    const workspace =\r\n      document.getElementById(\r\n        \"vgd-active-workspace\"\r\n      );\r\n\r\n    const panel =\r\n      document.getElementById(\r\n        \"vgd-workspace-panel\"\r\n      );\r\n\r\n    const productResult =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n\r\n    if (\r\n      !workspace ||\r\n      !panel\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    if (productResult) {\r\n\r\n      productResult.classList.remove(\r\n        \"is-active\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    panel.innerHTML = `\r\n\r\n      <div class=\"vgd-workspace-header\">\r\n\r\n        <p class=\"vgd-tools-eyebrow\">\r\n          VGD Grade 100\r\n        <\/p>\r\n\r\n        <h2 class=\"vgd-workspace-title\">\r\n          Grade 100 Component Finder\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-workspace-copy\">\r\n          Select the component your customer needs,\r\n          then choose the matching chain size.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-workspace-body\">\r\n\r\n\r\n        <span class=\"vgd-field-label\">\r\n          1. What component does your customer need?\r\n        <\/span>\r\n\r\n\r\n        <div class=\"vgd-g100-options\">\r\n\r\n\r\n          <!-- CONNECTING LINK -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-conn\"\r\n              value=\"conn\"\r\n              checked\r\n            >\r\n\r\n            <label for=\"vgd-g100-conn\">\r\n              Connecting Link\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- GRAB HOOK -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-grab\"\r\n              value=\"grab\"\r\n            >\r\n\r\n            <label for=\"vgd-g100-grab\">\r\n              Clevis Grab Hook\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- SLING HOOK -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-slip\"\r\n              value=\"slip\"\r\n            >\r\n\r\n            <label for=\"vgd-g100-slip\">\r\n              Clevis Sling Hook\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- SELF LOCKING HOOK -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-selflock\"\r\n              value=\"selfLock\"\r\n            >\r\n\r\n            <label for=\"vgd-g100-selflock\">\r\n              Self Locking Hook\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- MASTER LINK -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-master\"\r\n              value=\"master\"\r\n            >\r\n\r\n            <label for=\"vgd-g100-master\">\r\n              Master Link\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- MASTER LINK ASSEMBLY -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-sub\"\r\n              value=\"sub\"\r\n            >\r\n\r\n            <label for=\"vgd-g100-sub\">\r\n              Master Link Assembly\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- CHAIN -->\r\n\r\n          <div class=\"vgd-g100-option\">\r\n\r\n            <input\r\n              type=\"radio\"\r\n              name=\"vgd-g100-component\"\r\n              id=\"vgd-g100-chain\"\r\n              value=\"chain\"\r\n            >\r\n\r\n            <label for=\"vgd-g100-chain\">\r\n              Grade 100 Chain\r\n            <\/label>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"vgd-g100-size-area\">\r\n\r\n          <label\r\n            class=\"vgd-field-label\"\r\n            for=\"vgd-g100-size\"\r\n          >\r\n            2. Chain Size\r\n          <\/label>\r\n\r\n\r\n          <select\r\n            class=\"vgd-field-select\"\r\n            id=\"vgd-g100-size\"\r\n          >\r\n\r\n            <option value=\"\">\r\n              Select Chain Size\r\n            <\/option>\r\n\r\n            <option value=\"9\/32\">\r\n              9\/32\"\r\n            <\/option>\r\n\r\n            <option value=\"3\/8\">\r\n              3\/8\"\r\n            <\/option>\r\n\r\n            <option value=\"1\/2\">\r\n              1\/2\"\r\n            <\/option>\r\n\r\n            <option value=\"5\/8\">\r\n              5\/8\"\r\n            <\/option>\r\n\r\n          <\/select>\r\n\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"vgd-find-button\"\r\n            id=\"vgd-find-g100\"\r\n          >\r\n            Find Product\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <p class=\"vgd-g100-note\">\r\n          Prototype Grade 100 component set.\r\n          Additional components and sizes can be added\r\n          once the distributor tool structure is approved.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    workspace.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"vgd-find-g100\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        findGrade100Product\r\n      );\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      workspace.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"start\"\r\n      });\r\n\r\n    }, 60);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     FIND PRODUCT\r\n     ========================================================= *\/\r\n\r\n  function findGrade100Product() {\r\n\r\n    const selectedComponent =\r\n      document.querySelector(\r\n        'input[name=\"vgd-g100-component\"]:checked'\r\n      );\r\n\r\n    const sizeSelect =\r\n      document.getElementById(\r\n        \"vgd-g100-size\"\r\n      );\r\n\r\n\r\n    if (\r\n      !selectedComponent ||\r\n      !sizeSelect ||\r\n      !sizeSelect.value\r\n    ) {\r\n\r\n      alert(\r\n        \"Please select a Grade 100 component and chain size.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const componentKey =\r\n      selectedComponent.value;\r\n\r\n    const size =\r\n      sizeSelect.value;\r\n\r\n    const productData =\r\n      G100_DATA[size];\r\n\r\n    const component =\r\n      G100_COMPONENTS[\r\n        componentKey\r\n      ];\r\n\r\n\r\n    if (\r\n      !productData ||\r\n      !component ||\r\n      !productData[componentKey]\r\n    ) {\r\n\r\n      alert(\r\n        \"That Grade 100 product combination is not available in the prototype.\"\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const productCode =\r\n      productData[\r\n        componentKey\r\n      ];\r\n\r\n\r\n    showGrade100Result({\r\n      heading:\r\n        component.full,\r\n\r\n      product:\r\n        component.short,\r\n\r\n      size:\r\n        size + '\"',\r\n\r\n      partNumber:\r\n        productCode\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     PRODUCT RESULT\r\n     ========================================================= *\/\r\n\r\n  function showGrade100Result(data) {\r\n\r\n    const productResult =\r\n      document.getElementById(\r\n        \"vgd-product-result\"\r\n      );\r\n\r\n    const resultHeading =\r\n      document.getElementById(\r\n        \"vgd-result-heading\"\r\n      );\r\n\r\n    const resultDetails =\r\n      document.getElementById(\r\n        \"vgd-result-details\"\r\n      );\r\n\r\n    const partNumber =\r\n      document.getElementById(\r\n        \"vgd-part-number\"\r\n      );\r\n\r\n\r\n    if (\r\n      !productResult ||\r\n      !resultHeading ||\r\n      !resultDetails ||\r\n      !partNumber\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    currentG100Part =\r\n      data.partNumber;\r\n\r\n\r\n    currentG100Description =\r\n      data.heading +\r\n      \" | \" +\r\n      data.size +\r\n      \" | VGD \" +\r\n      data.partNumber;\r\n\r\n\r\n    resultHeading.textContent =\r\n      data.heading;\r\n\r\n\r\n    partNumber.textContent =\r\n      data.partNumber;\r\n\r\n\r\n    resultDetails.innerHTML = `\r\n\r\n      <div class=\"vgd-result-label\">\r\n        Product\r\n      <\/div>\r\n\r\n      <div>\r\n        ${escapeG100Html(data.product)}\r\n      <\/div>\r\n\r\n\r\n      <div class=\"vgd-result-label\">\r\n        Size\r\n      <\/div>\r\n\r\n      <div>\r\n        ${escapeG100Html(data.size)}\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    g100ResultActive = true;\r\n\r\n\r\n    productResult.classList.add(\r\n      \"is-active\"\r\n    );\r\n\r\n\r\n    resetVgdListQuantity();\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      productResult.scrollIntoView({\r\n        behavior: \"smooth\",\r\n        block: \"nearest\"\r\n      });\r\n\r\n    }, 80);\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     KEEP THE EXISTING COPY BUTTONS WORKING\r\n     FOR GRADE 100 RESULTS\r\n     ========================================================= *\/\r\n\r\n  function attachGrade100CopyButtons() {\r\n\r\n    const copyPart =\r\n      document.getElementById(\r\n        \"vgd-copy-part\"\r\n      );\r\n\r\n    const copyDescription =\r\n      document.getElementById(\r\n        \"vgd-copy-description\"\r\n      );\r\n\r\n\r\n    if (copyPart) {\r\n\r\n      copyPart.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (!g100ResultActive) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copyG100Text(\r\n            currentG100Part\r\n          );\r\n\r\n\r\n          flashG100Button(\r\n            copyPart,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (copyDescription) {\r\n\r\n      copyDescription.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n          if (!g100ResultActive) {\r\n            return;\r\n          }\r\n\r\n\r\n          event.preventDefault();\r\n          event.stopImmediatePropagation();\r\n\r\n\r\n          copyG100Text(\r\n            currentG100Description\r\n          );\r\n\r\n\r\n          flashG100Button(\r\n            copyDescription,\r\n            \"Copied\"\r\n          );\r\n\r\n        },\r\n        true\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     RESET SHOPPING LIST QUANTITY TO 1\r\n     WHEN A NEW G100 PRODUCT IS FOUND\r\n     ========================================================= *\/\r\n\r\n  function resetVgdListQuantity() {\r\n\r\n    const value =\r\n      document.getElementById(\r\n        \"vgd-result-qty-value\"\r\n      );\r\n\r\n    const minus =\r\n      document.getElementById(\r\n        \"vgd-result-qty-minus\"\r\n      );\r\n\r\n\r\n    if (\r\n      !value ||\r\n      !minus\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    let safety = 100;\r\n\r\n\r\n    while (\r\n      Number(value.textContent) > 1 &&\r\n      safety > 0\r\n    ) {\r\n\r\n      minus.click();\r\n\r\n      safety--;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SEARCH ALIASES\r\n\r\n     Adds a few extra G100 search phrases without\r\n     changing the original distributor tool code.\r\n     ========================================================= *\/\r\n\r\n  function attachGrade100SearchAliases() {\r\n\r\n    const input =\r\n      document.getElementById(\r\n        \"vgd-search-input\"\r\n      );\r\n\r\n    const results =\r\n      document.getElementById(\r\n        \"vgd-search-results\"\r\n      );\r\n\r\n\r\n    if (\r\n      !input ||\r\n      !results\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    const aliases = [\r\n\r\n      \"self locking hook\",\r\n      \"self lock hook\",\r\n      \"master link assembly\",\r\n      \"sub assembly\",\r\n      \"grade 100 chain\",\r\n      \"g100 chain\",\r\n      \"connecting link\",\r\n      \"connector link\",\r\n      \"clevis grab hook\",\r\n      \"clevis sling hook\"\r\n\r\n    ];\r\n\r\n\r\n    input.addEventListener(\r\n      \"input\",\r\n      function () {\r\n\r\n        setTimeout(\r\n          augmentGrade100Search,\r\n          0\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function augmentGrade100Search() {\r\n\r\n      const term =\r\n        input.value\r\n          .trim()\r\n          .toLowerCase();\r\n\r\n\r\n      if (\r\n        term.length < 2\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const match =\r\n        aliases.some(\r\n          function (alias) {\r\n\r\n            return (\r\n              alias.includes(term) ||\r\n              term.includes(alias)\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      if (!match) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        results.querySelector(\r\n          '[data-tool=\"grade100\"]'\r\n        )\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      const button =\r\n        document.createElement(\r\n          \"button\"\r\n        );\r\n\r\n\r\n      button.type =\r\n        \"button\";\r\n\r\n      button.className =\r\n        \"vgd-search-result\";\r\n\r\n      button.dataset.tool =\r\n        \"grade100\";\r\n\r\n\r\n      button.innerHTML = `\r\n\r\n        <span>\r\n\r\n          <span class=\"vgd-search-result-name\">\r\n            Grade 100 Components\r\n          <\/span>\r\n\r\n          <span class=\"vgd-search-result-copy\">\r\n            Chain, links, hooks and master link components\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n        <span class=\"vgd-search-result-arrow\">\r\n          \u203a\r\n        <\/span>\r\n\r\n      `;\r\n\r\n\r\n      const empty =\r\n        results.querySelector(\r\n          \".vgd-search-empty\"\r\n        );\r\n\r\n\r\n      if (empty) {\r\n        empty.remove();\r\n      }\r\n\r\n\r\n      results.appendChild(\r\n        button\r\n      );\r\n\r\n\r\n      results.classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COPY HELPERS\r\n     ========================================================= *\/\r\n\r\n  function copyG100Text(text) {\r\n\r\n    if (\r\n      navigator.clipboard &&\r\n      window.isSecureContext\r\n    ) {\r\n\r\n      navigator.clipboard.writeText(\r\n        text\r\n      );\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const temp =\r\n      document.createElement(\r\n        \"textarea\"\r\n      );\r\n\r\n    temp.value =\r\n      text;\r\n\r\n    document.body.appendChild(\r\n      temp\r\n    );\r\n\r\n    temp.select();\r\n\r\n    document.execCommand(\r\n      \"copy\"\r\n    );\r\n\r\n    temp.remove();\r\n\r\n  }\r\n\r\n\r\n  function flashG100Button(\r\n    button,\r\n    message\r\n  ) {\r\n\r\n    const original =\r\n      button.textContent;\r\n\r\n\r\n    button.textContent =\r\n      message;\r\n\r\n\r\n    setTimeout(function () {\r\n\r\n      button.textContent =\r\n        original;\r\n\r\n    }, 1200);\r\n\r\n  }\r\n\r\n\r\n  function escapeG100Html(text) {\r\n\r\n    const div =\r\n      document.createElement(\r\n        \"div\"\r\n      );\r\n\r\n    div.textContent =\r\n      text || \"\";\r\n\r\n    return div.innerHTML;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n     ========================================================= *\/\r\n\r\n  function initializeGrade100Module() {\r\n\r\n    attachGrade100CopyButtons();\r\n\r\n    attachGrade100SearchAliases();\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initializeGrade100Module\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    initializeGrade100Module();\r\n\r\n  }\r\n\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-72ffc33 e-con-full e-flex e-con e-parent\" data-id=\"72ffc33\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c32e968 elementor-widget elementor-widget-template\" data-id=\"c32e968\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<footer data-elementor-type=\"footer\" data-elementor-id=\"257\" class=\"elementor elementor-257\" data-elementor-post-type=\"elementor_library\">\n\t\t\t<div class=\"elementor-element elementor-element-b1ef259 e-flex e-con-boxed e-con e-parent\" data-id=\"b1ef259\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fa4f93 elementor-widget elementor-widget-html\" data-id=\"4fa4f93\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .vgd-global-footer {\r\n    width: 100vw;\r\n    margin-left: calc(50% - 50vw);\r\n    background: #090a0b;\r\n    color: #ffffff;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-footer-cta {\r\n    background: #111314;\r\n    border-top: 1px solid #34383b;\r\n    border-bottom: 1px solid #34383b;\r\n  }\r\n\r\n  .vgd-footer-cta-inner {\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    padding: 34px 28px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 36px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-footer-cta-copy {\r\n    min-width: 0;\r\n  }\r\n\r\n  .vgd-footer-cta-title {\r\n    margin: 0;\r\n    color: #ffffff;\r\n    font-size: clamp(23px, 2vw, 31px);\r\n    font-weight: 800;\r\n    line-height: 1.15;\r\n    letter-spacing: -0.5px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-footer-cta-text {\r\n    margin: 9px 0 0;\r\n    color: #aeb3b7;\r\n    font-size: 15px;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  .vgd-footer-cta-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    flex: 0 0 auto;\r\n    gap: 12px;\r\n  }\r\n\r\n  .vgd-footer-button {\r\n    min-height: 48px;\r\n    padding: 0 21px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 1px solid transparent;\r\n    color: #ffffff;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n    letter-spacing: 0.6px;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n    box-sizing: border-box;\r\n    transition:\r\n      background-color 0.2s ease,\r\n      border-color 0.2s ease,\r\n      color 0.2s ease;\r\n  }\r\n\r\n  .vgd-footer-button-primary {\r\n    background: #f26a21;\r\n    border-color: #f26a21;\r\n  }\r\n\r\n  .vgd-footer-button-primary:hover,\r\n  .vgd-footer-button-primary:focus {\r\n    background: #d95512;\r\n    border-color: #d95512;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .vgd-footer-button-secondary {\r\n    background: transparent;\r\n    border-color: rgba(255, 255, 255, 0.5);\r\n  }\r\n\r\n  .vgd-footer-button-secondary:hover,\r\n  .vgd-footer-button-secondary:focus {\r\n    background: #ffffff;\r\n    border-color: #ffffff;\r\n    color: #111314;\r\n  }\r\n\r\n  .vgd-footer-main {\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    padding: 56px 28px 48px;\r\n    display: grid;\r\n    grid-template-columns: 1.25fr 1fr 0.8fr;\r\n    gap: 72px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-footer-brand-logo {\r\n    display: block;\r\n    width: 100%;\r\n    max-width: 275px;\r\n    height: auto;\r\n  }\r\n\r\n  .vgd-footer-branch {\r\n    margin: 24px 0 0;\r\n    color: #f26a21;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n    letter-spacing: 1.5px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-footer-brand-copy {\r\n    max-width: 440px;\r\n    margin: 15px 0 0;\r\n    color: #9fa4a8;\r\n    font-size: 14px;\r\n    line-height: 1.65;\r\n  }\r\n\r\n  .vgd-footer-heading {\r\n    margin: 0 0 21px;\r\n    color: #ffffff;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-footer-contact-list {\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n  }\r\n\r\n  .vgd-footer-contact-item {\r\n    margin: 0 0 15px;\r\n    color: #9fa4a8;\r\n    font-size: 14px;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  .vgd-footer-contact-label {\r\n    display: block;\r\n    margin-bottom: 3px;\r\n    color: #d7d9db;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.8px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .vgd-footer-link {\r\n    color: #bfc3c6;\r\n    text-decoration: none;\r\n    transition: color 0.2s ease;\r\n  }\r\n\r\n  .vgd-footer-link:hover,\r\n  .vgd-footer-link:focus {\r\n    color: #f26a21;\r\n  }\r\n\r\n  .vgd-footer-emergency {\r\n    color: #f26a21;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .vgd-footer-division-list {\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n  }\r\n\r\n  .vgd-footer-division-item {\r\n    border-bottom: 1px solid #272b2e;\r\n  }\r\n\r\n  .vgd-footer-division-item:first-child {\r\n    border-top: 1px solid #272b2e;\r\n  }\r\n\r\n  .vgd-footer-division-link {\r\n    min-height: 48px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    color: #bfc3c6;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n    transition:\r\n      color 0.2s ease,\r\n      padding-left 0.2s ease;\r\n  }\r\n\r\n  .vgd-footer-division-link::after {\r\n    content: \"\u203a\";\r\n    color: #f26a21;\r\n    font-size: 21px;\r\n    font-weight: 400;\r\n  }\r\n\r\n  .vgd-footer-division-link:hover,\r\n  .vgd-footer-division-link:focus {\r\n    padding-left: 5px;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .vgd-footer-bottom {\r\n    border-top: 1px solid #272b2e;\r\n  }\r\n\r\n  .vgd-footer-bottom-inner {\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    padding: 20px 28px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 28px;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .vgd-footer-copyright,\r\n  .vgd-footer-credit {\r\n    margin: 0;\r\n    color: #777d81;\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .vgd-footer-credit-link {\r\n    color: #969b9e;\r\n    text-decoration: none;\r\n    transition: color 0.2s ease;\r\n  }\r\n\r\n  .vgd-footer-credit-link:hover,\r\n  .vgd-footer-credit-link:focus {\r\n    color: #f26a21;\r\n  }\r\n\r\n  @media (max-width: 1024px) {\r\n    .vgd-footer-cta-inner {\r\n      align-items: flex-start;\r\n    }\r\n\r\n    .vgd-footer-cta-actions {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n\r\n    .vgd-footer-button {\r\n      min-width: 190px;\r\n    }\r\n\r\n    .vgd-footer-main {\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 50px 60px;\r\n    }\r\n\r\n    .vgd-footer-divisions {\r\n      grid-column: 1 \/ -1;\r\n    }\r\n\r\n    .vgd-footer-division-list {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, minmax(0, 1fr));\r\n      column-gap: 32px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .vgd-global-footer {\r\n      width: 100%;\r\n      margin-left: 0;\r\n    }\r\n\r\n    .vgd-footer-cta-inner {\r\n      padding: 30px 18px;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .vgd-footer-cta-actions {\r\n      width: 100%;\r\n      flex-direction: row;\r\n    }\r\n\r\n    .vgd-footer-button {\r\n      min-width: 0;\r\n      flex: 1 1 50%;\r\n    }\r\n\r\n    .vgd-footer-main {\r\n      padding: 46px 18px 40px;\r\n      grid-template-columns: 1fr;\r\n      gap: 42px;\r\n    }\r\n\r\n    .vgd-footer-divisions {\r\n      grid-column: auto;\r\n    }\r\n\r\n    .vgd-footer-division-list {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .vgd-footer-bottom-inner {\r\n      padding: 19px 18px;\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n      gap: 7px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .vgd-footer-cta-inner {\r\n      padding: 28px 14px;\r\n    }\r\n\r\n    .vgd-footer-cta-actions {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 10px;\r\n    }\r\n\r\n    .vgd-footer-button {\r\n      width: 100%;\r\n    }\r\n\r\n    .vgd-footer-main {\r\n      padding: 42px 14px 36px;\r\n    }\r\n\r\n    .vgd-footer-brand-logo {\r\n      max-width: 235px;\r\n    }\r\n\r\n    .vgd-footer-bottom-inner {\r\n      padding: 18px 14px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<footer\r\n  class=\"vgd-global-footer\"\r\n  aria-label=\"Vanguard Steel Vancouver footer\"\r\n>\r\n\r\n  <section class=\"vgd-footer-cta\">\r\n    <div class=\"vgd-footer-cta-inner\">\r\n\r\n      <div class=\"vgd-footer-cta-copy\">\r\n        <h2 class=\"vgd-footer-cta-title\">\r\n          Need Help Finding the Right Product?\r\n        <\/h2>\r\n\r\n        <p class=\"vgd-footer-cta-text\">\r\n          Our Vancouver team can help with availability, product selection\r\n          and technical information.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"vgd-footer-cta-actions\">\r\n\r\n        <a\r\n          class=\"vgd-footer-button vgd-footer-button-primary\"\r\n          href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/contact\/\"\r\n        >\r\n          Contact Vancouver\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"vgd-footer-button vgd-footer-button-secondary\"\r\n          href=\"tel:+16042943191\"\r\n        >\r\n          Call 604-294-3191\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"vgd-footer-main\">\r\n\r\n    <div class=\"vgd-footer-brand\">\r\n\r\n      <a\r\n        href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/\"\r\n        aria-label=\"Vanguard Steel Vancouver homepage\"\r\n      >\r\n        <img decoding=\"async\"\r\n          class=\"vgd-footer-brand-logo lazyload\"\r\n          data-src=\"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2026\/09\/Vanguard-Steel-Ltd.-Logo-white-with-orange-copy.webp\"\r\n          alt=\"Vanguard Steel Ltd.\"\r\n         \r\n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/220;\">\r\n      <\/a>\r\n\r\n      <p class=\"vgd-footer-branch\">\r\n        Vancouver Branch\r\n      <\/p>\r\n\r\n      <p class=\"vgd-footer-brand-copy\">\r\n        Specialty steel, industrial hardware, cable, wire rope and welding\r\n        products supported by extensive local inventory and knowledgeable\r\n        service.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"vgd-footer-contact\">\r\n\r\n      <h2 class=\"vgd-footer-heading\">\r\n        Vancouver Contact\r\n      <\/h2>\r\n\r\n      <ul class=\"vgd-footer-contact-list\">\r\n\r\n        <li class=\"vgd-footer-contact-item\">\r\n          <span class=\"vgd-footer-contact-label\">Address<\/span>\r\n          <a\r\n            class=\"vgd-footer-link\"\r\n            href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=7880+Fraser+Park+Drive+Burnaby+BC+V5J+5L8\"\r\n            target=\"_blank\"\r\n            rel=\"noopener\"\r\n          >\r\n            7880 Fraser Park Drive<br>\r\n            Burnaby, B.C. V5J 5L8\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-contact-item\">\r\n          <span class=\"vgd-footer-contact-label\">Local<\/span>\r\n          <a\r\n            class=\"vgd-footer-link\"\r\n            href=\"tel:+16042943191\"\r\n          >\r\n            604-294-3191\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-contact-item\">\r\n          <span class=\"vgd-footer-contact-label\">Toll Free<\/span>\r\n          <a\r\n            class=\"vgd-footer-link\"\r\n            href=\"tel:+18662943191\"\r\n          >\r\n            1-866-294-3191\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-contact-item\">\r\n          <span class=\"vgd-footer-contact-label\">Email<\/span>\r\n          <a\r\n            class=\"vgd-footer-link\"\r\n            href=\"mailto:vancouver@vanguardsteel.com\"\r\n          >\r\n            vancouver@vanguardsteel.com\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-contact-item\">\r\n          <span class=\"vgd-footer-contact-label\">Hours<\/span>\r\n          Monday to Friday, 8:00 a.m. to 5:00 p.m.<br>\r\n          <span class=\"vgd-footer-emergency\">\r\n            Emergency call-out available\r\n          <\/span>\r\n        <\/li>\r\n\r\n      <\/ul>\r\n\r\n    <\/div>\r\n\r\n    <nav\r\n      class=\"vgd-footer-divisions\"\r\n      aria-label=\"Vanguard product divisions\"\r\n    >\r\n\r\n      <h2 class=\"vgd-footer-heading\">\r\n        Product Divisions\r\n      <\/h2>\r\n\r\n      <ul class=\"vgd-footer-division-list\">\r\n\r\n        <li class=\"vgd-footer-division-item\">\r\n          <a\r\n            class=\"vgd-footer-division-link\"\r\n            href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/specialty-steel\/\"\r\n          >\r\n            Specialty Steel\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-division-item\">\r\n          <a\r\n            class=\"vgd-footer-division-link\"\r\n            href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/hardware\/\"\r\n          >\r\n            Industrial Hardware\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-division-item\">\r\n          <a\r\n            class=\"vgd-footer-division-link\"\r\n            href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/cable-wire-rope\/\"\r\n          >\r\n            Cable &amp; Wire Rope\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li class=\"vgd-footer-division-item\">\r\n          <a\r\n            class=\"vgd-footer-division-link\"\r\n            href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/welding\/\"\r\n          >\r\n            Welding\r\n          <\/a>\r\n        <\/li>\r\n\r\n      <\/ul>\r\n\r\n    <\/nav>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"vgd-footer-bottom\">\r\n    <div class=\"vgd-footer-bottom-inner\">\r\n\r\n      <p class=\"vgd-footer-copyright\">\r\n        \u00a9 <span id=\"vgd-footer-year\"><\/span>\r\n        Vanguard Steel Ltd. All rights reserved.\r\n      <\/p>\r\n\r\n      <p class=\"vgd-footer-credit\">\r\n        <a\r\n          class=\"vgd-footer-credit-link\"\r\n          href=\"https:\/\/martinvondruska.com\/web-design\/\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n          Website by MV\r\n        <\/a>\r\n      <\/p>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/footer>\r\n\r\n<script>\r\n  (function () {\r\n    var year = document.getElementById(\"vgd-footer-year\");\r\n\r\n    if (year) {\r\n      year.textContent = new Date().getFullYear();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/footer>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VGD Distributor Tools Find the VGD product your customer needs. Select the product, enter the customer\u2019s requirements and get the VGD part number. Built to help Vanguard distributors identify products quickly at the counter, by phone or from a customer request. Find a Product Browse Product Families VGD Distributor Tools What does your customer need? [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-13198","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>VGD Distributor Tools - Vanguard Steel Ltd. | Vancouver Branch<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VGD Distributor Tools - Vanguard Steel Ltd. | Vancouver Branch\" \/>\n<meta property=\"og:description\" content=\"VGD Distributor Tools Find the VGD product your customer needs. Select the product, enter the customer\u2019s requirements and get the VGD part number. Built to help Vanguard distributors identify products quickly at the counter, by phone or from a customer request. Find a Product Browse Product Families VGD Distributor Tools What does your customer need? [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Vanguard Steel Ltd. | Vancouver Branch\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-08T01:03:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/vgd-distributor-tools\\\/\",\"url\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/vgd-distributor-tools\\\/\",\"name\":\"VGD Distributor Tools - Vanguard Steel Ltd. | Vancouver Branch\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/#website\"},\"datePublished\":\"2026-09-23T23:02:31+00:00\",\"dateModified\":\"2026-10-08T01:03:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/vgd-distributor-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/vgd-distributor-tools\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/vgd-distributor-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"VGD Distributor Tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/#website\",\"url\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/\",\"name\":\"Vanguard Steel Ltd. | Vancouver Branch\",\"description\":\"Your Ultimate Source for Specialty Steel and Industrial Products\",\"publisher\":{\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/#organization\",\"name\":\"Vanguard Steel Ltd. | Vancouver Branch\",\"url\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Vanguard-steel-ltd-logo-Oglow.png\",\"contentUrl\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Vanguard-steel-ltd-logo-Oglow.png\",\"width\":1147,\"height\":200,\"caption\":\"Vanguard Steel Ltd. | Vancouver Branch\"},\"image\":{\"@id\":\"https:\\\/\\\/vanguardsteelvancouver.com\\\/wp20\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"VGD Distributor Tools - Vanguard Steel Ltd. | Vancouver Branch","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/","og_locale":"en_US","og_type":"article","og_title":"VGD Distributor Tools - Vanguard Steel Ltd. | Vancouver Branch","og_description":"VGD Distributor Tools Find the VGD product your customer needs. Select the product, enter the customer\u2019s requirements and get the VGD part number. Built to help Vanguard distributors identify products quickly at the counter, by phone or from a customer request. Find a Product Browse Product Families VGD Distributor Tools What does your customer need? [&hellip;]","og_url":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/","og_site_name":"Vanguard Steel Ltd. | Vancouver Branch","article_modified_time":"2026-10-08T01:03:52+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/","url":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/","name":"VGD Distributor Tools - Vanguard Steel Ltd. | Vancouver Branch","isPartOf":{"@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/#website"},"datePublished":"2026-09-23T23:02:31+00:00","dateModified":"2026-10-08T01:03:52+00:00","breadcrumb":{"@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/vgd-distributor-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vanguardsteelvancouver.com\/wp20\/"},{"@type":"ListItem","position":2,"name":"VGD Distributor Tools"}]},{"@type":"WebSite","@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/#website","url":"https:\/\/vanguardsteelvancouver.com\/wp20\/","name":"Vanguard Steel Ltd. | Vancouver Branch","description":"Your Ultimate Source for Specialty Steel and Industrial Products","publisher":{"@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vanguardsteelvancouver.com\/wp20\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/#organization","name":"Vanguard Steel Ltd. | Vancouver Branch","url":"https:\/\/vanguardsteelvancouver.com\/wp20\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/#\/schema\/logo\/image\/","url":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2021\/03\/Vanguard-steel-ltd-logo-Oglow.png","contentUrl":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-content\/uploads\/2021\/03\/Vanguard-steel-ltd-logo-Oglow.png","width":1147,"height":200,"caption":"Vanguard Steel Ltd. | Vancouver Branch"},"image":{"@id":"https:\/\/vanguardsteelvancouver.com\/wp20\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/pages\/13198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/comments?post=13198"}],"version-history":[{"count":49,"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/pages\/13198\/revisions"}],"predecessor-version":[{"id":13314,"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/pages\/13198\/revisions\/13314"}],"wp:attachment":[{"href":"https:\/\/vanguardsteelvancouver.com\/wp20\/wp-json\/wp\/v2\/media?parent=13198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}