commit f408faac54ffa540dcee86921aa56fa4eab745ac
Author: Kazem Alghasi <alghasi@live.com>
Date:   Sat Aug 15 22:11:08 2026 +0330

    build(theme): scaffold initial theme directory structure and assets
    
    Initialize the base WordPress theme files, including core template
    hierarchy (index, page, single, archive, 404), WooCommerce template
    overrides, and essential asset directories.

diff --git a/404.php b/404.php
new file mode 100644
index 0000000..d79d19f
--- /dev/null
+++ b/404.php
@@ -0,0 +1,25 @@
+<?php
+get_header();
+
+// 404 Error Page
+echo '<div class="error-404 not-found">
+        <div class="page-content">
+            <h1 class="page-title">404 - صفحه مورد نظر یافت نشد</h1>
+            <p>متأسفانه صفحه‌ای که به دنبال آن بودید یافت نشد. لطفاً چک کنید که آدرس درست باشد یا به صفحه اصلی بروید.</p>
+            <div class="search-form">
+                <form role="search" method="get" class="search-form" action="' . esc_url(home_url('/')) . '">
+                    <label>
+                        <span class="screen-reader-text">جستجو:</span>
+                        <input type="search" class="search-field" placeholder="جستجو..." value="" name="s" title="جستجو:">
+                    </label>
+                    <input type="submit" class="search-submit" value="جستجو">
+                </form>
+            </div>
+            <div class="back-to-home">
+                <a href="' . esc_url(home_url('/')) . '" class="button">بازگشت به صفحه اصلی</a>
+            </div>
+        </div>
+    </div>';
+
+get_footer();
+?>
\ No newline at end of file
diff --git a/archive-product.php b/archive-product.php
new file mode 100644
index 0000000..cec86e4
--- /dev/null
+++ b/archive-product.php
@@ -0,0 +1,192 @@
+<?php
+/**
+ * آرشیو محصولات - فروشگاه و دسته‌بندی‌های مطیب
+ */
+
+get_header();
+
+// دریافت نام دسته‌بندی فعلی (اگر روی یک دسته‌بندی هستیم)
+ $current_term = get_queried_object();
+ $page_title = $current_term && isset($current_term->name) ? $current_term->name : 'فروشگاه';
+?>
+
+<main class="pt-16 md:pt-[104px]">
+    <!-- هدر صفحه -->
+    <div class="bg-forest-500 dark:bg-forest-800 text-white py-10 md:py-16">
+        <div class="max-w-7xl mx-auto px-4 md:px-6 text-center">
+            <h1 class="text-3xl md:text-4xl font-extrabold mb-2"><?php echo esc_html($page_title); ?></h1>
+            <p class="text-white/70 text-sm flex items-center justify-center gap-2">
+                <a href="<?php echo home_url(); ?>" class="hover:text-white transition">خانه</a>
+                <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
+                <span><?php echo esc_html($page_title); ?></span>
+            </p>
+        </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
+        <div class="flex gap-8">
+            
+            <!-- ===== سایدبار فیلترها (دسکتاپ) ===== -->
+            <aside class="hidden lg:block w-64 flex-shrink-0">
+                <div class="sticky top-32 space-y-6">
+                    
+                    <!-- فیلتر دسته‌بندی -->
+                    <div class="bg-white dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
+                        <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
+                            <iconify-icon icon="lucide:grid-3x3" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                            دسته‌بندی‌ها
+                        </h3>
+                        <ul class="space-y-2">
+                            <?php 
+                            $terms = get_terms( array( 'taxonomy' => 'product_cat', 'hide_empty' => true, 'parent' => 0 ) );
+                            if ( ! is_wp_error( $terms ) ) :
+                                $current_term_id = isset($current_term->term_id) ? $current_term->term_id : 0;
+                                foreach ( $terms as $term ) :?>
+                                    <li>
+                                        <a href="<?php echo get_term_link( $term ); ?>" class="flex items-center justify-between py-2 px-3 rounded-xl text-sm transition <?php echo ($current_term_id == $term->term_id) ? 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 font-bold' : 'hover:bg-cream-50 dark:hover:bg-dark-bg text-earth-400 dark:text-dark-text'; ?>">
+                                            <span><?php echo esc_html( $term->name ); ?></span>
+                                            <span class="text-xs text-cream-400 dark:text-dark-muted bg-cream-100 dark:bg-dark-bg px-2 py-0.5 rounded-full"><?php echo $term->count; ?></span>
+                                        </a>
+                                    </li>
+                                <?php endforeach; 
+                            endif; ?>
+                            <li><a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex items-center gap-2 py-2 px-3 rounded-xl text-sm text-honey-400 font-medium hover:bg-honey-50 dark:hover:bg-honey-900/20 transition">
+                                <iconify-icon icon="lucide:x-circle" width="16"></iconify-icon> حذف فیلترها
+                            </a></li>
+                        </ul>
+                    </div>
+
+                    <!-- فیلتر قیمت (فرم استاندارد ووکامرس) -->
+                    <div class="bg-white dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
+                        <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
+                            <iconify-icon icon="lucide:sliders-horizontal" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                            فیلتر قیمت
+                        </h3>
+                        <form method="get" class="space-y-4">
+                            <?php 
+                            // نگه داشتن پارامترهای فعلی (مثل دسته‌بندی)
+                            foreach ( $_GET as $key => $value ) {
+                                if ( $key !== 'min_price' && $key !== 'max_price' ) {
+                                    echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $value ) . '" />';
+                                }
+                            }
+                            ?>
+                            <div class="flex items-center gap-2">
+                                <input type="number" name="min_price" id="min_price" placeholder="از" value="<?php echo isset( $_GET['min_price'] ) ? esc_attr( $_GET['min_price'] ) : ''; ?>" min="0" class="w-full px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm text-center outline-none focus:border-forest-500 transition" dir="ltr">
+                                <span class="text-cream-400">-</span>
+                                <input type="number" name="max_price" id="max_price" placeholder="تا" value="<?php echo isset( $_GET['max_price'] ) ? esc_attr( $_GET['max_price'] ) : ''; ?>" min="0" class="w-full px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm text-center outline-none focus:border-forest-500 transition" dir="ltr">
+                            </div>
+                            <button type="submit" class="w-full py-2.5 bg-forest-500 text-white rounded-xl text-sm font-bold hover:bg-forest-600 transition">اعمال فیلتر</button>
+                        </form>
+                    </div>
+
+                    <!-- بنر کناری -->
+                    <div class="rounded-2xl overflow-hidden relative h-48 bg-forest-600">
+                        <img src="https://picsum.photos/seed/organic-nature-banner/400/300.jpg" class="w-full h-full object-cover opacity-40" alt="banner">
+                        <div class="absolute inset-0 flex flex-col items-center justify-center text-white p-4 text-center">
+                            <iconify-icon icon="lucide:leaf" width="28" class="mb-2 text-honey-300"></iconify-icon>
+                            <span class="font-bold text-sm">تضمین اصالت</span>
+                            <span class="text-xs text-white/80 mt-1">۱۰۰٪ ارگانیک</span>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+
+            <!-- ===== محتوای اصلی (محصولات) ===== -->
+            <div class="flex-1 min-w-0">
+                
+                <!-- نوار ابزار بالا (مرتب‌سازی و دکمه فیلتر موبایل) -->
+                <div class="flex items-center justify-between bg-white dark:bg-dark-card rounded-2xl p-4 mb-6 border border-cream-200/50 dark:border-dark-border/50">
+                    <!-- دکمه فیلتر موبایل -->
+                    <button onclick="document.getElementById('filter-drawer').classList.remove('hidden'); document.body.style.overflow='hidden';" class="lg:hidden flex items-center gap-2 px-4 py-2 bg-cream-50 dark:bg-dark-bg rounded-xl text-sm font-medium">
+                        <iconify-icon icon="lucide:sliders-horizontal" width="18"></iconify-icon>
+                        فیلترها
+                    </button>
+
+                    <!-- تعداد نتایج -->
+                    <div class="text-sm text-cream-500 dark:text-dark-muted hidden md:block">
+                        <?php woocommerce_result_count(); ?>
+                    </div>
+
+                    <!-- مرتب‌سازی -->
+                    <form class="flex items-center gap-2" method="get">
+                        <?php foreach ( $_GET as $key => $value ) {
+                            if ( $key !== 'orderby' ) {
+                                echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $value ) . '" />';
+                            }
+                        }?>
+                        <select name="orderby" id="orderby" class="appearance-none bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl px-4 py-2 text-sm outline-none focus:border-forest-500 transition cursor-pointer pr-8" onchange="this.form.submit()">
+                            <?php
+                            $orderby = isset( $_GET['orderby'] ) ? esc_attr( $_GET['orderby'] ) : wc_get_default_products_orderby();
+                            $catalog_orderby = apply_filters( 'woocommerce_catalog_orderby', array(
+                                'popularity' => 'پرفروش‌ترین‌ها',
+                                'rating'     => 'محبوب‌ترین‌ها',
+                                'date'       => 'جدیدترین‌ها',
+                                'price'      => 'ارزان‌ترین',
+                                'price-desc' => 'گران‌ترین',
+                            ) );
+                            foreach ( $catalog_orderby as $id => $name ) :
+                                echo '<option value="' . esc_attr( $id ) . '"' . selected( $orderby, $id, false ) . '>' . esc_html( $name ) . '</option>';
+                            endforeach;
+                            ?>
+                        </select>
+                    </form>
+                </div>
+
+                <!-- حلقه محصولات ووکامرس -->
+                <?php if ( woocommerce_product_loop() ) : ?>
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
+                        <?php
+                        // ردیف‌بندی با کلاس‌های خودمون (تعداد ستون‌ها رو تسک می‌گیریم)
+                        $columns = 4; // در دسکتاپ 4 تاست ولی چون سایدبار داریم 3 تا میشه
+                        woocommerce_product_loop_start();
+                        if ( wc_get_loop_prop( 'total' ) ) {
+                            while ( have_posts() ) {
+                                the_post();
+                                do_action( 'woocommerce_shop_loop' );
+                                wc_get_template_part( 'content', 'product' );
+                            }
+                        }
+                        woocommerce_product_loop_end();
+                        ?>
+                    </div>
+
+                    <!-- صفحه‌بندی (Pagination) -->
+                    <div class="mt-10 flex justify-center">
+                        <?php woocommerce_pagination(); ?>
+                    </div>
+
+                <?php else : ?>
+                    <!-- اگر محصولی پیدا نشد -->
+                    <div class="text-center py-20">
+                        <iconify-icon icon="lucide:search-x" width="64" class="text-cream-300 dark:text-dark-muted mb-4"></iconify-icon>
+                        <h3 class="text-xl font-bold mb-2">محصولی یافت نشد</h3>
+                        <p class="text-cream-500 dark:text-dark-muted mb-6">متأسفانه محصولی با این مشخصات پیدا نشد.</p>
+                        <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="inline-flex items-center gap-2 px-6 py-2.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition">
+                            <iconify-icon icon="lucide:grid-3x3" width="18"></iconify-icon>
+                            مشاهده همه محصولات
+                        </a>
+                    </div>
+                <?php endif; ?>
+
+            </div>
+        </div>
+    </div>
+</main>
+
+<!-- ===== دراور فیلتر موبایل ===== -->
+<div id="filter-drawer" class="fixed inset-0 z-[80] hidden">
+    <div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden'); document.body.style.overflow='';"></div>
+    <div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-cream-100 dark:bg-dark-bg shadow-2xl overflow-y-auto p-6">
+        <div class="flex items-center justify-between mb-6">
+            <h3 class="font-bold text-lg">فیلترها</h3>
+            <button onclick="this.closest('#filter-drawer').classList.add('hidden'); document.body.style.overflow='';" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-200 dark:hover:bg-dark-card">
+                <iconify-icon icon="lucide:x" width="20"></iconify-icon>
+            </button>
+        </div>
+        <!-- همون فیلترهای سایدبار اینجا هم تکرار میشن براحتی میتونی کپی کنی -->
+        <p class="text-sm text-cream-500 dark:text-dark-muted text-center py-10">فیلترهای دلخواه خود را انتخاب کنید</p>
+    </div>
+</div>
+
+<?php get_footer(); ?>
\ No newline at end of file
diff --git a/archive.php b/archive.php
new file mode 100644
index 0000000..7008e5f
--- /dev/null
+++ b/archive.php
@@ -0,0 +1,108 @@
+<?php
+/**
+ * لیست مقالات و دسته‌بندی‌های بلاگ
+ */
+get_header();
+?>
+
+<main class="pt-16 md:pt-[104px]">
+    <!-- هدر بخش -->
+    <div class="bg-forest-500 dark:bg-forest-800 text-white py-10 md:py-16">
+        <div class="max-w-7xl mx-auto px-4 md:px-6 text-center">
+            <h1 class="text-3xl md:text-4xl font-extrabold mb-2">
+                <?php if ( is_category() ) { single_cat_title(); } 
+                elseif ( is_tag() ) { single_tag_title(); }
+                elseif ( is_search() ) { printf( __( 'نتایج جستجو برای: %s', 'motayeb' ), '<span>' . get_search_query() . '</span>' ); }
+                else { _e( 'مجله سلامت مطیب', 'motayeb' ); } ?>
+            </h1>
+            <p class="text-white/70 text-sm flex items-center justify-center gap-2 mt-3">
+                <a href="<?php echo home_url(); ?>" class="hover:text-white transition">خانه</a>
+                <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
+                <span>مجله</span>
+            </p>
+        </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-16">
+        <?php if ( have_posts() ) : ?>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <?php while ( have_posts() ) : the_post(); ?>
+                    <article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
+                        
+                        <!-- عکس مقاله -->
+                        <a href="<?php the_permalink(); ?>" class="block overflow-hidden h-56">
+                            <?php if ( has_post_thumbnail() ) : ?>
+                                <?php the_post_thumbnail( 'medium_large', array( 'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500' ) ); ?>
+                            <?php else : ?>
+                                <div class="w-full h-full bg-cream-100 dark:bg-dark-bg flex items-center justify-center">
+                                    <iconify-icon icon="lucide:file-text" width="48" class="text-cream-300 dark:text-dark-muted"></iconify-icon>
+                                </div>
+                            <?php endif; ?>
+                        </a>
+
+                        <!-- محتوای مقاله -->
+                        <div class="p-6">
+                            <!-- دسته بندی -->
+                            <div class="mb-3">
+                                <?php 
+                                $categories = get_the_category();
+                                if ( ! empty( $categories ) ) {
+                                    echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '" class="inline-flex items-center gap-1.5 px-3 py-1 bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 rounded-full text-xs font-semibold hover:bg-forest-100 dark:hover:bg-forest-900/50 transition">';
+                                    echo esc_html( $categories[0]->name );
+                                    echo '</a>';
+                                }
+                                ?>
+                            </div>
+                            
+                            <!-- عنوان -->
+                            <a href="<?php the_permalink(); ?>" class="block font-bold text-lg mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2 leading-relaxed">
+                                <?php the_title(); ?>
+                            </a>
+                            
+                            <!-- چکیده -->
+                            <p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed line-clamp-2 mb-5">
+                                <?php echo get_the_excerpt(); ?>
+                            </p>
+
+                            <!-- پایین مقاله -->
+                            <div class="flex items-center justify-between pt-5 border-t border-cream-100 dark:border-dark-border">
+                                <div class="flex items-center gap-2 text-xs text-cream-400 dark:text-dark-muted">
+                                    <iconify-icon icon="lucide:calendar" width="14"></iconify-icon>
+                                    <span><?php echo get_the_date('Y/m/d'); ?></span>
+                                </div>
+                                <a href="<?php the_permalink(); ?>" class="flex items-center gap-1 text-xs font-bold text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
+                                    <span>ادامه مطلب</span>
+                                    <iconify-icon icon="lucide:arrow-left" width="14"></iconify-icon>
+                                </a>
+                            </div>
+                        </div>
+                    </article>
+                <?php endwhile; ?>
+            </div>
+
+            <!-- صفحه بندی -->
+            <div class="mt-12 flex justify-center">
+                <?php
+                the_posts_pagination( array(
+                    'mid_size'  => 2,
+                    'prev_text' => '<iconify-icon icon="lucide:arrow-right" width="18"></iconify-icon>',
+                    'next_text' => '<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>',
+                ) );
+                ?>
+            </div>
+
+        <?php else : ?>
+            <!-- حالت جستجوی ناموفق -->
+            <div class="text-center py-20">
+                <iconify-icon icon="lucide:search-x" width="64" class="text-cream-300 dark:text-dark-muted mb-4"></iconify-icon>
+                <h2 class="text-2xl font-extrabold mb-3">مقاله‌ای یافت نشد</h2>
+                <p class="text-cream-500 dark:text-dark-muted mb-6">متأسفانه موردی با این مشخصات پیدا نشد.</p>
+                <a href="<?php echo home_url(); ?>" class="inline-flex items-center gap-2 px-6 py-2.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition">
+                    <span>بازگشت به خانه</span>
+                </a>
+            </div>
+        <?php endif; ?>
+    </div>
+</main>
+
+<?php get_footer(); ?>
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..6a743c6
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,1224 @@
+/* =========================================
+   Motayeb Theme - Clean & Final Styles
+   ========================================= */
+
+/* فونت پیش‌فرض */
+* { font-family: 'Vazirmatn', sans-serif; }
+.font-inter { font-family: 'Inter', sans-serif; }
+
+/* اسکرولبار سفارشی */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #F5F0E8; }
+::-webkit-scrollbar-thumb { background: #D4A574; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #C08B52; }
+.dark ::-webkit-scrollbar-track { background: #1A1D23; }
+.dark ::-webkit-scrollbar-thumb { background: #2D5F3F; border-radius: 3px; }
+.dark ::-webkit-scrollbar-thumb:hover { background: #6fb88a; }
+
+/* پترن لانه زنبوری */
+.honeycomb-bg {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
+}
+
+/* ابزارهای عمومی */
+.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.search-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
+.cart-badge { animation: pulseSoft 2s ease-in-out infinite; }
+input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #2D5F3F; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
+.dark input[type="range"]::-webkit-slider-thumb { background: #6fb88a; border-color: #22262E; }
+
+/* انیمیشن‌ها */
+@keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
+.animate-float { animation: float 3s ease-in-out infinite; }
+
+@media (max-width: 767px) { .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); } }
+
+
+/* =========================================
+   منوهای وردپرس
+   ========================================= */
+header nav ul, header .flex.items-center.gap-8 ul {
+    list-style: none !important; padding: 0 !important; margin: 0 !important;
+    display: flex !important; align-items: center !important; gap: 2rem !important;
+}
+header nav ul li a, header .flex.items-center.gap-8 ul li a {
+    font-size: 0.875rem !important; font-weight: 500 !important; color: #8B5A3C !important;
+    transition: color 0.2s ease !important; position: relative !important;
+    display: inline-block !important; padding: 0 !important; margin: 0 !important;
+    background: none !important; border: none !important; line-height: 1.5 !important;
+}
+header nav ul li a::after, header .flex.items-center.gap-8 ul li a::after {
+    content: '' !important; display: block !important; width: 0 !important; height: 2px !important;
+    background: #2D5F3F !important; transition: width 0.3s ease !important;
+    position: absolute !important; bottom: -4px !important; right: 0 !important;
+}
+header nav ul li a:hover, header .flex.items-center.gap-8 ul li a:hover { color: #2D5F3F !important; }
+header nav ul li a:hover::after, header .flex.items-center.gap-8 ul li a:hover::after { width: 100% !important; }
+.dark header nav ul li a, .dark header .flex.items-center.gap-8 ul li a { color: #E8E6E3 !important; }
+.dark header nav ul li a:hover, .dark header .flex.items-center.gap-8 ul li a:hover { color: #6fb88a !important; }
+.dark header nav ul li a::after, .dark header .flex.items-center.gap-8 ul li a::after { background: #6fb88a !important; }
+
+/* منوی موبایل */
+#mobile-menu nav ul { flex-direction: column !important; gap: 0 !important; }
+#mobile-menu nav ul li { width: 100%; }
+#mobile-menu nav ul li a {
+    display: flex !important; align-items: center !important; gap: 0.75rem !important;
+    padding: 0.75rem 1rem !important; border-radius: 0.75rem !important; font-size: 0.9rem !important;
+    color: #8B5A3C !important; width: 100% !important;
+}
+#mobile-menu nav ul li a::after { display: none !important; }
+#mobile-menu nav ul li a:hover { background-color: rgba(45, 95, 63, 0.06) !important; color: #2D5F3F !important; }
+.dark #mobile-menu nav ul li a { color: #E8E6E3 !important; }
+.dark #mobile-menu nav ul li a:hover { background-color: rgba(45, 95, 63, 0.15) !important; color: #6fb88a !important; }
+header nav ul ul, header .flex.items-center.gap-8 ul ul { display: none !important; }
+
+
+/* =========================================
+   محافظت‌های ریسپانسیو
+   ========================================= */
+img { max-width: 100% !important; height: auto !important; }
+p, span, a, h1, h2, h3, h4, h5, h6, li { word-wrap: break-word !important; overflow-wrap: break-word !important; }
+
+@media (max-width: 767px) {
+    .text-4xl { font-size: 2rem !important; }
+    .text-3xl { font-size: 1.5rem !important; }
+    .text-2xl { font-size: 1.25rem !important; }
+    .py-16, .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
+    .py-28 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
+    .gap-12 { gap: 2rem !important; }
+    .gap-8 { gap: 1.5rem !important; }
+    .product-card .quick-actions { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; position: static !important; margin-top: 0.5rem; }
+    .product-card:hover .product-img { transform: none !important; }
+    .animate-float { display: none !important; }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+    .text-6xl { font-size: 2.75rem !important; }
+    .text-7xl { font-size: 3.5rem !important; }
+}
+
+
+/* =========================================
+   فروشگاه و آرشیو (archive-product)
+   ========================================= */
+/* کارت محصولات */
+.product-card { position: relative; overflow: hidden; }
+.product-card .quick-actions { opacity: 0; transform: translateY(10px); pointer-events: none; transition: all 0.3s ease; z-index: 10; }
+.product-card:hover .quick-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
+.product-card:hover .product-img { transform: scale(1.08); }
+.product-img { transition: transform 0.5s ease; }
+
+.product-card .button {
+    flex: 1; padding: 0.625rem 1rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px);
+    border-radius: 0.75rem; font-size: 0.75rem; font-weight: 700; color: #8B5A3C;
+    display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.2s; border: none; cursor: pointer;
+}
+.product-card .button:hover { background: #2D5F3F; color: #fff; }
+.dark .product-card .button { background: rgba(34, 38, 46, 0.9); color: #E8E6E3; }
+.dark .product-card .button:hover { background: #6fb88a; color: #1A1D23; }
+
+/* تگ تخفیف */
+.woocommerce span.onsale { position: absolute; top: 0.75rem; right: 0.75rem; background: #dc2626; color: #fff; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 700; min-height: auto; min-width: auto; line-height: 1.5; margin: 0; z-index: 5; }
+.woocommerce-ordering { display: none; }
+.product-card .price del { opacity: 0.5; }
+
+/* گرید و صفحه بندی */
+ul.products { display: contents !important; }
+ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }
+
+.woocommerce-pagination ul.page-numbers { display: flex; align-items: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
+.woocommerce-pagination ul.page-numbers li a,
+.woocommerce-pagination ul.page-numbers li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; border: 1px solid #EBE3D5; color: #8B5A3C; transition: all 0.2s; text-decoration: none; }
+.woocommerce-pagination ul.page-numbers li a:hover { background: #F5F0E8; border-color: #2D5F3F; color: #2D5F3F; }
+.woocommerce-pagination ul.page-numbers li span.current { background: #2D5F3F; border-color: #2D5F3F; color: #fff; }
+.dark .woocommerce-pagination ul.page-numbers li a,
+.dark .woocommerce-pagination ul.page-numbers li span { border-color: #2E333D; color: #E8E6E3; }
+.dark .woocommerce-pagination ul.page-numbers li a:hover { background: #22262E; border-color: #6fb88a; color: #6fb88a; }
+.dark .woocommerce-pagination ul.page-numbers li span.current { background: #6fb88a; border-color: #6fb88a; color: #1A1D23; }
+
+
+/* =========================================
+   محصول تکی (single-product)
+   ========================================= */
+/* مخفی کردن اجزای اضافه گالری وردپرس */
+.woocommerce-product-gallery .woocommerce-product-gallery__trigger,
+.woocommerce-product-gallery__wrapper .flex-viewport,
+.woocommerce-product-gallery .flex-control-thumbs,
+.woocommerce-product-gallery .flex-direction-nav { display: none !important; }
+
+/* تامبنیل‌ها */
+.gallery-thumb { transition: border-color 0.2s ease; }
+.gallery-thumb.active { border-color: #2D5F3F !important; }
+.dark .gallery-thumb.active { border-color: #6fb88a !important; }
+
+/* تب‌های توضیحات */
+.woocommerce-tabs { max-width: 100%; }
+.woocommerce-tabs ul.tabs { list-style: none !important; padding: 0 !important; margin: 0 0 2rem 0 !important; display: flex !important; gap: 2rem; border-bottom: 1px solid #EBE3D5 !important; overflow-x: auto; }
+.dark .woocommerce-tabs ul.tabs { border-bottom-color: #2E333D !important; }
+.woocommerce-tabs ul.tabs li { background: none !important; border: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
+.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; border: none !important; }
+.woocommerce-tabs ul.tabs li a { display: block !important; padding: 1rem 0 !important; font-size: 0.875rem !important; font-weight: 700 !important; color: #A99478 !important; border-bottom: 2px solid transparent !important; transition: all 0.2s !important; outline: none !important; text-decoration: none !important; box-shadow: none !important; border-radius: 0 !important; }
+.woocommerce-tabs ul.tabs li.active a { color: #2D5F3F !important; border-bottom-color: #2D5F3F !important; }
+.woocommerce-tabs ul.tabs li a:hover { color: #2D5F3F !important; }
+.dark .woocommerce-tabs ul.tabs li a { color: #9CA3AF !important; }
+.dark .woocommerce-tabs ul.tabs li.active a { color: #6fb88a !important; border-bottom-color: #6fb88a !important; }
+.dark .woocommerce-tabs ul.tabs li a:hover { color: #6fb88a !important; }
+.woocommerce-tabs .panel { margin-top: 0 !important; padding: 0 !important; }
+.woocommerce-tabs .panel h2 { display: none !important; }
+.woocommerce-tabs .panel p { color: #8B5A3C; line-height: 1.8; font-size: 0.9rem; }
+.dark .woocommerce-tabs .panel p { color: #9CA3AF; }
+
+/* محصولات مرتبط */
+.related.products { margin-top: 2rem; }
+.related.products > h2 { font-size: 1.5rem !important; font-weight: 800 !important; margin-bottom: 0 !important; padding: 0 !important; color: #8B5A3C !important; }
+.dark .related.products > h2 { color: #E8E6E3 !important; }
+.related.products ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
+@media (min-width: 1024px) { .related.products ul.products { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
+.related.products ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }
+
+
+/* =========================================
+   نظرات و ستاره‌ها (سیستم سفارشی جدید)
+   ========================================= */
+/* مخفی کردن کامل ستاره‌های قدیمی و فیلدهای تکراری وردپرس */
+.woocommerce .star-rating,
+#review_form .comment-form p.stars,
+#review_form .comment-form p.comment-form-comment,
+#review_form .comment-form p.comment-form-author,
+#review_form .comment-form p.comment-form-email,
+.woocommerce-Reviews #respond .comment-form p.stars {
+    display: none !important;
+}
+
+/* افکت هاور برای ستاره‌های متنی جدید فرم */
+#custom-star-rating .star { transition: color 0.15s ease; cursor: pointer; }
+#custom-star-rating .star.active { color: #D4A574 !important; }
+
+/* =========================================
+   سبد خرید (Cart)
+   ========================================= */
+
+/* مخفی کردن جدول زشت پیش‌فرض ووکامرس */
+.shop_table, .shop_table.responsive {
+    display: none !important;
+}
+
+/* استایل اینپوت تعداد داخل سبد */
+.woocommerce cart-form .quantity,
+.woocommerce .quantity {
+    border: none !important;
+    background: none !important;
+    width: auto !important;
+    height: auto !important;
+}
+.woocommerce .quantity .qty {
+    width: 3.5rem !important;
+    height: 2.5rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.5rem !important;
+    text-align: center !important;
+    font-size: 0.875rem !important;
+    font-weight: 700 !important;
+    color: #2D5F3F !important;
+    background: #FDFBF7 !important;
+}
+.dark .woocommerce .quantity .qty {
+    border-color: #2E333D !important;
+    background: #22262E !important;
+    color: #6fb88a !important;
+}
+
+/* متغیرهای محصول (مثل سایز و رنگ) */
+.wc-item-meta {
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: #A99478 !important;
+}
+.wc-item-meta p {
+    margin: 0 !important;
+    font-size: 0.75rem !important;
+    color: #A99478 !important;
+}
+.dark .wc-item-meta, .dark .wc-item-meta p {
+    color: #9CA3AF !important;
+}
+
+/* استایل بخش خلاصه سفارش و کپن */
+.cart_totals {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    width: 100% !important;
+    float: none !important;
+}
+.cart_totals h2 {
+    display: none !important;
+}
+.cart_totals table {
+    border: none !important;
+    margin: 0 0 1rem 0 !important;
+    border-collapse: collapse !important;
+    width: 100%;
+}
+.cart_totals table th,
+.cart_totals table td {
+    border: none !important;
+    padding: 0.5rem 0 !important;
+    font-size: 0.875rem !important;
+    vertical-align: middle;
+}
+.cart_totals table th {
+    font-weight: 400 !important;
+    color: #A99478 !important;
+    text-align: left !important; /* راست‌چین بودن خودکار با dir=rtl انجام میشه */
+    padding-left: 1rem !important;
+    width: 50%;
+}
+.dark .cart_totals table th {
+    color: #9CA3AF !important;
+}
+.cart_totals table td {
+    font-weight: 700 !important;
+    color: #2D5F3F !important;
+    text-align: right !important;
+}
+.dark .cart_totals table td {
+    color: #6fb88a !important;
+}
+/* خط جداکننده زیر جمع کل */
+.cart_totals table tr.order-total td,
+.cart_totals table tr.order-total th {
+    border-top: 1px solid #EBE3D5 !important;
+    padding-top: 1rem !important;
+    margin-top: 0.5rem;
+    font-size: 1.1rem !important;
+}
+.dark .cart_totals table tr.order-total td,
+.dark .cart_totals table tr.order-total th {
+    border-top-color: #2E333D !important;
+}
+
+/* استایل فرم کد تخفیف */
+.woocommerce-cart .coupon {
+    margin-bottom: 1.5rem !important;
+    padding: 0 !important;
+    border: none !important;
+    background: none !important;
+}
+.woocommerce-cart .coupon .input-text {
+    width: 100% !important;
+    padding: 0.75rem 1rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    background: #F5F0E8 !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+    outline: none;
+}
+.woocommerce-cart .coupon .input-text:focus {
+    border-color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .coupon .input-text {
+    background: #1A1D23 !important;
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+.woocommerce-cart .coupon button[name="apply_coupon"] {
+    width: 100%;
+    margin-top: 0.75rem;
+    padding: 0.75rem !important;
+    background: #F5F0E8 !important;
+    color: #8B5A3C !important;
+    border: none !important;
+    border-radius: 0.75rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
+    background: #EBE3D5 !important;
+    color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .coupon button[name="apply_coupon"] {
+    background: #22262E !important;
+    color: #E8E6E3 !important;
+}
+.dark .woocommerce-cart .coupon button[name="apply_coupon"]:hover {
+    background: #2E333D !important;
+}
+
+/* پیام‌های ووکامرس (مثل کد تخفیف اشتباه) */
+.woocommerce-message, .woocommerce-error, .woocommerce-info {
+    border: 1px solid #2D5F3F !important;
+    background: #e8f5ec !important;
+    color: #2D5F3F !important;
+    border-radius: 1rem !important;
+    padding: 1rem 1.25rem !important;
+    font-size: 0.875rem !important;
+    margin-bottom: 1.5rem !important;
+}
+.woocommerce-error {
+    border-color: #dc2626 !important;
+    background: #fef2f2 !important;
+    color: #dc2626 !important;
+}
+.dark .woocommerce-message { background: #13291c !important; border-color: #2D5F3F !important; color: #6fb88a !important; }
+.dark .woocommerce-error { background: #1a1215 !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { color: inherit !important; top: 1.1rem !important; }
+
+/* =========================================
+   سبد خرید (روش بدون باگ - فقط CSS)
+   ========================================= */
+
+/* مخفی کردن عناوین اضافه */
+.woocommerce-cart .shop_table th {
+    display: none !important;
+}
+.woocommerce-cart .shop_table .product-name a {
+    font-weight: 700 !important;
+    color: #8B5A3C !important;
+    font-size: 0.95rem !important;
+}
+.dark .woocommerce-cart .shop_table .product-name a {
+    color: #E8E6E3 !important;
+}
+.woocommerce-cart .shop_table .product-name a:hover {
+    color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .shop_table .product-name a:hover {
+    color: #6fb88a !important;
+}
+
+/* استایل کلی جدول */
+.woocommerce-cart .shop_table {
+    border: none !important;
+    border-collapse: separate !important;
+    border-spacing: 0 0 0.75rem 0 !important;
+    background: transparent !important;
+}
+.woocommerce-cart .shop_table tbody {
+    border: none !important;
+}
+
+/* استایل هر ردیف محصول (تبدیل به کارت) */
+.woocommerce-cart .shop_table tr {
+    background: #fff !important;
+    border-radius: 1rem !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
+    border: 1px solid rgba(235, 227, 213, 0.5) !important;
+    transition: all 0.2s ease;
+}
+.woocommerce-cart .shop_table tr:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
+}
+.dark .woocommerce-cart .shop_table tr {
+    background: #22262E !important;
+    border-color: rgba(46, 51, 61, 0.5) !important;
+}
+
+/* سلول‌ها */
+.woocommerce-cart .shop_table td {
+    border: none !important;
+    padding: 1rem !important;
+    vertical-align: middle !important;
+}
+
+/* عکس محصول */
+.woocommerce-cart .shop_table .product-thumbnail {
+    width: 80px !important;
+}
+.woocommerce-cart .shop_table .product-thumbnail img {
+    width: 80px !important;
+    height: 80px !important;
+    object-fit: cover !important;
+    border-radius: 0.75rem !important;
+}
+
+/* حذف متن "یکا" و متغیرها */
+.woocommerce-cart .shop_table .product-name .variation,
+.woocommerce-cart .shop_table .product-name .wc-item-meta {
+    font-size: 0.75rem !important;
+    color: #A99478 !important;
+    margin-top: 0.25rem !important;
+}
+.dark .woocommerce-cart .shop_table .product-name .variation,
+.dark .woocommerce-cart .shop_table .product-name .wc-item-meta {
+    color: #9CA3AF !important;
+}
+
+/* اینپوت تعداد */
+.woocommerce-cart .quantity .qty {
+    width: 3.5rem !important;
+    height: 2.5rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.5rem !important;
+    text-align: center !important;
+    font-size: 0.875rem !important;
+    font-weight: 700 !important;
+    color: #2D5F3F !important;
+    background: #FDFBF7 !important;
+}
+.dark .woocommerce-cart .quantity .qty {
+    border-color: #2E333D !important;
+    background: #1A1D23 !important;
+    color: #6fb88a !important;
+}
+
+/* قیمت محصول */
+.woocommerce-cart .shop_table .product-subtotal {
+    font-weight: 800 !important;
+    color: #2D5F3F !important;
+    font-size: 0.95rem !important;
+}
+.dark .woocommerce-cart .shop_table .product-subtotal {
+    color: #6fb88a !important;
+}
+
+/* دکمه حذف */
+.woocommerce-cart .shop_table .product-remove a {
+    width: 2rem !important;
+    height: 2rem !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem !important;
+    color: #A99478 !important;
+    background: transparent !important;
+    border: none !important;
+    font-size: 0 !important;
+    text-indent: -9999px;
+    transition: all 0.2s;
+}
+.woocommerce-cart .shop_table .product-remove a::before {
+    content: '✕' !important;
+    font-size: 0.875rem !important;
+    text-indent: 0 !important;
+    color: #A99478 !important;
+}
+.woocommerce-cart .shop_table .product-remove a:hover {
+    background: #fef2f2 !important;
+    color: #dc2626 !important;
+}
+.woocommerce-cart .shop_table .product-remove a:hover::before {
+    color: #dc2626 !important;
+}
+
+/* دکمه به‌روزرسانی */
+.woocommerce-cart .actions input[name="update_cart"] {
+    background: #F5F0E8 !important;
+    color: #8B5A3C !important;
+    border: 2px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    padding: 0.7rem 1.5rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    font-size: 0.875rem !important;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.woocommerce-cart .actions input[name="update_cart"]:hover {
+    border-color: #2D5F3F !important;
+    color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .actions input[name="update_cart"] {
+    background: #22262E !important;
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+
+/* استایل کپن و خلاصه سفارش */
+.woocommerce-cart .cart_totals {
+    background: #fff !important;
+    border: 1px solid rgba(235, 227, 213, 0.5) !important;
+    border-radius: 1rem !important;
+    padding: 1.5rem !important;
+    width: 100% !important;
+    float: none !important;
+}
+.dark .woocommerce-cart .cart_totals {
+    background: #22262E !important;
+    border-color: rgba(46, 51, 61, 0.5) !important;
+}
+.woocommerce-cart .cart_totals h2 {
+    font-size: 1.1rem !important;
+    margin-bottom: 1rem !important;
+    color: #8B5A3C !important;
+}
+.dark .woocommerce-cart .cart_totals h2 {
+    color: #E8E6E3 !important;
+}
+
+/* جداول داخل خلاصه */
+.woocommerce-cart .cart_totals table {
+    border: none !important;
+}
+.woocommerce-cart .cart_totals table th,
+.woocommerce-cart .cart_totals table td {
+    border: none !important;
+    padding: 0.6rem 0 !important;
+    font-size: 0.875rem !important;
+}
+.woocommerce-cart .cart_totals table th {
+    font-weight: 400 !important;
+    color: #A99478 !important;
+    padding-left: 1rem !important;
+    width: 50%;
+}
+.dark .woocommerce-cart .cart_totals table th {
+    color: #9CA3AF !important;
+}
+.woocommerce-cart .cart_totals table td {
+    font-weight: 700 !important;
+    color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .cart_totals table td {
+    color: #6fb88a !important;
+}
+.woocommerce-cart .cart_totals table tr.order-total td,
+.woocommerce-cart .cart_totals table tr.order-total th {
+    border-top: 1px solid #EBE3D5 !important;
+    padding-top: 1rem !important;
+    font-size: 1.1rem !important;
+}
+.dark .woocommerce-cart .cart_totals table tr.order-total td,
+.dark .woocommerce-cart .cart_totals table tr.order-total th {
+    border-top-color: #2E333D !important;
+}
+
+/* فرم کد تخفیف */
+.woocommerce-cart .coupon .input-text {
+    width: 100% !important;
+    padding: 0.75rem 1rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    background: #F5F0E8 !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+    outline: none;
+}
+.woocommerce-cart .coupon .input-text:focus {
+    border-color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .coupon .input-text {
+    background: #1A1D23 !important;
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+.woocommerce-cart .coupon button[name="apply_coupon"] {
+    width: 100%;
+    margin-top: 0.75rem;
+    padding: 0.75rem !important;
+    background: #F5F0E8 !important;
+    color: #8B5A3C !important;
+    border: none !important;
+    border-radius: 0.75rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
+    background: #EBE3D5 !important;
+    color: #2D5F3F !important;
+}
+.dark .woocommerce-cart .coupon button[name="apply_coupon"] {
+    background: #22262E !important;
+    color: #E8E6E3 !important;
+}
+
+/* دکمه پرداخت (تسویه) */
+.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
+    display: block !important;
+    width: 100%;
+    padding: 1rem !important;
+    background: #2D5F3F !important;
+    color: #fff !important;
+    border-radius: 1rem !important;
+    font-size: 1rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    text-align: center !important;
+    box-shadow: 0 10px 15px -3px rgba(45, 95, 63, 0.25) !important;
+    transition: all 0.2s !important;
+}
+.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
+    background: #254d34 !important;
+    transform: translateY(-2px);
+}
+.dark .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
+    background: #6fb88a !important;
+    color: #1A1D23 !important;
+    box-shadow: 0 10px 15px -3px rgba(111, 184, 138, 0.25) !important;
+}
+
+/* ریسپانسیو سبد خرید */
+@media (max-width: 768px) {
+    .woocommerce-cart .shop_table {
+        border-spacing: 0 0 0.5rem 0 !important;
+    }
+    .woocommerce-cart .shop_table .product-thumbnail {
+        width: 60px !important;
+    }
+    .woocommerce-cart .shop_table .product-thumbnail img {
+        width: 60px !important;
+        height: 60px !important;
+    }
+}
+
+/* =========================================
+   تسویه حساب (Checkout) - استایل کامل
+   ========================================= */
+
+/* چیدمان ۲ ستونه فرم‌ها (نام و تلفن کنار هم) */
+.woocommerce-checkout #customer_details {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+@media (max-width: 768px) {
+    .woocommerce-checkout #customer_details {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* تیترهای بخش‌ها (صورتحساب، ارسال، پرداخت) */
+.woocommerce-checkout .woocommerce-billing-fields > h3,
+.woocommerce-checkout .woocommerce-shipping-fields > h3,
+.woocommerce-checkout .woocommerce-additional-fields > h3,
+.woocommerce-checkout #order_review_heading {
+    font-size: 1.15rem !important;
+    font-weight: 800 !important;
+    color: #2D5F3F !important;
+    margin-bottom: 1.25rem !important;
+    padding-bottom: 0.75rem !important;
+    border-bottom: 2px solid #EBE3D5 !important;
+}
+.dark .woocommerce-checkout .woocommerce-billing-fields > h3,
+.dark .woocommerce-checkout .woocommerce-shipping-fields > h3,
+.dark .woocommerce-checkout .woocommerce-additional-fields > h3,
+.dark .woocommerce-checkout #order_review_heading {
+    color: #6fb88a !important;
+    border-bottom-color: #2E333D !important;
+}
+
+/* سطرهای فرم */
+.woocommerce form .form-row {
+    display: grid !important;
+    gap: 1rem !important;
+    margin-bottom: 0.75rem !important;
+}
+.woocommerce form .form-row-first,
+.woocommerce form .form-row-last {
+    width: 100% !important;
+    float: none !important;
+}
+.woocommerce form .form-row-wide {
+    width: 100% !important;
+    float: none !important;
+}
+
+/* فیلدهای ورودی */
+.woocommerce-checkout .input-text,
+.woocommerce-checkout select,
+.woocommerce-checkout textarea {
+    width: 100% !important;
+    padding: 0.875rem 1rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    background: #FDFBF7 !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-sizing: border-box !important;
+    height: auto !important;
+}
+.woocommerce-checkout .input-text:focus,
+.woocommerce-checkout select:focus,
+.woocommerce-checkout textarea:focus {
+    border-color: #2D5F3F !important;
+    box-shadow: 0 0 0 3px rgba(45, 95, 63, 0.1) !important;
+}
+.dark .woocommerce-checkout .input-text,
+.dark .woocommerce-checkout select,
+.dark .woocommerce-checkout textarea {
+    background: #1A1D23 !important;
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+.dark .woocommerce-checkout .input-text:focus,
+.dark .woocommerce-checkout select:focus,
+.dark .woocommerce-checkout textarea:focus {
+    border-color: #6fb88a !important;
+    box-shadow: 0 0 0 3px rgba(111, 184, 138, 0.1) !important;
+}
+
+/* لیبل‌ها (نام، تلفن، آدرس و...) */
+.woocommerce-checkout .form-row label {
+    font-size: 0.8rem !important;
+    font-weight: 600 !important;
+    color: #8B5A3C !important;
+    margin-bottom: 0.35rem !important;
+    display: block !important;
+}
+.dark .woocommerce-checkout .form-row label {
+    color: #9CA3AF !important;
+}
+.woocommerce-checkout .form-row .required {
+    color: #dc2626 !important;
+    text-decoration: none !important;
+}
+
+/* باکس روش‌های پرداخت */
+.woocommerce-checkout #payment {
+    background: #fff !important;
+    border: 1px solid rgba(235, 227, 213, 0.5) !important;
+    border-radius: 1.25rem !important;
+    padding: 1.5rem !important;
+    margin-top: 2rem !important;
+}
+.dark .woocommerce-checkout #payment {
+    background: #22262E !important;
+    border-color: rgba(46, 51, 61, 0.5) !important;
+}
+.woocommerce-checkout #payment ul.payment_methods {
+    list-style: none !important;
+    padding: 0 0 1rem 0 !important;
+    margin: 0 0 1rem 0 !important;
+    border-bottom: 1px solid #EBE3D5 !important;
+}
+.dark .woocommerce-checkout #payment ul.payment_methods {
+    border-bottom-color: #2E333D !important;
+}
+.woocommerce-checkout #payment ul.payment_methods li {
+    padding: 0.75rem 1rem !important;
+    background: #FDFBF7 !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    margin-bottom: 0.5rem !important;
+    transition: all 0.2s;
+}
+.dark .woocommerce-checkout #payment ul.payment_methods li {
+    background: #1A1D23 !important;
+    border-color: #2E333D !important;
+}
+.woocommerce-checkout #payment ul.payment_methods li:hover {
+    border-color: #2D5F3F !important;
+}
+.dark .woocommerce-checkout #payment ul.payment_methods li:hover {
+    border-color: #6fb88a !important;
+}
+
+/* دکمه ثبت سفارش (سبز بزرگ) */
+.woocommerce-checkout #place_order {
+    display: block !important;
+    width: 100% !important;
+    padding: 1rem !important;
+    background: #2D5F3F !important;
+    color: #fff !important;
+    border-radius: 1rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    font-size: 1.05rem !important;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 10px 15px -3px rgba(45, 95, 63, 0.3) !important;
+    border: none !important;
+    margin-top: 1.5rem !important;
+}
+.woocommerce-checkout #place_order:hover {
+    background: #254d34 !important;
+    transform: translateY(-2px);
+    box-shadow: 0 15px 20px -5px rgba(45, 95, 63, 0.4) !important;
+}
+.dark .woocommerce-checkout #place_order {
+    background: #6fb88a !important;
+    color: #1A1D23 !important;
+    box-shadow: 0 10px 15px -3px rgba(111, 184, 138, 0.3) !important;
+}
+.dark .woocommerce-checkout #place_order:hover {
+    background: #4a9a6b !important;
+}
+
+/* خلاصه سفارش سایدبار */
+.woocommerce-checkout-review-order {
+    background: #fff !important;
+    border: 1px solid rgba(235, 227, 213, 0.5) !important;
+    border-radius: 1.25rem !important;
+    padding: 1.5rem !important;
+}
+.dark .woocommerce-checkout-review-order {
+    background: #22262E !important;
+    border-color: rgba(46, 51, 61, 0.5) !important;
+}
+.woocommerce-checkout-review-order-table {
+    border: none !important;
+}
+.woocommerce-checkout-review-order-table th {
+    border-bottom: 1px solid #EBE3D5 !important;
+    padding: 0.75rem 0 !important;
+    font-weight: 400 !important;
+    color: #A99478 !important;
+    font-size: 0.875rem !important;
+}
+.dark .woocommerce-checkout-review-order-table th {
+    border-bottom-color: #2E333D !important;
+    color: #9CA3AF !important;
+}
+.woocommerce-checkout-review-order-table td {
+    border-bottom: 1px solid #F5F0E8 !important;
+    padding: 0.75rem 0 !important;
+    font-size: 0.875rem !important;
+}
+.dark .woocommerce-checkout-review-order-table td {
+    border-bottom-color: #2E333D !important;
+}
+.woocommerce-checkout-review-order-table .product-name {
+    color: #8B5A3C !important;
+    font-weight: 600 !important;
+}
+.dark .woocommerce-checkout-review-order-table .product-name {
+    color: #E8E6E3 !important;
+}
+.woocommerce-checkout-review-order-table .product-quantity {
+    color: #A99478 !important;
+}
+.woocommerce-checkout-review-order-table .product-total {
+    color: #2D5F3F !important;
+    font-weight: 700 !important;
+}
+.dark .woocommerce-checkout-review-order-table .product-total {
+    color: #6fb88a !important;
+}
+/* جمع کل */
+.woocommerce-checkout .order-total th,
+.woocommerce-checkout .order-total td {
+    border-top: 2px solid #2D5F3F !important;
+    font-size: 1.1rem !important;
+    font-weight: 800 !important;
+    color: #2D5F3F !important;
+}
+.dark .woocommerce-checkout .order-total th,
+.dark .woocommerce-checkout .order-total td {
+    border-top-color: #6fb88a !important;
+    color: #6fb88a !important;
+}
+
+/* =========================================
+   بلاگ و مقالات
+   ========================================= */
+
+/* صفحه بندی وردپرس */
+nav.post-navigation,
+.nav-links {
+    display: flex !important;
+    align-items: center;
+    gap: 0.5rem;
+}
+.nav-links .page-numbers {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: 1px solid #EBE3D5 !important;
+    color: #8B5A3C !important;
+    text-decoration: none !important;
+    transition: all 0.2s;
+}
+.nav-links .page-numbers.current {
+    background: #2D5F3F !important;
+    border-color: #2D5F3F !important;
+    color: #fff !important;
+}
+.nav-links .page-numbers:hover {
+    background: #F5F0E8;
+    border-color: #2D5F3F;
+    color: #2D5F3F;
+}
+.dark .nav-links .page-numbers {
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+.dark .nav-links .page-numbers.current {
+    background: #6fb88a !important;
+    border-color: #6fb88a !important;
+    color: #1A1D23 !important;
+}
+.dark .nav-links .page-numbers:hover {
+    background: #22262E;
+    border-color: #6fb88a;
+    color: #6fb88a;
+}
+
+/* فرم کامنت‌ها */
+.comment-respond {
+    margin-top: 3rem;
+}
+.comment-respond .comment-form input[type="text"],
+.comment-respond .comment-form input[type="email"],
+.comment-respond .comment-form input[type="url"],
+.comment-respond .comment-form textarea {
+    width: 100% !important;
+    padding: 0.875rem 1rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    background: #FDFBF7 !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+    outline: none;
+    transition: border-color 0.2s;
+}
+.comment-respond .comment-form input:focus,
+.comment-respond .comment-form textarea:focus {
+    border-color: #2D5F3F !important;
+}
+.dark .comment-respond .comment-form input[type="text"],
+.dark .comment-respond .comment-form input[type="email"],
+.dark .comment-respond .comment-form input[type="url"],
+.dark .comment-respond .comment-form textarea {
+    background: #1A1D23 !important;
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+.comment-respond .form-submit input[type="submit"] {
+    background: #2D5F3F !important;
+    color: #fff !important;
+    border: none !important;
+    border-radius: 1rem !important;
+    padding: 0.875rem 2rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.comment-respond .form-submit input[type="submit"]:hover {
+    background: #254d34 !important;
+}
+.dark .comment-respond .form-submit input[type="submit"] {
+    background: #6fb88a !important;
+    color: #1A1D23 !important;
+}
+
+/* =========================================
+   کامنت‌های بلاگ (استایل برای callback)
+   ========================================= */
+
+/* شماره و عنوان */
+#comments .comments-title {
+    font-size: 1.25rem !important;
+    font-weight: 800 !important;
+    color: #2D5F3F !important;
+    margin-bottom: 2rem !important;
+    padding-bottom: 1rem !important;
+    border-bottom: 2px solid #EBE3D5 !important;
+}
+.dark #comments .comments-title {
+    color: #6fb88a !important;
+    border-bottom-color: #2E333D !important;
+}
+
+/* لیست نظرات */
+#comments ol.comment-list {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+#comments ol.comment-list li {
+    background: #FDFBF7 !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 1rem !important;
+    padding: 1.25rem !important;
+    margin-bottom: 1rem !important;
+    transition: box-shadow 0.2s;
+}
+#comments ol.comment-list li:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+}
+.dark #comments ol.comment-list li {
+    background: #22262E !important;
+    border-color: #2E333D !important;
+}
+#comments ol.comment-list ul.children {
+    list-style: none !important;
+    padding-right: 2rem !important;
+    margin-top: 1rem !important;
+    border-right: 2px solid #EBE3D5 !important;
+}
+.dark #comments ol.comment-list ul.children {
+    border-right-color: #2E333D !important;
+}
+#comments ol.comment-list li ul.children li {
+    margin-top: 1rem !important;
+}
+
+/* متا نویسنده */
+.motayeb-comment-meta {
+    font-size: 0.95rem !important;
+    font-weight: 700 !important;
+    color: #8B5A3F3C !important;
+    margin-bottom: 0.25rem !important;
+}
+.dark .motayeb-comment-meta {
+    color: #E8E6E3 !important;
+}
+
+/* متادیتا */
+.motayeb-comment-date {
+    font-size: 0.75rem !important;
+    color: #A99478 !important;
+    margin-bottom: 1rem !important;
+    padding-bottom: 1rem !important;
+    border-bottom: 1px solid #EBE3D5 !important;
+}
+.dark .motayeb-comment-date {
+    color: #9CA3AF !important;
+    border-bottom-color: #2E333D !important;
+}
+#comments .comment-awaiting-moderation {
+    background: #FEF3C7 !important;
+    color: #92400E !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: 0.5rem !important;
+    font-size: 0.8rem !important;
+    margin-bottom: 1rem !important;
+    display: inline-block;
+}
+.dark #comments .comment-awaiting-moderation {
+    background: #1a1810 !important;
+    color: #fbbf24 !important;
+}
+
+/* متن نظر */
+.motayeb-comment-text p {
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+    line-height: 1.8 !important;
+    margin: 0 !important;
+}
+.dark .motayeb-comment-text p {
+    color: #9CA3AF !important;
+}
+
+/* دکمه پاسخ */
+.motayeb-reply-btn {
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-size: 0.8rem !important;
+    font-weight: 600 !important;
+    color: #2D5F3F !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.35rem !important;
+    padding: 0.4rem 0.8rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.5rem !important;
+    text-decoration: none !important;
+    transition: all 0.2s !important;
+}
+.motayeb-reply-btn:hover {
+    background: #2D5F3F !important;
+    color: #fff !important;
+    border-color: #2D5F3F !important;
+}
+.dark .motayeb-reply-btn {
+    color: #6fb88a !important;
+    border-color: #2E333D !important;
+}
+.dark .motayeb-reply-btn:hover {
+    background: #6fb88a !important;
+    color: #1A1D23 !important;
+    border-color: #6fb88a !important;
+}
+
+/* صفحه بندی نظرات */
+#comments .nav-links {
+    display: flex !important;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 2rem !important;
+    padding-top: 2rem !important;
+    border-top: 1px solid #EBE3D5 !important;
+}
+.dark #comments .nav-links {
+    border-top-color: #2E333D !important;
+}
+
+/* فرم ثبت نظر */
+#respond {
+    margin-top: 3rem !important;
+    padding-top: 2rem !important;
+    border-top: 1px solid #EBE3D5 !important;
+}
+#respond .comment-form input[type="text"],
+#respond .comment-form input[type="email"],
+#respond .comment-form input[type="url"],
+#respond .comment-form textarea {
+    width: 100% !important;
+    padding: 0.875rem 1rem !important;
+    border: 1px solid #EBE3D5 !important;
+    border-radius: 0.75rem !important;
+    background: #FDFBF7 !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+    outline: none;
+    transition: border-color 0.2s !important;
+    box-sizing: border-box !important;
+}
+#respond .comment-form input:focus,
+#respond .comment-form textarea:focus {
+    border-color: #2D5F3F !important;
+}
+.dark #respond .comment-form input[type="text"],
+.dark #respond .comment-form input[type="email"],
+.dark #respond .comment-form input[type="url"],
+.dark #respond .comment-form textarea {
+    background: #1A1D23 !important;
+    border-color: #2E333D !important;
+    color: #E8E6E3 !important;
+}
+#respond .comment-form textarea {
+    resize: vertical !important;
+    min-height: 120px !important;
+}
+#respond .form-submit input[type="submit"] {
+    background: #2D5F5F !important;
+    color: #fff !important;
+    border: none !important;
+    border-radius: 1rem !important;
+    padding: 0.875rem 2rem !important;
+    font-family: 'Vazirmatn', sans-serif !important;
+    font-weight: 700 !important;
+    font-size: 0.95rem !important;
+    cursor: pointer;
+    transition: background 0.2s !important;
+    display: block !important;
+    width: 100% !important;
+}
+#respond .form-submit input[type="submit"]:hover {
+    background: #254d34 !important;
+}
+.dark #respond .form-submit input[type="submit"] {
+    background: #6fb88a !important;
+    color: #1A1D23 !important;
+}
+#respond .logged-in-as {
+    margin-bottom: 1.5rem !important;
+    padding: 1rem !important;
+    background: #F5F0E8 !important;
+    border-radius: 0.75rem !important;
+    font-size: 0.875rem !important;
+    color: #8B5A3C !important;
+}
+.dark #respond .logged-in-as {
+    background: #22262E !important;
+    color: #9CA3AF !important;
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..c7365b8
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,319 @@
+/**
+ * Motayeb Theme - Main JavaScript
+ * مدیریت تعاملات، حالت تاریک، اسکرول و انیمیشن‌ها
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+    
+    const html = document.documentElement;
+    const body = document.body;
+    const header = document.getElementById('header');
+
+    // ==========================================
+    // ۱. مدیریت حالت تاریک (Dark Mode)
+    // ==========================================
+    function initDarkMode() {
+        // بررسی تنظیمات ذخیره شده یا تنظیمات سیستم عامل
+        const savedTheme = localStorage.getItem('motayeb-theme');
+        if (savedTheme === 'dark') {
+            html.classList.add('dark');
+        }
+
+        // اتصال رویداد به دکمه تغییر تم
+        const darkBtn = header ? header.querySelector('button[aria-label="حالت تاریک"]') : null;
+        if (darkBtn) {
+            darkBtn.addEventListener('click', function () {
+                html.classList.toggle('dark');
+                const isDark = html.classList.contains('dark');
+                localStorage.setItem('motayeb-theme', isDark ? 'dark' : 'light');
+            });
+        }
+    }
+
+    // ==========================================
+    // ۲. سایه هدر هنگام اسکرول
+    // ==========================================
+    function initHeaderScroll() {
+        if (!header) return;
+        window.addEventListener('scroll', function () {
+            if (window.scrollY > 50) {
+                header.classList.add('shadow-lg');
+            } else {
+                header.classList.remove('shadow-lg');
+            }
+        }, { passive: true });
+    }
+
+    // ==========================================
+    // ۳. مدیریت پنل جستجو
+    // ==========================================
+    function initSearchOverlay() {
+        const overlay = document.getElementById('search-overlay');
+        if (!overlay) return;
+        
+        const input = overlay.querySelector('.search-field');
+        const openBtns = document.querySelectorAll('[aria-label="جستجو"]');
+
+        // باز کردن
+        openBtns.forEach(function (btn) {
+            btn.addEventListener('click', function () {
+                overlay.classList.remove('hidden');
+                body.style.overflow = 'hidden'; // قفل اسکرول
+                setTimeout(function () { if (input) input.focus(); }, 150);
+            });
+        });
+
+        // بستن با کلیک روی بک‌دراپ
+        overlay.addEventListener('click', function (e) {
+            if (e.target === overlay) {
+                closeSearch();
+            }
+        });
+    }
+
+    function closeSearch() {
+        const overlay = document.getElementById('search-overlay');
+        if (overlay) {
+            overlay.classList.add('hidden');
+            body.style.overflow = ''; // آزاد کردن اسکرول
+        }
+    }
+
+    // ==========================================
+    // ۴. مدیریت منوی موبایل
+    // ==========================================
+    function initMobileMenu() {
+        const menu = document.getElementById('mobile-menu');
+        if (!menu) return;
+
+        // پیدا کردن دکمه همبرگرری
+        const openBtn = header ? header.querySelector('button[aria-label="منوی موبایل"]') : null;
+        
+        // پیدا کردن دکمه ضربدر داخل منو و بک‌دراپ
+        const closeBtn = menu.querySelector('button');
+        const backdrop = menu.querySelector('.absolute.inset-0');
+
+        if (openBtn) {
+            openBtn.addEventListener('click', function () {
+                menu.classList.remove('hidden');
+                body.style.overflow = 'hidden';
+            });
+        }
+
+        if (closeBtn) {
+            closeBtn.addEventListener('click', closeMobileMenu);
+        }
+        if (backdrop) {
+            backdrop.addEventListener('click', closeMobileMenu);
+        }
+    }
+
+    function closeMobileMenu() {
+        const menu = document.getElementById('mobile-menu');
+        if (menu) {
+            menu.classList.add('hidden');
+            body.style.overflow = '';
+        }
+    }
+
+    // ==========================================
+    // ۵. میانبرهای کیبورد
+    // ==========================================
+    function initKeyboardShortcuts() {
+        document.addEventListener('keydown', function (e) {
+            // بستن با Escape
+            if (e.key === 'Escape') {
+                closeSearch();
+                closeMobileMenu();
+            }
+            // باز کردن جستجو با Ctrl+K
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault();
+                const overlay = document.getElementById('search-overlay');
+                if (overlay) {
+                    overlay.classList.toggle('hidden');
+                    if (!overlay.classList.contains('hidden')) {
+                        body.style.overflow = 'hidden';
+                        setTimeout(function () {
+                            const input = overlay.querySelector('.search-field');
+                            if (input) input.focus();
+                        }, 150);
+                    } else {
+                        body.style.overflow = '';
+                    }
+                }
+            }
+        });
+    }
+
+    // ==========================================
+    // ۶. اسکرول نرم برای لینک‌های #
+    // ==========================================
+    function initSmoothScroll() {
+        document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach(function (anchor) {
+            anchor.addEventListener('click', function (e) {
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    e.preventDefault();
+                    closeMobileMenu(); // بستن منو اگر باز بود
+                    
+                    const headerHeight = header ? header.offsetHeight : 0;
+                    const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+                    const offsetPosition = elementPosition - headerHeight - 20;
+
+                    window.scrollTo({
+                        top: offsetPosition,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    }
+
+    // ==========================================
+    // ۷. انیمیشن هنگام اسکرول (Scroll Reveal)
+    // ==========================================
+    function initScrollAnimations() {
+        const elements = document.querySelectorAll('.animate-slide-up, .animate-fade-in');
+        if (elements.length === 0) return;
+
+        // مخفی کردن اولیه
+        elements.forEach(function (el) {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(30px)';
+            el.style.transition = 'opacity 0.7s cubic-bezier(0.5, 0, 0, 1), transform 0.7s cubic-bezier(0.5, 0, 0, 1)';
+        });
+
+        const observer = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                    observer.unobserve(entry.target); // توقف مشاهده پس از اجرا
+                }
+            });
+        }, {
+            threshold: 0.1,
+            rootMargin: '0px 0px -40px 0px'
+        });
+
+        elements.forEach(function (el) {
+            observer.observe(el);
+        });
+    }
+
+    // ==========================================
+    // ۸. سیستم توست (برای استفاده در ووکامرس بعداً)
+    // ==========================================
+    window.motayebToast = function (message, type) {
+        type = type || 'success';
+        
+        // حذف توست قبلی اگر وجود داشت
+        const existingToast = document.querySelector('.motayeb-toast-notification');
+        if (existingToast) existingToast.remove();
+
+        var toast = document.createElement('div');
+        toast.className = 'motayeb-toast-notification fixed top-24 left-1/2 -translate-x-1/2 z-[100] px-6 py-3 rounded-2xl shadow-2xl text-sm font-semibold text-white flex items-center gap-2 transition-all duration-300';
+        
+        // تنظیم رنگ و آیکون
+        if (type === 'success') {
+            toast.style.backgroundColor = '#2D5F3F';
+            toast.innerHTML = '<iconify-icon icon="lucide:check-circle" width="20"></iconify-icon> ' + message;
+        } else if (type === 'error') {
+            toast.style.backgroundColor = '#dc2626';
+            toast.innerHTML = '<iconify-icon icon="lucide:x-circle" width="20"></iconify-icon> ' + message;
+        } else {
+            toast.style.backgroundColor = '#8B5A3C';
+            toast.innerHTML = '<iconify-icon icon="lucide:info" width="20"></iconify-icon> ' + message;
+        }
+
+        // حالت اولیه (مخفی بالای صفحه)
+        toast.style.opacity = '0';
+        toast.style.transform = 'translate(-50%, -20px)';
+        
+        body.appendChild(toast);
+
+        // انیمیشن ورود
+        requestAnimationFrame(function () {
+            toast.style.opacity = '1';
+            toast.style.transform = 'translate(-50%, 0)';
+        });
+
+        // حذف خودکار
+        setTimeout(function () {
+            toast.style.opacity = '0';
+            toast.style.transform = 'translate(-50%, -20px)';
+            setTimeout(function () { toast.remove(); }, 300);
+        }, 3000);
+    };
+
+
+    // ==========================================
+    // اجرای تمام توابع
+    // ==========================================
+    initDarkMode();
+    initHeaderScroll();
+    initSearchOverlay();
+    initMobileMenu();
+    initKeyboardShortcuts();
+    initSmoothScroll();
+    initScrollAnimations();
+
+        // ==========================================
+    // ۹. تعویض عکس در صفحه محصول
+    // ==========================================
+    window.changeProductImage = function (btn, imgUrl) {
+        // تغییر عکس اصلی
+        const mainImg = document.getElementById('main-product-image');
+        if (mainImg) {
+            mainImg.src = imgUrl;
+            mainImg.setAttribute('data-large_image', imgUrl);
+        }
+        
+        // تغییر کلاس فعال تامبنیل‌ها
+        document.querySelectorAll('.gallery-thumb').forEach(function (thumb) {
+            thumb.classList.remove('active');
+            thumb.style.borderColor = '';
+        });
+        btn.classList.add('active');
+    };
+
+    // ==========================================
+    // ۱۰. ستاره‌های امتیازدهی سفارشی
+    // ==========================================
+    const starsContainer = document.getElementById('custom-star-rating');
+    const ratingInput = document.getElementById('rating');
+    if (starsContainer && ratingInput) {
+        const stars = starsContainer.querySelectorAll('.star');
+        
+        stars.forEach(star => {
+            star.addEventListener('mouseenter', function() {
+                const val = this.dataset.value;
+                stars.forEach(s => {
+                    s.style.color = s.dataset.value <= val ? '#D4A574' : '';
+                });
+            });
+
+            star.addEventListener('click', function() {
+                ratingInput.value = this.dataset.value;
+                stars.forEach(s => s.classList.remove('active'));
+                this.classList.add('active');
+                // رنگ دادن به همه ستاره‌های تا اون عدد
+                const val = this.dataset.value;
+                stars.forEach(s => {
+                    if(s.dataset.value <= val) s.classList.add('active');
+                });
+            });
+        });
+
+        starsContainer.addEventListener('mouseleave', function() {
+            const currentVal = ratingInput.value;
+            stars.forEach(s => {
+                s.style.color = s.dataset.value <= currentVal ? '#D4A574' : '';
+            });
+        });
+    }
+
+});
\ No newline at end of file
diff --git a/author.php b/author.php
new file mode 100644
index 0000000..5e45e97
--- /dev/null
+++ b/author.php
@@ -0,0 +1,47 @@
+<?php
+get_header();
+
+// Check if user is logged in
+if (is_user_logged_in()) {
+    $current_user = wp_get_current_user();
+    
+    // Display user dashboard
+    echo '<div class="user-dashboard">
+            <h1>پنل کاربری</h1>
+            <p>خوش آمدید، ' . esc_html($current_user->display_name) . '</p>
+            <div class="user-info">
+                <p><strong>نام کاربری:</strong> ' . esc_html($current_user->user_login) . '</p>
+                <p><strong>ایمیل:</strong> ' . esc_html($current_user->user_email) . '</p>
+                <p><strong>نقش:</strong> ' . esc_html(implode(', ', $current_user->roles)) . '</p>
+            </div>
+            <div class="dashboard-links">
+                <a href="' . wp_logout_url() . '" class="logout">خروج</a>
+                <a href="' . get_edit_user_link() . '" class="edit-profile">ویرایش پروفایل</a>
+            </div>
+        </div>';
+} else {
+    // Display login form
+    echo '<div class="user-login">
+            <h1>ورود به حساب کاربری</h1>
+            <form name="loginform" id="loginform" action="' . esc_url(site_url('wp-login.php', 'login_post')) . '" method="post">
+                <p class="username">
+                    <label for="user_login">نام کاربری<br>
+                    <input type="text" name="log" id="user_login" class="input" value="" size="20" autocapitalize="off" autocorrect="off" maxlength="60" required>
+                    </label>
+                </p>
+                <p class="password">
+                    <label for="user_pass">رمز عبور<br>
+                    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" required>
+                    </label>
+                </p>
+                <p class="submit">
+                    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="ورود">
+                    <input type="hidden" name="redirect_to" value="' . esc_url(add_query_arg('logged_in', 'true', home_url())) . '">
+                </p>
+            </form>
+            <p class="lost-password"><a href="' . esc_url(wp_lostpassword_url()) . '">رمز عبور خود را فراموش کرده‌اید؟</a></p>
+        </div>';
+}
+
+get_footer();
+?>
\ No newline at end of file
diff --git a/comments.php b/comments.php
new file mode 100644
index 0000000..7de320f
--- /dev/null
+++ b/comments.php
@@ -0,0 +1,9 @@
+<?php
+defined('ABSPATH') || exit;
+if(post_password_required()) return;
+wp_list_comments(array(
+    'style' => 'div',
+    'avatar_size' => 48,
+    'max_depth' => 3,
+));
+?>
\ No newline at end of file
diff --git a/footer.php b/footer.php
new file mode 100644
index 0000000..f9b4713
--- /dev/null
+++ b/footer.php
@@ -0,0 +1,95 @@
+<!-- Mobile Bottom Nav -->
+<nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border-t border-cream-200 dark:border-dark-border" style="padding-bottom: env(safe-area-inset-bottom, 0);">
+    <div class="flex items-center justify-around py-2">
+        <a href="<?php echo home_url(); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-forest-500 dark:text-forest-300">
+            <iconify-icon icon="lucide:home" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">خانه</span>
+        </a>
+        <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
+            <iconify-icon icon="lucide:grid-3x3" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">دسته‌بندی</span>
+        </a>
+        <a href="<?php echo get_permalink( wc_get_page_id( 'cart' ) ); ?>" class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
+            <iconify-icon icon="lucide:shopping-bag" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">سبد خرید</span>
+            <?php if ( WC()->cart->get_cart_contents_count() > 0 ) : ?>
+                <span class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
+            <?php endif; ?>
+        </a>
+        <a href="<?php echo wp_login_url(); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
+            <iconify-icon icon="lucide:user" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">حساب من</span>
+        </a>
+    </div>
+</nav>
+<div class="md:hidden h-16"></div>
+
+<footer class="bg-forest-500 dark:bg-forest-800 text-white">
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-16">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
+            <div class="col-span-2 md:col-span-1">
+                <div class="flex items-center gap-2.5 mb-5">
+                    <div class="w-10 h-10 bg-white/10 rounded-2xl flex items-center justify-center">
+                        <iconify-icon icon="lucide:leaf" width="20" class="text-honey-300"></iconify-icon>
+                    </div>
+                    <span class="font-extrabold text-xl">مطیب</span>
+                </div>
+                <p class="text-white/70 text-sm leading-relaxed mb-5">ارائه‌دهنده محصولات ارگانیک و طبیعی ایرانی با ضمانت اصالت و کیفیت.</p>
+            </div>
+            
+            <div>
+                <h4 class="font-bold mb-5">دسترسی سریع</h4>
+                <?php
+                if ( has_nav_menu( 'footer' ) ) {
+                    wp_nav_menu( array(
+                        'theme_location' => 'footer',
+                        'container'      => false,
+                        'items_wrap'     => '<ul class="space-y-3 text-sm text-white/70">%3$s</ul>',
+                        'depth'          => 1,
+                    ) );
+                } else { ?>
+                    <ul class="space-y-3 text-sm text-white/70">
+                        <li><a href="<?php echo home_url(); ?>" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
+                        <li><a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="hover:text-honey-300 transition">فروشگاه</a></li>
+                    </ul>
+                <?php } ?>
+            </div>
+
+            <div>
+                <h4 class="font-bold mb-5">خدمات مشتریان</h4>
+                <ul class="space-y-3 text-sm text-white/70">
+                    <li><a href="#" class="hover:text-honey-300 transition">سوالات متداول</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">شرایط بازگشت</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">نحوه ارسال</a></li>
+                </ul>
+            </div>
+            
+            <?php if ( is_active_sidebar( 'footer-contact' ) ) : ?>
+                <div>
+                    <?php dynamic_sidebar( 'footer-contact' ); ?>
+                </div>
+            <?php else: ?>
+                <div>
+                    <h4 class="font-bold mb-5">تماس با ما</h4>
+                    <ul class="space-y-3 text-sm text-white/70">
+                        <li>تهران، خیابان ولیعصر</li>
+                        <li>۰۲۱-۱۲۳۴۵۶۷۸</li>
+                        <li class="font-inter" dir="ltr">info@motayeb.ir</li>
+                    </ul>
+                </div>
+            <?php endif; ?>
+        </div>
+    </div>
+    <div class="border-t border-white/10">
+        <div class="max-w-7xl mx-auto px-4 md:px-6 py-5 flex flex-col md:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-white/50">© <?php echo date('Y'); ?> مطیب. تمامی حقوق محفوظ است.</p>
+            <div class="flex items-center gap-4">
+                <div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:shield-check" width="14" class="text-honey-300"></iconify-icon> نماد اعتماد</div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<?php wp_footer(); ?>
+</body>
+</html>
\ No newline at end of file
diff --git a/front-page.php b/front-page.php
new file mode 100644
index 0000000..49ca91e
--- /dev/null
+++ b/front-page.php
@@ -0,0 +1,319 @@
+<?php
+/**
+ * Template Name: صفحه اصلی مطیب
+ */
+get_header();
+?>
+
+<main class="pt-16 md:pt-[104px]">
+
+    <!-- ===== HERO ===== -->
+    <section class="relative overflow-hidden honeycomb-bg">
+        <div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
+            <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
+                <div class="text-center md:text-right">
+                    <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-forest-50 dark:bg-forest-900/30 rounded-full mb-6">
+                        <span class="w-2 h-2 bg-forest-500 rounded-full animate-pulse"></span>
+                        <span class="text-xs font-medium text-forest-500 dark:text-forest-300">محصولات ۱۰۰٪ ارگانیک و طبیعی</span>
+                    </div>
+                    
+                    <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1] mb-6">
+                        <?php 
+                        if ( function_exists('get_field') ) {
+                            $hero_title = get_field('hero_title'); 
+                            if ($hero_title) {
+                                echo wp_kses_post($hero_title);
+                            } else { ?>
+                                <span class="text-earth-400 dark:text-dark-text">طعم</span>
+                                <span class="text-forest-500 dark:text-forest-300"> واقعی</span>
+                                <br>
+                                <span class="text-honey-400">طبیعت</span>
+                            <?php }
+                        } else { ?>
+                            <span class="text-earth-400 dark:text-dark-text">طعم</span>
+                            <span class="text-forest-500 dark:text-forest-300"> واقعی</span>
+                            <br>
+                            <span class="text-honey-400">طبیعت</span>
+                        <?php } ?>
+                    </h1>
+
+                    <p class="text-cream-500 dark:text-dark-muted text-base md:text-lg leading-relaxed mb-8 max-w-md mx-auto md:mx-0">
+                        <?php echo function_exists('get_field') ? esc_html(get_field('hero_subtitle') ?: 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.') : 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.'; ?>
+                    </p>
+
+                    <div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
+                        <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-semibold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25">
+                            <span><?php echo esc_html(function_exists('get_field') ? (get_field('hero_btn_text') ?: 'مشاهده محصولات') : 'مشاهده محصولات'); ?></span>
+                            <iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
+                        </a>
+                        <a href="#brand-story" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-white/60 dark:bg-dark-card/60 border border-cream-200 dark:border-dark-border rounded-2xl font-semibold hover:bg-white dark:hover:bg-dark-card hover:-translate-y-0.5 transition-all backdrop-blur">
+                            <span>داستان مطیب</span>
+                            <iconify-icon icon="lucide:play-circle" width="18" class="text-honey-400"></iconify-icon>
+                        </a>
+                    </div>
+
+                    <!-- Stats -->
+                    <?php 
+                    if ( function_exists('get_field') ) {
+                        $stats = get_field('stats'); 
+                        if (is_array($stats) && count($stats) > 0): ?>
+                        <div class="flex items-center gap-6 mt-10 justify-center md:justify-start">
+                            <?php foreach($stats as $i => $stat): ?>
+                                <div class="text-center">
+                                    <div class="text-2xl font-bold text-forest-500 dark:text-forest-300"><?php echo esc_html($stat['number']); ?></div>
+                                    <div class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($stat['label']); ?></div>
+                                </div>
+                                <?php if($i < count($stats)-1) echo '<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>'; ?>
+                            <?php endforeach; ?>
+                        </div>
+                        <?php endif; 
+                    } ?>
+                </div>
+
+                <!-- Hero Image -->
+                <div class="relative">
+                    <?php 
+                    if ( function_exists('get_field') ) {
+                        $hero_img = get_field('hero_image');
+                        if (is_array($hero_img) && isset($hero_img['url'])): ?>
+                            <div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
+                                <img src="<?php echo esc_url($hero_img['url']); ?>" alt="<?php echo esc_attr($hero_img['alt'] ?? ''); ?>" class="w-full h-[350px] md:h-[500px] object-cover">
+                                <div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
+                            </div>
+                        <?php else: ?>
+                            <div class="relative rounded-3xl overflow-hidden shadow-2xl bg-cream-200 dark:bg-dark-card h-[350px] md:h-[500px] flex items-center justify-center">
+                                <div class="text-center p-6">
+                                    <iconify-icon icon="lucide:image-plus" width="48" class="text-cream-400 dark:text-dark-muted mb-3"></iconify-icon>
+                                    <p class="text-sm text-cream-400 dark:text-dark-muted">لطفاً از تنظیمات صفحه، تصویر هیرو را آپلود کنید.</p>
+                                </div>
+                            </div>
+                        <?php endif;
+                    } else { ?>
+                        <div class="relative rounded-3xl overflow-hidden shadow-2xl bg-cream-200 dark:bg-dark-card h-[350px] md:h-[500px] flex items-center justify-center">
+                            <p class="text-sm text-cream-400">پلاگین ACF فعال نیست.</p>
+                        </div>
+                    <?php } ?>
+                    
+                    <!-- Floating Card -->
+                    <div class="absolute -bottom-4 -right-4 md:bottom-8 md:-right-8 bg-white dark:bg-dark-card rounded-2xl p-4 shadow-xl hidden md:block">
+                        <div class="flex items-center gap-3">
+                            <div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center">
+                                <iconify-icon icon="lucide:award" width="24" class="text-honey-400"></iconify-icon>
+                            </div>
+                            <div>
+                                <div class="font-bold text-sm">گواهی ارگانیک</div>
+                                <div class="text-xs text-cream-500 dark:text-dark-muted">تأیید شده توسط سازمان غذا</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-0 left-0 right-0">
+            <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full"><path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" class="fill-cream-100 dark:fill-dark-bg"/></svg>
+        </div>
+    </section>
+
+    <!-- ===== CATEGORIES ===== -->
+    <?php 
+    if ( function_exists('get_field') ) {
+        $categories = get_field('home_categories'); 
+        if (is_array($categories) && count($categories) > 0): ?>
+    <section class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
+        <div class="max-w-7xl mx-auto px-4 md:px-6">
+            <div class="text-center mb-12">
+                <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CATEGORIES</span>
+                <h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-3">دسته‌بندی محصولات</h2>
+                <p class="text-cream-500 dark:text-dark-muted max-w-lg mx-auto">از عسل‌های کوهستان تا دمنوش‌های گیاهی، بهترین‌های طبیعت را کشف کنید</p>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                <?php foreach($categories as $cat): 
+                    $color_map = array('honey'=>'honey', 'forest'=>'forest', 'red'=>'red', 'emerald'=>'emerald', 'amber'=>'amber');
+                    $c = $color_map[$cat['color']] ?? 'forest';
+                ?>
+                <a href="<?php echo esc_url($cat['link']); ?>" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-<?php echo $c; ?>-50 dark:bg-<?php echo $c; ?>-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
+                        <iconify-icon icon="<?php echo esc_attr($cat['icon']); ?>" width="32" class="text-<?php echo $c; ?>-500 dark:text-<?php echo $c; ?>-300"></iconify-icon>
+                    </div>
+                    <h3 class="font-bold text-sm mb-1"><?php echo esc_html($cat['title']); ?></h3>
+                    <span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($cat['count']); ?></span>
+                </a>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </section>
+    <?php endif; 
+    } ?>
+
+    <!-- ===== BESTSELLERS ===== -->
+    <?php 
+    if ( function_exists('get_field') ) {
+        $bestseller_ids = get_field('bestseller_ids'); 
+        if (is_array($bestseller_ids) && count($bestseller_ids) > 0): ?>
+    <section class="py-16 md:py-24 bg-white dark:bg-dark-card">
+        <div class="max-w-7xl mx-auto px-4 md:px-6">
+            <div class="flex items-end justify-between mb-10">
+                <div>
+                    <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BESTSELLERS</span>
+                    <h2 class="text-3xl md:text-4xl font-extrabold mt-2">پرفروش‌ترین‌ها</h2>
+                </div>
+                <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
+                    <span>مشاهده همه</span>
+                    <iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
+                </a>
+            </div>
+            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
+                <?php foreach( $bestseller_ids as $product_id ): 
+                    $product = wc_get_product( $product_id );
+                    if ( ! $product ) continue;
+                ?>
+                <div class="product-card group bg-cream-50 dark:bg-dark-bg rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all">
+                    <a href="<?php echo get_permalink($product_id); ?>" class="block relative overflow-hidden">
+                        <img src="<?php echo wp_get_attachment_image_url( $product->get_image_id(), 'medium' ); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" class="product-img w-full h-48 md:h-56 object-cover">
+                        <?php if( $product->is_on_sale() ): ?>
+                            <div class="absolute top-3 right-3"><span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">تخفیف</span></div>
+                        <?php endif; ?>
+                        <div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
+                            <a href="<?php echo esc_url($product->add_to_cart_url()); ?>" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
+                                <iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon> افزودن
+                            </a>
+                        </div>
+                    </a>
+                    <div class="p-4">
+                        <a href="<?php echo get_permalink($product_id); ?>" class="block font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php echo $product->get_name(); ?></a>
+                        <div class="flex items-end gap-2">
+                            <span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo $product->get_price_html(); ?></span>
+                        </div>
+                    </div>
+                </div>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </section>
+    <?php endif; 
+    } ?>
+
+    <!-- ===== BRAND STORY ===== -->
+    <?php 
+    if ( function_exists('get_field') && get_field('story_title') ): ?>
+    <section id="brand-story" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden">
+        <div class="max-w-7xl mx-auto px-4 md:px-6">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div class="relative">
+                    <?php $story_img = get_field('story_image'); if(is_array($story_img) && isset($story_img['url'])): ?>
+                    <div class="rounded-3xl overflow-hidden shadow-xl">
+                        <img src="<?php echo esc_url($story_img['url']); ?>" alt="<?php echo esc_attr($story_img['alt'] ?? ''); ?>" class="w-full h-[350px] md:h-[450px] object-cover">
+                    </div>
+                    <?php endif; ?>
+                </div>
+                <div>
+                    <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
+                    <h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-6"><?php echo esc_html(get_field('story_title')); ?></h2>
+                    <p class="text-cream-500 dark:text-dark-muted leading-relaxed mb-6"><?php echo esc_html(get_field('story_text')); ?></p>
+                    
+                    <?php $values = get_field('story_values'); if(is_array($values) && count($values) > 0): ?>
+                    <div class="grid grid-cols-2 gap-4 mb-8">
+                        <?php foreach($values as $val): ?>
+                        <div class="flex items-start gap-3">
+                            <div class="w-10 h-10 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                                <iconify-icon icon="<?php echo esc_attr($val['icon']); ?>" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                            </div>
+                            <div>
+                                <div class="font-bold text-sm mb-0.5"><?php echo esc_html($val['title']); ?></div>
+                                <div class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($val['desc']); ?></div>
+                            </div>
+                        </div>
+                        <?php endforeach; ?>
+                    </div>
+                    <?php endif; ?>
+
+                    <?php $badges = get_field('certificates'); if(is_array($badges) && count($badges) > 0): ?>
+                    <div class="flex items-center gap-3 flex-wrap">
+                        <?php foreach($badges as $badge): ?>
+                        <div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
+                            <iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                            <span><?php echo esc_html($badge['text']); ?></span>
+                        </div>
+                        <?php endforeach; ?>
+                    </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </section>
+    <?php endif; ?>
+
+    <!-- ===== TESTIMONIALS ===== -->
+    <?php 
+    if ( function_exists('get_field') ) {
+        $testimonials = get_field('testimonials'); 
+        if (is_array($testimonials) && count($testimonials) > 0): ?>
+    <section class="py-16 md:py-24 bg-forest-500 dark:bg-forest-800 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
+        <div class="max-w-7xl mx-auto px-4 md:px-6 relative">
+            <div class="text-center mb-12">
+                <span class="text-xs font-medium text-honey-300 tracking-wider font-inter">TESTIMONIALS</span>
+                <h2 class="text-3xl md:text-4xl font-extrabold mt-2 text-white">نظرات مشتریان ما</h2>
+            </div>
+            <div class="grid md:grid-cols-3 gap-6">
+                <?php foreach($testimonials as $test): ?>
+                <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
+                    <div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
+                    <p class="text-white/90 text-sm leading-relaxed mb-5">«<?php echo esc_html($test['text']); ?>»</p>
+                    <div class="flex items-center gap-3">
+                        <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white"><?php echo esc_html($test['initials']); ?></div>
+                        <div>
+                            <div class="font-bold text-sm text-white"><?php echo esc_html($test['name']); ?></div>
+                            <div class="text-xs text-white/60"><?php echo esc_html($test['city']); ?></div>
+                        </div>
+                    </div>
+                </div>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </section>
+    <?php endif; 
+    } ?>
+
+    <!-- ===== NEWSLETTER ===== -->
+    <section class="py-16 md:py-20 bg-white dark:bg-dark-card">
+        <div class="max-w-3xl mx-auto px-4 md:px-6 text-center">
+            <div class="w-16 h-16 mx-auto mb-6 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center">
+                <iconify-icon icon="lucide:mail" width="32" class="text-honey-400"></iconify-icon>
+            </div>
+            <h2 class="text-2xl md:text-3xl font-extrabold mb-3"><?php echo esc_html(function_exists('get_field') ? (get_field('newsletter_title') ?: 'از تخفیف‌ها باخبر شوید') : 'از تخفیف‌ها باخبر شوید'); ?></h2>
+            <p class="text-cream-500 dark:text-dark-muted mb-8"><?php echo esc_html(function_exists('get_field') ? (get_field('newsletter_text') ?: 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.') : 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.'); ?></p>
+            <form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
+                <input type="email" placeholder="ایمیل خود را وارد کنید..." required class="flex-1 px-5 py-3.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-2xl text-sm outline-none focus:border-forest-500 transition placeholder:text-cream-400">
+                <button type="submit" class="px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition whitespace-nowrap">عضویت</button>
+            </form>
+        </div>
+    </section>
+
+    <!-- ===== TRUST BADGES ===== -->
+    <section class="py-12 bg-cream-50 dark:bg-dark-bg border-y border-cream-200 dark:border-dark-border">
+        <div class="max-w-7xl mx-auto px-4 md:px-6">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
+                <div class="flex flex-col items-center text-center gap-2">
+                    <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:truck" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
+                    <div class="font-bold text-sm">ارسال سریع</div><div class="text-xs text-cream-500 dark:text-dark-muted">به سراسر ایران</div>
+                </div>
+                <div class="flex flex-col items-center text-center gap-2">
+                    <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:shield-check" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
+                    <div class="font-bold text-sm">ضمانت اصالت</div><div class="text-xs text-cream-500 dark:text-dark-muted">۱۰۰٪ اصل و طبیعی</div>
+                </div>
+                <div class="flex flex-col items-center text-center gap-2">
+                    <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:credit-card" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
+                    <div class="font-bold text-sm">پرداخت امن</div><div class="text-xs text-cream-500 dark:text-dark-muted">درگاه‌های معتبر</div>
+                </div>
+                <div class="flex flex-col items-center text-center gap-2">
+                    <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:rotate-ccw" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
+                    <div class="font-bold text-sm">بازگشت آسان</div><div class="text-xs text-cream-500 dark:text-dark-muted">۷ روز ضمانت</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+</main>
+
+<?php get_footer(); ?>
\ No newline at end of file
diff --git a/functions.php b/functions.php
new file mode 100644
index 0000000..9629285
--- /dev/null
+++ b/functions.php
@@ -0,0 +1,263 @@
+<?php
+// جلوگیری از دسترسی مستقیم
+if ( ! defined( 'ABSPATH' ) ) exit;
+
+// ۱. فعال‌سازی قابلیت‌های پایه وردپرس
+function motayeb_setup() {
+    add_theme_support( 'title-tag' );
+    add_theme_support( 'post-thumbnails' );
+    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) );
+    add_theme_support( 'woocommerce' );
+    add_theme_support( 'wc-product-gallery-zoom' );
+    add_theme_support( 'wc-product-gallery-lightbox' );
+    add_theme_support( 'wc-product-gallery-slider' );
+
+    register_nav_menus( array(
+        'primary'   => __( 'منوی اصلی', 'motayeb' ),
+        'footer'    => __( 'منوی فوتر', 'motayeb' ),
+    ) );
+}
+add_action( 'after_setup_theme', 'motayeb_setup' );
+
+// ۲. لود فایل‌های CSS و JS
+function motayeb_scripts() {
+    wp_enqueue_style( 'vazirmatn', 'https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap', array(), null );
+    wp_enqueue_script( 'tailwind-cdn', 'https://cdn.tailwindcss.com', array(), null, false );
+
+    wp_add_inline_script( 'tailwind-cdn', "
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        forest: { 50:'#e8f5ec', 100:'#c6e6cf', 200:'#9ed0ae', 300:'#6fb88a', 400:'#4a9a6b', 500:'#2D5F3F', 600:'#254d34', 700:'#1c3b28', 800:'#13291c', 900:'#0a1710' },
+                        cream: { 50:'#FDFBF7', 100:'#F5F0E8', 200:'#EBE3D5', 300:'#DDD2BF', 400:'#C4B49A', 500:'#A99478' },
+                        honey: { 50:'#FDF5ED', 100:'#F9E6D0', 200:'#F2CC9E', 300:'#E8AC6A', 400:'#D4A574', 500:'#C08B52', 600:'#A07040', 700:'#7D5630', 800:'#5A3D20', 900:'#3A2612' },
+                        earth: { 50:'#F5EDE7', 100:'#E8D5C7', 200:'#D4B5A0', 300:'#BF9276', 400:'#8B5A3C', 500:'#734A30', 600:'#5C3B25', 700:'#452C1B', 800:'#2E1D12', 900:'#170E09' },
+                        dark: { bg:'#1A1D23', card:'#22262E', border:'#2E333D', text:'#E8E6E3', muted:'#9CA3AF' }
+                    },
+                    fontFamily: { vazir: ['Vazirmatn', 'sans-serif'], inter: ['Inter', 'sans-serif'] }
+                }
+            }
+        }
+    " );
+
+    wp_enqueue_style( 'motayeb-main', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );
+    wp_enqueue_script( 'iconify', 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js', array(), null, true );
+    wp_enqueue_script( 'motayeb-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
+}
+add_action( 'wp_enqueue_scripts', 'motayeb_scripts' );
+
+// ۳. حذف استایل پیش‌فرض ووکامرس
+add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
+
+// ۴. بازنویسی تگ‌های Wraper ووکامرس
+function motayeb_woo_wrapper_start() {
+    echo '<main id="primary" class="pt-16 md:pt-[104px]"><div class="max-w-7xl mx-auto px-4 md:px-6 py-8">';
+}
+function motayeb_woo_wrapper_end() {
+    echo '</div></main>';
+}
+remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
+remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
+add_action( 'woocommerce_before_main_content', 'motayeb_woo_wrapper_start', 10 );
+add_action( 'woocommerce_after_main_content', 'motayeb_woo_wrapper_end', 10 );
+
+// ۵. تنظیمات فروشگاه
+add_filter( 'loop_shop_columns', function() { return 4; } );
+add_filter( 'loop_shop_per_page', function() { return 12; } );
+
+// ۶. اضافه کردن کلاس nav-link به منو
+add_filter('nav_menu_link_attributes', 'motayeb_add_nav_link_class', 10, 3);
+function motayeb_add_nav_link_class($atts, $item, $args) {
+    if ($args->theme_location === 'primary') {
+        $atts['class'] = isset($atts['class']) ? $atts['class'] . ' nav-link' : 'nav-link';
+    }
+    return $atts;
+}
+
+// ۸. فیلدهای صفحه اصلی (ACF)
+if ( function_exists( 'acf_add_local_field_group' ) ) {
+    acf_add_local_field_group( array(
+        'key' => 'group_motayeb_homepage',
+        'title' => 'تنظیمات صفحه اصلی مطیب',
+        'fields' => array(
+            array( 'key' => 'field_hero_tab', 'label' => 'بخش هیرو', 'type' => 'tab' ),
+            array( 'key' => 'field_hero_title', 'name' => 'hero_title', 'label' => 'عنوان اصلی', 'type' => 'wysiwyg', 'tabs' => 'all', 'toolbar' => 'full', 'media_upload' => false, 'default_value' => '<span style="color: #8B5A3C;">طعم</span> <span style="color: #2D5F3F;">واقعی</span><br><span style="color: #D4A574;">طبیعت</span>' ),
+            array( 'key' => 'field_hero_subtitle', 'name' => 'hero_subtitle', 'label' => 'زیرعنوان', 'type' => 'textarea', 'rows' => 2, 'default_value' => 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.' ),
+            array( 'key' => 'field_hero_image', 'name' => 'hero_image', 'label' => 'تصویر هیرو', 'type' => 'image', 'return_format' => 'array' ),
+            array( 'key' => 'field_hero_btn_text', 'name' => 'hero_btn_text', 'label' => 'متن دکمه', 'type' => 'text', 'default_value' => 'مشاهده محصولات' ),
+            array( 'key' => 'field_stats_tab', 'label' => 'آمار', 'type' => 'tab' ),
+            array( 'key' => 'field_stats', 'name' => 'stats', 'label' => 'آمار', 'type' => 'repeater', 'layout' => 'horizontal', 'button_label' => 'افزودن', 'sub_fields' => array(
+                array( 'key' => 'field_stat_number', 'name' => 'number', 'label' => 'عدد', 'type' => 'text' ),
+                array( 'key' => 'field_stat_label', 'name' => 'label', 'label' => 'توضیح', 'type' => 'text' ),
+            )),
+            array( 'key' => 'field_cats_tab', 'label' => 'دسته‌بندی‌ها', 'type' => 'tab' ),
+            array( 'key' => 'field_categories', 'name' => 'home_categories', 'label' => 'دسته‌بندی‌ها', 'type' => 'repeater', 'layout' => 'table', 'button_label' => 'افزودن', 'sub_fields' => array(
+                array( 'key' => 'field_cat_title', 'name' => 'title', 'label' => 'نام', 'type' => 'text' ),
+                array( 'key' => 'field_cat_icon', 'name' => 'icon', 'label' => 'آیکون', 'type' => 'text' ),
+                array( 'key' => 'field_cat_color', 'name' => 'color', 'label' => 'رنگ', 'type' => 'select', 'choices' => array( 'honey' => 'عسلی', 'forest' => 'سبز', 'red' => 'قرمز', 'emerald' => 'سبز روشن', 'amber' => 'کهربایی' ) ),
+                array( 'key' => 'field_cat_link', 'name' => 'link', 'label' => 'لینک', 'type' => 'url' ),
+                array( 'key' => 'field_cat_count', 'name' => 'count', 'label' => 'تعداد', 'type' => 'text' ),
+            )),
+            array( 'key' => 'field_bestsellers_tab', 'label' => 'پرفروش‌ها', 'type' => 'tab' ),
+            array( 'key' => 'field_bestsellers', 'name' => 'bestseller_ids', 'label' => 'محصولات پرفروش', 'type' => 'relationship', 'post_type' => array( 'product' ), 'filters' => array( 'search' ), 'elements' => array( 'featured_image' ), 'min' => 1, 'max' => 8, 'return_format' => 'id' ),
+            array( 'key' => 'field_story_tab', 'label' => 'داستان برند', 'type' => 'tab' ),
+            array( 'key' => 'field_story_title', 'name' => 'story_title', 'label' => 'عنوان', 'type' => 'text', 'default_value' => 'داستان مطیب، از طبیعت تا سفره شما' ),
+            array( 'key' => 'field_story_text', 'name' => 'story_text', 'label' => 'متن', 'type' => 'textarea', 'rows' => 4 ),
+            array( 'key' => 'field_story_image', 'name' => 'story_image', 'label' => 'تصویر', 'type' => 'image', 'return_format' => 'array' ),
+            array( 'key' => 'field_story_values', 'name' => 'story_values', 'label' => 'ویژگی‌ها', 'type' => 'repeater', 'layout' => 'table', 'button_label' => 'افزودن', 'sub_fields' => array(
+                array( 'key' => 'field_val_icon', 'name' => 'icon', 'label' => 'آیکون', 'type' => 'text' ),
+                array( 'key' => 'field_val_title', 'name' => 'title', 'label' => 'عنوان', 'type' => 'text' ),
+                array( 'key' => 'field_val_desc', 'name' => 'desc', 'label' => 'توضیح', 'type' => 'text' ),
+            )),
+            array( 'key' => 'field_story_badges', 'name' => 'certificates', 'label' => 'گواهی‌ها', 'type' => 'repeater', 'layout' => 'horizontal', 'button_label' => 'افزودن', 'sub_fields' => array(
+                array( 'key' => 'field_badge_text', 'name' => 'text', 'label' => 'متن', 'type' => 'text' ),
+            )),
+            array( 'key' => 'field_testimonials_tab', 'label' => 'نظرات', 'type' => 'tab' ),
+            array( 'key' => 'field_testimonials', 'name' => 'testimonials', 'label' => 'نظرات', 'type' => 'repeater', 'layout' => 'block', 'button_label' => 'افزودن', 'sub_fields' => array(
+                array( 'key' => 'field_test_text', 'name' => 'text', 'label' => 'متن', 'type' => 'textarea', 'rows' => 3 ),
+                array( 'key' => 'field_test_name', 'name' => 'name', 'label' => 'نام', 'type' => 'text' ),
+                array( 'key' => 'field_test_city', 'name' => 'city', 'label' => 'شهر', 'type' => 'text' ),
+                array( 'key' => 'field_test_init', 'name' => 'initials', 'label' => 'حروف', 'type' => 'text' ),
+            )),
+            array( 'key' => 'field_newsletter_tab', 'label' => 'خبرنامه', 'type' => 'tab' ),
+            array( 'key' => 'field_news_title', 'name' => 'newsletter_title', 'label' => 'عنوان', 'type' => 'text', 'default_value' => 'از تخفیف‌ها باخبر شوید' ),
+            array( 'key' => 'field_news_text', 'name' => 'newsletter_text', 'label' => 'توضیح', 'type' => 'text', 'default_value' => 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.' ),
+        ),
+        'location' => array(
+            array( array( 'param' => 'page_template', 'operator' => '==', 'value' => 'front-page.php' ) ),
+        ),
+    ) );
+}
+
+// ===================================================================
+// تابع کمکی برای ظاهر کامنت‌ها (بدون خطای Cannot redeclare)
+// ===================================================================
+function motayeb_comment_callback($comment, $args, $depth) {
+    $author = get_comment_author($comment);
+    $initial = mb_substr($author, 0, 1);
+    $date = get_comment_date('Y/m/d');
+    $text = wpautop( esc_html( get_comment_text($comment) ) );
+    $is_pending = ('0' == $comment->comment_approved);
+    
+    echo '<article class="bg-cream-50 dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50 hover:shadow-md transition">';
+    echo '<div class="flex items-center justify-between mb-4">';
+    echo '<div class="flex items-center gap-3">';
+    echo '<div class="w-12 h-12 bg-forest-100 dark:bg-forest-800 rounded-full flex items-center justify-center font-bold text-sm text-forest-500 dark:text-forest-300 flex-shrink-0">' . $initial . '</div>';
+    echo '<div>';
+    echo '<div class="font-bold text-sm text-earth-400 dark:text-dark-text">' . $author . '</div>';
+    echo '<div class="text-xs text-cream-400 dark:text-dark-muted flex items-center gap-1.5"><span>' . $date . '</span>';
+    echo edit_comment_link('ویرایش', ' <span class="text-xs text-forest-500 dark:text-forest-300 hover:underline">', '</span>');
+    echo '</div></div></div>';
+    comment_reply_link(array_merge($args, array('reply_text' => '<iconify-icon icon="lucide:reply" width="16"></iconify-icon>', 'depth' => $depth, 'max_depth' => 3, 'before' => '')));
+    echo '</div>';
+    
+    if ($is_pending) {
+        echo '<p class="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-4 py-2 rounded-lg mb-3">نظر شما در انتظار تایید مدیریت است.</p>';
+    }
+    
+    echo '<div class="text-sm text-cream-500 dark:text-dark-muted leading-7">' . $text . '</div>';
+    echo '</article>';
+}
+
+// ===================================================================
+// دیتای تستی (فقط با زدن ?run_motayeb_seed در آدرس سایت اجرا می‌شود)
+// ===================================================================
+add_action('init', 'motayeb_seed_test_data');
+function motayeb_seed_test_data() {
+    if (get_option('motayeb_seeded_done') || !isset($_GET['run_motayeb_seed'])) {
+        return;
+    }
+    require_once(ABSPATH . 'wp-admin/includes/media.php');
+    require_once(ABSPATH . 'wp-admin/includes/file.php');
+    require_once(ABSPATH . 'wp-admin/includes/image.php');
+
+    $categories = array('عسل طبیعی', 'ارده و حلوا', 'سرکه و ترشی', 'دمنوش گیاهی', 'خشکبار و آجیل', 'روغن طبیعی', 'شیره طبیعی');
+    $cat_ids = array();
+    foreach ($categories as $cat_name) {
+        $term = term_exists($cat_name, 'product_cat');
+        if (!$term) { $term = wp_insert_term($cat_name, 'product_cat'); }
+        $cat_ids[$cat_name] = is_array($term) ? $term['term_id'] : $term;
+    }
+
+    $products_data = array(
+        array('name' => 'عسل طبیعی کوهستان', 'desc' => 'عسل خالص و طبیعی جمع‌آوری شده از دامنه‌های زاگرس.', 'price' => 295000, 'sale_price' => 249000, 'cat' => 'عسل طبیعی', 'img' => 'https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=600&q=80'),
+        array('name' => 'عسل آویشن و گون', 'desc' => 'عسل تک‌گلی آویشن و گون با عطر و طعمی بی‌نظیر.', 'price' => 345000, 'sale_price' => '', 'cat' => 'عسل طبیعی', 'img' => 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=600&q=80'),
+        array('name' => 'ارده کنجد سنتی', 'desc' => 'ارده کنجد سنگ‌فرش شده با دستگاه‌های سنتی.', 'price' => 185000, 'sale_price' => '', 'cat' => 'ارده و حلوا', 'img' => 'https://images.unsplash.com/photo-1595475207225-428b62bda831?w=600&q=80'),
+        array('name' => 'حلوا ارده شیرین', 'desc' => 'حلوا اردهای سنتی با ترکیب ارده کنجد مرغوب.', 'price' => 210000, 'sale_price' => 189000, 'cat' => 'ارده و حلوا', 'img' => 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=600&q=80'),
+        array('name' => 'سرکه انگور طبیعی', 'desc' => 'سرکه انگور تخمیر شده به روش سنتی.', 'price' => 125000, 'sale_price' => '', 'cat' => 'سرکه و ترشی', 'img' => 'https://images.unsplash.com/photo-1596040033229-a9821ebd058d?w=600&q=80'),
+        array('name' => 'دمنوش بابونه', 'desc' => 'ترکیب آرامش‌بخش گل‌های بابونه و اسطوخودوس کوهی.', 'price' => 89000, 'sale_price' => '', 'cat' => 'دمنوش گیاهی', 'img' => 'https://images.unsplash.com/photo-1556679343-c7306c1976bc?w=600&q=80'),
+        array('name' => 'آجیل مخلوط لوکس', 'desc' => 'ترکیبی از پسته، بادام، فندق و گردو درجه یک.', 'price' => 485000, 'sale_price' => 429000, 'cat' => 'خشکبار و آجیل', 'img' => 'https://images.unsplash.com/photo-1599599810769-bcde5a160d32?w=600&q=80'),
+        array('name' => 'روغن زیتون فرابکر', 'desc' => 'روغن زیتون فرابکر کشت شده در باغ‌های گیلان.', 'price' => 275000, 'sale_price' => '', 'cat' => 'روغن طبیعی', 'img' => 'https://images.unsplash.com/photo-1474979266404-7eaabda50445?w=600&q=80'),
+        array('name' => 'شیره خرما طبیعی', 'desc' => 'شیره خالص خرما بدون شکر اضافه.', 'price' => 95000, 'sale_price' => 79000, 'cat' => 'شیره طبیعی', 'img' => 'https://images.unsplash.com/photo-1590165482129-1b8b27698780?w=600&q=80'),
+        array('name' => 'خشک انجیر درجه یک', 'desc' => 'انجیر خشک شده به روش آفتابی از باغ‌های استهبان.', 'price' => 165000, 'sale_price' => '', 'cat' => 'خشکبار و آجیل', 'img' => 'https://images.unsplash.com/photo-1596591868264-4ef737fbd18b?w=600&q=80')
+    );
+
+    foreach ($products_data as $p_data) {
+        $attach_id = media_sideload_image($p_data['img'], 0, $p_data['name'], 'id');
+        if (is_wp_error($attach_id)) { $attach_id = ''; }
+
+        $product_id = wp_insert_post(array(
+            'post_title' => $p_data['name'], 'post_content' => $p_data['desc'],
+            'post_status' => 'publish', 'post_type' => 'product',
+        ));
+
+        if (!is_wp_error($product_id)) {
+            wp_set_object_terms($product_id, 'simple', 'product_type');
+            if (isset($cat_ids[$p_data['cat']])) {
+                wp_set_object_terms($product_id, array((int)$cat_ids[$p_data['cat']]), 'product_cat');
+            }
+            update_post_meta($product_id, '_price', $p_data['sale_price'] ? $p_data['sale_price'] : $p_data['price']);
+            update_post_meta($product_id, '_regular_price', $p_data['price']);
+            update_post_meta($product_id, '_sale_price', $p_data['sale_price']);
+            update_post_meta($product_id, '_stock_status', 'instock');
+            update_post_meta($product_id, '_manage_stock', 'no');
+            if ($attach_id) { set_post_thumbnail($product_id, $attach_id); }
+        }
+    }
+
+    $blog_cat = term_exists('سلامت و تغذیه', 'category');
+    if (!$blog_cat) {
+        $blog_cat = wp_insert_term('سلامت و تغذیه', 'category');
+        $blog_cat_id = is_array($blog_cat) ? $blog_cat['term_id'] : $blog_cat;
+    } else {
+        $blog_cat_id = is_array($blog_cat) ? $blog_cat['term_id'] : $blog_cat;
+    }
+
+    $posts_data = array(
+        array('title' => '۱۰ فایده شگفت‌انگیز عسل طبیعی', 'content' => '<p>عسل طبیعی یکی از قدیمی‌ترین مواد غذایی است.</p>', 'img' => 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=800&q=80'),
+        array('title' => 'طرز تهیه حلوا ارده خانگی', 'content' => '<p>حلوا ارده یکی از شیرینی‌های سنتی ایرانی است.</p>', 'img' => 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80')
+    );
+
+    foreach ($posts_data as $post_data) {
+        $attach_id = media_sideload_image($post_data['img'], 0, $post_data['title'], 'id');
+        if (is_wp_error($attach_id)) { $attach_id = ''; }
+        $post_id = wp_insert_post(array(
+            'post_title' => $post_data['title'], 'post_content' => $post_data['content'],
+            'post_status' => 'publish', 'post_type' => 'post',
+        ));
+        if (!is_wp_error($post_id)) {
+            wp_set_object_terms($post_id, array((int)$blog_cat_id), 'category');
+            if ($attach_id) { set_post_thumbnail($post_id, $attach_id); }
+        }
+    }
+
+    update_option('motayeb_seeded_done', true);
+    wp_redirect(admin_url('admin.php?seed_success=1'));
+    exit;
+}
+
+add_action('admin_notices', 'motayeb_seed_success_notice');
+function motayeb_seed_success_notice() {
+    if (isset($_GET['seed_success'])) {
+        echo '<div class="notice notice-success is-dismissible"><p><strong>موفقیت‌آمیز!</strong> دیتای تستی اضافه شد.</p></div>';
+    }
+}
+
+// ===================================================================
+// تابع کمکی برای ظاهر کامنت‌ها (بدون خطای Cannot redeclare)
+// ===================================================================
+add_action('init', function() {
+    remove_action('comment_template', 'comment_form');
+});
\ No newline at end of file
diff --git a/header.php b/header.php
new file mode 100644
index 0000000..2da72d9
--- /dev/null
+++ b/header.php
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <?php wp_head(); ?>
+</head>
+<body <?php body_class('bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300'); ?>>
+<style>* { font-family: 'Vazirmatn', sans-serif; }</style>
+
+<!-- Top Bar -->
+<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-cream-100/80 dark:bg-dark-bg/80 backdrop-blur-xl border-b border-cream-200/50 dark:border-dark-border/50">
+    <div class="hidden md:block bg-forest-500 dark:bg-forest-700 text-white text-xs py-2">
+        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
+            <div class="flex items-center gap-4">
+                <span class="flex items-center gap-1"><iconify-icon icon="lucide:truck" width="14"></iconify-icon> ارسال رایگان بالای ۵۰۰ هزار تومان</span>
+                <span class="w-px h-3 bg-white/30"></span>
+                <span class="flex items-center gap-1"><iconify-icon icon="lucide:shield-check" width="14"></iconify-icon> ضمانت اصالت کالا</span>
+            </div>
+            <div class="flex items-center gap-4">
+                <a href="tel:02112345678" class="flex items-center gap-1 hover:opacity-80 transition"><iconify-icon icon="lucide:phone" width="14"></iconify-icon> ۰۲۱-۱۲۳۴۵۶۷۸</a>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Main Nav -->
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="flex items-center justify-between h-16 md:h-20">
+            <!-- Mobile Menu Toggle -->
+            <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="md:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="منوی موبایل">
+                <iconify-icon icon="lucide:menu" width="22"></iconify-icon>
+            </button>
+
+            <!-- Logo -->
+            <a href="<?php echo home_url(); ?>" class="flex items-center gap-2.5">
+                <div class="w-10 h-10 bg-forest-500 rounded-2xl flex items-center justify-center shadow-lg shadow-forest-500/20">
+                    <iconify-icon icon="lucide:leaf" width="20" class="text-white"></iconify-icon>
+                </div>
+                <div>
+                    <span class="font-extrabold text-xl text-forest-500 dark:text-forest-300 leading-none">مطیب</span>
+                    <span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
+                </div>
+            </a>
+
+            <!-- Desktop Nav (WP Menu) -->
+            <nav class="hidden md:flex items-center gap-8">
+                <?php
+                if ( has_nav_menu( 'primary' ) ) {
+                    wp_nav_menu( array(
+                        'theme_location' => 'primary',
+                        'container'      => false,
+                        'menu_class'     => 'flex items-center gap-8',
+                        'items_wrap'     => '%3$s',
+                        'depth'          => 1,
+                    ) );
+                } else { ?>
+                    <a href="<?php echo home_url(); ?>" class="nav-link text-sm font-medium hover:text-forest-500 transition">صفحه اصلی</a>
+                    <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="nav-link text-sm font-medium hover:text-forest-500 transition">فروشگاه</a>
+                <?php } ?>
+            </nav>
+
+            <!-- Actions -->
+            <div class="flex items-center gap-2">
+                <button onclick="document.getElementById('search-overlay').classList.toggle('hidden')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="جستجو">
+                    <iconify-icon icon="lucide:search" width="20"></iconify-icon>
+                </button>
+                
+                <button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حالت تاریک">
+                    <iconify-icon icon="lucide:moon" width="20" class="dark:hidden"></iconify-icon>
+                    <iconify-icon icon="lucide:sun" width="20" class="hidden dark:block text-honey-400"></iconify-icon>
+                </button>
+                
+                <a href="<?php echo get_permalink( wc_get_page_id( 'cart' ) ); ?>" class="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="سبد خرید">
+                    <iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
+                    <?php 
+                    $count = WC()->cart->get_cart_contents_count(); 
+                    if ( $count > 0 ) : ?>
+                        <span class="cart-badge absolute -top-0.5 -left-0.5 w-5 h-5 bg-honey-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
+                            <?php echo esc_html( $count ); ?>
+                        </span>
+                    <?php endif; ?>
+                </a>
+                
+                <a href="<?php echo wp_login_url(); ?>" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حساب کاربری">
+                    <iconify-icon icon="lucide:user" width="20"></iconify-icon>
+                </a>
+            </div>
+        </div>
+    </div>
+</header>
+
+<!-- Search Overlay -->
+<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 backdrop-blur-sm hidden" onclick="this.classList.add('hidden')">
+    <div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
+        <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="bg-white dark:bg-dark-card rounded-2xl shadow-2xl p-6">
+            <div class="flex items-center gap-3 border-b border-cream-200 dark:border-dark-border pb-4">
+                <iconify-icon icon="lucide:search" width="22" class="text-forest-500"></iconify-icon>
+                <input type="search" class="search-field flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted" placeholder="جستجو در محصولات..." value="<?php echo get_search_query(); ?>" name="s" autocomplete="off">
+                <input type="hidden" name="post_type" value="product">
+                <button type="button" onclick="this.closest('#search-overlay').classList.add('hidden')" class="text-cream-400 hover:text-earth-400">
+                    <iconify-icon icon="lucide:x" width="22"></iconify-icon>
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Mobile Menu Overlay -->
+<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
+    <div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden')"></div>
+    <div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-dark-card shadow-2xl overflow-y-auto">
+        <div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
+            <span class="font-bold text-lg">مطیب</span>
+            <button onclick="this.closest('#mobile-menu').classList.add('hidden')" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg">
+                <iconify-icon icon="lucide:x" width="20"></iconify-icon>
+            </button>
+        </div>
+        <nav class="p-4 space-y-1">
+            <?php
+            if ( has_nav_menu( 'primary' ) ) {
+                wp_nav_menu( array(
+                    'theme_location' => 'primary',
+                    'container'      => false,
+                    'items_wrap'     => '%3$s',
+                    'depth'          => 1,
+                ) );
+            } else { ?>
+                <a href="<?php echo home_url(); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">صفحه اصلی</a>
+                <a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">فروشگاه</a>
+            <?php } ?>
+        </nav>
+    </div>
+</div>
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..a3fc217
--- /dev/null
+++ b/index.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * قالب پیش‌فرض (فallback)
+ * این فایل برای نمایش محتوا در مسیرهایی که تمپلیت خاصی تعریف نشده است استفاده می‌شود.
+ */
+get_header();
+?>
+
+<main id="primary" class="pt-16 md:pt-[104px]">
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
+        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
+            <article class="mb-8">
+                <h1 class="text-3xl md:text-4xl font-extrabold mb-6 text-earth-400 dark:text-dark-text"><?php the_title(); ?></h1>
+                <div class="prose max-w-none text-cream-500 dark:text-dark-muted leading-relaxed">
+                    <?php the_content(); ?>
+                </div>
+            </article>
+        <?php endwhile;
+
+            the_posts_pagination( array(
+                'mid_size'  => 2,
+                'prev_text' => '<iconify-icon icon="lucide:arrow-right" width="18"></iconify-icon>',
+                'next_text' => '<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>',
+            ) );
+        else : ?>
+            <div class="text-center py-20">
+                <iconify-icon icon="lucide:search-x" width="64" class="text-cream-300 dark:text-dark-muted mb-4"></iconify-icon>
+                <h3 class="text-xl font-bold mb-2">محتوایی یافت نشد</h3>
+                <p class="text-cream-500 dark:text-dark-muted">متأسفانه محتوایی در این قسمت یافت نشد.</p>
+            </div>
+        <?php endif; ?>
+    </div>
+</main>
+
+<?php get_footer(); ?>
diff --git a/page.php b/page.php
new file mode 100644
index 0000000..6efcfb6
--- /dev/null
+++ b/page.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * قالب برگه‌های ساده (سبد خرید، تسویه، و...)
+ */
+get_header();
+?>
+
+<main id="primary" class="pt-16 md:pt-[104px]">
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
+        <?php
+        while ( have_posts() ) :
+            the_post();
+            the_content();
+        endwhile;
+        ?>
+    </div>
+</main>
+
+<?php
+get_footer();
\ No newline at end of file
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..903f794
Binary files /dev/null and b/screenshot.png differ
diff --git a/single-product.php b/single-product.php
new file mode 100644
index 0000000..de5c515
--- /dev/null
+++ b/single-product.php
@@ -0,0 +1,29 @@
+<?php
+/**
+ * قالب تکی محصول
+ */
+get_header();
+
+// نمایش breadcrumb مسیر صفحه
+woocommerce_breadcrumb( array(
+    'wrap_before' => '<div class="max-w-7xl mx-auto px-4 md:px-6 pt-6 text-sm text-cream-500 dark:text-dark-muted flex items-center gap-2">',
+    'wrap_after'  => '</div>',
+    'delimiter'   => ' <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon> '
+));
+?>
+
+<main class="pb-16 md:pb-24">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <?php while ( have_posts() ) : ?>
+            <?php the_post(); ?>
+            
+            <?php
+            // فراخوانی فایل محتوای محصول (داخل پوشه woocommerce)
+            wc_get_template_part( 'content', 'single-product' );
+            ?>
+
+        <?php endwhile; ?>
+    </div>
+</main>
+
+<?php get_footer(); ?>
\ No newline at end of file
diff --git a/single.php b/single.php
new file mode 100644
index 0000000..4ffef4f
--- /dev/null
+++ b/single.php
@@ -0,0 +1,138 @@
+<?php
+/**
+ * مقاله تکی بلاگ
+ */
+get_header();
+?>
+
+<main class="pt-16 md:pt-[104px]">
+    <div class="max-w-3xl mx-auto px-4 md:px-6 py-12 md:py-16">
+        
+        <!-- نوار breadcrumbs -->
+        <div class="flex items-center gap-2 text-sm text-cream-500 dark:text-dark-muted mb-8">
+            <a href="<?php echo home_url(); ?>" class="hover:text-forest-500 transition">خانه</a>
+            <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
+            <a href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ); ?>" class="hover:text-forest-500 transition">مجله</a>
+            <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
+            <span class="text-earth-400 dark:text-dark-text line-clamp-1 max-w-[200px]"><?php the_title(); ?></span>
+        </div>
+
+        <?php while ( have_posts() ) : the_post(); ?>
+        
+            <!-- عنوان -->
+            <h1 class="text-3xl md:text-4xl font-extrabold leading-tight mb-6 text-earth-400 dark:text-dark-text">
+                <?php the_title(); ?>
+            </h1>
+
+            <!-- متادیتا (نویسنده و تاریخ) -->
+            <div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-cream-200 dark:border-dark-border">
+                <?php
+                $author_id = get_the_author_meta('ID');
+                $avatar_url = get_avatar_url($author_id, 80);
+                if ( $avatar_url && ! is_wp_error($avatar_url) ) {
+                ?>
+                <img src="<?php echo esc_url($avatar_url); ?>" alt="<?php echo esc_attr(get_the_author()); ?>" class="w-10 h-10 rounded-full border-2 border-cream-200 dark:border-dark-border">
+                <?php } ?>
+                <div>
+                    <div class="text-sm font-bold text-earth-400 dark:text-dark-text"><?php the_author(); ?></div>
+                    <div class="flex items-center gap-2 text-xs text-cream-400 dark:text-dark-muted">
+                        <iconify-icon icon="lucide:calendar" width="14"></iconify-icon>
+                        <span><?php echo get_the_date('d F Y'); ?></span>
+                    </div>
+                </div>
+                <!-- دسته‌بندی‌ها -->
+                <div class="mr-auto flex gap-2 flex-wrap">
+                    <?php 
+                    $categories = get_the_category();
+                    if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) {
+                        foreach ( $categories as $cat ) {
+                            echo '<a href="' . esc_url( get_category_link( $cat->term_id ) ) . '" class="px-3 py-1 bg-cream-100 dark:bg-dark-bg rounded-full text-xs text-cream-500 dark:text-dark-muted hover:bg-forest-50 hover:text-forest-500 dark:hover:bg-forest-900/30 dark:hover:text-forest-300 transition">' . esc_html($cat->name) . '</a>';
+                        }
+                    }
+                    ?>
+                </div>
+            </div>
+
+            <!-- عکس اصلی مقاله -->
+            <?php if ( has_post_thumbnail() ) : ?>
+                <div class="rounded-2xl overflow-hidden mb-10 border border-cream-200/50 dark:border-dark-border/50">
+                    <?php the_post_thumbnail( 'large', array( 'class' => 'w-full object-cover' ) ); ?>
+                </div>
+            <?php endif; ?>
+
+            <!-- متن مقاله -->
+            <div class="prose max-w-none text-earth-400 dark:text-dark-text leading-relaxed mb-12
+                        prose-headings:font-extrabold prose-headings:text-2xl prose-headings:text-forest-500 dark:prose-headings:text-forest-300 prose-headings:mt-8 prose-headings:mb-4
+                        prose-p:text-cream-500 dark:prose-p:text-dark-muted prose-p:leading-8
+                        prose-a:text-forest-500 dark:prose-a:text-forest-300 prose-a:font-semibold
+                        prose-img:rounded-2xl prose-img:border prose-img:border-cream-200/50 dark:prose-img:border-dark-border/50 prose-img:my-8
+                        prose-strong:text-earth-400 dark:prose-strong:text-dark-text">
+                <?php the_content(); ?>
+            </div>
+
+            <!-- تگ‌ها -->
+            <?php 
+            $tags = get_the_tags();
+            if ( $tags && ! is_wp_error( $tags ) ) : ?>
+                <div class="flex items-center gap-2 flex-wrap mb-12 pb-12 border-b border-cream-200 dark:border-dark-border">
+                    <iconify-icon icon="lucide:tag" width="18" class="text-cream-400 dark:text-dark-muted flex-shrink-0"></iconify-icon>
+                    <?php foreach ( $tags as $tag ) : ?>
+                        <a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-xs text-cream-500 dark:text-dark-muted hover:bg-honey-50 hover:text-honey-400 transition">
+                            <?php echo esc_html($tag->name); ?>
+                        </a>
+                    <?php endforeach; ?>
+                </div>
+            <?php endif; ?>
+
+            <!-- کامنت‌ها -->
+            <?php
+            if ( comments_open() || get_comments_number() ) {
+                comments_template();
+            }
+            ?>
+
+        <?php endwhile; ?>
+
+        <!-- نویسنده مقالات مرتبط -->
+        <?php
+        $cats = get_the_category();
+        if ( ! empty( $cats ) && ! is_wp_error( $cats ) ) {
+            $cat_ids = wp_list_pluck( $cats, 'term_id' );
+            if ( ! empty( $cat_ids ) ) {
+                $related_posts = get_posts( array(
+                    'category__in' => $cat_ids,
+                    'posts_per_page' => 3,
+                    'post__not_in' => array( get_the_ID() ),
+                    'orderby' => 'rand'
+                ) );
+                
+                if ( $related_posts && ! is_wp_error( $related_posts ) ) :
+                ?>
+                <div class="mt-12 pt-12 border-t border-cream-200 dark:border-dark-border">
+                    <h3 class="text-xl font-extrabold mb-8 text-earth-400 dark:text-dark-text">نوشته‌های مرتبط</h3>
+                    <div class="grid md:grid-cols-3 gap-6">
+                        <?php foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
+                            <a href="<?php the_permalink(); ?>" class="group block bg-white dark:bg-dark-card rounded-xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-lg transition-all">
+                                <div class="h-40 overflow-hidden">
+                                    <?php if ( has_post_thumbnail() ) : ?>
+                                        <?php the_post_thumbnail( 'medium', array( 'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500' ) ); ?>
+                                    <?php endif; ?>
+                                </div>
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm line-clamp-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php the_title(); ?></h4>
+                                    <span class="text-xs text-cream-400 dark:text-dark-muted mt-2 block"><?php echo get_the_date('Y/m/d'); ?></span>
+                                </div>
+                            </a>
+                        <?php endforeach; wp_reset_postdata(); ?>
+                    </div>
+                </div>
+                <?php
+                endif;
+            }
+        }
+        ?>
+
+    </div>
+</main>
+
+<?php get_footer(); ?>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1ca47fc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,15 @@
+/*
+Theme Name: Motayeb - مطیب
+Theme URI: https://motayeb.ir
+Author: VernaSOft (Kazem Alghasi)
+Author URI: https://motayeb.ir
+Description: قالب اختصاصی فروشگاهی مطیب برای محصولات ارگانیک و طبیعی - سازگار با ووکامرس
+Version: 1.0.0
+Tested up to: 6.4
+Requires PHP: 7.4
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: motayeb
+Domain Path: /languages
+*/
+
diff --git a/ui.html b/ui.html
new file mode 100644
index 0000000..13399b8
--- /dev/null
+++ b/ui.html
@@ -0,0 +1,1464 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>مطیب | طعم واقعی طبیعت</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        forest: { 50:'#e8f5ec', 100:'#c6e6cf', 200:'#9ed0ae', 300:'#6fb88a', 400:'#4a9a6b', 500:'#2D5F3F', 600:'#254d34', 700:'#1c3b28', 800:'#13291c', 900:'#0a1710' },
+                        cream: { 50:'#FDFBF7', 100:'#F5F0E8', 200:'#EBE3D5', 300:'#DDD2BF', 400:'#C4B49A', 500:'#A99478' },
+                        honey: { 50:'#FDF5ED', 100:'#F9E6D0', 200:'#F2CC9E', 300:'#E8AC6A', 400:'#D4A574', 500:'#C08B52', 600:'#A07040', 700:'#7D5630', 800:'#5A3D20', 900:'#3A2612' },
+                        earth: { 50:'#F5EDE7', 100:'#E8D5C7', 200:'#D4B5A0', 300:'#BF9276', 400:'#8B5A3C', 500:'#734A30', 600:'#5C3B25', 700:'#452C1B', 800:'#2E1D12', 900:'#170E09' },
+                        dark: { bg:'#1A1D23', card:'#22262E', border:'#2E333D', text:'#E8E6E3', muted:'#9CA3AF' }
+                    },
+                    fontFamily: {
+                        vazir: ['Vazirmatn', 'sans-serif'],
+                        inter: ['Inter', 'sans-serif'],
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.6s ease-out forwards',
+                        'slide-up': 'slideUp 0.6s ease-out forwards',
+                        'slide-right': 'slideRight 0.5s ease-out forwards',
+                        'float': 'float 3s ease-in-out infinite',
+                        'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
+                        'shimmer': 'shimmer 2s linear infinite',
+                    },
+                    keyframes: {
+                        fadeIn: { '0%': { opacity:'0' }, '100%': { opacity:'1' } },
+                        slideUp: { '0%': { opacity:'0', transform:'translateY(30px)' }, '100%': { opacity:'1', transform:'translateY(0)' } },
+                        slideRight: { '0%': { opacity:'0', transform:'translateX(-20px)' }, '100%': { opacity:'1', transform:'translateX(0)' } },
+                        float: { '0%,100%': { transform:'translateY(0)' }, '50%': { transform:'translateY(-10px)' } },
+                        pulseSoft: { '0%,100%': { opacity:'1' }, '50%': { opacity:'0.7' } },
+                        shimmer: { '0%': { backgroundPosition:'-200% 0' }, '100%': { backgroundPosition:'200% 0' } },
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        * { font-family: 'Vazirmatn', sans-serif; }
+        .font-inter { font-family: 'Inter', sans-serif; }
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #F5F0E8; }
+        ::-webkit-scrollbar-thumb { background: #D4A574; border-radius: 3px; }
+        .dark ::-webkit-scrollbar-track { background: #1A1D23; }
+        .dark ::-webkit-scrollbar-thumb { background: #2D5F3F; }
+        .honeycomb-bg {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
+        }
+        .leaf-pattern::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5C30 5 45 20 45 35C45 43.28 38.28 50 30 50C21.72 50 15 43.28 15 35C15 20 30 5 30 5Z' fill='none' stroke='%232D5F3F' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
+            pointer-events: none;
+        }
+        .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+        .product-card:hover .product-img { transform: scale(1.08); }
+        .product-card:hover .quick-actions { opacity:1; transform:translateY(0); }
+        .quick-actions { opacity:0; transform:translateY(10px); transition: all 0.3s ease; }
+        .product-img { transition: transform 0.5s ease; }
+        .tab-active { color: #2D5F3F; border-color: #2D5F3F; }
+        .dark .tab-active { color: #6fb88a; border-color: #6fb88a; }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; background:#2D5F3F; border-radius:50%; cursor:pointer; border:2px solid #fff; }
+        .dark input[type="range"]::-webkit-slider-thumb { background:#6fb88a; border-color:#22262E; }
+        .search-overlay { backdrop-filter: blur(8px); }
+        .cart-badge { animation: pulseSoft 2s ease-in-out infinite; }
+        .nav-link::after { content:''; display:block; width:0; height:2px; background:#2D5F3F; transition:width 0.3s ease; }
+        .dark .nav-link::after { background:#6fb88a; }
+        .nav-link:hover::after { width:100%; }
+        .toast { animation: slideUp 0.4s ease-out forwards; }
+        @media (max-width: 767px) {
+            .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
+        }
+        .zoom-lens { cursor: zoom-in; }
+        .gallery-thumb.active { border-color: #2D5F3F; }
+        .dark .gallery-thumb.active { border-color: #6fb88a; }
+        .filter-checkbox:checked { background-color: #2D5F3F; border-color: #2D5F3F; }
+        .dark .filter-checkbox:checked { background-color: #6fb88a; border-color: #6fb88a; }
+        .checkout-step.active { background: #2D5F3F; color: white; }
+        .dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
+        .checkout-step.done { background: #2D5F3F; color: white; }
+    </style>
+</head>
+<body class="bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300">
+
+<!-- Toast Container -->
+<div id="toast-container" class="fixed top-24 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2"></div>
+
+<!-- Search Overlay -->
+<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 search-overlay hidden" onclick="closeSearch()">
+    <div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
+        <div class="bg-white dark:bg-dark-card rounded-2xl shadow-2xl p-6">
+            <div class="flex items-center gap-3 border-b border-cream-200 dark:border-dark-border pb-4">
+                <iconify-icon icon="lucide:search" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                <input id="search-input" type="text" placeholder="جستجو در محصولات..." 
+                    class="flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted"
+                    oninput="handleSearch(this.value)">
+                <button onclick="closeSearch()" class="text-cream-400 hover:text-earth-400 dark:text-dark-muted">
+                    <iconify-icon icon="lucide:x" width="22"></iconify-icon>
+                </button>
+            </div>
+            <div id="search-results" class="pt-4 max-h-80 overflow-y-auto"></div>
+            <div id="search-suggestions" class="pt-4">
+                <p class="text-sm text-cream-500 dark:text-dark-muted mb-3">جستجوهای پرطرفدار</p>
+                <div class="flex flex-wrap gap-2">
+                    <button onclick="document.getElementById('search-input').value='عسل';handleSearch('عسل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">عسل طبیعی</button>
+                    <button onclick="document.getElementById('search-input').value='ارده';handleSearch('ارده')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">ارده سنتی</button>
+                    <button onclick="document.getElementById('search-input').value='سرکه';handleSearch('سرکه')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">سرکه انگور</button>
+                    <button onclick="document.getElementById('search-input').value='چای';handleSearch('چای')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">دمنوش گیاهی</button>
+                    <button onclick="document.getElementById('search-input').value='آجیل';handleSearch('آجیل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">آجیل مخلوط</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Cart Drawer -->
+<div id="cart-drawer" class="fixed inset-0 z-[80] hidden">
+    <div class="absolute inset-0 bg-black/50" onclick="closeCart()"></div>
+    <div class="absolute top-0 left-0 bottom-0 w-full max-w-md bg-white dark:bg-dark-card shadow-2xl transform transition-transform duration-300" id="cart-panel">
+        <div class="flex flex-col h-full">
+            <div class="flex items-center justify-between p-5 border-b border-cream-200 dark:border-dark-border">
+                <h3 class="text-lg font-bold">سبد خرید (<span id="cart-drawer-count">0</span>)</h3>
+                <button onclick="closeCart()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition">
+                    <iconify-icon icon="lucide:x" width="20"></iconify-icon>
+                </button>
+            </div>
+            <div id="cart-drawer-items" class="flex-1 overflow-y-auto p-5">
+                <div id="cart-empty" class="flex flex-col items-center justify-center h-full text-center">
+                    <iconify-icon icon="lucide:shopping-bag" width="64" class="text-cream-400 dark:text-dark-muted mb-4"></iconify-icon>
+                    <p class="text-cream-500 dark:text-dark-muted mb-4">سبد خرید شما خالی است</p>
+                    <button onclick="closeCart()" class="px-6 py-2.5 bg-forest-500 text-white rounded-xl text-sm hover:bg-forest-600 transition">مشاهده محصولات</button>
+                </div>
+                <div id="cart-items-list" class="hidden space-y-4"></div>
+            </div>
+            <div id="cart-drawer-footer" class="hidden border-t border-cream-200 dark:border-dark-border p-5 space-y-3">
+                <div class="flex justify-between items-center">
+                    <span class="text-cream-500 dark:text-dark-muted">جمع کل</span>
+                    <span id="cart-drawer-total" class="text-lg font-bold text-forest-500 dark:text-forest-300"></span>
+                </div>
+                <button onclick="goToCheckout()" class="w-full py-3.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition flex items-center justify-center gap-2">
+                    <span>تکمیل خرید</span>
+                    <iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
+                </button>
+                <button onclick="closeCart()" class="w-full py-2.5 text-sm text-cream-500 dark:text-dark-muted hover:text-earth-400 transition">ادامه خرید</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
+    <div class="absolute inset-0 bg-black/50" onclick="closeMobileMenu()"></div>
+    <div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-dark-card shadow-2xl overflow-y-auto" id="mobile-menu-panel">
+        <div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
+            <div class="flex items-center gap-2">
+                <div class="w-9 h-9 bg-forest-500 rounded-xl flex items-center justify-center">
+                    <iconify-icon icon="lucide:leaf" width="18" class="text-white"></iconify-icon>
+                </div>
+                <span class="font-bold text-lg">مطیب</span>
+            </div>
+            <button onclick="closeMobileMenu()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition">
+                <iconify-icon icon="lucide:x" width="20"></iconify-icon>
+            </button>
+        </div>
+        <nav class="p-4 space-y-1">
+            <a href="#home" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:home" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                <span class="font-medium">صفحه اصلی</span>
+            </a>
+            <a href="#shop" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:store" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                <span class="font-medium">فروشگاه</span>
+            </a>
+            <a href="#about" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:info" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                <span class="font-medium">درباره ما</span>
+            </a>
+            <a href="#blog" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:book-open" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                <span class="font-medium">مجله سلامت</span>
+            </a>
+            <a href="#contact" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:phone" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                <span class="font-medium">تماس با ما</span>
+            </a>
+        </nav>
+        <div class="p-4 border-t border-cream-200 dark:border-dark-border">
+            <div class="flex items-center justify-between px-4 py-2 mb-3">
+                <span class="text-sm text-cream-500 dark:text-dark-muted">حالت تاریک</span>
+                <button onclick="toggleDark()" class="w-12 h-6 bg-cream-200 dark:bg-forest-500 rounded-full relative transition">
+                    <div class="w-5 h-5 bg-white dark:bg-dark-bg rounded-full absolute top-0.5 right-0.5 dark:right-auto dark:left-0.5 transition-all shadow"></div>
+                </button>
+            </div>
+            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:user" width="20" class="text-honey-400"></iconify-icon>
+                <span class="font-medium">حساب کاربری</span>
+            </a>
+            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
+                <iconify-icon icon="lucide:heart" width="20" class="text-red-400"></iconify-icon>
+                <span class="font-medium">علاقه‌مندی‌ها</span>
+            </a>
+        </div>
+    </div>
+</div>
+
+<!-- ===== HEADER ===== -->
+<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-cream-100/80 dark:bg-dark-bg/80 backdrop-blur-xl border-b border-cream-200/50 dark:border-dark-border/50">
+    <!-- Top Bar -->
+    <div class="hidden md:block bg-forest-500 dark:bg-forest-700 text-white text-xs py-2">
+        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
+            <div class="flex items-center gap-4">
+                <span class="flex items-center gap-1"><iconify-icon icon="lucide:truck" width="14"></iconify-icon> ارسال رایگان بالای ۵۰۰ هزار تومان</span>
+                <span class="w-px h-3 bg-white/30"></span>
+                <span class="flex items-center gap-1"><iconify-icon icon="lucide:shield-check" width="14"></iconify-icon> ضمانت اصالت کالا</span>
+            </div>
+            <div class="flex items-center gap-4">
+                <a href="tel:02112345678" class="flex items-center gap-1 hover:opacity-80 transition"><iconify-icon icon="lucide:phone" width="14"></iconify-icon> ۰۲۱-۱۲۳۴۵۶۷۸</a>
+                <span class="w-px h-3 bg-white/30"></span>
+                <button onclick="toggleLang()" class="font-inter text-xs hover:opacity-80 transition">English</button>
+            </div>
+        </div>
+    </div>
+    <!-- Main Nav -->
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="flex items-center justify-between h-16 md:h-20">
+            <!-- Mobile Menu Toggle -->
+            <button onclick="openMobileMenu()" class="md:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition">
+                <iconify-icon icon="lucide:menu" width="22"></iconify-icon>
+            </button>
+            <!-- Logo -->
+            <a href="#home" class="flex items-center gap-2.5">
+                <div class="w-10 h-10 bg-forest-500 rounded-2xl flex items-center justify-center shadow-lg shadow-forest-500/20">
+                    <iconify-icon icon="lucide:leaf" width="20" class="text-white"></iconify-icon>
+                </div>
+                <div>
+                    <span class="font-extrabold text-xl text-forest-500 dark:text-forest-300 leading-none">مطیب</span>
+                    <span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
+                </div>
+            </a>
+            <!-- Desktop Nav -->
+            <nav class="hidden md:flex items-center gap-8">
+                <a href="#home" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">صفحه اصلی</a>
+                <a href="#shop" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">فروشگاه</a>
+                <a href="#about" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">درباره ما</a>
+                <a href="#blog" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">مجله سلامت</a>
+                <a href="#contact" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">تماس</a>
+            </nav>
+            <!-- Actions -->
+            <div class="flex items-center gap-2">
+                <button onclick="openSearch()" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="جستجو">
+                    <iconify-icon icon="lucide:search" width="20"></iconify-icon>
+                </button>
+                <button onclick="toggleDark()" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حالت تاریک">
+                    <iconify-icon icon="lucide:moon" width="20" class="dark:hidden"></iconify-icon>
+                    <iconify-icon icon="lucide:sun" width="20" class="hidden dark:block text-honey-400"></iconify-icon>
+                </button>
+                <button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="علاقه‌مندی">
+                    <iconify-icon icon="lucide:heart" width="20"></iconify-icon>
+                </button>
+                <button onclick="openCart()" class="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="سبد خرید">
+                    <iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
+                    <span id="cart-count" class="cart-badge absolute -top-0.5 -left-0.5 w-5 h-5 bg-honey-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center hidden">0</span>
+                </button>
+                <button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حساب کاربری">
+                    <iconify-icon icon="lucide:user" width="20"></iconify-icon>
+                </button>
+            </div>
+        </div>
+    </div>
+</header>
+
+<!-- ===== MAIN CONTENT ===== -->
+<main class="pt-16 md:pt-[104px]">
+
+<!-- ===== HERO SECTION ===== -->
+<section id="home" class="relative overflow-hidden honeycomb-bg leaf-pattern">
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
+        <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
+            <div class="text-center md:text-right animate-slide-up">
+                <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-forest-50 dark:bg-forest-900/30 rounded-full mb-6">
+                    <span class="w-2 h-2 bg-forest-500 dark:bg-forest-300 rounded-full animate-pulse-soft"></span>
+                    <span class="text-xs font-medium text-forest-500 dark:text-forest-300">محصولات ۱۰۰٪ ارگانیک و طبیعی</span>
+                </div>
+                <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1] mb-6">
+                    <span class="text-earth-400 dark:text-dark-text">طعم</span>
+                    <span class="text-forest-500 dark:text-forest-300"> واقعی</span>
+                    <br>
+                    <span class="text-honey-400">طبیعت</span>
+                </h1>
+                <p class="text-cream-500 dark:text-dark-muted text-base md:text-lg leading-relaxed mb-8 max-w-md mx-auto md:mx-0">
+                    از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است. با طعم‌های اصیل و سلامت واقعی آشنا شوید.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
+                    <a href="#shop" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-semibold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25">
+                        <span>مشاهده محصولات</span>
+                        <iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
+                    </a>
+                    <a href="#about" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-white/60 dark:bg-dark-card/60 border border-cream-200 dark:border-dark-border rounded-2xl font-semibold hover:bg-white dark:hover:bg-dark-card hover:-translate-y-0.5 transition-all backdrop-blur">
+                        <span>داستان مطیب</span>
+                        <iconify-icon icon="lucide:play-circle" width="18" class="text-honey-400"></iconify-icon>
+                    </a>
+                </div>
+                <!-- Trust Stats -->
+                <div class="flex items-center gap-6 mt-10 justify-center md:justify-start">
+                    <div class="text-center">
+                        <div class="text-2xl font-bold text-forest-500 dark:text-forest-300">+۲۵۰</div>
+                        <div class="text-xs text-cream-500 dark:text-dark-muted">محصول ارگانیک</div>
+                    </div>
+                    <div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>
+                    <div class="text-center">
+                        <div class="text-2xl font-bold text-forest-500 dark:text-forest-300">+۱۵K</div>
+                        <div class="text-xs text-cream-500 dark:text-dark-muted">مشتری راضی</div>
+                    </div>
+                    <div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>
+                    <div class="text-center">
+                        <div class="text-2xl font-bold text-forest-500 dark:text-forest-300">۳۱</div>
+                        <div class="text-xs text-cream-500 dark:text-dark-muted">استان تحت پوشش</div>
+                    </div>
+                </div>
+            </div>
+            <!-- Hero Image -->
+            <div class="relative animate-fade-in">
+                <div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
+                    <img src="https://picsum.photos/seed/organic-honey-jar/700/600.jpg" alt="محصولات ارگانیک مطیب" class="w-full h-[350px] md:h-[500px] object-cover">
+                    <div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
+                </div>
+                <!-- Floating Card 1 -->
+                <div class="absolute -bottom-4 -right-4 md:bottom-8 md:-right-8 bg-white dark:bg-dark-card rounded-2xl p-4 shadow-xl animate-float">
+                    <div class="flex items-center gap-3">
+                        <div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center">
+                            <iconify-icon icon="lucide:award" width="24" class="text-honey-400"></iconify-icon>
+                        </div>
+                        <div>
+                            <div class="font-bold text-sm">گواهی ارگانیک</div>
+                            <div class="text-xs text-cream-500 dark:text-dark-muted">تأیید شده توسط سازمان غذا</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Floating Card 2 -->
+                <div class="absolute -top-4 -left-4 md:top-8 md:-left-8 bg-white dark:bg-dark-card rounded-2xl p-3 shadow-xl animate-float" style="animation-delay:1s">
+                    <div class="flex items-center gap-2">
+                        <div class="flex -space-x-2 space-x-reverse">
+                            <div class="w-8 h-8 rounded-full bg-forest-100 dark:bg-forest-800 flex items-center justify-center text-xs font-bold text-forest-500">م</div>
+                            <div class="w-8 h-8 rounded-full bg-honey-100 dark:bg-honey-800 flex items-center justify-center text-xs font-bold text-honey-400">ع</div>
+                            <div class="w-8 h-8 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-xs font-bold text-earth-400">ز</div>
+                        </div>
+                        <div>
+                            <div class="flex text-honey-400 text-xs">★★★★★</div>
+                            <div class="text-[10px] text-cream-500 dark:text-dark-muted">+۴.۸ از ۵۰۰۰ نظر</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Wave Divider -->
+    <div class="absolute bottom-0 left-0 right-0">
+        <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
+            <path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" class="fill-cream-100 dark:fill-dark-bg"/>
+        </svg>
+    </div>
+</section>
+
+<!-- ===== CATEGORIES SECTION ===== -->
+<section class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="text-center mb-12">
+            <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CATEGORIES</span>
+            <h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-3">دسته‌بندی محصولات</h2>
+            <p class="text-cream-500 dark:text-dark-muted max-w-lg mx-auto">از عسل‌های کوهستان تا دمنوش‌های گیاهی، بهترین‌های طبیعت را کشف کنید</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+            <a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
+                <div class="w-16 h-16 mx-auto mb-4 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <iconify-icon icon="lucide:hexagon" width="32" class="text-honey-400"></iconify-icon>
+                </div>
+                <h3 class="font-bold text-sm mb-1">عسل طبیعی</h3>
+                <span class="text-xs text-cream-500 dark:text-dark-muted">۲۴ محصول</span>
+            </a>
+            <a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
+                <div class="w-16 h-16 mx-auto mb-4 bg-forest-50 dark:bg-forest-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <iconify-icon icon="lucide:droplets" width="32" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                </div>
+                <h3 class="font-bold text-sm mb-1">ارده و حلوا</h3>
+                <span class="text-xs text-cream-500 dark:text-dark-muted">۱۸ محصول</span>
+            </a>
+            <a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
+                <div class="w-16 h-16 mx-auto mb-4 bg-red-50 dark:bg-red-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <iconify-icon icon="lucide:flask-round" width="32" class="text-red-400"></iconify-icon>
+                </div>
+                <h3 class="font-bold text-sm mb-1">سرکه و ترشی</h3>
+                <span class="text-xs text-cream-500 dark:text-dark-muted">۱۲ محصول</span>
+            </a>
+            <a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
+                <div class="w-16 h-16 mx-auto mb-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <iconify-icon icon="lucide:cup-soda" width="32" class="text-emerald-500"></iconify-icon>
+                </div>
+                <h3 class="font-bold text-sm mb-1">دمنوش گیاهی</h3>
+                <span class="text-xs text-cream-500 dark:text-dark-muted">۳۲ محصول</span>
+            </a>
+            <a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50 col-span-2 md:col-span-1">
+                <div class="w-16 h-16 mx-auto mb-4 bg-amber-50 dark:bg-amber-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <iconify-icon icon="lucide:nut" width="32" class="text-amber-500"></iconify-icon>
+                </div>
+                <h3 class="font-bold text-sm mb-1">خشکبار و آجیل</h3>
+                <span class="text-xs text-cream-500 dark:text-dark-muted">۴۵ محصول</span>
+            </a>
+        </div>
+    </div>
+</section>
+
+<!-- ===== BESTSELLERS SECTION ===== -->
+<section id="shop" class="py-16 md:py-24 bg-white dark:bg-dark-card">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="flex items-end justify-between mb-10">
+            <div>
+                <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BESTSELLERS</span>
+                <h2 class="text-3xl md:text-4xl font-extrabold mt-2">پرفروش‌ترین‌ها</h2>
+            </div>
+            <a href="#shop" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
+                <span>مشاهده همه</span>
+                <iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
+            </a>
+        </div>
+        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6" id="products-grid">
+            <!-- Products injected by JS -->
+        </div>
+    </div>
+</section>
+
+<!-- ===== BRAND STORY SECTION ===== -->
+<section id="about" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden leaf-pattern">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div class="relative">
+                <div class="rounded-3xl overflow-hidden shadow-xl">
+                    <img src="https://picsum.photos/seed/organic-farm-nature/600/500.jpg" alt="مزرعه ارگانیک" class="w-full h-[350px] md:h-[450px] object-cover">
+                </div>
+                <div class="absolute -bottom-6 -left-6 bg-white dark:bg-dark-card rounded-2xl p-5 shadow-xl max-w-[200px]">
+                    <div class="text-3xl font-extrabold text-forest-500 dark:text-forest-300">+۱۲</div>
+                    <div class="text-sm text-earth-400 dark:text-dark-text font-medium">سال تجربه</div>
+                    <div class="text-xs text-cream-500 dark:text-dark-muted mt-1">در تولید محصولات ارگانیک</div>
+                </div>
+            </div>
+            <div>
+                <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
+                <h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-6">داستان مطیب،<br>از طبیعت تا سفره شما</h2>
+                <p class="text-cream-500 dark:text-dark-muted leading-relaxed mb-6">
+                    مطیب از سال ۱۳۹۰ با هدف عرضه محصولات ارگانیک و طبیعی ایرانی آغاز به کار کرد. ما مستقیماً از زنبورداران، کشاورزان و تولیدکنندگان سنتی سراسر ایران خرید می‌کنیم و با حفظ کیفیت اولیه، آنها را به سفره خانواده‌های ایرانی می‌رسانیم.
+                </p>
+                <div class="grid grid-cols-2 gap-4 mb-8">
+                    <div class="flex items-start gap-3">
+                        <div class="w-10 h-10 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <iconify-icon icon="lucide:sprout" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        </div>
+                        <div>
+                            <div class="font-bold text-sm mb-0.5">کشت ارگانیک</div>
+                            <div class="text-xs text-cream-500 dark:text-dark-muted">بدون سم و کود شیمیایی</div>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-10 h-10 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <iconify-icon icon="lucide:shield-check" width="20" class="text-honey-400"></iconify-icon>
+                        </div>
+                        <div>
+                            <div class="font-bold text-sm mb-0.5">تضمین اصالت</div>
+                            <div class="text-xs text-cream-500 dark:text-dark-muted">آزمایشگاهی و مستند</div>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-10 h-10 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <iconify-icon icon="lucide:recycle" width="20" class="text-emerald-500"></iconify-icon>
+                        </div>
+                        <div>
+                            <div class="font-bold text-sm mb-0.5">بسته‌بندی سبز</div>
+                            <div class="text-xs text-cream-500 dark:text-dark-muted">دوست‌دار محیط زیست</div>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <iconify-icon icon="lucide:map-pin" width="20" class="text-blue-500"></iconify-icon>
+                        </div>
+                        <div>
+                            <div class="font-bold text-sm mb-0.5">تأمین محلی</div>
+                            <div class="text-xs text-cream-500 dark:text-dark-muted">حمایت از کشاورز ایرانی</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Certification Badges -->
+                <div class="flex items-center gap-3 flex-wrap">
+                    <div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
+                        <iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        <span>گواهی ارگانیک ایران</span>
+                    </div>
+                    <div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
+                        <iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        <span>استاندارد ملی بهداشت</span>
+                    </div>
+                    <div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
+                        <iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        <span>نماد اعتماد الکترونیکی</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== PRODUCT DETAIL SECTION (Demo) ===== -->
+<section id="product-detail" class="py-16 md:py-24 bg-white dark:bg-dark-card">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="text-center mb-10">
+            <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">PRODUCT DETAIL</span>
+            <h2 class="text-3xl md:text-4xl font-extrabold mt-2">نمونه صفحه محصول</h2>
+        </div>
+        <div class="grid md:grid-cols-2 gap-8 md:gap-12">
+            <!-- Gallery -->
+            <div>
+                <div class="relative rounded-2xl overflow-hidden bg-cream-50 dark:bg-dark-bg mb-3">
+                    <img id="main-product-img" src="https://picsum.photos/seed/honey-golden-jar/600/600.jpg" alt="عسل طبیعی کوهستان" class="w-full h-[350px] md:h-[450px] object-cover zoom-lens">
+                    <div class="absolute top-3 right-3 flex flex-col gap-2">
+                        <span class="px-3 py-1 bg-forest-500 text-white text-xs rounded-full font-medium">ارگانیک</span>
+                        <span class="px-3 py-1 bg-red-500 text-white text-xs rounded-full font-medium">۲۰٪ تخفیف</span>
+                    </div>
+                    <button onclick="toggleWishlist(this)" class="absolute top-3 left-3 w-10 h-10 bg-white/80 dark:bg-dark-card/80 backdrop-blur rounded-full flex items-center justify-center hover:scale-110 transition">
+                        <iconify-icon icon="lucide:heart" width="20" class="text-cream-500"></iconify-icon>
+                    </button>
+                </div>
+                <div class="flex gap-2 overflow-x-auto pb-1">
+                    <button onclick="changeImage('honey-golden-jar', this)" class="gallery-thumb active w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
+                        <img src="https://picsum.photos/seed/honey-golden-jar/200/200.jpg" class="w-full h-full object-cover">
+                    </button>
+                    <button onclick="changeImage('honey-drip-spoon', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
+                        <img src="https://picsum.photos/seed/honey-drip-spoon/200/200.jpg" class="w-full h-full object-cover">
+                    </button>
+                    <button onclick="changeImage('honey-label-detail', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
+                        <img src="https://picsum.photos/seed/honey-label-detail/200/200.jpg" class="w-full h-full object-cover">
+                    </button>
+                    <button onclick="changeImage('honey-breakfast-table', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
+                        <img src="https://picsum.photos/seed/honey-breakfast-table/200/200.jpg" class="w-full h-full object-cover">
+                    </button>
+                </div>
+            </div>
+            <!-- Product Info -->
+            <div>
+                <div class="flex items-center gap-2 mb-3">
+                    <span class="text-xs text-cream-500 dark:text-dark-muted">برند: مطیب</span>
+                    <span class="w-1 h-1 bg-cream-400 rounded-full"></span>
+                    <span class="flex items-center gap-0.5 text-honey-400 text-xs">★★★★★ <span class="text-cream-500 dark:text-dark-muted mr-1">(۱۲۸ نظر)</span></span>
+                </div>
+                <h1 class="text-2xl md:text-3xl font-extrabold mb-3">عسل طبیعی کوهستان مطیب</h1>
+                <p class="text-cream-500 dark:text-dark-muted text-sm leading-relaxed mb-5">عسل خالص و طبیعی جمع‌آوری شده از دامنه‌های زاگرس، بدون هیچ‌گونه افزودنی و شکر. غنی از آنتی‌اکسیدان و مواد مغذی.</p>
+                
+                <!-- Stock -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
+                    <span class="text-sm text-emerald-600 dark:text-emerald-400 font-medium">موجود در انبار</span>
+                </div>
+
+                <!-- Weight Selector -->
+                <div class="mb-5">
+                    <label class="text-sm font-bold mb-3 block">وزن محصول:</label>
+                    <div class="flex gap-2 flex-wrap">
+                        <button onclick="selectWeight(this, 185000)" class="weight-btn px-5 py-2.5 border-2 border-cream-200 dark:border-dark-border rounded-xl text-sm font-medium hover:border-forest-500 dark:hover:border-forest-300 transition">۲۵۰ گرم</button>
+                        <button onclick="selectWeight(this, 295000)" class="weight-btn px-5 py-2.5 border-2 border-forest-500 dark:border-forest-300 bg-forest-50 dark:bg-forest-900/30 rounded-xl text-sm font-medium text-forest-500 dark:text-forest-300 transition active">۵۰۰ گرم</button>
+                        <button onclick="selectWeight(this, 495000)" class="weight-btn px-5 py-2.5 border-2 border-cream-200 dark:border-dark-border rounded-xl text-sm font-medium hover:border-forest-500 dark:hover:border-forest-300 transition">۱ کیلوگرم</button>
+                    </div>
+                </div>
+
+                <!-- Price -->
+                <div class="flex items-end gap-3 mb-6">
+                    <span id="product-price" class="text-3xl font-extrabold text-forest-500 dark:text-forest-300">۲۹۵,۰۰۰</span>
+                    <span class="text-lg text-cream-500 dark:text-dark-muted">تومان</span>
+                    <span class="line-through text-sm text-cream-400 dark:text-dark-muted">۳۶۹,۰۰۰</span>
+                </div>
+
+                <!-- Quantity -->
+                <div class="flex items-center gap-4 mb-6">
+                    <label class="text-sm font-bold">تعداد:</label>
+                    <div class="flex items-center border-2 border-cream-200 dark:border-dark-border rounded-xl overflow-hidden">
+                        <button onclick="changeQty(-1)" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
+                            <iconify-icon icon="lucide:minus" width="16"></iconify-icon>
+                        </button>
+                        <span id="product-qty" class="w-12 h-10 flex items-center justify-center font-bold text-sm border-x-2 border-cream-200 dark:border-dark-border">۱</span>
+                        <button onclick="changeQty(1)" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
+                            <iconify-icon icon="lucide:plus" width="16"></iconify-icon>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Add to Cart -->
+                <div class="flex gap-3 mb-6">
+                    <button onclick="addToCartDetail()" class="flex-1 py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25 flex items-center justify-center gap-2">
+                        <iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
+                        <span>افزودن به سبد خرید</span>
+                    </button>
+                    <button onclick="toggleWishlist(this)" class="w-14 h-14 border-2 border-cream-200 dark:border-dark-border rounded-2xl flex items-center justify-center hover:border-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
+                        <iconify-icon icon="lucide:heart" width="22" class="text-cream-400"></iconify-icon>
+                    </button>
+                </div>
+
+                <!-- Delivery Info -->
+                <div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 space-y-3">
+                    <div class="flex items-center gap-3 text-sm">
+                        <iconify-icon icon="lucide:truck" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        <span>ارسال به تمامی نقاط کشور</span>
+                    </div>
+                    <div class="flex items-center gap-3 text-sm">
+                        <iconify-icon icon="lucide:rotate-ccw" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        <span>ضمانت بازگشت ۷ روزه</span>
+                    </div>
+                    <div class="flex items-center gap-3 text-sm">
+                        <iconify-icon icon="lucide:shield-check" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        <span>ضمانت اصالت و کیفیت</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Product Tabs -->
+        <div class="mt-12 border-t border-cream-200 dark:border-dark-border pt-8">
+            <div class="flex gap-6 border-b border-cream-200 dark:border-dark-border mb-6 overflow-x-auto">
+                <button onclick="switchTab('desc', this)" class="tab-btn tab-active pb-3 text-sm font-bold border-b-2 border-transparent whitespace-nowrap transition">توضیحات</button>
+                <button onclick="switchTab('ingredients', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">ترکیبات</button>
+                <button onclick="switchTab('benefits', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">خواص سلامت</button>
+                <button onclick="switchTab('reviews', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">نظرات (۱۲۸)</button>
+            </div>
+            <div id="tab-desc" class="tab-content">
+                <div class="max-w-3xl space-y-4 text-cream-500 dark:text-dark-muted leading-relaxed text-sm">
+                    <p>عسل طبیعی کوهستان مطیب از گل‌های وحشی دامنه‌های زاگرس مرکزی تولید شده و بدون هیچ‌گونه فرآیند حرارتی یا افزودنی عرضه می‌شود. این عسل به روش سنتی و با رعایت اصول ارگانیک برداشت شده است.</p>
+                    <p>رنگ طلایی این عسل نشان‌دهنده غنای آن از آنتی‌اکسیدان‌ها و مواد معدنی است. طعم ملایم و مطبوع آن مناسب مصرف روزانه برای تمام اعضای خانواده است.</p>
+                </div>
+            </div>
+            <div id="tab-ingredients" class="tab-content hidden">
+                <div class="max-w-3xl">
+                    <p class="text-sm text-cream-500 dark:text-dark-muted mb-4">ترکیبات این محصول:</p>
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+                        <div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">قند طبیعی</span><div class="font-bold text-sm mt-1">۸۲ گرم</div></div>
+                        <div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">آب</span><div class="font-bold text-sm mt-1">۱۷ گرم</div></div>
+                        <div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">پروتئین</span><div class="font-bold text-sm mt-1">۰.۳ گرم</div></div>
+                        <div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">آهن</span><div class="font-bold text-sm mt-1">۰.۴۲ mg</div></div>
+                        <div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">پتاسیم</span><div class="font-bold text-sm mt-1">۵۲ mg</div></div>
+                        <div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">ویتامین C</span><div class="font-bold text-sm mt-1">۰.۵ mg</div></div>
+                    </div>
+                </div>
+            </div>
+            <div id="tab-benefits" class="tab-content hidden">
+                <div class="max-w-3xl grid md:grid-cols-2 gap-4">
+                    <div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:heart-pulse" width="20" class="text-red-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">تقویت سیستم ایمنی</div><p class="text-xs text-cream-500 dark:text-dark-muted">آنتی‌اکسیدان‌های طبیعی عسل به تقویت سیستم دفاعی بدن کمک می‌کنند.</p></div></div>
+                    <div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:flame" width="20" class="text-orange-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">منبع انرژی طبیعی</div><p class="text-xs text-cream-500 dark:text-dark-muted">قندهای طبیعی عسل انرژی پایدار و سالمی فراهم می‌کنند.</p></div></div>
+                    <div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:stomach" width="20" class="text-green-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">بهبود گوارش</div><p class="text-xs text-cream-500 dark:text-dark-muted">عسل طبیعی به سلامت دستگاه گوارش و تنظیم معده کمک می‌کند.</p></div></div>
+                    <div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:sparkles" width="20" class="text-purple-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">مراقبت پوست</div><p class="text-xs text-cream-500 dark:text-dark-muted">خواص ضدباکتریایی عسل برای مراقبت از پوست بسیار مفید است.</p></div></div>
+                </div>
+            </div>
+            <div id="tab-reviews" class="tab-content hidden">
+                <div class="max-w-3xl space-y-4">
+                    <!-- Review 1 -->
+                    <div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-5">
+                        <div class="flex items-center justify-between mb-3">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 bg-forest-100 dark:bg-forest-800 rounded-full flex items-center justify-center font-bold text-sm text-forest-500">م‌ر</div>
+                                <div><div class="font-bold text-sm">مریم رحیمی</div><div class="text-xs text-cream-500 dark:text-dark-muted">۱۴۰۳/۰۸/۱۵</div></div>
+                            </div>
+                            <div class="flex text-honey-400 text-sm">★★★★★</div>
+                        </div>
+                        <p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed">واقعاً عسل فوق‌العاده‌ای بود. طعم و بوی طبیعی داره و کاملاً با عسل‌های معمولی فرق داره. حتماً دوباره سفارش میدم.</p>
+                    </div>
+                    <!-- Review 2 -->
+                    <div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-5">
+                        <div class="flex items-center justify-between mb-3">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 bg-honey-100 dark:bg-honey-800 rounded-full flex items-center justify-center font-bold text-sm text-honey-400">ع‌م</div>
+                                <div><div class="font-bold text-sm">علی محمدی</div><div class="text-xs text-cream-500 dark:text-dark-muted">۱۴۰۳/۰۸/۱۰</div></div>
+                            </div>
+                            <div class="flex text-honey-400 text-sm">★★★★<span class="text-cream-300 dark:text-dark-muted">★</span></div>
+                        </div>
+                        <p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed">کیفیت خوبی داره ولی بسته‌بندی می‌تونه بهتر باشه. در مجموع راضی هستم.</p>
+                    </div>
+                    <button class="w-full py-3 border-2 border-dashed border-cream-200 dark:border-dark-border rounded-2xl text-sm font-medium text-cream-500 dark:text-dark-muted hover:border-forest-500 hover:text-forest-500 dark:hover:border-forest-300 dark:hover:text-forest-300 transition">ثبت نظر جدید</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Frequently Bought Together -->
+        <div class="mt-16">
+            <h3 class="text-xl font-bold mb-6">معمولاً با هم خریداری می‌شوند</h3>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50">
+                    <img src="https://picsum.photos/seed/ardeh-sesame/300/300.jpg" class="product-img w-full h-32 object-cover rounded-xl mb-3">
+                    <h4 class="font-bold text-sm line-clamp-2">ارده کنجد سنتی</h4>
+                    <div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2">۱۸۵,۰۰۰ تومان</div>
+                </div>
+                <div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50">
+                    <img src="https://picsum.photos/seed/herbal-tea-mint/300/300.jpg" class="product-img w-full h-32 object-cover rounded-xl mb-3">
+                    <h4 class="font-bold text-sm line-clamp-2">دمنوش نعناع کوهی</h4>
+                    <div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2">۸۹,۰۰۰ تومان</div>
+                </div>
+                <div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50">
+                    <img src="https://picsum.photos/seed/grape-vinegar-bottle/300/300.jpg" class="product-img w-full h-32 object-cover rounded-xl mb-3">
+                    <h4 class="font-bold text-sm line-clamp-2">سرکه انگور طبیعی</h4>
+                    <div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2">۱۲۵,۰۰۰ تومان</div>
+                </div>
+                <div class="flex items-center justify-center">
+                    <button class="px-6 py-3 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition">افزودن همه</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== TESTIMONIALS SECTION ===== -->
+<section class="py-16 md:py-24 bg-forest-500 dark:bg-forest-800 relative overflow-hidden">
+    <div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
+    <div class="max-w-7xl mx-auto px-4 md:px-6 relative">
+        <div class="text-center mb-12">
+            <span class="text-xs font-medium text-honey-300 tracking-wider font-inter">TESTIMONIALS</span>
+            <h2 class="text-3xl md:text-4xl font-extrabold mt-2 text-white">نظرات مشتریان ما</h2>
+        </div>
+        <div class="grid md:grid-cols-3 gap-6">
+            <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
+                <div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
+                <p class="text-white/90 text-sm leading-relaxed mb-5">«از وقتی عسل مطیب استفاده می‌کنیم، دیگه هیچ عسلی برامون قابل قبول نیست. طعم واقعی عسل رو با مطیب شناختیم.»</p>
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white">ز‌ک</div>
+                    <div><div class="font-bold text-sm text-white">زهرا کریمی</div><div class="text-xs text-white/60">تهران</div></div>
+                </div>
+            </div>
+            <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
+                <div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
+                <p class="text-white/90 text-sm leading-relaxed mb-5">«ارده و شیره‌های مطیب کیفیت استثنایی دارن. بسته‌بندی هم بسیار تمیز و بهداشتیه. برای صبحانه عالیه.»</p>
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white">ح‌ن</div>
+                    <div><div class="font-bold text-sm text-white">حسین نوری</div><div class="text-xs text-white/60">اصفهان</div></div>
+                </div>
+            </div>
+            <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
+                <div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
+                <p class="text-white/90 text-sm leading-relaxed mb-5">«دمنوش‌های گیاهی مطیب واقعاً طبیعین. برخلاف خیلی از برندها، عطر و طعم واقعی گیاهان رو حس می‌کنی.»</p>
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white">ف‌م</div>
+                    <div><div class="font-bold text-sm text-white">فاطمه موسوی</div><div class="text-xs text-white/60">شیراز</div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== BLOG SECTION ===== -->
+<section id="blog" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="flex items-end justify-between mb-10">
+            <div>
+                <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BLOG</span>
+                <h2 class="text-3xl md:text-4xl font-extrabold mt-2">مجله سلامت مطیب</h2>
+            </div>
+            <a href="#" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
+                <span>همه مقالات</span>
+                <iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
+            </a>
+        </div>
+        <div class="grid md:grid-cols-3 gap-6">
+            <article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
+                <div class="overflow-hidden h-48"><img src="https://picsum.photos/seed/honey-health-benefits/600/400.jpg" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
+                <div class="p-5">
+                    <div class="flex items-center gap-2 mb-3">
+                        <span class="px-2.5 py-0.5 bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 text-xs rounded-full font-medium">سلامت</span>
+                        <span class="text-xs text-cream-500 dark:text-dark-muted">۱۵ آذر ۱۴۰۳</span>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">۱۰ فایده شگفت‌انگیز عسل طبیعی برای سلامتی</h3>
+                    <p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2">عسل طبیعی یکی از قدیمی‌ترین و مفیدترین مواد غذایی است که خواص بی‌نظیری دارد...</p>
+                </div>
+            </article>
+            <article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
+                <div class="overflow-hidden h-48"><img src="https://picsum.photos/seed/sesame-ardeh-recipe/600/400.jpg" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
+                <div class="p-5">
+                    <div class="flex items-center gap-2 mb-3">
+                        <span class="px-2.5 py-0.5 bg-honey-50 dark:bg-honey-900/30 text-honey-400 text-xs rounded-full font-medium">دستور پخت</span>
+                        <span class="text-xs text-cream-500 dark:text-dark-muted">۱۰ آذر ۱۴۰۳</span>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">طرز تهیه حلوا ارده سنتی خانگی</h3>
+                    <p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2">با ارده کنجد مطیب، حلوا اردهای درست کنید که طعم شیرینی‌فروشی‌ها رو نداره...</p>
+                </div>
+            </article>
+            <article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
+                <div class="overflow-hidden h-48"><img src="https://picsum.photos/seed/organic-lifestyle-tips/600/400.jpg" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
+                <div class="p-5">
+                    <div class="flex items-center gap-2 mb-3">
+                        <span class="px-2.5 py-0.5 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500 text-xs rounded-full font-medium">سبک زندگی</span>
+                        <span class="text-xs text-cream-500 dark:text-dark-muted">۵ آذر ۱۴۰۳</span>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">چگونه زندگی ارگانیک را شروع کنیم؟</h3>
+                    <p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2">گذار به سبک زندگی ارگانیک نیازی به تغییرات بزرگ ندارد. با این قدم‌های ساده شروع کنید...</p>
+                </div>
+            </article>
+        </div>
+    </div>
+</section>
+
+<!-- ===== NEWSLETTER SECTION ===== -->
+<section class="py-16 md:py-20 bg-white dark:bg-dark-card">
+    <div class="max-w-3xl mx-auto px-4 md:px-6 text-center">
+        <div class="w-16 h-16 mx-auto mb-6 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center">
+            <iconify-icon icon="lucide:mail" width="32" class="text-honey-400"></iconify-icon>
+        </div>
+        <h2 class="text-2xl md:text-3xl font-extrabold mb-3">از تخفیف‌ها باخبر شوید</h2>
+        <p class="text-cream-500 dark:text-dark-muted mb-8">با عضویت در خبرنامه، از جدیدترین محصولات و تخفیف‌های ویژه مطلع شوید.</p>
+        <form onsubmit="handleNewsletter(event)" class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
+            <input type="email" id="newsletter-email" placeholder="ایمیل خود را وارد کنید..." required class="flex-1 px-5 py-3.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-2xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+            <button type="submit" class="px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition whitespace-nowrap">عضویت در خبرنامه</button>
+        </form>
+    </div>
+</section>
+
+<!-- ===== TRUST BADGES ===== -->
+<section class="py-12 bg-cream-50 dark:bg-dark-bg border-y border-cream-200 dark:border-dark-border">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
+            <div class="flex flex-col items-center text-center gap-2">
+                <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
+                    <iconify-icon icon="lucide:truck" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                </div>
+                <div class="font-bold text-sm">ارسال سریع</div>
+                <div class="text-xs text-cream-500 dark:text-dark-muted">به سراسر ایران</div>
+            </div>
+            <div class="flex flex-col items-center text-center gap-2">
+                <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
+                    <iconify-icon icon="lucide:shield-check" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                </div>
+                <div class="font-bold text-sm">ضمانت اصالت</div>
+                <div class="text-xs text-cream-500 dark:text-dark-muted">۱۰۰٪ اصل و طبیعی</div>
+            </div>
+            <div class="flex flex-col items-center text-center gap-2">
+                <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
+                    <iconify-icon icon="lucide:credit-card" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                </div>
+                <div class="font-bold text-sm">پرداخت امن</div>
+                <div class="text-xs text-cream-500 dark:text-dark-muted">درگاه‌های معتبر</div>
+            </div>
+            <div class="flex flex-col items-center text-center gap-2">
+                <div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
+                    <iconify-icon icon="lucide:rotate-ccw" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                </div>
+                <div class="font-bold text-sm">بازگشت آسان</div>
+                <div class="text-xs text-cream-500 dark:text-dark-muted">۷ روز ضمانت</div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== CHECKOUT SECTION (Demo) ===== -->
+<section id="checkout" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
+    <div class="max-w-5xl mx-auto px-4 md:px-6">
+        <div class="text-center mb-10">
+            <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CHECKOUT</span>
+            <h2 class="text-3xl md:text-4xl font-extrabold mt-2">نمونه صفحه تسویه حساب</h2>
+        </div>
+        <!-- Progress -->
+        <div class="flex items-center justify-center gap-2 mb-10">
+            <div class="checkout-step active w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold">۱</div>
+            <div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
+            <div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۲</div>
+            <div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
+            <div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۳</div>
+        </div>
+        <div class="grid md:grid-cols-3 gap-6">
+            <div class="md:col-span-2 space-y-6">
+                <!-- Contact Info -->
+                <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
+                    <h3 class="font-bold text-lg mb-5 flex items-center gap-2"><iconify-icon icon="lucide:user" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> اطلاعات خریدار</h3>
+                    <div class="grid md:grid-cols-2 gap-4">
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">نام و نام خانوادگی *</label>
+                            <input type="text" placeholder="مثلاً: علی محمدی" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+                        </div>
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">شماره موبایل *</label>
+                            <input type="tel" placeholder="۰۹۱۲۳۴۵۶۷۸۹" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+                        </div>
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">ایمیل</label>
+                            <input type="email" placeholder="email@example.com" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
+                        </div>
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">کد ملی</label>
+                            <input type="text" placeholder="کد ملی ۱۰ رقمی" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
+                        </div>
+                    </div>
+                </div>
+                <!-- Address -->
+                <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
+                    <h3 class="font-bold text-lg mb-5 flex items-center gap-2"><iconify-icon icon="lucide:map-pin" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> آدرس تحویل</h3>
+                    <div class="grid md:grid-cols-2 gap-4 mb-4">
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">استان *</label>
+                            <select class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition appearance-none">
+                                <option>انتخاب استان...</option>
+                                <option>تهران</option>
+                                <option>اصفهان</option>
+                                <option>فارس</option>
+                                <option>خراسان رضوی</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">شهر *</label>
+                            <select class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition appearance-none">
+                                <option>انتخاب شهر...</option>
+                                <option>تهران</option>
+                                <option>اصفهان</option>
+                                <option>شیراز</option>
+                                <option>مشهد</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">آدرس کامل *</label>
+                        <textarea rows="3" placeholder="خیابان، کوچه، پلاک، واحد..." class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted resize-none"></textarea>
+                    </div>
+                    <div class="grid md:grid-cols-2 gap-4">
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">کد پستی *</label>
+                            <input type="text" placeholder="کد پستی ۱۰ رقمی" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
+                        </div>
+                        <div>
+                            <label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">تلفن ثابت</label>
+                            <input type="tel" placeholder="۰۲۱-۱۲۳۴۵۶۷۸" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
+                        </div>
+                    </div>
+                </div>
+                <!-- Payment -->
+                <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
+                    <h3 class="font-bold text-lg mb-5 flex items-center gap-2"><iconify-icon icon="lucide:credit-card" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> روش پرداخت</h3>
+                    <div class="space-y-3">
+                        <label class="flex items-center gap-3 p-4 border-2 border-forest-500 dark:border-forest-300 bg-forest-50 dark:bg-forest-900/20 rounded-xl cursor-pointer">
+                            <input type="radio" name="payment" checked class="w-4 h-4 text-forest-500">
+                            <iconify-icon icon="lucide:wallet" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                            <div class="flex-1"><div class="font-bold text-sm">پرداخت آنلاین (زرین‌پال)</div><div class="text-xs text-cream-500 dark:text-dark-muted">پرداخت امن با تمامی کارت‌های بانکی</div></div>
+                        </label>
+                        <label class="flex items-center gap-3 p-4 border-2 border-cream-200 dark:border-dark-border rounded-xl cursor-pointer hover:border-forest-300 transition">
+                            <input type="radio" name="payment" class="w-4 h-4 text-forest-500">
+                            <iconify-icon icon="lucide:smartphone" width="20" class="text-cream-400"></iconify-icon>
+                            <div class="flex-1"><div class="font-bold text-sm">پرداخت آنلاین (آی‌دی‌پی)</div><div class="text-xs text-cream-500 dark:text-dark-muted">درگاه پرداخت آی‌دی‌پی</div></div>
+                        </label>
+                        <label class="flex items-center gap-3 p-4 border-2 border-cream-200 dark:border-dark-border rounded-xl cursor-pointer hover:border-forest-300 transition">
+                            <input type="radio" name="payment" class="w-4 h-4 text-forest-500">
+                            <iconify-icon icon="lucide:banknote" width="20" class="text-cream-400"></iconify-icon>
+                            <div class="flex-1"><div class="font-bold text-sm">پرداخت در محل</div><div class="text-xs text-cream-500 dark:text-dark-muted">فقط برای تهران و حومه</div></div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <!-- Order Summary -->
+            <div>
+                <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50 sticky top-32">
+                    <h3 class="font-bold text-lg mb-5">خلاصه سفارش</h3>
+                    <div id="checkout-items" class="space-y-3 mb-5 max-h-60 overflow-y-auto"></div>
+                    <div class="border-t border-cream-200 dark:border-dark-border pt-4 space-y-2">
+                        <div class="flex justify-between text-sm"><span class="text-cream-500 dark:text-dark-muted">جمع کالاها</span><span id="checkout-subtotal">۰ تومان</span></div>
+                        <div class="flex justify-between text-sm"><span class="text-cream-500 dark:text-dark-muted">هزینه ارسال</span><span class="text-forest-500 dark:text-forest-300">رایگان</span></div>
+                        <div class="flex justify-between text-sm"><span class="text-cream-500 dark:text-dark-muted">تخفیف</span><span class="text-red-500" id="checkout-discount">۰ تومان</span></div>
+                        <div class="border-t border-cream-200 dark:border-dark-border pt-3 flex justify-between font-bold text-lg">
+                            <span>مبلغ قابل پرداخت</span>
+                            <span id="checkout-total" class="text-forest-500 dark:text-forest-300">۰ تومان</span>
+                        </div>
+                    </div>
+                    <div class="flex gap-2 mt-5">
+                        <input type="text" placeholder="کد تخفیف..." class="flex-1 px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-xs outline-none focus:border-forest-500 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+                        <button class="px-4 py-2.5 bg-cream-200 dark:bg-dark-bg text-xs font-bold rounded-xl hover:bg-cream-300 dark:hover:bg-dark-border transition">اعمال</button>
+                    </div>
+                    <button onclick="showToast('سفارش شما با موفقیت ثبت شد! 🎉', 'success')" class="w-full mt-5 py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 transition flex items-center justify-center gap-2">
+                        <iconify-icon icon="lucide:lock" width="16"></iconify-icon>
+                        <span>پرداخت امن</span>
+                    </button>
+                    <p class="text-[10px] text-cream-400 dark:text-dark-muted text-center mt-3">با ثبت سفارش، قوانین و مقررات مطیب را می‌پذیرید.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== CONTACT SECTION ===== -->
+<section id="contact" class="py-16 md:py-24 bg-white dark:bg-dark-card">
+    <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="text-center mb-12">
+            <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CONTACT</span>
+            <h2 class="text-3xl md:text-4xl font-extrabold mt-2">تماس با ما</h2>
+        </div>
+        <div class="grid md:grid-cols-2 gap-12">
+            <div>
+                <div class="space-y-6">
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
+                            <iconify-icon icon="lucide:map-pin" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                        </div>
+                        <div><div class="font-bold mb-1">آدرس</div><p class="text-sm text-cream-500 dark:text-dark-muted">تهران، خیابان ولیعصر، بالاتر از میدان ونک، پلاک ۱۲۳</p></div>
+                    </div>
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
+                            <iconify-icon icon="lucide:phone" width="22" class="text-honey-400"></iconify-icon>
+                        </div>
+                        <div><div class="font-bold mb-1">تلفن</div><p class="text-sm text-cream-500 dark:text-dark-muted">۰۲۱-۱۲۳۴۵۶۷۸</p><p class="text-sm text-cream-500 dark:text-dark-muted">۰۹۱۲-۳۴۵-۶۷۸۹</p></div>
+                    </div>
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
+                            <iconify-icon icon="lucide:mail" width="22" class="text-blue-500"></iconify-icon>
+                        </div>
+                        <div><div class="font-bold mb-1">ایمیل</div><p class="text-sm text-cream-500 dark:text-dark-muted font-inter" dir="ltr">info@motayeb.ir</p></div>
+                    </div>
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
+                            <iconify-icon icon="lucide:clock" width="22" class="text-emerald-500"></iconify-icon>
+                        </div>
+                        <div><div class="font-bold mb-1">ساعت کاری</div><p class="text-sm text-cream-500 dark:text-dark-muted">شنبه تا پنج‌شنبه: ۹ صبح تا ۶ عصر</p></div>
+                    </div>
+                </div>
+                <div class="flex gap-3 mt-8">
+                    <a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:instagram" width="20"></iconify-icon></a>
+                    <a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:send" width="20"></iconify-icon></a>
+                    <a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:twitter" width="20"></iconify-icon></a>
+                    <a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:youtube" width="20"></iconify-icon></a>
+                </div>
+            </div>
+            <form onsubmit="handleContact(event)" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <input type="text" placeholder="نام *" required class="px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+                    <input type="text" placeholder="نام خانوادگی *" required class="px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+                </div>
+                <input type="email" placeholder="ایمیل *" required class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
+                <input type="tel" placeholder="شماره تماس" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
+                <select class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition appearance-none text-cream-500 dark:text-dark-muted">
+                    <option>موضوع پیام...</option>
+                    <option>سوال درباره محصولات</option>
+                    <option>پیگیری سفارش</option>
+                    <option>پیشنهاد همکاری</option>
+                    <option>شکایات</option>
+                </select>
+                <textarea rows="4" placeholder="متن پیام..." required class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted resize-none"></textarea>
+                <button type="submit" class="w-full py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 transition flex items-center justify-center gap-2">
+                    <iconify-icon icon="lucide:send" width="18"></iconify-icon>
+                    <span>ارسال پیام</span>
+                </button>
+            </form>
+        </div>
+    </div>
+</section>
+
+</main>
+
+<!-- ===== FOOTER ===== -->
+<footer class="bg-forest-500 dark:bg-forest-800 text-white">
+    <div class="max-w-7xl mx-auto px-4 md:px-6 py-16">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
+            <!-- Brand -->
+            <div class="col-span-2 md:col-span-1">
+                <div class="flex items-center gap-2.5 mb-5">
+                    <div class="w-10 h-10 bg-white/10 rounded-2xl flex items-center justify-center">
+                        <iconify-icon icon="lucide:leaf" width="20" class="text-honey-300"></iconify-icon>
+                    </div>
+                    <div>
+                        <span class="font-extrabold text-xl">مطیب</span>
+                        <span class="block text-[9px] text-white/50 font-inter tracking-widest">MOTAYEB</span>
+                    </div>
+                </div>
+                <p class="text-white/70 text-sm leading-relaxed mb-5">ارائه‌دهنده محصولات ارگانیک و طبیعی ایرانی با ضمانت اصالت و کیفیت.</p>
+                <div class="flex gap-3">
+                    <a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:instagram" width="18"></iconify-icon></a>
+                    <a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:send" width="18"></iconify-icon></a>
+                    <a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:twitter" width="18"></iconify-icon></a>
+                </div>
+            </div>
+            <!-- Quick Links -->
+            <div>
+                <h4 class="font-bold mb-5">دسترسی سریع</h4>
+                <ul class="space-y-3 text-sm text-white/70">
+                    <li><a href="#home" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
+                    <li><a href="#shop" class="hover:text-honey-300 transition">فروشگاه</a></li>
+                    <li><a href="#about" class="hover:text-honey-300 transition">درباره ما</a></li>
+                    <li><a href="#blog" class="hover:text-honey-300 transition">مجله سلامت</a></li>
+                    <li><a href="#contact" class="hover:text-honey-300 transition">تماس با ما</a></li>
+                </ul>
+            </div>
+            <!-- Categories -->
+            <div>
+                <h4 class="font-bold mb-5">دسته‌بندی‌ها</h4>
+                <ul class="space-y-3 text-sm text-white/70">
+                    <li><a href="#" class="hover:text-honey-300 transition">عسل طبیعی</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">ارده و حلوا</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">سرکه و ترشی</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">دمنوش گیاهی</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">خشکبار و آجیل</a></li>
+                </ul>
+            </div>
+            <!-- Customer Service -->
+            <div>
+                <h4 class="font-bold mb-5">خدمات مشتریان</h4>
+                <ul class="space-y-3 text-sm text-white/70">
+                    <li><a href="#" class="hover:text-honey-300 transition">سوالات متداول</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">شرایط بازگشت</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">نحوه ارسال</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">حریم خصوصی</a></li>
+                    <li><a href="#" class="hover:text-honey-300 transition">قوانین و مقررات</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!-- Bottom Bar -->
+    <div class="border-t border-white/10">
+        <div class="max-w-7xl mx-auto px-4 md:px-6 py-5 flex flex-col md:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-white/50">© ۱۴۰۳ مطیب. تمامی حقوق محفوظ است.</p>
+            <div class="flex items-center gap-4">
+                <div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:shield-check" width="14" class="text-honey-300"></iconify-icon> نماد اعتماد</div>
+                <div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:badge-check" width="14" class="text-honey-300"></iconify-icon> ساماندهی</div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<!-- ===== MOBILE BOTTOM NAV ===== -->
+<nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border-t border-cream-200 dark:border-dark-border bottom-nav">
+    <div class="flex items-center justify-around py-2">
+        <a href="#home" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-forest-500 dark:text-forest-300">
+            <iconify-icon icon="lucide:home" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">خانه</span>
+        </a>
+        <a href="#shop" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
+            <iconify-icon icon="lucide:grid-3x3" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">دسته‌بندی</span>
+        </a>
+        <button onclick="openCart()" class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
+            <iconify-icon icon="lucide:shopping-bag" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">سبد خرید</span>
+            <span id="mobile-cart-count" class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center hidden">0</span>
+        </button>
+        <button onclick="openMobileMenu()" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
+            <iconify-icon icon="lucide:user" width="22"></iconify-icon>
+            <span class="text-[10px] font-medium">حساب من</span>
+        </button>
+    </div>
+</nav>
+
+<!-- Spacer for mobile nav -->
+<div class="md:hidden h-16"></div>
+
+<script>
+// ===== DATA =====
+const products = [
+    { id:1, name:'عسل طبیعی کوهستان', price:295000, oldPrice:369000, img:'honey-mountain-jar', category:'عسل', badge:'ارگانیک', discount:true, rating:4.9, reviews:128 },
+    { id:2, name:'ارده کنجد سنتی', price:185000, oldPrice:null, img:'sesame-paste-tahini', category:'ارده', badge:null, discount:false, rating:4.8, reviews:89 },
+    { id:3, name:'سرکه انگور طبیعی', price:125000, oldPrice:155000, img:'grape-vinegar-glass', category:'سرکه', badge:'طبیعی', discount:true, rating:4.7, reviews:56 },
+    { id:4, name:'دمنوش بابونه و اسطوخودوس', price:89000, oldPrice:null, img:'chamomile-lavender-tea', category:'دمنوش', badge:'ویژه', discount:false, rating:4.9, reviews:203 },
+    { id:5, name:'آجیل مخلوط لوکس', price:385000, oldPrice:450000, img:'mixed-nuts-luxury', category:'آجیل', badge:'پرفروش', discount:true, rating:4.8, reviews:167 },
+    { id:6, name:'عسل آویشن و گون', price:345000, oldPrice:null, img:'thyme-honey-jar', category:'عسل', badge:'ارگانیک', discount:false, rating:4.9, reviews:94 },
+    { id:7, name:'شیره خرما طبیعی', price:95000, oldPrice:120000, img:'date-syrup-bottle', category:'شیره', badge:null, discount:true, rating:4.6, reviews:45 },
+    { id:8, name:'روغن زیتون فرابکر', price:275000, oldPrice:null, img:'olive-oil-bottle-premium', category:'روغن', badge:'فرابکر', discount:false, rating:4.8, reviews:112 },
+];
+
+let cart = [];
+let selectedWeightPrice = 295000;
+
+// ===== RENDER PRODUCTS =====
+function renderProducts() {
+    const grid = document.getElementById('products-grid');
+    grid.innerHTML = products.map(p => `
+        <div class="product-card group bg-cream-50 dark:bg-dark-bg rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all">
+            <div class="relative overflow-hidden">
+                <img src="https://picsum.photos/seed/${p.img}/400/400.jpg" alt="${p.name}" class="product-img w-full h-48 md:h-56 object-cover">
+                <div class="absolute top-3 right-3 flex flex-col gap-1.5">
+                    ${p.badge ? `<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">${p.badge}</span>` : ''}
+                    ${p.discount ? `<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">${Math.round((1-p.price/p.oldPrice)*100)}٪</span>` : ''}
+                </div>
+                <div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
+                    <button onclick="quickAddToCart(${p.id})" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
+                        <iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon> افزودن
+                    </button>
+                    <button onclick="toggleWishlist(this)" class="w-10 h-10 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition">
+                        <iconify-icon icon="lucide:heart" width="16"></iconify-icon>
+                    </button>
+                </div>
+            </div>
+            <div class="p-4">
+                <div class="flex items-center gap-1 mb-2">
+                    <span class="text-honey-400 text-xs">★</span>
+                    <span class="text-xs font-medium">${p.rating}</span>
+                    <span class="text-xs text-cream-400 dark:text-dark-muted">(${p.reviews})</span>
+                </div>
+                <h3 class="font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition">${p.name}</h3>
+                <div class="flex items-end gap-2">
+                    <span class="font-extrabold text-forest-500 dark:text-forest-300">${formatPrice(p.price)}</span>
+                    <span class="text-xs text-cream-500 dark:text-dark-muted mb-0.5">تومان</span>
+                    ${p.oldPrice ? `<span class="line-through text-xs text-cream-400 dark:text-dark-muted mb-0.5">${formatPrice(p.oldPrice)}</span>` : ''}
+                </div>
+            </div>
+        </div>
+    `).join('');
+}
+
+function formatPrice(n) {
+    return n.toLocaleString('fa-IR');
+}
+
+// ===== CART FUNCTIONS =====
+function quickAddToCart(id) {
+    const p = products.find(x => x.id === id);
+    if (!p) return;
+    const existing = cart.find(x => x.id === id);
+    if (existing) { existing.qty++; }
+    else { cart.push({ ...p, qty: 1 }); }
+    updateCartUI();
+    showToast(`${p.name} به سبد خرید اضافه شد`, 'success');
+}
+
+function addToCartDetail() {
+    const qty = parseInt(document.getElementById('product-qty').textContent);
+    const existing = cart.find(x => x.id === 1);
+    if (existing) { existing.qty += qty; }
+    else { cart.push({ id:1, name:'عسل طبیعی کوهستان', price:selectedWeightPrice, img:'honey-golden-jar', qty }); }
+    updateCartUI();
+    showToast('عسل طبیعی کوهستان به سبد خرید اضافه شد', 'success');
+}
+
+function removeFromCart(id) {
+    cart = cart.filter(x => x.id !== id);
+    updateCartUI();
+}
+
+function updateCartQty(id, delta) {
+    const item = cart.find(x => x.id === id);
+    if (!item) return;
+    item.qty += delta;
+    if (item.qty <= 0) { removeFromCart(id); return; }
+    updateCartUI();
+}
+
+function updateCartUI() {
+    const count = cart.reduce((s, i) => s + i.qty, 0);
+    const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
+    
+    // Badge
+    ['cart-count', 'mobile-cart-count'].forEach(id => {
+        const el = document.getElementById(id);
+        if (count > 0) { el.textContent = count; el.classList.remove('hidden'); }
+        else { el.classList.add('hidden'); }
+    });
+    
+    // Drawer count
+    document.getElementById('cart-drawer-count').textContent = count;
+    
+    // Drawer items
+    const listEl = document.getElementById('cart-items-list');
+    const emptyEl = document.getElementById('cart-empty');
+    const footerEl = document.getElementById('cart-drawer-footer');
+    
+    if (cart.length === 0) {
+        listEl.classList.add('hidden');
+        emptyEl.classList.remove('hidden');
+        footerEl.classList.add('hidden');
+    } else {
+        listEl.classList.remove('hidden');
+        emptyEl.classList.add('hidden');
+        footerEl.classList.remove('hidden');
+        document.getElementById('cart-drawer-total').textContent = formatPrice(total) + ' تومان';
+        
+        listEl.innerHTML = cart.map(i => `
+            <div class="flex gap-3 bg-cream-50 dark:bg-dark-bg rounded-xl p-3">
+                <img src="https://picsum.photos/seed/${i.img}/100/100.jpg" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
+                <div class="flex-1 min-w-0">
+                    <h4 class="font-bold text-sm line-clamp-1">${i.name}</h4>
+                    <div class="text-xs text-cream-500 dark:text-dark-muted mt-0.5">${formatPrice(i.price)} تومان</div>
+                    <div class="flex items-center justify-between mt-2">
+                        <div class="flex items-center border border-cream-200 dark:border-dark-border rounded-lg overflow-hidden">
+                            <button onclick="updateCartQty(${i.id},-1)" class="w-7 h-7 flex items-center justify-center hover:bg-cream-200 dark:hover:bg-dark-card transition text-xs"><iconify-icon icon="lucide:minus" width="12"></iconify-icon></button>
+                            <span class="w-8 h-7 flex items-center justify-center text-xs font-bold border-x border-cream-200 dark:border-dark-border">${i.qty}</span>
+                            <button onclick="updateCartQty(${i.id},1)" class="w-7 h-7 flex items-center justify-center hover:bg-cream-200 dark:hover:bg-dark-card transition text-xs"><iconify-icon icon="lucide:plus" width="12"></iconify-icon></button>
+                        </div>
+                        <button onclick="removeFromCart(${i.id})" class="text-red-400 hover:text-red-500 transition"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    // Checkout
+    const checkoutItems = document.getElementById('checkout-items');
+    if (checkoutItems) {
+        if (cart.length === 0) {
+            checkoutItems.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-4">سبد خرید خالی است</p>';
+        } else {
+            checkoutItems.innerHTML = cart.map(i => `
+                <div class="flex items-center gap-3">
+                    <img src="https://picsum.photos/seed/${i.img}/60/60.jpg" class="w-12 h-12 rounded-lg object-cover">
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium line-clamp-1">${i.name}</div>
+                        <div class="text-xs text-cream-500 dark:text-dark-muted">${i.qty} عدد</div>
+                    </div>
+                    <div class="text-sm font-bold whitespace-nowrap">${formatPrice(i.price * i.qty)}</div>
+                </div>
+            `).join('');
+        }
+        document.getElementById('checkout-subtotal').textContent = formatPrice(total) + ' تومان';
+        document.getElementById('checkout-total').textContent = formatPrice(total) + ' تومان';
+    }
+}
+
+// ===== UI TOGGLES =====
+function openSearch() {
+    document.getElementById('search-overlay').classList.remove('hidden');
+    setTimeout(() => document.getElementById('search-input').focus(), 100);
+}
+function closeSearch() {
+    document.getElementById('search-overlay').classList.add('hidden');
+    document.getElementById('search-input').value = '';
+    document.getElementById('search-results').innerHTML = '';
+    document.getElementById('search-suggestions').classList.remove('hidden');
+}
+function openCart() { document.getElementById('cart-drawer').classList.remove('hidden'); }
+function closeCart() { document.getElementById('cart-drawer').classList.add('hidden'); }
+function openMobileMenu() { document.getElementById('mobile-menu').classList.remove('hidden'); }
+function closeMobileMenu() { document.getElementById('mobile-menu').classList.add('hidden'); }
+
+// ===== DARK MODE =====
+function toggleDark() { document.documentElement.classList.toggle('dark'); }
+
+// ===== SEARCH =====
+function handleSearch(val) {
+    const results = document.getElementById('search-results');
+    const suggestions = document.getElementById('search-suggestions');
+    if (val.length < 2) { results.innerHTML = ''; suggestions.classList.remove('hidden'); return; }
+    suggestions.classList.add('hidden');
+    const filtered = products.filter(p => p.name.includes(val) || p.category.includes(val));
+    if (filtered.length === 0) {
+        results.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-6">محصولی یافت نشد</p>';
+    } else {
+        results.innerHTML = filtered.map(p => `
+            <button onclick="closeSearch()" class="flex items-center gap-3 w-full p-3 rounded-xl hover:bg-cream-50 dark:hover:bg-dark-bg transition text-right">
+                <img src="https://picsum.photos/seed/${p.img}/60/60.jpg" class="w-12 h-12 rounded-lg object-cover">
+                <div class="flex-1">
+                    <div class="font-bold text-sm">${p.name}</div>
+                    <div class="text-xs text-cream-500 dark:text-dark-muted">${p.category}</div>
+                </div>
+                <div class="text-sm font-bold text-forest-500 dark:text-forest-300">${formatPrice(p.price)}</div>
+            </button>
+        `).join('');
+    }
+}
+
+// ===== PRODUCT DETAIL =====
+function changeImage(seed, btn) {
+    document.getElementById('main-product-img').src = `https://picsum.photos/seed/${seed}/600/600.jpg`;
+    document.querySelectorAll('.gallery-thumb').forEach(t => t.classList.remove('active'));
+    btn.classList.add('active');
+}
+
+function selectWeight(btn, price) {
+    document.querySelectorAll('.weight-btn').forEach(b => {
+        b.classList.remove('active', 'border-forest-500', 'dark:border-forest-300', 'bg-forest-50', 'dark:bg-forest-900/30', 'text-forest-500', 'dark:text-forest-300');
+        b.classList.add('border-cream-200', 'dark:border-dark-border');
+    });
+    btn.classList.add('active', 'border-forest-500', 'dark:border-forest-300', 'bg-forest-50', 'dark:bg-forest-900/30', 'text-forest-500', 'dark:text-forest-300');
+    btn.classList.remove('border-cream-200', 'dark:border-dark-border');
+    selectedWeightPrice = price;
+    document.getElementById('product-price').textContent = formatPrice(price);
+}
+
+function changeQty(delta) {
+    const el = document.getElementById('product-qty');
+    let val = parseInt(el.textContent) + delta;
+    if (val < 1) val = 1;
+    if (val > 10) val = 10;
+    el.textContent = val;
+}
+
+function switchTab(tabId, btn) {
+    document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
+    document.querySelectorAll('.tab-btn').forEach(b => { b.classList.remove('tab-active'); b.classList.add('text-cream-500', 'dark:text-dark-muted'); });
+    document.getElementById('tab-' + tabId).classList.remove('hidden');
+    btn.classList.add('tab-active');
+    btn.classList.remove('text-cream-500', 'dark:text-dark-muted');
+}
+
+// ===== WISHLIST =====
+function toggleWishlist(btn) {
+    const icon = btn.querySelector('iconify-icon');
+    if (icon.getAttribute('icon') === 'lucide:heart') {
+        icon.setAttribute('icon', 'lucide:heart');
+        icon.style.color = '#ef4444';
+        icon.style.fill = '#ef4444';
+        showToast('به علاقه‌مندی‌ها اضافه شد', 'info');
+    } else {
+        icon.style.color = '';
+        icon.style.fill = '';
+        showToast('از علاقه‌مندی‌ها حذف شد', 'info');
+    }
+}
+
+// ===== TOAST =====
+function showToast(msg, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const colors = { success: 'bg-forest-500', info: 'bg-earth-400', error: 'bg-red-500' };
+    const icons = { success: 'lucide:check-circle', info: 'lucide:info', error: 'lucide:alert-circle' };
+    const toast = document.createElement('div');
+    toast.className = `toast flex items-center gap-3 px-5 py-3 ${colors[type]} text-white rounded-2xl shadow-xl text-sm font-medium`;
+    toast.innerHTML = `<iconify-icon icon="${icons[type]}" width="20"></iconify-icon><span>${msg}</span>`;
+    container.appendChild(toast);
+    setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s'; setTimeout(() => toast.remove(), 300); }, 3000);
+}
+
+// ===== FORMS =====
+function handleNewsletter(e) {
+    e.preventDefault();
+    const email = document.getElementById('newsletter-email').value;
+    showToast(`${email} با موفقیت ثبت شد!`, 'success');
+    document.getElementById('newsletter-email').value = '';
+}
+
+function handleContact(e) {
+    e.preventDefault();
+    showToast('پیام شما با موفقیت ارسال شد. به زودی پاسخ می‌دهیم.', 'success');
+    e.target.reset();
+}
+
+function goToCheckout() {
+    closeCart();
+    document.getElementById('checkout').scrollIntoView({ behavior: 'smooth' });
+}
+
+function toggleLang() {
+    showToast('نسخه انگلیسی به زودی اضافه می‌شود', 'info');
+}
+
+// ===== HEADER SCROLL =====
+let lastScroll = 0;
+window.addEventListener('scroll', () => {
+    const header = document.getElementById('header');
+    const scroll = window.scrollY;
+    if (scroll > 100) {
+        header.classList.add('shadow-lg');
+    } else {
+        header.classList.remove('shadow-lg');
+    }
+    lastScroll = scroll;
+});
+
+// ===== KEYBOARD =====
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') { closeSearch(); closeCart(); closeMobileMenu(); }
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openSearch(); }
+});
+
+// ===== INIT =====
+renderProducts();
+updateCartUI();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/woocommerce/content-product.php b/woocommerce/content-product.php
new file mode 100644
index 0000000..3420004
--- /dev/null
+++ b/woocommerce/content-product.php
@@ -0,0 +1,52 @@
+<?php
+/**
+ * کارت محصول - سازگار با طرح مطیب
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+global $product;
+
+// اگر محصول معتبر نبود، رد شو
+if ( ! is_a( $product, WC_Product::class ) ) {
+    return;
+}
+?>
+
+<div <?php wc_product_class( 'product-card group bg-cream-50 dark:bg-dark-bg rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all', $product ); ?>>
+    
+    <!-- لینک عکس -->
+    <a href="<?php the_permalink(); ?>" class="block relative overflow-hidden">
+        <?php 
+        // نمایش عکس محصول
+        woocommerce_show_product_loop_sale_flash(); 
+        ?>
+        <img src="<?php echo wp_get_attachment_image_url( $product->get_image_id(), 'medium' ); ?>" alt="<?php echo esc_attr( $product->get_name() ); ?>" class="product-img w-full h-48 md:h-56 object-cover">
+        
+        <!-- دکمه افزودن به سبد (هاور در دسکتاپ - همیشه در موبایل طبق CSS قبلی) -->
+        <div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
+            <?php woocommerce_template_loop_add_to_cart(); ?>
+        </div>
+    </a>
+
+    <!-- اطلاعات محصول -->
+    <div class="p-4">
+        <!-- عنوان -->
+        <a href="<?php the_permalink(); ?>" class="block font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition leading-relaxed">
+            <?php echo wp_kses_post( $product->get_name() ); ?>
+        </a>
+        
+        <!-- ستاره‌ها (اگر فعال بود) -->
+        <?php if ( $product->get_average_rating() > 0 ) : ?>
+            <div class="flex items-center gap-1 mb-2">
+                <span class="text-honey-400 text-xs">★</span>
+                <span class="text-xs font-medium"><?php echo esc_html( $product->get_average_rating() ); ?></span>
+            </div>
+        <?php endif; ?>
+
+        <!-- قیمت -->
+        <div class="flex items-end gap-2">
+            <span class="font-extrabold text-forest-500 dark:text-forest-300 text-sm md:text-base"><?php echo $product->get_price_html(); ?></span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/woocommerce/content-single-product.php b/woocommerce/content-single-product.php
new file mode 100644
index 0000000..e71916a
--- /dev/null
+++ b/woocommerce/content-single-product.php
@@ -0,0 +1,243 @@
+<?php
+/**
+ * محتوای محصول تکی - بازنویسی شده
+ */
+defined( 'ABSPATH' ) || exit;
+
+global $product;
+if ( ! is_a( $product, WC_Product::class ) ) return;
+?>
+
+<div class="py-8 md:py-12">
+    <div class="grid md:grid-cols-2 gap-6 lg:gap-12 items-start">
+        
+        <!-- ===== گالری عکس ===== -->
+        <div class="relative">
+            <!-- عکس اصلی -->
+            <div class="relative rounded-2xl overflow-hidden bg-cream-50 dark:bg-dark-bg mb-3 border border-cream-200/50 dark:border-dark-border/50">
+                <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images">
+                    <figure class="woocommerce-product-gallery__wrapper">
+                        <?php
+                        // گرفتن آی‌دی تصویر شاخص
+                        $attachment_id = $product->get_image_id();
+                        if ( $attachment_id ) {
+                            $full_size = wp_get_attachment_image_src( $attachment_id, 'full' );
+                            $main_img_url = $full_size[0];
+                            $alt_text = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
+                        } else {
+                            $full_size = false;
+                            $main_img_url = wc_placeholder_img_src();
+                            $alt_text = 'تصویر محصول';
+                        }
+                        ?>
+                        <div data-thumb="<?php echo esc_url( wp_get_attachment_image_url( $attachment_id, 'thumbnail' ) ); ?>" class="woocommerce-product-gallery__image">
+                            <a href="<?php echo esc_url( $main_img_url ); ?>" class="woocommerce-main-image zoom">
+                                <img id="main-product-image" 
+                                     src="<?php echo esc_url( $main_img_url ); ?>" 
+                                     alt="<?php echo esc_attr( $alt_text ); ?>" 
+                                     class="w-full h-[300px] md:h-[450px] lg:h-[500px] object-cover"
+                                     data-large_image="<?php echo esc_url( $main_img_url ); ?>"
+                                     data-large_image_width="<?php echo $full_size ? $full_size[1] : 800; ?>"
+                                     data-large_image_height="<?php echo $full_size ? $full_size[2] : 800; ?>">
+                            </a>
+                        </div>
+
+                        <!-- گالری اضافه (اگر کاربر تو پنل ووکامرس عکس‌های بیشتری آپلود کرده باشه) -->
+                        <?php
+                        $attachment_ids = $product->get_gallery_image_ids();
+                        if ( $attachment_ids ) {
+                            foreach ( $attachment_ids as $gallery_img_id ) {
+                                $gallery_full = wp_get_attachment_image_src( $gallery_img_id, 'full' );
+                                $gallery_alt = get_post_meta( $gallery_img_id, '_wp_attachment_image_alt', true );
+                                echo '<div data-thumb="' . esc_url( wp_get_attachment_image_url( $gallery_img_id, 'thumbnail' ) ) . '" class="woocommerce-product-gallery__image" style="display:none;">';
+                                echo '<a href="' . esc_url( $gallery_full[0] ) . '">';
+                                echo '<img src="' . esc_url( $gallery_full[0] ) . '" alt="' . esc_attr( $gallery_alt ) . '" class="w-full h-[300px] md:h-[450px] lg:h-[500px] object-cover">';
+                                echo '</a></div>';
+                            }
+                        }
+                        ?>
+                    </figure>
+                </div>
+            </div>
+
+            <!-- تامبنیل‌ها -->
+            <div class="flex gap-2 overflow-x-auto pb-1">
+                <!-- تامبنیل عکس اصلی -->
+                <button onclick="changeProductImage(this, '<?php echo esc_url( $main_img_url ); ?>')" class="gallery-thumb active w-20 h-20 rounded-xl overflow-hidden border-2 border-forest-500 flex-shrink-0">
+                    <img src="<?php echo esc_url( wp_get_attachment_image_url( $attachment_id, 'thumbnail' ) ); ?>" class="w-full h-full object-cover">
+                </button>
+                <!-- تامبنیل‌های گالری -->
+                <?php if ( $attachment_ids ) : ?>
+                    <?php foreach ( $attachment_ids as $gallery_img_id ) : 
+                        $gallery_full = wp_get_attachment_image_src( $gallery_img_id, 'full' );
+                    ?>
+                        <button onclick="changeProductImage(this, '<?php echo esc_url( $gallery_full[0] ); ?>')" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0 hover:border-forest-300 transition">
+                            <img src="<?php echo esc_url( wp_get_attachment_image_url( $gallery_img_id, 'thumbnail' ) ); ?>" class="w-full h-full object-cover">
+                        </button>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </div>
+        </div>
+
+        <!-- ===== اطلاعات محصول ===== -->
+        <div class="lg:sticky lg:top-28">
+            <!-- دسته بندی -->
+            <div class="flex items-center gap-2 mb-3 text-xs text-cream-500 dark:text-dark-muted">
+                <?php echo wc_get_product_category_list( $product->get_id(), ' <span class="w-1 h-1 bg-cream-400 rounded-full"></span> ' ); ?>
+            </div>
+
+            <!-- عنوان -->
+            <h1 class="text-2xl md:text-3xl font-extrabold mb-3 leading-relaxed"><?php the_title(); ?></h1>
+
+                        <!-- ستاره‌ها -->
+            <?php if ( $product->get_review_count() > 0 ) : ?>
+            <div class="flex items-center gap-2 mb-5">
+                <div class="star-rating-wrapper flex text-honey-400" style="font-size: 1.1rem; letter-spacing: 2px;">
+                    <?php 
+                    $rating = $product->get_average_rating();
+                    $full_stars = floor($rating);
+                    $empty_stars = 5 - $full_stars;
+                    echo str_repeat('★', $full_stars) . str_repeat('☆', $empty_stars); 
+                    ?>
+                </div>
+                <span class="text-xs text-cream-500 dark:text-dark-muted">(<?php echo esc_html($product->get_review_count()); ?> نظر)</span>
+            </div>
+            <?php endif; ?>
+
+            <!-- موجودی -->
+            <div class="flex items-center gap-2 mb-5">
+                <?php if ( $product->is_in_stock() ) : ?>
+                    <span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
+                    <span class="text-sm text-emerald-600 dark:text-emerald-400 font-medium">موجود در انبار</span>
+                <?php else : ?>
+                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
+                    <span class="text-sm text-red-500 font-medium">ناموجود</span>
+                <?php endif; ?>
+            </div>
+
+            <!-- توضیح کوتاه -->
+            <?php if ( $product->get_short_description() ) : ?>
+                <div class="text-cream-500 dark:text-dark-muted text-sm leading-7 mb-6 pb-6 border-b border-cream-200 dark:border-dark-border">
+                    <?php echo wp_kses_post( $product->get_short_description() ); ?>
+                </div>
+            <?php endif; ?>
+
+            <!-- قیمت -->
+            <div class="flex items-center gap-4 mb-6">
+                <?php if ( $product->is_on_sale() ) : ?>
+                    <span class="text-3xl font-extrabold text-forest-500 dark:text-forest-300"><?php echo wc_price( $product->get_sale_price() ); ?></span>
+                    <span class="text-lg text-cream-400 dark:text-dark-muted line-through"><?php echo wc_price( $product->get_regular_price() ); ?></span>
+                <?php else : ?>
+                    <span class="text-3xl font-extrabold text-forest-500 dark:text-forest-300"><?php echo wc_price( $product->get_price() ); ?></span>
+                <?php endif; ?>
+                <span class="text-sm text-cream-500 dark:text-dark-muted">تومان</span>
+            </div>
+            
+            <!-- شروع فرم خرید -->
+            <?php if ( $product->is_in_stock() ) : ?>
+            <form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
+                <?php wp_nonce_field( 'woocommerce-add-to-cart_' . $product->get_id(), 'woocommerce-add-to-cart-nonce' ); ?>
+            <?php endif; ?>
+
+            <!-- فرم خرید -->
+                        <!-- فرم خرید (دقیقاً مثل طرح اول) -->
+            <div class="flex items-center gap-4 mb-6">
+                <!-- اینپوت تعداد سفارشی -->
+                <div class="flex items-center border-2 border-cream-200 dark:border-dark-border rounded-xl overflow-hidden">
+                    <button type="button" onclick="document.getElementById('motayeb-qty').value = Math.max(1, parseInt(document.getElementById('motayeb-qty').value) - 1)" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
+                        <iconify-icon icon="lucide:minus" width="16"></iconify-icon>
+                    </button>
+                    <input type="number" id="motayeb-qty" name="quantity" value="1" min="1" max="<?php echo esc_attr( $product->get_max_purchase_quantity() > 0 ? $product->get_max_purchase_quantity() : 9999 ); ?>" class="w-12 h-10 text-center border-x-2 border-cream-200 dark:border-dark-border font-bold text-sm outline-none bg-white dark:bg-dark-card" dir="ltr">
+                    <button type="button" onclick="document.getElementById('motayeb-qty').value = parseInt(document.getElementById('motayeb-qty').value) + 1" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
+                        <iconify-icon icon="lucide:plus" width="16"></iconify-icon>
+                    </button>
+                </div>
+
+                <!-- دکمه سبز بزرگ -->
+                <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="flex-1 h-10 bg-forest-500 text-white rounded-xl font-bold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25 flex items-center justify-center gap-2">
+                    <iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
+                    <span>افزودن به سبد خرید</span>
+                </button>
+            </div>
+            
+            <!-- تگ فرم مخفی ووکامرس (الزامی برای کار کردن سبد خرید) -->
+            </form>
+            <?php if ( ! $product->is_in_stock() ) : ?>
+                <div class="flex items-center gap-3 p-4 bg-red-50 dark:bg-red-900/20 rounded-2xl border border-red-200 dark:border-red-800 text-red-500 text-sm font-medium">
+                    <iconify-icon icon="lucide:x-circle" width="20"></iconify-icon>
+                    این محصول در حال حاضر ناموجود است.
+                </div>
+            <?php endif; ?>
+
+            <!-- اطلاعات کالا -->
+            <div class="grid grid-cols-2 gap-3 mb-6">
+                <?php if ( $product->get_sku() ) : ?>
+                <div class="flex items-center gap-3 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <iconify-icon icon="lucide:hash" width="18" class="text-cream-400 flex-shrink-0"></iconify-icon>
+                    <div>
+                        <div class="text-[10px] text-cream-400 dark:text-dark-muted">شناسه</div>
+                        <div class="text-xs font-bold"><?php echo esc_html($product->get_sku()); ?></div>
+                    </div>
+                </div>
+                <?php endif; ?>
+                <div class="flex items-center gap-3 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <iconify-icon icon="lucide:tag" width="18" class="text-cream-400 flex-shrink-0"></iconify-icon>
+                    <div class="min-w-0">
+                    <!-- دسته بندی -->
+                    <div class="mb-4">
+                        <?php 
+                        $cats = get_the_terms( $product->get_id(), 'product_cat' );
+                        if ( $cats && ! is_wp_error( $cats ) ) : ?>
+                            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 rounded-full text-xs font-semibold">
+                                <iconify-icon icon="lucide:tag" width="14"></iconify-icon>
+                                <?php echo esc_html( $cats[0]->name ); ?>
+                            </span>
+                        <?php endif; ?>
+                    </div>                        <div class="text-xs font-bold line-clamp-1"><?php echo wc_get_product_category_list( $product->get_id(), ', ' ); ?></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- اعتماد -->
+            <div class="grid grid-cols-2 gap-3 mt-6">
+                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <iconify-icon icon="lucide:truck" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                    </div>
+                    <span class="text-xs font-medium leading-tight">ارسال به سراسر کشور</span>
+                </div>
+                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <iconify-icon icon="lucide:rotate-ccw" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                    </div>
+                    <span class="text-xs font-medium leading-tight">بازگشت ۷ روزه</span>
+                </div>
+                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <iconify-icon icon="lucide:shield-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                    </div>
+                    <span class="text-xs font-medium leading-tight">ضمانت اصالت کالا</span>
+                </div>
+                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
+                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <iconify-icon icon="lucide:credit-card" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
+                    </div>
+                    <span class="text-xs font-medium leading-tight">پرداخت امن</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ===== تب‌ها ===== -->
+    <div class="mt-16 border-t border-cream-200 dark:border-dark-border pt-8">
+        <?php woocommerce_output_product_data_tabs(); ?>
+    </div>
+
+    <!-- ===== مرتبط ===== -->
+    <div class="mt-16">
+        <h2 class="text-2xl font-extrabold mb-8">محصولات مرتبط</h2>
+        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
+            <?php woocommerce_output_related_products(); ?>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/woocommerce/single-product/review-form.php b/woocommerce/single-product/review-form.php
new file mode 100644
index 0000000..2e699a5
--- /dev/null
+++ b/woocommerce/single-product/review-form.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * فرم ثبت نظر - کاملاً سفارشی (بدون متن 1 of 5 stars)
+ */
+defined( 'ABSPATH' ) || exit;
+
+if ( ! $comment_form = get_comment_form() ) {
+    return;
+}
+?>
+
+<div id="review_form_wrapper">
+    <div id="respond" class="comment-respond">
+        <h3 id="replytitle" class="comment-reply-title font-bold text-lg mb-6">ثبت نظر جدید</h3>
+        
+        <form action="<?php echo esc_url( get_permalink() ); ?>#respond" method="post" id="commentform" class="comment-form space-y-4 bg-cream-50 dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
+            <?php comment_form_fields(); ?>
+            
+            <!-- فیلد ستاره‌ها (جایگزین سیستم وردپرس) -->
+            <div class="mb-2">
+                <label class="text-sm font-bold mb-3 block">امتیاز شما:</label>
+                <div id="custom-star-rating" class="flex gap-1 text-3xl text-cream-300 dark:text-dark-border cursor-pointer">
+                    <span class="star" data-value="1">★</span>
+                    <span class="star" data-value="2">★</span>
+                    <span class="star" data-value="3">★</span>
+                    <span class="star" data-value="4">★</span>
+                    <span class="star" data-value="5">★</span>
+                </div>
+                <input type="hidden" name="rating" id="rating" value="0">
+            </div>
+
+            <!-- فیلدهای متنی (نام، ایمیل، متن نظر) -->
+            <div class="grid md:grid-cols-2 gap-4">
+                <div>
+                    <input type="text" name="author" id="author" placeholder="نام و نام خانوادگی *" required class="w-full px-4 py-3 bg-white dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 transition placeholder:text-cream-400">
+                </div>
+                <div>
+                    <input type="email" name="email" id="email" placeholder="ایمیل *" required class="w-full px-4 py-3 bg-white dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 transition placeholder:text-cream-400 font-inter" dir="ltr">
+                </div>
+            </div>
+            <textarea name="comment" id="comment" rows="4" placeholder="نظر خود را بنویسید... *" required class="w-full px-4 py-3 bg-white dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 transition placeholder:text-cream-400 resize-none"></textarea>
+
+            <!-- فیلدهای مخفی وردپرس -->
+            <?php do_action( 'comment_form', $comment_form ); ?>
+            
+            <div class="flex justify-end">
+                <button type="submit" class="px-8 py-3 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition">ثبت نظر</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/woocommerce/single-product/review.php b/woocommerce/single-product/review.php
new file mode 100644
index 0000000..060af8d
--- /dev/null
+++ b/woocommerce/single-product/review.php
@@ -0,0 +1,36 @@
+<?php
+/**
+ * نمایش تکی نظر - کاملاً سفارشی
+ */
+defined( 'ABSPATH' ) || exit;
+global $comment;
+ $rating = intval( get_comment_meta( $comment->comment_ID, 'rating', true ) );
+?>
+
+<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
+    <div class="bg-cream-50 dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
+        <div class="flex items-center justify-between mb-3">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-forest-100 dark:bg-forest-800 rounded-full flex items-center justify-center font-bold text-sm text-forest-500 dark:text-forest-300">
+                    <?php echo mb_substr( get_comment_author( $comment ), 0, 1 ); ?>
+                </div>
+                <div>
+                    <div class="font-bold text-sm text-earth-400 dark:text-dark-text"><?php echo esc_html( get_comment_author( $comment ) ); ?></div>
+                    <div class="text-[10px] text-cream-500 dark:text-dark-muted"><?php echo get_comment_date( 'Y/m/d' ); ?></div>
+                </div>
+            </div>
+            <!-- ستاره‌های تمیز و متنی -->
+            <?php if ( $rating && wc_review_ratings_enabled() ) : ?>
+                <div class="flex text-honey-400 text-sm" style="letter-spacing: 2px;">
+                    <?php echo str_repeat('★', $rating) . str_replace('★', '☆', str_repeat('★', 5 - $rating)); ?>
+                </div>
+            <?php endif; ?>
+        </div>
+        <?php if ( $comment->comment_approved == '0' ) : ?>
+            <p class="text-xs text-amber-500 mb-2"><?php esc_html_e( 'Your review is awaiting approval', 'woocommerce' ); ?></p>
+        <?php endif; ?>
+        <div class="text-sm text-cream-500 dark:text-dark-muted leading-7">
+            <?php echo wpautop( esc_html( get_comment_text( $comment ) ) ); ?>
+        </div>
+    </div>
+</li>
\ No newline at end of file