{"product_id":"payment-options","title":"Payment Options","description":"\u003cstyle\u003e\n\/* ============================================================\n   TNHP — MODERN PAYMENT OPTIONS\n   \/products\/payment-options\n   ============================================================ *\/\n\n#tnhpPay,\n#tnhpPay *,\n#tnhpPay *::before,\n#tnhpPay *::after {\n  box-sizing: border-box;\n}\n\n#tnhpPay {\n  --bg: #f7f6f3;\n  --card: #ffffff;\n  --soft: #f2f2ef;\n  --text: #111111;\n  --muted: #626262;\n  --line: rgba(17,17,17,.10);\n  --shadow: 0 18px 55px rgba(0,0,0,.065);\n  --red: #c5242d;\n\n  width: 100vw;\n  max-width: none;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(circle at 85% 5%, rgba(0,0,0,.025), transparent 32%),\n    var(--bg);\n\n  color: var(--text);\n  font-family: inherit;\n}\n\n#tnhpPay a {\n  color: inherit;\n  text-decoration: none;\n}\n\n#tnhpPay h1,\n#tnhpPay h2,\n#tnhpPay h3,\n#tnhpPay p {\n  margin-top: 0;\n}\n\n#tnhpPay .pay-wrap {\n  width: min(1180px, calc(100% - 42px));\n  margin: 0 auto;\n}\n\n\n\/* ============================================================\n   HERO\n   ============================================================ *\/\n\n#tnhpPay .pay-hero {\n  padding: clamp(75px, 9vw, 125px) 0 45px;\n  text-align: center;\n}\n\n#tnhpPay .pay-kicker {\n  margin-bottom: 18px;\n\n  color: var(--muted);\n\n  font-size: 11px;\n  line-height: 1;\n  font-weight: 750;\n  letter-spacing: .24em;\n  text-transform: uppercase;\n}\n\n#tnhpPay h1 {\n  margin-bottom: 20px;\n\n  font-size: clamp(48px, 7.5vw, 86px);\n  line-height: .95;\n  font-weight: 700;\n  letter-spacing: -.055em;\n}\n\n#tnhpPay .pay-hero p {\n  max-width: 700px;\n\n  margin: 0 auto;\n\n  color: var(--muted);\n\n  font-size: clamp(17px, 1.8vw, 20px);\n  line-height: 1.55;\n}\n\n\n\/* trust chips *\/\n\n#tnhpPay .trust-row {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n\n  gap: 10px;\n\n  margin-top: 30px;\n}\n\n#tnhpPay .trust-chip {\n  min-height: 44px;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  gap: 9px;\n\n  padding: 10px 18px;\n\n  border: 1px solid var(--line);\n  border-radius: 999px;\n\n  background: rgba(255,255,255,.72);\n\n  box-shadow: 0 6px 20px rgba(0,0,0,.035);\n\n  color: var(--text);\n\n  font-size: 13px;\n  font-weight: 650;\n\n  backdrop-filter: blur(15px);\n  -webkit-backdrop-filter: blur(15px);\n}\n\n#tnhpPay .trust-icon {\n  width: 22px;\n  height: 22px;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  border: 1px solid var(--line);\n  border-radius: 50%;\n\n  font-size: 12px;\n}\n\n\n\/* ============================================================\n   BPI PRIMARY PAYMENT CARD\n   ============================================================ *\/\n\n#tnhpPay .bpi-section {\n  padding: 30px 0 75px;\n}\n\n#tnhpPay .bpi-shell {\n  display: grid;\n  grid-template-columns: 1fr .9fr;\n\n  gap: 22px;\n\n  padding: 22px;\n\n  border: 1px solid var(--line);\n  border-radius: 32px;\n\n  background: rgba(255,255,255,.65);\n\n  box-shadow: var(--shadow);\n\n  backdrop-filter: blur(22px);\n  -webkit-backdrop-filter: blur(22px);\n}\n\n\n\/* left *\/\n\n#tnhpPay .bpi-info {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding:\n    clamp(32px, 5vw, 65px)\n    clamp(22px, 4vw, 50px);\n}\n\n#tnhpPay .recommended {\n  align-self: flex-start;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  margin-bottom: 24px;\n\n  padding: 8px 13px;\n\n  border-radius: 999px;\n\n  background: rgba(197,36,45,.10);\n  color: var(--red);\n\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: .13em;\n  text-transform: uppercase;\n}\n\n#tnhpPay .recommended-dot {\n  width: 8px;\n  height: 8px;\n\n  border-radius: 50%;\n  background: var(--red);\n}\n\n#tnhpPay .payment-label {\n  margin-bottom: 11px;\n\n  color: var(--muted);\n\n  font-size: 11px;\n  font-weight: 750;\n  letter-spacing: .21em;\n  text-transform: uppercase;\n}\n\n#tnhpPay .bpi-info h2 {\n  margin-bottom: 19px;\n\n  font-size: clamp(40px, 5vw, 64px);\n  line-height: .98;\n  font-weight: 700;\n  letter-spacing: -.05em;\n}\n\n#tnhpPay .bpi-info \u003e p {\n  max-width: 520px;\n\n  margin-bottom: 27px;\n\n  color: var(--muted);\n\n  font-size: 16px;\n  line-height: 1.6;\n}\n\n\n\/* instructions *\/\n\n#tnhpPay .steps {\n  display: grid;\n  gap: 4px;\n}\n\n#tnhpPay .step {\n  min-height: 42px;\n\n  display: grid;\n  grid-template-columns: 36px 1fr;\n\n  align-items: center;\n\n  gap: 12px;\n\n  color: var(--muted);\n\n  font-size: 14px;\n  line-height: 1.45;\n}\n\n#tnhpPay .step-number {\n  width: 32px;\n  height: 32px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background: var(--soft);\n  color: var(--text);\n\n  font-size: 13px;\n  font-weight: 750;\n}\n\n\n\/* ============================================================\n   MODERN QR GUI\n   ============================================================ *\/\n\n#tnhpPay .qr-side {\n  min-height: 590px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: clamp(25px, 4vw, 50px);\n\n  border-radius: 22px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(255,255,255,.95),\n      rgba(240,240,237,.80)\n    );\n}\n\n#tnhpPay .qr-panel {\n  width: min(390px, 100%);\n\n  padding: 25px;\n\n  border: 1px solid rgba(17,17,17,.09);\n  border-radius: 25px;\n\n  background: #fff;\n\n  box-shadow:\n    0 25px 65px rgba(0,0,0,.10);\n}\n\n\n\/*\n   QR WINDOW\n\n   Uses the original BPI Shopify image,\n   but zooms only into the QR area.\n\n   IMPORTANT:\n   This version intentionally leaves white\n   breathing room around ALL FOUR SIDES of\n   the QR so none of the code is cut.\n*\/\n\n#tnhpPay .qr-window {\n  position: relative;\n\n  width: 100%;\n\n  aspect-ratio: 1 \/ 1;\n\n  overflow: hidden;\n\n  border-radius: 12px;\n\n  background: #fff;\n}\n\n\n\/*\n Original image approximately:\n 1152 × 1293\n\n QR occupies roughly:\n x = 390–770\n y = 605–985\n\n Scale chosen below is intentionally smaller\n than the exact crop to preserve the entire\n QR quiet zone.\n*\/\n\n#tnhpPay .qr-source {\n  position: absolute;\n\n  width: 265%;\n  max-width: none;\n\n  height: auto;\n\n  left: -82.5%;\n  top: -132.5%;\n\n  display: block;\n\n  background: #fff;\n}\n\n\n\/* QR lower labels *\/\n\n#tnhpPay .qr-meta {\n  padding: 19px 5px 3px;\n\n  text-align: center;\n}\n\n#tnhpPay .qr-meta strong {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: #111;\n\n  font-size: 18px;\n  line-height: 1.2;\n}\n\n#tnhpPay .qr-meta span {\n  color: #777;\n\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n\n\/* ============================================================\n   ALTERNATIVE PAYMENTS\n   ============================================================ *\/\n\n#tnhpPay .alternatives {\n  padding: 10px 0 75px;\n}\n\n#tnhpPay .section-intro {\n  margin-bottom: 34px;\n  text-align: center;\n}\n\n#tnhpPay .section-kicker {\n  margin-bottom: 12px;\n\n  color: var(--muted);\n\n  font-size: 11px;\n  font-weight: 750;\n  letter-spacing: .22em;\n  text-transform: uppercase;\n}\n\n#tnhpPay .section-intro h2 {\n  margin-bottom: 13px;\n\n  font-size: clamp(35px, 5vw, 53px);\n  line-height: 1;\n  letter-spacing: -.045em;\n}\n\n#tnhpPay .section-intro p {\n  max-width: 620px;\n\n  margin: 0 auto;\n\n  color: var(--muted);\n\n  font-size: 16px;\n  line-height: 1.55;\n}\n\n\n#tnhpPay .payment-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n\n  gap: 15px;\n}\n\n#tnhpPay .payment-card {\n  min-height: 310px;\n\n  display: flex;\n  flex-direction: column;\n\n  padding: clamp(28px, 4vw, 42px);\n\n  border: 1px solid var(--line);\n  border-radius: 25px;\n\n  background: rgba(255,255,255,.72);\n\n  box-shadow: 0 10px 35px rgba(0,0,0,.035);\n\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease;\n\n  backdrop-filter: blur(18px);\n  -webkit-backdrop-filter: blur(18px);\n}\n\n#tnhpPay .payment-card:hover {\n  transform: translateY(-3px);\n\n  box-shadow: 0 18px 45px rgba(0,0,0,.07);\n}\n\n#tnhpPay .provider-head {\n  display: flex;\n  align-items: center;\n\n  gap: 18px;\n\n  margin-bottom: 30px;\n}\n\n#tnhpPay .provider-logo {\n  width: 78px;\n  height: 78px;\n\n  flex: 0 0 78px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 20px;\n\n  color: #fff;\n\n  font-size: 21px;\n  font-weight: 800;\n  letter-spacing: -.03em;\n}\n\n#tnhpPay .maya-logo {\n  background:\n    linear-gradient(\n      145deg,\n      #242424,\n      #101010\n    );\n}\n\n#tnhpPay .maya-logo span {\n  color: #27e2a4;\n}\n\n#tnhpPay .hitpay-logo {\n  background:\n    linear-gradient(\n      145deg,\n      #1571e8,\n      #102a8f\n    );\n}\n\n#tnhpPay .provider-small {\n  margin-bottom: 5px;\n\n  color: var(--muted);\n\n  font-size: 10px;\n  font-weight: 750;\n  letter-spacing: .18em;\n  text-transform: uppercase;\n}\n\n#tnhpPay .provider-name {\n  font-size: 29px;\n  line-height: 1;\n  font-weight: 700;\n  letter-spacing: -.035em;\n}\n\n#tnhpPay .payment-card \u003e p {\n  margin-bottom: 27px;\n\n  color: var(--muted);\n\n  font-size: 14px;\n  line-height: 1.55;\n}\n\n#tnhpPay .provider-button {\n  min-height: 54px;\n\n  margin-top: auto;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  gap: 15px;\n\n  padding: 14px 19px;\n\n  border-radius: 999px;\n\n  background: #181818;\n  color: #fff !important;\n\n  font-size: 14px;\n  font-weight: 700;\n\n  transition:\n    transform .2s ease,\n    opacity .2s ease;\n}\n\n#tnhpPay .provider-button:hover {\n  opacity: .88;\n}\n\n#tnhpPay .provider-arrow {\n  font-size: 20px;\n\n  transition: transform .2s ease;\n}\n\n#tnhpPay .provider-button:hover .provider-arrow {\n  transform: translateX(4px);\n}\n\n\n\/* ============================================================\n   PROOF OF PAYMENT\n   ============================================================ *\/\n\n#tnhpPay .proof-section {\n  padding-bottom: clamp(85px, 10vw, 130px);\n}\n\n#tnhpPay .proof-card {\n  display: grid;\n  grid-template-columns: 120px 1fr .45fr;\n\n  gap: clamp(25px, 4vw, 55px);\n\n  align-items: center;\n\n  padding:\n    clamp(35px, 5vw, 55px);\n\n  border-radius: 28px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #242424,\n      #141414\n    );\n\n  color: #fff;\n}\n\n#tnhpPay .proof-icon {\n  width: 92px;\n  height: 92px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background: #fff;\n\n  box-shadow:\n    0 12px 30px rgba(0,0,0,.18);\n\n  font-size: 37px;\n}\n\n#tnhpPay .proof-kicker {\n  margin-bottom: 8px;\n\n  color: rgba(255,255,255,.65);\n\n  font-size: 10px;\n  font-weight: 750;\n  letter-spacing: .22em;\n  text-transform: uppercase;\n}\n\n#tnhpPay .proof-copy h2 {\n  margin-bottom: 12px;\n\n  color: #fff;\n\n  font-size: clamp(29px, 4vw, 43px);\n  line-height: 1;\n  letter-spacing: -.04em;\n}\n\n#tnhpPay .proof-copy p {\n  margin-bottom: 0;\n\n  color: rgba(255,255,255,.70);\n\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n#tnhpPay .important {\n  padding-left: 30px;\n\n  border-left: 1px solid rgba(255,255,255,.18);\n}\n\n#tnhpPay .important-title {\n  display: block;\n\n  margin-bottom: 10px;\n\n  color: #fff;\n\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: .15em;\n  text-transform: uppercase;\n}\n\n#tnhpPay .important p {\n  margin: 0;\n\n  color: rgba(255,255,255,.66);\n\n  font-size: 12px;\n  line-height: 1.55;\n}\n\n\n\/* ============================================================\n   FOOTER NOTE\n   ============================================================ *\/\n\n#tnhpPay .payment-note {\n  padding-bottom: 55px;\n\n  color: var(--muted);\n\n  text-align: center;\n\n  font-size: 11px;\n  line-height: 1.6;\n}\n\n\n\/* ============================================================\n   SHOPIFY — HIDE COMMERCE UI ON THIS PAGE ONLY\n   ============================================================ *\/\n\nbody.tnhp-payment-page #MainContent product-form,\nbody.tnhp-payment-page #MainContent .product-form,\nbody.tnhp-payment-page #MainContent .product-form__buttons,\nbody.tnhp-payment-page #MainContent .product-form__submit,\nbody.tnhp-payment-page #MainContent .buy-buttons,\nbody.tnhp-payment-page #MainContent form[action*=\"\/cart\/add\"],\nbody.tnhp-payment-page #MainContent button[name=\"add\"],\nbody.tnhp-payment-page #MainContent input[name=\"add\"],\n\nbody.tnhp-payment-page #MainContent .shopify-payment-button,\nbody.tnhp-payment-page #MainContent shopify-accelerated-checkout,\nbody.tnhp-payment-page #MainContent shopify-buy-it-now-button,\n\nbody.tnhp-payment-page #MainContent .price,\nbody.tnhp-payment-page #MainContent .price__container,\nbody.tnhp-payment-page #MainContent .price-item,\nbody.tnhp-payment-page #MainContent .product__price,\n\nbody.tnhp-payment-page #MainContent quantity-input,\nbody.tnhp-payment-page #MainContent .quantity,\nbody.tnhp-payment-page #MainContent .product__quantity,\nbody.tnhp-payment-page #MainContent .product-form__quantity,\n\nbody.tnhp-payment-page #MainContent variant-selects,\nbody.tnhp-payment-page #MainContent variant-radios,\nbody.tnhp-payment-page #MainContent .product-form__input,\n\nbody.tnhp-payment-page #MainContent .product__tax,\nbody.tnhp-payment-page #MainContent .product__inventory,\nbody.tnhp-payment-page #MainContent pickup-availability,\n\nbody.tnhp-payment-page #MainContent sticky-add-to-cart,\nbody.tnhp-payment-page #MainContent .sticky-add-to-cart,\nbody.tnhp-payment-page #MainContent .sticky-atc,\n\nbody.tnhp-payment-page #MainContent product-recommendations,\nbody.tnhp-payment-page #MainContent .product-recommendations,\nbody.tnhp-payment-page #MainContent .related-products,\nbody.tnhp-payment-page #MainContent .complementary-products,\nbody.tnhp-payment-page #MainContent [data-product-recommendations],\nbody.tnhp-payment-page #MainContent [class*=\"related-products\"],\nbody.tnhp-payment-page #MainContent [class*=\"product-recommendations\"],\nbody.tnhp-payment-page #MainContent [id*=\"related-products\"],\nbody.tnhp-payment-page #MainContent [id*=\"product-recommendations\"] {\n  display: none !important;\n  visibility: hidden !important;\n\n  height: 0 !important;\n  min-height: 0 !important;\n  max-height: 0 !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: hidden !important;\n}\n\n\n\/* ============================================================\n   MOBILE\n   ============================================================ *\/\n\n@media (max-width: 900px) {\n\n  #tnhpPay .bpi-shell {\n    grid-template-columns: 1fr;\n  }\n\n  #tnhpPay .bpi-info {\n    padding-bottom: 20px;\n  }\n\n  #tnhpPay .qr-side {\n    min-height: 0;\n  }\n\n  #tnhpPay .proof-card {\n    grid-template-columns: 85px 1fr;\n  }\n\n  #tnhpPay .important {\n    grid-column: span 2;\n\n    padding:\n      25px\n      0\n      0;\n\n    border-left: 0;\n    border-top: 1px solid rgba(255,255,255,.18);\n  }\n\n}\n\n\n@media (max-width: 650px) {\n\n  #tnhpPay .pay-wrap {\n    width: calc(100% - 28px);\n  }\n\n  #tnhpPay .pay-hero {\n    padding-top: 65px;\n  }\n\n  #tnhpPay h1 {\n    font-size: clamp(47px, 14vw, 66px);\n  }\n\n  #tnhpPay .trust-row {\n    gap: 6px;\n  }\n\n  #tnhpPay .trust-chip {\n    min-height: 38px;\n\n    padding: 8px 12px;\n\n    font-size: 11px;\n  }\n\n  #tnhpPay .bpi-shell {\n    padding: 8px;\n\n    border-radius: 22px;\n  }\n\n  #tnhpPay .bpi-info {\n    padding:\n      30px\n      20px\n      20px;\n  }\n\n  #tnhpPay .qr-side {\n    padding:\n      22px\n      12px\n      30px;\n\n    border-radius: 17px;\n  }\n\n  #tnhpPay .qr-panel {\n    width: min(355px, 100%);\n\n    padding: 18px;\n\n    border-radius: 20px;\n  }\n\n  #tnhpPay .payment-grid {\n    grid-template-columns: 1fr;\n  }\n\n  #tnhpPay .payment-card {\n    min-height: 285px;\n\n    border-radius: 20px;\n  }\n\n  #tnhpPay .proof-card {\n    grid-template-columns: 1fr;\n\n    padding:\n      35px\n      24px;\n\n    border-radius: 22px;\n  }\n\n  #tnhpPay .proof-icon {\n    width: 70px;\n    height: 70px;\n\n    font-size: 29px;\n  }\n\n  #tnhpPay .important {\n    grid-column: auto;\n  }\n\n}\n\u003c\/style\u003e\n\n\n\u003cdiv id=\"tnhpPay\"\u003e\n\n\n  \u003c!-- HERO --\u003e\n\n  \u003csection class=\"pay-hero\"\u003e\n\n    \u003cdiv class=\"pay-wrap\"\u003e\n\n      \u003cdiv class=\"pay-kicker\"\u003e\n        The North Hit Project\n      \u003c\/div\u003e\n\n      \u003ch1\u003e\n        Payment Options\n      \u003c\/h1\u003e\n\n      \u003cp\u003e\n        Choose your preferred payment method. For the quickest\n        payment and verification process, we recommend using our\n        BPI InstaPay QR.\n      \u003c\/p\u003e\n\n\n      \u003cdiv class=\"trust-row\"\u003e\n\n        \u003cdiv class=\"trust-chip\"\u003e\n          \u003cspan class=\"trust-icon\"\u003e✓\u003c\/span\u003e\n          Secure Payments\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"trust-chip\"\u003e\n          \u003cspan class=\"trust-icon\"\u003e↯\u003c\/span\u003e\n          Fast \u0026amp; Convenient\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"trust-chip\"\u003e\n          \u003cspan class=\"trust-icon\"\u003e▯\u003c\/span\u003e\n          Mobile Friendly\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n\n  \u003c!-- BPI --\u003e\n\n  \u003csection class=\"bpi-section\"\u003e\n\n    \u003cdiv class=\"pay-wrap\"\u003e\n\n      \u003cdiv class=\"bpi-shell\"\u003e\n\n\n        \u003cdiv class=\"bpi-info\"\u003e\n\n          \u003cdiv class=\"recommended\"\u003e\n            \u003cspan class=\"recommended-dot\"\u003e\u003c\/span\u003e\n            Recommended\n          \u003c\/div\u003e\n\n\n          \u003cdiv class=\"payment-label\"\u003e\n            BPI InstaPay QR\n          \u003c\/div\u003e\n\n\n          \u003ch2\u003e\n            Scan to Pay\n          \u003c\/h2\u003e\n\n\n          \u003cp\u003e\n            Use your banking or supported e-wallet application to\n            scan our BPI InstaPay QR and complete your payment quickly\n            and securely.\n          \u003c\/p\u003e\n\n\n          \u003cdiv class=\"steps\"\u003e\n\n            \u003cdiv class=\"step\"\u003e\n              \u003cspan class=\"step-number\"\u003e1\u003c\/span\u003e\n              \u003cspan\u003eOpen your banking or e-wallet application.\u003c\/span\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"step\"\u003e\n              \u003cspan class=\"step-number\"\u003e2\u003c\/span\u003e\n              \u003cspan\u003eSelect QR payment or Scan QR.\u003c\/span\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"step\"\u003e\n              \u003cspan class=\"step-number\"\u003e3\u003c\/span\u003e\n              \u003cspan\u003eScan the BPI InstaPay QR.\u003c\/span\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"step\"\u003e\n              \u003cspan class=\"step-number\"\u003e4\u003c\/span\u003e\n              \u003cspan\u003eEnter the payment amount and confirm.\u003c\/span\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"step\"\u003e\n              \u003cspan class=\"step-number\"\u003e5\u003c\/span\u003e\n              \u003cspan\u003eSave a screenshot of your successful payment.\u003c\/span\u003e\n            \u003c\/div\u003e\n\n          \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n\n\n        \u003c!-- MODERN QR GUI --\u003e\n\n        \u003cdiv class=\"qr-side\"\u003e\n\n          \u003cdiv class=\"qr-panel\"\u003e\n\n            \u003cdiv class=\"qr-window\"\u003e\n\n              \u003cimg class=\"qr-source\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0852\/1115\/2679\/files\/BPIQR-TNHP.png?v=1788912922\" alt=\"TNHP BPI InstaPay QR\" loading=\"eager\"\u003e\n\n            \u003c\/div\u003e\n\n\n            \u003cdiv class=\"qr-meta\"\u003e\n\n              \u003cstrong\u003e\n                BPI InstaPay\n              \u003c\/strong\u003e\n\n              \u003cspan\u003e\n                The North Hit Project\n              \u003c\/span\u003e\n\n            \u003c\/div\u003e\n\n          \u003c\/div\u003e\n\n        \u003c\/div\u003e\n\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n\n  \u003c!-- OTHER PAYMENT METHODS --\u003e\n\n  \u003csection class=\"alternatives\"\u003e\n\n    \u003cdiv class=\"pay-wrap\"\u003e\n\n\n      \u003cdiv class=\"section-intro\"\u003e\n\n        \u003cdiv class=\"section-kicker\"\u003e\n          Alternative Options\n        \u003c\/div\u003e\n\n        \u003ch2\u003e\n          Other Payment Methods\n        \u003c\/h2\u003e\n\n        \u003cp\u003e\n          You may also complete your payment through our Maya\n          payment portal or secure HitPay checkout.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n\n      \u003cdiv class=\"payment-grid\"\u003e\n\n\n        \u003c!-- MAYA --\u003e\n\n        \u003carticle class=\"payment-card\"\u003e\n\n          \u003cdiv class=\"provider-head\"\u003e\n\n            \u003cdiv class=\"provider-logo maya-logo\"\u003e\n              \u003cspan\u003emaya\u003c\/span\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv\u003e\n\n              \u003cdiv class=\"provider-small\"\u003e\n                Payment Portal\n              \u003c\/div\u003e\n\n              \u003cdiv class=\"provider-name\"\u003e\n                Maya\n              \u003c\/div\u003e\n\n            \u003c\/div\u003e\n\n          \u003c\/div\u003e\n\n\n          \u003cp\u003e\n            Continue to our Maya payment portal and complete the\n            transaction using the available payment methods.\n          \u003c\/p\u003e\n\n\n          \u003ca class=\"provider-button\" href=\"https:\/\/payments.maya.ph\/invoice?id=0114b2d9-a76a-4fa6-84be-1acd737e8cbc\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\n            \u003cspan\u003e\n              Continue to Maya\n            \u003c\/span\u003e\n\n            \u003cspan class=\"provider-arrow\"\u003e\n              →\n            \u003c\/span\u003e\n\n          \u003c\/a\u003e\n\n        \u003c\/article\u003e\n\n\n\n        \u003c!-- HITPAY --\u003e\n\n        \u003carticle class=\"payment-card\"\u003e\n\n          \u003cdiv class=\"provider-head\"\u003e\n\n            \u003cdiv class=\"provider-logo hitpay-logo\"\u003e\n              H\n            \u003c\/div\u003e\n\n            \u003cdiv\u003e\n\n              \u003cdiv class=\"provider-small\"\u003e\n                Secure Checkout\n              \u003c\/div\u003e\n\n              \u003cdiv class=\"provider-name\"\u003e\n                HitPay\n              \u003c\/div\u003e\n\n            \u003c\/div\u003e\n\n          \u003c\/div\u003e\n\n\n          \u003cp\u003e\n            Use our HitPay checkout page as an alternative online\n            payment method and follow the secure checkout instructions.\n          \u003c\/p\u003e\n\n\n          \u003ca class=\"provider-button\" href=\"https:\/\/securecheckout.hit-pay.com\/payment-request\/@tnhphitpay\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\n            \u003cspan\u003e\n              Continue to HitPay\n            \u003c\/span\u003e\n\n            \u003cspan class=\"provider-arrow\"\u003e\n              →\n            \u003c\/span\u003e\n\n          \u003c\/a\u003e\n\n        \u003c\/article\u003e\n\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n\n  \u003c!-- PROOF OF PAYMENT --\u003e\n\n  \u003csection class=\"proof-section\"\u003e\n\n    \u003cdiv class=\"pay-wrap\"\u003e\n\n      \u003cdiv class=\"proof-card\"\u003e\n\n\n        \u003cdiv class=\"proof-icon\"\u003e\n          💬\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"proof-copy\"\u003e\n\n          \u003cdiv class=\"proof-kicker\"\u003e\n            After Payment\n          \u003c\/div\u003e\n\n          \u003ch2\u003e\n            Send us your proof of payment\n          \u003c\/h2\u003e\n\n          \u003cp\u003e\n            Once your payment is complete, please send a screenshot\n            or copy of your successful transaction using our\n            \u003cstrong\u003eMessenger button located at the lower-right corner\n            of this website.\u003c\/strong\u003e\n            Include your name and your order, booking, course,\n            program, or inquiry reference when applicable.\n          \u003c\/p\u003e\n\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"important\"\u003e\n\n          \u003cspan class=\"important-title\"\u003e\n            ⓘ Important\n          \u003c\/span\u003e\n\n          \u003cp\u003e\n            Please verify the payment details before confirming your\n            transaction. Payment availability and processing are subject\n            to the selected payment provider.\n          \u003c\/p\u003e\n\n        \u003c\/div\u003e\n\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n\n  \u003cdiv class=\"pay-wrap payment-note\"\u003e\n    The North Hit Project · Secure Payment Options\n  \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003cscript\u003e\n(function () {\n\n  var TARGET =\n    '\/products\/payment-options';\n\n\n  function isPaymentPage() {\n    return window.location.pathname\n      .replace(\/\\\/+$\/, '')\n      .toLowerCase() === TARGET;\n  }\n\n\n  if (!isPaymentPage()) return;\n\n\n\n  \/* =========================================================\n     DYNAMIC SPOTLIGHT THEME\n     ========================================================= *\/\n\n  function rgb(value) {\n\n    var m =\n      value \u0026\u0026\n      value.match(\n        \/rgba?\\(\\s*(\\d+)[,\\s]+(\\d+)[,\\s]+(\\d+)\/\n      );\n\n    if (!m) return null;\n\n    return {\n      r: +m[1],\n      g: +m[2],\n      b: +m[3]\n    };\n\n  }\n\n\n  function brightness(c) {\n\n    if (!c) return 255;\n\n    return (\n      c.r * .2126 +\n      c.g * .7152 +\n      c.b * .0722\n    );\n\n  }\n\n\n  function syncTheme() {\n\n    var page =\n      document.getElementById('tnhpPay');\n\n    if (!page) return;\n\n\n    var styles =\n      getComputedStyle(document.body);\n\n\n    var bg =\n      styles.backgroundColor;\n\n\n    var fg =\n      styles.color;\n\n\n    var dark =\n      brightness(rgb(bg)) \u003c 115;\n\n\n    if (dark) {\n\n      page.style.setProperty(\n        '--bg',\n        bg || '#151515'\n      );\n\n      page.style.setProperty(\n        '--card',\n        'rgba(255,255,255,.07)'\n      );\n\n      page.style.setProperty(\n        '--soft',\n        'rgba(255,255,255,.09)'\n      );\n\n      page.style.setProperty(\n        '--text',\n        fg || '#f5f5f5'\n      );\n\n      page.style.setProperty(\n        '--muted',\n        'rgba(255,255,255,.65)'\n      );\n\n      page.style.setProperty(\n        '--line',\n        'rgba(255,255,255,.13)'\n      );\n\n      page.style.setProperty(\n        '--shadow',\n        '0 22px 65px rgba(0,0,0,.30)'\n      );\n\n    } else {\n\n      page.style.setProperty(\n        '--bg',\n        (\n          bg \u0026\u0026\n          bg !== 'rgba(0, 0, 0, 0)'\n        )\n          ? bg\n          : '#f7f6f3'\n      );\n\n      page.style.setProperty(\n        '--card',\n        '#ffffff'\n      );\n\n      page.style.setProperty(\n        '--soft',\n        '#f2f2ef'\n      );\n\n      page.style.setProperty(\n        '--text',\n        fg || '#111'\n      );\n\n      page.style.setProperty(\n        '--muted',\n        '#626262'\n      );\n\n      page.style.setProperty(\n        '--line',\n        'rgba(17,17,17,.10)'\n      );\n\n      page.style.setProperty(\n        '--shadow',\n        '0 18px 55px rgba(0,0,0,.065)'\n      );\n\n    }\n\n  }\n\n\n\n  \/* =========================================================\n     HIDE SHOPIFY COMMERCE\n     ========================================================= *\/\n\n  function hide(el) {\n\n    if (!el) return;\n\n    if (\n      el.closest \u0026\u0026\n      el.closest('#tnhpPay')\n    ) return;\n\n\n    [\n      ['display','none'],\n      ['visibility','hidden'],\n      ['height','0'],\n      ['min-height','0'],\n      ['max-height','0'],\n      ['margin','0'],\n      ['padding','0'],\n      ['overflow','hidden']\n    ].forEach(function (x) {\n\n      el.style.setProperty(\n        x[0],\n        x[1],\n        'important'\n      );\n\n    });\n\n  }\n\n\n  var selectors = [\n\n    'product-form',\n    '.product-form',\n    '.product-form__buttons',\n    '.product-form__submit',\n    '.buy-buttons',\n    'form[action*=\"\/cart\/add\"]',\n    'button[name=\"add\"]',\n    'input[name=\"add\"]',\n\n    '.shopify-payment-button',\n    'shopify-accelerated-checkout',\n    'shopify-buy-it-now-button',\n\n    '.price',\n    '.price__container',\n    '.price-item',\n    '.product__price',\n\n    'quantity-input',\n    '.quantity',\n    '.product__quantity',\n    '.product-form__quantity',\n\n    'variant-selects',\n    'variant-radios',\n    '.product-form__input',\n\n    '.product__tax',\n    '.product__inventory',\n    'pickup-availability',\n\n    'sticky-add-to-cart',\n    '.sticky-add-to-cart',\n    '.sticky-atc',\n\n    'product-recommendations',\n    '.product-recommendations',\n    '.related-products',\n    '.complementary-products',\n\n    '[data-product-recommendations]',\n    '[class*=\"related-products\"]',\n    '[class*=\"product-recommendations\"]',\n    '[id*=\"related-products\"]',\n    '[id*=\"product-recommendations\"]'\n\n  ];\n\n\n  function hideKnown() {\n\n    selectors.forEach(function (selector) {\n\n      try {\n\n        document\n          .querySelectorAll(selector)\n          .forEach(hide);\n\n      } catch (e) {}\n\n    });\n\n  }\n\n\n\n  \/* Add to cart \/ Buy it now text fallback *\/\n\n  function hideByText() {\n\n    document\n      .querySelectorAll(\n        'button,input[type=\"submit\"],input[type=\"button\"]'\n      )\n      .forEach(function (el) {\n\n        if (\n          el.closest \u0026\u0026\n          el.closest('#tnhpPay')\n        ) return;\n\n\n        var text =\n          (\n            el.textContent ||\n            el.value ||\n            el.getAttribute('aria-label') ||\n            ''\n          )\n          .replace(\/\\s+\/g,' ')\n          .trim()\n          .toLowerCase();\n\n\n        if (\n          text === 'add to cart' ||\n          text === 'buy it now' ||\n          text === 'buy now' ||\n          text === 'shop pay'\n        ) {\n\n          hide(\n            el.closest('product-form') ||\n            el.closest('.product-form') ||\n            el.closest('form[action*=\"\/cart\/add\"]') ||\n            el\n          );\n\n        }\n\n      });\n\n  }\n\n\n\n  \/* Related products fallback *\/\n\n  function hideRelated() {\n\n    var labels = [\n      'related products',\n      'you may also like',\n      'you might also like',\n      'recommended products',\n      'recommended for you',\n      'recommendations',\n      'customers also bought',\n      'complete the look'\n    ];\n\n\n    document\n      .querySelectorAll(\n        '#MainContent h1,' +\n        '#MainContent h2,' +\n        '#MainContent h3,' +\n        '#MainContent h4,' +\n        '#MainContent h5'\n      )\n      .forEach(function (heading) {\n\n        if (\n          heading.closest \u0026\u0026\n          heading.closest('#tnhpPay')\n        ) return;\n\n\n        var text =\n          (heading.textContent || '')\n          .replace(\/\\s+\/g,' ')\n          .trim()\n          .toLowerCase();\n\n\n        if (\n          labels.indexOf(text) !== -1\n        ) {\n\n          hide(\n            heading.closest('.shopify-section') ||\n            heading.closest('section') ||\n            heading.parentElement\n          );\n\n        }\n\n      });\n\n  }\n\n\n\n  function cleanup() {\n\n    if (!isPaymentPage()) return;\n\n\n    if (document.body) {\n      document.body.classList.add(\n        'tnhp-payment-page'\n      );\n    }\n\n\n    syncTheme();\n\n    hideKnown();\n\n    hideByText();\n\n    hideRelated();\n\n  }\n\n\n  cleanup();\n\n\n  if (\n    document.readyState === 'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      cleanup\n    );\n\n  } else {\n    cleanup();\n  }\n\n\n  var scheduled = false;\n\n\n  new MutationObserver(function () {\n\n    if (scheduled) return;\n\n    scheduled = true;\n\n\n    requestAnimationFrame(function () {\n\n      scheduled = false;\n\n      cleanup();\n\n    });\n\n  }).observe(\n    document.documentElement,\n    {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\n        'class',\n        'data-theme'\n      ]\n    }\n  );\n\n\n  setTimeout(cleanup, 300);\n  setTimeout(cleanup, 1000);\n  setTimeout(cleanup, 2500);\n\n\n})();\n\u003c\/script\u003e","brand":"The North Hit Project","offers":[{"title":"Default Title","offer_id":52034998960423,"sku":null,"price":0.0,"currency_code":"PHP","in_stock":true}],"url":"https:\/\/www.thenorthhitproject.com\/fil\/products\/payment-options","provider":"The North Hit Project","version":"1.0","type":"link"}