{% sw_extends '@Storefront/storefront/base.html.twig' %} 
 
{% block base_head %} 
    {% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %} 
{% endblock %} 
 
{% block base_content %} 
    {% block page_product_detail %} 
 
        <div class="product-detail" 
             itemscope 
             itemtype="https://schema.org/Product"> 
            {% block page_product_detail_inner %} 
                {% block page_product_detail_content %} 
                    <div class="product-detail-content"> 
                        {% block page_product_detail_headline %} 
                            <div class="row align-items-center product-detail-headline"> 
                                {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %} 
                            </div> 
                        {% endblock %} 
 
                        {% set mediaItems = page.product.media.media %} 
 
                        {% block page_product_detail_main %} 
                            <div class="row product-detail-main"> 
                                {% block page_product_detail_media %} 
                                    <div class="col-lg-7 product-detail-media"> 
                                        {% if page.product.media %} 
                                            {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with { 
                                                'mediaItems': mediaItems, 
                                                'zoom': true, 
                                                'zoomModal': true, 
                                                'displayMode': 'contain', 
                                                'gutter': 5, 
                                                'minHeight': '430px', 
                                                'navigationArrows': 'inside', 
                                                'navigationDots': 'inside', 
                                                'galleryPosition': 'left', 
                                                'isProduct': true, 
                                                'fallbackImageTitle': page.product.translated.name, 
                                                'startIndexThumbnails': 1, 
                                                'startIndexSlider': 1, 
                                                'keepAspectRatioOnZoom': false 
                                            } %} 
                                        {% endif %} 
                                    </div> 
                                {% endblock %} 
 
                                {% block page_product_detail_buy %} 
                                    <div class="col-lg-5 product-detail-buy"> 
                                        {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %} 
                                    </div> 
                                {% endblock %} 
                            </div> 
                        {% endblock %} 
                    </div> 
                {% endblock %} 
 
                {% block page_product_detail_tabs %} 
                    <div class="product-detail-tabs"> 
                        {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %} 
                    </div> 
                {% endblock %} 
 
                {% block page_product_detail_cross_selling %} 
                    {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %} 
                        <div class="product-detail-tabs product-detail-cross-selling"> 
                            {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with { 
                                crossSellings: page.crossSellings 
                            } %} 
                        </div> 
                    {% endif %} 
                {% endblock %} 
            {% endblock %} 
        </div> 
    {% endblock %} 
{% endblock %}