document.addEventListener('DOMContentLoaded', function() {

    // 1. الستايل المطور (مع حواف ناعمة ومرنة)
    const refinedStyle = `
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;500;700&display=swap');

            :root {
                --royal-gold: #c5a059;
                --deep-emerald: #0a3622;
                --sand-bg: #fdfaf5;
                --soft-shadow: rgba(197, 160, 89, 0.1);
            }

            .luxury-wrapper {
                direction: rtl;
                font-family: 'Tajawal', sans-serif;
                background-color: var(--sand-bg);
                padding: 100px 20px;
                overflow: hidden;
            }

            .luxury-container {
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
            }

            /* سكشن القصة */
            .story-flex {
                display: flex;
                align-items: center;
                gap: 80px;
                margin-bottom: 120px;
            }

            .image-frame {
                position: relative;
                flex: 1;
            }

            .image-frame img {
                width: 100%;
                /* هنا تم زيادة مرونة حواف الصورة بقوة */
                border-radius: 35px; 
                filter: sepia(20%);
                box-shadow: 20px 20px 0px -5px rgba(10, 54, 34, 0.9);
                transition: 0.5s ease;
            }

            /* تعديل انحناء الزخرفة لتتناسب مع انحناء الصورة الجديد */
            .image-frame::after {
                content: '';
                position: absolute;
                top: -15px; right: -15px;
                width: 100px; height: 100px;
                border-top: 3px solid var(--royal-gold);
                border-right: 3px solid var(--royal-gold);
                border-top-right-radius: 45px; 
            }

            .content-area {
                flex: 1.2;
            }

            .content-area .pre-title {
                color: var(--royal-gold);
                letter-spacing: 2px;
                font-size: 0.9rem;
                display: block;
                margin-bottom: 10px;
            }

            .content-area h2 {
                font-family: 'Amiri', serif;
                font-size: 3.5rem;
                color: var(--deep-emerald);
                margin-bottom: 25px;
                line-height: 1.2;
            }

            .content-area p {
                font-size: 1.2rem;
                line-height: 1.9;
                color: #4a4a4a;
                margin-bottom: 20px;
            }

            /* سكشن المميزات */
            .luxury-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 40px;
            }

            .luxury-card {
                background: #fff;
                padding: 50px 30px;
                text-align: center;
                border: 1px solid rgba(197, 160, 89, 0.2);
                /* هنا تم إضافة حواف دائرية ناعمة جداً للبطاقات */
                border-radius: 30px; 
                position: relative;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .luxury-card:hover {
                transform: translateY(-15px);
                border-color: var(--royal-gold);
                box-shadow: 0 20px 40px rgba(10, 54, 34, 0.05);
            }

            .card-icon {
                font-size: 2.5rem;
                color: var(--royal-gold);
                margin-bottom: 20px;
                display: block;
            }

            .card-title {
                font-family: 'Amiri', serif;
                font-size: 1.8rem;
                color: var(--deep-emerald);
                margin-bottom: 15px;
            }

            .card-desc {
                color: #777;
                line-height: 1.6;
                font-size: 1rem;
            }

            .divider {
                width: 60px;
                height: 3px;
                background: var(--royal-gold);
                margin: 20px auto;
                /* حواف ناعمة للخط الفاصل أيضاً */
                border-radius: 10px; 
            }

            @media (max-width: 992px) {
                .story-flex { flex-direction: column; text-align: center; gap: 50px; }
                .luxury-grid { grid-template-columns: 1fr; }
                .content-area h2 { font-size: 2.5rem; }
            }
        </style>
    `;

    // 2. الهيكل (HTML)
    const refinedContent = `
        <section class="luxury-wrapper">
            <div class="luxury-container">
                
                <div class="story-flex">
                    <div class="image-frame">
                        <img src="https://cdn.salla.sa/Azwqmp/cc5d086f-7b6d-4937-ab63-e0629532c4ee-500x500-u1ON5xd95RF4W4oacT4UkH6XKVG8o66M3HLxnKkQ.jpg" alt="شماغ ملكي">
                    </div>
                    
                    <div class="content-area">
                        <span class="pre-title">الأصالة في كل خيط</span>
                        <h2>لأنك تستحق التميز</h2>
                        <p>نقدم لك تجربة فريدة تجمع بين أصالة الماضي ودقة الصناعة الحديثة. شماغ صُمم خصيصاً ليمنحك هيبة الحضور.</p>
                        <p style="font-weight: bold; color: var(--royal-gold);">رفيقك في كل خطوة.. خيوط ثابتة، ألوان لا تتغير، وأطراف موزونة.</p>
                    </div>
                </div>

                <div class="luxury-grid">
                    
                    <div class="luxury-card">
                        <span class="card-icon">⚜️</span>
                        <h3 class="card-title">فخامة الصناعة</h3>
                        <div class="divider"></div>
                        <p class="card-desc">خيوط قطنية 100%، نُسجت بأعلى المعايير العالمية لتمنحك ملمساً فاخراً ومظهراً مهيباً.</p>
                    </div>

                    <div class="luxury-card">
                        <span class="card-icon">✨</span>
                        <h3 class="card-title">ثبات اللون</h3>
                        <div class="divider"></div>
                        <p class="card-desc">تقنية تثبيت اللون المتقدمة (دم الغزال)، تضمن لك إشراقة لا تبهت ولا تتغير مع تكرار الغسيل.</p>
                    </div>

                    <div class="luxury-card">
                        <span class="card-icon">📐</span>
                        <h3 class="card-title">دقة الأطراف</h3>
                        <div class="divider"></div>
                        <p class="card-desc">  تطابق  اطراف موزرن بالملي يضمن لك كشخه ثابته ماتتحرك</p>
                    </div>

                </div>
            </div>
        </section>
    `;

    // 3. التنفيذ
    document.head.insertAdjacentHTML('beforeend', refinedStyle);
    
    const footer = document.querySelector('.index footer') || document.querySelector('.index .store-footer') || document.body.lastElementChild;
    const section = document.createElement('div');
    section.innerHTML = refinedContent;

    if (footer && footer.parentNode) {
        footer.parentNode.insertBefore(section, footer);
    } else {
        document.body.appendChild(section);
    }
});