{# Custom single product template for composable products #}
<div id="product-{{ product_id }}" class="{{ product_class }}">

    {# Compact product header — replaces the large image gallery #}
    <div class="composable-product-header">
        {% if image_html %}
        <div class="composable-header-thumbnail">
            {{ image_html|raw }}
        </div>
        {% endif %}

        <div class="composable-header-info">
            <h1 class="product_title entry-title">{{ product_name|esc_html }}</h1>

            {% if price_html %}
            <div class="composable-header-price price">
                {{ price_html|raw }}
            </div>
            {% endif %}

            {% if short_description %}
            <div class="composable-header-description">
                {{ short_description|raw }}
            </div>
            {% endif %}
        </div>
    </div>

    {# Full-width product selector #}
    <div class="composable-selector-area">
        {{ selector_html|raw }}
    </div>

    {# WooCommerce after-summary content (tabs, related products) #}
    {{ after_summary_html|raw }}

</div>