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/components/status-badge.html.twig

@@ -0,0 +1,30 @@
+{#
+ # Status Badge Component (Bootstrap 5)
+ #
+ # Reusable order/payment status badge with contextual colors.
+ #
+ # Expected context:
+ #   status - Status slug (e.g., 'completed', 'processing', 'on-hold', 'cancelled', 'failed', 'refunded', 'pending')
+ #   label  - Display label (optional, defaults to status name via wc_get_order_status_name)
+ #
+ # Usage:
+ #   {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
+ #   {% include 'components/status-badge.html.twig' with { status: 'completed', label: 'Done' } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set display_label = label|default(wc_get_order_status_name(status)) %}
+
+{% if status == 'completed' %}
+    <span class="badge text-bg-success">{{ display_label|esc_html }}</span>
+{% elseif status == 'processing' %}
+    <span class="badge text-bg-primary">{{ display_label|esc_html }}</span>
+{% elseif status == 'on-hold' or status == 'pending' %}
+    <span class="badge text-bg-warning">{{ display_label|esc_html }}</span>
+{% elseif status == 'cancelled' or status == 'failed' or status == 'refunded' %}
+    <span class="badge text-bg-danger">{{ display_label|esc_html }}</span>
+{% else %}
+    <span class="badge text-bg-secondary">{{ display_label|esc_html }}</span>
+{% endif %}