{"id":1090496,"date":"2026-08-05T08:49:41","date_gmt":"2026-08-05T00:49:41","guid":{"rendered":"https:\/\/test.aai.gnh-solutions.com\/?page_id=1090496"},"modified":"2026-08-09T22:49:55","modified_gmt":"2026-08-09T14:49:55","slug":"card-gallery","status":"publish","type":"page","link":"https:\/\/test.aai.gnh-solutions.com\/zh\/card-gallery\/","title":{"rendered":"Card Gallery"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;5px|||0px||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;1&#8243; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;7px|||||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text admin_label=&#8221;Title&#8221; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;|700|||||||&#8221; text_text_color=&#8221;#1e3a8a&#8221; text_font_size=&#8221;15px&#8221; background_color=&#8221;#e0e7ff&#8221; text_orientation=&#8221;center&#8221; max_width=&#8221;30%&#8221; max_width_tablet=&#8221;30%&#8221; max_width_phone=&#8221;100%&#8221; max_width_last_edited=&#8221;on|phone&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||9px|||&#8221; custom_padding=&#8221;4px|25px|4px|25px|true|true&#8221; border_radii=&#8221;on|40px|40px|40px|40px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><i class=\"fas fa-id-card\"><\/i><span>TEMPLATE GALLERY<\/span><\/p>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;Heading 1&#8243; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; text_font_size=&#8221;18px&#8221; header_font=&#8221;|700|||||||&#8221; header_text_color=&#8221;#0b1c3a&#8221; header_font_size=&#8221;48px&#8221; header_letter_spacing=&#8221;-0.02em&#8221; header_line_height=&#8221;1.2em&#8221; text_orientation=&#8221;center&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||24px||false|false&#8221; custom_padding=&#8221;23px|||||&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Choose the SmartLink Experience That Matches Your Ambition<\/h1>\n<p>Browse professional templates designed to help you make the right first impression and grow your business.<\/p>\n<p>[\/et_pb_text][et_pb_tabs admin_label=&#8221;Packages&#8221; module_class=&#8221;gnh-tier-tabs&#8221; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; width_tablet=&#8221;&#8221; width_phone=&#8221;&#8221; width_last_edited=&#8221;on|desktop&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;7px|||||&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_tab title=&#8221;Foundation&#8221; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<div class=\"gnh-namecard-gallery gnh-single-tier\" data-initial-tier=\"foundation\"><div class=\"gnh-gallery-filter-bar gnh-tier-tabs et_pb_tabs\"><ul class=\"gnh-tier-filter-group et_pb_tabs_controls\"><li><button type=\"button\" class=\"gnh-filter-chip gnh-filter-chip-active\" data-filter=\"all\">All Templates<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"foundation\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Foundation<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"professional\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Professional<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"elite\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Elite<\/button><\/li><\/ul><span class=\"gnh-filter-divider\" aria-hidden=\"true\"><\/span><\/div><section class=\"gnh-namecard-tier gnh-tier-foundation\" data-tier=\"foundation\"><div class=\"gnh-namecard-section-inner\"><div class=\"gnh-namecard-tier-header\"><div class=\"gnh-namecard-tier-meta\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i><div class=\"gnh-tier-title-wrap\"><h2 class=\"gnh-namecard-tier-title\">Foundation<\/h2><p class=\"gnh-tier-desc\">Simple. Professional. Ready to launch.<\/p><\/div><\/div><div class=\"gnh-tier-right\"><div class=\"gnh-style-filter-wrap\"><button type=\"button\" class=\"gnh-filter-chip gnh-style-toggle\" aria-expanded=\"false\" aria-controls=\"gnh-style-menu-foundation\">All Styles <span class=\"gnh-style-caret\" aria-hidden=\"true\">&#9662;<\/span><\/button><div id=\"gnh-style-menu-foundation\" class=\"gnh-style-menu\" hidden><input type=\"search\" class=\"gnh-style-search\" placeholder=\"Search styles...\" aria-label=\"Search styles\"><div class=\"gnh-style-options\"><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"blue-theme\" data-style-label=\"blue theme\"><span class=\"gnh-style-option-label\">blue theme<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"minimal\" data-style-label=\"minimal\"><span class=\"gnh-style-option-label\">minimal<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"modern\" data-style-label=\"modern\"><span class=\"gnh-style-option-label\">modern<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><\/div><div class=\"gnh-style-actions\"><button type=\"button\" class=\"gnh-style-clear\">Clear all<\/button><\/div><\/div><\/div><div class=\"gnh-tier-count\">1 Templates<\/div><\/div><\/div><div class=\"gnh-active-style-pills\" hidden><\/div><div class=\"gnh-namecard-grid\"><article class=\"gnh-namecard-card\" data-template-id=\"7\" data-idx=\"0\" data-styles=\"minimal,modern,blue-theme\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/teresalim\/\" title=\"Advisor Essentials Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">Advisor Essentials<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">minimal<\/span><span class=\"gnh-style-pill\">modern<\/span><span class=\"gnh-style-pill\">blue theme<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">Designed for advisors who value simplicity and professionalism. This template showcases your profile, expertise, and key contact actions in a clean, focused layout that encourages enquiries without overwhelming visitors.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/teresalim\/\" aria-label=\"Live preview: Advisor Essentials\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><\/div><\/div><\/section><\/div><style>\r\n        .gnh-namecard-gallery{--gnh-tier-icon-size:44px;--gnh-tier-icon-svg-size:22px;padding:24px 20px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e2e8f0;border-radius:20px}\r\n        .gnh-namecard-hero{margin-bottom:20px}\r\n        .gnh-namecard-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6366f1;margin-bottom:10px}\r\n        .gnh-namecard-hero-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:#0f172a;letter-spacing:-0.01em}\r\n        .gnh-namecard-hero-sub{margin:0;max-width:760px;color:#475467;font-size:15px;line-height:1.7}\r\n        .gnh-hero-tier-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}\r\n        .gnh-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;appearance:none}\r\n        .gnh-hero-pill-foundation{border-color:#b7e4c7;color:#15803d;background:#f0fdf4}\r\n        .gnh-hero-pill-professional{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}\r\n        .gnh-hero-pill-elite{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}\r\n        .gnh-gallery-filter-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:14px;padding:12px 0 18px;margin-bottom:12px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}\r\n        .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px}\r\n        \/* Reset external tabs framework defaults to prevent overlap\/float behavior *\/\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar.et_pb_tabs{border:0;box-shadow:none;background:transparent}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls li{float:none !important;position:static !important;list-style:none !important;margin:0 !important;padding:0 !important;width:auto !important;clear:none !important}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:before,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:after{content:none !important;display:none !important}\r\n        \/* Shortcode-only: render icons inline at the left of the label as pill buttons *\/\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:inline-flex;flex:0 0 auto}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e5e9ef;background:#fff;color:#101b42;font-weight:700;min-height:42px;white-space:nowrap;line-height:1}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;inset:auto !important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;margin-right:8px;flex:0 0 auto;color:inherit;vertical-align:middle}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon svg{display:block;width:18px;height:18px;stroke:currentColor}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip.gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-filter-divider{width:1px;align-self:stretch;min-height:34px;background:#dbe3ef;flex:0 0 1px}\r\n        .gnh-style-filter-wrap{position:relative;flex:0 0 auto}\r\n        .gnh-filter-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:12px;font-weight:600;cursor:pointer;appearance:none}\r\n        .gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-style-caret{margin-left:8px;font-size:11px;opacity:.75}\r\n        .gnh-style-menu{position:absolute;top:44px;left:0;z-index:20;min-width:280px;max-width:340px;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.12);padding:10px}\r\n        .gnh-style-search{width:100%;padding:8px 10px;border:1px solid #dbe3ef;border-radius:8px;font-size:13px;margin-bottom:8px}\r\n        .gnh-style-options{max-height:220px;overflow:auto;padding-right:2px}\r\n        .gnh-style-option{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#1f2937;font-size:13px;cursor:pointer}\r\n        .gnh-style-option-count{margin-left:auto;color:#64748b;font-size:12px}\r\n        .gnh-style-actions{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}\r\n        .gnh-style-clear{border:0;background:transparent;color:#2563eb;font-weight:600;font-size:12px;cursor:pointer}\r\n        .gnh-style-empty{margin:6px 2px;color:#64748b;font-size:12px}\r\n        .gnh-active-style-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n        .gnh-active-style-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8eefc;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600}\r\n        .gnh-active-style-pill button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}\r\n        .gnh-selected-filter-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}\r\n        .gnh-selected-filter-pill-foundation{background:#f0fdf4;color:#15803d;border-color:#d1f6d7}\r\n        .gnh-selected-filter-pill-professional{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}\r\n        .gnh-selected-filter-pill-elite{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-namecard-tier{margin-bottom:56px}\r\n        .gnh-namecard-section-inner{max-width:1320px;margin:0 auto;border-radius:24px}\r\n        .gnh-tier-foundation .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-professional .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-elite .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-namecard-tier-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}\r\n        .gnh-namecard-tier-meta{display:flex;align-items:center;gap:12px}\r\n        \/* Keep header icon in normal flow even when parent containers use .gnh-tier-tabs styles *\/\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-icon{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:flex-start}\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-title-wrap{display:flex;flex-direction:column;justify-content:flex-start}\r\n        .gnh-tier-icon{width:var(--gnh-tier-icon-size);height:var(--gnh-tier-icon-size);min-width:var(--gnh-tier-icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0f172a;}\r\n        .gnh-tier-icon svg{display:block;width:var(--gnh-tier-icon-svg-size);height:var(--gnh-tier-icon-svg-size);stroke:currentColor}\r\n        .gnh-tier-title-wrap .gnh-namecard-tier-title{margin:0;font-size:25px;line-height:1;letter-spacing:-0.01em;font-weight:700;color:#0f172a}\r\n        .gnh-tier-desc{color:#64748B;font-size:15px;font-weight:400}\r\n        .gnh-tier-right{display:flex;flex-direction:row;align-items:center;gap:8px}\r\n        .gnh-tier-count{font-weight:700;color:#0f172a;font-size:13px;text-transform:none;letter-spacing:0;background:#ffffff;border:1px solid #dbe3ef;padding:6px 12px;border-radius:12px;min-width:86px;text-align:center;white-space:nowrap;word-break:keep-all;flex:0 0 auto}\r\n        .gnh-namecard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px;align-items:stretch}\r\n        .gnh-namecard-card{display:flex;flex-direction:column;gap:20px;border:1px solid #E8EDF5;border-radius:20px;padding:24px;background:#fff;align-items:stretch;box-shadow:0 12px 32px rgba(15,23,42,.06);min-height:250px;transition:transform 250ms ease,box-shadow 250ms ease}\r\n        .gnh-namecard-card:hover,.gnh-namecard-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}\r\n        .gnh-hidden-template{display:none}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-namecard-card.gnh-hidden-template{display:flex}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-tier-footer{display:none}\r\n        .gnh-namecard-left{display:flex;align-items:center;justify-content:center;width:100%}\r\n        .gnh-phone-preview{position:relative;z-index:0;overflow:visible}\r\n        .gnh-template-readiness-phone{position:relative;border-radius:14px;padding:5px;background:#0f172a;height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;width:100%;min-height:200px;overflow:hidden}\r\n        .gnh-namecard-iframe{width:84%;height:86%;border:0;border-radius:10px;background:#fff;max-width:340px;transform-origin:center center;transition:transform 200ms ease;position:relative;z-index:10}\r\n        .gnh-namecard-right{min-width:0;display:flex;flex-direction:column;justify-content:space-between;width:100%}\r\n        .gnh-namecard-name{margin:0 0 8px;font-size:22px;line-height:1.15;color:#0F172A;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-preview-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;background:#e2e8f0;color:#334155}\r\n        .gnh-preview-badge-overlay{position:absolute;top:-10px;left:14px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:80;box-shadow:0 6px 14px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.65);pointer-events:none}\r\n        .gnh-namecard-styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}\r\n        .gnh-style-pill{background:#F8FAFC;color:#1e293b;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;height:auto}\r\n        .gnh-namecard-desc{color:#64748B;margin:0 0 10px;font-size:15px;line-height:1.6}\r\n        .gnh-desc-text.gnh-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-desc-toggle{border:0;background:transparent;color:#2563eb;font-weight:700;padding:0 0;font-size:13px;cursor:pointer;display:inline-block;margin-left:8px;vertical-align:middle}\r\n        .gnh-template-tier-pill{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#f0fdf4;color:#15803d;margin-bottom:10px}\r\n        .gnh-namecard-actions{display:flex;flex-direction:column;gap:12px}\r\n        .gnh-namecard-preview.button,.gnh-namecard-choose.button{height:42px;line-height:40px;padding:0 16px;font-size:14px;border-radius:10px;width:100%;box-sizing:border-box}\r\n        .gnh-namecard-preview.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;background:#fff;border:1px solid #dbe3ef;color:#1f2937;font-weight:500;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04)}\r\n        .gnh-namecard-preview.button:hover,.gnh-namecard-preview.button:focus{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}\r\n        .gnh-namecard-choose.button{background:#22c55e;border-color:#22c55e;color:#fff;display:none !important}\r\n        .gnh-tier-view-all{margin-left:8px;font-weight:600}\r\n        .gnh-namecard-preview svg{width:18px;height:18px;display:block;flex:0 0 auto}\r\n        .gnh-tier-foundation .gnh-namecard-tier-title{color:#16a34a}\r\n        .gnh-tier-foundation .gnh-tier-icon{color:#16a34a;border-color:#bbf7d0}\r\n        .gnh-tier-foundation .gnh-preview-badge{background:#dcfce7;color:#15803d}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button{background:#16a34a;border-color:#16a34a;color:#fff}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button:hover,.gnh-tier-foundation .gnh-namecard-preview.button:focus{background:#14532d;border-color:#14532d;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-tier-title{color:#2563eb}\r\n        .gnh-tier-professional .gnh-tier-icon{color:#2563eb;border-color:#bfdbfe}\r\n        .gnh-tier-professional .gnh-preview-badge{background:#dbeafe;color:#1d4ed8}\r\n        .gnh-tier-professional .gnh-namecard-preview.button{background:#2563eb;border-color:#2563eb;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-preview.button:hover,.gnh-tier-professional .gnh-namecard-preview.button:focus{background:#1f56d1;border-color:#1f56d1;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-tier-title{color:#7c3aed}\r\n        .gnh-tier-elite .gnh-tier-icon{color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-tier-elite .gnh-preview-badge{background:#ede9fe;color:#6d28d9}\r\n        .gnh-tier-elite .gnh-namecard-preview.button{background:#7c3aed;border-color:#7c3aed;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-preview.button:hover,.gnh-tier-elite .gnh-namecard-preview.button:focus{background:#6826d6;border-color:#6826d6;color:#fff}\r\n        @media (max-width:1280px){\r\n            .gnh-namecard-card{gap:18px}\r\n        }\r\n        @media (max-width:1024px){\r\n            .gnh-gallery-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0 14px}\r\n            .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}\r\n            .gnh-tier-filter-group li{flex:0 0 auto}\r\n            .gnh-tier-filter-group .gnh-filter-chip{flex:0 0 auto;white-space:nowrap}\r\n            .gnh-style-filter-wrap{position:static;width:100%}\r\n            .gnh-filter-chip{justify-content:center;min-height:38px}\r\n            .gnh-style-toggle{width:100%;justify-content:space-between}\r\n            .gnh-filter-divider{display:none}\r\n            .gnh-style-menu{position:static;top:auto;left:auto;right:auto;z-index:1;width:100%;min-width:0;max-width:none;margin-top:8px}\r\n            .gnh-style-options{max-height:180px}\r\n            \/* Tablet: keep horizontal layout but reduce spacing *\/\r\n            .gnh-namecard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\r\n            .gnh-namecard-card{gap:16px}\r\n            .gnh-template-readiness-phone{height:160px;min-height:160px}\r\n            .gnh-namecard-iframe{height:150px}\r\n            \/* Single-tier header: keep controls inline and avoid count wrapping *\/\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap;align-items:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-filter-wrap{width:auto}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-toggle{width:auto;min-width:0;justify-content:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n        }\r\n        @media (max-width:640px){\r\n            .gnh-namecard-gallery{padding:18px 14px}\r\n            .gnh-gallery-filter-bar{gap:12px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:block;min-width:0}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{width:100%;min-width:0;padding:8px 10px;font-size:14px;gap:8px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{margin-right:4px;width:22px;height:22px}\r\n            .gnh-namecard-hero-title{font-size:28px}\r\n            .gnh-namecard-grid{grid-template-columns:1fr;gap:28px}\r\n            .gnh-namecard-card{min-height:unset;padding:16px;border-radius:14px}\r\n            .gnh-template-readiness-phone{height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            \/* Phone preview scale on card hover *\/\r\n            .gnh-namecard-card:hover .gnh-namecard-iframe{transform:scale(1.03)}\r\n            \/* Buttons transition *\/\r\n            .gnh-namecard-preview.button,.gnh-namecard-choose.button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}\r\n            .gnh-namecard-card{display:flex;flex-direction:column;align-items:stretch}\r\n            .gnh-namecard-left{flex:0 0 auto;margin:0 auto}\r\n            .gnh-template-readiness-phone{margin:0 auto;height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            .gnh-namecard-right{padding-top:10px}\r\n            .gnh-namecard-tier-header{align-items:flex-start;gap:10px;flex-direction:column}\r\n            .gnh-tier-right{align-items:flex-start;flex-direction:row;gap:8px}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n            .gnh-tier-icon{width:40px;height:40px;min-width:40px}\r\n            .gnh-tier-icon svg{width:20px;height:20px}\r\n        }\r\n        \/* When gallery is rendered as a single tier via shortcode, visually disable top-tier chips *\/\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-tier-filter-group .gnh-filter-chip{opacity:.6;cursor:default;pointer-events:none}\r\n          \/* In single-tier mode, align the tier meta and header to the top so icon sits next to the heading.\r\n              Use stronger selectors and align-self to avoid interference when the shortcode is placed inside\r\n              external tab containers that may also use the `gnh-tier-tabs` class. *\/\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-header{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta .gnh-tier-icon{align-self:flex-start !important;margin-top:2px}\r\n        @media (max-width:420px){\r\n            .gnh-tier-filter-group{gap:6px}\r\n        }\r\n\r\n        \/* Phone preview CSS moved to site global snippet; removed from inline styles. *\/\r\n\r\n        .gnh-feature-list{list-style:none!important;margin:24px 0 0!important;padding:0!important}\r\n        .gnh-feature-list li{position:relative;margin:0 0 16px!important;padding:0 0 0 32px!important;color:#16254a;font-size:16px;font-weight:500;line-height:1.45}\r\n        .gnh-feature-list li::marker{content:\"\"}\r\n        .gnh-feature-list li::before{content:\"\u2713\";position:absolute;left:0;top:.1em;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;color:#18a866;font-size:12px;font-weight:800;background:transparent;border:1.8px solid #18a866;border-radius:50%}\r\n        .gnh-feature-list li:last-child{margin-bottom:0!important}\r\n        @media (max-width:980px){.gnh-feature-list li{margin-bottom:14px!important;padding-left:30px!important;font-size:15px}}\r\n        @media (max-width:767px){.gnh-feature-list{margin-top:20px!important}.gnh-feature-list li{margin-bottom:13px!important;padding-left:28px!important;font-size:14px}.gnh-feature-list li::before{width:17px;height:17px;font-size:11px}}\r\n        \/* Single-tier mode: collapse outer frame and top filter, make inner section full width *\/\r\n        .gnh-namecard-gallery.gnh-single-tier{padding:0;background:transparent;border:0;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-gallery-filter-bar{display:none}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-section-inner{max-width:100%;margin:0 auto;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier{margin-bottom:36px}\r\n    <\/style><script>\r\n(function(){\r\n        function syncPhonePreviewScale(scope){\r\n            var scanRoot = scope || rootEl || document;\r\n            var roots = Array.prototype.slice.call(scanRoot.querySelectorAll('.gnh-phone-screen'));\r\n            roots.forEach(function(root){\r\n                if (!root) return;\r\n                var iframe = root.querySelector('iframe');\r\n                if (!iframe) return;\r\n\r\n                \/\/ Match native card viewport ratio (380x730) without distortion.\r\n                var nativeW = 380;\r\n                var nativeH = 730;\r\n                var boxW = root.clientWidth || 0;\r\n                var boxH = root.clientHeight || 0;\r\n                if (boxW < 1 || boxH < 1) return;\r\n\r\n                \/\/ Contain fit: scale the preview so the whole phone viewport fits inside the frame\r\n                \/\/ (prefer shrinking instead of cropping) and center it within the shell.\r\n                var scale = Math.min(boxW \/ nativeW, boxH \/ nativeH, 1);\r\n                iframe.style.transform = 'scale(' + scale + ')';\r\n                iframe.style.transformOrigin = 'top left';\r\n\r\n                var scaledW = nativeW * scale;\r\n                var scaledH = nativeH * scale;\r\n                \/\/ Center the scaled iframe within the available box area\r\n                iframe.style.left = Math.max(0, ((boxW - scaledW) \/ 2)) + 'px';\r\n                iframe.style.top = Math.max(0, ((boxH - scaledH) \/ 2)) + 'px';\r\n            });\r\n        }\r\n\r\n        \/\/ Scope all behavior to this specific gallery instance so multiple shortcodes\r\n        \/\/ on the same page do not interfere with each other.\r\n        var scriptEl = document.currentScript;\r\n        var rootEl = scriptEl ? scriptEl.previousElementSibling : null;\r\n        if (!rootEl || !rootEl.classList || !rootEl.classList.contains('gnh-namecard-gallery')) {\r\n            rootEl = scriptEl && scriptEl.parentElement ? scriptEl.parentElement.querySelector('.gnh-namecard-gallery') : document.querySelector('.gnh-namecard-gallery');\r\n        }\r\n        if (!rootEl) return;\r\n\r\n        function qs(sel, ctx){ return (ctx||rootEl||document).querySelector(sel); }\r\n        function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||rootEl||document).querySelectorAll(sel)); }\r\n\r\n        var state = {\r\n            tier: (function(){\r\n                var t = String(rootEl.getAttribute('data-initial-tier') || 'all').toLowerCase();\r\n                if (['foundation','professional','elite','all'].indexOf(t) === -1) t = 'all';\r\n                return t;\r\n            })(),\r\n            styles: []\r\n        };\r\n        \/\/ If the gallery was initialized with a specific tier (shortcode attribute),\r\n        \/\/ lock the tier so filter chips cannot change the displayed tier.\r\n        var tierLocked = (state.tier && state.tier !== 'all');\r\n        var initialTier = state.tier;\r\n\r\n        function normalize(v){ return String(v || '').toLowerCase(); }\r\n\r\n        function getSelectedStyleSet(){\r\n            var set = {};\r\n            state.styles.forEach(function(s){ set[s] = true; });\r\n            return set;\r\n        }\r\n\r\n        function cardMatchesStyles(card, selectedSet){\r\n            if (!state.styles.length) return true;\r\n            var raw = normalize(card.getAttribute('data-styles') || '');\r\n            if (!raw) return false;\r\n            var tokens = raw.split(',').map(function(x){ return normalize(x); }).filter(Boolean);\r\n            for (var i = 0; i < state.styles.length; i++) {\r\n                if (tokens.indexOf(state.styles[i]) !== -1) return true;\r\n            }\r\n            return false;\r\n        }\r\n\r\n        function renderActiveStylePills(){\r\n            \/\/ Update all global pill containers (we keep one at top-level)\r\n            var wraps = qsa('.gnh-active-style-pills', rootEl);\r\n            if (!wraps || !wraps.length) return;\r\n            wraps.forEach(function(wrap){\r\n                wrap.innerHTML = '';\r\n                if (!state.styles.length) { wrap.hidden = true; return; }\r\n                var checks = qsa('.gnh-style-check', rootEl);\r\n                var labelMap = {};\r\n                checks.forEach(function(check){ labelMap[normalize(check.value)] = String(check.getAttribute('data-style-label') || check.value); });\r\n                state.styles.forEach(function(token){\r\n                    var pill = document.createElement('span');\r\n                    pill.className = 'gnh-active-style-pill';\r\n                    pill.setAttribute('data-style-token', token);\r\n                    pill.innerHTML = '<span>' + (labelMap[token] || token) + '<\/span><button type=\"button\" aria-label=\"Remove style\">&times;<\/button>';\r\n                    wrap.appendChild(pill);\r\n                });\r\n                wrap.hidden = false;\r\n            });\r\n        }\r\n\r\n        function updateDescToggles(scope){\r\n            \/\/ Show \"More\" toggle only when description is actually truncated.\r\n            var scanRoot = scope || rootEl;\r\n            qsa('.gnh-namecard-card', scanRoot).forEach(function(card){\r\n                \/\/ Skip hidden cards; measure when they become visible.\r\n                if (card.offsetParent === null) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                var btn = card.querySelector('.gnh-desc-toggle');\r\n                if (!descText || !btn) return;\r\n                \/\/ Ensure collapsed state for measurement\r\n                var wasCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                descText.classList.add('gnh-desc-collapsed');\r\n                \/\/ Reliable overflow check: compare clamped height vs natural content height\r\n                \/\/ using a temporary clone with clamp removed.\r\n                var clampedHeight = descText.getBoundingClientRect().height;\r\n                var naturalHeight = clampedHeight;\r\n                var clone = descText.cloneNode(true);\r\n                clone.classList.remove('gnh-desc-collapsed');\r\n                clone.style.position = 'absolute';\r\n                clone.style.visibility = 'hidden';\r\n                clone.style.pointerEvents = 'none';\r\n                clone.style.height = 'auto';\r\n                clone.style.maxHeight = 'none';\r\n                clone.style.overflow = 'visible';\r\n                clone.style.display = 'block';\r\n                clone.style.whiteSpace = 'normal';\r\n                clone.style.webkitLineClamp = 'unset';\r\n                clone.style.WebkitLineClamp = 'unset';\r\n                clone.style.width = Math.max(1, descText.getBoundingClientRect().width) + 'px';\r\n                descText.parentNode.appendChild(clone);\r\n                naturalHeight = clone.getBoundingClientRect().height;\r\n                clone.parentNode.removeChild(clone);\r\n\r\n                var isOverflowing = naturalHeight > clampedHeight + 1;\r\n                if (isOverflowing) {\r\n                    btn.style.display = 'inline-block';\r\n                    btn.setAttribute('aria-hidden','false');\r\n                } else {\r\n                    btn.style.display = 'none';\r\n                    btn.setAttribute('aria-hidden','true');\r\n                    \/\/ ensure aria-expanded is false when hidden\r\n                    btn.setAttribute('aria-expanded','false');\r\n                    \/\/ also ensure description stays collapsed\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                }\r\n                \/\/ restore previous expanded state if it was expanded\r\n                if (!wasCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    btn.setAttribute('aria-expanded','true');\r\n                    btn.textContent = btn.getAttribute('data-less') || 'Less';\r\n                } else {\r\n                    btn.textContent = btn.getAttribute('data-more') || 'More';\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateStyleToggleLabel(){\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            if (!btns || !btns.length) return;\r\n            var base = 'All Styles';\r\n            btns.forEach(function(btn){\r\n                if (!state.styles.length) {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = base + ' ';\r\n                } else {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = state.styles.length + ' style' + (state.styles.length > 1 ? 's' : '') + ' selected ';\r\n                }\r\n            });\r\n        }\r\n\r\n        function applyFilters(){\r\n            var gallery = rootEl;\r\n            var selectedSet = getSelectedStyleSet();\r\n            var currentTier = tierLocked ? initialTier : state.tier;\r\n            var anyVisible = false;\r\n\r\n            qsa('.gnh-namecard-tier', gallery).forEach(function(section){\r\n                var sectionTier = normalize(section.getAttribute('data-tier') || '');\r\n                var tierMatch = (currentTier === 'all' || currentTier === '' || sectionTier === currentTier);\r\n\r\n                var visibleCards = 0;\r\n                qsa('.gnh-namecard-card', section).forEach(function(card){\r\n                    var styleMatch = cardMatchesStyles(card, selectedSet);\r\n                    var show = tierMatch && styleMatch;\r\n                    card.style.display = show ? 'flex' : 'none';\r\n                    if (show) visibleCards++;\r\n                });\r\n\r\n                \/\/ Always show the section header when the tier filter matches so\r\n                \/\/ the style filter and template count remain visible. Hide the\r\n                \/\/ card grid when no cards match the selected styles.\r\n                var showSection = tierMatch;\r\n                section.style.display = showSection ? '' : 'none';\r\n                var grid = section.querySelector('.gnh-namecard-grid');\r\n                if (grid) {\r\n                    grid.style.display = (visibleCards > 0) ? '' : 'none';\r\n                }\r\n                if (visibleCards > 0) anyVisible = true;\r\n            });\r\n\r\n            qsa('.gnh-filter-chip[data-filter]', gallery).forEach(function(chip){\r\n                var chipFilter = normalize(chip.getAttribute('data-filter') || '');\r\n                if (chipFilter === currentTier) chip.classList.add('gnh-filter-chip-active');\r\n                else chip.classList.remove('gnh-filter-chip-active');\r\n            });\r\n\r\n            if (gallery) {\r\n                if (state.styles.length) gallery.classList.add('gnh-filter-active');\r\n                else gallery.classList.remove('gnh-filter-active');\r\n            }\r\n\r\n            renderActiveStylePills();\r\n            updateStyleToggleLabel();\r\n            updateDescToggles();\r\n            syncPhonePreviewScale();\r\n        }\r\n\r\n        function toggleStyleDropdown(contextBtn, forceOpen){\r\n            \/\/ If contextBtn is provided, toggle the menu within its filter-wrap. If not provided, operate on all menus.\r\n            if (contextBtn) {\r\n                var wrap = contextBtn.closest('.gnh-style-filter-wrap');\r\n                if (!wrap) return;\r\n                var menu = wrap.querySelector('.gnh-style-menu');\r\n                var btn = contextBtn;\r\n                if (!menu || !btn) return;\r\n                var open = typeof forceOpen === 'boolean' ? forceOpen : menu.hasAttribute('hidden');\r\n                if (open) {\r\n                    menu.removeAttribute('hidden');\r\n                    btn.setAttribute('aria-expanded', 'true');\r\n                    var input = menu.querySelector('.gnh-style-search');\r\n                    if (input) input.focus();\r\n                } else {\r\n                    menu.setAttribute('hidden', 'hidden');\r\n                    btn.setAttribute('aria-expanded', 'false');\r\n                }\r\n                return;\r\n            }\r\n            \/\/ No context: close all menus when requested\r\n            var menus = qsa('.gnh-style-menu', rootEl);\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            menus.forEach(function(m){ m.setAttribute('hidden', 'hidden'); });\r\n            btns.forEach(function(b){ b.setAttribute('aria-expanded', 'false'); });\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n        } else {\r\n            syncPhonePreviewScale(rootEl);\r\n            updateDescToggles();\r\n        }\r\n        window.addEventListener('resize', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n\r\n        \/\/ Attach direct click handlers as a fallback for style toggles\r\n        function attachStyleToggleHandlers(){\r\n            qsa('.gnh-style-toggle', rootEl).forEach(function(btn){\r\n                \/\/ avoid double-binding\r\n                if (btn.__gnhToggleBound) return;\r\n                btn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); toggleStyleDropdown(btn); });\r\n                btn.__gnhToggleBound = true;\r\n            });\r\n        }\r\n        \/\/ Run once now and also after DOM ready just in case\r\n        attachStyleToggleHandlers();\r\n\r\n        document.addEventListener('click', function(e){\r\n            if (!rootEl.contains(e.target)) {\r\n                toggleStyleDropdown(false);\r\n                return;\r\n            }\r\n\r\n            var activePillRemove = e.target.closest('.gnh-active-style-pill button');\r\n            if (activePillRemove) {\r\n                e.preventDefault();\r\n                var pill = activePillRemove.closest('.gnh-active-style-pill');\r\n                if (pill) {\r\n                    var token = normalize(pill.getAttribute('data-style-token') || '');\r\n                    state.styles = state.styles.filter(function(x){ return x !== token; });\r\n                    qsa('.gnh-style-check', rootEl).forEach(function(check){\r\n                        if (normalize(check.value) === token) check.checked = false;\r\n                    });\r\n                    applyFilters();\r\n                }\r\n                return;\r\n            }\r\n\r\n            var clearBtn = e.target.closest('.gnh-style-clear');\r\n            if (clearBtn) {\r\n                e.preventDefault();\r\n                state.styles = [];\r\n                qsa('.gnh-style-check', rootEl).forEach(function(check){ check.checked = false; });\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var styleToggle = e.target.closest('.gnh-style-toggle');\r\n            if (styleToggle) {\r\n                e.preventDefault();\r\n                toggleStyleDropdown(styleToggle);\r\n                return;\r\n            }\r\n\r\n            var filterBtn = e.target.closest('.gnh-filter-chip[data-filter], .gnh-hero-pill');\r\n            if (filterBtn) {\r\n                e.preventDefault();\r\n                if (tierLocked) {\r\n                    \/\/ ignore attempts to change tier when shortcode specified a tier\r\n                    return;\r\n                }\r\n                var filter = String(filterBtn.getAttribute('data-filter') || 'all').toLowerCase();\r\n                state.tier = filter;\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var descToggleBtn = e.target.closest('.gnh-desc-toggle');\r\n            if (descToggleBtn) {\r\n                e.preventDefault();\r\n                var card = descToggleBtn.closest('.gnh-namecard-card');\r\n                if (!card) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                if (!descText) return;\r\n                var isCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                var more = descToggleBtn.getAttribute('data-more') || 'More';\r\n                var less = descToggleBtn.getAttribute('data-less') || 'Less';\r\n                if (isCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = less;\r\n                    descToggleBtn.setAttribute('aria-expanded','true');\r\n                } else {\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = more;\r\n                    descToggleBtn.setAttribute('aria-expanded','false');\r\n                }\r\n                \/\/ Adjust phone preview sizing if the card height changed\r\n                syncPhonePreviewScale(card);\r\n                return;\r\n            }\r\n\r\n            \/\/ Close dropdown when clicking outside it.\r\n            if (!e.target.closest('.gnh-style-filter-wrap')) {\r\n                toggleStyleDropdown(false);\r\n            }\r\n\r\n            var t = e.target.closest('.gnh-tier-view-all');\r\n            if (!t) return;\r\n            e.preventDefault();\r\n            var section = t.closest('.gnh-namecard-tier');\r\n            if (!section) return;\r\n            var grid = section.querySelector('.gnh-namecard-grid');\r\n            if (!grid) return;\r\n            var isExpanded = section.classList.contains('gnh-expanded');\r\n            \/\/ compute collapsed height (first 3 items)\r\n            var items = grid.querySelectorAll('.gnh-namecard-card');\r\n            var collapsedH = 0;\r\n            for (var i=0;i<Math.min(3, items.length); i++){\r\n                collapsedH += items[i].offsetHeight + parseFloat(getComputedStyle(items[i]).marginBottom||0);\r\n            }\r\n            \/\/ maintain scroll position anchor\r\n            var scrollY = window.scrollY || window.pageYOffset;\r\n            if (!isExpanded){\r\n                \/\/ expand: unhide extras first so height can be measured\r\n                qsa('.gnh-hidden-template', grid).forEach(function(el){ el.classList.remove('gnh-hidden-template'); });\r\n                updateDescToggles(section);\r\n                syncPhonePreviewScale(section);\r\n                \/\/ set starting maxHeight to collapsedH then animate to full\r\n                grid.style.maxHeight = collapsedH + 'px';\r\n                var fullH = grid.scrollHeight;\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = fullH + 'px';\r\n                });\r\n                section.classList.add('gnh-expanded');\r\n                t.textContent = 'Show Less';\r\n                grid.addEventListener('transitionend', function handler(){ grid.style.maxHeight = ''; grid.style.transition = ''; grid.removeEventListener('transitionend', handler); });\r\n            } else {\r\n                \/\/ collapse: animate to collapsedH then hide extras\r\n                var curH = grid.scrollHeight;\r\n                grid.style.maxHeight = curH + 'px';\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = collapsedH + 'px';\r\n                });\r\n                grid.addEventListener('transitionend', function handler(){\r\n                    \/\/ hide items beyond 3\r\n                    var its = grid.querySelectorAll('.gnh-namecard-card');\r\n                    for (var j=3;j<its.length;j++){ its[j].classList.add('gnh-hidden-template'); }\r\n                    updateDescToggles(section);\r\n                    grid.style.maxHeight = '';\r\n                    grid.style.transition = '';\r\n                    grid.removeEventListener('transitionend', handler);\r\n                });\r\n                section.classList.remove('gnh-expanded');\r\n                var tier = t.getAttribute('data-tier') || '';\r\n                t.textContent = 'View All ' + (tier.charAt(0).toUpperCase() + tier.slice(1)) + ' Templates \u2192';\r\n            }\r\n            \/\/ restore scroll position to avoid jump\r\n            requestAnimationFrame(function(){ window.scrollTo(0, scrollY); });\r\n            setTimeout(function(){ syncPhonePreviewScale(section); }, 380);\r\n        });\r\n\r\n        document.addEventListener('change', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var check = e.target.closest('.gnh-style-check');\r\n            if (!check) return;\r\n            var token = normalize(check.value);\r\n            if (!token) return;\r\n            if (check.checked) {\r\n                if (state.styles.indexOf(token) === -1) state.styles.push(token);\r\n            } else {\r\n                state.styles = state.styles.filter(function(x){ return x !== token; });\r\n            }\r\n            \/\/ Ensure all checkboxes with same token are synced across tiers\r\n            qsa('.gnh-style-check', rootEl).forEach(function(c){ if (normalize(c.value) === token) c.checked = (state.styles.indexOf(token) !== -1); });\r\n            applyFilters();\r\n        });\r\n\r\n        document.addEventListener('input', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var input = e.target.closest('.gnh-style-search');\r\n            if (!input) return;\r\n            var q = normalize(input.value);\r\n            var menu = input.closest('.gnh-style-menu');\r\n            if (!menu) return;\r\n            var opts = Array.prototype.slice.call(menu.querySelectorAll('.gnh-style-option'));\r\n            opts.forEach(function(opt){\r\n                var label = normalize(opt.textContent || '');\r\n                opt.style.display = (q === '' || label.indexOf(q) !== -1) ? '' : 'none';\r\n            });\r\n        });\r\n\r\n        applyFilters();\r\n    })();\r\n\r\n    \/* Load Lucide icons dynamically and convert placeholders into SVG *\/\r\n    (function(){\r\n        if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function'){\r\n            try{ window.lucide.createIcons(); }catch(e){}\r\n            return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = 'https:\/\/unpkg.com\/lucide@latest\/dist\/lucide.min.js';\r\n        s.async = true;\r\n        s.onload = function(){ try{ if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function') window.lucide.createIcons(); }catch(e){} };\r\n        document.head.appendChild(s);\r\n    })();\r\n<\/script>[\/et_pb_tab][et_pb_tab title=&#8221;Professional&#8221; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<div class=\"gnh-namecard-gallery gnh-single-tier\" data-initial-tier=\"professional\"><div class=\"gnh-gallery-filter-bar gnh-tier-tabs et_pb_tabs\"><ul class=\"gnh-tier-filter-group et_pb_tabs_controls\"><li><button type=\"button\" class=\"gnh-filter-chip gnh-filter-chip-active\" data-filter=\"all\">All Templates<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"foundation\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Foundation<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"professional\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Professional<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"elite\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Elite<\/button><\/li><\/ul><span class=\"gnh-filter-divider\" aria-hidden=\"true\"><\/span><\/div><section class=\"gnh-namecard-tier gnh-tier-professional\" data-tier=\"professional\"><div class=\"gnh-namecard-section-inner\"><div class=\"gnh-namecard-tier-header\"><div class=\"gnh-namecard-tier-meta\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i><div class=\"gnh-tier-title-wrap\"><h2 class=\"gnh-namecard-tier-title\">Professional<\/h2><p class=\"gnh-tier-desc\">Designed to convert visitors into real enquiries.<\/p><\/div><\/div><div class=\"gnh-tier-right\"><div class=\"gnh-style-filter-wrap\"><button type=\"button\" class=\"gnh-filter-chip gnh-style-toggle\" aria-expanded=\"false\" aria-controls=\"gnh-style-menu-professional\">All Styles <span class=\"gnh-style-caret\" aria-hidden=\"true\">&#9662;<\/span><\/button><div id=\"gnh-style-menu-professional\" class=\"gnh-style-menu\" hidden><input type=\"search\" class=\"gnh-style-search\" placeholder=\"Search styles...\" aria-label=\"Search styles\"><div class=\"gnh-style-options\"><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"blue-theme\" data-style-label=\"Blue Theme\"><span class=\"gnh-style-option-label\">Blue Theme<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"corporate\" data-style-label=\"Corporate\"><span class=\"gnh-style-option-label\">Corporate<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"service-focused\" data-style-label=\"Service-Focused\"><span class=\"gnh-style-option-label\">Service-Focused<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><\/div><div class=\"gnh-style-actions\"><button type=\"button\" class=\"gnh-style-clear\">Clear all<\/button><\/div><\/div><\/div><div class=\"gnh-tier-count\">1 Templates<\/div><\/div><\/div><div class=\"gnh-active-style-pills\" hidden><\/div><div class=\"gnh-namecard-grid\"><article class=\"gnh-namecard-card\" data-template-id=\"9\" data-idx=\"0\" data-styles=\"corporate,blue-theme,service-focused\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><span class=\"gnh-preview-badge gnh-preview-badge-trending gnh-preview-badge-overlay\">TRENDING<\/span><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/dianatan\/\" title=\"Advisor Connect Pro Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">Advisor Connect Pro<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">Corporate<\/span><span class=\"gnh-style-pill\">Blue Theme<\/span><span class=\"gnh-style-pill\">Service-Focused<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">A professional template designed to showcase your expertise while making it easy for prospects to learn about your services and connect with you.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/dianatan\/\" aria-label=\"Live preview: Advisor Connect Pro\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><\/div><\/div><\/section><\/div><style>\r\n        .gnh-namecard-gallery{--gnh-tier-icon-size:44px;--gnh-tier-icon-svg-size:22px;padding:24px 20px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e2e8f0;border-radius:20px}\r\n        .gnh-namecard-hero{margin-bottom:20px}\r\n        .gnh-namecard-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6366f1;margin-bottom:10px}\r\n        .gnh-namecard-hero-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:#0f172a;letter-spacing:-0.01em}\r\n        .gnh-namecard-hero-sub{margin:0;max-width:760px;color:#475467;font-size:15px;line-height:1.7}\r\n        .gnh-hero-tier-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}\r\n        .gnh-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;appearance:none}\r\n        .gnh-hero-pill-foundation{border-color:#b7e4c7;color:#15803d;background:#f0fdf4}\r\n        .gnh-hero-pill-professional{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}\r\n        .gnh-hero-pill-elite{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}\r\n        .gnh-gallery-filter-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:14px;padding:12px 0 18px;margin-bottom:12px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}\r\n        .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px}\r\n        \/* Reset external tabs framework defaults to prevent overlap\/float behavior *\/\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar.et_pb_tabs{border:0;box-shadow:none;background:transparent}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls li{float:none !important;position:static !important;list-style:none !important;margin:0 !important;padding:0 !important;width:auto !important;clear:none !important}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:before,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:after{content:none !important;display:none !important}\r\n        \/* Shortcode-only: render icons inline at the left of the label as pill buttons *\/\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:inline-flex;flex:0 0 auto}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e5e9ef;background:#fff;color:#101b42;font-weight:700;min-height:42px;white-space:nowrap;line-height:1}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;inset:auto !important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;margin-right:8px;flex:0 0 auto;color:inherit;vertical-align:middle}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon svg{display:block;width:18px;height:18px;stroke:currentColor}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip.gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-filter-divider{width:1px;align-self:stretch;min-height:34px;background:#dbe3ef;flex:0 0 1px}\r\n        .gnh-style-filter-wrap{position:relative;flex:0 0 auto}\r\n        .gnh-filter-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:12px;font-weight:600;cursor:pointer;appearance:none}\r\n        .gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-style-caret{margin-left:8px;font-size:11px;opacity:.75}\r\n        .gnh-style-menu{position:absolute;top:44px;left:0;z-index:20;min-width:280px;max-width:340px;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.12);padding:10px}\r\n        .gnh-style-search{width:100%;padding:8px 10px;border:1px solid #dbe3ef;border-radius:8px;font-size:13px;margin-bottom:8px}\r\n        .gnh-style-options{max-height:220px;overflow:auto;padding-right:2px}\r\n        .gnh-style-option{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#1f2937;font-size:13px;cursor:pointer}\r\n        .gnh-style-option-count{margin-left:auto;color:#64748b;font-size:12px}\r\n        .gnh-style-actions{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}\r\n        .gnh-style-clear{border:0;background:transparent;color:#2563eb;font-weight:600;font-size:12px;cursor:pointer}\r\n        .gnh-style-empty{margin:6px 2px;color:#64748b;font-size:12px}\r\n        .gnh-active-style-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n        .gnh-active-style-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8eefc;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600}\r\n        .gnh-active-style-pill button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}\r\n        .gnh-selected-filter-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}\r\n        .gnh-selected-filter-pill-foundation{background:#f0fdf4;color:#15803d;border-color:#d1f6d7}\r\n        .gnh-selected-filter-pill-professional{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}\r\n        .gnh-selected-filter-pill-elite{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-namecard-tier{margin-bottom:56px}\r\n        .gnh-namecard-section-inner{max-width:1320px;margin:0 auto;border-radius:24px}\r\n        .gnh-tier-foundation .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-professional .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-elite .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-namecard-tier-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}\r\n        .gnh-namecard-tier-meta{display:flex;align-items:center;gap:12px}\r\n        \/* Keep header icon in normal flow even when parent containers use .gnh-tier-tabs styles *\/\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-icon{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:flex-start}\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-title-wrap{display:flex;flex-direction:column;justify-content:flex-start}\r\n        .gnh-tier-icon{width:var(--gnh-tier-icon-size);height:var(--gnh-tier-icon-size);min-width:var(--gnh-tier-icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0f172a;}\r\n        .gnh-tier-icon svg{display:block;width:var(--gnh-tier-icon-svg-size);height:var(--gnh-tier-icon-svg-size);stroke:currentColor}\r\n        .gnh-tier-title-wrap .gnh-namecard-tier-title{margin:0;font-size:25px;line-height:1;letter-spacing:-0.01em;font-weight:700;color:#0f172a}\r\n        .gnh-tier-desc{color:#64748B;font-size:15px;font-weight:400}\r\n        .gnh-tier-right{display:flex;flex-direction:row;align-items:center;gap:8px}\r\n        .gnh-tier-count{font-weight:700;color:#0f172a;font-size:13px;text-transform:none;letter-spacing:0;background:#ffffff;border:1px solid #dbe3ef;padding:6px 12px;border-radius:12px;min-width:86px;text-align:center;white-space:nowrap;word-break:keep-all;flex:0 0 auto}\r\n        .gnh-namecard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px;align-items:stretch}\r\n        .gnh-namecard-card{display:flex;flex-direction:column;gap:20px;border:1px solid #E8EDF5;border-radius:20px;padding:24px;background:#fff;align-items:stretch;box-shadow:0 12px 32px rgba(15,23,42,.06);min-height:250px;transition:transform 250ms ease,box-shadow 250ms ease}\r\n        .gnh-namecard-card:hover,.gnh-namecard-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}\r\n        .gnh-hidden-template{display:none}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-namecard-card.gnh-hidden-template{display:flex}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-tier-footer{display:none}\r\n        .gnh-namecard-left{display:flex;align-items:center;justify-content:center;width:100%}\r\n        .gnh-phone-preview{position:relative;z-index:0;overflow:visible}\r\n        .gnh-template-readiness-phone{position:relative;border-radius:14px;padding:5px;background:#0f172a;height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;width:100%;min-height:200px;overflow:hidden}\r\n        .gnh-namecard-iframe{width:84%;height:86%;border:0;border-radius:10px;background:#fff;max-width:340px;transform-origin:center center;transition:transform 200ms ease;position:relative;z-index:10}\r\n        .gnh-namecard-right{min-width:0;display:flex;flex-direction:column;justify-content:space-between;width:100%}\r\n        .gnh-namecard-name{margin:0 0 8px;font-size:22px;line-height:1.15;color:#0F172A;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-preview-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;background:#e2e8f0;color:#334155}\r\n        .gnh-preview-badge-overlay{position:absolute;top:-10px;left:14px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:80;box-shadow:0 6px 14px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.65);pointer-events:none}\r\n        .gnh-namecard-styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}\r\n        .gnh-style-pill{background:#F8FAFC;color:#1e293b;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;height:auto}\r\n        .gnh-namecard-desc{color:#64748B;margin:0 0 10px;font-size:15px;line-height:1.6}\r\n        .gnh-desc-text.gnh-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-desc-toggle{border:0;background:transparent;color:#2563eb;font-weight:700;padding:0 0;font-size:13px;cursor:pointer;display:inline-block;margin-left:8px;vertical-align:middle}\r\n        .gnh-template-tier-pill{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#f0fdf4;color:#15803d;margin-bottom:10px}\r\n        .gnh-namecard-actions{display:flex;flex-direction:column;gap:12px}\r\n        .gnh-namecard-preview.button,.gnh-namecard-choose.button{height:42px;line-height:40px;padding:0 16px;font-size:14px;border-radius:10px;width:100%;box-sizing:border-box}\r\n        .gnh-namecard-preview.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;background:#fff;border:1px solid #dbe3ef;color:#1f2937;font-weight:500;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04)}\r\n        .gnh-namecard-preview.button:hover,.gnh-namecard-preview.button:focus{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}\r\n        .gnh-namecard-choose.button{background:#22c55e;border-color:#22c55e;color:#fff;display:none !important}\r\n        .gnh-tier-view-all{margin-left:8px;font-weight:600}\r\n        .gnh-namecard-preview svg{width:18px;height:18px;display:block;flex:0 0 auto}\r\n        .gnh-tier-foundation .gnh-namecard-tier-title{color:#16a34a}\r\n        .gnh-tier-foundation .gnh-tier-icon{color:#16a34a;border-color:#bbf7d0}\r\n        .gnh-tier-foundation .gnh-preview-badge{background:#dcfce7;color:#15803d}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button{background:#16a34a;border-color:#16a34a;color:#fff}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button:hover,.gnh-tier-foundation .gnh-namecard-preview.button:focus{background:#14532d;border-color:#14532d;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-tier-title{color:#2563eb}\r\n        .gnh-tier-professional .gnh-tier-icon{color:#2563eb;border-color:#bfdbfe}\r\n        .gnh-tier-professional .gnh-preview-badge{background:#dbeafe;color:#1d4ed8}\r\n        .gnh-tier-professional .gnh-namecard-preview.button{background:#2563eb;border-color:#2563eb;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-preview.button:hover,.gnh-tier-professional .gnh-namecard-preview.button:focus{background:#1f56d1;border-color:#1f56d1;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-tier-title{color:#7c3aed}\r\n        .gnh-tier-elite .gnh-tier-icon{color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-tier-elite .gnh-preview-badge{background:#ede9fe;color:#6d28d9}\r\n        .gnh-tier-elite .gnh-namecard-preview.button{background:#7c3aed;border-color:#7c3aed;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-preview.button:hover,.gnh-tier-elite .gnh-namecard-preview.button:focus{background:#6826d6;border-color:#6826d6;color:#fff}\r\n        @media (max-width:1280px){\r\n            .gnh-namecard-card{gap:18px}\r\n        }\r\n        @media (max-width:1024px){\r\n            .gnh-gallery-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0 14px}\r\n            .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}\r\n            .gnh-tier-filter-group li{flex:0 0 auto}\r\n            .gnh-tier-filter-group .gnh-filter-chip{flex:0 0 auto;white-space:nowrap}\r\n            .gnh-style-filter-wrap{position:static;width:100%}\r\n            .gnh-filter-chip{justify-content:center;min-height:38px}\r\n            .gnh-style-toggle{width:100%;justify-content:space-between}\r\n            .gnh-filter-divider{display:none}\r\n            .gnh-style-menu{position:static;top:auto;left:auto;right:auto;z-index:1;width:100%;min-width:0;max-width:none;margin-top:8px}\r\n            .gnh-style-options{max-height:180px}\r\n            \/* Tablet: keep horizontal layout but reduce spacing *\/\r\n            .gnh-namecard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\r\n            .gnh-namecard-card{gap:16px}\r\n            .gnh-template-readiness-phone{height:160px;min-height:160px}\r\n            .gnh-namecard-iframe{height:150px}\r\n            \/* Single-tier header: keep controls inline and avoid count wrapping *\/\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap;align-items:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-filter-wrap{width:auto}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-toggle{width:auto;min-width:0;justify-content:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n        }\r\n        @media (max-width:640px){\r\n            .gnh-namecard-gallery{padding:18px 14px}\r\n            .gnh-gallery-filter-bar{gap:12px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:block;min-width:0}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{width:100%;min-width:0;padding:8px 10px;font-size:14px;gap:8px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{margin-right:4px;width:22px;height:22px}\r\n            .gnh-namecard-hero-title{font-size:28px}\r\n            .gnh-namecard-grid{grid-template-columns:1fr;gap:28px}\r\n            .gnh-namecard-card{min-height:unset;padding:16px;border-radius:14px}\r\n            .gnh-template-readiness-phone{height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            \/* Phone preview scale on card hover *\/\r\n            .gnh-namecard-card:hover .gnh-namecard-iframe{transform:scale(1.03)}\r\n            \/* Buttons transition *\/\r\n            .gnh-namecard-preview.button,.gnh-namecard-choose.button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}\r\n            .gnh-namecard-card{display:flex;flex-direction:column;align-items:stretch}\r\n            .gnh-namecard-left{flex:0 0 auto;margin:0 auto}\r\n            .gnh-template-readiness-phone{margin:0 auto;height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            .gnh-namecard-right{padding-top:10px}\r\n            .gnh-namecard-tier-header{align-items:flex-start;gap:10px;flex-direction:column}\r\n            .gnh-tier-right{align-items:flex-start;flex-direction:row;gap:8px}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n            .gnh-tier-icon{width:40px;height:40px;min-width:40px}\r\n            .gnh-tier-icon svg{width:20px;height:20px}\r\n        }\r\n        \/* When gallery is rendered as a single tier via shortcode, visually disable top-tier chips *\/\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-tier-filter-group .gnh-filter-chip{opacity:.6;cursor:default;pointer-events:none}\r\n          \/* In single-tier mode, align the tier meta and header to the top so icon sits next to the heading.\r\n              Use stronger selectors and align-self to avoid interference when the shortcode is placed inside\r\n              external tab containers that may also use the `gnh-tier-tabs` class. *\/\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-header{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta .gnh-tier-icon{align-self:flex-start !important;margin-top:2px}\r\n        @media (max-width:420px){\r\n            .gnh-tier-filter-group{gap:6px}\r\n        }\r\n\r\n        \/* Phone preview CSS moved to site global snippet; removed from inline styles. *\/\r\n\r\n        .gnh-feature-list{list-style:none!important;margin:24px 0 0!important;padding:0!important}\r\n        .gnh-feature-list li{position:relative;margin:0 0 16px!important;padding:0 0 0 32px!important;color:#16254a;font-size:16px;font-weight:500;line-height:1.45}\r\n        .gnh-feature-list li::marker{content:\"\"}\r\n        .gnh-feature-list li::before{content:\"\u2713\";position:absolute;left:0;top:.1em;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;color:#18a866;font-size:12px;font-weight:800;background:transparent;border:1.8px solid #18a866;border-radius:50%}\r\n        .gnh-feature-list li:last-child{margin-bottom:0!important}\r\n        @media (max-width:980px){.gnh-feature-list li{margin-bottom:14px!important;padding-left:30px!important;font-size:15px}}\r\n        @media (max-width:767px){.gnh-feature-list{margin-top:20px!important}.gnh-feature-list li{margin-bottom:13px!important;padding-left:28px!important;font-size:14px}.gnh-feature-list li::before{width:17px;height:17px;font-size:11px}}\r\n        \/* Single-tier mode: collapse outer frame and top filter, make inner section full width *\/\r\n        .gnh-namecard-gallery.gnh-single-tier{padding:0;background:transparent;border:0;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-gallery-filter-bar{display:none}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-section-inner{max-width:100%;margin:0 auto;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier{margin-bottom:36px}\r\n    <\/style><script>\r\n(function(){\r\n        function syncPhonePreviewScale(scope){\r\n            var scanRoot = scope || rootEl || document;\r\n            var roots = Array.prototype.slice.call(scanRoot.querySelectorAll('.gnh-phone-screen'));\r\n            roots.forEach(function(root){\r\n                if (!root) return;\r\n                var iframe = root.querySelector('iframe');\r\n                if (!iframe) return;\r\n\r\n                \/\/ Match native card viewport ratio (380x730) without distortion.\r\n                var nativeW = 380;\r\n                var nativeH = 730;\r\n                var boxW = root.clientWidth || 0;\r\n                var boxH = root.clientHeight || 0;\r\n                if (boxW < 1 || boxH < 1) return;\r\n\r\n                \/\/ Contain fit: scale the preview so the whole phone viewport fits inside the frame\r\n                \/\/ (prefer shrinking instead of cropping) and center it within the shell.\r\n                var scale = Math.min(boxW \/ nativeW, boxH \/ nativeH, 1);\r\n                iframe.style.transform = 'scale(' + scale + ')';\r\n                iframe.style.transformOrigin = 'top left';\r\n\r\n                var scaledW = nativeW * scale;\r\n                var scaledH = nativeH * scale;\r\n                \/\/ Center the scaled iframe within the available box area\r\n                iframe.style.left = Math.max(0, ((boxW - scaledW) \/ 2)) + 'px';\r\n                iframe.style.top = Math.max(0, ((boxH - scaledH) \/ 2)) + 'px';\r\n            });\r\n        }\r\n\r\n        \/\/ Scope all behavior to this specific gallery instance so multiple shortcodes\r\n        \/\/ on the same page do not interfere with each other.\r\n        var scriptEl = document.currentScript;\r\n        var rootEl = scriptEl ? scriptEl.previousElementSibling : null;\r\n        if (!rootEl || !rootEl.classList || !rootEl.classList.contains('gnh-namecard-gallery')) {\r\n            rootEl = scriptEl && scriptEl.parentElement ? scriptEl.parentElement.querySelector('.gnh-namecard-gallery') : document.querySelector('.gnh-namecard-gallery');\r\n        }\r\n        if (!rootEl) return;\r\n\r\n        function qs(sel, ctx){ return (ctx||rootEl||document).querySelector(sel); }\r\n        function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||rootEl||document).querySelectorAll(sel)); }\r\n\r\n        var state = {\r\n            tier: (function(){\r\n                var t = String(rootEl.getAttribute('data-initial-tier') || 'all').toLowerCase();\r\n                if (['foundation','professional','elite','all'].indexOf(t) === -1) t = 'all';\r\n                return t;\r\n            })(),\r\n            styles: []\r\n        };\r\n        \/\/ If the gallery was initialized with a specific tier (shortcode attribute),\r\n        \/\/ lock the tier so filter chips cannot change the displayed tier.\r\n        var tierLocked = (state.tier && state.tier !== 'all');\r\n        var initialTier = state.tier;\r\n\r\n        function normalize(v){ return String(v || '').toLowerCase(); }\r\n\r\n        function getSelectedStyleSet(){\r\n            var set = {};\r\n            state.styles.forEach(function(s){ set[s] = true; });\r\n            return set;\r\n        }\r\n\r\n        function cardMatchesStyles(card, selectedSet){\r\n            if (!state.styles.length) return true;\r\n            var raw = normalize(card.getAttribute('data-styles') || '');\r\n            if (!raw) return false;\r\n            var tokens = raw.split(',').map(function(x){ return normalize(x); }).filter(Boolean);\r\n            for (var i = 0; i < state.styles.length; i++) {\r\n                if (tokens.indexOf(state.styles[i]) !== -1) return true;\r\n            }\r\n            return false;\r\n        }\r\n\r\n        function renderActiveStylePills(){\r\n            \/\/ Update all global pill containers (we keep one at top-level)\r\n            var wraps = qsa('.gnh-active-style-pills', rootEl);\r\n            if (!wraps || !wraps.length) return;\r\n            wraps.forEach(function(wrap){\r\n                wrap.innerHTML = '';\r\n                if (!state.styles.length) { wrap.hidden = true; return; }\r\n                var checks = qsa('.gnh-style-check', rootEl);\r\n                var labelMap = {};\r\n                checks.forEach(function(check){ labelMap[normalize(check.value)] = String(check.getAttribute('data-style-label') || check.value); });\r\n                state.styles.forEach(function(token){\r\n                    var pill = document.createElement('span');\r\n                    pill.className = 'gnh-active-style-pill';\r\n                    pill.setAttribute('data-style-token', token);\r\n                    pill.innerHTML = '<span>' + (labelMap[token] || token) + '<\/span><button type=\"button\" aria-label=\"Remove style\">&times;<\/button>';\r\n                    wrap.appendChild(pill);\r\n                });\r\n                wrap.hidden = false;\r\n            });\r\n        }\r\n\r\n        function updateDescToggles(scope){\r\n            \/\/ Show \"More\" toggle only when description is actually truncated.\r\n            var scanRoot = scope || rootEl;\r\n            qsa('.gnh-namecard-card', scanRoot).forEach(function(card){\r\n                \/\/ Skip hidden cards; measure when they become visible.\r\n                if (card.offsetParent === null) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                var btn = card.querySelector('.gnh-desc-toggle');\r\n                if (!descText || !btn) return;\r\n                \/\/ Ensure collapsed state for measurement\r\n                var wasCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                descText.classList.add('gnh-desc-collapsed');\r\n                \/\/ Reliable overflow check: compare clamped height vs natural content height\r\n                \/\/ using a temporary clone with clamp removed.\r\n                var clampedHeight = descText.getBoundingClientRect().height;\r\n                var naturalHeight = clampedHeight;\r\n                var clone = descText.cloneNode(true);\r\n                clone.classList.remove('gnh-desc-collapsed');\r\n                clone.style.position = 'absolute';\r\n                clone.style.visibility = 'hidden';\r\n                clone.style.pointerEvents = 'none';\r\n                clone.style.height = 'auto';\r\n                clone.style.maxHeight = 'none';\r\n                clone.style.overflow = 'visible';\r\n                clone.style.display = 'block';\r\n                clone.style.whiteSpace = 'normal';\r\n                clone.style.webkitLineClamp = 'unset';\r\n                clone.style.WebkitLineClamp = 'unset';\r\n                clone.style.width = Math.max(1, descText.getBoundingClientRect().width) + 'px';\r\n                descText.parentNode.appendChild(clone);\r\n                naturalHeight = clone.getBoundingClientRect().height;\r\n                clone.parentNode.removeChild(clone);\r\n\r\n                var isOverflowing = naturalHeight > clampedHeight + 1;\r\n                if (isOverflowing) {\r\n                    btn.style.display = 'inline-block';\r\n                    btn.setAttribute('aria-hidden','false');\r\n                } else {\r\n                    btn.style.display = 'none';\r\n                    btn.setAttribute('aria-hidden','true');\r\n                    \/\/ ensure aria-expanded is false when hidden\r\n                    btn.setAttribute('aria-expanded','false');\r\n                    \/\/ also ensure description stays collapsed\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                }\r\n                \/\/ restore previous expanded state if it was expanded\r\n                if (!wasCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    btn.setAttribute('aria-expanded','true');\r\n                    btn.textContent = btn.getAttribute('data-less') || 'Less';\r\n                } else {\r\n                    btn.textContent = btn.getAttribute('data-more') || 'More';\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateStyleToggleLabel(){\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            if (!btns || !btns.length) return;\r\n            var base = 'All Styles';\r\n            btns.forEach(function(btn){\r\n                if (!state.styles.length) {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = base + ' ';\r\n                } else {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = state.styles.length + ' style' + (state.styles.length > 1 ? 's' : '') + ' selected ';\r\n                }\r\n            });\r\n        }\r\n\r\n        function applyFilters(){\r\n            var gallery = rootEl;\r\n            var selectedSet = getSelectedStyleSet();\r\n            var currentTier = tierLocked ? initialTier : state.tier;\r\n            var anyVisible = false;\r\n\r\n            qsa('.gnh-namecard-tier', gallery).forEach(function(section){\r\n                var sectionTier = normalize(section.getAttribute('data-tier') || '');\r\n                var tierMatch = (currentTier === 'all' || currentTier === '' || sectionTier === currentTier);\r\n\r\n                var visibleCards = 0;\r\n                qsa('.gnh-namecard-card', section).forEach(function(card){\r\n                    var styleMatch = cardMatchesStyles(card, selectedSet);\r\n                    var show = tierMatch && styleMatch;\r\n                    card.style.display = show ? 'flex' : 'none';\r\n                    if (show) visibleCards++;\r\n                });\r\n\r\n                \/\/ Always show the section header when the tier filter matches so\r\n                \/\/ the style filter and template count remain visible. Hide the\r\n                \/\/ card grid when no cards match the selected styles.\r\n                var showSection = tierMatch;\r\n                section.style.display = showSection ? '' : 'none';\r\n                var grid = section.querySelector('.gnh-namecard-grid');\r\n                if (grid) {\r\n                    grid.style.display = (visibleCards > 0) ? '' : 'none';\r\n                }\r\n                if (visibleCards > 0) anyVisible = true;\r\n            });\r\n\r\n            qsa('.gnh-filter-chip[data-filter]', gallery).forEach(function(chip){\r\n                var chipFilter = normalize(chip.getAttribute('data-filter') || '');\r\n                if (chipFilter === currentTier) chip.classList.add('gnh-filter-chip-active');\r\n                else chip.classList.remove('gnh-filter-chip-active');\r\n            });\r\n\r\n            if (gallery) {\r\n                if (state.styles.length) gallery.classList.add('gnh-filter-active');\r\n                else gallery.classList.remove('gnh-filter-active');\r\n            }\r\n\r\n            renderActiveStylePills();\r\n            updateStyleToggleLabel();\r\n            updateDescToggles();\r\n            syncPhonePreviewScale();\r\n        }\r\n\r\n        function toggleStyleDropdown(contextBtn, forceOpen){\r\n            \/\/ If contextBtn is provided, toggle the menu within its filter-wrap. If not provided, operate on all menus.\r\n            if (contextBtn) {\r\n                var wrap = contextBtn.closest('.gnh-style-filter-wrap');\r\n                if (!wrap) return;\r\n                var menu = wrap.querySelector('.gnh-style-menu');\r\n                var btn = contextBtn;\r\n                if (!menu || !btn) return;\r\n                var open = typeof forceOpen === 'boolean' ? forceOpen : menu.hasAttribute('hidden');\r\n                if (open) {\r\n                    menu.removeAttribute('hidden');\r\n                    btn.setAttribute('aria-expanded', 'true');\r\n                    var input = menu.querySelector('.gnh-style-search');\r\n                    if (input) input.focus();\r\n                } else {\r\n                    menu.setAttribute('hidden', 'hidden');\r\n                    btn.setAttribute('aria-expanded', 'false');\r\n                }\r\n                return;\r\n            }\r\n            \/\/ No context: close all menus when requested\r\n            var menus = qsa('.gnh-style-menu', rootEl);\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            menus.forEach(function(m){ m.setAttribute('hidden', 'hidden'); });\r\n            btns.forEach(function(b){ b.setAttribute('aria-expanded', 'false'); });\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n        } else {\r\n            syncPhonePreviewScale(rootEl);\r\n            updateDescToggles();\r\n        }\r\n        window.addEventListener('resize', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n\r\n        \/\/ Attach direct click handlers as a fallback for style toggles\r\n        function attachStyleToggleHandlers(){\r\n            qsa('.gnh-style-toggle', rootEl).forEach(function(btn){\r\n                \/\/ avoid double-binding\r\n                if (btn.__gnhToggleBound) return;\r\n                btn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); toggleStyleDropdown(btn); });\r\n                btn.__gnhToggleBound = true;\r\n            });\r\n        }\r\n        \/\/ Run once now and also after DOM ready just in case\r\n        attachStyleToggleHandlers();\r\n\r\n        document.addEventListener('click', function(e){\r\n            if (!rootEl.contains(e.target)) {\r\n                toggleStyleDropdown(false);\r\n                return;\r\n            }\r\n\r\n            var activePillRemove = e.target.closest('.gnh-active-style-pill button');\r\n            if (activePillRemove) {\r\n                e.preventDefault();\r\n                var pill = activePillRemove.closest('.gnh-active-style-pill');\r\n                if (pill) {\r\n                    var token = normalize(pill.getAttribute('data-style-token') || '');\r\n                    state.styles = state.styles.filter(function(x){ return x !== token; });\r\n                    qsa('.gnh-style-check', rootEl).forEach(function(check){\r\n                        if (normalize(check.value) === token) check.checked = false;\r\n                    });\r\n                    applyFilters();\r\n                }\r\n                return;\r\n            }\r\n\r\n            var clearBtn = e.target.closest('.gnh-style-clear');\r\n            if (clearBtn) {\r\n                e.preventDefault();\r\n                state.styles = [];\r\n                qsa('.gnh-style-check', rootEl).forEach(function(check){ check.checked = false; });\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var styleToggle = e.target.closest('.gnh-style-toggle');\r\n            if (styleToggle) {\r\n                e.preventDefault();\r\n                toggleStyleDropdown(styleToggle);\r\n                return;\r\n            }\r\n\r\n            var filterBtn = e.target.closest('.gnh-filter-chip[data-filter], .gnh-hero-pill');\r\n            if (filterBtn) {\r\n                e.preventDefault();\r\n                if (tierLocked) {\r\n                    \/\/ ignore attempts to change tier when shortcode specified a tier\r\n                    return;\r\n                }\r\n                var filter = String(filterBtn.getAttribute('data-filter') || 'all').toLowerCase();\r\n                state.tier = filter;\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var descToggleBtn = e.target.closest('.gnh-desc-toggle');\r\n            if (descToggleBtn) {\r\n                e.preventDefault();\r\n                var card = descToggleBtn.closest('.gnh-namecard-card');\r\n                if (!card) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                if (!descText) return;\r\n                var isCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                var more = descToggleBtn.getAttribute('data-more') || 'More';\r\n                var less = descToggleBtn.getAttribute('data-less') || 'Less';\r\n                if (isCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = less;\r\n                    descToggleBtn.setAttribute('aria-expanded','true');\r\n                } else {\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = more;\r\n                    descToggleBtn.setAttribute('aria-expanded','false');\r\n                }\r\n                \/\/ Adjust phone preview sizing if the card height changed\r\n                syncPhonePreviewScale(card);\r\n                return;\r\n            }\r\n\r\n            \/\/ Close dropdown when clicking outside it.\r\n            if (!e.target.closest('.gnh-style-filter-wrap')) {\r\n                toggleStyleDropdown(false);\r\n            }\r\n\r\n            var t = e.target.closest('.gnh-tier-view-all');\r\n            if (!t) return;\r\n            e.preventDefault();\r\n            var section = t.closest('.gnh-namecard-tier');\r\n            if (!section) return;\r\n            var grid = section.querySelector('.gnh-namecard-grid');\r\n            if (!grid) return;\r\n            var isExpanded = section.classList.contains('gnh-expanded');\r\n            \/\/ compute collapsed height (first 3 items)\r\n            var items = grid.querySelectorAll('.gnh-namecard-card');\r\n            var collapsedH = 0;\r\n            for (var i=0;i<Math.min(3, items.length); i++){\r\n                collapsedH += items[i].offsetHeight + parseFloat(getComputedStyle(items[i]).marginBottom||0);\r\n            }\r\n            \/\/ maintain scroll position anchor\r\n            var scrollY = window.scrollY || window.pageYOffset;\r\n            if (!isExpanded){\r\n                \/\/ expand: unhide extras first so height can be measured\r\n                qsa('.gnh-hidden-template', grid).forEach(function(el){ el.classList.remove('gnh-hidden-template'); });\r\n                updateDescToggles(section);\r\n                syncPhonePreviewScale(section);\r\n                \/\/ set starting maxHeight to collapsedH then animate to full\r\n                grid.style.maxHeight = collapsedH + 'px';\r\n                var fullH = grid.scrollHeight;\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = fullH + 'px';\r\n                });\r\n                section.classList.add('gnh-expanded');\r\n                t.textContent = 'Show Less';\r\n                grid.addEventListener('transitionend', function handler(){ grid.style.maxHeight = ''; grid.style.transition = ''; grid.removeEventListener('transitionend', handler); });\r\n            } else {\r\n                \/\/ collapse: animate to collapsedH then hide extras\r\n                var curH = grid.scrollHeight;\r\n                grid.style.maxHeight = curH + 'px';\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = collapsedH + 'px';\r\n                });\r\n                grid.addEventListener('transitionend', function handler(){\r\n                    \/\/ hide items beyond 3\r\n                    var its = grid.querySelectorAll('.gnh-namecard-card');\r\n                    for (var j=3;j<its.length;j++){ its[j].classList.add('gnh-hidden-template'); }\r\n                    updateDescToggles(section);\r\n                    grid.style.maxHeight = '';\r\n                    grid.style.transition = '';\r\n                    grid.removeEventListener('transitionend', handler);\r\n                });\r\n                section.classList.remove('gnh-expanded');\r\n                var tier = t.getAttribute('data-tier') || '';\r\n                t.textContent = 'View All ' + (tier.charAt(0).toUpperCase() + tier.slice(1)) + ' Templates \u2192';\r\n            }\r\n            \/\/ restore scroll position to avoid jump\r\n            requestAnimationFrame(function(){ window.scrollTo(0, scrollY); });\r\n            setTimeout(function(){ syncPhonePreviewScale(section); }, 380);\r\n        });\r\n\r\n        document.addEventListener('change', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var check = e.target.closest('.gnh-style-check');\r\n            if (!check) return;\r\n            var token = normalize(check.value);\r\n            if (!token) return;\r\n            if (check.checked) {\r\n                if (state.styles.indexOf(token) === -1) state.styles.push(token);\r\n            } else {\r\n                state.styles = state.styles.filter(function(x){ return x !== token; });\r\n            }\r\n            \/\/ Ensure all checkboxes with same token are synced across tiers\r\n            qsa('.gnh-style-check', rootEl).forEach(function(c){ if (normalize(c.value) === token) c.checked = (state.styles.indexOf(token) !== -1); });\r\n            applyFilters();\r\n        });\r\n\r\n        document.addEventListener('input', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var input = e.target.closest('.gnh-style-search');\r\n            if (!input) return;\r\n            var q = normalize(input.value);\r\n            var menu = input.closest('.gnh-style-menu');\r\n            if (!menu) return;\r\n            var opts = Array.prototype.slice.call(menu.querySelectorAll('.gnh-style-option'));\r\n            opts.forEach(function(opt){\r\n                var label = normalize(opt.textContent || '');\r\n                opt.style.display = (q === '' || label.indexOf(q) !== -1) ? '' : 'none';\r\n            });\r\n        });\r\n\r\n        applyFilters();\r\n    })();\r\n\r\n    \/* Load Lucide icons dynamically and convert placeholders into SVG *\/\r\n    (function(){\r\n        if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function'){\r\n            try{ window.lucide.createIcons(); }catch(e){}\r\n            return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = 'https:\/\/unpkg.com\/lucide@latest\/dist\/lucide.min.js';\r\n        s.async = true;\r\n        s.onload = function(){ try{ if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function') window.lucide.createIcons(); }catch(e){} };\r\n        document.head.appendChild(s);\r\n    })();\r\n<\/script>[\/et_pb_tab][et_pb_tab title=&#8221;Elite&#8221; _builder_version=&#8221;4.27.7&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<div class=\"gnh-namecard-gallery gnh-single-tier\" data-initial-tier=\"elite\"><div class=\"gnh-gallery-filter-bar gnh-tier-tabs et_pb_tabs\"><ul class=\"gnh-tier-filter-group et_pb_tabs_controls\"><li><button type=\"button\" class=\"gnh-filter-chip gnh-filter-chip-active\" data-filter=\"all\">All Templates<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"foundation\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Foundation<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"professional\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Professional<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"elite\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Elite<\/button><\/li><\/ul><span class=\"gnh-filter-divider\" aria-hidden=\"true\"><\/span><\/div><section class=\"gnh-namecard-tier gnh-tier-elite\" data-tier=\"elite\"><div class=\"gnh-namecard-section-inner\"><div class=\"gnh-namecard-tier-header\"><div class=\"gnh-namecard-tier-meta\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i><div class=\"gnh-tier-title-wrap\"><h2 class=\"gnh-namecard-tier-title\">Elite<\/h2><p class=\"gnh-tier-desc\">Premium branding with authority features.<\/p><\/div><\/div><div class=\"gnh-tier-right\"><div class=\"gnh-style-filter-wrap\"><button type=\"button\" class=\"gnh-filter-chip gnh-style-toggle\" aria-expanded=\"false\" aria-controls=\"gnh-style-menu-elite\">All Styles <span class=\"gnh-style-caret\" aria-hidden=\"true\">&#9662;<\/span><\/button><div id=\"gnh-style-menu-elite\" class=\"gnh-style-menu\" hidden><input type=\"search\" class=\"gnh-style-search\" placeholder=\"Search styles...\" aria-label=\"Search styles\"><div class=\"gnh-style-options\"><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"campaign\" data-style-label=\"Campaign\"><span class=\"gnh-style-option-label\">Campaign<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"dark\" data-style-label=\"dark\"><span class=\"gnh-style-option-label\">dark<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"executive\" data-style-label=\"Executive\"><span class=\"gnh-style-option-label\">Executive<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"interactive\" data-style-label=\"Interactive\"><span class=\"gnh-style-option-label\">Interactive<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"promotional\" data-style-label=\"Promotional\"><span class=\"gnh-style-option-label\">Promotional<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><\/div><div class=\"gnh-style-actions\"><button type=\"button\" class=\"gnh-style-clear\">Clear all<\/button><\/div><\/div><\/div><div class=\"gnh-tier-count\">2 Templates<\/div><\/div><\/div><div class=\"gnh-active-style-pills\" hidden><\/div><div class=\"gnh-namecard-grid\"><article class=\"gnh-namecard-card\" data-template-id=\"10\" data-idx=\"0\" data-styles=\"executive,dark\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><span class=\"gnh-preview-badge gnh-preview-badge-feature gnh-preview-badge-overlay\">FEATURE<\/span><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/johnsmith\/\" title=\"Prestige Blue Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">Prestige Blue<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">Executive<\/span><span class=\"gnh-style-pill\">dark<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">A sophisticated executive design featuring a prominent profile, trust-building credentials, and a clear call-to-action\u2014perfect for professionals focused on credibility and client engagement.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/johnsmith\/\" aria-label=\"Live preview: Prestige Blue\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><article class=\"gnh-namecard-card\" data-template-id=\"12\" data-idx=\"1\" data-styles=\"campaign,interactive,promotional\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/AAIGNH01\/\" title=\"SmartLink Journey Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">SmartLink Journey<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">Campaign<\/span><span class=\"gnh-style-pill\">Interactive<\/span><span class=\"gnh-style-pill\">Promotional<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">A modern action-oriented template featuring a guided navigation flow, promotional content, and prominent call-to-action buttons. Ideal for campaigns, product showcases, onboarding experiences, and lead generation.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/AAIGNH01\/\" aria-label=\"Live preview: SmartLink Journey\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><\/div><\/div><\/section><\/div><style>\r\n        .gnh-namecard-gallery{--gnh-tier-icon-size:44px;--gnh-tier-icon-svg-size:22px;padding:24px 20px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e2e8f0;border-radius:20px}\r\n        .gnh-namecard-hero{margin-bottom:20px}\r\n        .gnh-namecard-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6366f1;margin-bottom:10px}\r\n        .gnh-namecard-hero-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:#0f172a;letter-spacing:-0.01em}\r\n        .gnh-namecard-hero-sub{margin:0;max-width:760px;color:#475467;font-size:15px;line-height:1.7}\r\n        .gnh-hero-tier-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}\r\n        .gnh-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;appearance:none}\r\n        .gnh-hero-pill-foundation{border-color:#b7e4c7;color:#15803d;background:#f0fdf4}\r\n        .gnh-hero-pill-professional{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}\r\n        .gnh-hero-pill-elite{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}\r\n        .gnh-gallery-filter-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:14px;padding:12px 0 18px;margin-bottom:12px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}\r\n        .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px}\r\n        \/* Reset external tabs framework defaults to prevent overlap\/float behavior *\/\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar.et_pb_tabs{border:0;box-shadow:none;background:transparent}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls li{float:none !important;position:static !important;list-style:none !important;margin:0 !important;padding:0 !important;width:auto !important;clear:none !important}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:before,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:after{content:none !important;display:none !important}\r\n        \/* Shortcode-only: render icons inline at the left of the label as pill buttons *\/\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:inline-flex;flex:0 0 auto}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e5e9ef;background:#fff;color:#101b42;font-weight:700;min-height:42px;white-space:nowrap;line-height:1}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;inset:auto !important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;margin-right:8px;flex:0 0 auto;color:inherit;vertical-align:middle}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon svg{display:block;width:18px;height:18px;stroke:currentColor}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip.gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-filter-divider{width:1px;align-self:stretch;min-height:34px;background:#dbe3ef;flex:0 0 1px}\r\n        .gnh-style-filter-wrap{position:relative;flex:0 0 auto}\r\n        .gnh-filter-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:12px;font-weight:600;cursor:pointer;appearance:none}\r\n        .gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-style-caret{margin-left:8px;font-size:11px;opacity:.75}\r\n        .gnh-style-menu{position:absolute;top:44px;left:0;z-index:20;min-width:280px;max-width:340px;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.12);padding:10px}\r\n        .gnh-style-search{width:100%;padding:8px 10px;border:1px solid #dbe3ef;border-radius:8px;font-size:13px;margin-bottom:8px}\r\n        .gnh-style-options{max-height:220px;overflow:auto;padding-right:2px}\r\n        .gnh-style-option{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#1f2937;font-size:13px;cursor:pointer}\r\n        .gnh-style-option-count{margin-left:auto;color:#64748b;font-size:12px}\r\n        .gnh-style-actions{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}\r\n        .gnh-style-clear{border:0;background:transparent;color:#2563eb;font-weight:600;font-size:12px;cursor:pointer}\r\n        .gnh-style-empty{margin:6px 2px;color:#64748b;font-size:12px}\r\n        .gnh-active-style-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n        .gnh-active-style-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8eefc;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600}\r\n        .gnh-active-style-pill button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}\r\n        .gnh-selected-filter-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}\r\n        .gnh-selected-filter-pill-foundation{background:#f0fdf4;color:#15803d;border-color:#d1f6d7}\r\n        .gnh-selected-filter-pill-professional{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}\r\n        .gnh-selected-filter-pill-elite{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-namecard-tier{margin-bottom:56px}\r\n        .gnh-namecard-section-inner{max-width:1320px;margin:0 auto;border-radius:24px}\r\n        .gnh-tier-foundation .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-professional .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-elite .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-namecard-tier-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}\r\n        .gnh-namecard-tier-meta{display:flex;align-items:center;gap:12px}\r\n        \/* Keep header icon in normal flow even when parent containers use .gnh-tier-tabs styles *\/\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-icon{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:flex-start}\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-title-wrap{display:flex;flex-direction:column;justify-content:flex-start}\r\n        .gnh-tier-icon{width:var(--gnh-tier-icon-size);height:var(--gnh-tier-icon-size);min-width:var(--gnh-tier-icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0f172a;}\r\n        .gnh-tier-icon svg{display:block;width:var(--gnh-tier-icon-svg-size);height:var(--gnh-tier-icon-svg-size);stroke:currentColor}\r\n        .gnh-tier-title-wrap .gnh-namecard-tier-title{margin:0;font-size:25px;line-height:1;letter-spacing:-0.01em;font-weight:700;color:#0f172a}\r\n        .gnh-tier-desc{color:#64748B;font-size:15px;font-weight:400}\r\n        .gnh-tier-right{display:flex;flex-direction:row;align-items:center;gap:8px}\r\n        .gnh-tier-count{font-weight:700;color:#0f172a;font-size:13px;text-transform:none;letter-spacing:0;background:#ffffff;border:1px solid #dbe3ef;padding:6px 12px;border-radius:12px;min-width:86px;text-align:center;white-space:nowrap;word-break:keep-all;flex:0 0 auto}\r\n        .gnh-namecard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px;align-items:stretch}\r\n        .gnh-namecard-card{display:flex;flex-direction:column;gap:20px;border:1px solid #E8EDF5;border-radius:20px;padding:24px;background:#fff;align-items:stretch;box-shadow:0 12px 32px rgba(15,23,42,.06);min-height:250px;transition:transform 250ms ease,box-shadow 250ms ease}\r\n        .gnh-namecard-card:hover,.gnh-namecard-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}\r\n        .gnh-hidden-template{display:none}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-namecard-card.gnh-hidden-template{display:flex}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-tier-footer{display:none}\r\n        .gnh-namecard-left{display:flex;align-items:center;justify-content:center;width:100%}\r\n        .gnh-phone-preview{position:relative;z-index:0;overflow:visible}\r\n        .gnh-template-readiness-phone{position:relative;border-radius:14px;padding:5px;background:#0f172a;height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;width:100%;min-height:200px;overflow:hidden}\r\n        .gnh-namecard-iframe{width:84%;height:86%;border:0;border-radius:10px;background:#fff;max-width:340px;transform-origin:center center;transition:transform 200ms ease;position:relative;z-index:10}\r\n        .gnh-namecard-right{min-width:0;display:flex;flex-direction:column;justify-content:space-between;width:100%}\r\n        .gnh-namecard-name{margin:0 0 8px;font-size:22px;line-height:1.15;color:#0F172A;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-preview-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;background:#e2e8f0;color:#334155}\r\n        .gnh-preview-badge-overlay{position:absolute;top:-10px;left:14px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:80;box-shadow:0 6px 14px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.65);pointer-events:none}\r\n        .gnh-namecard-styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}\r\n        .gnh-style-pill{background:#F8FAFC;color:#1e293b;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;height:auto}\r\n        .gnh-namecard-desc{color:#64748B;margin:0 0 10px;font-size:15px;line-height:1.6}\r\n        .gnh-desc-text.gnh-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-desc-toggle{border:0;background:transparent;color:#2563eb;font-weight:700;padding:0 0;font-size:13px;cursor:pointer;display:inline-block;margin-left:8px;vertical-align:middle}\r\n        .gnh-template-tier-pill{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#f0fdf4;color:#15803d;margin-bottom:10px}\r\n        .gnh-namecard-actions{display:flex;flex-direction:column;gap:12px}\r\n        .gnh-namecard-preview.button,.gnh-namecard-choose.button{height:42px;line-height:40px;padding:0 16px;font-size:14px;border-radius:10px;width:100%;box-sizing:border-box}\r\n        .gnh-namecard-preview.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;background:#fff;border:1px solid #dbe3ef;color:#1f2937;font-weight:500;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04)}\r\n        .gnh-namecard-preview.button:hover,.gnh-namecard-preview.button:focus{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}\r\n        .gnh-namecard-choose.button{background:#22c55e;border-color:#22c55e;color:#fff;display:none !important}\r\n        .gnh-tier-view-all{margin-left:8px;font-weight:600}\r\n        .gnh-namecard-preview svg{width:18px;height:18px;display:block;flex:0 0 auto}\r\n        .gnh-tier-foundation .gnh-namecard-tier-title{color:#16a34a}\r\n        .gnh-tier-foundation .gnh-tier-icon{color:#16a34a;border-color:#bbf7d0}\r\n        .gnh-tier-foundation .gnh-preview-badge{background:#dcfce7;color:#15803d}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button{background:#16a34a;border-color:#16a34a;color:#fff}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button:hover,.gnh-tier-foundation .gnh-namecard-preview.button:focus{background:#14532d;border-color:#14532d;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-tier-title{color:#2563eb}\r\n        .gnh-tier-professional .gnh-tier-icon{color:#2563eb;border-color:#bfdbfe}\r\n        .gnh-tier-professional .gnh-preview-badge{background:#dbeafe;color:#1d4ed8}\r\n        .gnh-tier-professional .gnh-namecard-preview.button{background:#2563eb;border-color:#2563eb;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-preview.button:hover,.gnh-tier-professional .gnh-namecard-preview.button:focus{background:#1f56d1;border-color:#1f56d1;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-tier-title{color:#7c3aed}\r\n        .gnh-tier-elite .gnh-tier-icon{color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-tier-elite .gnh-preview-badge{background:#ede9fe;color:#6d28d9}\r\n        .gnh-tier-elite .gnh-namecard-preview.button{background:#7c3aed;border-color:#7c3aed;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-preview.button:hover,.gnh-tier-elite .gnh-namecard-preview.button:focus{background:#6826d6;border-color:#6826d6;color:#fff}\r\n        @media (max-width:1280px){\r\n            .gnh-namecard-card{gap:18px}\r\n        }\r\n        @media (max-width:1024px){\r\n            .gnh-gallery-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0 14px}\r\n            .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}\r\n            .gnh-tier-filter-group li{flex:0 0 auto}\r\n            .gnh-tier-filter-group .gnh-filter-chip{flex:0 0 auto;white-space:nowrap}\r\n            .gnh-style-filter-wrap{position:static;width:100%}\r\n            .gnh-filter-chip{justify-content:center;min-height:38px}\r\n            .gnh-style-toggle{width:100%;justify-content:space-between}\r\n            .gnh-filter-divider{display:none}\r\n            .gnh-style-menu{position:static;top:auto;left:auto;right:auto;z-index:1;width:100%;min-width:0;max-width:none;margin-top:8px}\r\n            .gnh-style-options{max-height:180px}\r\n            \/* Tablet: keep horizontal layout but reduce spacing *\/\r\n            .gnh-namecard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\r\n            .gnh-namecard-card{gap:16px}\r\n            .gnh-template-readiness-phone{height:160px;min-height:160px}\r\n            .gnh-namecard-iframe{height:150px}\r\n            \/* Single-tier header: keep controls inline and avoid count wrapping *\/\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap;align-items:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-filter-wrap{width:auto}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-toggle{width:auto;min-width:0;justify-content:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n        }\r\n        @media (max-width:640px){\r\n            .gnh-namecard-gallery{padding:18px 14px}\r\n            .gnh-gallery-filter-bar{gap:12px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:block;min-width:0}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{width:100%;min-width:0;padding:8px 10px;font-size:14px;gap:8px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{margin-right:4px;width:22px;height:22px}\r\n            .gnh-namecard-hero-title{font-size:28px}\r\n            .gnh-namecard-grid{grid-template-columns:1fr;gap:28px}\r\n            .gnh-namecard-card{min-height:unset;padding:16px;border-radius:14px}\r\n            .gnh-template-readiness-phone{height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            \/* Phone preview scale on card hover *\/\r\n            .gnh-namecard-card:hover .gnh-namecard-iframe{transform:scale(1.03)}\r\n            \/* Buttons transition *\/\r\n            .gnh-namecard-preview.button,.gnh-namecard-choose.button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}\r\n            .gnh-namecard-card{display:flex;flex-direction:column;align-items:stretch}\r\n            .gnh-namecard-left{flex:0 0 auto;margin:0 auto}\r\n            .gnh-template-readiness-phone{margin:0 auto;height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            .gnh-namecard-right{padding-top:10px}\r\n            .gnh-namecard-tier-header{align-items:flex-start;gap:10px;flex-direction:column}\r\n            .gnh-tier-right{align-items:flex-start;flex-direction:row;gap:8px}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n            .gnh-tier-icon{width:40px;height:40px;min-width:40px}\r\n            .gnh-tier-icon svg{width:20px;height:20px}\r\n        }\r\n        \/* When gallery is rendered as a single tier via shortcode, visually disable top-tier chips *\/\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-tier-filter-group .gnh-filter-chip{opacity:.6;cursor:default;pointer-events:none}\r\n          \/* In single-tier mode, align the tier meta and header to the top so icon sits next to the heading.\r\n              Use stronger selectors and align-self to avoid interference when the shortcode is placed inside\r\n              external tab containers that may also use the `gnh-tier-tabs` class. *\/\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-header{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta .gnh-tier-icon{align-self:flex-start !important;margin-top:2px}\r\n        @media (max-width:420px){\r\n            .gnh-tier-filter-group{gap:6px}\r\n        }\r\n\r\n        \/* Phone preview CSS moved to site global snippet; removed from inline styles. *\/\r\n\r\n        .gnh-feature-list{list-style:none!important;margin:24px 0 0!important;padding:0!important}\r\n        .gnh-feature-list li{position:relative;margin:0 0 16px!important;padding:0 0 0 32px!important;color:#16254a;font-size:16px;font-weight:500;line-height:1.45}\r\n        .gnh-feature-list li::marker{content:\"\"}\r\n        .gnh-feature-list li::before{content:\"\u2713\";position:absolute;left:0;top:.1em;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;color:#18a866;font-size:12px;font-weight:800;background:transparent;border:1.8px solid #18a866;border-radius:50%}\r\n        .gnh-feature-list li:last-child{margin-bottom:0!important}\r\n        @media (max-width:980px){.gnh-feature-list li{margin-bottom:14px!important;padding-left:30px!important;font-size:15px}}\r\n        @media (max-width:767px){.gnh-feature-list{margin-top:20px!important}.gnh-feature-list li{margin-bottom:13px!important;padding-left:28px!important;font-size:14px}.gnh-feature-list li::before{width:17px;height:17px;font-size:11px}}\r\n        \/* Single-tier mode: collapse outer frame and top filter, make inner section full width *\/\r\n        .gnh-namecard-gallery.gnh-single-tier{padding:0;background:transparent;border:0;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-gallery-filter-bar{display:none}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-section-inner{max-width:100%;margin:0 auto;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier{margin-bottom:36px}\r\n    <\/style><script>\r\n(function(){\r\n        function syncPhonePreviewScale(scope){\r\n            var scanRoot = scope || rootEl || document;\r\n            var roots = Array.prototype.slice.call(scanRoot.querySelectorAll('.gnh-phone-screen'));\r\n            roots.forEach(function(root){\r\n                if (!root) return;\r\n                var iframe = root.querySelector('iframe');\r\n                if (!iframe) return;\r\n\r\n                \/\/ Match native card viewport ratio (380x730) without distortion.\r\n                var nativeW = 380;\r\n                var nativeH = 730;\r\n                var boxW = root.clientWidth || 0;\r\n                var boxH = root.clientHeight || 0;\r\n                if (boxW < 1 || boxH < 1) return;\r\n\r\n                \/\/ Contain fit: scale the preview so the whole phone viewport fits inside the frame\r\n                \/\/ (prefer shrinking instead of cropping) and center it within the shell.\r\n                var scale = Math.min(boxW \/ nativeW, boxH \/ nativeH, 1);\r\n                iframe.style.transform = 'scale(' + scale + ')';\r\n                iframe.style.transformOrigin = 'top left';\r\n\r\n                var scaledW = nativeW * scale;\r\n                var scaledH = nativeH * scale;\r\n                \/\/ Center the scaled iframe within the available box area\r\n                iframe.style.left = Math.max(0, ((boxW - scaledW) \/ 2)) + 'px';\r\n                iframe.style.top = Math.max(0, ((boxH - scaledH) \/ 2)) + 'px';\r\n            });\r\n        }\r\n\r\n        \/\/ Scope all behavior to this specific gallery instance so multiple shortcodes\r\n        \/\/ on the same page do not interfere with each other.\r\n        var scriptEl = document.currentScript;\r\n        var rootEl = scriptEl ? scriptEl.previousElementSibling : null;\r\n        if (!rootEl || !rootEl.classList || !rootEl.classList.contains('gnh-namecard-gallery')) {\r\n            rootEl = scriptEl && scriptEl.parentElement ? scriptEl.parentElement.querySelector('.gnh-namecard-gallery') : document.querySelector('.gnh-namecard-gallery');\r\n        }\r\n        if (!rootEl) return;\r\n\r\n        function qs(sel, ctx){ return (ctx||rootEl||document).querySelector(sel); }\r\n        function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||rootEl||document).querySelectorAll(sel)); }\r\n\r\n        var state = {\r\n            tier: (function(){\r\n                var t = String(rootEl.getAttribute('data-initial-tier') || 'all').toLowerCase();\r\n                if (['foundation','professional','elite','all'].indexOf(t) === -1) t = 'all';\r\n                return t;\r\n            })(),\r\n            styles: []\r\n        };\r\n        \/\/ If the gallery was initialized with a specific tier (shortcode attribute),\r\n        \/\/ lock the tier so filter chips cannot change the displayed tier.\r\n        var tierLocked = (state.tier && state.tier !== 'all');\r\n        var initialTier = state.tier;\r\n\r\n        function normalize(v){ return String(v || '').toLowerCase(); }\r\n\r\n        function getSelectedStyleSet(){\r\n            var set = {};\r\n            state.styles.forEach(function(s){ set[s] = true; });\r\n            return set;\r\n        }\r\n\r\n        function cardMatchesStyles(card, selectedSet){\r\n            if (!state.styles.length) return true;\r\n            var raw = normalize(card.getAttribute('data-styles') || '');\r\n            if (!raw) return false;\r\n            var tokens = raw.split(',').map(function(x){ return normalize(x); }).filter(Boolean);\r\n            for (var i = 0; i < state.styles.length; i++) {\r\n                if (tokens.indexOf(state.styles[i]) !== -1) return true;\r\n            }\r\n            return false;\r\n        }\r\n\r\n        function renderActiveStylePills(){\r\n            \/\/ Update all global pill containers (we keep one at top-level)\r\n            var wraps = qsa('.gnh-active-style-pills', rootEl);\r\n            if (!wraps || !wraps.length) return;\r\n            wraps.forEach(function(wrap){\r\n                wrap.innerHTML = '';\r\n                if (!state.styles.length) { wrap.hidden = true; return; }\r\n                var checks = qsa('.gnh-style-check', rootEl);\r\n                var labelMap = {};\r\n                checks.forEach(function(check){ labelMap[normalize(check.value)] = String(check.getAttribute('data-style-label') || check.value); });\r\n                state.styles.forEach(function(token){\r\n                    var pill = document.createElement('span');\r\n                    pill.className = 'gnh-active-style-pill';\r\n                    pill.setAttribute('data-style-token', token);\r\n                    pill.innerHTML = '<span>' + (labelMap[token] || token) + '<\/span><button type=\"button\" aria-label=\"Remove style\">&times;<\/button>';\r\n                    wrap.appendChild(pill);\r\n                });\r\n                wrap.hidden = false;\r\n            });\r\n        }\r\n\r\n        function updateDescToggles(scope){\r\n            \/\/ Show \"More\" toggle only when description is actually truncated.\r\n            var scanRoot = scope || rootEl;\r\n            qsa('.gnh-namecard-card', scanRoot).forEach(function(card){\r\n                \/\/ Skip hidden cards; measure when they become visible.\r\n                if (card.offsetParent === null) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                var btn = card.querySelector('.gnh-desc-toggle');\r\n                if (!descText || !btn) return;\r\n                \/\/ Ensure collapsed state for measurement\r\n                var wasCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                descText.classList.add('gnh-desc-collapsed');\r\n                \/\/ Reliable overflow check: compare clamped height vs natural content height\r\n                \/\/ using a temporary clone with clamp removed.\r\n                var clampedHeight = descText.getBoundingClientRect().height;\r\n                var naturalHeight = clampedHeight;\r\n                var clone = descText.cloneNode(true);\r\n                clone.classList.remove('gnh-desc-collapsed');\r\n                clone.style.position = 'absolute';\r\n                clone.style.visibility = 'hidden';\r\n                clone.style.pointerEvents = 'none';\r\n                clone.style.height = 'auto';\r\n                clone.style.maxHeight = 'none';\r\n                clone.style.overflow = 'visible';\r\n                clone.style.display = 'block';\r\n                clone.style.whiteSpace = 'normal';\r\n                clone.style.webkitLineClamp = 'unset';\r\n                clone.style.WebkitLineClamp = 'unset';\r\n                clone.style.width = Math.max(1, descText.getBoundingClientRect().width) + 'px';\r\n                descText.parentNode.appendChild(clone);\r\n                naturalHeight = clone.getBoundingClientRect().height;\r\n                clone.parentNode.removeChild(clone);\r\n\r\n                var isOverflowing = naturalHeight > clampedHeight + 1;\r\n                if (isOverflowing) {\r\n                    btn.style.display = 'inline-block';\r\n                    btn.setAttribute('aria-hidden','false');\r\n                } else {\r\n                    btn.style.display = 'none';\r\n                    btn.setAttribute('aria-hidden','true');\r\n                    \/\/ ensure aria-expanded is false when hidden\r\n                    btn.setAttribute('aria-expanded','false');\r\n                    \/\/ also ensure description stays collapsed\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                }\r\n                \/\/ restore previous expanded state if it was expanded\r\n                if (!wasCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    btn.setAttribute('aria-expanded','true');\r\n                    btn.textContent = btn.getAttribute('data-less') || 'Less';\r\n                } else {\r\n                    btn.textContent = btn.getAttribute('data-more') || 'More';\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateStyleToggleLabel(){\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            if (!btns || !btns.length) return;\r\n            var base = 'All Styles';\r\n            btns.forEach(function(btn){\r\n                if (!state.styles.length) {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = base + ' ';\r\n                } else {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = state.styles.length + ' style' + (state.styles.length > 1 ? 's' : '') + ' selected ';\r\n                }\r\n            });\r\n        }\r\n\r\n        function applyFilters(){\r\n            var gallery = rootEl;\r\n            var selectedSet = getSelectedStyleSet();\r\n            var currentTier = tierLocked ? initialTier : state.tier;\r\n            var anyVisible = false;\r\n\r\n            qsa('.gnh-namecard-tier', gallery).forEach(function(section){\r\n                var sectionTier = normalize(section.getAttribute('data-tier') || '');\r\n                var tierMatch = (currentTier === 'all' || currentTier === '' || sectionTier === currentTier);\r\n\r\n                var visibleCards = 0;\r\n                qsa('.gnh-namecard-card', section).forEach(function(card){\r\n                    var styleMatch = cardMatchesStyles(card, selectedSet);\r\n                    var show = tierMatch && styleMatch;\r\n                    card.style.display = show ? 'flex' : 'none';\r\n                    if (show) visibleCards++;\r\n                });\r\n\r\n                \/\/ Always show the section header when the tier filter matches so\r\n                \/\/ the style filter and template count remain visible. Hide the\r\n                \/\/ card grid when no cards match the selected styles.\r\n                var showSection = tierMatch;\r\n                section.style.display = showSection ? '' : 'none';\r\n                var grid = section.querySelector('.gnh-namecard-grid');\r\n                if (grid) {\r\n                    grid.style.display = (visibleCards > 0) ? '' : 'none';\r\n                }\r\n                if (visibleCards > 0) anyVisible = true;\r\n            });\r\n\r\n            qsa('.gnh-filter-chip[data-filter]', gallery).forEach(function(chip){\r\n                var chipFilter = normalize(chip.getAttribute('data-filter') || '');\r\n                if (chipFilter === currentTier) chip.classList.add('gnh-filter-chip-active');\r\n                else chip.classList.remove('gnh-filter-chip-active');\r\n            });\r\n\r\n            if (gallery) {\r\n                if (state.styles.length) gallery.classList.add('gnh-filter-active');\r\n                else gallery.classList.remove('gnh-filter-active');\r\n            }\r\n\r\n            renderActiveStylePills();\r\n            updateStyleToggleLabel();\r\n            updateDescToggles();\r\n            syncPhonePreviewScale();\r\n        }\r\n\r\n        function toggleStyleDropdown(contextBtn, forceOpen){\r\n            \/\/ If contextBtn is provided, toggle the menu within its filter-wrap. If not provided, operate on all menus.\r\n            if (contextBtn) {\r\n                var wrap = contextBtn.closest('.gnh-style-filter-wrap');\r\n                if (!wrap) return;\r\n                var menu = wrap.querySelector('.gnh-style-menu');\r\n                var btn = contextBtn;\r\n                if (!menu || !btn) return;\r\n                var open = typeof forceOpen === 'boolean' ? forceOpen : menu.hasAttribute('hidden');\r\n                if (open) {\r\n                    menu.removeAttribute('hidden');\r\n                    btn.setAttribute('aria-expanded', 'true');\r\n                    var input = menu.querySelector('.gnh-style-search');\r\n                    if (input) input.focus();\r\n                } else {\r\n                    menu.setAttribute('hidden', 'hidden');\r\n                    btn.setAttribute('aria-expanded', 'false');\r\n                }\r\n                return;\r\n            }\r\n            \/\/ No context: close all menus when requested\r\n            var menus = qsa('.gnh-style-menu', rootEl);\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            menus.forEach(function(m){ m.setAttribute('hidden', 'hidden'); });\r\n            btns.forEach(function(b){ b.setAttribute('aria-expanded', 'false'); });\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n        } else {\r\n            syncPhonePreviewScale(rootEl);\r\n            updateDescToggles();\r\n        }\r\n        window.addEventListener('resize', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n\r\n        \/\/ Attach direct click handlers as a fallback for style toggles\r\n        function attachStyleToggleHandlers(){\r\n            qsa('.gnh-style-toggle', rootEl).forEach(function(btn){\r\n                \/\/ avoid double-binding\r\n                if (btn.__gnhToggleBound) return;\r\n                btn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); toggleStyleDropdown(btn); });\r\n                btn.__gnhToggleBound = true;\r\n            });\r\n        }\r\n        \/\/ Run once now and also after DOM ready just in case\r\n        attachStyleToggleHandlers();\r\n\r\n        document.addEventListener('click', function(e){\r\n            if (!rootEl.contains(e.target)) {\r\n                toggleStyleDropdown(false);\r\n                return;\r\n            }\r\n\r\n            var activePillRemove = e.target.closest('.gnh-active-style-pill button');\r\n            if (activePillRemove) {\r\n                e.preventDefault();\r\n                var pill = activePillRemove.closest('.gnh-active-style-pill');\r\n                if (pill) {\r\n                    var token = normalize(pill.getAttribute('data-style-token') || '');\r\n                    state.styles = state.styles.filter(function(x){ return x !== token; });\r\n                    qsa('.gnh-style-check', rootEl).forEach(function(check){\r\n                        if (normalize(check.value) === token) check.checked = false;\r\n                    });\r\n                    applyFilters();\r\n                }\r\n                return;\r\n            }\r\n\r\n            var clearBtn = e.target.closest('.gnh-style-clear');\r\n            if (clearBtn) {\r\n                e.preventDefault();\r\n                state.styles = [];\r\n                qsa('.gnh-style-check', rootEl).forEach(function(check){ check.checked = false; });\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var styleToggle = e.target.closest('.gnh-style-toggle');\r\n            if (styleToggle) {\r\n                e.preventDefault();\r\n                toggleStyleDropdown(styleToggle);\r\n                return;\r\n            }\r\n\r\n            var filterBtn = e.target.closest('.gnh-filter-chip[data-filter], .gnh-hero-pill');\r\n            if (filterBtn) {\r\n                e.preventDefault();\r\n                if (tierLocked) {\r\n                    \/\/ ignore attempts to change tier when shortcode specified a tier\r\n                    return;\r\n                }\r\n                var filter = String(filterBtn.getAttribute('data-filter') || 'all').toLowerCase();\r\n                state.tier = filter;\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var descToggleBtn = e.target.closest('.gnh-desc-toggle');\r\n            if (descToggleBtn) {\r\n                e.preventDefault();\r\n                var card = descToggleBtn.closest('.gnh-namecard-card');\r\n                if (!card) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                if (!descText) return;\r\n                var isCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                var more = descToggleBtn.getAttribute('data-more') || 'More';\r\n                var less = descToggleBtn.getAttribute('data-less') || 'Less';\r\n                if (isCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = less;\r\n                    descToggleBtn.setAttribute('aria-expanded','true');\r\n                } else {\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = more;\r\n                    descToggleBtn.setAttribute('aria-expanded','false');\r\n                }\r\n                \/\/ Adjust phone preview sizing if the card height changed\r\n                syncPhonePreviewScale(card);\r\n                return;\r\n            }\r\n\r\n            \/\/ Close dropdown when clicking outside it.\r\n            if (!e.target.closest('.gnh-style-filter-wrap')) {\r\n                toggleStyleDropdown(false);\r\n            }\r\n\r\n            var t = e.target.closest('.gnh-tier-view-all');\r\n            if (!t) return;\r\n            e.preventDefault();\r\n            var section = t.closest('.gnh-namecard-tier');\r\n            if (!section) return;\r\n            var grid = section.querySelector('.gnh-namecard-grid');\r\n            if (!grid) return;\r\n            var isExpanded = section.classList.contains('gnh-expanded');\r\n            \/\/ compute collapsed height (first 3 items)\r\n            var items = grid.querySelectorAll('.gnh-namecard-card');\r\n            var collapsedH = 0;\r\n            for (var i=0;i<Math.min(3, items.length); i++){\r\n                collapsedH += items[i].offsetHeight + parseFloat(getComputedStyle(items[i]).marginBottom||0);\r\n            }\r\n            \/\/ maintain scroll position anchor\r\n            var scrollY = window.scrollY || window.pageYOffset;\r\n            if (!isExpanded){\r\n                \/\/ expand: unhide extras first so height can be measured\r\n                qsa('.gnh-hidden-template', grid).forEach(function(el){ el.classList.remove('gnh-hidden-template'); });\r\n                updateDescToggles(section);\r\n                syncPhonePreviewScale(section);\r\n                \/\/ set starting maxHeight to collapsedH then animate to full\r\n                grid.style.maxHeight = collapsedH + 'px';\r\n                var fullH = grid.scrollHeight;\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = fullH + 'px';\r\n                });\r\n                section.classList.add('gnh-expanded');\r\n                t.textContent = 'Show Less';\r\n                grid.addEventListener('transitionend', function handler(){ grid.style.maxHeight = ''; grid.style.transition = ''; grid.removeEventListener('transitionend', handler); });\r\n            } else {\r\n                \/\/ collapse: animate to collapsedH then hide extras\r\n                var curH = grid.scrollHeight;\r\n                grid.style.maxHeight = curH + 'px';\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = collapsedH + 'px';\r\n                });\r\n                grid.addEventListener('transitionend', function handler(){\r\n                    \/\/ hide items beyond 3\r\n                    var its = grid.querySelectorAll('.gnh-namecard-card');\r\n                    for (var j=3;j<its.length;j++){ its[j].classList.add('gnh-hidden-template'); }\r\n                    updateDescToggles(section);\r\n                    grid.style.maxHeight = '';\r\n                    grid.style.transition = '';\r\n                    grid.removeEventListener('transitionend', handler);\r\n                });\r\n                section.classList.remove('gnh-expanded');\r\n                var tier = t.getAttribute('data-tier') || '';\r\n                t.textContent = 'View All ' + (tier.charAt(0).toUpperCase() + tier.slice(1)) + ' Templates \u2192';\r\n            }\r\n            \/\/ restore scroll position to avoid jump\r\n            requestAnimationFrame(function(){ window.scrollTo(0, scrollY); });\r\n            setTimeout(function(){ syncPhonePreviewScale(section); }, 380);\r\n        });\r\n\r\n        document.addEventListener('change', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var check = e.target.closest('.gnh-style-check');\r\n            if (!check) return;\r\n            var token = normalize(check.value);\r\n            if (!token) return;\r\n            if (check.checked) {\r\n                if (state.styles.indexOf(token) === -1) state.styles.push(token);\r\n            } else {\r\n                state.styles = state.styles.filter(function(x){ return x !== token; });\r\n            }\r\n            \/\/ Ensure all checkboxes with same token are synced across tiers\r\n            qsa('.gnh-style-check', rootEl).forEach(function(c){ if (normalize(c.value) === token) c.checked = (state.styles.indexOf(token) !== -1); });\r\n            applyFilters();\r\n        });\r\n\r\n        document.addEventListener('input', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var input = e.target.closest('.gnh-style-search');\r\n            if (!input) return;\r\n            var q = normalize(input.value);\r\n            var menu = input.closest('.gnh-style-menu');\r\n            if (!menu) return;\r\n            var opts = Array.prototype.slice.call(menu.querySelectorAll('.gnh-style-option'));\r\n            opts.forEach(function(opt){\r\n                var label = normalize(opt.textContent || '');\r\n                opt.style.display = (q === '' || label.indexOf(q) !== -1) ? '' : 'none';\r\n            });\r\n        });\r\n\r\n        applyFilters();\r\n    })();\r\n\r\n    \/* Load Lucide icons dynamically and convert placeholders into SVG *\/\r\n    (function(){\r\n        if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function'){\r\n            try{ window.lucide.createIcons(); }catch(e){}\r\n            return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = 'https:\/\/unpkg.com\/lucide@latest\/dist\/lucide.min.js';\r\n        s.async = true;\r\n        s.onload = function(){ try{ if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function') window.lucide.createIcons(); }catch(e){} };\r\n        document.head.appendChild(s);\r\n    })();\r\n<\/script>[\/et_pb_tab][\/et_pb_tabs][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TEMPLATE GALLERYChoose the SmartLink Experience That Matches Your Ambition Browse professional templates designed to help you make the right first impression and grow your business.<div class=\"gnh-namecard-gallery gnh-single-tier\" data-initial-tier=\"foundation\"><div class=\"gnh-gallery-filter-bar gnh-tier-tabs et_pb_tabs\"><ul class=\"gnh-tier-filter-group et_pb_tabs_controls\"><li><button type=\"button\" class=\"gnh-filter-chip gnh-filter-chip-active\" data-filter=\"all\">All Templates<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"foundation\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Foundation<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"professional\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Professional<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"elite\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Elite<\/button><\/li><\/ul><span class=\"gnh-filter-divider\" aria-hidden=\"true\"><\/span><\/div><section class=\"gnh-namecard-tier gnh-tier-foundation\" data-tier=\"foundation\"><div class=\"gnh-namecard-section-inner\"><div class=\"gnh-namecard-tier-header\"><div class=\"gnh-namecard-tier-meta\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i><div class=\"gnh-tier-title-wrap\"><h2 class=\"gnh-namecard-tier-title\">Foundation<\/h2><p class=\"gnh-tier-desc\">Simple. Professional. Ready to launch.<\/p><\/div><\/div><div class=\"gnh-tier-right\"><div class=\"gnh-style-filter-wrap\"><button type=\"button\" class=\"gnh-filter-chip gnh-style-toggle\" aria-expanded=\"false\" aria-controls=\"gnh-style-menu-foundation\">All Styles <span class=\"gnh-style-caret\" aria-hidden=\"true\">&#9662;<\/span><\/button><div id=\"gnh-style-menu-foundation\" class=\"gnh-style-menu\" hidden><input type=\"search\" class=\"gnh-style-search\" placeholder=\"Search styles...\" aria-label=\"Search styles\"><div class=\"gnh-style-options\"><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"blue-theme\" data-style-label=\"blue theme\"><span class=\"gnh-style-option-label\">blue theme<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"minimal\" data-style-label=\"minimal\"><span class=\"gnh-style-option-label\">minimal<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"modern\" data-style-label=\"modern\"><span class=\"gnh-style-option-label\">modern<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><\/div><div class=\"gnh-style-actions\"><button type=\"button\" class=\"gnh-style-clear\">Clear all<\/button><\/div><\/div><\/div><div class=\"gnh-tier-count\">1 Templates<\/div><\/div><\/div><div class=\"gnh-active-style-pills\" hidden><\/div><div class=\"gnh-namecard-grid\"><article class=\"gnh-namecard-card\" data-template-id=\"7\" data-idx=\"0\" data-styles=\"minimal,modern,blue-theme\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/teresalim\/\" title=\"Advisor Essentials Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">Advisor Essentials<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">minimal<\/span><span class=\"gnh-style-pill\">modern<\/span><span class=\"gnh-style-pill\">blue theme<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">Designed for advisors who value simplicity and professionalism. This template showcases your profile, expertise, and key contact actions in a clean, focused layout that encourages enquiries without overwhelming visitors.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/teresalim\/\" aria-label=\"Live preview: Advisor Essentials\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><\/div><\/div><\/section><\/div><style>\r\n        .gnh-namecard-gallery{--gnh-tier-icon-size:44px;--gnh-tier-icon-svg-size:22px;padding:24px 20px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e2e8f0;border-radius:20px}\r\n        .gnh-namecard-hero{margin-bottom:20px}\r\n        .gnh-namecard-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6366f1;margin-bottom:10px}\r\n        .gnh-namecard-hero-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:#0f172a;letter-spacing:-0.01em}\r\n        .gnh-namecard-hero-sub{margin:0;max-width:760px;color:#475467;font-size:15px;line-height:1.7}\r\n        .gnh-hero-tier-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}\r\n        .gnh-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;appearance:none}\r\n        .gnh-hero-pill-foundation{border-color:#b7e4c7;color:#15803d;background:#f0fdf4}\r\n        .gnh-hero-pill-professional{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}\r\n        .gnh-hero-pill-elite{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}\r\n        .gnh-gallery-filter-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:14px;padding:12px 0 18px;margin-bottom:12px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}\r\n        .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px}\r\n        \/* Reset external tabs framework defaults to prevent overlap\/float behavior *\/\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar.et_pb_tabs{border:0;box-shadow:none;background:transparent}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls li{float:none !important;position:static !important;list-style:none !important;margin:0 !important;padding:0 !important;width:auto !important;clear:none !important}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:before,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:after{content:none !important;display:none !important}\r\n        \/* Shortcode-only: render icons inline at the left of the label as pill buttons *\/\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:inline-flex;flex:0 0 auto}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e5e9ef;background:#fff;color:#101b42;font-weight:700;min-height:42px;white-space:nowrap;line-height:1}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;inset:auto !important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;margin-right:8px;flex:0 0 auto;color:inherit;vertical-align:middle}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon svg{display:block;width:18px;height:18px;stroke:currentColor}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip.gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-filter-divider{width:1px;align-self:stretch;min-height:34px;background:#dbe3ef;flex:0 0 1px}\r\n        .gnh-style-filter-wrap{position:relative;flex:0 0 auto}\r\n        .gnh-filter-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:12px;font-weight:600;cursor:pointer;appearance:none}\r\n        .gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-style-caret{margin-left:8px;font-size:11px;opacity:.75}\r\n        .gnh-style-menu{position:absolute;top:44px;left:0;z-index:20;min-width:280px;max-width:340px;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.12);padding:10px}\r\n        .gnh-style-search{width:100%;padding:8px 10px;border:1px solid #dbe3ef;border-radius:8px;font-size:13px;margin-bottom:8px}\r\n        .gnh-style-options{max-height:220px;overflow:auto;padding-right:2px}\r\n        .gnh-style-option{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#1f2937;font-size:13px;cursor:pointer}\r\n        .gnh-style-option-count{margin-left:auto;color:#64748b;font-size:12px}\r\n        .gnh-style-actions{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}\r\n        .gnh-style-clear{border:0;background:transparent;color:#2563eb;font-weight:600;font-size:12px;cursor:pointer}\r\n        .gnh-style-empty{margin:6px 2px;color:#64748b;font-size:12px}\r\n        .gnh-active-style-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n        .gnh-active-style-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8eefc;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600}\r\n        .gnh-active-style-pill button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}\r\n        .gnh-selected-filter-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}\r\n        .gnh-selected-filter-pill-foundation{background:#f0fdf4;color:#15803d;border-color:#d1f6d7}\r\n        .gnh-selected-filter-pill-professional{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}\r\n        .gnh-selected-filter-pill-elite{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-namecard-tier{margin-bottom:56px}\r\n        .gnh-namecard-section-inner{max-width:1320px;margin:0 auto;border-radius:24px}\r\n        .gnh-tier-foundation .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-professional .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-elite .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-namecard-tier-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}\r\n        .gnh-namecard-tier-meta{display:flex;align-items:center;gap:12px}\r\n        \/* Keep header icon in normal flow even when parent containers use .gnh-tier-tabs styles *\/\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-icon{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:flex-start}\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-title-wrap{display:flex;flex-direction:column;justify-content:flex-start}\r\n        .gnh-tier-icon{width:var(--gnh-tier-icon-size);height:var(--gnh-tier-icon-size);min-width:var(--gnh-tier-icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0f172a;}\r\n        .gnh-tier-icon svg{display:block;width:var(--gnh-tier-icon-svg-size);height:var(--gnh-tier-icon-svg-size);stroke:currentColor}\r\n        .gnh-tier-title-wrap .gnh-namecard-tier-title{margin:0;font-size:25px;line-height:1;letter-spacing:-0.01em;font-weight:700;color:#0f172a}\r\n        .gnh-tier-desc{color:#64748B;font-size:15px;font-weight:400}\r\n        .gnh-tier-right{display:flex;flex-direction:row;align-items:center;gap:8px}\r\n        .gnh-tier-count{font-weight:700;color:#0f172a;font-size:13px;text-transform:none;letter-spacing:0;background:#ffffff;border:1px solid #dbe3ef;padding:6px 12px;border-radius:12px;min-width:86px;text-align:center;white-space:nowrap;word-break:keep-all;flex:0 0 auto}\r\n        .gnh-namecard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px;align-items:stretch}\r\n        .gnh-namecard-card{display:flex;flex-direction:column;gap:20px;border:1px solid #E8EDF5;border-radius:20px;padding:24px;background:#fff;align-items:stretch;box-shadow:0 12px 32px rgba(15,23,42,.06);min-height:250px;transition:transform 250ms ease,box-shadow 250ms ease}\r\n        .gnh-namecard-card:hover,.gnh-namecard-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}\r\n        .gnh-hidden-template{display:none}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-namecard-card.gnh-hidden-template{display:flex}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-tier-footer{display:none}\r\n        .gnh-namecard-left{display:flex;align-items:center;justify-content:center;width:100%}\r\n        .gnh-phone-preview{position:relative;z-index:0;overflow:visible}\r\n        .gnh-template-readiness-phone{position:relative;border-radius:14px;padding:5px;background:#0f172a;height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;width:100%;min-height:200px;overflow:hidden}\r\n        .gnh-namecard-iframe{width:84%;height:86%;border:0;border-radius:10px;background:#fff;max-width:340px;transform-origin:center center;transition:transform 200ms ease;position:relative;z-index:10}\r\n        .gnh-namecard-right{min-width:0;display:flex;flex-direction:column;justify-content:space-between;width:100%}\r\n        .gnh-namecard-name{margin:0 0 8px;font-size:22px;line-height:1.15;color:#0F172A;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-preview-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;background:#e2e8f0;color:#334155}\r\n        .gnh-preview-badge-overlay{position:absolute;top:-10px;left:14px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:80;box-shadow:0 6px 14px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.65);pointer-events:none}\r\n        .gnh-namecard-styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}\r\n        .gnh-style-pill{background:#F8FAFC;color:#1e293b;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;height:auto}\r\n        .gnh-namecard-desc{color:#64748B;margin:0 0 10px;font-size:15px;line-height:1.6}\r\n        .gnh-desc-text.gnh-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-desc-toggle{border:0;background:transparent;color:#2563eb;font-weight:700;padding:0 0;font-size:13px;cursor:pointer;display:inline-block;margin-left:8px;vertical-align:middle}\r\n        .gnh-template-tier-pill{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#f0fdf4;color:#15803d;margin-bottom:10px}\r\n        .gnh-namecard-actions{display:flex;flex-direction:column;gap:12px}\r\n        .gnh-namecard-preview.button,.gnh-namecard-choose.button{height:42px;line-height:40px;padding:0 16px;font-size:14px;border-radius:10px;width:100%;box-sizing:border-box}\r\n        .gnh-namecard-preview.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;background:#fff;border:1px solid #dbe3ef;color:#1f2937;font-weight:500;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04)}\r\n        .gnh-namecard-preview.button:hover,.gnh-namecard-preview.button:focus{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}\r\n        .gnh-namecard-choose.button{background:#22c55e;border-color:#22c55e;color:#fff;display:none !important}\r\n        .gnh-tier-view-all{margin-left:8px;font-weight:600}\r\n        .gnh-namecard-preview svg{width:18px;height:18px;display:block;flex:0 0 auto}\r\n        .gnh-tier-foundation .gnh-namecard-tier-title{color:#16a34a}\r\n        .gnh-tier-foundation .gnh-tier-icon{color:#16a34a;border-color:#bbf7d0}\r\n        .gnh-tier-foundation .gnh-preview-badge{background:#dcfce7;color:#15803d}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button{background:#16a34a;border-color:#16a34a;color:#fff}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button:hover,.gnh-tier-foundation .gnh-namecard-preview.button:focus{background:#14532d;border-color:#14532d;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-tier-title{color:#2563eb}\r\n        .gnh-tier-professional .gnh-tier-icon{color:#2563eb;border-color:#bfdbfe}\r\n        .gnh-tier-professional .gnh-preview-badge{background:#dbeafe;color:#1d4ed8}\r\n        .gnh-tier-professional .gnh-namecard-preview.button{background:#2563eb;border-color:#2563eb;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-preview.button:hover,.gnh-tier-professional .gnh-namecard-preview.button:focus{background:#1f56d1;border-color:#1f56d1;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-tier-title{color:#7c3aed}\r\n        .gnh-tier-elite .gnh-tier-icon{color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-tier-elite .gnh-preview-badge{background:#ede9fe;color:#6d28d9}\r\n        .gnh-tier-elite .gnh-namecard-preview.button{background:#7c3aed;border-color:#7c3aed;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-preview.button:hover,.gnh-tier-elite .gnh-namecard-preview.button:focus{background:#6826d6;border-color:#6826d6;color:#fff}\r\n        @media (max-width:1280px){\r\n            .gnh-namecard-card{gap:18px}\r\n        }\r\n        @media (max-width:1024px){\r\n            .gnh-gallery-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0 14px}\r\n            .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}\r\n            .gnh-tier-filter-group li{flex:0 0 auto}\r\n            .gnh-tier-filter-group .gnh-filter-chip{flex:0 0 auto;white-space:nowrap}\r\n            .gnh-style-filter-wrap{position:static;width:100%}\r\n            .gnh-filter-chip{justify-content:center;min-height:38px}\r\n            .gnh-style-toggle{width:100%;justify-content:space-between}\r\n            .gnh-filter-divider{display:none}\r\n            .gnh-style-menu{position:static;top:auto;left:auto;right:auto;z-index:1;width:100%;min-width:0;max-width:none;margin-top:8px}\r\n            .gnh-style-options{max-height:180px}\r\n            \/* Tablet: keep horizontal layout but reduce spacing *\/\r\n            .gnh-namecard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\r\n            .gnh-namecard-card{gap:16px}\r\n            .gnh-template-readiness-phone{height:160px;min-height:160px}\r\n            .gnh-namecard-iframe{height:150px}\r\n            \/* Single-tier header: keep controls inline and avoid count wrapping *\/\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap;align-items:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-filter-wrap{width:auto}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-toggle{width:auto;min-width:0;justify-content:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n        }\r\n        @media (max-width:640px){\r\n            .gnh-namecard-gallery{padding:18px 14px}\r\n            .gnh-gallery-filter-bar{gap:12px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:block;min-width:0}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{width:100%;min-width:0;padding:8px 10px;font-size:14px;gap:8px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{margin-right:4px;width:22px;height:22px}\r\n            .gnh-namecard-hero-title{font-size:28px}\r\n            .gnh-namecard-grid{grid-template-columns:1fr;gap:28px}\r\n            .gnh-namecard-card{min-height:unset;padding:16px;border-radius:14px}\r\n            .gnh-template-readiness-phone{height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            \/* Phone preview scale on card hover *\/\r\n            .gnh-namecard-card:hover .gnh-namecard-iframe{transform:scale(1.03)}\r\n            \/* Buttons transition *\/\r\n            .gnh-namecard-preview.button,.gnh-namecard-choose.button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}\r\n            .gnh-namecard-card{display:flex;flex-direction:column;align-items:stretch}\r\n            .gnh-namecard-left{flex:0 0 auto;margin:0 auto}\r\n            .gnh-template-readiness-phone{margin:0 auto;height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            .gnh-namecard-right{padding-top:10px}\r\n            .gnh-namecard-tier-header{align-items:flex-start;gap:10px;flex-direction:column}\r\n            .gnh-tier-right{align-items:flex-start;flex-direction:row;gap:8px}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n            .gnh-tier-icon{width:40px;height:40px;min-width:40px}\r\n            .gnh-tier-icon svg{width:20px;height:20px}\r\n        }\r\n        \/* When gallery is rendered as a single tier via shortcode, visually disable top-tier chips *\/\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-tier-filter-group .gnh-filter-chip{opacity:.6;cursor:default;pointer-events:none}\r\n          \/* In single-tier mode, align the tier meta and header to the top so icon sits next to the heading.\r\n              Use stronger selectors and align-self to avoid interference when the shortcode is placed inside\r\n              external tab containers that may also use the `gnh-tier-tabs` class. *\/\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-header{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta .gnh-tier-icon{align-self:flex-start !important;margin-top:2px}\r\n        @media (max-width:420px){\r\n            .gnh-tier-filter-group{gap:6px}\r\n        }\r\n\r\n        \/* Phone preview CSS moved to site global snippet; removed from inline styles. *\/\r\n\r\n        .gnh-feature-list{list-style:none!important;margin:24px 0 0!important;padding:0!important}\r\n        .gnh-feature-list li{position:relative;margin:0 0 16px!important;padding:0 0 0 32px!important;color:#16254a;font-size:16px;font-weight:500;line-height:1.45}\r\n        .gnh-feature-list li::marker{content:\"\"}\r\n        .gnh-feature-list li::before{content:\"\u2713\";position:absolute;left:0;top:.1em;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;color:#18a866;font-size:12px;font-weight:800;background:transparent;border:1.8px solid #18a866;border-radius:50%}\r\n        .gnh-feature-list li:last-child{margin-bottom:0!important}\r\n        @media (max-width:980px){.gnh-feature-list li{margin-bottom:14px!important;padding-left:30px!important;font-size:15px}}\r\n        @media (max-width:767px){.gnh-feature-list{margin-top:20px!important}.gnh-feature-list li{margin-bottom:13px!important;padding-left:28px!important;font-size:14px}.gnh-feature-list li::before{width:17px;height:17px;font-size:11px}}\r\n        \/* Single-tier mode: collapse outer frame and top filter, make inner section full width *\/\r\n        .gnh-namecard-gallery.gnh-single-tier{padding:0;background:transparent;border:0;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-gallery-filter-bar{display:none}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-section-inner{max-width:100%;margin:0 auto;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier{margin-bottom:36px}\r\n    <\/style><script>\r\n(function(){\r\n        function syncPhonePreviewScale(scope){\r\n            var scanRoot = scope || rootEl || document;\r\n            var roots = Array.prototype.slice.call(scanRoot.querySelectorAll('.gnh-phone-screen'));\r\n            roots.forEach(function(root){\r\n                if (!root) return;\r\n                var iframe = root.querySelector('iframe');\r\n                if (!iframe) return;\r\n\r\n                \/\/ Match native card viewport ratio (380x730) without distortion.\r\n                var nativeW = 380;\r\n                var nativeH = 730;\r\n                var boxW = root.clientWidth || 0;\r\n                var boxH = root.clientHeight || 0;\r\n                if (boxW < 1 || boxH < 1) return;\r\n\r\n                \/\/ Contain fit: scale the preview so the whole phone viewport fits inside the frame\r\n                \/\/ (prefer shrinking instead of cropping) and center it within the shell.\r\n                var scale = Math.min(boxW \/ nativeW, boxH \/ nativeH, 1);\r\n                iframe.style.transform = 'scale(' + scale + ')';\r\n                iframe.style.transformOrigin = 'top left';\r\n\r\n                var scaledW = nativeW * scale;\r\n                var scaledH = nativeH * scale;\r\n                \/\/ Center the scaled iframe within the available box area\r\n                iframe.style.left = Math.max(0, ((boxW - scaledW) \/ 2)) + 'px';\r\n                iframe.style.top = Math.max(0, ((boxH - scaledH) \/ 2)) + 'px';\r\n            });\r\n        }\r\n\r\n        \/\/ Scope all behavior to this specific gallery instance so multiple shortcodes\r\n        \/\/ on the same page do not interfere with each other.\r\n        var scriptEl = document.currentScript;\r\n        var rootEl = scriptEl ? scriptEl.previousElementSibling : null;\r\n        if (!rootEl || !rootEl.classList || !rootEl.classList.contains('gnh-namecard-gallery')) {\r\n            rootEl = scriptEl && scriptEl.parentElement ? scriptEl.parentElement.querySelector('.gnh-namecard-gallery') : document.querySelector('.gnh-namecard-gallery');\r\n        }\r\n        if (!rootEl) return;\r\n\r\n        function qs(sel, ctx){ return (ctx||rootEl||document).querySelector(sel); }\r\n        function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||rootEl||document).querySelectorAll(sel)); }\r\n\r\n        var state = {\r\n            tier: (function(){\r\n                var t = String(rootEl.getAttribute('data-initial-tier') || 'all').toLowerCase();\r\n                if (['foundation','professional','elite','all'].indexOf(t) === -1) t = 'all';\r\n                return t;\r\n            })(),\r\n            styles: []\r\n        };\r\n        \/\/ If the gallery was initialized with a specific tier (shortcode attribute),\r\n        \/\/ lock the tier so filter chips cannot change the displayed tier.\r\n        var tierLocked = (state.tier && state.tier !== 'all');\r\n        var initialTier = state.tier;\r\n\r\n        function normalize(v){ return String(v || '').toLowerCase(); }\r\n\r\n        function getSelectedStyleSet(){\r\n            var set = {};\r\n            state.styles.forEach(function(s){ set[s] = true; });\r\n            return set;\r\n        }\r\n\r\n        function cardMatchesStyles(card, selectedSet){\r\n            if (!state.styles.length) return true;\r\n            var raw = normalize(card.getAttribute('data-styles') || '');\r\n            if (!raw) return false;\r\n            var tokens = raw.split(',').map(function(x){ return normalize(x); }).filter(Boolean);\r\n            for (var i = 0; i < state.styles.length; i++) {\r\n                if (tokens.indexOf(state.styles[i]) !== -1) return true;\r\n            }\r\n            return false;\r\n        }\r\n\r\n        function renderActiveStylePills(){\r\n            \/\/ Update all global pill containers (we keep one at top-level)\r\n            var wraps = qsa('.gnh-active-style-pills', rootEl);\r\n            if (!wraps || !wraps.length) return;\r\n            wraps.forEach(function(wrap){\r\n                wrap.innerHTML = '';\r\n                if (!state.styles.length) { wrap.hidden = true; return; }\r\n                var checks = qsa('.gnh-style-check', rootEl);\r\n                var labelMap = {};\r\n                checks.forEach(function(check){ labelMap[normalize(check.value)] = String(check.getAttribute('data-style-label') || check.value); });\r\n                state.styles.forEach(function(token){\r\n                    var pill = document.createElement('span');\r\n                    pill.className = 'gnh-active-style-pill';\r\n                    pill.setAttribute('data-style-token', token);\r\n                    pill.innerHTML = '<span>' + (labelMap[token] || token) + '<\/span><button type=\"button\" aria-label=\"Remove style\">&times;<\/button>';\r\n                    wrap.appendChild(pill);\r\n                });\r\n                wrap.hidden = false;\r\n            });\r\n        }\r\n\r\n        function updateDescToggles(scope){\r\n            \/\/ Show \"More\" toggle only when description is actually truncated.\r\n            var scanRoot = scope || rootEl;\r\n            qsa('.gnh-namecard-card', scanRoot).forEach(function(card){\r\n                \/\/ Skip hidden cards; measure when they become visible.\r\n                if (card.offsetParent === null) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                var btn = card.querySelector('.gnh-desc-toggle');\r\n                if (!descText || !btn) return;\r\n                \/\/ Ensure collapsed state for measurement\r\n                var wasCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                descText.classList.add('gnh-desc-collapsed');\r\n                \/\/ Reliable overflow check: compare clamped height vs natural content height\r\n                \/\/ using a temporary clone with clamp removed.\r\n                var clampedHeight = descText.getBoundingClientRect().height;\r\n                var naturalHeight = clampedHeight;\r\n                var clone = descText.cloneNode(true);\r\n                clone.classList.remove('gnh-desc-collapsed');\r\n                clone.style.position = 'absolute';\r\n                clone.style.visibility = 'hidden';\r\n                clone.style.pointerEvents = 'none';\r\n                clone.style.height = 'auto';\r\n                clone.style.maxHeight = 'none';\r\n                clone.style.overflow = 'visible';\r\n                clone.style.display = 'block';\r\n                clone.style.whiteSpace = 'normal';\r\n                clone.style.webkitLineClamp = 'unset';\r\n                clone.style.WebkitLineClamp = 'unset';\r\n                clone.style.width = Math.max(1, descText.getBoundingClientRect().width) + 'px';\r\n                descText.parentNode.appendChild(clone);\r\n                naturalHeight = clone.getBoundingClientRect().height;\r\n                clone.parentNode.removeChild(clone);\r\n\r\n                var isOverflowing = naturalHeight > clampedHeight + 1;\r\n                if (isOverflowing) {\r\n                    btn.style.display = 'inline-block';\r\n                    btn.setAttribute('aria-hidden','false');\r\n                } else {\r\n                    btn.style.display = 'none';\r\n                    btn.setAttribute('aria-hidden','true');\r\n                    \/\/ ensure aria-expanded is false when hidden\r\n                    btn.setAttribute('aria-expanded','false');\r\n                    \/\/ also ensure description stays collapsed\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                }\r\n                \/\/ restore previous expanded state if it was expanded\r\n                if (!wasCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    btn.setAttribute('aria-expanded','true');\r\n                    btn.textContent = btn.getAttribute('data-less') || 'Less';\r\n                } else {\r\n                    btn.textContent = btn.getAttribute('data-more') || 'More';\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateStyleToggleLabel(){\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            if (!btns || !btns.length) return;\r\n            var base = 'All Styles';\r\n            btns.forEach(function(btn){\r\n                if (!state.styles.length) {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = base + ' ';\r\n                } else {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = state.styles.length + ' style' + (state.styles.length > 1 ? 's' : '') + ' selected ';\r\n                }\r\n            });\r\n        }\r\n\r\n        function applyFilters(){\r\n            var gallery = rootEl;\r\n            var selectedSet = getSelectedStyleSet();\r\n            var currentTier = tierLocked ? initialTier : state.tier;\r\n            var anyVisible = false;\r\n\r\n            qsa('.gnh-namecard-tier', gallery).forEach(function(section){\r\n                var sectionTier = normalize(section.getAttribute('data-tier') || '');\r\n                var tierMatch = (currentTier === 'all' || currentTier === '' || sectionTier === currentTier);\r\n\r\n                var visibleCards = 0;\r\n                qsa('.gnh-namecard-card', section).forEach(function(card){\r\n                    var styleMatch = cardMatchesStyles(card, selectedSet);\r\n                    var show = tierMatch && styleMatch;\r\n                    card.style.display = show ? 'flex' : 'none';\r\n                    if (show) visibleCards++;\r\n                });\r\n\r\n                \/\/ Always show the section header when the tier filter matches so\r\n                \/\/ the style filter and template count remain visible. Hide the\r\n                \/\/ card grid when no cards match the selected styles.\r\n                var showSection = tierMatch;\r\n                section.style.display = showSection ? '' : 'none';\r\n                var grid = section.querySelector('.gnh-namecard-grid');\r\n                if (grid) {\r\n                    grid.style.display = (visibleCards > 0) ? '' : 'none';\r\n                }\r\n                if (visibleCards > 0) anyVisible = true;\r\n            });\r\n\r\n            qsa('.gnh-filter-chip[data-filter]', gallery).forEach(function(chip){\r\n                var chipFilter = normalize(chip.getAttribute('data-filter') || '');\r\n                if (chipFilter === currentTier) chip.classList.add('gnh-filter-chip-active');\r\n                else chip.classList.remove('gnh-filter-chip-active');\r\n            });\r\n\r\n            if (gallery) {\r\n                if (state.styles.length) gallery.classList.add('gnh-filter-active');\r\n                else gallery.classList.remove('gnh-filter-active');\r\n            }\r\n\r\n            renderActiveStylePills();\r\n            updateStyleToggleLabel();\r\n            updateDescToggles();\r\n            syncPhonePreviewScale();\r\n        }\r\n\r\n        function toggleStyleDropdown(contextBtn, forceOpen){\r\n            \/\/ If contextBtn is provided, toggle the menu within its filter-wrap. If not provided, operate on all menus.\r\n            if (contextBtn) {\r\n                var wrap = contextBtn.closest('.gnh-style-filter-wrap');\r\n                if (!wrap) return;\r\n                var menu = wrap.querySelector('.gnh-style-menu');\r\n                var btn = contextBtn;\r\n                if (!menu || !btn) return;\r\n                var open = typeof forceOpen === 'boolean' ? forceOpen : menu.hasAttribute('hidden');\r\n                if (open) {\r\n                    menu.removeAttribute('hidden');\r\n                    btn.setAttribute('aria-expanded', 'true');\r\n                    var input = menu.querySelector('.gnh-style-search');\r\n                    if (input) input.focus();\r\n                } else {\r\n                    menu.setAttribute('hidden', 'hidden');\r\n                    btn.setAttribute('aria-expanded', 'false');\r\n                }\r\n                return;\r\n            }\r\n            \/\/ No context: close all menus when requested\r\n            var menus = qsa('.gnh-style-menu', rootEl);\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            menus.forEach(function(m){ m.setAttribute('hidden', 'hidden'); });\r\n            btns.forEach(function(b){ b.setAttribute('aria-expanded', 'false'); });\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n        } else {\r\n            syncPhonePreviewScale(rootEl);\r\n            updateDescToggles();\r\n        }\r\n        window.addEventListener('resize', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n\r\n        \/\/ Attach direct click handlers as a fallback for style toggles\r\n        function attachStyleToggleHandlers(){\r\n            qsa('.gnh-style-toggle', rootEl).forEach(function(btn){\r\n                \/\/ avoid double-binding\r\n                if (btn.__gnhToggleBound) return;\r\n                btn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); toggleStyleDropdown(btn); });\r\n                btn.__gnhToggleBound = true;\r\n            });\r\n        }\r\n        \/\/ Run once now and also after DOM ready just in case\r\n        attachStyleToggleHandlers();\r\n\r\n        document.addEventListener('click', function(e){\r\n            if (!rootEl.contains(e.target)) {\r\n                toggleStyleDropdown(false);\r\n                return;\r\n            }\r\n\r\n            var activePillRemove = e.target.closest('.gnh-active-style-pill button');\r\n            if (activePillRemove) {\r\n                e.preventDefault();\r\n                var pill = activePillRemove.closest('.gnh-active-style-pill');\r\n                if (pill) {\r\n                    var token = normalize(pill.getAttribute('data-style-token') || '');\r\n                    state.styles = state.styles.filter(function(x){ return x !== token; });\r\n                    qsa('.gnh-style-check', rootEl).forEach(function(check){\r\n                        if (normalize(check.value) === token) check.checked = false;\r\n                    });\r\n                    applyFilters();\r\n                }\r\n                return;\r\n            }\r\n\r\n            var clearBtn = e.target.closest('.gnh-style-clear');\r\n            if (clearBtn) {\r\n                e.preventDefault();\r\n                state.styles = [];\r\n                qsa('.gnh-style-check', rootEl).forEach(function(check){ check.checked = false; });\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var styleToggle = e.target.closest('.gnh-style-toggle');\r\n            if (styleToggle) {\r\n                e.preventDefault();\r\n                toggleStyleDropdown(styleToggle);\r\n                return;\r\n            }\r\n\r\n            var filterBtn = e.target.closest('.gnh-filter-chip[data-filter], .gnh-hero-pill');\r\n            if (filterBtn) {\r\n                e.preventDefault();\r\n                if (tierLocked) {\r\n                    \/\/ ignore attempts to change tier when shortcode specified a tier\r\n                    return;\r\n                }\r\n                var filter = String(filterBtn.getAttribute('data-filter') || 'all').toLowerCase();\r\n                state.tier = filter;\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var descToggleBtn = e.target.closest('.gnh-desc-toggle');\r\n            if (descToggleBtn) {\r\n                e.preventDefault();\r\n                var card = descToggleBtn.closest('.gnh-namecard-card');\r\n                if (!card) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                if (!descText) return;\r\n                var isCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                var more = descToggleBtn.getAttribute('data-more') || 'More';\r\n                var less = descToggleBtn.getAttribute('data-less') || 'Less';\r\n                if (isCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = less;\r\n                    descToggleBtn.setAttribute('aria-expanded','true');\r\n                } else {\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = more;\r\n                    descToggleBtn.setAttribute('aria-expanded','false');\r\n                }\r\n                \/\/ Adjust phone preview sizing if the card height changed\r\n                syncPhonePreviewScale(card);\r\n                return;\r\n            }\r\n\r\n            \/\/ Close dropdown when clicking outside it.\r\n            if (!e.target.closest('.gnh-style-filter-wrap')) {\r\n                toggleStyleDropdown(false);\r\n            }\r\n\r\n            var t = e.target.closest('.gnh-tier-view-all');\r\n            if (!t) return;\r\n            e.preventDefault();\r\n            var section = t.closest('.gnh-namecard-tier');\r\n            if (!section) return;\r\n            var grid = section.querySelector('.gnh-namecard-grid');\r\n            if (!grid) return;\r\n            var isExpanded = section.classList.contains('gnh-expanded');\r\n            \/\/ compute collapsed height (first 3 items)\r\n            var items = grid.querySelectorAll('.gnh-namecard-card');\r\n            var collapsedH = 0;\r\n            for (var i=0;i<Math.min(3, items.length); i++){\r\n                collapsedH += items[i].offsetHeight + parseFloat(getComputedStyle(items[i]).marginBottom||0);\r\n            }\r\n            \/\/ maintain scroll position anchor\r\n            var scrollY = window.scrollY || window.pageYOffset;\r\n            if (!isExpanded){\r\n                \/\/ expand: unhide extras first so height can be measured\r\n                qsa('.gnh-hidden-template', grid).forEach(function(el){ el.classList.remove('gnh-hidden-template'); });\r\n                updateDescToggles(section);\r\n                syncPhonePreviewScale(section);\r\n                \/\/ set starting maxHeight to collapsedH then animate to full\r\n                grid.style.maxHeight = collapsedH + 'px';\r\n                var fullH = grid.scrollHeight;\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = fullH + 'px';\r\n                });\r\n                section.classList.add('gnh-expanded');\r\n                t.textContent = 'Show Less';\r\n                grid.addEventListener('transitionend', function handler(){ grid.style.maxHeight = ''; grid.style.transition = ''; grid.removeEventListener('transitionend', handler); });\r\n            } else {\r\n                \/\/ collapse: animate to collapsedH then hide extras\r\n                var curH = grid.scrollHeight;\r\n                grid.style.maxHeight = curH + 'px';\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = collapsedH + 'px';\r\n                });\r\n                grid.addEventListener('transitionend', function handler(){\r\n                    \/\/ hide items beyond 3\r\n                    var its = grid.querySelectorAll('.gnh-namecard-card');\r\n                    for (var j=3;j<its.length;j++){ its[j].classList.add('gnh-hidden-template'); }\r\n                    updateDescToggles(section);\r\n                    grid.style.maxHeight = '';\r\n                    grid.style.transition = '';\r\n                    grid.removeEventListener('transitionend', handler);\r\n                });\r\n                section.classList.remove('gnh-expanded');\r\n                var tier = t.getAttribute('data-tier') || '';\r\n                t.textContent = 'View All ' + (tier.charAt(0).toUpperCase() + tier.slice(1)) + ' Templates \u2192';\r\n            }\r\n            \/\/ restore scroll position to avoid jump\r\n            requestAnimationFrame(function(){ window.scrollTo(0, scrollY); });\r\n            setTimeout(function(){ syncPhonePreviewScale(section); }, 380);\r\n        });\r\n\r\n        document.addEventListener('change', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var check = e.target.closest('.gnh-style-check');\r\n            if (!check) return;\r\n            var token = normalize(check.value);\r\n            if (!token) return;\r\n            if (check.checked) {\r\n                if (state.styles.indexOf(token) === -1) state.styles.push(token);\r\n            } else {\r\n                state.styles = state.styles.filter(function(x){ return x !== token; });\r\n            }\r\n            \/\/ Ensure all checkboxes with same token are synced across tiers\r\n            qsa('.gnh-style-check', rootEl).forEach(function(c){ if (normalize(c.value) === token) c.checked = (state.styles.indexOf(token) !== -1); });\r\n            applyFilters();\r\n        });\r\n\r\n        document.addEventListener('input', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var input = e.target.closest('.gnh-style-search');\r\n            if (!input) return;\r\n            var q = normalize(input.value);\r\n            var menu = input.closest('.gnh-style-menu');\r\n            if (!menu) return;\r\n            var opts = Array.prototype.slice.call(menu.querySelectorAll('.gnh-style-option'));\r\n            opts.forEach(function(opt){\r\n                var label = normalize(opt.textContent || '');\r\n                opt.style.display = (q === '' || label.indexOf(q) !== -1) ? '' : 'none';\r\n            });\r\n        });\r\n\r\n        applyFilters();\r\n    })();\r\n\r\n    \/* Load Lucide icons dynamically and convert placeholders into SVG *\/\r\n    (function(){\r\n        if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function'){\r\n            try{ window.lucide.createIcons(); }catch(e){}\r\n            return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = 'https:\/\/unpkg.com\/lucide@latest\/dist\/lucide.min.js';\r\n        s.async = true;\r\n        s.onload = function(){ try{ if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function') window.lucide.createIcons(); }catch(e){} };\r\n        document.head.appendChild(s);\r\n    })();\r\n<\/script><div class=\"gnh-namecard-gallery gnh-single-tier\" data-initial-tier=\"professional\"><div class=\"gnh-gallery-filter-bar gnh-tier-tabs et_pb_tabs\"><ul class=\"gnh-tier-filter-group et_pb_tabs_controls\"><li><button type=\"button\" class=\"gnh-filter-chip gnh-filter-chip-active\" data-filter=\"all\">All Templates<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"foundation\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Foundation<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"professional\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Professional<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"elite\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Elite<\/button><\/li><\/ul><span class=\"gnh-filter-divider\" aria-hidden=\"true\"><\/span><\/div><section class=\"gnh-namecard-tier gnh-tier-professional\" data-tier=\"professional\"><div class=\"gnh-namecard-section-inner\"><div class=\"gnh-namecard-tier-header\"><div class=\"gnh-namecard-tier-meta\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i><div class=\"gnh-tier-title-wrap\"><h2 class=\"gnh-namecard-tier-title\">Professional<\/h2><p class=\"gnh-tier-desc\">Designed to convert visitors into real enquiries.<\/p><\/div><\/div><div class=\"gnh-tier-right\"><div class=\"gnh-style-filter-wrap\"><button type=\"button\" class=\"gnh-filter-chip gnh-style-toggle\" aria-expanded=\"false\" aria-controls=\"gnh-style-menu-professional\">All Styles <span class=\"gnh-style-caret\" aria-hidden=\"true\">&#9662;<\/span><\/button><div id=\"gnh-style-menu-professional\" class=\"gnh-style-menu\" hidden><input type=\"search\" class=\"gnh-style-search\" placeholder=\"Search styles...\" aria-label=\"Search styles\"><div class=\"gnh-style-options\"><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"blue-theme\" data-style-label=\"Blue Theme\"><span class=\"gnh-style-option-label\">Blue Theme<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"corporate\" data-style-label=\"Corporate\"><span class=\"gnh-style-option-label\">Corporate<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"service-focused\" data-style-label=\"Service-Focused\"><span class=\"gnh-style-option-label\">Service-Focused<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><\/div><div class=\"gnh-style-actions\"><button type=\"button\" class=\"gnh-style-clear\">Clear all<\/button><\/div><\/div><\/div><div class=\"gnh-tier-count\">1 Templates<\/div><\/div><\/div><div class=\"gnh-active-style-pills\" hidden><\/div><div class=\"gnh-namecard-grid\"><article class=\"gnh-namecard-card\" data-template-id=\"9\" data-idx=\"0\" data-styles=\"corporate,blue-theme,service-focused\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><span class=\"gnh-preview-badge gnh-preview-badge-trending gnh-preview-badge-overlay\">TRENDING<\/span><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/dianatan\/\" title=\"Advisor Connect Pro Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">Advisor Connect Pro<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">Corporate<\/span><span class=\"gnh-style-pill\">Blue Theme<\/span><span class=\"gnh-style-pill\">Service-Focused<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">A professional template designed to showcase your expertise while making it easy for prospects to learn about your services and connect with you.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/dianatan\/\" aria-label=\"Live preview: Advisor Connect Pro\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><\/div><\/div><\/section><\/div><style>\r\n        .gnh-namecard-gallery{--gnh-tier-icon-size:44px;--gnh-tier-icon-svg-size:22px;padding:24px 20px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e2e8f0;border-radius:20px}\r\n        .gnh-namecard-hero{margin-bottom:20px}\r\n        .gnh-namecard-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6366f1;margin-bottom:10px}\r\n        .gnh-namecard-hero-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:#0f172a;letter-spacing:-0.01em}\r\n        .gnh-namecard-hero-sub{margin:0;max-width:760px;color:#475467;font-size:15px;line-height:1.7}\r\n        .gnh-hero-tier-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}\r\n        .gnh-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;appearance:none}\r\n        .gnh-hero-pill-foundation{border-color:#b7e4c7;color:#15803d;background:#f0fdf4}\r\n        .gnh-hero-pill-professional{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}\r\n        .gnh-hero-pill-elite{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}\r\n        .gnh-gallery-filter-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:14px;padding:12px 0 18px;margin-bottom:12px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}\r\n        .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px}\r\n        \/* Reset external tabs framework defaults to prevent overlap\/float behavior *\/\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar.et_pb_tabs{border:0;box-shadow:none;background:transparent}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls li{float:none !important;position:static !important;list-style:none !important;margin:0 !important;padding:0 !important;width:auto !important;clear:none !important}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:before,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:after{content:none !important;display:none !important}\r\n        \/* Shortcode-only: render icons inline at the left of the label as pill buttons *\/\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:inline-flex;flex:0 0 auto}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e5e9ef;background:#fff;color:#101b42;font-weight:700;min-height:42px;white-space:nowrap;line-height:1}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;inset:auto !important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;margin-right:8px;flex:0 0 auto;color:inherit;vertical-align:middle}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon svg{display:block;width:18px;height:18px;stroke:currentColor}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip.gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-filter-divider{width:1px;align-self:stretch;min-height:34px;background:#dbe3ef;flex:0 0 1px}\r\n        .gnh-style-filter-wrap{position:relative;flex:0 0 auto}\r\n        .gnh-filter-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:12px;font-weight:600;cursor:pointer;appearance:none}\r\n        .gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-style-caret{margin-left:8px;font-size:11px;opacity:.75}\r\n        .gnh-style-menu{position:absolute;top:44px;left:0;z-index:20;min-width:280px;max-width:340px;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.12);padding:10px}\r\n        .gnh-style-search{width:100%;padding:8px 10px;border:1px solid #dbe3ef;border-radius:8px;font-size:13px;margin-bottom:8px}\r\n        .gnh-style-options{max-height:220px;overflow:auto;padding-right:2px}\r\n        .gnh-style-option{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#1f2937;font-size:13px;cursor:pointer}\r\n        .gnh-style-option-count{margin-left:auto;color:#64748b;font-size:12px}\r\n        .gnh-style-actions{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}\r\n        .gnh-style-clear{border:0;background:transparent;color:#2563eb;font-weight:600;font-size:12px;cursor:pointer}\r\n        .gnh-style-empty{margin:6px 2px;color:#64748b;font-size:12px}\r\n        .gnh-active-style-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n        .gnh-active-style-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8eefc;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600}\r\n        .gnh-active-style-pill button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}\r\n        .gnh-selected-filter-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}\r\n        .gnh-selected-filter-pill-foundation{background:#f0fdf4;color:#15803d;border-color:#d1f6d7}\r\n        .gnh-selected-filter-pill-professional{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}\r\n        .gnh-selected-filter-pill-elite{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-namecard-tier{margin-bottom:56px}\r\n        .gnh-namecard-section-inner{max-width:1320px;margin:0 auto;border-radius:24px}\r\n        .gnh-tier-foundation .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-professional .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-elite .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-namecard-tier-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}\r\n        .gnh-namecard-tier-meta{display:flex;align-items:center;gap:12px}\r\n        \/* Keep header icon in normal flow even when parent containers use .gnh-tier-tabs styles *\/\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-icon{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:flex-start}\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-title-wrap{display:flex;flex-direction:column;justify-content:flex-start}\r\n        .gnh-tier-icon{width:var(--gnh-tier-icon-size);height:var(--gnh-tier-icon-size);min-width:var(--gnh-tier-icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0f172a;}\r\n        .gnh-tier-icon svg{display:block;width:var(--gnh-tier-icon-svg-size);height:var(--gnh-tier-icon-svg-size);stroke:currentColor}\r\n        .gnh-tier-title-wrap .gnh-namecard-tier-title{margin:0;font-size:25px;line-height:1;letter-spacing:-0.01em;font-weight:700;color:#0f172a}\r\n        .gnh-tier-desc{color:#64748B;font-size:15px;font-weight:400}\r\n        .gnh-tier-right{display:flex;flex-direction:row;align-items:center;gap:8px}\r\n        .gnh-tier-count{font-weight:700;color:#0f172a;font-size:13px;text-transform:none;letter-spacing:0;background:#ffffff;border:1px solid #dbe3ef;padding:6px 12px;border-radius:12px;min-width:86px;text-align:center;white-space:nowrap;word-break:keep-all;flex:0 0 auto}\r\n        .gnh-namecard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px;align-items:stretch}\r\n        .gnh-namecard-card{display:flex;flex-direction:column;gap:20px;border:1px solid #E8EDF5;border-radius:20px;padding:24px;background:#fff;align-items:stretch;box-shadow:0 12px 32px rgba(15,23,42,.06);min-height:250px;transition:transform 250ms ease,box-shadow 250ms ease}\r\n        .gnh-namecard-card:hover,.gnh-namecard-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}\r\n        .gnh-hidden-template{display:none}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-namecard-card.gnh-hidden-template{display:flex}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-tier-footer{display:none}\r\n        .gnh-namecard-left{display:flex;align-items:center;justify-content:center;width:100%}\r\n        .gnh-phone-preview{position:relative;z-index:0;overflow:visible}\r\n        .gnh-template-readiness-phone{position:relative;border-radius:14px;padding:5px;background:#0f172a;height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;width:100%;min-height:200px;overflow:hidden}\r\n        .gnh-namecard-iframe{width:84%;height:86%;border:0;border-radius:10px;background:#fff;max-width:340px;transform-origin:center center;transition:transform 200ms ease;position:relative;z-index:10}\r\n        .gnh-namecard-right{min-width:0;display:flex;flex-direction:column;justify-content:space-between;width:100%}\r\n        .gnh-namecard-name{margin:0 0 8px;font-size:22px;line-height:1.15;color:#0F172A;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-preview-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;background:#e2e8f0;color:#334155}\r\n        .gnh-preview-badge-overlay{position:absolute;top:-10px;left:14px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:80;box-shadow:0 6px 14px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.65);pointer-events:none}\r\n        .gnh-namecard-styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}\r\n        .gnh-style-pill{background:#F8FAFC;color:#1e293b;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;height:auto}\r\n        .gnh-namecard-desc{color:#64748B;margin:0 0 10px;font-size:15px;line-height:1.6}\r\n        .gnh-desc-text.gnh-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-desc-toggle{border:0;background:transparent;color:#2563eb;font-weight:700;padding:0 0;font-size:13px;cursor:pointer;display:inline-block;margin-left:8px;vertical-align:middle}\r\n        .gnh-template-tier-pill{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#f0fdf4;color:#15803d;margin-bottom:10px}\r\n        .gnh-namecard-actions{display:flex;flex-direction:column;gap:12px}\r\n        .gnh-namecard-preview.button,.gnh-namecard-choose.button{height:42px;line-height:40px;padding:0 16px;font-size:14px;border-radius:10px;width:100%;box-sizing:border-box}\r\n        .gnh-namecard-preview.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;background:#fff;border:1px solid #dbe3ef;color:#1f2937;font-weight:500;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04)}\r\n        .gnh-namecard-preview.button:hover,.gnh-namecard-preview.button:focus{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}\r\n        .gnh-namecard-choose.button{background:#22c55e;border-color:#22c55e;color:#fff;display:none !important}\r\n        .gnh-tier-view-all{margin-left:8px;font-weight:600}\r\n        .gnh-namecard-preview svg{width:18px;height:18px;display:block;flex:0 0 auto}\r\n        .gnh-tier-foundation .gnh-namecard-tier-title{color:#16a34a}\r\n        .gnh-tier-foundation .gnh-tier-icon{color:#16a34a;border-color:#bbf7d0}\r\n        .gnh-tier-foundation .gnh-preview-badge{background:#dcfce7;color:#15803d}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button{background:#16a34a;border-color:#16a34a;color:#fff}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button:hover,.gnh-tier-foundation .gnh-namecard-preview.button:focus{background:#14532d;border-color:#14532d;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-tier-title{color:#2563eb}\r\n        .gnh-tier-professional .gnh-tier-icon{color:#2563eb;border-color:#bfdbfe}\r\n        .gnh-tier-professional .gnh-preview-badge{background:#dbeafe;color:#1d4ed8}\r\n        .gnh-tier-professional .gnh-namecard-preview.button{background:#2563eb;border-color:#2563eb;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-preview.button:hover,.gnh-tier-professional .gnh-namecard-preview.button:focus{background:#1f56d1;border-color:#1f56d1;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-tier-title{color:#7c3aed}\r\n        .gnh-tier-elite .gnh-tier-icon{color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-tier-elite .gnh-preview-badge{background:#ede9fe;color:#6d28d9}\r\n        .gnh-tier-elite .gnh-namecard-preview.button{background:#7c3aed;border-color:#7c3aed;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-preview.button:hover,.gnh-tier-elite .gnh-namecard-preview.button:focus{background:#6826d6;border-color:#6826d6;color:#fff}\r\n        @media (max-width:1280px){\r\n            .gnh-namecard-card{gap:18px}\r\n        }\r\n        @media (max-width:1024px){\r\n            .gnh-gallery-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0 14px}\r\n            .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}\r\n            .gnh-tier-filter-group li{flex:0 0 auto}\r\n            .gnh-tier-filter-group .gnh-filter-chip{flex:0 0 auto;white-space:nowrap}\r\n            .gnh-style-filter-wrap{position:static;width:100%}\r\n            .gnh-filter-chip{justify-content:center;min-height:38px}\r\n            .gnh-style-toggle{width:100%;justify-content:space-between}\r\n            .gnh-filter-divider{display:none}\r\n            .gnh-style-menu{position:static;top:auto;left:auto;right:auto;z-index:1;width:100%;min-width:0;max-width:none;margin-top:8px}\r\n            .gnh-style-options{max-height:180px}\r\n            \/* Tablet: keep horizontal layout but reduce spacing *\/\r\n            .gnh-namecard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\r\n            .gnh-namecard-card{gap:16px}\r\n            .gnh-template-readiness-phone{height:160px;min-height:160px}\r\n            .gnh-namecard-iframe{height:150px}\r\n            \/* Single-tier header: keep controls inline and avoid count wrapping *\/\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap;align-items:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-filter-wrap{width:auto}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-toggle{width:auto;min-width:0;justify-content:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n        }\r\n        @media (max-width:640px){\r\n            .gnh-namecard-gallery{padding:18px 14px}\r\n            .gnh-gallery-filter-bar{gap:12px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:block;min-width:0}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{width:100%;min-width:0;padding:8px 10px;font-size:14px;gap:8px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{margin-right:4px;width:22px;height:22px}\r\n            .gnh-namecard-hero-title{font-size:28px}\r\n            .gnh-namecard-grid{grid-template-columns:1fr;gap:28px}\r\n            .gnh-namecard-card{min-height:unset;padding:16px;border-radius:14px}\r\n            .gnh-template-readiness-phone{height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            \/* Phone preview scale on card hover *\/\r\n            .gnh-namecard-card:hover .gnh-namecard-iframe{transform:scale(1.03)}\r\n            \/* Buttons transition *\/\r\n            .gnh-namecard-preview.button,.gnh-namecard-choose.button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}\r\n            .gnh-namecard-card{display:flex;flex-direction:column;align-items:stretch}\r\n            .gnh-namecard-left{flex:0 0 auto;margin:0 auto}\r\n            .gnh-template-readiness-phone{margin:0 auto;height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            .gnh-namecard-right{padding-top:10px}\r\n            .gnh-namecard-tier-header{align-items:flex-start;gap:10px;flex-direction:column}\r\n            .gnh-tier-right{align-items:flex-start;flex-direction:row;gap:8px}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n            .gnh-tier-icon{width:40px;height:40px;min-width:40px}\r\n            .gnh-tier-icon svg{width:20px;height:20px}\r\n        }\r\n        \/* When gallery is rendered as a single tier via shortcode, visually disable top-tier chips *\/\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-tier-filter-group .gnh-filter-chip{opacity:.6;cursor:default;pointer-events:none}\r\n          \/* In single-tier mode, align the tier meta and header to the top so icon sits next to the heading.\r\n              Use stronger selectors and align-self to avoid interference when the shortcode is placed inside\r\n              external tab containers that may also use the `gnh-tier-tabs` class. *\/\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-header{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta .gnh-tier-icon{align-self:flex-start !important;margin-top:2px}\r\n        @media (max-width:420px){\r\n            .gnh-tier-filter-group{gap:6px}\r\n        }\r\n\r\n        \/* Phone preview CSS moved to site global snippet; removed from inline styles. *\/\r\n\r\n        .gnh-feature-list{list-style:none!important;margin:24px 0 0!important;padding:0!important}\r\n        .gnh-feature-list li{position:relative;margin:0 0 16px!important;padding:0 0 0 32px!important;color:#16254a;font-size:16px;font-weight:500;line-height:1.45}\r\n        .gnh-feature-list li::marker{content:\"\"}\r\n        .gnh-feature-list li::before{content:\"\u2713\";position:absolute;left:0;top:.1em;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;color:#18a866;font-size:12px;font-weight:800;background:transparent;border:1.8px solid #18a866;border-radius:50%}\r\n        .gnh-feature-list li:last-child{margin-bottom:0!important}\r\n        @media (max-width:980px){.gnh-feature-list li{margin-bottom:14px!important;padding-left:30px!important;font-size:15px}}\r\n        @media (max-width:767px){.gnh-feature-list{margin-top:20px!important}.gnh-feature-list li{margin-bottom:13px!important;padding-left:28px!important;font-size:14px}.gnh-feature-list li::before{width:17px;height:17px;font-size:11px}}\r\n        \/* Single-tier mode: collapse outer frame and top filter, make inner section full width *\/\r\n        .gnh-namecard-gallery.gnh-single-tier{padding:0;background:transparent;border:0;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-gallery-filter-bar{display:none}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-section-inner{max-width:100%;margin:0 auto;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier{margin-bottom:36px}\r\n    <\/style><script>\r\n(function(){\r\n        function syncPhonePreviewScale(scope){\r\n            var scanRoot = scope || rootEl || document;\r\n            var roots = Array.prototype.slice.call(scanRoot.querySelectorAll('.gnh-phone-screen'));\r\n            roots.forEach(function(root){\r\n                if (!root) return;\r\n                var iframe = root.querySelector('iframe');\r\n                if (!iframe) return;\r\n\r\n                \/\/ Match native card viewport ratio (380x730) without distortion.\r\n                var nativeW = 380;\r\n                var nativeH = 730;\r\n                var boxW = root.clientWidth || 0;\r\n                var boxH = root.clientHeight || 0;\r\n                if (boxW < 1 || boxH < 1) return;\r\n\r\n                \/\/ Contain fit: scale the preview so the whole phone viewport fits inside the frame\r\n                \/\/ (prefer shrinking instead of cropping) and center it within the shell.\r\n                var scale = Math.min(boxW \/ nativeW, boxH \/ nativeH, 1);\r\n                iframe.style.transform = 'scale(' + scale + ')';\r\n                iframe.style.transformOrigin = 'top left';\r\n\r\n                var scaledW = nativeW * scale;\r\n                var scaledH = nativeH * scale;\r\n                \/\/ Center the scaled iframe within the available box area\r\n                iframe.style.left = Math.max(0, ((boxW - scaledW) \/ 2)) + 'px';\r\n                iframe.style.top = Math.max(0, ((boxH - scaledH) \/ 2)) + 'px';\r\n            });\r\n        }\r\n\r\n        \/\/ Scope all behavior to this specific gallery instance so multiple shortcodes\r\n        \/\/ on the same page do not interfere with each other.\r\n        var scriptEl = document.currentScript;\r\n        var rootEl = scriptEl ? scriptEl.previousElementSibling : null;\r\n        if (!rootEl || !rootEl.classList || !rootEl.classList.contains('gnh-namecard-gallery')) {\r\n            rootEl = scriptEl && scriptEl.parentElement ? scriptEl.parentElement.querySelector('.gnh-namecard-gallery') : document.querySelector('.gnh-namecard-gallery');\r\n        }\r\n        if (!rootEl) return;\r\n\r\n        function qs(sel, ctx){ return (ctx||rootEl||document).querySelector(sel); }\r\n        function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||rootEl||document).querySelectorAll(sel)); }\r\n\r\n        var state = {\r\n            tier: (function(){\r\n                var t = String(rootEl.getAttribute('data-initial-tier') || 'all').toLowerCase();\r\n                if (['foundation','professional','elite','all'].indexOf(t) === -1) t = 'all';\r\n                return t;\r\n            })(),\r\n            styles: []\r\n        };\r\n        \/\/ If the gallery was initialized with a specific tier (shortcode attribute),\r\n        \/\/ lock the tier so filter chips cannot change the displayed tier.\r\n        var tierLocked = (state.tier && state.tier !== 'all');\r\n        var initialTier = state.tier;\r\n\r\n        function normalize(v){ return String(v || '').toLowerCase(); }\r\n\r\n        function getSelectedStyleSet(){\r\n            var set = {};\r\n            state.styles.forEach(function(s){ set[s] = true; });\r\n            return set;\r\n        }\r\n\r\n        function cardMatchesStyles(card, selectedSet){\r\n            if (!state.styles.length) return true;\r\n            var raw = normalize(card.getAttribute('data-styles') || '');\r\n            if (!raw) return false;\r\n            var tokens = raw.split(',').map(function(x){ return normalize(x); }).filter(Boolean);\r\n            for (var i = 0; i < state.styles.length; i++) {\r\n                if (tokens.indexOf(state.styles[i]) !== -1) return true;\r\n            }\r\n            return false;\r\n        }\r\n\r\n        function renderActiveStylePills(){\r\n            \/\/ Update all global pill containers (we keep one at top-level)\r\n            var wraps = qsa('.gnh-active-style-pills', rootEl);\r\n            if (!wraps || !wraps.length) return;\r\n            wraps.forEach(function(wrap){\r\n                wrap.innerHTML = '';\r\n                if (!state.styles.length) { wrap.hidden = true; return; }\r\n                var checks = qsa('.gnh-style-check', rootEl);\r\n                var labelMap = {};\r\n                checks.forEach(function(check){ labelMap[normalize(check.value)] = String(check.getAttribute('data-style-label') || check.value); });\r\n                state.styles.forEach(function(token){\r\n                    var pill = document.createElement('span');\r\n                    pill.className = 'gnh-active-style-pill';\r\n                    pill.setAttribute('data-style-token', token);\r\n                    pill.innerHTML = '<span>' + (labelMap[token] || token) + '<\/span><button type=\"button\" aria-label=\"Remove style\">&times;<\/button>';\r\n                    wrap.appendChild(pill);\r\n                });\r\n                wrap.hidden = false;\r\n            });\r\n        }\r\n\r\n        function updateDescToggles(scope){\r\n            \/\/ Show \"More\" toggle only when description is actually truncated.\r\n            var scanRoot = scope || rootEl;\r\n            qsa('.gnh-namecard-card', scanRoot).forEach(function(card){\r\n                \/\/ Skip hidden cards; measure when they become visible.\r\n                if (card.offsetParent === null) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                var btn = card.querySelector('.gnh-desc-toggle');\r\n                if (!descText || !btn) return;\r\n                \/\/ Ensure collapsed state for measurement\r\n                var wasCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                descText.classList.add('gnh-desc-collapsed');\r\n                \/\/ Reliable overflow check: compare clamped height vs natural content height\r\n                \/\/ using a temporary clone with clamp removed.\r\n                var clampedHeight = descText.getBoundingClientRect().height;\r\n                var naturalHeight = clampedHeight;\r\n                var clone = descText.cloneNode(true);\r\n                clone.classList.remove('gnh-desc-collapsed');\r\n                clone.style.position = 'absolute';\r\n                clone.style.visibility = 'hidden';\r\n                clone.style.pointerEvents = 'none';\r\n                clone.style.height = 'auto';\r\n                clone.style.maxHeight = 'none';\r\n                clone.style.overflow = 'visible';\r\n                clone.style.display = 'block';\r\n                clone.style.whiteSpace = 'normal';\r\n                clone.style.webkitLineClamp = 'unset';\r\n                clone.style.WebkitLineClamp = 'unset';\r\n                clone.style.width = Math.max(1, descText.getBoundingClientRect().width) + 'px';\r\n                descText.parentNode.appendChild(clone);\r\n                naturalHeight = clone.getBoundingClientRect().height;\r\n                clone.parentNode.removeChild(clone);\r\n\r\n                var isOverflowing = naturalHeight > clampedHeight + 1;\r\n                if (isOverflowing) {\r\n                    btn.style.display = 'inline-block';\r\n                    btn.setAttribute('aria-hidden','false');\r\n                } else {\r\n                    btn.style.display = 'none';\r\n                    btn.setAttribute('aria-hidden','true');\r\n                    \/\/ ensure aria-expanded is false when hidden\r\n                    btn.setAttribute('aria-expanded','false');\r\n                    \/\/ also ensure description stays collapsed\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                }\r\n                \/\/ restore previous expanded state if it was expanded\r\n                if (!wasCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    btn.setAttribute('aria-expanded','true');\r\n                    btn.textContent = btn.getAttribute('data-less') || 'Less';\r\n                } else {\r\n                    btn.textContent = btn.getAttribute('data-more') || 'More';\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateStyleToggleLabel(){\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            if (!btns || !btns.length) return;\r\n            var base = 'All Styles';\r\n            btns.forEach(function(btn){\r\n                if (!state.styles.length) {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = base + ' ';\r\n                } else {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = state.styles.length + ' style' + (state.styles.length > 1 ? 's' : '') + ' selected ';\r\n                }\r\n            });\r\n        }\r\n\r\n        function applyFilters(){\r\n            var gallery = rootEl;\r\n            var selectedSet = getSelectedStyleSet();\r\n            var currentTier = tierLocked ? initialTier : state.tier;\r\n            var anyVisible = false;\r\n\r\n            qsa('.gnh-namecard-tier', gallery).forEach(function(section){\r\n                var sectionTier = normalize(section.getAttribute('data-tier') || '');\r\n                var tierMatch = (currentTier === 'all' || currentTier === '' || sectionTier === currentTier);\r\n\r\n                var visibleCards = 0;\r\n                qsa('.gnh-namecard-card', section).forEach(function(card){\r\n                    var styleMatch = cardMatchesStyles(card, selectedSet);\r\n                    var show = tierMatch && styleMatch;\r\n                    card.style.display = show ? 'flex' : 'none';\r\n                    if (show) visibleCards++;\r\n                });\r\n\r\n                \/\/ Always show the section header when the tier filter matches so\r\n                \/\/ the style filter and template count remain visible. Hide the\r\n                \/\/ card grid when no cards match the selected styles.\r\n                var showSection = tierMatch;\r\n                section.style.display = showSection ? '' : 'none';\r\n                var grid = section.querySelector('.gnh-namecard-grid');\r\n                if (grid) {\r\n                    grid.style.display = (visibleCards > 0) ? '' : 'none';\r\n                }\r\n                if (visibleCards > 0) anyVisible = true;\r\n            });\r\n\r\n            qsa('.gnh-filter-chip[data-filter]', gallery).forEach(function(chip){\r\n                var chipFilter = normalize(chip.getAttribute('data-filter') || '');\r\n                if (chipFilter === currentTier) chip.classList.add('gnh-filter-chip-active');\r\n                else chip.classList.remove('gnh-filter-chip-active');\r\n            });\r\n\r\n            if (gallery) {\r\n                if (state.styles.length) gallery.classList.add('gnh-filter-active');\r\n                else gallery.classList.remove('gnh-filter-active');\r\n            }\r\n\r\n            renderActiveStylePills();\r\n            updateStyleToggleLabel();\r\n            updateDescToggles();\r\n            syncPhonePreviewScale();\r\n        }\r\n\r\n        function toggleStyleDropdown(contextBtn, forceOpen){\r\n            \/\/ If contextBtn is provided, toggle the menu within its filter-wrap. If not provided, operate on all menus.\r\n            if (contextBtn) {\r\n                var wrap = contextBtn.closest('.gnh-style-filter-wrap');\r\n                if (!wrap) return;\r\n                var menu = wrap.querySelector('.gnh-style-menu');\r\n                var btn = contextBtn;\r\n                if (!menu || !btn) return;\r\n                var open = typeof forceOpen === 'boolean' ? forceOpen : menu.hasAttribute('hidden');\r\n                if (open) {\r\n                    menu.removeAttribute('hidden');\r\n                    btn.setAttribute('aria-expanded', 'true');\r\n                    var input = menu.querySelector('.gnh-style-search');\r\n                    if (input) input.focus();\r\n                } else {\r\n                    menu.setAttribute('hidden', 'hidden');\r\n                    btn.setAttribute('aria-expanded', 'false');\r\n                }\r\n                return;\r\n            }\r\n            \/\/ No context: close all menus when requested\r\n            var menus = qsa('.gnh-style-menu', rootEl);\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            menus.forEach(function(m){ m.setAttribute('hidden', 'hidden'); });\r\n            btns.forEach(function(b){ b.setAttribute('aria-expanded', 'false'); });\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n        } else {\r\n            syncPhonePreviewScale(rootEl);\r\n            updateDescToggles();\r\n        }\r\n        window.addEventListener('resize', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n\r\n        \/\/ Attach direct click handlers as a fallback for style toggles\r\n        function attachStyleToggleHandlers(){\r\n            qsa('.gnh-style-toggle', rootEl).forEach(function(btn){\r\n                \/\/ avoid double-binding\r\n                if (btn.__gnhToggleBound) return;\r\n                btn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); toggleStyleDropdown(btn); });\r\n                btn.__gnhToggleBound = true;\r\n            });\r\n        }\r\n        \/\/ Run once now and also after DOM ready just in case\r\n        attachStyleToggleHandlers();\r\n\r\n        document.addEventListener('click', function(e){\r\n            if (!rootEl.contains(e.target)) {\r\n                toggleStyleDropdown(false);\r\n                return;\r\n            }\r\n\r\n            var activePillRemove = e.target.closest('.gnh-active-style-pill button');\r\n            if (activePillRemove) {\r\n                e.preventDefault();\r\n                var pill = activePillRemove.closest('.gnh-active-style-pill');\r\n                if (pill) {\r\n                    var token = normalize(pill.getAttribute('data-style-token') || '');\r\n                    state.styles = state.styles.filter(function(x){ return x !== token; });\r\n                    qsa('.gnh-style-check', rootEl).forEach(function(check){\r\n                        if (normalize(check.value) === token) check.checked = false;\r\n                    });\r\n                    applyFilters();\r\n                }\r\n                return;\r\n            }\r\n\r\n            var clearBtn = e.target.closest('.gnh-style-clear');\r\n            if (clearBtn) {\r\n                e.preventDefault();\r\n                state.styles = [];\r\n                qsa('.gnh-style-check', rootEl).forEach(function(check){ check.checked = false; });\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var styleToggle = e.target.closest('.gnh-style-toggle');\r\n            if (styleToggle) {\r\n                e.preventDefault();\r\n                toggleStyleDropdown(styleToggle);\r\n                return;\r\n            }\r\n\r\n            var filterBtn = e.target.closest('.gnh-filter-chip[data-filter], .gnh-hero-pill');\r\n            if (filterBtn) {\r\n                e.preventDefault();\r\n                if (tierLocked) {\r\n                    \/\/ ignore attempts to change tier when shortcode specified a tier\r\n                    return;\r\n                }\r\n                var filter = String(filterBtn.getAttribute('data-filter') || 'all').toLowerCase();\r\n                state.tier = filter;\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var descToggleBtn = e.target.closest('.gnh-desc-toggle');\r\n            if (descToggleBtn) {\r\n                e.preventDefault();\r\n                var card = descToggleBtn.closest('.gnh-namecard-card');\r\n                if (!card) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                if (!descText) return;\r\n                var isCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                var more = descToggleBtn.getAttribute('data-more') || 'More';\r\n                var less = descToggleBtn.getAttribute('data-less') || 'Less';\r\n                if (isCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = less;\r\n                    descToggleBtn.setAttribute('aria-expanded','true');\r\n                } else {\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = more;\r\n                    descToggleBtn.setAttribute('aria-expanded','false');\r\n                }\r\n                \/\/ Adjust phone preview sizing if the card height changed\r\n                syncPhonePreviewScale(card);\r\n                return;\r\n            }\r\n\r\n            \/\/ Close dropdown when clicking outside it.\r\n            if (!e.target.closest('.gnh-style-filter-wrap')) {\r\n                toggleStyleDropdown(false);\r\n            }\r\n\r\n            var t = e.target.closest('.gnh-tier-view-all');\r\n            if (!t) return;\r\n            e.preventDefault();\r\n            var section = t.closest('.gnh-namecard-tier');\r\n            if (!section) return;\r\n            var grid = section.querySelector('.gnh-namecard-grid');\r\n            if (!grid) return;\r\n            var isExpanded = section.classList.contains('gnh-expanded');\r\n            \/\/ compute collapsed height (first 3 items)\r\n            var items = grid.querySelectorAll('.gnh-namecard-card');\r\n            var collapsedH = 0;\r\n            for (var i=0;i<Math.min(3, items.length); i++){\r\n                collapsedH += items[i].offsetHeight + parseFloat(getComputedStyle(items[i]).marginBottom||0);\r\n            }\r\n            \/\/ maintain scroll position anchor\r\n            var scrollY = window.scrollY || window.pageYOffset;\r\n            if (!isExpanded){\r\n                \/\/ expand: unhide extras first so height can be measured\r\n                qsa('.gnh-hidden-template', grid).forEach(function(el){ el.classList.remove('gnh-hidden-template'); });\r\n                updateDescToggles(section);\r\n                syncPhonePreviewScale(section);\r\n                \/\/ set starting maxHeight to collapsedH then animate to full\r\n                grid.style.maxHeight = collapsedH + 'px';\r\n                var fullH = grid.scrollHeight;\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = fullH + 'px';\r\n                });\r\n                section.classList.add('gnh-expanded');\r\n                t.textContent = 'Show Less';\r\n                grid.addEventListener('transitionend', function handler(){ grid.style.maxHeight = ''; grid.style.transition = ''; grid.removeEventListener('transitionend', handler); });\r\n            } else {\r\n                \/\/ collapse: animate to collapsedH then hide extras\r\n                var curH = grid.scrollHeight;\r\n                grid.style.maxHeight = curH + 'px';\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = collapsedH + 'px';\r\n                });\r\n                grid.addEventListener('transitionend', function handler(){\r\n                    \/\/ hide items beyond 3\r\n                    var its = grid.querySelectorAll('.gnh-namecard-card');\r\n                    for (var j=3;j<its.length;j++){ its[j].classList.add('gnh-hidden-template'); }\r\n                    updateDescToggles(section);\r\n                    grid.style.maxHeight = '';\r\n                    grid.style.transition = '';\r\n                    grid.removeEventListener('transitionend', handler);\r\n                });\r\n                section.classList.remove('gnh-expanded');\r\n                var tier = t.getAttribute('data-tier') || '';\r\n                t.textContent = 'View All ' + (tier.charAt(0).toUpperCase() + tier.slice(1)) + ' Templates \u2192';\r\n            }\r\n            \/\/ restore scroll position to avoid jump\r\n            requestAnimationFrame(function(){ window.scrollTo(0, scrollY); });\r\n            setTimeout(function(){ syncPhonePreviewScale(section); }, 380);\r\n        });\r\n\r\n        document.addEventListener('change', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var check = e.target.closest('.gnh-style-check');\r\n            if (!check) return;\r\n            var token = normalize(check.value);\r\n            if (!token) return;\r\n            if (check.checked) {\r\n                if (state.styles.indexOf(token) === -1) state.styles.push(token);\r\n            } else {\r\n                state.styles = state.styles.filter(function(x){ return x !== token; });\r\n            }\r\n            \/\/ Ensure all checkboxes with same token are synced across tiers\r\n            qsa('.gnh-style-check', rootEl).forEach(function(c){ if (normalize(c.value) === token) c.checked = (state.styles.indexOf(token) !== -1); });\r\n            applyFilters();\r\n        });\r\n\r\n        document.addEventListener('input', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var input = e.target.closest('.gnh-style-search');\r\n            if (!input) return;\r\n            var q = normalize(input.value);\r\n            var menu = input.closest('.gnh-style-menu');\r\n            if (!menu) return;\r\n            var opts = Array.prototype.slice.call(menu.querySelectorAll('.gnh-style-option'));\r\n            opts.forEach(function(opt){\r\n                var label = normalize(opt.textContent || '');\r\n                opt.style.display = (q === '' || label.indexOf(q) !== -1) ? '' : 'none';\r\n            });\r\n        });\r\n\r\n        applyFilters();\r\n    })();\r\n\r\n    \/* Load Lucide icons dynamically and convert placeholders into SVG *\/\r\n    (function(){\r\n        if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function'){\r\n            try{ window.lucide.createIcons(); }catch(e){}\r\n            return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = 'https:\/\/unpkg.com\/lucide@latest\/dist\/lucide.min.js';\r\n        s.async = true;\r\n        s.onload = function(){ try{ if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function') window.lucide.createIcons(); }catch(e){} };\r\n        document.head.appendChild(s);\r\n    })();\r\n<\/script><div class=\"gnh-namecard-gallery gnh-single-tier\" data-initial-tier=\"elite\"><div class=\"gnh-gallery-filter-bar gnh-tier-tabs et_pb_tabs\"><ul class=\"gnh-tier-filter-group et_pb_tabs_controls\"><li><button type=\"button\" class=\"gnh-filter-chip gnh-filter-chip-active\" data-filter=\"all\">All Templates<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"foundation\"><i data-lucide=\"sprout\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Foundation<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"professional\"><i data-lucide=\"chart-no-axes-combined\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Professional<\/button><\/li><li><button type=\"button\" class=\"gnh-filter-chip\" data-filter=\"elite\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i>Elite<\/button><\/li><\/ul><span class=\"gnh-filter-divider\" aria-hidden=\"true\"><\/span><\/div><section class=\"gnh-namecard-tier gnh-tier-elite\" data-tier=\"elite\"><div class=\"gnh-namecard-section-inner\"><div class=\"gnh-namecard-tier-header\"><div class=\"gnh-namecard-tier-meta\"><i data-lucide=\"crown\" class=\"gnh-tier-icon\" aria-hidden=\"true\"><\/i><div class=\"gnh-tier-title-wrap\"><h2 class=\"gnh-namecard-tier-title\">Elite<\/h2><p class=\"gnh-tier-desc\">Premium branding with authority features.<\/p><\/div><\/div><div class=\"gnh-tier-right\"><div class=\"gnh-style-filter-wrap\"><button type=\"button\" class=\"gnh-filter-chip gnh-style-toggle\" aria-expanded=\"false\" aria-controls=\"gnh-style-menu-elite\">All Styles <span class=\"gnh-style-caret\" aria-hidden=\"true\">&#9662;<\/span><\/button><div id=\"gnh-style-menu-elite\" class=\"gnh-style-menu\" hidden><input type=\"search\" class=\"gnh-style-search\" placeholder=\"Search styles...\" aria-label=\"Search styles\"><div class=\"gnh-style-options\"><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"campaign\" data-style-label=\"Campaign\"><span class=\"gnh-style-option-label\">Campaign<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"dark\" data-style-label=\"dark\"><span class=\"gnh-style-option-label\">dark<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"executive\" data-style-label=\"Executive\"><span class=\"gnh-style-option-label\">Executive<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"interactive\" data-style-label=\"Interactive\"><span class=\"gnh-style-option-label\">Interactive<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><label class=\"gnh-style-option\"><input type=\"checkbox\" class=\"gnh-style-check\" value=\"promotional\" data-style-label=\"Promotional\"><span class=\"gnh-style-option-label\">Promotional<\/span><span class=\"gnh-style-option-count\">(1)<\/span><\/label><\/div><div class=\"gnh-style-actions\"><button type=\"button\" class=\"gnh-style-clear\">Clear all<\/button><\/div><\/div><\/div><div class=\"gnh-tier-count\">2 Templates<\/div><\/div><\/div><div class=\"gnh-active-style-pills\" hidden><\/div><div class=\"gnh-namecard-grid\"><article class=\"gnh-namecard-card\" data-template-id=\"10\" data-idx=\"0\" data-styles=\"executive,dark\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><span class=\"gnh-preview-badge gnh-preview-badge-feature gnh-preview-badge-overlay\">FEATURE<\/span><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/johnsmith\/\" title=\"Prestige Blue Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">Prestige Blue<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">Executive<\/span><span class=\"gnh-style-pill\">dark<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">A sophisticated executive design featuring a prominent profile, trust-building credentials, and a clear call-to-action\u2014perfect for professionals focused on credibility and client engagement.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/johnsmith\/\" aria-label=\"Live preview: Prestige Blue\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><article class=\"gnh-namecard-card\" data-template-id=\"12\" data-idx=\"1\" data-styles=\"campaign,interactive,promotional\"><div class=\"gnh-namecard-left\"><div class=\"gnh-phone-preview\"><div class=\"gnh-phone-screen\"><iframe class=\"gnh-namecard-iframe\" src=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/AAIGNH01\/\" title=\"SmartLink Journey Preview\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div><\/div><div class=\"gnh-namecard-right\"><h3 class=\"gnh-namecard-name\">SmartLink Journey<\/h3><div class=\"gnh-namecard-styles\"><span class=\"gnh-style-pill\">Campaign<\/span><span class=\"gnh-style-pill\">Interactive<\/span><span class=\"gnh-style-pill\">Promotional<\/span><\/div><p class=\"gnh-namecard-desc\"><span class=\"gnh-desc-text gnh-desc-collapsed\">A modern action-oriented template featuring a guided navigation flow, promotional content, and prominent call-to-action buttons. Ideal for campaigns, product showcases, onboarding experiences, and lead generation.<\/span> <button type=\"button\" class=\"gnh-desc-toggle\" aria-expanded=\"false\" data-more=\"More\" data-less=\"Less\">More<\/button><\/p><div class=\"gnh-namecard-actions\"><a class=\"gnh-namecard-preview button button-secondary\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/test.aai.gnh-solutions.com\/zh\/advisor\/AAIGNH01\/\" aria-label=\"Live preview: SmartLink Journey\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M2 12C3.73 8.39 7.52 6 12 6s8.27 2.39 10 6c-1.73 3.61-5.52 6-10 6s-8.27-2.39-10-6z\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.9\"\/><\/svg> Live Preview<\/a><button type=\"button\" class=\"gnh-namecard-choose button\">Choose Template<\/button><\/div><\/div><\/article><\/div><\/div><\/section><\/div><style>\r\n        .gnh-namecard-gallery{--gnh-tier-icon-size:44px;--gnh-tier-icon-svg-size:22px;padding:24px 20px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e2e8f0;border-radius:20px}\r\n        .gnh-namecard-hero{margin-bottom:20px}\r\n        .gnh-namecard-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6366f1;margin-bottom:10px}\r\n        .gnh-namecard-hero-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:#0f172a;letter-spacing:-0.01em}\r\n        .gnh-namecard-hero-sub{margin:0;max-width:760px;color:#475467;font-size:15px;line-height:1.7}\r\n        .gnh-hero-tier-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}\r\n        .gnh-hero-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;appearance:none}\r\n        .gnh-hero-pill-foundation{border-color:#b7e4c7;color:#15803d;background:#f0fdf4}\r\n        .gnh-hero-pill-professional{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}\r\n        .gnh-hero-pill-elite{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}\r\n        .gnh-gallery-filter-bar{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:14px;padding:12px 0 18px;margin-bottom:12px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}\r\n        .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px}\r\n        \/* Reset external tabs framework defaults to prevent overlap\/float behavior *\/\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar.et_pb_tabs{border:0;box-shadow:none;background:transparent}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls li{float:none !important;position:static !important;list-style:none !important;margin:0 !important;padding:0 !important;width:auto !important;clear:none !important}\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:before,\r\n        .gnh-namecard-gallery .gnh-gallery-filter-bar .et_pb_tabs_controls:after{content:none !important;display:none !important}\r\n        \/* Shortcode-only: render icons inline at the left of the label as pill buttons *\/\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:inline-flex;flex:0 0 auto}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e5e9ef;background:#fff;color:#101b42;font-weight:700;min-height:42px;white-space:nowrap;line-height:1}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;inset:auto !important;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;margin-right:8px;flex:0 0 auto;color:inherit;vertical-align:middle}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon svg{display:block;width:18px;height:18px;stroke:currentColor}\r\n        .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip.gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-filter-divider{width:1px;align-self:stretch;min-height:34px;background:#dbe3ef;flex:0 0 1px}\r\n        .gnh-style-filter-wrap{position:relative;flex:0 0 auto}\r\n        .gnh-filter-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:12px;font-weight:600;cursor:pointer;appearance:none}\r\n        .gnh-filter-chip-active{background:#0f172a;border-color:#0f172a;color:#fff}\r\n        .gnh-style-caret{margin-left:8px;font-size:11px;opacity:.75}\r\n        .gnh-style-menu{position:absolute;top:44px;left:0;z-index:20;min-width:280px;max-width:340px;background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.12);padding:10px}\r\n        .gnh-style-search{width:100%;padding:8px 10px;border:1px solid #dbe3ef;border-radius:8px;font-size:13px;margin-bottom:8px}\r\n        .gnh-style-options{max-height:220px;overflow:auto;padding-right:2px}\r\n        .gnh-style-option{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#1f2937;font-size:13px;cursor:pointer}\r\n        .gnh-style-option-count{margin-left:auto;color:#64748b;font-size:12px}\r\n        .gnh-style-actions{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end}\r\n        .gnh-style-clear{border:0;background:transparent;color:#2563eb;font-weight:600;font-size:12px;cursor:pointer}\r\n        .gnh-style-empty{margin:6px 2px;color:#64748b;font-size:12px}\r\n        .gnh-active-style-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n        .gnh-active-style-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8eefc;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600}\r\n        .gnh-active-style-pill button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}\r\n        .gnh-selected-filter-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}\r\n        .gnh-selected-filter-pill-foundation{background:#f0fdf4;color:#15803d;border-color:#d1f6d7}\r\n        .gnh-selected-filter-pill-professional{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}\r\n        .gnh-selected-filter-pill-elite{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-namecard-tier{margin-bottom:56px}\r\n        .gnh-namecard-section-inner{max-width:1320px;margin:0 auto;border-radius:24px}\r\n        .gnh-tier-foundation .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-professional .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-tier-elite .gnh-namecard-section-inner{background:transparent}\r\n        .gnh-namecard-tier-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}\r\n        .gnh-namecard-tier-meta{display:flex;align-items:center;gap:12px}\r\n        \/* Keep header icon in normal flow even when parent containers use .gnh-tier-tabs styles *\/\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-icon{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:flex-start}\r\n        .gnh-namecard-gallery .gnh-namecard-tier-header .gnh-tier-title-wrap{display:flex;flex-direction:column;justify-content:flex-start}\r\n        .gnh-tier-icon{width:var(--gnh-tier-icon-size);height:var(--gnh-tier-icon-size);min-width:var(--gnh-tier-icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#0f172a;}\r\n        .gnh-tier-icon svg{display:block;width:var(--gnh-tier-icon-svg-size);height:var(--gnh-tier-icon-svg-size);stroke:currentColor}\r\n        .gnh-tier-title-wrap .gnh-namecard-tier-title{margin:0;font-size:25px;line-height:1;letter-spacing:-0.01em;font-weight:700;color:#0f172a}\r\n        .gnh-tier-desc{color:#64748B;font-size:15px;font-weight:400}\r\n        .gnh-tier-right{display:flex;flex-direction:row;align-items:center;gap:8px}\r\n        .gnh-tier-count{font-weight:700;color:#0f172a;font-size:13px;text-transform:none;letter-spacing:0;background:#ffffff;border:1px solid #dbe3ef;padding:6px 12px;border-radius:12px;min-width:86px;text-align:center;white-space:nowrap;word-break:keep-all;flex:0 0 auto}\r\n        .gnh-namecard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px;align-items:stretch}\r\n        .gnh-namecard-card{display:flex;flex-direction:column;gap:20px;border:1px solid #E8EDF5;border-radius:20px;padding:24px;background:#fff;align-items:stretch;box-shadow:0 12px 32px rgba(15,23,42,.06);min-height:250px;transition:transform 250ms ease,box-shadow 250ms ease}\r\n        .gnh-namecard-card:hover,.gnh-namecard-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}\r\n        .gnh-hidden-template{display:none}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-namecard-card.gnh-hidden-template{display:flex}\r\n        .gnh-namecard-gallery.gnh-filter-active .gnh-tier-footer{display:none}\r\n        .gnh-namecard-left{display:flex;align-items:center;justify-content:center;width:100%}\r\n        .gnh-phone-preview{position:relative;z-index:0;overflow:visible}\r\n        .gnh-template-readiness-phone{position:relative;border-radius:14px;padding:5px;background:#0f172a;height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;width:100%;min-height:200px;overflow:hidden}\r\n        .gnh-namecard-iframe{width:84%;height:86%;border:0;border-radius:10px;background:#fff;max-width:340px;transform-origin:center center;transition:transform 200ms ease;position:relative;z-index:10}\r\n        .gnh-namecard-right{min-width:0;display:flex;flex-direction:column;justify-content:space-between;width:100%}\r\n        .gnh-namecard-name{margin:0 0 8px;font-size:22px;line-height:1.15;color:#0F172A;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-preview-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;background:#e2e8f0;color:#334155}\r\n        .gnh-preview-badge-overlay{position:absolute;top:-10px;left:14px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:80;box-shadow:0 6px 14px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.65);pointer-events:none}\r\n        .gnh-namecard-styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}\r\n        .gnh-style-pill{background:#F8FAFC;color:#1e293b;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;height:auto}\r\n        .gnh-namecard-desc{color:#64748B;margin:0 0 10px;font-size:15px;line-height:1.6}\r\n        .gnh-desc-text.gnh-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\r\n        .gnh-desc-toggle{border:0;background:transparent;color:#2563eb;font-weight:700;padding:0 0;font-size:13px;cursor:pointer;display:inline-block;margin-left:8px;vertical-align:middle}\r\n        .gnh-template-tier-pill{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#f0fdf4;color:#15803d;margin-bottom:10px}\r\n        .gnh-namecard-actions{display:flex;flex-direction:column;gap:12px}\r\n        .gnh-namecard-preview.button,.gnh-namecard-choose.button{height:42px;line-height:40px;padding:0 16px;font-size:14px;border-radius:10px;width:100%;box-sizing:border-box}\r\n        .gnh-namecard-preview.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.2;background:#fff;border:1px solid #dbe3ef;color:#1f2937;font-weight:500;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04)}\r\n        .gnh-namecard-preview.button:hover,.gnh-namecard-preview.button:focus{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}\r\n        .gnh-namecard-choose.button{background:#22c55e;border-color:#22c55e;color:#fff;display:none !important}\r\n        .gnh-tier-view-all{margin-left:8px;font-weight:600}\r\n        .gnh-namecard-preview svg{width:18px;height:18px;display:block;flex:0 0 auto}\r\n        .gnh-tier-foundation .gnh-namecard-tier-title{color:#16a34a}\r\n        .gnh-tier-foundation .gnh-tier-icon{color:#16a34a;border-color:#bbf7d0}\r\n        .gnh-tier-foundation .gnh-preview-badge{background:#dcfce7;color:#15803d}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button{background:#16a34a;border-color:#16a34a;color:#fff}\r\n        .gnh-tier-foundation .gnh-namecard-preview.button:hover,.gnh-tier-foundation .gnh-namecard-preview.button:focus{background:#14532d;border-color:#14532d;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-tier-title{color:#2563eb}\r\n        .gnh-tier-professional .gnh-tier-icon{color:#2563eb;border-color:#bfdbfe}\r\n        .gnh-tier-professional .gnh-preview-badge{background:#dbeafe;color:#1d4ed8}\r\n        .gnh-tier-professional .gnh-namecard-preview.button{background:#2563eb;border-color:#2563eb;color:#fff}\r\n        .gnh-tier-professional .gnh-namecard-preview.button:hover,.gnh-tier-professional .gnh-namecard-preview.button:focus{background:#1f56d1;border-color:#1f56d1;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-tier-title{color:#7c3aed}\r\n        .gnh-tier-elite .gnh-tier-icon{color:#7c3aed;border-color:#ddd6fe}\r\n        .gnh-tier-elite .gnh-preview-badge{background:#ede9fe;color:#6d28d9}\r\n        .gnh-tier-elite .gnh-namecard-preview.button{background:#7c3aed;border-color:#7c3aed;color:#fff}\r\n        .gnh-tier-elite .gnh-namecard-preview.button:hover,.gnh-tier-elite .gnh-namecard-preview.button:focus{background:#6826d6;border-color:#6826d6;color:#fff}\r\n        @media (max-width:1280px){\r\n            .gnh-namecard-card{gap:18px}\r\n        }\r\n        @media (max-width:1024px){\r\n            .gnh-gallery-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0 14px}\r\n            .gnh-tier-filter-group{display:flex;flex-wrap:wrap;gap:8px;width:100%}\r\n            .gnh-tier-filter-group li{flex:0 0 auto}\r\n            .gnh-tier-filter-group .gnh-filter-chip{flex:0 0 auto;white-space:nowrap}\r\n            .gnh-style-filter-wrap{position:static;width:100%}\r\n            .gnh-filter-chip{justify-content:center;min-height:38px}\r\n            .gnh-style-toggle{width:100%;justify-content:space-between}\r\n            .gnh-filter-divider{display:none}\r\n            .gnh-style-menu{position:static;top:auto;left:auto;right:auto;z-index:1;width:100%;min-width:0;max-width:none;margin-top:8px}\r\n            .gnh-style-options{max-height:180px}\r\n            \/* Tablet: keep horizontal layout but reduce spacing *\/\r\n            .gnh-namecard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\r\n            .gnh-namecard-card{gap:16px}\r\n            .gnh-template-readiness-phone{height:160px;min-height:160px}\r\n            .gnh-namecard-iframe{height:150px}\r\n            \/* Single-tier header: keep controls inline and avoid count wrapping *\/\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap;align-items:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-filter-wrap{width:auto}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-style-toggle{width:auto;min-width:0;justify-content:center}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n        }\r\n        @media (max-width:640px){\r\n            .gnh-namecard-gallery{padding:18px 14px}\r\n            .gnh-gallery-filter-bar{gap:12px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group li{display:block;min-width:0}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-filter-chip{width:100%;min-width:0;padding:8px 10px;font-size:14px;gap:8px}\r\n            .gnh-gallery-filter-bar .gnh-tier-filter-group .gnh-tier-icon{margin-right:4px;width:22px;height:22px}\r\n            .gnh-namecard-hero-title{font-size:28px}\r\n            .gnh-namecard-grid{grid-template-columns:1fr;gap:28px}\r\n            .gnh-namecard-card{min-height:unset;padding:16px;border-radius:14px}\r\n            .gnh-template-readiness-phone{height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            \/* Phone preview scale on card hover *\/\r\n            .gnh-namecard-card:hover .gnh-namecard-iframe{transform:scale(1.03)}\r\n            \/* Buttons transition *\/\r\n            .gnh-namecard-preview.button,.gnh-namecard-choose.button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}\r\n            .gnh-namecard-card{display:flex;flex-direction:column;align-items:stretch}\r\n            .gnh-namecard-left{flex:0 0 auto;margin:0 auto}\r\n            .gnh-template-readiness-phone{margin:0 auto;height:220px;width:128px}\r\n            .gnh-namecard-iframe{width:118px;height:210px}\r\n            .gnh-namecard-right{padding-top:10px}\r\n            .gnh-namecard-tier-header{align-items:flex-start;gap:10px;flex-direction:column}\r\n            .gnh-tier-right{align-items:flex-start;flex-direction:row;gap:8px}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right{flex-wrap:wrap}\r\n            .gnh-namecard-gallery.gnh-single-tier .gnh-tier-right .gnh-tier-count{white-space:nowrap;min-width:max-content}\r\n            .gnh-tier-icon{width:40px;height:40px;min-width:40px}\r\n            .gnh-tier-icon svg{width:20px;height:20px}\r\n        }\r\n        \/* When gallery is rendered as a single tier via shortcode, visually disable top-tier chips *\/\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-tier-filter-group .gnh-filter-chip{opacity:.6;cursor:default;pointer-events:none}\r\n          \/* In single-tier mode, align the tier meta and header to the top so icon sits next to the heading.\r\n              Use stronger selectors and align-self to avoid interference when the shortcode is placed inside\r\n              external tab containers that may also use the `gnh-tier-tabs` class. *\/\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-header{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta{align-items:flex-start !important}\r\n          .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier-meta .gnh-tier-icon{align-self:flex-start !important;margin-top:2px}\r\n        @media (max-width:420px){\r\n            .gnh-tier-filter-group{gap:6px}\r\n        }\r\n\r\n        \/* Phone preview CSS moved to site global snippet; removed from inline styles. *\/\r\n\r\n        .gnh-feature-list{list-style:none!important;margin:24px 0 0!important;padding:0!important}\r\n        .gnh-feature-list li{position:relative;margin:0 0 16px!important;padding:0 0 0 32px!important;color:#16254a;font-size:16px;font-weight:500;line-height:1.45}\r\n        .gnh-feature-list li::marker{content:\"\"}\r\n        .gnh-feature-list li::before{content:\"\u2713\";position:absolute;left:0;top:.1em;display:flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;color:#18a866;font-size:12px;font-weight:800;background:transparent;border:1.8px solid #18a866;border-radius:50%}\r\n        .gnh-feature-list li:last-child{margin-bottom:0!important}\r\n        @media (max-width:980px){.gnh-feature-list li{margin-bottom:14px!important;padding-left:30px!important;font-size:15px}}\r\n        @media (max-width:767px){.gnh-feature-list{margin-top:20px!important}.gnh-feature-list li{margin-bottom:13px!important;padding-left:28px!important;font-size:14px}.gnh-feature-list li::before{width:17px;height:17px;font-size:11px}}\r\n        \/* Single-tier mode: collapse outer frame and top filter, make inner section full width *\/\r\n        .gnh-namecard-gallery.gnh-single-tier{padding:0;background:transparent;border:0;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-gallery-filter-bar{display:none}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-section-inner{max-width:100%;margin:0 auto;border-radius:0}\r\n        .gnh-namecard-gallery.gnh-single-tier .gnh-namecard-tier{margin-bottom:36px}\r\n    <\/style><script>\r\n(function(){\r\n        function syncPhonePreviewScale(scope){\r\n            var scanRoot = scope || rootEl || document;\r\n            var roots = Array.prototype.slice.call(scanRoot.querySelectorAll('.gnh-phone-screen'));\r\n            roots.forEach(function(root){\r\n                if (!root) return;\r\n                var iframe = root.querySelector('iframe');\r\n                if (!iframe) return;\r\n\r\n                \/\/ Match native card viewport ratio (380x730) without distortion.\r\n                var nativeW = 380;\r\n                var nativeH = 730;\r\n                var boxW = root.clientWidth || 0;\r\n                var boxH = root.clientHeight || 0;\r\n                if (boxW < 1 || boxH < 1) return;\r\n\r\n                \/\/ Contain fit: scale the preview so the whole phone viewport fits inside the frame\r\n                \/\/ (prefer shrinking instead of cropping) and center it within the shell.\r\n                var scale = Math.min(boxW \/ nativeW, boxH \/ nativeH, 1);\r\n                iframe.style.transform = 'scale(' + scale + ')';\r\n                iframe.style.transformOrigin = 'top left';\r\n\r\n                var scaledW = nativeW * scale;\r\n                var scaledH = nativeH * scale;\r\n                \/\/ Center the scaled iframe within the available box area\r\n                iframe.style.left = Math.max(0, ((boxW - scaledW) \/ 2)) + 'px';\r\n                iframe.style.top = Math.max(0, ((boxH - scaledH) \/ 2)) + 'px';\r\n            });\r\n        }\r\n\r\n        \/\/ Scope all behavior to this specific gallery instance so multiple shortcodes\r\n        \/\/ on the same page do not interfere with each other.\r\n        var scriptEl = document.currentScript;\r\n        var rootEl = scriptEl ? scriptEl.previousElementSibling : null;\r\n        if (!rootEl || !rootEl.classList || !rootEl.classList.contains('gnh-namecard-gallery')) {\r\n            rootEl = scriptEl && scriptEl.parentElement ? scriptEl.parentElement.querySelector('.gnh-namecard-gallery') : document.querySelector('.gnh-namecard-gallery');\r\n        }\r\n        if (!rootEl) return;\r\n\r\n        function qs(sel, ctx){ return (ctx||rootEl||document).querySelector(sel); }\r\n        function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||rootEl||document).querySelectorAll(sel)); }\r\n\r\n        var state = {\r\n            tier: (function(){\r\n                var t = String(rootEl.getAttribute('data-initial-tier') || 'all').toLowerCase();\r\n                if (['foundation','professional','elite','all'].indexOf(t) === -1) t = 'all';\r\n                return t;\r\n            })(),\r\n            styles: []\r\n        };\r\n        \/\/ If the gallery was initialized with a specific tier (shortcode attribute),\r\n        \/\/ lock the tier so filter chips cannot change the displayed tier.\r\n        var tierLocked = (state.tier && state.tier !== 'all');\r\n        var initialTier = state.tier;\r\n\r\n        function normalize(v){ return String(v || '').toLowerCase(); }\r\n\r\n        function getSelectedStyleSet(){\r\n            var set = {};\r\n            state.styles.forEach(function(s){ set[s] = true; });\r\n            return set;\r\n        }\r\n\r\n        function cardMatchesStyles(card, selectedSet){\r\n            if (!state.styles.length) return true;\r\n            var raw = normalize(card.getAttribute('data-styles') || '');\r\n            if (!raw) return false;\r\n            var tokens = raw.split(',').map(function(x){ return normalize(x); }).filter(Boolean);\r\n            for (var i = 0; i < state.styles.length; i++) {\r\n                if (tokens.indexOf(state.styles[i]) !== -1) return true;\r\n            }\r\n            return false;\r\n        }\r\n\r\n        function renderActiveStylePills(){\r\n            \/\/ Update all global pill containers (we keep one at top-level)\r\n            var wraps = qsa('.gnh-active-style-pills', rootEl);\r\n            if (!wraps || !wraps.length) return;\r\n            wraps.forEach(function(wrap){\r\n                wrap.innerHTML = '';\r\n                if (!state.styles.length) { wrap.hidden = true; return; }\r\n                var checks = qsa('.gnh-style-check', rootEl);\r\n                var labelMap = {};\r\n                checks.forEach(function(check){ labelMap[normalize(check.value)] = String(check.getAttribute('data-style-label') || check.value); });\r\n                state.styles.forEach(function(token){\r\n                    var pill = document.createElement('span');\r\n                    pill.className = 'gnh-active-style-pill';\r\n                    pill.setAttribute('data-style-token', token);\r\n                    pill.innerHTML = '<span>' + (labelMap[token] || token) + '<\/span><button type=\"button\" aria-label=\"Remove style\">&times;<\/button>';\r\n                    wrap.appendChild(pill);\r\n                });\r\n                wrap.hidden = false;\r\n            });\r\n        }\r\n\r\n        function updateDescToggles(scope){\r\n            \/\/ Show \"More\" toggle only when description is actually truncated.\r\n            var scanRoot = scope || rootEl;\r\n            qsa('.gnh-namecard-card', scanRoot).forEach(function(card){\r\n                \/\/ Skip hidden cards; measure when they become visible.\r\n                if (card.offsetParent === null) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                var btn = card.querySelector('.gnh-desc-toggle');\r\n                if (!descText || !btn) return;\r\n                \/\/ Ensure collapsed state for measurement\r\n                var wasCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                descText.classList.add('gnh-desc-collapsed');\r\n                \/\/ Reliable overflow check: compare clamped height vs natural content height\r\n                \/\/ using a temporary clone with clamp removed.\r\n                var clampedHeight = descText.getBoundingClientRect().height;\r\n                var naturalHeight = clampedHeight;\r\n                var clone = descText.cloneNode(true);\r\n                clone.classList.remove('gnh-desc-collapsed');\r\n                clone.style.position = 'absolute';\r\n                clone.style.visibility = 'hidden';\r\n                clone.style.pointerEvents = 'none';\r\n                clone.style.height = 'auto';\r\n                clone.style.maxHeight = 'none';\r\n                clone.style.overflow = 'visible';\r\n                clone.style.display = 'block';\r\n                clone.style.whiteSpace = 'normal';\r\n                clone.style.webkitLineClamp = 'unset';\r\n                clone.style.WebkitLineClamp = 'unset';\r\n                clone.style.width = Math.max(1, descText.getBoundingClientRect().width) + 'px';\r\n                descText.parentNode.appendChild(clone);\r\n                naturalHeight = clone.getBoundingClientRect().height;\r\n                clone.parentNode.removeChild(clone);\r\n\r\n                var isOverflowing = naturalHeight > clampedHeight + 1;\r\n                if (isOverflowing) {\r\n                    btn.style.display = 'inline-block';\r\n                    btn.setAttribute('aria-hidden','false');\r\n                } else {\r\n                    btn.style.display = 'none';\r\n                    btn.setAttribute('aria-hidden','true');\r\n                    \/\/ ensure aria-expanded is false when hidden\r\n                    btn.setAttribute('aria-expanded','false');\r\n                    \/\/ also ensure description stays collapsed\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                }\r\n                \/\/ restore previous expanded state if it was expanded\r\n                if (!wasCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    btn.setAttribute('aria-expanded','true');\r\n                    btn.textContent = btn.getAttribute('data-less') || 'Less';\r\n                } else {\r\n                    btn.textContent = btn.getAttribute('data-more') || 'More';\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateStyleToggleLabel(){\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            if (!btns || !btns.length) return;\r\n            var base = 'All Styles';\r\n            btns.forEach(function(btn){\r\n                if (!state.styles.length) {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = base + ' ';\r\n                } else {\r\n                    if (btn.childNodes && btn.childNodes[0]) btn.childNodes[0].textContent = state.styles.length + ' style' + (state.styles.length > 1 ? 's' : '') + ' selected ';\r\n                }\r\n            });\r\n        }\r\n\r\n        function applyFilters(){\r\n            var gallery = rootEl;\r\n            var selectedSet = getSelectedStyleSet();\r\n            var currentTier = tierLocked ? initialTier : state.tier;\r\n            var anyVisible = false;\r\n\r\n            qsa('.gnh-namecard-tier', gallery).forEach(function(section){\r\n                var sectionTier = normalize(section.getAttribute('data-tier') || '');\r\n                var tierMatch = (currentTier === 'all' || currentTier === '' || sectionTier === currentTier);\r\n\r\n                var visibleCards = 0;\r\n                qsa('.gnh-namecard-card', section).forEach(function(card){\r\n                    var styleMatch = cardMatchesStyles(card, selectedSet);\r\n                    var show = tierMatch && styleMatch;\r\n                    card.style.display = show ? 'flex' : 'none';\r\n                    if (show) visibleCards++;\r\n                });\r\n\r\n                \/\/ Always show the section header when the tier filter matches so\r\n                \/\/ the style filter and template count remain visible. Hide the\r\n                \/\/ card grid when no cards match the selected styles.\r\n                var showSection = tierMatch;\r\n                section.style.display = showSection ? '' : 'none';\r\n                var grid = section.querySelector('.gnh-namecard-grid');\r\n                if (grid) {\r\n                    grid.style.display = (visibleCards > 0) ? '' : 'none';\r\n                }\r\n                if (visibleCards > 0) anyVisible = true;\r\n            });\r\n\r\n            qsa('.gnh-filter-chip[data-filter]', gallery).forEach(function(chip){\r\n                var chipFilter = normalize(chip.getAttribute('data-filter') || '');\r\n                if (chipFilter === currentTier) chip.classList.add('gnh-filter-chip-active');\r\n                else chip.classList.remove('gnh-filter-chip-active');\r\n            });\r\n\r\n            if (gallery) {\r\n                if (state.styles.length) gallery.classList.add('gnh-filter-active');\r\n                else gallery.classList.remove('gnh-filter-active');\r\n            }\r\n\r\n            renderActiveStylePills();\r\n            updateStyleToggleLabel();\r\n            updateDescToggles();\r\n            syncPhonePreviewScale();\r\n        }\r\n\r\n        function toggleStyleDropdown(contextBtn, forceOpen){\r\n            \/\/ If contextBtn is provided, toggle the menu within its filter-wrap. If not provided, operate on all menus.\r\n            if (contextBtn) {\r\n                var wrap = contextBtn.closest('.gnh-style-filter-wrap');\r\n                if (!wrap) return;\r\n                var menu = wrap.querySelector('.gnh-style-menu');\r\n                var btn = contextBtn;\r\n                if (!menu || !btn) return;\r\n                var open = typeof forceOpen === 'boolean' ? forceOpen : menu.hasAttribute('hidden');\r\n                if (open) {\r\n                    menu.removeAttribute('hidden');\r\n                    btn.setAttribute('aria-expanded', 'true');\r\n                    var input = menu.querySelector('.gnh-style-search');\r\n                    if (input) input.focus();\r\n                } else {\r\n                    menu.setAttribute('hidden', 'hidden');\r\n                    btn.setAttribute('aria-expanded', 'false');\r\n                }\r\n                return;\r\n            }\r\n            \/\/ No context: close all menus when requested\r\n            var menus = qsa('.gnh-style-menu', rootEl);\r\n            var btns = qsa('.gnh-style-toggle', rootEl);\r\n            menus.forEach(function(m){ m.setAttribute('hidden', 'hidden'); });\r\n            btns.forEach(function(b){ b.setAttribute('aria-expanded', 'false'); });\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n        } else {\r\n            syncPhonePreviewScale(rootEl);\r\n            updateDescToggles();\r\n        }\r\n        window.addEventListener('resize', function(){ syncPhonePreviewScale(rootEl); updateDescToggles(); });\r\n\r\n        \/\/ Attach direct click handlers as a fallback for style toggles\r\n        function attachStyleToggleHandlers(){\r\n            qsa('.gnh-style-toggle', rootEl).forEach(function(btn){\r\n                \/\/ avoid double-binding\r\n                if (btn.__gnhToggleBound) return;\r\n                btn.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); toggleStyleDropdown(btn); });\r\n                btn.__gnhToggleBound = true;\r\n            });\r\n        }\r\n        \/\/ Run once now and also after DOM ready just in case\r\n        attachStyleToggleHandlers();\r\n\r\n        document.addEventListener('click', function(e){\r\n            if (!rootEl.contains(e.target)) {\r\n                toggleStyleDropdown(false);\r\n                return;\r\n            }\r\n\r\n            var activePillRemove = e.target.closest('.gnh-active-style-pill button');\r\n            if (activePillRemove) {\r\n                e.preventDefault();\r\n                var pill = activePillRemove.closest('.gnh-active-style-pill');\r\n                if (pill) {\r\n                    var token = normalize(pill.getAttribute('data-style-token') || '');\r\n                    state.styles = state.styles.filter(function(x){ return x !== token; });\r\n                    qsa('.gnh-style-check', rootEl).forEach(function(check){\r\n                        if (normalize(check.value) === token) check.checked = false;\r\n                    });\r\n                    applyFilters();\r\n                }\r\n                return;\r\n            }\r\n\r\n            var clearBtn = e.target.closest('.gnh-style-clear');\r\n            if (clearBtn) {\r\n                e.preventDefault();\r\n                state.styles = [];\r\n                qsa('.gnh-style-check', rootEl).forEach(function(check){ check.checked = false; });\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var styleToggle = e.target.closest('.gnh-style-toggle');\r\n            if (styleToggle) {\r\n                e.preventDefault();\r\n                toggleStyleDropdown(styleToggle);\r\n                return;\r\n            }\r\n\r\n            var filterBtn = e.target.closest('.gnh-filter-chip[data-filter], .gnh-hero-pill');\r\n            if (filterBtn) {\r\n                e.preventDefault();\r\n                if (tierLocked) {\r\n                    \/\/ ignore attempts to change tier when shortcode specified a tier\r\n                    return;\r\n                }\r\n                var filter = String(filterBtn.getAttribute('data-filter') || 'all').toLowerCase();\r\n                state.tier = filter;\r\n                applyFilters();\r\n                return;\r\n            }\r\n\r\n            var descToggleBtn = e.target.closest('.gnh-desc-toggle');\r\n            if (descToggleBtn) {\r\n                e.preventDefault();\r\n                var card = descToggleBtn.closest('.gnh-namecard-card');\r\n                if (!card) return;\r\n                var descText = card.querySelector('.gnh-desc-text');\r\n                if (!descText) return;\r\n                var isCollapsed = descText.classList.contains('gnh-desc-collapsed');\r\n                var more = descToggleBtn.getAttribute('data-more') || 'More';\r\n                var less = descToggleBtn.getAttribute('data-less') || 'Less';\r\n                if (isCollapsed) {\r\n                    descText.classList.remove('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = less;\r\n                    descToggleBtn.setAttribute('aria-expanded','true');\r\n                } else {\r\n                    descText.classList.add('gnh-desc-collapsed');\r\n                    descToggleBtn.textContent = more;\r\n                    descToggleBtn.setAttribute('aria-expanded','false');\r\n                }\r\n                \/\/ Adjust phone preview sizing if the card height changed\r\n                syncPhonePreviewScale(card);\r\n                return;\r\n            }\r\n\r\n            \/\/ Close dropdown when clicking outside it.\r\n            if (!e.target.closest('.gnh-style-filter-wrap')) {\r\n                toggleStyleDropdown(false);\r\n            }\r\n\r\n            var t = e.target.closest('.gnh-tier-view-all');\r\n            if (!t) return;\r\n            e.preventDefault();\r\n            var section = t.closest('.gnh-namecard-tier');\r\n            if (!section) return;\r\n            var grid = section.querySelector('.gnh-namecard-grid');\r\n            if (!grid) return;\r\n            var isExpanded = section.classList.contains('gnh-expanded');\r\n            \/\/ compute collapsed height (first 3 items)\r\n            var items = grid.querySelectorAll('.gnh-namecard-card');\r\n            var collapsedH = 0;\r\n            for (var i=0;i<Math.min(3, items.length); i++){\r\n                collapsedH += items[i].offsetHeight + parseFloat(getComputedStyle(items[i]).marginBottom||0);\r\n            }\r\n            \/\/ maintain scroll position anchor\r\n            var scrollY = window.scrollY || window.pageYOffset;\r\n            if (!isExpanded){\r\n                \/\/ expand: unhide extras first so height can be measured\r\n                qsa('.gnh-hidden-template', grid).forEach(function(el){ el.classList.remove('gnh-hidden-template'); });\r\n                updateDescToggles(section);\r\n                syncPhonePreviewScale(section);\r\n                \/\/ set starting maxHeight to collapsedH then animate to full\r\n                grid.style.maxHeight = collapsedH + 'px';\r\n                var fullH = grid.scrollHeight;\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = fullH + 'px';\r\n                });\r\n                section.classList.add('gnh-expanded');\r\n                t.textContent = 'Show Less';\r\n                grid.addEventListener('transitionend', function handler(){ grid.style.maxHeight = ''; grid.style.transition = ''; grid.removeEventListener('transitionend', handler); });\r\n            } else {\r\n                \/\/ collapse: animate to collapsedH then hide extras\r\n                var curH = grid.scrollHeight;\r\n                grid.style.maxHeight = curH + 'px';\r\n                requestAnimationFrame(function(){\r\n                    grid.style.transition = 'max-height 360ms ease';\r\n                    grid.style.maxHeight = collapsedH + 'px';\r\n                });\r\n                grid.addEventListener('transitionend', function handler(){\r\n                    \/\/ hide items beyond 3\r\n                    var its = grid.querySelectorAll('.gnh-namecard-card');\r\n                    for (var j=3;j<its.length;j++){ its[j].classList.add('gnh-hidden-template'); }\r\n                    updateDescToggles(section);\r\n                    grid.style.maxHeight = '';\r\n                    grid.style.transition = '';\r\n                    grid.removeEventListener('transitionend', handler);\r\n                });\r\n                section.classList.remove('gnh-expanded');\r\n                var tier = t.getAttribute('data-tier') || '';\r\n                t.textContent = 'View All ' + (tier.charAt(0).toUpperCase() + tier.slice(1)) + ' Templates \u2192';\r\n            }\r\n            \/\/ restore scroll position to avoid jump\r\n            requestAnimationFrame(function(){ window.scrollTo(0, scrollY); });\r\n            setTimeout(function(){ syncPhonePreviewScale(section); }, 380);\r\n        });\r\n\r\n        document.addEventListener('change', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var check = e.target.closest('.gnh-style-check');\r\n            if (!check) return;\r\n            var token = normalize(check.value);\r\n            if (!token) return;\r\n            if (check.checked) {\r\n                if (state.styles.indexOf(token) === -1) state.styles.push(token);\r\n            } else {\r\n                state.styles = state.styles.filter(function(x){ return x !== token; });\r\n            }\r\n            \/\/ Ensure all checkboxes with same token are synced across tiers\r\n            qsa('.gnh-style-check', rootEl).forEach(function(c){ if (normalize(c.value) === token) c.checked = (state.styles.indexOf(token) !== -1); });\r\n            applyFilters();\r\n        });\r\n\r\n        document.addEventListener('input', function(e){\r\n            if (!rootEl.contains(e.target)) return;\r\n            var input = e.target.closest('.gnh-style-search');\r\n            if (!input) return;\r\n            var q = normalize(input.value);\r\n            var menu = input.closest('.gnh-style-menu');\r\n            if (!menu) return;\r\n            var opts = Array.prototype.slice.call(menu.querySelectorAll('.gnh-style-option'));\r\n            opts.forEach(function(opt){\r\n                var label = normalize(opt.textContent || '');\r\n                opt.style.display = (q === '' || label.indexOf(q) !== -1) ? '' : 'none';\r\n            });\r\n        });\r\n\r\n        applyFilters();\r\n    })();\r\n\r\n    \/* Load Lucide icons dynamically and convert placeholders into SVG *\/\r\n    (function(){\r\n        if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function'){\r\n            try{ window.lucide.createIcons(); }catch(e){}\r\n            return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = 'https:\/\/unpkg.com\/lucide@latest\/dist\/lucide.min.js';\r\n        s.async = true;\r\n        s.onload = function(){ try{ if (typeof window.lucide !== 'undefined' && typeof window.lucide.createIcons === 'function') window.lucide.createIcons(); }catch(e){} };\r\n        document.head.appendChild(s);\r\n    })();\r\n<\/script><\/p>\n","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1090496","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/pages\/1090496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/comments?post=1090496"}],"version-history":[{"count":11,"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/pages\/1090496\/revisions"}],"predecessor-version":[{"id":1090545,"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/pages\/1090496\/revisions\/1090545"}],"wp:attachment":[{"href":"https:\/\/test.aai.gnh-solutions.com\/zh\/wp-json\/wp\/v2\/media?parent=1090496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}