Implement Phase 3: single product page templates (Bootstrap 5)

Add 21 Twig template overrides for the single product page:

Product layout:
- product-image: gallery with thumbnail strip, img-fluid rounded
- title: h1 entry-title
- price: fs-3 fw-bold with sale del/ins markup
- short-description: lead text-body-secondary
- meta: dl row with SKU, categories, tags
- rating: Bootstrap Icon stars with half-star, review count link
- stock: badge (bg-success/bg-danger/bg-warning) per status
- sale-flash: badge bg-danger fs-6
- share: hook-only wrapper
- product-attributes: table-sm table-striped

Related/upsells:
- related, up-sells: section with product loop grid

Tabs:
- tabs: nav-tabs + tab-content with fade transitions
- description: tab-pane with prose content
- additional-information: tab-pane with attributes hook

Add to cart (4 product types + variation JS):
- simple: input-group quantity + btn-primary btn-lg
- variable: form-select per attribute + variation display
- grouped: table-borderless with quantity per child product
- external: btn-outline-primary with external link icon
- variation: Underscore.js script templates (Bootstrap-styled)
- variation-add-to-cart-button: quantity + submit with hidden fields

CSS additions: gallery thumbnail hover, variation selector spacing.

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

templates/single-product/tabs/additional-information.html.twig

@@ -0,0 +1,22 @@
+{#
+ # Additional Information Tab Content (Bootstrap 5 Override)
+ #
+ # Renders the product attributes table inside the Additional Information tab.
+ #
+ # Expected context:
+ #   product - WC_Product object
+ #   heading - Tab heading text (filtered)
+ #
+ # WooCommerce PHP equivalent: single-product/tabs/additional-information.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set heading = heading|default(__('Additional information')) %}
+
+{% if heading %}
+    <h2 class="h5 mb-3">{{ heading|esc_html }}</h2>
+{% endif %}
+
+{{ do_action('woocommerce_product_additional_information', product) }}

templates/single-product/tabs/description.html.twig

@@ -0,0 +1,26 @@
+{#
+ # Description Tab Content (Bootstrap 5 Override)
+ #
+ # Renders the product description inside the Description tab pane.
+ #
+ # Expected context:
+ #   heading     - Tab heading text (filtered)
+ #   description - Product description HTML (the_content())
+ #
+ # WooCommerce PHP equivalent: single-product/tabs/description.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set heading = heading|default(__('Description')) %}
+
+{% if heading %}
+    <h2 class="h5 mb-3">{{ heading|esc_html }}</h2>
+{% endif %}
+
+{% if description is defined %}
+    {{ description|raw }}
+{% else %}
+    {{ the_content() }}
+{% endif %}

templates/single-product/tabs/tabs.html.twig

@@ -0,0 +1,56 @@
+{#
+ # Product Tabs (Bootstrap 5 Override)
+ #
+ # Renders product tabs (Description, Additional Info, Reviews) using
+ # Bootstrap 5 nav-tabs and tab-content with fade transitions.
+ #
+ # Expected context:
+ #   product_tabs - Associative array of tabs, each with:
+ #     key.title    - Tab title
+ #     key.callback - Tab content callback name
+ #     key.priority - Sort order
+ #
+ # WooCommerce PHP equivalent: single-product/tabs/tabs.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% if product_tabs is defined and product_tabs|length > 0 %}
+    <div class="woocommerce-tabs wc-tabs-wrapper mt-5">
+        {# Tab navigation #}
+        <ul class="nav nav-tabs" id="productTabs" role="tablist">
+            {% for key, tab in product_tabs %}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link{% if loop.first %} active{% endif %}"
+                            id="{{ key }}-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#tab-{{ key }}"
+                            type="button"
+                            role="tab"
+                            aria-controls="tab-{{ key }}"
+                            aria-selected="{{ loop.first ? 'true' : 'false' }}">
+                        {{ tab.title|esc_html }}
+                    </button>
+                </li>
+            {% endfor %}
+        </ul>
+
+        {# Tab content panels #}
+        <div class="tab-content py-4" id="productTabContent">
+            {% for key, tab in product_tabs %}
+                <div class="tab-pane fade{% if loop.first %} show active{% endif %}"
+                     id="tab-{{ key }}"
+                     role="tabpanel"
+                     aria-labelledby="{{ key }}-tab"
+                     tabindex="0">
+                    {% if tab.callback is defined %}
+                        {{ call_user_func(tab.callback, key, tab) }}
+                    {% endif %}
+                </div>
+            {% endfor %}
+        </div>
+
+        {{ do_action('woocommerce_product_after_tabs') }}
+    </div>
+{% endif %}