{
  "action": "Product-SizeChart",
  "queryString": "cid=pdp-content-section-fit-guide-mainline",
  "locale": "en_US",
  "success": true,
  "content": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" />\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n  <title>SPY Fit Guide</title>\r\n  <link href=\"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500&display=swap\" rel=\"stylesheet\" />\r\n  <style>\r\n    /* ============================================================\r\n       SPY FIT GUIDE\r\n       Prefix: spyfg2__\r\n    ============================================================ */\r\n\r\n    .spyfg2__wrap {\r\n      width: 100%;\r\n      max-height: 70vh;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      -webkit-overflow-scrolling: touch;\r\n      overscroll-behavior: contain;\r\n      touch-action: pan-y;\r\n      background: #fff;\r\n      color: #111;\r\n      font-family: 'Barlow', sans-serif;\r\n      font-size: 13px;\r\n      line-height: 1.5;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .spyfg2__wrap *,\r\n    .spyfg2__wrap *::before,\r\n    .spyfg2__wrap *::after {\r\n      box-sizing: inherit;\r\n    }\r\n\r\n    /* ── Header ── */\r\n    .spyfg2__header {\r\n      background: #fff;\r\n      padding: 0 20px 18px;\r\n      border-bottom: 1px solid #ebebeb;\r\n    }\r\n\r\n    .spyfg2__header-accent {\r\n      height: 3px;\r\n      background: #ee7624;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .spyfg2__eyebrow {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 10px;\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n      color: #ee7624;\r\n      margin: 0 0 5px;\r\n    }\r\n\r\n    .spyfg2__title {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 26px;\r\n      font-weight: 700;\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n      color: #111;\r\n      margin: 0 0 6px;\r\n      line-height: 1.0;\r\n    }\r\n\r\n    .spyfg2__subtitle {\r\n      font-size: 12px;\r\n      color: #999;\r\n      margin: 0;\r\n      font-weight: 300;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    /* ── Tabs ── */\r\n    .spyfg2__tabs {\r\n      display: flex;\r\n      background: #fff;\r\n      border-bottom: 1px solid #ebebeb;\r\n    }\r\n\r\n    .spyfg2__tab {\r\n      flex: 1;\r\n      padding: 11px 8px;\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 11px;\r\n      font-weight: 600;\r\n      letter-spacing: 1.5px;\r\n      text-transform: uppercase;\r\n      color: #bbb;\r\n      text-align: center;\r\n      cursor: pointer;\r\n      border-bottom: 2px solid transparent;\r\n      margin-bottom: -1px;\r\n      transition: color 0.2s, border-color 0.2s;\r\n      user-select: none;\r\n    }\r\n\r\n    .spyfg2__tab.is-active {\r\n      color: #111;\r\n      border-bottom-color: #ee7624;\r\n    }\r\n\r\n    .spyfg2__tab:hover:not(.is-active) {\r\n      color: #666;\r\n    }\r\n\r\n    /* ── Tab Panels ── */\r\n    .spyfg2__panel {\r\n      display: none;\r\n    }\r\n\r\n    .spyfg2__panel.is-active {\r\n      display: block;\r\n    }\r\n\r\n    /* ── Section labels ── */\r\n    .spyfg2__section-label {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 10px;\r\n      font-weight: 600;\r\n      letter-spacing: 2.5px;\r\n      text-transform: uppercase;\r\n      color: #ee7624;\r\n      margin: 0 0 10px;\r\n    }\r\n\r\n    /* ── Diagrams ── */\r\n    .spyfg2__diagrams {\r\n      padding: 18px 20px 14px;\r\n      background: #f6f6f6;\r\n      border-bottom: 1px solid #ebebeb;\r\n    }\r\n\r\n    .spyfg2__diagram-grid {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 16px;\r\n    }\r\n\r\n    .spyfg2__diagram-item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n\r\n    .spyfg2__diagram-item img {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    .spyfg2__diagram-cap {\r\n      font-size: 9px;\r\n      color: #bbb;\r\n      text-transform: uppercase;\r\n      letter-spacing: 1.5px;\r\n      text-align: center;\r\n    }\r\n\r\n    /* ── Measurements ── */\r\n    .spyfg2__measurements {\r\n      padding: 18px 20px;\r\n      background: #fff;\r\n      border-bottom: 1px solid #ebebeb;\r\n    }\r\n\r\n    .spyfg2__measure-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n    }\r\n\r\n    .spyfg2__measure-table tr {\r\n      border-bottom: 1px solid #f3f3f3;\r\n    }\r\n\r\n    .spyfg2__measure-table tr:last-child {\r\n      border-bottom: none;\r\n    }\r\n\r\n    .spyfg2__measure-table td {\r\n      padding: 9px 0;\r\n      vertical-align: middle;\r\n    }\r\n\r\n    .spyfg2__measure-name {\r\n      font-size: 12px;\r\n      color: #666;\r\n      font-weight: 400;\r\n    }\r\n\r\n    .spyfg2__measure-val {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 18px;\r\n      font-weight: 600;\r\n      color: #111;\r\n      text-align: right;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .spyfg2__measure-unit {\r\n      font-size: 11px;\r\n      color: #bbb;\r\n      font-weight: 400;\r\n      font-family: 'Barlow', sans-serif;\r\n    }\r\n\r\n    /* ── Sizing ── */\r\n    .spyfg2__sizing {\r\n      padding: 18px 20px;\r\n      background: #f6f6f6;\r\n      border-bottom: 1px solid #ebebeb;\r\n    }\r\n\r\n    .spyfg2__size-block {\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    .spyfg2__size-block:last-child {\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .spyfg2__size-meta {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .spyfg2__size-desc {\r\n      font-size: 11px;\r\n      color: #999;\r\n      font-weight: 300;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    .spyfg2__size-tag {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 11px;\r\n      font-weight: 600;\r\n      letter-spacing: 1px;\r\n      background: #111;\r\n      color: #fff;\r\n      padding: 2px 8px;\r\n      border-radius: 2px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .spyfg2__pill-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 4px;\r\n    }\r\n\r\n    .spyfg2__pill {\r\n      padding: 8px 2px;\r\n      border: 1.5px solid #e0e0e0;\r\n      border-radius: 3px;\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 12px;\r\n      font-weight: 600;\r\n      letter-spacing: 1px;\r\n      text-transform: uppercase;\r\n      color: #ccc;\r\n      text-align: center;\r\n      background: #fff;\r\n    }\r\n\r\n    .spyfg2__pill.is-active {\r\n      background: #ee7624;\r\n      border-color: #ee7624;\r\n      color: #fff;\r\n    }\r\n\r\n    .spyfg2__pill.is-near {\r\n      border-color: #bbb;\r\n      color: #888;\r\n    }\r\n\r\n    .spyfg2__scale {\r\n      display: flex;\r\n      margin-top: 7px;\r\n      height: 3px;\r\n      border-radius: 2px;\r\n      overflow: hidden;\r\n      gap: 2px;\r\n    }\r\n\r\n    .spyfg2__scale-seg {\r\n      flex: 1;\r\n      border-radius: 1px;\r\n      background: #e2e2e2;\r\n    }\r\n\r\n    .spyfg2__scale-seg.is-filled {\r\n      background: #ee7624;\r\n    }\r\n\r\n    /* ── HOW TO MEASURE ── */\r\n    .spyfg2__how-panel {\r\n      padding: 18px 20px;\r\n      background: #fff;\r\n    }\r\n\r\n    .spyfg2__intro-text {\r\n      font-size: 12px;\r\n      color: #666;\r\n      line-height: 1.6;\r\n      margin-bottom: 18px;\r\n      font-weight: 300;\r\n    }\r\n\r\n    .spyfg2__intro-text strong {\r\n      color: #111;\r\n      font-weight: 500;\r\n    }\r\n\r\n    .spyfg2__steps {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .spyfg2__step {\r\n      display: flex;\r\n      gap: 12px;\r\n      padding: 14px 0;\r\n      border-bottom: 1px solid #f3f3f3;\r\n    }\r\n\r\n    .spyfg2__step:last-child {\r\n      border-bottom: none;\r\n    }\r\n\r\n    .spyfg2__step-left {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n      width: 28px;\r\n    }\r\n\r\n    .spyfg2__step-num {\r\n      width: 26px;\r\n      height: 26px;\r\n      background: #111;\r\n      color: #fff;\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 13px;\r\n      font-weight: 700;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border-radius: 50%;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .spyfg2__step-num.is-orange {\r\n      background: #ee7624;\r\n    }\r\n\r\n    .spyfg2__step-line {\r\n      width: 1px;\r\n      flex: 1;\r\n      background: #e8e8e8;\r\n      margin-top: 4px;\r\n      min-height: 10px;\r\n    }\r\n\r\n    .spyfg2__step:last-child .spyfg2__step-line {\r\n      display: none;\r\n    }\r\n\r\n    .spyfg2__step-right {\r\n      flex: 1;\r\n    }\r\n\r\n    .spyfg2__step-title {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 14px;\r\n      font-weight: 600;\r\n      letter-spacing: 0.5px;\r\n      text-transform: uppercase;\r\n      color: #111;\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    .spyfg2__step-text {\r\n      font-size: 11.5px;\r\n      color: #777;\r\n      line-height: 1.55;\r\n      font-weight: 300;\r\n    }\r\n\r\n    .spyfg2__step-illus {\r\n      margin-top: 10px;\r\n      background: #f6f6f6;\r\n      border-radius: 4px;\r\n      padding: 8px;\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n\r\n    .spyfg2__step-illus svg {\r\n      width: 100%;\r\n      max-width: 160px;\r\n      height: auto;\r\n    }\r\n\r\n    /* Size reference table */\r\n    .spyfg2__ref-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      margin-top: 16px;\r\n      font-size: 11px;\r\n    }\r\n\r\n    .spyfg2__ref-table th {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 10px;\r\n      letter-spacing: 1.5px;\r\n      text-transform: uppercase;\r\n      color: #fff;\r\n      background: #111;\r\n      padding: 7px 8px;\r\n      text-align: left;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .spyfg2__ref-table td {\r\n      padding: 7px 8px;\r\n      color: #555;\r\n      border-bottom: 1px solid #f3f3f3;\r\n    }\r\n\r\n    .spyfg2__ref-table tr:nth-child(even) td {\r\n      background: #f9f9f9;\r\n    }\r\n\r\n    .spyfg2__ref-table tr:last-child td {\r\n      border-bottom: none;\r\n    }\r\n\r\n    .spyfg2__ref-size-badge {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 12px;\r\n      font-weight: 700;\r\n      letter-spacing: 1px;\r\n      color: #111;\r\n    }\r\n\r\n    /* Tip */\r\n    .spyfg2__tip {\r\n      background: #fff8f3;\r\n      border-left: 3px solid #ee7624;\r\n      padding: 10px 12px;\r\n      border-radius: 0 4px 4px 0;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .spyfg2__tip-label {\r\n      font-family: 'Barlow Condensed', sans-serif;\r\n      font-size: 10px;\r\n      font-weight: 700;\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n      color: #ee7624;\r\n      margin-bottom: 3px;\r\n    }\r\n\r\n    .spyfg2__tip-text {\r\n      font-size: 11px;\r\n      color: #666;\r\n      line-height: 1.5;\r\n      font-weight: 300;\r\n    }\r\n\r\n    /* ── Footer ── */\r\n    .spyfg2__footer {\r\n      padding: 14px 20px;\r\n      border-top: 1px solid #ebebeb;\r\n      background: #fff;\r\n    }\r\n\r\n    .spyfg2__footer-note {\r\n      font-size: 10px;\r\n      color: #bbb;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .spyfg2__footer-note a {\r\n      color: #ee7624;\r\n      text-decoration: none;\r\n    }\r\n\r\n    .spyfg2__footer-note a:hover {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    /* ── Scrollbar (cosmetic only, no scroll behavior) ── */\r\n    .spyfg2__scroll {\r\n      scrollbar-width: thin;\r\n      scrollbar-color: #ddd #fff;\r\n    }\r\n\r\n    .spyfg2__scroll::-webkit-scrollbar { width: 4px; }\r\n    .spyfg2__scroll::-webkit-scrollbar-track { background: #fff; }\r\n    .spyfg2__scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }\r\n  </style>\r\n</head>\r\n<body>\r\n\r\n  <!-- DROP .spyfg2__wrap INTO YOUR TEMPLATE -->\r\n  <div class=\"spyfg2__wrap\">\r\n    <div class=\"spyfg2__scroll\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"spyfg2__header\">\r\n        <div class=\"spyfg2__header-accent\"></div>\r\n        <p class=\"spyfg2__eyebrow\">SPY Optic</p>\r\n        <h2 class=\"spyfg2__title\">Frame Fit<br>Guide</h2>\r\n        <p class=\"spyfg2__subtitle\">Find your fit using frame specs or learn to measure at home.</p>\r\n      </div>\r\n\r\n      <!-- Tabs -->\r\n      <div class=\"spyfg2__tabs\" role=\"tablist\">\r\n        <div class=\"spyfg2__tab is-active\" role=\"tab\" onclick=\"spyfg2Switch(event,'frame')\">This Frame</div>\r\n        <div class=\"spyfg2__tab\" role=\"tab\" onclick=\"spyfg2Switch(event,'howto')\">How to Measure</div>\r\n      </div>\r\n\r\n      <!-- ── Panel: This Frame ── -->\r\n      <div class=\"spyfg2__panel is-active\" id=\"spyfg2-panel-frame\">\r\n\r\n        <!-- Diagrams -->\r\n        <div class=\"spyfg2__diagrams\">\r\n          <p class=\"spyfg2__section-label\">Frame Diagrams</p>\r\n          <div class=\"spyfg2__diagram-grid\">\r\n\r\n            <!-- Front View -->\r\n            <div class=\"spyfg2__diagram-item\">\r\n              <img src=\"https://www.spyoptic.com/on/demandware.static/-/Library-Sites-SPYOpticEUSharedLibrary/default/dwb0883ac8/pdp/fit_guide/FitGuide-PDP-Mainline-Front.jpg\" alt=\"Front view frame diagram showing temple width and lens height\" />\r\n              <span class=\"spyfg2__diagram-cap\">Front View</span>\r\n            </div>\r\n\r\n            <!-- Profile View -->\r\n            <div class=\"spyfg2__diagram-item\">\r\n              <img src=\"https://www.spyoptic.com/on/demandware.static/-/Library-Sites-SPYOpticEUSharedLibrary/default/dw74f62391/pdp/fit_guide/FitGuide-PDP-Mainline-Profile.jpg\" alt=\"Profile view frame diagram showing temple length and lens height\" />\r\n              <span class=\"spyfg2__diagram-cap\">Profile View</span>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Measurements -->\r\n        <div class=\"spyfg2__measurements\">\r\n          <p class=\"spyfg2__section-label\">Frame Measurements</p>\r\n          <table class=\"spyfg2__measure-table\">\r\n            <tbody>\r\n              <tr>\r\n                <td><span class=\"spyfg2__measure-name\">Temple Width</span></td>\r\n                <td><div class=\"spyfg2__measure-val\">145<span class=\"spyfg2__measure-unit\"> mm</span></div></td>\r\n              </tr>\r\n              <tr>\r\n                <td><span class=\"spyfg2__measure-name\">Temple Length</span></td>\r\n                <td><div class=\"spyfg2__measure-val\">140<span class=\"spyfg2__measure-unit\"> mm</span></div></td>\r\n              </tr>\r\n              <tr>\r\n                <td><span class=\"spyfg2__measure-name\">Lens Height</span></td>\r\n                <td><div class=\"spyfg2__measure-val\">50<span class=\"spyfg2__measure-unit\"> mm</span></div></td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n\r\n        <!-- Frame Fit + Size -->\r\n        <div class=\"spyfg2__sizing\">\r\n\r\n          <div class=\"spyfg2__size-block\">\r\n            <div class=\"spyfg2__size-meta\">\r\n              <p class=\"spyfg2__section-label\" style=\"margin:0\">Frame Fit</p>\r\n              <span class=\"spyfg2__size-tag\">Large</span>\r\n            </div>\r\n            <p class=\"spyfg2__size-desc\">Temple pressure &amp; nose bridge snugness.</p>\r\n            <div class=\"spyfg2__pill-row\">\r\n              <div class=\"spyfg2__pill is-near\">SM</div>\r\n              <div class=\"spyfg2__pill is-near\">MD</div>\r\n              <div class=\"spyfg2__pill is-active\">LG</div>\r\n              <div class=\"spyfg2__pill\">XL</div>\r\n            </div>\r\n            <div class=\"spyfg2__scale\">\r\n              <div class=\"spyfg2__scale-seg is-filled\"></div>\r\n              <div class=\"spyfg2__scale-seg is-filled\"></div>\r\n              <div class=\"spyfg2__scale-seg is-filled\"></div>\r\n              <div class=\"spyfg2__scale-seg\"></div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"spyfg2__size-block\">\r\n            <div class=\"spyfg2__size-meta\">\r\n              <p class=\"spyfg2__section-label\" style=\"margin:0\">Frame Size</p>\r\n              <span class=\"spyfg2__size-tag\">Large</span>\r\n            </div>\r\n            <p class=\"spyfg2__size-desc\">Overall frame footprint from temple end to end.</p>\r\n            <div class=\"spyfg2__pill-row\">\r\n              <div class=\"spyfg2__pill\">SM</div>\r\n              <div class=\"spyfg2__pill is-near\">MD</div>\r\n              <div class=\"spyfg2__pill is-active\">LG</div>\r\n              <div class=\"spyfg2__pill is-near\">XL</div>\r\n            </div>\r\n            <div class=\"spyfg2__scale\">\r\n              <div class=\"spyfg2__scale-seg is-filled\"></div>\r\n              <div class=\"spyfg2__scale-seg is-filled\"></div>\r\n              <div class=\"spyfg2__scale-seg is-filled\"></div>\r\n              <div class=\"spyfg2__scale-seg\"></div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n      <!-- END panel: frame -->\r\n\r\n      <!-- ── Panel: How to Measure ── -->\r\n      <div class=\"spyfg2__panel\" id=\"spyfg2-panel-howto\">\r\n        <div class=\"spyfg2__how-panel\">\r\n\r\n          <p class=\"spyfg2__intro-text\">\r\n            All you need is a <strong>flexible measuring tape</strong> or a <strong>piece of string and a ruler.</strong> Take measurements on bare skin for best accuracy.\r\n          </p>\r\n\r\n          <p class=\"spyfg2__section-label\">3 Key Measurements</p>\r\n\r\n          <div class=\"spyfg2__steps\">\r\n\r\n            <!-- Step 1 -->\r\n            <div class=\"spyfg2__step\">\r\n              <div class=\"spyfg2__step-left\">\r\n                <div class=\"spyfg2__step-num is-orange\">1</div>\r\n                <div class=\"spyfg2__step-line\"></div>\r\n              </div>\r\n              <div class=\"spyfg2__step-right\">\r\n                <div class=\"spyfg2__step-title\">Temple Width</div>\r\n                <p class=\"spyfg2__step-text\">\r\n                  Wrap a tape around your head just above your brows and ears. Divide that number by 2 for your half-head width. Match to Temple Width for a pressure-free fit.\r\n                </p>\r\n                <div class=\"spyfg2__step-illus\">\r\n                  <svg viewBox=\"0 0 150 80\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <ellipse cx=\"75\" cy=\"44\" rx=\"30\" ry=\"34\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\"/>\r\n                    <ellipse cx=\"45\" cy=\"46\" rx=\"4\" ry=\"6\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\"/>\r\n                    <ellipse cx=\"105\" cy=\"46\" rx=\"4\" ry=\"6\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\"/>\r\n                    <line x1=\"45\" y1=\"28\" x2=\"105\" y2=\"28\" stroke=\"#ee7624\" stroke-width=\"1.5\" stroke-dasharray=\"3,2\"/>\r\n                    <line x1=\"45\" y1=\"25\" x2=\"45\" y2=\"31\" stroke=\"#ee7624\" stroke-width=\"1.5\"/>\r\n                    <line x1=\"105\" y1=\"25\" x2=\"105\" y2=\"31\" stroke=\"#ee7624\" stroke-width=\"1.5\"/>\r\n                    <text x=\"75\" y=\"23\" text-anchor=\"middle\" font-size=\"8\" fill=\"#ee7624\" font-family=\"Barlow Condensed,sans-serif\" font-weight=\"600\">TEMPLE WIDTH</text>\r\n                    <path d=\"M61 31 Q68 27 75 29\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n                    <path d=\"M75 29 Q82 27 89 31\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Step 2 -->\r\n            <div class=\"spyfg2__step\">\r\n              <div class=\"spyfg2__step-left\">\r\n                <div class=\"spyfg2__step-num\">2</div>\r\n                <div class=\"spyfg2__step-line\"></div>\r\n              </div>\r\n              <div class=\"spyfg2__step-right\">\r\n                <div class=\"spyfg2__step-title\">Temple Length</div>\r\n                <p class=\"spyfg2__step-text\">\r\n                  Measure from the hinge of an existing pair to the tip of the arm. Most adults need 135–150mm. Shorter arms sit forward; longer arms hook further behind the ear.\r\n                </p>\r\n                <div class=\"spyfg2__step-illus\">\r\n                  <svg viewBox=\"0 0 150 60\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"10\" y=\"15\" width=\"30\" height=\"22\" rx=\"5\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\"/>\r\n                    <path d=\"M40 22 L120 24 Q128 25 128 32\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n                    <circle cx=\"40\" cy=\"22\" r=\"2.5\" fill=\"#ee7624\"/>\r\n                    <line x1=\"40\" y1=\"50\" x2=\"128\" y2=\"50\" stroke=\"#ee7624\" stroke-width=\"1.2\" stroke-dasharray=\"3,2\"/>\r\n                    <line x1=\"40\" y1=\"47\" x2=\"40\" y2=\"53\" stroke=\"#ee7624\" stroke-width=\"1.2\"/>\r\n                    <line x1=\"128\" y1=\"47\" x2=\"128\" y2=\"53\" stroke=\"#ee7624\" stroke-width=\"1.2\"/>\r\n                    <text x=\"84\" y=\"46\" text-anchor=\"middle\" font-size=\"7\" fill=\"#ee7624\" font-family=\"Barlow Condensed,sans-serif\" font-weight=\"600\">TEMPLE LENGTH</text>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Step 3 -->\r\n            <div class=\"spyfg2__step\">\r\n              <div class=\"spyfg2__step-left\">\r\n                <div class=\"spyfg2__step-num\">3</div>\r\n              </div>\r\n              <div class=\"spyfg2__step-right\">\r\n                <div class=\"spyfg2__step-title\">Lens Height</div>\r\n                <p class=\"spyfg2__step-text\">\r\n                  Measure vertically from your brow bone to your cheekbone. Smaller faces fit 35–42mm; larger faces 44mm+.\r\n                </p>\r\n                <div class=\"spyfg2__step-illus\">\r\n                  <svg viewBox=\"0 0 150 70\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <ellipse cx=\"75\" cy=\"38\" rx=\"28\" ry=\"30\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\"/>\r\n                    <path d=\"M60 22 Q75 18 90 22\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n                    <path d=\"M58 50 Q75 54 92 50\" fill=\"none\" stroke=\"#ccc\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n                    <line x1=\"48\" y1=\"22\" x2=\"48\" y2=\"50\" stroke=\"#ee7624\" stroke-width=\"1.2\" stroke-dasharray=\"2,2\"/>\r\n                    <line x1=\"45\" y1=\"22\" x2=\"51\" y2=\"22\" stroke=\"#ee7624\" stroke-width=\"1.2\"/>\r\n                    <line x1=\"45\" y1=\"50\" x2=\"51\" y2=\"50\" stroke=\"#ee7624\" stroke-width=\"1.2\"/>\r\n                    <text x=\"38\" y=\"38\" text-anchor=\"middle\" font-size=\"7\" fill=\"#ee7624\" font-family=\"Barlow Condensed,sans-serif\" font-weight=\"600\" transform=\"rotate(-90,38,38)\">LENS HEIGHT</text>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n\r\n          <!-- Reference table -->\r\n          <p class=\"spyfg2__section-label\" style=\"margin-top:20px\">Quick Size Reference</p>\r\n          <table class=\"spyfg2__ref-table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Size</th>\r\n                <th>Temple Width</th>\r\n                <th>Temple Arm</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr>\r\n                <td><span class=\"spyfg2__ref-size-badge\">SM</span></td>\r\n                <td>125 – 132mm</td>\r\n                <td>130 – 135mm</td>\r\n              </tr>\r\n              <tr>\r\n                <td><span class=\"spyfg2__ref-size-badge\">MD</span></td>\r\n                <td>133 – 140mm</td>\r\n                <td>135 – 140mm</td>\r\n              </tr>\r\n              <tr>\r\n                <td><span class=\"spyfg2__ref-size-badge\">LG</span></td>\r\n                <td>141 – 148mm</td>\r\n                <td>140 – 145mm</td>\r\n              </tr>\r\n              <tr>\r\n                <td><span class=\"spyfg2__ref-size-badge\">XL</span></td>\r\n                <td>149mm+</td>\r\n                <td>145mm+</td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n\r\n          <!-- Tip -->\r\n          <div class=\"spyfg2__tip\">\r\n            <div class=\"spyfg2__tip-label\">Pro Tip</div>\r\n            <p class=\"spyfg2__tip-text\">\r\n              If you're between sizes, go up — a slightly wider frame is easier to adjust than one that pinches. Our lenses are surfaced for optical clarity edge-to-edge, so coverage won't suffer.\r\n            </p>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <!-- END panel: howto -->\r\n\r\n      <!-- Footer -->\r\n      <div class=\"spyfg2__footer\">\r\n        <p class=\"spyfg2__footer-note\">\r\n          Measurements may vary slightly by colorway. Questions? <a href=\"https://www.spyoptic.com/us/contactus\">Chat with our team.</a>\r\n        </p>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <!-- END .spyfg2__wrap -->\r\n\r\n<script>\r\n  function spyfg2Switch(e, panelId) {\r\n    document.querySelectorAll('.spyfg2__tab').forEach(function(t) { t.classList.remove('is-active'); });\r\n    document.querySelectorAll('.spyfg2__panel').forEach(function(p) { p.classList.remove('is-active'); });\r\n    e.currentTarget.classList.add('is-active');\r\n    var target = document.getElementById('spyfg2-panel-' + panelId);\r\n    if (target) target.classList.add('is-active');\r\n  }\r\n</script>\r\n\r\n</body>\r\n</html>",
  "__gtmEvents": [
    {
      "user": {
        "loginStatus": "Not Logged",
        "userType": ""
      }
    }
  ]
}