<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <!-- Product Page Layout Customization -->
        <template id="Shivasakthi_product_details_layout" inherit_id="website_sale.product" name="Shivasakthi Product Details" priority="60">
            
            <!-- 1. Style the image column -->
            <xpath expr="//div[@id='product_details']/preceding-sibling::div" position="attributes">
                 <attribute name="class" add="rounded-4 shadow-sm overflow-hidden" separator=" "/>
            </xpath>

            <!-- 2. Hide Duplicate Original Elements and Terms block via CSS (Safer than XPath) -->
            <xpath expr="//div[@id='product_details']" position="inside">
                <style>
                    /* Hide original Odoo elements that we have replaced with our premium version */
                    #product_details > h1:not(.display-5),
                    #product_details .product_price,
                    #product_details .js_product > p,
                    .o_wsale_reassurance,
                    #o_product_terms_and_share {
                        display: none !important;
                    }
                </style>
            </xpath>

            <!-- 4. Prepend our Premium Styled content at the very top of product_details container -->
            <!-- We use 'inside' and a wrapper with 'order-first' to ensure it stays at the top -->
            <xpath expr="//div[@id='product_details']" position="inside">
                <div class="product-details-wrapper Shivasakthi-premium-content" style="order: -1; position: relative; z-index: 10;">
                    <!-- Breadcrumbs -->
                    <!-- <div class="o_wsale_products_breadcrumb mb-3">
                        <ul class="breadcrumb bg-transparent p-0 small">
                            <li class="breadcrumb-item"><a href="/shop" class="text-secondary text-decoration-none">All Products</a></li>
                            <li class="breadcrumb-item active fw-bold" style="color: #e5b945;"><span t-field="product.name"/></li>
                        </ul>
                    </div> -->

                    <h1 itemprop="name" t-field="product.name" class="display-5 fw-bold mb-3 text-dark"/>
                    
                    <div class="product-meta d-flex align-items-center mb-4">
                        <span class="text-success fw-bold small">In Stock</span>
                    </div>

                    <div class="product-price mb-4">
                        <h2 class="fw-bold text-primary display-6">
                            <span t-field="product.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                            <del t-if="product.compare_list_price" class="text-muted fs-5 ms-3 fw-normal">
                                <span t-field="product.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                            </del>
                        </h2>
                    </div>

                    <p t-field="product.description_sale" class="text-muted mb-4 fs-6" placeholder="A short description of the product..."/>
                    <hr class="my-4 text-muted opacity-25"/>
                </div>
            </xpath>
        </template>
    </data>
</odoo>



