ultimate-jekyll-manager 1.7.2 → 1.8.1

package/dist/assets/themes/newsflash/pages/pricing/index.scss

@@ -0,0 +1,194 @@
+// Newsflash Theme — Pricing page-specific CSS
+// The "subscription desk" treatment for
+// (_layouts/themes/newsflash/frontend/pages/pricing.html): pill billing
+// toggle, framed plan cards with the vermilion "Editor's pick", and the
+// enterprise strip. Compiles standalone — theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Billing toggle — pill segmented control
+// ============================================
+.billing-toggle {
+  display: flex;
+  justify-content: center;
+  gap: 0.35rem;
+  width: fit-content;
+  margin: 0 auto 1.25rem;
+  padding: 0.35rem;
+  border: var(--nf-border);
+  border-radius: 50rem;
+  background: var(--bs-card-bg);
+
+  .billing-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.5rem 1.25rem;
+    border-radius: 50rem;
+    font-weight: 700;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: $nf-transition;
+
+    &:hover {
+      background: var(--nf-paper-2);
+    }
+  }
+
+  .btn-check:checked + .billing-option {
+    background: var(--nf-ink);
+    color: var(--nf-paper);
+  }
+
+  .billing-save {
+    font-size: 0.68rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 0.3em 0.7em;
+    border-radius: 50rem;
+    background: var(--nf-volt);
+    color: var(--nf-volt-ink);
+  }
+}
+
+// ============================================
+// Plan grid + cards
+// ============================================
+.pricing-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+  align-items: start;
+  margin-bottom: 2rem;
+
+  @media (max-width: 1199.98px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 767.98px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pricing-plan {
+  position: relative;
+  padding: 1.75rem;
+
+  &--popular {
+    border-color: var(--bs-primary);
+    border-width: 2.5px;
+    box-shadow: var(--nf-shadow-hard-hover);
+  }
+}
+
+.pricing-plan-flag {
+  position: absolute;
+  top: -0.85rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(-2deg);
+  white-space: nowrap;
+}
+
+.pricing-plan-name {
+  font-size: 1.4rem;
+  margin-bottom: 0.1rem;
+}
+
+.pricing-plan-tagline {
+  margin-bottom: 1.25rem;
+}
+
+.pricing-plan-price {
+  font-family: $nf-font-display;
+  margin-bottom: 0.25rem;
+
+  .pricing-plan-currency {
+    font-size: 1.4rem;
+    font-weight: 600;
+    vertical-align: super;
+  }
+
+  .pricing-plan-amount {
+    font-size: 3rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+
+  .pricing-plan-per {
+    font-family: $font-family-sans-serif;
+    font-size: 0.95rem;
+    color: var(--bs-secondary-color);
+  }
+}
+
+.pricing-plan-ppu {
+  font-size: 0.85rem;
+  color: var(--bs-secondary-color);
+  min-height: 1.3em;
+  margin-bottom: 1.25rem;
+
+  .price-per-unit {
+    font-weight: 700;
+    color: var(--bs-primary);
+  }
+}
+
+.pricing-plan-billing,
+.pricing-plan-guarantee {
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+  text-align: center;
+  margin-bottom: 0.35rem;
+}
+
+.pricing-plan-rule {
+  margin: 1.25rem 0;
+}
+
+.pricing-plan-inherit {
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+  margin-bottom: 0.75rem;
+}
+
+.pricing-plan-features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1rem;
+
+  li {
+    display: flex;
+    gap: 0.6em;
+    align-items: baseline;
+    padding: 0.3rem 0;
+    font-size: 0.92rem;
+  }
+
+  .pricing-plan-feature-icon {
+    color: var(--bs-primary);
+    flex: none;
+  }
+}
+
+// ============================================
+// Enterprise strip
+// ============================================
+.enterprise-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.75rem;
+
+  @media (max-width: 767.98px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/dist/assets/themes/newsflash/pages/test/libraries/layers/index.js

@@ -0,0 +1,9 @@
+// /test — Theme (newsflash) page JS — the #theme layer.
+// Runs AFTER #main, BEFORE #project. Turns the "js-theme" dot green.
+export default ({ manager, options }) => {
+  const dot = document.querySelector('.layer-dot[data-layer="js-theme"]');
+  if (dot) {
+    dot.style.background = '#30a46c'; // green
+  }
+  console.log('[test-layer] #theme JS ran → js-theme dot green');
+};

package/dist/assets/themes/newsflash/pages/test/libraries/layers/index.scss

@@ -0,0 +1,7 @@
+// /test — Theme (newsflash) page CSS — the #theme layer.
+// Loads AFTER the universal layer and turns the "css-theme" dot green.
+// Compiles standalone, so no theme tokens are needed here — just the proof.
+
+.layer-dot[data-layer="css-theme"] {
+  background: #30a46c; // green
+}

package/dist/commands/blogify.js

@@ -276,11 +276,14 @@ module.exports = async function (options) {
     });
   }
 
-  // Generate 12 posts
+  // Generate posts (--count=<n>, default 12)
+  const count = parseInt(options.count, 10) || 12;
   const now = Math.floor(Date.now() / 1000);
   const dayInSeconds = 86400;
 
-  for (let i = 0; i < 12; i++) {
+  logger.log(`Generating ${count} test posts...`);
+
+  for (let i = 0; i < count; i++) {
     // Calculate timestamp for each post (spread over last 12 days)
     const postTimestamp = now - (i * dayInSeconds);
     const postId = `test-${postTimestamp}`; // Add test- prefix to ID
@@ -335,5 +338,5 @@ ${generateBlogContent(postImages)}`;
     logger.log(`Created post: ${filename}`);
   }
 
-  logger.log(`Successfully created 12 blog posts in ${postsDir}`);
+  logger.log(`Successfully created ${count} blog posts in ${postsDir}`);
 };

package/dist/commands/test.js

@@ -5,15 +5,34 @@ const Manager = require('../build.js');
 const mgr     = new Manager();
 const logger  = mgr.logger('test');
 const { run } = require('../test/runner.js');
+const attachLogFile = require('../utils/attach-log-file.js');
+const { EXTENDED_MODE_WARNING } = require('../test/utils/extended-mode-warning.js');
 
 module.exports = async function (options) {
+  // Tee all test output to <projectRoot>/logs/test.log (ANSI-stripped) — mirrors
+  // the dev/build log pattern and EM/BEM's test.log. Skipped on CI via isServer().
+  attachLogFile('test');
+
   const layer       = options.layer    || 'all';
+  // Positional target: `npx mgr test <target>` where target supports source
+  // prefixes — `project:`, `project:<path>`, `mgr:`, `ujm:`, or a bare `<path>`.
+  const target      = (options._ && options._[1]) || null;
+  // `--filter` flag: substring match on test NAMES/descriptions (orthogonal to target).
   const filter      = options.filter   || null;
   const reporter    = options.reporter || 'pretty';
-  const integration = options.integration === true || options.integration === 'true';
+  // Extended mode — opt into tests that hit REAL external services (network fetches, Firebase
+  // via web-manager, live APIs) instead of skipping them. Off by default so `npx mgr test`
+  // stays fast and offline-safe. The canonical signal is the unprefixed `TEST_EXTENDED_MODE`
+  // env var — the SAME name across BEM/BXM/UJM/EM (cross-framework parity); `--extended` is the
+  // CLI shorthand. Once set on process.env it propagates to every spawned child (the Jekyll
+  // build, the boot HTTP server / Puppeteer browsers) automatically via inherited `process.env`.
+  const extended    = options.extended === true
+    || options.extended === 'true'
+    || process.env.TEST_EXTENDED_MODE === 'true'
+    || process.env.TEST_EXTENDED_MODE === '1';
 
-  if (integration) {
-    process.env.UJ_TEST_INTEGRATION = '1';
+  if (extended) {
+    process.env.TEST_EXTENDED_MODE = 'true';
   }
 
   // Canonical signal — every Manager picks this up via isTesting().
@@ -33,10 +52,15 @@ module.exports = async function (options) {
   }
 
   if (reporter !== 'json') {
-    logger.log(`Running tests (layer=${layer}${filter ? ` filter="${filter}"` : ''}${integration ? ' +integration' : ''})`);
+    logger.log(`Running tests (layer=${layer}${target ? ` target="${target}"` : ''}${filter ? ` filter="${filter}"` : ''}${extended ? ' +extended' : ''})`);
+    logger.log(`Test mode: ${extended ? 'extended (real external APIs)' : 'normal (external APIs skipped)'}`);
+    if (extended) {
+      logger.warn(EXTENDED_MODE_WARNING[0]);
+      EXTENDED_MODE_WARNING.slice(1).forEach((line) => logger.warn(line));
+    }
   }
 
-  const result = await run({ layer, filter, reporter });
+  const result = await run({ layer, target, filter, reporter });
 
   if (reporter === 'json') {
     // Final machine-readable summary.
@@ -51,6 +75,11 @@ module.exports = async function (options) {
 
   if (result.failed > 0) {
     process.exitCode = 1;
+    attachLogFile.detach();
     throw new Error(`${result.failed} test(s) failed`);
   }
+
+  // Restore stdout/stderr and close the log file. UJM's util writes synchronously,
+  // so the tail is already on disk — this just cleans up the handle.
+  attachLogFile.detach();
 };

package/dist/defaults/CLAUDE.md

@@ -28,9 +28,12 @@ npm start           # dev: clean → setup → bundle exec gulp serve (Jekyll +
 npm run build       # production build (UJ_BUILD_MODE=true): clean → setup → full gulp pipeline → _site/
 npm run deploy      # build → `npu sync --message='Deploy'` (publishes _site/)
 npx mgr test        # run framework + project test suites (build / page / boot layers)
-npx mgr test pages/home           # run a specific test by path (relative to test/)
-npx mgr test ujm:pages/home       # run only framework tests matching a path
-npx mgr test project:custom-test  # run only consumer project tests matching a path
+npx mgr test pages/home           # run a specific test by path (relative to test/, both sources)
+npx mgr test project:             # run ONLY your project tests (project:custom-test for one path)
+npx mgr test mgr:                 # run ONLY framework tests (ujm: / framework: are equivalent)
+npx mgr test --filter=foo         # match test NAMES within the selected files (composes with target)
+npx mgr test --extended           # also run tests that hit real external services (or TEST_EXTENDED_MODE=true; off by default)
+# (output is teed to logs/ — dev.log on `npm start`, build.log on `npm run build`, test.log on `npx mgr test`; cat instead of scrolling scrollback)
 npx mgr audit       # HTML validation + spellcheck + optional Lighthouse
 npx mgr install dev  # use LOCAL ultimate-jekyll-manager source (to test framework edits)
 npx mgr install live # restore the published ultimate-jekyll-manager from npm
@@ -51,7 +54,7 @@ See `node_modules/ultimate-jekyll-manager/docs/themes.md` for the full "Bootstra
 
 ## 🚨 Development workflow — MUST follow
 
-- **🚫 NEVER run `npm start`, `npm run build`, or `npm test`** unless the user explicitly asks. Assume the user is already running the dev server. Running these commands kills the user's process and wastes time.
+- **🚫 NEVER run `npm start`** — the user runs the dev server; running it again kills theirs. Assume it's already running; if it isn't, instruct the user to run it rather than running it yourself. Running `npx mgr test` is fine.
 - **✅ ALWAYS check `logs/dev.log`** after editing source files (SCSS, JS, HTML, config) to confirm the build succeeded. The dev server's gulp watcher recompiles on file change — check the log for errors.
   - Success: `Reloading Browsers...`
   - Failure: `'sass' errored`, `'webpack' errored`, `'build-error'`, `'jekyll' errored`
@@ -114,6 +117,16 @@ At build time, `require('ultimate-jekyll-manager/build')` exposes:
 - `Manager.logger(name)` — timestamped logger instance
 - `Manager.require(path)` — escape hatch for UJM transitive deps (use sparingly)
 
+## Dependency resolution
+
+- **Do NOT install framework dependencies directly** (`firebase`, `web-manager`, etc.). UJM's webpack config resolves them through the framework's own `node_modules/`. If something doesn't resolve, the issue is in UJM's webpack config — not your `package.json`.
+- **web-manager owns Firebase.** Never `import firebase from 'firebase/app'`. Use `import webManager from 'web-manager'` → `webManager.auth()`, `webManager.firestore()`.
+- **`Manager.require(name)`** resolves from UJM's module context at runtime for unbundled code (gulp tasks, test fixtures).
+
+## Testing
+
+Every feature ships with tests at every layer it has a surface in: **logic** (`test/build/`, or `test/page/` for frontend module logic), **UI** (`test/page/` — real events on the real DOM), and **end-to-end** (`test/boot/`). Skip a layer only when the feature genuinely has no surface there — "the logic test covers it" does not excuse the UI test. See `test/README.md` and `node_modules/ultimate-jekyll-manager/docs/test-framework.md`.
+
 <!-- Everything above this marker is owned by the framework and rewritten on every `npx mgr setup`. Add your project-specific notes below — they are preserved across setups. -->
 
 # ========== Custom Values ==========

package/dist/defaults/dist/_includes/core/pricing/resolve-plan.html

@@ -0,0 +1,59 @@
+{% comment %}
+  Shared plan-pricing resolution — the SSOT for the pricing math every theme's
+  pricing layout uses. Jekyll includes share the caller's variable scope, so
+  the assigns below land in the calling template.
+
+  In:  include.plan — a page.resolved.pricing.plans item
+
+  Out: _config_product        — matching site.web_manager.payment.products entry (or nil)
+       _plan_monthly          — monthly price (frontmatter pricing → config prices → 0)
+       _plan_annually         — annual price (frontmatter pricing → config prices → 0)
+       _ppu_value             — per-unit feature value (nil unless price_per_unit enabled and plan is paid)
+       monthly_price_per_unit — $/unit at monthly billing (nil unless _ppu_value > 0)
+       annual_price_per_unit  — $/unit at annual billing, monthly-equivalent (nil unless _ppu_value > 0)
+
+  Every output is (re)assigned on every call so loop iterations never see a
+  previous plan's values.
+{% endcomment %}
+
+{% assign _config_product = nil %}
+{% for p in site.web_manager.payment.products %}
+  {% if p.id == include.plan.id %}{% assign _config_product = p %}{% break %}{% endif %}
+{% endfor %}
+
+{% comment %} Prices: frontmatter pricing takes precedence, then config, then 0 {% endcomment %}
+{% if include.plan.pricing.monthly or include.plan.pricing.monthly == 0 %}
+  {% assign _plan_monthly = include.plan.pricing.monthly %}
+{% elsif _config_product.prices.monthly or _config_product.prices.monthly == 0 %}
+  {% assign _plan_monthly = _config_product.prices.monthly %}
+{% else %}
+  {% assign _plan_monthly = 0 %}
+{% endif %}
+
+{% if include.plan.pricing.annually or include.plan.pricing.annually == 0 %}
+  {% assign _plan_annually = include.plan.pricing.annually %}
+{% elsif _config_product.prices.annually or _config_product.prices.annually == 0 %}
+  {% assign _plan_annually = _config_product.prices.annually %}
+{% else %}
+  {% assign _plan_annually = 0 %}
+{% endif %}
+
+{% comment %} Per-unit value: frontmatter feature value, falling back to config product limits. Per-unit prices only compute when the value is a usable positive number (guards the divided_by) {% endcomment %}
+{% assign _ppu_value = nil %}
+{% assign monthly_price_per_unit = nil %}
+{% assign annual_price_per_unit = nil %}
+{% if page.resolved.pricing.price_per_unit.enabled and _plan_monthly > 0 %}
+  {% for feature in include.plan.features %}
+    {% if feature.id == page.resolved.pricing.price_per_unit.feature_id %}
+      {% assign _ppu_value = feature.value %}
+      {% if _config_product and _ppu_value == nil %}
+        {% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _ppu_value = _lim[1] %}{% break %}{% endif %}{% endfor %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+  {% if _ppu_value and _ppu_value > 0 %}
+    {% assign monthly_price_per_unit = _plan_monthly | times: 1.0 | divided_by: _ppu_value | round: 2 %}
+    {% assign annual_monthly_price = _plan_annually | divided_by: 12.0 %}
+    {% assign annual_price_per_unit = annual_monthly_price | divided_by: _ppu_value | round: 2 %}
+  {% endif %}
+{% endif %}

package/dist/defaults/dist/_includes/themes/classy/frontend/sections/footer.html

@@ -8,6 +8,9 @@
         {% capture logo_src %}{% if data.logo.src %}{{ data.logo.src }}{% else %}{{ site.brand.images.brandmark | default: null }}{% endif %}{% endcapture %}
         {% capture logo_text %}{{ data.logo.text | default: site.brand.name | uj_liquify }}{% endcapture %}
         {% capture logo_description %}{{ data.logo.description | default: site.brand.description | uj_liquify }}{% endcapture %}
+        {% assign logo_description = logo_description | strip %}
+        {% comment %} A data value that LIQUIFIES to empty (e.g. '{{ site.meta.description }}' with no meta.description set) still needs the brand fallback — `default:` only sees the raw string {% endcomment %}
+        {% if logo_description == '' or logo_description == 'null' %}{% assign logo_description = site.brand.description %}{% endif %}
         {% capture logo_class %}{{ data.logo.class }}{% endcapture %}
 
         <div class="h5 mb-3">
@@ -76,9 +79,7 @@
         <div class="d-flex align-items-center me-3">
             <div class="dropup uj-language-dropdown">
               <button class="btn btn-sm btn-outline-adaptive dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                <i class="fa fa-sm me-1">
-                  <?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" fill="currentColor" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path style="fill:#DAE2F2;" d="M467,91H237.25l-34.528,415.796c6.068,3.034,12.594,5.204,19.763,5.204H467c24.814,0,45-20.186,45-45 V136C512,111.186,491.814,91,467,91z"/> <path style="fill:#4D97FF;" d="M169.867,407.86l7.969,64.721c1.6,12.854,10.3,26.922,24.886,34.215 c29.167-31.374,9.614-11.341,78.829-85.796L169.867,407.86z"/> <path style="fill:#4DB5FF;" d="M281.551,421c4.907-5.608,9.211-9.373,8.053-17.095l-45.44-364.486 C241.366,16.948,222.162,0,199.516,0H45C20.186,0,0,20.186,0,45v331c0,24.814,20.186,45,45,45C123.402,421,202.898,421,281.551,421z "/> <path style="fill:#E6EEFF;" d="M165.707,118.056C164.301,111.054,158.148,106,151,106h-30c-7.148,0-13.301,5.054-14.707,12.056 l-30,150c-1.626,8.13,3.647,16.025,11.763,17.651c8.218,1.685,16.04-3.647,17.651-11.763L115.294,226h41.411l9.587,47.944 c1.641,8.237,9.697,13.4,17.651,11.763c8.115-1.626,13.389-9.521,11.763-17.651L165.707,118.056z M121.293,196l11.997-60h5.42 l11.997,60H121.293z"/> <path style="fill:#53565C;" d="M436,226h-45v-15c0-8.291-6.709-15-15-15s-15,6.709-15,15v15h-45c-8.291,0-15,6.709-15,15 s6.709,15,15,15h4.006c8.535,27.383,21.07,48.81,35.136,65.702c-11.019,10.074-21.802,18.339-33.518,27.594 c-6.459,5.171-7.514,14.604-2.328,21.079c5.162,6.465,14.632,7.514,21.078,2.329c12.73-10.047,23.679-18.456,35.626-29.421 c11.947,10.966,22.896,19.375,35.624,29.421c6.448,5.185,15.918,4.136,21.08-2.329c5.186-6.475,4.131-15.908-2.33-21.079 c-11.715-9.255-22.498-17.52-33.517-27.594c14.066-16.891,26.602-38.318,35.136-65.702H436c8.291,0,15-6.709,15-15 S444.291,226,436,226z M376,299.467c-9.534-11.984-18.149-26.069-24.626-43.467h49.252C394.149,273.399,385.534,287.483,376,299.467 z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
-                </i>
+                {% uj_icon "language", "fa-sm me-1" %}
                 <span class="_text-body">
                   Language
                 </span>
@@ -103,6 +104,22 @@
             </div>
           </div>
 
+        <!-- Appearance Dropdown (logic handled framework-side via data-appearance-* attributes — see docs/appearance.md) -->
+        <div class="d-flex align-items-center me-3">
+          <div class="dropup uj-appearance-dropdown">
+            <button class="btn btn-sm btn-outline-adaptive dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Appearance">
+              <span data-appearance-icon="light" hidden>{% uj_icon "sun", "fa-sm" %}</span>
+              <span data-appearance-icon="dark" hidden>{% uj_icon "moon-stars", "fa-sm" %}</span>
+              <span data-appearance-icon="system" hidden>{% uj_icon "circle-half-stroke", "fa-sm" %}</span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><button class="dropdown-item" type="button" data-appearance-set="light">{% uj_icon "sun", "fa-sm me-2" %}Light</button></li>
+              <li><button class="dropdown-item" type="button" data-appearance-set="dark">{% uj_icon "moon-stars", "fa-sm me-2" %}Dark</button></li>
+              <li><button class="dropdown-item" type="button" data-appearance-set="system">{% uj_icon "circle-half-stroke", "fa-sm me-2" %}System</button></li>
+            </ul>
+          </div>
+        </div>
+
         <!-- Social Links -->
         {% if data.socials.enabled %}
           <div class="d-flex align-items-center">

package/dist/defaults/dist/_layouts/themes/classy/admin/core/minimal-viewport-locked.html

@@ -1,6 +1,6 @@
 ---
 ### ALL PAGES ###
-layout: themes/classy/backend/core/minimal-viewport-locked
+layout: themes/[ site.theme.id ]/backend/core/minimal-viewport-locked
 
 ### THEME CONFIG ###
 theme:

package/dist/defaults/dist/_layouts/themes/classy/admin/core/minimal.html

@@ -1,6 +1,6 @@
 ---
 ### ALL PAGES ###
-layout: themes/classy/backend/core/minimal
+layout: themes/[ site.theme.id ]/backend/core/minimal
 
 ### THEME CONFIG ###
 theme:

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/pricing.html

@@ -304,31 +304,8 @@ faqs:
 
         <div class="row g-4 mb-5 justify-content-center">
           {% for plan in page.resolved.pricing.plans %}
-            {% comment %} Look up matching product in _config.yml payment products {% endcomment %}
-            {% assign _config_product = nil %}
-            {% for p in site.web_manager.payment.products %}
-              {% if p.id == plan.id %}
-                {% assign _config_product = p %}
-                {% break %}
-              {% endif %}
-            {% endfor %}
-
-            {% comment %} Resolve prices: frontmatter pricing takes precedence, then config prices {% endcomment %}
-            {% if plan.pricing.monthly or plan.pricing.monthly == 0 %}
-              {% assign _plan_monthly = plan.pricing.monthly %}
-            {% elsif _config_product.prices.monthly or _config_product.prices.monthly == 0 %}
-              {% assign _plan_monthly = _config_product.prices.monthly %}
-            {% else %}
-              {% assign _plan_monthly = 0 %}
-            {% endif %}
-
-            {% if plan.pricing.annually or plan.pricing.annually == 0 %}
-              {% assign _plan_annually = plan.pricing.annually %}
-            {% elsif _config_product.prices.annually or _config_product.prices.annually == 0 %}
-              {% assign _plan_annually = _config_product.prices.annually %}
-            {% else %}
-              {% assign _plan_annually = 0 %}
-            {% endif %}
+            {% comment %} Shared pricing math (assigns _plan_monthly/_plan_annually/per-unit into this scope) {% endcomment %}
+            {% include core/pricing/resolve-plan.html plan=plan %}
 
             {% if plan.popular %}
               {% assign border_classes = "border-gradient-rainbow border-3" %}
@@ -365,21 +342,9 @@ faqs:
                     <!-- Price per unit (only shown when enabled) -->
                     {% if page.resolved.pricing.price_per_unit.enabled %}
                       <p class="text-muted small mb-4">
-                        {% if _plan_monthly > 0 %}
-                          {% for feature in plan.features %}
-                            {% if feature.id == page.resolved.pricing.price_per_unit.feature_id %}
-                              {% comment %} Resolve feature value from config limits if not set in frontmatter {% endcomment %}
-                              {% assign _ppu_value = feature.value %}
-                              {% if _config_product and _ppu_value == nil %}
-                                {% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _ppu_value = _lim[1] %}{% break %}{% endif %}{% endfor %}
-                              {% endif %}
-                              {% assign monthly_price_per_unit = _plan_monthly | times: 1.0 | divided_by: _ppu_value | round: 2 %}
-                              {% assign annual_monthly_price = _plan_annually | divided_by: 12.0 %}
-                              {% assign annual_price_per_unit = annual_monthly_price | divided_by: _ppu_value | round: 2 %}
-                              <span class="price-per-unit" data-monthly="${{ monthly_price_per_unit }}" data-annually="${{ annual_price_per_unit }}">${{ annual_price_per_unit }}</span> per {{ page.resolved.pricing.price_per_unit.label }}
-                            {% endif %}
-                          {% endfor %}
-                        {% else %}
+                        {% if monthly_price_per_unit %}
+                          <span class="price-per-unit" data-monthly="${{ monthly_price_per_unit }}" data-annually="${{ annual_price_per_unit }}">${{ annual_price_per_unit }}</span> per {{ page.resolved.pricing.price_per_unit.label }}
+                        {% elsif _plan_monthly == 0 %}
                           <!-- Placeholder text for free plan to maintain consistent height -->
                           Perfect for trying out
                         {% endif %}

package/dist/defaults/dist/_layouts/themes/neobrutalism/frontend/pages/pricing.html

@@ -153,6 +153,33 @@ faqs:
   social-proof, and a full-bleed CTA. See docs/themes.md.
 {% endcomment %}
 
+<!-- ============================================ -->
+<!-- PROMO BANNER — revealed + populated by the framework pricing JS
+     (sale name, countdown, navbar offset). The ids are the contract;
+     ship it hidden and let the JS do the rest. -->
+<!-- ============================================ -->
+<div id="pricing-promo-banner" class="position-fixed top-0 start-0 w-100 text-center animation-slide-down" style="z-index: 1050;" hidden>
+  <div class="bg-primary text-white py-2 position-relative">
+    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 mt-2 me-2" aria-label="Close" onclick="this.closest('#pricing-promo-banner').hidden=true;document.querySelector('.navbar-wrapper').style.marginTop='';document.querySelector('main > section:first-of-type').style.paddingTop=''"></button>
+    <div class="container-fluid">
+      <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap pe-4">
+        <span id="pricing-promo-badge" class="badge bg-warning text-dark px-2 py-1 fs-6 animation-wiggle">
+          15% OFF!
+        </span>
+        <span id="pricing-promo-text" class="fw-bold">
+          Flash sale
+        </span>
+        <span class="text-white-50">
+          Ending in <span id="pricing-promo-countdown" class="fw-semibold text-white">--</span>
+        </span>
+        <span class="text-white-50">
+          Use code <span id="pricing-promo-code" class="badge bg-white bg-opacity-25 px-2 py-1 fs-6">WELCOME15</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- ============================================ -->
 <!-- HERO -->
 <!-- ============================================ -->
@@ -208,30 +235,17 @@ faqs:
 
     <div class="pricing-plan-grid">
       {% for plan in page.resolved.pricing.plans %}
-        {% comment %} Look up matching config product (same as classy) {% endcomment %}
-        {% assign _config_product = nil %}
-        {% for p in site.web_manager.payment.products %}
-          {% if p.id == plan.id %}{% assign _config_product = p %}{% break %}{% endif %}
-        {% endfor %}
-
-        {% if plan.pricing.monthly or plan.pricing.monthly == 0 %}
-          {% assign _plan_monthly = plan.pricing.monthly %}
-        {% elsif _config_product.prices.monthly or _config_product.prices.monthly == 0 %}
-          {% assign _plan_monthly = _config_product.prices.monthly %}
-        {% else %}{% assign _plan_monthly = 0 %}{% endif %}
-
-        {% if plan.pricing.annually or plan.pricing.annually == 0 %}
-          {% assign _plan_annually = plan.pricing.annually %}
-        {% elsif _config_product.prices.annually or _config_product.prices.annually == 0 %}
-          {% assign _plan_annually = _config_product.prices.annually %}
-        {% else %}{% assign _plan_annually = 0 %}{% endif %}
+        {% comment %} Shared pricing math (assigns _plan_monthly/_plan_annually/per-unit into this scope) {% endcomment %}
+        {% include core/pricing/resolve-plan.html plan=plan %}
 
         <article class="card pricing-plan {% if plan.popular %}pricing-plan--popular{% endif %}">
           {% if plan.popular %}
             <span class="pricing-plan-flag">Most Popular</span>
           {% endif %}
 
-          <h3 class="pricing-plan-name">{{ plan.name }}</h3>
+          <!-- .card-title is load-bearing: the framework pricing JS reads the plan
+               name for analytics via `.h3, .h2, .card-title` inside the card. -->
+          <h3 class="card-title pricing-plan-name">{{ plan.name }}</h3>
           <p class="pricing-plan-tagline">{{ plan.tagline }}</p>
 
           <!-- Price -->
@@ -244,23 +258,8 @@ faqs:
           </div>
 
           {% if page.resolved.pricing.price_per_unit.enabled %}
-            {% comment %} Resolve the per-unit value; only render if it's a usable positive number {% endcomment %}
-            {% assign _ppu_value = nil %}
-            {% if _plan_monthly > 0 %}
-              {% for feature in plan.features %}
-                {% if feature.id == page.resolved.pricing.price_per_unit.feature_id %}
-                  {% assign _ppu_value = feature.value %}
-                  {% if _config_product and _ppu_value == nil %}
-                    {% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _ppu_value = _lim[1] %}{% break %}{% endif %}{% endfor %}
-                  {% endif %}
-                {% endif %}
-              {% endfor %}
-            {% endif %}
             <p class="pricing-plan-ppu">
-              {% if _plan_monthly > 0 and _ppu_value and _ppu_value > 0 %}
-                {% assign monthly_price_per_unit = _plan_monthly | times: 1.0 | divided_by: _ppu_value | round: 2 %}
-                {% assign annual_monthly_price = _plan_annually | divided_by: 12.0 %}
-                {% assign annual_price_per_unit = annual_monthly_price | divided_by: _ppu_value | round: 2 %}
+              {% if monthly_price_per_unit %}
                 <span class="price-per-unit" data-monthly="${{ monthly_price_per_unit }}" data-annually="${{ annual_price_per_unit }}">${{ annual_price_per_unit }}</span> per {{ page.resolved.pricing.price_per_unit.label }}
               {% elsif _plan_monthly == 0 %}
                 Perfect for trying out