@runwell/shopify-toolkit 0.21.0 → 0.24.0

package/modules/runwell-bundle-system/qa/v1.5-mobile-qa-checklist.md

@@ -0,0 +1,103 @@
+# v1.5 mobile QA checklist: Mode C BYOB + admin block
+
+Re-validates the storefront at 375 px after Mode C BYOB lands, plus admin block usability on Shopify's mobile admin app. Mirrors BS-14's v1 pass; adds the new v1.5 surfaces.
+
+## Environment
+
+- Real iPhone (iPhone 12 or newer; iOS 17+).
+- Safari for storefront; Shopify mobile admin app for admin block.
+- Staging tenant with at least:
+  - 1 Mode A bundle (Lusha pattern, for regression).
+  - 1 Mode B bundle (Lushi pattern, for regression).
+  - 1 Mode C bundle per layout: grid, accordion, radio.
+
+## Storefront checks (per Mode C layout)
+
+### Grid layout
+
+- [ ] Picker renders at 2 columns at 375 px.
+- [ ] Each candidate card has a 44 px tap target.
+- [ ] Tap toggles selection; checkmark / border state matches the rest of the bundle module.
+- [ ] Live counter updates as you tap.
+- [ ] Subtotal + savings refresh client-side.
+- [ ] ATC stays disabled until min picks reached; enables when in range.
+- [ ] Max-pick cap drops the oldest selection (or refuses the new one, depending on convention).
+- [ ] Required candidates are pre-checked and not deselectable.
+- [ ] Unavailable candidates render disabled, not removed.
+- [ ] Submit posts a multi-line cart add; cart drawer reflects the picks.
+
+### Accordion layout
+
+- [ ] Categories render as `<details>` blocks; first one open by default.
+- [ ] Per-category count badge updates on each pick.
+- [ ] Total picks across categories enforced against bundle_byob_max_picks.
+- [ ] Required candidates ship pre-checked in their parent category.
+
+### Radio layout
+
+- [ ] Each category renders as a radio group; first option pre-selected.
+- [ ] One pick per category enforced (radios).
+- [ ] Total picks equals category count; ATC enables once every category has a pick.
+- [ ] Switching pick within a category updates subtotal + total.
+
+## Storefront regression (v1 surfaces with a Mode C bundle in catalog)
+
+- [ ] /bundles page lists the Mode C bundle alongside Mode A and Mode B.
+- [ ] Bundle card hero variant renders correctly with the BYOB savings badge.
+- [ ] PDP pairs-with widget shows the Mode C bundle when a component is the current PDP.
+- [ ] Home page curated stacks strip includes the Mode C bundle when picked.
+- [ ] Cart drawer cross-sell offers the Mode C bundle when a partial set is in cart.
+- [ ] PDP banner with a Mode C bundle reads "Save N% when bundled".
+
+## Admin block checks (Shopify mobile admin app)
+
+Best-effort: mobile admin is rare; document any limitations.
+
+### Composition panel (BS-205)
+
+- [ ] Mode selector toggles between tier / component / candidate sub-UIs.
+- [ ] Add / remove / reorder works in each mode.
+- [ ] Validation banner surfaces when constraints are violated.
+
+### Pricing panel (BS-206)
+
+- [ ] Pricing model dropdown limits to allowed modes per bundle_mode.
+- [ ] Value editor changes shape with model.
+- [ ] Save disabled when value is empty.
+
+### Surfaces panel (BS-207)
+
+- [ ] All 6 surface toggles render.
+- [ ] Toggle state persists after save.
+
+### Cross-supplier banner (BS-208)
+
+- [ ] Banner appears when components span multiple suppliers.
+- [ ] Mentions the actual supplier count.
+- [ ] Suppresses when count is 1.
+
+### Bundle preview (BS-209)
+
+- [ ] Iframe renders at 375 px.
+- [ ] Preview reflects the saved state (not buffered edits).
+
+## Cross-cutting
+
+- [ ] No horizontal scroll on any storefront surface.
+- [ ] All tap targets >= 44 px.
+- [ ] Total module bytes still under 80 KB (CSS + JS, pre-minification).
+- [ ] No console errors on storefront or admin.
+- [ ] Lighthouse mobile score >= 80 on the BYOB PDP.
+
+## Screenshot capture
+
+Per surface, capture 3 states (default, mid-interaction, validation error).
+
+Path: `runwell-shopify-toolkit/docs/bundle-system/qa/v1.5-screenshots-YYYY-MM-DD/`.
+
+## Sign-off
+
+- [ ] All applicable checks passed.
+- [ ] Screenshots captured and committed.
+- [ ] P1 failures fixed; P2 logged for v1.5 patch.
+- [ ] QA owner + date: ___________________

package/modules/runwell-bundle-system/sections/runwell-bundle-cart-xsell.liquid

@@ -20,7 +20,8 @@
 {%- if settings.bundle_system__surface_4_cart_drawer_xsell_enabled == false -%}
   {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
 {%- else -%}
-  {%- assign bundle_index = shop.metaobjects.bundle_index.entries.value -%}
+  {%- assign bundle_index_instance = shop.metaobjects.bundle_index.values | first -%}
+  {%- assign bundle_index = bundle_index_instance.entries.value -%}
   {%- assign render_slot = false -%}
   {%- if bundle_index and bundle_index.products and bundle_index.bundles -%}
     {%- assign render_slot = true -%}

package/modules/runwell-bundle-system/sections/runwell-bundle-collection.liquid

@@ -11,15 +11,27 @@
 
 {%- assign mode = section.settings.mode | default: 'grid' -%}
 
-{%- comment -%} Build the bundles list from collection.products if present, otherwise scan all_products. {%- endcomment -%}
-{%- assign source_products = collection.products -%}
-{%- if source_products == blank or source_products.size == 0 -%}
-  {%- assign source_products = all_products -%}
+{%- comment -%}
+  Build the bundles list. Prefer the bundle_index shop metaobject when
+  populated (one read; deterministic). Fall back to scanning all_products
+  for products tagged 'bundle'.
+{%- endcomment -%}
+{%- assign bundle_index_instance = shop.metaobjects.bundle_index.values | first -%}
+{%- assign bundle_index = bundle_index_instance.entries.value -%}
+{%- assign bundles = '' | split: '' -%}
+{%- if bundle_index and bundle_index.bundles -%}
+  {%- for entry in bundle_index.bundles -%}
+    {%- assign bp = all_products[entry[0]] -%}
+    {%- if bp != blank and bp.handle != blank -%}
+      {%- assign bundles = bundles | concat: bp -%}
+    {%- endif -%}
+  {%- endfor -%}
 {%- endif -%}
-
-{%- assign bundles_meta = source_products | where: 'metafields.runwell.bundle_mode' -%}
-{%- assign bundles = bundles_meta -%}
-{%- if bundles == empty or bundles.size == 0 -%}
+{%- if bundles.size == 0 -%}
+  {%- assign source_products = collection.products -%}
+  {%- if source_products == blank or source_products.size == 0 -%}
+    {%- assign source_products = all_products -%}
+  {%- endif -%}
   {%- assign bundles = source_products | where: 'tags', 'bundle' -%}
 {%- endif -%}
 

package/modules/runwell-bundle-system/sections/runwell-bundle-pdp-banner.liquid

@@ -10,7 +10,8 @@
 {%- if settings.bundle_system__surface_5_pdp_banner_enabled == false -%}
   {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
 {%- else -%}
-  {%- assign bundle_index = shop.metaobjects.bundle_index.entries.value -%}
+  {%- assign bundle_index_instance = shop.metaobjects.bundle_index.values | first -%}
+  {%- assign bundle_index = bundle_index_instance.entries.value -%}
   {%- assign matching_handles = '' -%}
   {%- if bundle_index and bundle_index.products -%}
     {%- assign matching_handles = bundle_index.products[product.handle] -%}

package/modules/runwell-bundle-system/sections/runwell-bundle-pdp-pairs-with.liquid

@@ -12,7 +12,8 @@
 {%- if settings.bundle_system__surface_2_pdp_pairs_with_enabled == false -%}
   {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
 {%- else -%}
-  {%- assign bundle_index = shop.metaobjects.bundle_index.entries.value -%}
+  {%- assign bundle_index_instance = shop.metaobjects.bundle_index.values | first -%}
+  {%- assign bundle_index = bundle_index_instance.entries.value -%}
   {%- assign matching_handles = '' -%}
   {%- if bundle_index and bundle_index.products -%}
     {%- assign matching_handles = bundle_index.products[product.handle] -%}

package/modules/runwell-bundle-system/sections/runwell-bundle-pdp.liquid

@@ -58,6 +58,18 @@
           bundle_savings_amount: bundle_savings_amount,
           bundle_savings_pct: bundle_savings_pct
         %}
+      {%- elsif bundle_mode == 'byob' -%}
+        {% render 'runwell-bundle-byob-picker',
+          product: product,
+          bundle_pricing_model: bundle_pricing_model,
+          bundle_pricing_value: bundle_pricing_value,
+          bundle_byob_candidates: bundle_byob_candidates,
+          bundle_byob_min_picks: bundle_byob_min_picks,
+          bundle_byob_max_picks: bundle_byob_max_picks,
+          bundle_byob_layout: bundle_byob_layout,
+          bundle_byob_categories: bundle_byob_categories,
+          bundle_byob_required_handles: bundle_byob_required_handles
+        %}
       {%- endif -%}
 
       {%- if bundle_fomo_mode != 'none' and bundle_fomo_mode != blank -%}
@@ -100,6 +112,8 @@
   "presets": [
     { "name": "Bundle PDP", "category": "Runwell" }
   ],
-  "templates": ["product.bundle"]
+  "enabled_on": {
+    "templates": ["product"]
+  }
 }
 {% endschema %}

package/modules/runwell-bundle-system/sections/runwell-bundle-quantity-builder.liquid

@@ -0,0 +1,318 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-quantity-builder.liquid.
+
+  Mode A bundle PDP surface. Renders a product image gallery beside a
+  quantity-tier picker, sale-prefix headline, FOMO countdown + scarcity,
+  rating row, trust badges row, and an ATC that can append a free gift
+  product when the selected tier opts into one.
+
+  Everything bundle-specific is read from `product.metafields.runwell.*`:
+    bundle_quantity_tiers   [{qty, discount_pct, label?, popular?,
+                              free_shipping?, free_gift?}]
+    bundle_sale_prefix      "Spring Sculpting Sale"
+    bundle_fomo_mode        none | discount | scarcity | both
+    bundle_fomo_cycle_days  number (rolling deadline cycle)
+    bundle_fomo_stock_count number
+    bundle_rating_score     "4.8/5"
+    bundle_rating_count     "2,400+"
+    bundle_free_gift_handle product handle (real $0 product); the section
+                            adds a hidden form input + the ATC JS appends
+                            it as a second /cart/add line when a free_gift
+                            tier is selected.
+
+  Section settings cover what's tenant/page level (color scheme, padding,
+  trust badge copy, toggles). Per-tier data is metafield-driven so admin
+  changes flow without re-deploying the theme.
+
+  Replaces the legacy modules/bundle-builder/sections/runwell-bundle-builder
+  section. CSS class prefix kept stable (.runwell-bundle-quantity-builder)
+  with the same visual structure to preserve tenant calibration.
+{%- endcomment -%}
+
+{{ 'runwell-bundle-quantity-builder.css' | asset_url | stylesheet_tag }}
+
+{%- assign product = section.settings.product -%}
+{%- if product == blank -%}
+  <div class="runwell-bundle-quantity-builder runwell-bundle-quantity-builder--empty page-width">
+    <p>Select a product in the section editor to render the bundle builder.</p>
+  </div>
+{%- else -%}
+
+  {%- assign mf = product.metafields.runwell -%}
+  {%- assign tiers = mf.bundle_quantity_tiers.value -%}
+  {%- assign sale_prefix = mf.bundle_sale_prefix.value | default: section.settings.sale_prefix -%}
+  {%- assign fomo_mode = mf.bundle_fomo_mode.value | default: 'none' -%}
+  {%- assign fomo_cycle_days = mf.bundle_fomo_cycle_days.value | default: 30 -%}
+  {%- assign fomo_stock_count = mf.bundle_fomo_stock_count.value | default: 0 -%}
+  {%- assign rating_score = mf.bundle_rating_score.value -%}
+  {%- assign rating_count = mf.bundle_rating_count.value -%}
+  {%- assign free_gift_handle = mf.bundle_free_gift_handle.value -%}
+  {%- assign free_gift_product = blank -%}
+  {%- if free_gift_handle != blank -%}
+    {%- assign free_gift_product = all_products[free_gift_handle] -%}
+  {%- endif -%}
+
+  <section
+    class="runwell-bundle-quantity-builder color-{{ section.settings.color_scheme }}"
+    style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;"
+    data-runwell-bundle-quantity-builder
+    data-product-handle="{{ product.handle }}"
+    {%- if free_gift_product != blank %} data-free-gift-variant-id="{{ free_gift_product.selected_or_first_available_variant.id }}"{%- endif -%}
+  >
+    <div class="page-width">
+      <div class="runwell-bundle-quantity-builder__grid">
+
+        {%- comment -%} Gallery: prefers product.media; falls back to featured_image. {%- endcomment -%}
+        <div class="runwell-bundle-quantity-builder__media">
+          {%- assign media_items = product.media -%}
+          {%- if media_items.size > 0 -%}
+            <div class="runwell-bundle-quantity-builder__slideshow" data-slideshow>
+              {%- for media in media_items -%}
+                <div
+                  class="runwell-bundle-quantity-builder__slide {% if forloop.first %}runwell-bundle-quantity-builder__slide--active{% endif %}"
+                  data-slide="{{ forloop.index0 }}"
+                >
+                  {{ media | image_url: width: 1200 | image_tag:
+                    class: 'runwell-bundle-quantity-builder__img',
+                    loading: forloop.first | default: 'eager',
+                    sizes: '(min-width: 990px) 50vw, 100vw',
+                    alt: media.alt | default: product.title
+                  }}
+                </div>
+              {%- endfor -%}
+            </div>
+            {%- if media_items.size > 1 -%}
+              <div class="runwell-bundle-quantity-builder__thumbnails" data-thumbnails>
+                {%- for media in media_items -%}
+                  <button
+                    class="runwell-bundle-quantity-builder__thumb {% if forloop.first %}runwell-bundle-quantity-builder__thumb--active{% endif %}"
+                    type="button"
+                    data-thumb="{{ forloop.index0 }}"
+                    aria-label="View image {{ forloop.index }}"
+                  >
+                    {{ media | image_url: width: 160, height: 160, crop: 'center' | image_tag: loading: 'lazy', alt: '' }}
+                  </button>
+                {%- endfor -%}
+              </div>
+            {%- endif -%}
+          {%- elsif product.featured_image -%}
+            <div class="runwell-bundle-quantity-builder__slideshow">
+              <div class="runwell-bundle-quantity-builder__slide runwell-bundle-quantity-builder__slide--active">
+                {{ product.featured_image | image_url: width: 1200 | image_tag:
+                  class: 'runwell-bundle-quantity-builder__img',
+                  loading: 'eager',
+                  alt: product.title
+                }}
+              </div>
+            </div>
+          {%- else -%}
+            <div class="runwell-bundle-quantity-builder__slideshow">
+              <div class="runwell-bundle-quantity-builder__slide runwell-bundle-quantity-builder__slide--active">
+                <div class="runwell-bundle-quantity-builder__img runwell-bundle-quantity-builder__img--placeholder" aria-label="No image"></div>
+              </div>
+            </div>
+          {%- endif -%}
+        </div>
+
+        <div class="runwell-bundle-quantity-builder__info">
+
+          {%- if section.settings.show_rating and rating_score != blank -%}
+            <div class="runwell-bundle-quantity-builder__rating">
+              <span class="runwell-bundle-quantity-builder__stars" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
+              <span class="runwell-bundle-quantity-builder__rating-text">
+                Rated {{ rating_score }}{%- if rating_count != blank %} ({{ rating_count }} Reviews){%- endif -%}
+              </span>
+            </div>
+          {%- endif -%}
+
+          <h2 class="runwell-bundle-quantity-builder__title h1">{{ product.title }}</h2>
+
+          {%- if fomo_mode != 'none' or sale_prefix != blank -%}
+            {%- assign show_scarcity = false -%}
+            {%- if fomo_mode == 'scarcity' or fomo_mode == 'both' -%}
+              {%- if fomo_stock_count > 0 -%}{%- assign show_scarcity = true -%}{%- endif -%}
+            {%- endif -%}
+
+            {%- assign sale_text = sale_prefix -%}
+            {%- if fomo_mode == 'discount' or fomo_mode == 'both' -%}
+              {%- assign now_epoch = 'now' | date: '%s' | plus: 0 -%}
+              {%- assign cycle_seconds = fomo_cycle_days | times: 86400 -%}
+              {%- assign cycle_position = now_epoch | modulo: cycle_seconds -%}
+              {%- assign remaining_seconds = cycle_seconds | minus: cycle_position -%}
+              {%- assign end_epoch = now_epoch | plus: remaining_seconds -%}
+              {%- assign end_date = end_epoch | date: '%B %e' | strip -%}
+              {%- if sale_prefix != blank -%}
+                {%- capture sale_text -%}{{ sale_prefix }}: Ends {{ end_date }}{%- endcapture -%}
+              {%- else -%}
+                {%- capture sale_text -%}Ends {{ end_date }}{%- endcapture -%}
+              {%- endif -%}
+            {%- endif -%}
+
+            {%- if sale_text != blank -%}
+              <div class="runwell-bundle-quantity-builder__sale-heading">
+                <span class="runwell-bundle-quantity-builder__sale-line"></span>
+                <span class="runwell-bundle-quantity-builder__sale-text">{{ sale_text }}</span>
+                <span class="runwell-bundle-quantity-builder__sale-line"></span>
+              </div>
+            {%- endif -%}
+
+            {%- if show_scarcity -%}
+              <div class="runwell-bundle-quantity-builder__scarcity">
+                <span class="runwell-bundle-quantity-builder__scarcity-dot"></span>
+                Only {{ fomo_stock_count }} left in stock
+              </div>
+            {%- endif -%}
+          {%- endif -%}
+
+          {%- if tiers and tiers.size > 0 -%}
+            {%- assign has_popular = false -%}
+            {%- for t in tiers -%}
+              {%- if t.popular -%}{%- assign has_popular = true -%}{%- endif -%}
+            {%- endfor -%}
+
+            <form
+              action="{{ routes.cart_add_url }}"
+              method="post"
+              enctype="multipart/form-data"
+              class="runwell-bundle-quantity-builder__form"
+              data-runwell-bundle-form
+            >
+              <input type="hidden" name="form_type" value="product">
+              <input type="hidden" name="utf8" value="✓">
+              <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+
+              <fieldset class="runwell-bundle-quantity-builder__options" aria-label="Choose quantity">
+                <legend class="visually-hidden">Choose quantity</legend>
+                {%- for t in tiers -%}
+                  {%- assign is_default = false -%}
+                  {%- if has_popular and t.popular -%}
+                    {%- assign is_default = true -%}
+                  {%- elsif has_popular == false and forloop.first -%}
+                    {%- assign is_default = true -%}
+                  {%- endif -%}
+
+                  {%- assign tier_label = t.label -%}
+                  {%- if tier_label == blank -%}
+                    {%- capture tier_label -%}{{ t.qty }}x {{ product.title }}{%- endcapture -%}
+                  {%- endif -%}
+
+                  {%- assign discount_amount = product.price | times: t.discount_pct | divided_by: 100 -%}
+                  {%- assign per_unit_price = product.price | minus: discount_amount -%}
+                  {%- assign total_price = per_unit_price | times: t.qty -%}
+                  {%- assign full_price = product.price | times: t.qty -%}
+                  {%- assign savings = full_price | minus: total_price -%}
+
+                  <label
+                    class="runwell-bundle-quantity-builder__option {% if t.popular %}runwell-bundle-quantity-builder__option--popular{% endif %} {% if is_default %}runwell-bundle-quantity-builder__option--selected{% endif %}"
+                    data-tier-qty="{{ t.qty }}"
+                    data-tier-free-gift="{{ t.free_gift | default: false }}"
+                  >
+                    {%- if t.popular -%}
+                      <span class="runwell-bundle-quantity-builder__popular-badge">MOST POPULAR</span>
+                    {%- endif -%}
+                    <input
+                      type="radio"
+                      name="quantity"
+                      value="{{ t.qty }}"
+                      class="runwell-bundle-quantity-builder__option-input"
+                      data-runwell-tier-radio
+                      {% if is_default %}checked{% endif %}
+                    >
+                    <span class="runwell-bundle-quantity-builder__option-radio" aria-hidden="true"></span>
+                    <span class="runwell-bundle-quantity-builder__option-content">
+                      <span class="runwell-bundle-quantity-builder__option-header">
+                        <span class="runwell-bundle-quantity-builder__option-title">{{ tier_label }}</span>
+                        <span class="runwell-bundle-quantity-builder__option-pricing">
+                          <span class="runwell-bundle-quantity-builder__option-price">{{ total_price | money_without_trailing_zeros }}</span>
+                          {%- if savings > 0 -%}
+                            <span class="runwell-bundle-quantity-builder__option-compare">{{ full_price | money_without_trailing_zeros }}</span>
+                          {%- endif -%}
+                        </span>
+                      </span>
+                      {%- if savings > 0 or t.free_shipping -%}
+                        <span class="runwell-bundle-quantity-builder__option-badges">
+                          {%- if savings > 0 -%}
+                            <span class="runwell-bundle-quantity-builder__badge runwell-bundle-quantity-builder__badge--save">SAVE {{ savings | money_without_trailing_zeros }}</span>
+                          {%- endif -%}
+                          {%- if t.free_shipping -%}
+                            <span class="runwell-bundle-quantity-builder__badge runwell-bundle-quantity-builder__badge--shipping">FREE SHIPPING</span>
+                          {%- endif -%}
+                        </span>
+                      {%- endif -%}
+                      {%- if t.free_gift and free_gift_product != blank -%}
+                        <span class="runwell-bundle-quantity-builder__free-gift">
+                          <span class="runwell-bundle-quantity-builder__gift-icon" aria-hidden="true">&#127873;</span>
+                          <span>+ Free {{ free_gift_product.title }} for a limited time.</span>
+                        </span>
+                      {%- endif -%}
+                    </span>
+                  </label>
+                {%- endfor -%}
+              </fieldset>
+
+              <button
+                type="submit"
+                class="runwell-bundle-quantity-builder__atc button button--full-width"
+                data-runwell-bundle-atc
+                {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
+              >
+                <span class="runwell-bundle-quantity-builder__atc-text">
+                  {% if product.selected_or_first_available_variant.available %}ADD TO CART{% else %}SOLD OUT{% endif %}
+                </span>
+                <span class="runwell-bundle-quantity-builder__atc-loading" style="display:none;" aria-hidden="true">Adding…</span>
+              </button>
+            </form>
+          {%- else -%}
+            <p class="runwell-bundle-quantity-builder__empty">
+              No quantity tiers configured. Set
+              <code>runwell.bundle_quantity_tiers</code> on this product
+              to enable the bundle builder.
+            </p>
+          {%- endif -%}
+
+          {%- if section.settings.show_trust_badges -%}
+            <div class="runwell-bundle-quantity-builder__trust">
+              {%- if section.settings.trust_1 != blank -%}<span>&#9989; {{ section.settings.trust_1 }}</span>{%- endif -%}
+              {%- if section.settings.trust_2 != blank -%}<span>&#9989; {{ section.settings.trust_2 }}</span>{%- endif -%}
+              {%- if section.settings.trust_3 != blank -%}<span>&#9989; {{ section.settings.trust_3 }}</span>{%- endif -%}
+            </div>
+          {%- endif -%}
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <script src="{{ 'runwell-bundle-system.js' | asset_url }}" defer="defer"></script>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Bundle quantity builder",
+  "tag": "section",
+  "class": "section-runwell-bundle-quantity-builder",
+  "settings": [
+    { "type": "header", "content": "Source product" },
+    { "type": "product", "id": "product", "label": "Product", "info": "The bundle reads runwell.bundle_quantity_tiers + sale_prefix + rating + free gift handle from this product's metafields." },
+
+    { "type": "header", "content": "Sale prefix fallback" },
+    { "type": "text", "id": "sale_prefix", "label": "Sale prefix fallback", "info": "Used only when the product has no runwell.bundle_sale_prefix metafield set." },
+
+    { "type": "header", "content": "Rating display" },
+    { "type": "checkbox", "id": "show_rating", "label": "Show star rating", "default": true },
+
+    { "type": "header", "content": "Trust badges" },
+    { "type": "checkbox", "id": "show_trust_badges", "label": "Show trust badges", "default": true },
+    { "type": "text", "id": "trust_1", "label": "Badge 1", "default": "90-Day Guarantee" },
+    { "type": "text", "id": "trust_2", "label": "Badge 2", "default": "Easy Returns" },
+    { "type": "text", "id": "trust_3", "label": "Badge 3", "default": "Free Shipping" },
+
+    { "type": "header", "content": "Layout" },
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
+    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 160, "step": 4, "default": 40, "unit": "px" },
+    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 160, "step": 4, "default": 40, "unit": "px" }
+  ],
+  "presets": [
+    { "name": "Bundle: quantity builder", "category": "Runwell" }
+  ]
+}
+{% endschema %}

package/modules/runwell-bundle-system/snippets/runwell-bundle-byob-picker-accordion.liquid

@@ -0,0 +1,84 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-byob-picker-accordion.liquid.
+  Mode C, accordion layout. Candidates grouped by bundle_byob_categories.
+  One category open at a time. Total picks across all categories
+  enforced via JS.
+
+  Inputs:
+    bundle_byob_candidates, bundle_byob_min_picks, bundle_byob_max_picks,
+    bundle_byob_categories ([{label, handles}]),
+    bundle_byob_required_handles, bundle_pricing_model, bundle_pricing_value.
+{%- endcomment -%}
+
+{%- if bundle_byob_categories and bundle_byob_categories.size > 0 -%}
+  {%- assign required_handles = '' -%}
+  {%- if bundle_byob_required_handles -%}
+    {%- capture required_handles -%}
+      {%- for r in bundle_byob_required_handles -%}{{ r.handle }},{%- endfor -%}
+    {%- endcapture -%}
+  {%- endif -%}
+
+  <div
+    class="runwell-bundle-system__byob-picker runwell-bundle-system__byob-picker--accordion"
+    data-runwell-byob-picker
+    data-byob-layout="accordion"
+    data-byob-min="{{ bundle_byob_min_picks }}"
+    data-byob-max="{{ bundle_byob_max_picks }}"
+    data-byob-pricing-model="{{ bundle_pricing_model }}"
+    data-byob-pricing-value="{{ bundle_pricing_value | json | escape }}"
+  >
+    {%- for category in bundle_byob_categories -%}
+      <details class="runwell-bundle-system__byob-accordion" {% if forloop.first %}open{% endif %}>
+        <summary class="runwell-bundle-system__byob-accordion-summary">
+          <span class="runwell-bundle-system__byob-accordion-label">{{ category.label }}</span>
+          <span class="runwell-bundle-system__byob-accordion-count" data-runwell-byob-cat-count>0</span>
+        </summary>
+        <div class="runwell-bundle-system__byob-accordion-body">
+          {%- for handle in category.handles -%}
+            {%- assign candidate = all_products[handle] -%}
+            {%- if candidate != blank -%}
+              {%- assign is_required = false -%}
+              {%- if required_handles contains handle -%}{%- assign is_required = true -%}{%- endif -%}
+              <label
+                class="runwell-bundle-system__byob-candidate{% if is_required %} runwell-bundle-system__byob-candidate--required{% endif %}"
+                data-handle="{{ candidate.handle }}"
+                data-price="{{ candidate.price }}"
+                data-variant-id="{{ candidate.selected_or_first_available_variant.id }}"
+                data-category="{{ category.label | escape }}"
+              >
+                <input
+                  type="checkbox"
+                  class="runwell-bundle-system__byob-input"
+                  name="byob-pick"
+                  value="{{ candidate.handle }}"
+                  {% if is_required %}checked disabled{% endif %}
+                  {% unless candidate.available %}disabled{% endunless %}
+                >
+                <span class="runwell-bundle-system__byob-candidate-media">
+                  {%- if candidate.featured_image -%}
+                    {{ candidate.featured_image | image_url: width: 240 | image_tag:
+                      width: 120,
+                      height: 120,
+                      loading: 'lazy',
+                      class: 'runwell-bundle-system__byob-candidate-thumb',
+                      alt: candidate.title
+                    }}
+                  {%- endif -%}
+                </span>
+                <span class="runwell-bundle-system__byob-candidate-body">
+                  <span class="runwell-bundle-system__byob-candidate-title">{{ candidate.title }}</span>
+                  <span class="runwell-bundle-system__byob-candidate-price">{{ candidate.price | money }}</span>
+                  {%- if is_required -%}
+                    <span class="runwell-bundle-system__byob-candidate-badge">Always included</span>
+                  {%- endif -%}
+                </span>
+              </label>
+            {%- endif -%}
+          {%- endfor -%}
+        </div>
+      </details>
+    {%- endfor -%}
+  </div>
+{%- else -%}
+  <p class="runwell-bundle-system__empty">Accordion layout requires bundle_byob_categories. Falling back to grid layout via runwell-bundle-byob-picker.liquid.</p>
+{%- endif -%}