Implement Phase 9 & reusable components; skip Phase 8 (emails)

Phase 8 (Emails) skipped: WooCommerce email rendering uses
wc_get_template_html() which bypasses the Twig pipeline entirely.
Email customization deferred to plugins or block email editor.

Phase 9 - Supplementary (7 templates):
- Brand description with thumbnail, taxonomy archive delegate
- Brands A-Z shortcode with alphabetical index navigation
- Single brand thumbnail shortcode
- REST API OAuth login and grant-access forms
- Back-in-stock notification form with email input

Reusable Components (6 templates):
- price: product price display with sale handling
- rating: star rating with Bootstrap Icons (filled/half/empty)
- address-card: billing/shipping address card with edit link
- status-badge: contextual order status badges
- quantity-input: +/- input group widget
- form-field: universal form field renderer (text/select/textarea/checkbox)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

templates/brands/shortcodes/brands-a-z.html.twig

@@ -0,0 +1,56 @@
+{#
+ # Brands A-Z Listing (Bootstrap 5 Override)
+ #
+ # Alphabetical index of product brands used by [product_brand_list] shortcode.
+ #
+ # Expected context:
+ #   index          - Array of index characters (A-Z, 0-9)
+ #   product_brands - Array keyed by character, each containing brand term objects
+ #   show_empty     - Whether to show empty index letters
+ #   show_top_links - Whether to show "Top" links after each section
+ #
+ # WooCommerce PHP equivalent: brands/shortcodes/brands-a-z.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<div id="brands_a_z">
+    <nav class="mb-4" aria-label="{{ __('Brand index') }}">
+        <ul class="list-inline brands_index">
+            {% for i in index %}
+                {% if product_brands[i] is defined %}
+                    <li class="list-inline-item">
+                        <a href="#brands-{{ i|esc_attr }}" class="btn btn-sm btn-outline-primary">{{ i|esc_html }}</a>
+                    </li>
+                {% elseif show_empty %}
+                    <li class="list-inline-item">
+                        <span class="btn btn-sm btn-outline-secondary disabled">{{ i|esc_html }}</span>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </nav>
+
+    {% for i in index %}
+        {% if product_brands[i] is defined %}
+            <h3 id="brands-{{ i|esc_attr }}" class="h5 border-bottom pb-2 mt-4 mb-3">{{ i|esc_html }}</h3>
+
+            <ul class="list-unstyled brands row row-cols-1 row-cols-sm-2 row-cols-md-3 g-2 mb-3">
+                {% for brand in product_brands[i] %}
+                    <li class="col">
+                        <a href="{{ get_term_link(brand.slug, 'product_brand')|esc_url }}">
+                            {{ brand.name|esc_html }}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+
+            {% if show_top_links %}
+                <a class="btn btn-sm btn-link" href="#brands_a_z">
+                    <i class="bi bi-arrow-up me-1" aria-hidden="true"></i>{{ __('Top') }}
+                </a>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+</div>

templates/brands/shortcodes/single-brand.html.twig

@@ -0,0 +1,24 @@
+{#
+ # Single Brand Thumbnail (Bootstrap 5 Override)
+ #
+ # Renders a single brand image link, used by [product_brand] shortcode.
+ #
+ # Expected context:
+ #   term      - WP_Term object for the brand
+ #   thumbnail - URL to brand thumbnail image
+ #   class     - CSS class for the image
+ #   width     - Image width
+ #   height    - Image height
+ #
+ # WooCommerce PHP equivalent: brands/shortcodes/single-brand.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<a href="{{ get_term_link(term, 'product_brand')|esc_url }}" class="d-inline-block">
+    <img src="{{ thumbnail|esc_url }}"
+         alt="{{ term.name|esc_attr }}"
+         class="{{ class|esc_attr }}"
+         style="width: {{ width|esc_attr }}; height: {{ height|esc_attr }};" />
+</a>