<?php
// إجبار المتصفح على عدم تخزين الكاش وتحديث الجلسة فوراً
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<?php
// تعريف BASE_URL


require_once __DIR__ . '/db.php';

// ── تحميل إعدادات الثيم ─────────────────────────────
$storeRow = $pdo->query("SELECT * FROM stores WHERE id = 1")->fetch(PDO::FETCH_ASSOC);
$themeDefaults = [
    'primary_color' => '#0F172A',
    'accent_color'  => '#6C63FF',
    'bg_color'      => '#F7F8FA',
    'btn_radius'    => 'rounded',
];
$theme = $themeDefaults;
if (!empty($storeRow['theme_settings'])) {
    $decoded = json_decode($storeRow['theme_settings'], true);
    if (is_array($decoded)) $theme = array_merge($themeDefaults, $decoded);
}
$radiusMap = ['rounded' => '14px', 'square' => '4px', 'pill' => '100px'];
$btnRadius = $radiusMap[$theme['btn_radius']] ?? '14px';

// ── Meta Pixel ──────────────────────────────────────
try {
    $pixel = $pdo->query("SELECT meta_pixel_id, meta_pixel_enabled FROM stores WHERE id = 1")->fetch(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $pixel = null;
}

$stmt = $pdo->query("SELECT * FROM categories");
$categories = $stmt->fetchAll();

$store = $storeRow;

$productsPerPage = 8;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * $productsPerPage;

$categoryFilter = isset($_GET['category']) ? (int)$_GET['category'] : null;
$maxPriceFilter = isset($_GET['max_price']) ? (float)$_GET['max_price'] : null;
$discountFilter = isset($_GET['discount']) && $_GET['discount'] == '1';
$searchQuery = isset($_GET['search']) ? trim($_GET['search']) : '';

$query = "
    SELECT p.*, pi.image_url AS image
    FROM products p
    LEFT JOIN product_images pi ON p.id = pi.product_id AND pi.is_primary = 1
    WHERE p.is_active = 1
";
$countQuery = "SELECT COUNT(*) FROM products WHERE is_active = 1";
$params = [];
$countParams = [];

if (!empty($searchQuery)) {
    $query .= " AND (p.name LIKE :search OR p.description LIKE :search)";
    $countQuery .= " AND (name LIKE :search OR description LIKE :search)";
    $params[':search'] = '%' . $searchQuery . '%';
    $countParams[':search'] = '%' . $searchQuery . '%';
}
if ($categoryFilter) {
    $query .= " AND p.category_id = :category_id";
    $countQuery .= " AND category_id = :category_id";
    $params[':category_id'] = $categoryFilter;
    $countParams[':category_id'] = $categoryFilter;
}
if ($maxPriceFilter) {
    $query .= " AND COALESCE(p.discounted_price, p.price) <= :max_price";
    $countQuery .= " AND COALESCE(discounted_price, price) <= :max_price";
    $params[':max_price'] = $maxPriceFilter;
    $countParams[':max_price'] = $maxPriceFilter;
}
if ($discountFilter) {
    $query .= " AND p.discounted_price IS NOT NULL AND p.discounted_price < p.price";
    $countQuery .= " AND discounted_price IS NOT NULL AND discounted_price < price";
}
$query .= " LIMIT :limit OFFSET :offset";

$stmt = $pdo->prepare($query);
foreach ($params as $key => $value) {
    $stmt->bindValue($key, $value, is_int($value) ? PDO::PARAM_INT : PDO::PARAM_STR);
}
$stmt->bindValue(':limit', $productsPerPage, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$products = $stmt->fetchAll();

$countStmt = $pdo->prepare($countQuery);
foreach ($countParams as $key => $value) {
    $countStmt->bindValue($key, $value, is_int($value) ? PDO::PARAM_INT : PDO::PARAM_STR);
}
$countStmt->execute();
$totalProducts = $countStmt->fetchColumn();
$totalPages = ceil($totalProducts / $productsPerPage);

function getCategoryName($pdo, $categoryId) {
    if (!$categoryId) return 'عام';
    $stmt = $pdo->prepare("SELECT name FROM categories WHERE id = ?");
    $stmt->execute([$categoryId]);
    return $stmt->fetchColumn() ?: 'عام';
}

$featuredStmt = $pdo->query("
    SELECT p.*, pi.image_url AS image
    FROM products p
    LEFT JOIN product_images pi ON p.id = pi.product_id AND pi.is_primary = 1
    WHERE p.is_active = 1 AND p.is_featured = 1
    ORDER BY p.created_at DESC
    LIMIT 6
");
$featuredProducts = $featuredStmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($store['name']); ?> — متجر إلكتروني</title>
    <link rel="icon" href="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>" type="image/jpg">

    <?php if ($pixel && $pixel['meta_pixel_enabled'] && !empty(trim($pixel['meta_pixel_id']))): ?>
    <?php $pixel_id = htmlspecialchars(trim($pixel['meta_pixel_id'])); ?>
    <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '<?php echo $pixel_id; ?>');
    fbq('track', 'PageView');
    <?php if (!empty($searchQuery)): ?>fbq('track', 'Search', {search_string: '<?php echo addslashes($searchQuery); ?>'});<?php endif; ?>
    </script>
    <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<?php echo $pixel_id; ?>&ev=PageView&noscript=1"/></noscript>
    <?php endif; ?>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;900&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <meta name="facebook-domain-verification" content="u1d1f7pupug676e6nn4ioppbl7w291" />

    <style>
        /* ===== متغيرات الثيم الديناميكية ===== */
        :root {
            /* ألوان الثيم — تُحمَّل من قاعدة البيانات وتُحدَّث عبر JS */
            --theme-primary:  <?php echo htmlspecialchars($theme['primary_color']); ?>;
            --theme-accent:   <?php echo htmlspecialchars($theme['accent_color']); ?>;
            --theme-bg:       <?php echo htmlspecialchars($theme['bg_color']); ?>;
            --theme-radius:   <?php echo $btnRadius; ?>;

            /* ألوان ثابتة */
            --black:          #0a0a0a;
            --white:          #ffffff;
            --off-white:      #f8f6f3;
            --cream:          #f2ede6;
            --accent:         #c8a96e;
            --accent-dark:    #a8893e;
            --accent-light:   #e8d4a8;
            --blue-primary:   var(--theme-accent);
            --blue-dark:      color-mix(in srgb, var(--theme-accent) 80%, #000);
            --blue-light:     color-mix(in srgb, var(--theme-accent) 12%, #fff);
            --gray-100:       #f5f5f5;
            --gray-200:       #e8e8e8;
            --gray-300:       #d0d0d0;
            --gray-400:       #a0a0a0;
            --gray-500:       #6b6b6b;
            --gray-600:       #4a4a4a;
            --gray-800:       #2a2a2a;
            --red:            #e53935;
            --red-light:      #ffebee;
            --green:          #2e7d32;
            --r:              12px;
            --r-sm:           8px;
            --r-lg:           20px;
            --shadow-xs:      0 1px 3px rgba(0,0,0,0.08);
            --shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
            --shadow-md:      0 4px 20px rgba(0,0,0,0.10);
            --shadow-lg:      0 12px 40px rgba(0,0,0,0.14);
            --shadow-xl:      0 24px 60px rgba(0,0,0,0.18);
            --t:              all 0.3s cubic-bezier(0.4,0,0.2,1);
            --t-fast:         all 0.15s ease;
        }

        * { margin:0; padding:0; box-sizing:border-box; }

        body {
            font-family: 'Cairo', sans-serif;
            background: var(--theme-bg);
            color: var(--black);
            overflow-x: hidden;
        }

        /* ===== ANNOUNCEMENT BAR ===== */
        .announce-bar {
            background: var(--theme-accent);
            color: #fff;
            text-align: center;
            padding: 9px 20px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.3px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
        }
        .announce-bar::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
            animation: shine 3s infinite;
        }
        @keyframes shine { to { left: 200%; } }
        .announce-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
        .announce-pill {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(255,255,255,0.18);
            border: 1px solid rgba(255,255,255,0.28);
            padding: 3px 12px; border-radius: 50px;
            font-size: 12px; font-weight: 700;
        }
        .announce-pill i { font-size: 11px; }
        .announce-sep { width: 4px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 50%; margin: 0 4px; }

        /* ===== HEADER ===== */
        .header {
            position: sticky; top: 0; z-index: 900;
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--gray-200);
            transition: var(--t);
        }
        .header.scrolled { box-shadow: var(--shadow-md); }
        .header-inner {
            max-width: 1400px; margin: 0 auto; padding: 0 24px;
            display: flex; align-items: center; gap: 16px; height: 68px;
        }

        /* ===== LOGO ===== */
        .logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
        .logo-circle {
            width: 46px; height: 46px; border-radius: 50%;
            background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 3px 12px color-mix(in srgb, var(--theme-accent) 50%, transparent);
            overflow: hidden; flex-shrink: 0;
            border: 2.5px solid #fff; position: relative;
        }
        .logo-circle::after {
            content: ''; position: absolute; inset: 0; border-radius: 50%;
            border: 2px solid color-mix(in srgb, var(--theme-accent) 30%, transparent);
        }
        .logo-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .logo-circle-placeholder { color: white; font-size: 20px; font-weight: 900; }
        .logo-name { font-size: 20px; font-weight: 900; color: var(--black); letter-spacing: -0.5px; line-height: 1.1; }
        .logo-name span { display: block; font-size: 10px; font-weight: 600; color: var(--theme-accent); letter-spacing: 0.5px; text-transform: uppercase; }

        /* Desktop Nav */
        .desktop-nav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
        .nav-link {
            color: var(--gray-600); text-decoration: none; font-size: 14px; font-weight: 600;
            padding: 8px 14px; border-radius: var(--r-sm); transition: var(--t-fast);
            position: relative; white-space: nowrap;
        }
        .nav-link:hover, .nav-link.active { color: var(--black); background: var(--gray-100); }
        .nav-link.active::after {
            content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
            width: 16px; height: 2px; background: var(--theme-accent); border-radius: 2px;
        }

        /* Category Dropdown */
        .nav-dropdown { position: relative; }
        .dropdown-menu {
            position: absolute; top: calc(100% + 8px); right: 0;
            background: white; border: 1px solid var(--gray-200); border-radius: var(--r);
            min-width: 200px; box-shadow: var(--shadow-lg);
            opacity: 0; visibility: hidden; transform: translateY(-8px);
            transition: var(--t); z-index: 1000; overflow: hidden;
        }
        .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-item {
            display: flex; align-items: center; gap: 10px; padding: 12px 16px;
            color: var(--gray-600); text-decoration: none; font-size: 14px; font-weight: 500;
            transition: var(--t-fast); border-bottom: 1px solid var(--gray-100);
        }
        .dropdown-item:last-child { border-bottom: none; }
        .dropdown-item:hover { background: var(--off-white); color: var(--black); padding-right: 22px; }
        .dropdown-item i { color: var(--theme-accent); font-size: 12px; }

        /* Search */
        .search-wrap { flex: 1; max-width: 480px; margin: 0 auto; }
        .search-form {
            display: flex; align-items: center; background: var(--gray-100);
            border: 2px solid transparent; border-radius: 50px; overflow: hidden; transition: var(--t);
        }
        .search-form:focus-within {
            background: white; border-color: var(--theme-accent);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 15%, transparent);
        }
        .search-form input {
            flex: 1; background: none; border: none; outline: none;
            padding: 11px 18px; font-family: 'Cairo', sans-serif; font-size: 14px; color: var(--black);
        }
        .search-form input::placeholder { color: var(--gray-400); }
        .search-btn {
            background: var(--theme-accent); border: none; color: white;
            width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; margin: 2px; border-radius: 50px; transition: var(--t-fast); font-size: 14px;
        }
        .search-btn:hover { filter: brightness(0.85); }

        /* Header Actions */
        .header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .icon-btn {
            position: relative; width: 42px; height: 42px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%; cursor: pointer; transition: var(--t-fast);
            color: var(--gray-600); font-size: 18px; border: none; background: none; text-decoration: none;
        }
        .icon-btn:hover { background: var(--gray-100); color: var(--black); }
        .icon-btn .badge {
            position: absolute; top: 6px; left: 6px;
            background: var(--red); color: white; font-size: 10px; font-weight: 700;
            min-width: 17px; height: 17px; border-radius: 50px;
            display: flex; align-items: center; justify-content: center; border: 2px solid white;
        }

        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none; flex-direction: column; gap: 5px; cursor: pointer;
            padding: 8px; border-radius: var(--r-sm); border: none; background: none;
        }
        .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: var(--t); }
        .menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .menu-toggle.open span:nth-child(2) { opacity: 0; }
        .menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        /* Mobile Search */
        .mobile-search-bar { display: none; background: white; border-bottom: 1px solid var(--gray-200); padding: 10px 16px; }
        .mobile-search-bar .search-form { border-radius: var(--r-sm); }

        /* Mobile Menu */
        .mobile-menu {
            position: fixed; top: 0; right: -100%;
            width: min(340px, 100vw); height: 100vh;
            background: white; z-index: 1100;
            transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
            display: flex; flex-direction: column; box-shadow: var(--shadow-xl);
        }
        .mobile-menu.open { right: 0; }
        .mobile-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px); z-index: 1099;
            opacity: 0; visibility: hidden; transition: var(--t);
        }
        .mobile-overlay.open { opacity: 1; visibility: visible; }
        .mobile-menu-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
        .mobile-menu-body { flex: 1; overflow-y: auto; padding: 16px 0; }
        .mobile-nav-link {
            display: flex; align-items: center; gap: 14px; padding: 15px 24px;
            color: var(--gray-800); text-decoration: none; font-size: 16px; font-weight: 600;
            transition: var(--t-fast); border-bottom: 1px solid var(--gray-100);
        }
        .mobile-nav-link:hover { background: var(--off-white); color: var(--theme-accent); }
        .mobile-nav-link i { width: 20px; color: var(--theme-accent); font-size: 15px; }
        .mobile-cat-title { padding: 12px 24px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-400); }
        .close-menu-btn {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border: none; background: var(--gray-100); border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--gray-600);
        }

        /* ===== HERO ===== */
        .hero {
            background: var(--theme-primary);
            position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: center;
        }
        .hero-bg {
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 20%, rgba(200,169,110,0.10) 0%, transparent 50%);
        }
        .hero-pattern {
            position: absolute; inset: 0;
            background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 41px);
        }
        .hero-inner { max-width: 1400px; margin: 0 auto; padding: 56px 24px; position: relative; z-index: 1; }
        .hero-tag {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9);
            padding: 6px 16px; border-radius: 50px; font-size: 13px; font-weight: 600;
            margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.25);
        }
        .hero-title { font-size: clamp(26px, 5vw, 52px); font-weight: 900; color: white; line-height: 1.2; margin-bottom: 16px; max-width: 600px; }
        .hero-title span {
            background: linear-gradient(135deg, var(--accent), #f0c060);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .hero-sub { color: rgba(255,255,255,0.6); font-size: 15px; margin-bottom: 28px; max-width: 460px; }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

        .btn-primary {
            display: inline-flex; align-items: center; gap: 10px;
            background: var(--theme-accent); color: white;
            padding: 13px 26px; border-radius: var(--theme-radius);
            font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 700;
            text-decoration: none; border: none; cursor: pointer; transition: var(--t);
        }
        .btn-primary:hover { filter: brightness(0.88); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-accent) 45%, transparent); }

        .btn-outline {
            display: inline-flex; align-items: center; gap: 10px;
            background: transparent; color: white;
            padding: 13px 26px; border-radius: var(--theme-radius);
            font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 700;
            text-decoration: none; border: 2px solid rgba(255,255,255,0.3); cursor: pointer; transition: var(--t);
        }
        .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.08); }

        .hero-stats { display: flex; gap: 28px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
        .hero-stat-num { font-size: 26px; font-weight: 900; color: rgba(255,255,255,0.85); }
        .hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500; }

        /* ===== CATEGORY CHIPS ===== */
        .cats-section { background: white; border-bottom: 1px solid var(--gray-200); }
        .cats-inner { max-width: 1400px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
        .cats-inner::-webkit-scrollbar { display: none; }
        .cat-chip {
            display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px;
            border-radius: 50px; font-size: 13px; font-weight: 600; white-space: nowrap;
            cursor: pointer; text-decoration: none; transition: var(--t-fast);
            border: 1.5px solid var(--gray-200); color: var(--gray-600); background: white; flex-shrink: 0;
        }
        .cat-chip:hover, .cat-chip.active { background: var(--theme-accent); color: white; border-color: var(--theme-accent); }
        .cat-chip i { font-size: 11px; color: inherit; }

        /* ===== MAIN ===== */
        .main-wrap { max-width: 1400px; margin: 0 auto; padding: 40px 24px; }

        /* ===== SECTION HEADER ===== */
        .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
        .section-head-left h2 { font-size: 24px; font-weight: 900; color: var(--black); margin-bottom: 3px; }
        .section-head-left p { font-size: 13px; color: var(--gray-400); font-weight: 500; }
        .section-head-left h2 span { color: var(--theme-accent); }
        .view-all {
            display: inline-flex; align-items: center; gap: 6px;
            color: var(--black); font-size: 13px; font-weight: 700; text-decoration: none;
            padding: 8px 16px; border: 1.5px solid var(--gray-200); border-radius: 50px;
            transition: var(--t-fast); white-space: nowrap;
        }
        .view-all:hover { background: var(--theme-accent); color: white; border-color: var(--theme-accent); }

        /* ===== PRODUCT GRID ===== */
        .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

        /* ===== PRODUCT CARD ===== */
        .product-card {
            background: white; border-radius: var(--r-lg); overflow: hidden;
            border: 1px solid var(--gray-200); transition: var(--t);
            position: relative; cursor: pointer; text-decoration: none; color: inherit;
            display: flex; flex-direction: column;
        }
        .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }

        .card-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--gray-100); flex-shrink: 0; }
        .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
        .product-card:hover .card-img { transform: scale(1.08); }
        .card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 52px; color: var(--gray-300); background: linear-gradient(135deg, var(--gray-100), var(--cream)); }

        /* Badges */
        .card-badges { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
        .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
        .badge-sale { background: var(--red); color: white; }
        .badge-featured { background: var(--theme-accent); color: white; }

        /* Wishlist Button */
        .wishlist-btn {
            position: absolute; top: 12px; left: 12px; z-index: 3;
            width: 36px; height: 36px; background: white; border: none; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--t);
            font-size: 15px; color: var(--gray-400);
        }
        .wishlist-btn:hover { transform: scale(1.15); box-shadow: var(--shadow-md); }
        .wishlist-btn.liked { color: var(--red); background: var(--red-light); }
        .wishlist-btn i { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
        .wishlist-btn.pop i { animation: heartPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        @keyframes heartPop { 0%{transform:scale(1)} 50%{transform:scale(1.5)} 100%{transform:scale(1)} }

        /* Quick Add */
        .quick-add { position: absolute; bottom: -52px; left: 0; right: 0; padding: 10px; transition: bottom 0.3s cubic-bezier(0.4,0,0.2,1); z-index: 2; }
        .product-card:hover .quick-add { bottom: 0; }
        .quick-add-btn {
            width: 100%; background: rgba(10,10,10,0.90); color: white; border: none;
            padding: 11px 16px; border-radius: var(--r-sm);
            font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--t-fast);
        }
        .quick-add-btn:hover { background: var(--theme-accent); }

        /* Card Body */
        .card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
        .card-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--theme-accent); }
        .card-title { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .card-price-row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
        .price-current { font-size: 19px; font-weight: 900; color: var(--black); }
        .price-old { font-size: 13px; color: var(--gray-400); text-decoration: line-through; font-weight: 500; }
        .price-save { font-size: 11px; font-weight: 700; color: var(--red); background: var(--red-light); padding: 2px 7px; border-radius: 50px; }

        .card-footer { padding: 0 14px 14px; }
        .order-btn {
            width: 100%; background: var(--theme-primary); color: white; border: none;
            padding: 11px 16px; border-radius: var(--theme-radius);
            font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--t);
            text-decoration: none;
        }
        .order-btn:hover { background: var(--theme-accent); transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-accent) 35%, transparent); }

        /* ===== EMPTY STATE ===== */
        .empty-state { grid-column: 1/-1; text-align: center; padding: 80px 20px; }
        .empty-state-icon { width: 100px; height: 100px; background: var(--gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 40px; color: var(--gray-300); }
        .empty-state h3 { font-size: 22px; font-weight: 900; margin-bottom: 10px; }
        .empty-state p { color: var(--gray-400); font-size: 14px; margin-bottom: 24px; }

        /* ===== FILTERS ===== */
        .filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1050; opacity: 0; visibility: hidden; transition: var(--t); }
        .filter-overlay.open { opacity: 1; visibility: visible; }
        .filter-sidebar { position: fixed; top: 0; right: -360px; width: min(360px, 100vw); height: 100vh; background: white; z-index: 1060; transition: right 0.4s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
        .filter-sidebar.open { right: 0; }
        .filter-sidebar-head { padding: 20px 24px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
        .filter-sidebar-head h3 { font-size: 18px; font-weight: 900; }
        .filter-sidebar-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
        .filter-sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--gray-200); display: flex; gap: 10px; }
        .filter-group { margin-bottom: 28px; }
        .filter-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray-400); margin-bottom: 12px; display: block; }
        .radio-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer; transition: var(--t-fast); }
        .radio-option:hover { background: var(--gray-100); }
        .radio-option input[type="radio"], .radio-option input[type="checkbox"] { accent-color: var(--theme-accent); width: 16px; height: 16px; cursor: pointer; }
        .radio-option label { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--gray-600); }
        .price-input { width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: var(--r-sm); font-family: 'Cairo', sans-serif; font-size: 14px; outline: none; transition: var(--t-fast); }
        .price-input:focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 15%, transparent); }
        .btn-apply { flex: 1; background: var(--theme-accent); color: white; border: none; padding: 14px; border-radius: var(--r-sm); font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--t-fast); }
        .btn-apply:hover { filter: brightness(0.88); }
        .btn-reset { background: var(--gray-100); color: var(--gray-600); border: none; padding: 14px 20px; border-radius: var(--r-sm); font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--t-fast); text-decoration: none; display: flex; align-items: center; }
        .btn-reset:hover { background: var(--gray-200); color: var(--black); }

        /* ===== TOOLBAR ===== */
        .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
        .toolbar-left { display: flex; align-items: center; gap: 10px; }
        .filter-trigger { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid var(--gray-200); border-radius: 50px; cursor: pointer; font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 700; background: white; transition: var(--t-fast); color: var(--gray-600); }
        .filter-trigger:hover { border-color: var(--theme-accent); color: var(--theme-accent); }
        .filter-trigger.has-filters { background: var(--theme-accent); color: white; border-color: var(--theme-accent); }
        .result-count { font-size: 13px; color: var(--gray-400); font-weight: 500; }
        .result-count strong { color: var(--black); font-weight: 900; }

        /* ===== PAGINATION ===== */
        .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
        .page-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); color: var(--gray-600); text-decoration: none; font-size: 14px; font-weight: 700; transition: var(--t-fast); font-family: 'Cairo', sans-serif; }
        .page-btn:hover { border-color: var(--theme-accent); color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 10%, white); }
        .page-btn.active { background: var(--theme-accent); color: white; border-color: var(--theme-accent); }
        .page-btn.disabled { opacity: 0.35; pointer-events: none; }
        .page-btn.wide { width: auto; padding: 0 16px; gap: 6px; }
        .page-dots { color: var(--gray-400); font-size: 14px; }

        /* ===== BOTTOM NAV ===== */
        .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; padding-bottom: env(safe-area-inset-bottom, 0px); }
        .bottom-nav-bg { background: rgba(255,255,255,0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 -4px 24px rgba(0,0,0,0.08); }
        .bottom-nav-inner { display: flex; align-items: center; height: 62px; position: relative; }
        .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; text-decoration: none; color: #9ca3af; font-size: 10px; font-weight: 700; transition: color 0.2s ease; cursor: pointer; border: none; background: none; font-family: 'Cairo', sans-serif; position: relative; letter-spacing: 0.2px; }
        .bottom-nav-item .bnav-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 17px; transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); }
        .bottom-nav-item:hover .bnav-icon, .bottom-nav-item.active .bnav-icon { background: color-mix(in srgb, var(--theme-accent) 15%, white); color: var(--theme-accent); transform: translateY(-1px) scale(1.08); }
        .bottom-nav-item.active { color: var(--theme-accent); }
        .bottom-nav-item .bnav-badge { position: absolute; top: 6px; left: calc(50% + 5px); background: var(--red); color: white; font-size: 9px; min-width: 15px; height: 15px; border-radius: 50px; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid white; }
        .bottom-nav-cta { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 4px; cursor: pointer; border: none; background: none; font-family: 'Cairo', sans-serif; text-decoration: none; }
        .bottom-nav-cta-inner { width: 50px; height: 50px; background: var(--theme-accent); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-accent) 50%, transparent); transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); margin-top: -12px; }
        .bottom-nav-cta:hover .bottom-nav-cta-inner, .bottom-nav-cta:active .bottom-nav-cta-inner { transform: scale(1.1) translateY(-2px); }
        .bnav-heart-fill { display: none; color: var(--red); }
        .wishlist-nav.has-items .bnav-heart-empty { display: none; }
        .wishlist-nav.has-items .bnav-heart-fill { display: block; }

        /* ===== WISHLIST PANEL ===== */
        .wishlist-panel { position: fixed; top: 0; left: -400px; width: min(400px, 100vw); height: 100vh; background: white; z-index: 1100; transition: left 0.4s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
        .wishlist-panel.open { left: 0; }
        .wishlist-panel-head { padding: 20px 24px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
        .wishlist-panel-head h3 { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
        .wishlist-panel-head h3 i { color: var(--red); }
        .wishlist-panel-body { flex: 1; overflow-y: auto; padding: 16px; }
        .wishlist-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 16px; color: var(--gray-400); text-align: center; }
        .wishlist-empty i { font-size: 60px; color: var(--gray-200); }
        .wishlist-empty p { font-size: 14px; font-weight: 600; }
        .wishlist-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); align-items: center; }
        .wishlist-item-img { width: 70px; height: 70px; border-radius: var(--r-sm); object-fit: cover; background: var(--gray-100); flex-shrink: 0; }
        .wishlist-item-info { flex: 1; min-width: 0; }
        .wishlist-item-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wishlist-item-price { font-size: 15px; font-weight: 900; }
        .wishlist-item-remove { background: none; border: none; color: var(--gray-300); font-size: 18px; cursor: pointer; padding: 4px; border-radius: 50%; transition: var(--t-fast); }
        .wishlist-item-remove:hover { color: var(--red); }

        /* ===== FOOTER ===== */
        .footer { background: var(--theme-primary); color: white; margin-top: 80px; }
        .footer-top { max-width: 1400px; margin: 0 auto; padding: 60px 24px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
        .footer-brand p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.8; margin-top: 16px; max-width: 300px; }
        .footer-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 20px; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; font-weight: 500; transition: var(--t-fast); display: inline-flex; align-items: center; gap: 8px; }
        .footer-links a:hover { color: white; }
        .social-row { display: flex; gap: 10px; margin-top: 20px; }
        .social-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; transition: var(--t); }
        .social-btn:hover { background: var(--theme-accent); transform: translateY(-3px); }
        .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; padding: 20px 24px; color: rgba(255,255,255,0.35); font-size: 13px; }

        /* ===== SCROLL TOP ===== */
        .scroll-top-btn { position: fixed; bottom: 24px; left: 24px; width: 46px; height: 46px; background: var(--theme-primary); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; box-shadow: var(--shadow-lg); transition: var(--t); opacity: 0; visibility: hidden; z-index: 700; }
        .scroll-top-btn.show { opacity: 1; visibility: visible; }
        .scroll-top-btn:hover { background: var(--theme-accent); transform: translateY(-3px); }

        /* ===== TOAST ===== */
        .toast-container { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
        .toast { background: var(--theme-primary); color: white; padding: 11px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; white-space: nowrap; }
        .toast.removing { animation: toastOut 0.3s ease forwards; }
        .toast i { color: var(--theme-accent); }
        @keyframes toastIn { from{opacity:0;transform:translateY(20px) scale(0.9)} to{opacity:1;transform:translateY(0) scale(1)} }
        @keyframes toastOut { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-10px) scale(0.95)} }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1200px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1/-1; } .desktop-nav { display: none; } .menu-toggle { display: flex; } }
        @media (max-width: 600px) {
            .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .main-wrap { padding: 24px 16px; padding-bottom: 90px; }
            .hero-inner { padding: 36px 16px; }
            .cats-inner { padding: 10px 16px; }
            .bottom-nav { display: flex; flex-direction: column; }
            .scroll-top-btn { bottom: 80px; left: 16px; }
            .mobile-search-bar { display: block; }
            .search-wrap { display: none; }
            .header-inner { height: 58px; padding: 0 14px; }
            .hero-stats { gap: 16px; }
            .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 36px 16px 20px; }
            .footer { margin-bottom: 70px; }
            .card-body { padding: 10px; gap: 4px; }
            .card-footer { padding: 0 10px 10px; }
            .card-title { font-size: 13px; }
            .price-current { font-size: 16px; }
            .order-btn { padding: 10px; font-size: 13px; }
            .logo-circle { width: 40px; height: 40px; }
            .logo-name { font-size: 17px; }
            .hero-title { font-size: clamp(22px, 6vw, 36px); }
        }
        @media (max-width: 400px) { .products-grid { gap: 10px; } }

        /* Stagger animation */
        .product-card { opacity: 0; animation: cardIn 0.5s ease forwards; }
        .product-card:nth-child(1){animation-delay:.05s} .product-card:nth-child(2){animation-delay:.10s}
        .product-card:nth-child(3){animation-delay:.15s} .product-card:nth-child(4){animation-delay:.20s}
        .product-card:nth-child(5){animation-delay:.25s} .product-card:nth-child(6){animation-delay:.30s}
        .product-card:nth-child(7){animation-delay:.35s} .product-card:nth-child(8){animation-delay:.40s}
        @keyframes cardIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
    </style>
</head>
<body>

<!-- Announcement Bar -->
<div class="announce-bar">
    <div class="announce-pills">
        <div class="announce-pill"><i class="fas fa-truck"></i> توصيل سريع لجميع ولايات الجزائر</div>
        <div class="announce-sep"></div>
        <div class="announce-pill"><i class="fas fa-hand-holding-usd"></i> دفع عند الاستلام</div>
    </div>
</div>

<!-- Header -->
<header class="header" id="mainHeader">
    <div class="header-inner">
        <button class="menu-toggle" id="menuToggle" aria-label="فتح القائمة">
            <span></span><span></span><span></span>
        </button>
        <a href="index.php" class="logo">
            <div class="logo-circle">
                <?php if(!empty($store['logo'])): ?>
                    <img src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>"
                         alt="<?php echo htmlspecialchars($store['name']); ?>"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
                    <div class="logo-circle-placeholder" style="display:none;"><?php echo mb_substr($store['name'], 0, 1); ?></div>
                <?php else: ?>
                    <div class="logo-circle-placeholder"><?php echo mb_substr($store['name'], 0, 1); ?></div>
                <?php endif; ?>
            </div>
            <div class="logo-name">
                <?php echo htmlspecialchars($store['name']); ?>
                <span>متجر إلكتروني</span>
            </div>
        </a>
        <nav class="desktop-nav">
            <a href="index.php" class="nav-link active">الرئيسية</a>
            <div class="nav-dropdown">
                <a href="#" class="nav-link">الأقسام <i class="fas fa-chevron-down" style="font-size:10px;margin-right:4px;"></i></a>
                <div class="dropdown-menu">
                    <a href="?" class="dropdown-item"><i class="fas fa-th-large"></i> كل الأقسام</a>
                    <?php foreach ($categories as $cat): ?>
                        <a href="?category=<?php echo $cat['id']; ?>" class="dropdown-item">
                            <i class="fas fa-arrow-left"></i> <?php echo htmlspecialchars($cat['name']); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
            <a href="track_order.php" class="nav-link">طلباتي</a>
        </nav>
        <div class="search-wrap">
            <form action="" method="GET" class="search-form">
                <input type="text" name="search" placeholder="ابحث عن منتج..." value="<?php echo htmlspecialchars($searchQuery); ?>" autocomplete="off">
                <button type="submit" class="search-btn" aria-label="بحث"><i class="fas fa-search"></i></button>
            </form>
        </div>
        <div class="header-actions">
            <button class="icon-btn" id="wishlistToggle" title="المفضلة">
                <i class="fas fa-heart"></i>
                <span class="badge" id="wishlistBadge" style="display:none;">0</span>
            </button>
            <a href="tel:<?php echo htmlspecialchars($store['phone']); ?>" class="icon-btn" title="اتصل بنا">
                <i class="fas fa-phone-alt"></i>
            </a>
        </div>
    </div>
</header>

<!-- Mobile Search -->
<div class="mobile-search-bar">
    <form action="" method="GET" class="search-form">
        <input type="text" name="search" placeholder="ابحث عن منتج..." value="<?php echo htmlspecialchars($searchQuery); ?>" autocomplete="off">
        <button type="submit" class="search-btn" aria-label="بحث"><i class="fas fa-search"></i></button>
    </form>
</div>

<!-- Mobile Overlay & Menu -->
<div class="mobile-overlay" id="mobileOverlay"></div>
<div class="mobile-menu" id="mobileMenu">
    <div class="mobile-menu-header">
        <div class="logo">
            <div class="logo-circle" style="width:38px;height:38px;">
                <?php if(!empty($store['logo'])): ?>
                    <img src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>" alt="">
                <?php else: ?>
                    <div class="logo-circle-placeholder" style="font-size:16px;"><?php echo mb_substr($store['name'], 0, 1); ?></div>
                <?php endif; ?>
            </div>
            <span class="logo-name" style="font-size:17px;"><?php echo htmlspecialchars($store['name']); ?></span>
        </div>
        <button class="close-menu-btn" id="closeMenu"><i class="fas fa-times"></i></button>
    </div>
    <div class="mobile-menu-body">
        <a href="index.php" class="mobile-nav-link"><i class="fas fa-home"></i> الرئيسية</a>
        <a href="track_order.php" class="mobile-nav-link"><i class="fas fa-box"></i> طلباتي</a>
        <div class="mobile-cat-title">الأقسام</div>
        <a href="?" class="mobile-nav-link"><i class="fas fa-th-large"></i> كل المنتجات</a>
        <?php foreach ($categories as $cat): ?>
            <a href="?category=<?php echo $cat['id']; ?>" class="mobile-nav-link">
                <i class="fas fa-tag"></i> <?php echo htmlspecialchars($cat['name']); ?>
            </a>
        <?php endforeach; ?>
        <div class="mobile-cat-title">تواصل معنا</div>
        <a href="tel:<?php echo htmlspecialchars($store['phone']); ?>" class="mobile-nav-link">
            <i class="fas fa-phone-alt"></i> <?php echo htmlspecialchars($store['phone']); ?>
        </a>
    </div>
</div>

<!-- Hero -->
<section class="hero">
    <div class="hero-bg"></div>
    <div class="hero-pattern"></div>
    <div class="hero-inner">
        <div class="hero-tag"><i class="fas fa-certificate" style="color:rgba(255,255,255,0.8);"></i> متجر موثوق ومعتمد</div>
        <h1 class="hero-title"><?php echo htmlspecialchars($store['name']); ?><br><span>أفضل الأسعار</span></h1>
        <p class="hero-sub"><?php echo htmlspecialchars($store['description'] ?? 'اكتشف مجموعتنا المميزة من المنتجات بأفضل الأسعار وأسرع التوصيل'); ?></p>
        <div class="hero-actions">
            <a href="#products-section" class="btn-primary"><i class="fas fa-shopping-bag"></i> تسوق الآن</a>
            <a href="track_order.php" class="btn-outline"><i class="fas fa-search"></i> تتبع طلبك</a>
        </div>
        <div class="hero-stats">
            <div><div class="hero-stat-num"><?php echo $totalProducts; ?>+</div><div class="hero-stat-label">منتج متاح</div></div>
            <div><div class="hero-stat-num"><i class="fas fa-truck" style="font-size:20px;"></i></div><div class="hero-stat-label">توصيل سريع</div></div>
            <div><div class="hero-stat-num">100%</div><div class="hero-stat-label">ضمان الجودة</div></div>
        </div>
    </div>
</section>

<!-- Category Chips -->
<div class="cats-section">
    <div class="cats-inner">
        <a href="?" class="cat-chip <?php echo empty($categoryFilter) ? 'active' : ''; ?>"><i class="fas fa-th-large"></i> الكل</a>
        <?php foreach ($categories as $cat): ?>
            <a href="?category=<?php echo $cat['id']; ?>" class="cat-chip <?php echo $categoryFilter == $cat['id'] ? 'active' : ''; ?>">
                <i class="fas fa-tag"></i> <?php echo htmlspecialchars($cat['name']); ?>
            </a>
        <?php endforeach; ?>
        <a href="?discount=1" class="cat-chip <?php echo $discountFilter ? 'active' : ''; ?>" style="<?php echo $discountFilter ? '' : 'border-color:#ffcdd2; color:#c62828;'; ?>">
            <i class="fas fa-percent"></i> عروض
        </a>
    </div>
</div>

<!-- Main -->
<main class="main-wrap">

    <!-- Featured Products -->
    <?php if ($featuredProducts && empty($searchQuery) && empty($categoryFilter) && !$discountFilter): ?>
    <div style="margin-bottom: 52px;">
        <div class="section-head">
            <div class="section-head-left">
                <h2>منتجات <span>مميزة</span></h2>
                <p>اختيارات خاصة لك</p>
            </div>
            <a href="?discount=1" class="view-all"><i class="fas fa-percent"></i> العروض</a>
        </div>
        <div class="products-grid">
            <?php foreach ($featuredProducts as $prod):
                $hasDiscount = $prod['discounted_price'] && $prod['discounted_price'] < $prod['price'];
                $finalPrice = $hasDiscount ? $prod['discounted_price'] : $prod['price'];
                $discPct = $hasDiscount ? round(($prod['price'] - $prod['discounted_price']) / $prod['price'] * 100) : 0;
                $imgUrl = !empty($prod['image']) ? BASE_URL . 'admin/' . htmlspecialchars($prod['image']) : '';
            ?>
            <a href="det.php?id=<?php echo $prod['id']; ?>" class="product-card"
               data-id="<?php echo $prod['id']; ?>"
               data-name="<?php echo htmlspecialchars($prod['name'], ENT_QUOTES); ?>"
               data-price="<?php echo $finalPrice; ?>"
               data-img="<?php echo $imgUrl; ?>">
                <div class="card-img-wrap">
                    <?php if ($imgUrl): ?>
                        <img src="<?php echo $imgUrl; ?>" alt="<?php echo htmlspecialchars($prod['name']); ?>" class="card-img" loading="lazy">
                    <?php else: ?>
                        <div class="card-img-placeholder"><i class="fas fa-pills"></i></div>
                    <?php endif; ?>
                    <div class="card-badges">
                        <span class="badge badge-featured"><i class="fas fa-star"></i> مميز</span>
                        <?php if ($hasDiscount): ?><span class="badge badge-sale">-<?php echo $discPct; ?>%</span><?php endif; ?>
                    </div>
                    <button class="wishlist-btn" data-id="<?php echo $prod['id']; ?>" onclick="toggleWishlist(event, this)"><i class="fas fa-heart"></i></button>
                    <div class="quick-add">
                        <button class="quick-add-btn" onclick="event.preventDefault(); window.location.href='det.php?id=<?php echo $prod['id']; ?>'">
                            <i class="fas fa-shopping-cart"></i> اطلب الآن
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-category"><?php echo htmlspecialchars(getCategoryName($pdo, $prod['category_id'])); ?></div>
                    <div class="card-title"><?php echo htmlspecialchars($prod['name']); ?></div>
                    <div class="card-price-row">
                        <span class="price-current"><?php echo number_format($finalPrice, 0); ?> دج</span>
                        <?php if ($hasDiscount): ?>
                            <span class="price-old"><?php echo number_format($prod['price'], 0); ?> دج</span>
                            <span class="price-save">وفر <?php echo $discPct; ?>%</span>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="order-btn"><i class="fas fa-bolt"></i> اطلب الآن</div>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- All Products -->
    <div id="products-section">
        <div class="section-head">
            <div class="section-head-left">
                <h2>
                    <?php if(!empty($searchQuery)): ?>
                        نتائج "<span><?php echo htmlspecialchars($searchQuery); ?></span>"
                    <?php elseif($categoryFilter): ?>
                        قسم <span><?php echo htmlspecialchars(getCategoryName($pdo, $categoryFilter)); ?></span>
                    <?php elseif($discountFilter): ?>
                        <span>العروض والخصومات</span>
                    <?php else: ?>
                        جميع <span>المنتجات</span>
                    <?php endif; ?>
                </h2>
                <p><?php echo $totalProducts; ?> منتج متاح</p>
            </div>
        </div>

        <div class="toolbar">
            <div class="toolbar-left">
                <button class="filter-trigger <?php echo ($categoryFilter || $maxPriceFilter || $discountFilter) ? 'has-filters' : ''; ?>" id="filterTrigger">
                    <i class="fas fa-sliders-h"></i> تصفية
                    <?php if ($categoryFilter || $maxPriceFilter || $discountFilter): ?>
                        <span style="background:rgba(255,255,255,0.3);color:white;border-radius:50px;padding:1px 8px;font-size:11px;">فعال</span>
                    <?php endif; ?>
                </button>
                <?php if ($categoryFilter || $maxPriceFilter || $discountFilter || !empty($searchQuery)): ?>
                    <a href="?" style="font-size:13px;color:var(--gray-400);text-decoration:none;display:flex;align-items:center;gap:4px;">
                        <i class="fas fa-times-circle"></i> إلغاء الفلاتر
                    </a>
                <?php endif; ?>
            </div>
            <div class="result-count">عرض <strong><?php echo count($products); ?></strong> من <strong><?php echo $totalProducts; ?></strong></div>
        </div>

        <div class="products-grid">
            <?php if (!empty($products)):
                foreach ($products as $prod):
                    $hasDiscount = $prod['discounted_price'] && $prod['discounted_price'] < $prod['price'];
                    $finalPrice = $hasDiscount ? $prod['discounted_price'] : $prod['price'];
                    $discPct = $hasDiscount ? round(($prod['price'] - $prod['discounted_price']) / $prod['price'] * 100) : 0;
                    $imgUrl = !empty($prod['image']) ? BASE_URL . 'admin/' . htmlspecialchars($prod['image']) : '';
            ?>
            <a href="det.php?id=<?php echo $prod['id']; ?>" class="product-card"
               data-id="<?php echo $prod['id']; ?>"
               data-name="<?php echo htmlspecialchars($prod['name'], ENT_QUOTES); ?>"
               data-price="<?php echo $finalPrice; ?>"
               data-img="<?php echo $imgUrl; ?>">
                <div class="card-img-wrap">
                    <?php if ($imgUrl): ?>
                        <img src="<?php echo $imgUrl; ?>" alt="<?php echo htmlspecialchars($prod['name']); ?>" class="card-img" loading="lazy">
                    <?php else: ?>
                        <div class="card-img-placeholder"><i class="fas fa-pills"></i></div>
                    <?php endif; ?>
                    <div class="card-badges">
                        <?php if ($hasDiscount): ?><span class="badge badge-sale">-<?php echo $discPct; ?>%</span><?php endif; ?>
                    </div>
                    <button class="wishlist-btn" data-id="<?php echo $prod['id']; ?>" onclick="toggleWishlist(event, this)"><i class="fas fa-heart"></i></button>
                    <div class="quick-add">
                        <button class="quick-add-btn" onclick="event.preventDefault(); window.location.href='det.php?id=<?php echo $prod['id']; ?>'">
                            <i class="fas fa-shopping-cart"></i> اطلب الآن
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-category"><?php echo htmlspecialchars(getCategoryName($pdo, $prod['category_id'])); ?></div>
                    <div class="card-title"><?php echo htmlspecialchars($prod['name']); ?></div>
                    <div class="card-price-row">
                        <span class="price-current"><?php echo number_format($finalPrice, 0); ?> دج</span>
                        <?php if ($hasDiscount): ?>
                            <span class="price-old"><?php echo number_format($prod['price'], 0); ?> دج</span>
                            <span class="price-save">وفر <?php echo $discPct; ?>%</span>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="order-btn"><i class="fas fa-bolt"></i> اطلب الآن</div>
                </div>
            </a>
            <?php endforeach;
            else: ?>
                <div class="empty-state">
                    <div class="empty-state-icon"><i class="fas fa-search"></i></div>
                    <h3>لا توجد نتائج</h3>
                    <p>جرب كلمات بحث مختلفة أو غيّر الفلاتر</p>
                    <a href="?" class="btn-primary" style="display:inline-flex;margin:0 auto;"><i class="fas fa-redo"></i> عرض الكل</a>
                </div>
            <?php endif; ?>
        </div>

        <!-- Pagination -->
        <?php if ($totalPages > 1):
            $queryParams = $_GET;
            unset($queryParams['page']);
        ?>
        <div class="pagination">
            <?php if ($page > 1): ?>
                <a href="?page=<?php echo $page - 1; ?>&<?php echo http_build_query($queryParams); ?>" class="page-btn wide"><i class="fas fa-chevron-right"></i> السابق</a>
            <?php else: ?>
                <span class="page-btn wide disabled"><i class="fas fa-chevron-right"></i> السابق</span>
            <?php endif; ?>
            <?php if ($page > 3): ?>
                <a href="?page=1&<?php echo http_build_query($queryParams); ?>" class="page-btn">1</a>
                <?php if ($page > 4): ?><span class="page-dots">...</span><?php endif; ?>
            <?php endif; ?>
            <?php for ($i = max(1, $page - 2); $i <= min($totalPages, $page + 2); $i++): ?>
                <a href="?page=<?php echo $i; ?>&<?php echo http_build_query($queryParams); ?>" class="page-btn <?php echo $i == $page ? 'active' : ''; ?>"><?php echo $i; ?></a>
            <?php endfor; ?>
            <?php if ($page < $totalPages - 2): ?>
                <?php if ($page < $totalPages - 3): ?><span class="page-dots">...</span><?php endif; ?>
                <a href="?page=<?php echo $totalPages; ?>&<?php echo http_build_query($queryParams); ?>" class="page-btn"><?php echo $totalPages; ?></a>
            <?php endif; ?>
            <?php if ($page < $totalPages): ?>
                <a href="?page=<?php echo $page + 1; ?>&<?php echo http_build_query($queryParams); ?>" class="page-btn wide">التالي <i class="fas fa-chevron-left"></i></a>
            <?php else: ?>
                <span class="page-btn wide disabled">التالي <i class="fas fa-chevron-left"></i></span>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>
</main>

<!-- Filter Sidebar -->
<div class="filter-overlay" id="filterOverlay"></div>
<div class="filter-sidebar" id="filterSidebar">
    <div class="filter-sidebar-head">
        <h3><i class="fas fa-sliders-h" style="color:var(--theme-accent);margin-left:8px;"></i> تصفية المنتجات</h3>
        <button class="close-menu-btn" id="closeFilter"><i class="fas fa-times"></i></button>
    </div>
    <div class="filter-sidebar-body">
        <form action="" method="GET" id="filterForm">
            <?php if (!empty($searchQuery)): ?>
                <input type="hidden" name="search" value="<?php echo htmlspecialchars($searchQuery); ?>">
            <?php endif; ?>
            <div class="filter-group">
                <span class="filter-group-label">الأقسام</span>
                <div class="radio-option">
                    <input type="radio" name="category" id="cat_all" value="" <?php echo empty($categoryFilter) ? 'checked' : ''; ?>>
                    <label for="cat_all">كل الأقسام</label>
                </div>
                <?php foreach ($categories as $cat): ?>
                    <div class="radio-option">
                        <input type="radio" name="category" id="cat_<?php echo $cat['id']; ?>" value="<?php echo $cat['id']; ?>" <?php echo $categoryFilter == $cat['id'] ? 'checked' : ''; ?>>
                        <label for="cat_<?php echo $cat['id']; ?>"><?php echo htmlspecialchars($cat['name']); ?></label>
                    </div>
                <?php endforeach; ?>
            </div>
            <div class="filter-group">
                <span class="filter-group-label">الحد الأقصى للسعر</span>
                <input type="number" name="max_price" class="price-input" placeholder="مثال: 5000 دج" value="<?php echo isset($_GET['max_price']) ? htmlspecialchars($_GET['max_price']) : ''; ?>" min="0" step="100">
            </div>
            <div class="filter-group">
                <span class="filter-group-label">العروض</span>
                <div class="radio-option">
                    <input type="checkbox" name="discount" id="discount" value="1" <?php echo $discountFilter ? 'checked' : ''; ?>>
                    <label for="discount">عروض وخصومات فقط</label>
                </div>
            </div>
        </form>
    </div>
    <div class="filter-sidebar-footer">
        <button class="btn-apply" onclick="document.getElementById('filterForm').submit()"><i class="fas fa-check"></i> تطبيق</button>
        <a href="?" class="btn-reset"><i class="fas fa-undo"></i></a>
    </div>
</div>

<!-- Wishlist Panel -->
<div class="filter-overlay" id="wishlistOverlay"></div>
<div class="wishlist-panel" id="wishlistPanel">
    <div class="wishlist-panel-head">
        <h3><i class="fas fa-heart"></i> المفضلة</h3>
        <button class="close-menu-btn" id="closeWishlist"><i class="fas fa-times"></i></button>
    </div>
    <div class="wishlist-panel-body" id="wishlistBody">
        <div class="wishlist-empty">
            <i class="far fa-heart"></i>
            <p>قائمة المفضلة فارغة</p>
            <small style="color:var(--gray-300);">اضغط على القلب لإضافة منتج</small>
        </div>
    </div>
</div>

<!-- Bottom Nav -->
<nav class="bottom-nav">
    <div class="bottom-nav-bg">
        <div class="bottom-nav-inner">
            <a href="index.php" class="bottom-nav-item active">
                <div class="bnav-icon"><i class="fas fa-home"></i></div>
                <span>الرئيسية</span>
            </a>
            <button class="bottom-nav-item" id="filterTriggerMobile">
                <div class="bnav-icon"><i class="fas fa-sliders-h"></i></div>
                <span>تصفية</span>
            </button>
            <a href="#products-section" class="bottom-nav-cta" id="bnavShopBtn">
                <div class="bottom-nav-cta-inner"><i class="fas fa-shopping-bag"></i></div>
            </a>
            <button class="bottom-nav-item wishlist-nav" id="wishlistToggleMobile">
                <div class="bnav-icon">
                    <i class="far fa-heart bnav-heart-empty"></i>
                    <i class="fas fa-heart bnav-heart-fill"></i>
                </div>
                <span class="bnav-badge" id="bnavBadge" style="display:none;">0</span>
                <span>المفضلة</span>
            </button>
            <button class="bottom-nav-item" id="menuToggleMobile">
                <div class="bnav-icon"><i class="fas fa-bars"></i></div>
                <span>القائمة</span>
            </button>
        </div>
    </div>
</nav>

<!-- Scroll Top -->
<button class="scroll-top-btn" id="scrollTopBtn" aria-label="العودة للأعلى">
    <i class="fas fa-chevron-up"></i>
</button>

<!-- Toast -->
<div class="toast-container" id="toastContainer"></div>

<script>
// ===== THEME — postMessage للمعاينة المباشرة من الـ customizer =====
window.addEventListener('message', function(e) {
    if (!e.data || e.data.type !== 'THEME_UPDATE') return;
    const t = e.data.theme;
    const root = document.documentElement.style;
    if (t.primary_color) {
        root.setProperty('--theme-primary', t.primary_color);
        // تحديث لون الـ hero أيضاً مباشرة
        document.querySelector('.hero')?.style.setProperty('background', t.primary_color);
    }
    if (t.accent_color) {
        root.setProperty('--theme-accent', t.accent_color);
        root.setProperty('--blue-primary', t.accent_color);
    }
    if (t.bg_color) {
        root.setProperty('--theme-bg', t.bg_color);
        document.body.style.background = t.bg_color;
    }
    if (t.btn_radius) {
        root.setProperty('--theme-radius', t.btn_radius);
    }
});

// ===== WISHLIST =====
let wishlist = JSON.parse(localStorage.getItem('medshop_wishlist') || '[]');
function saveWishlist() { localStorage.setItem('medshop_wishlist', JSON.stringify(wishlist)); }

function toggleWishlist(event, btn) {
    event.preventDefault(); event.stopPropagation();
    const card = btn.closest('.product-card');
    const id = parseInt(card.dataset.id);
    const name = card.dataset.name;
    const price = parseFloat(card.dataset.price);
    const img = card.dataset.img;
    btn.classList.add('pop');
    setTimeout(() => btn.classList.remove('pop'), 400);
    const idx = wishlist.findIndex(p => p.id === id);
    if (idx === -1) {
        wishlist.push({ id, name, price, img });
        btn.classList.add('liked');
        showToast('❤️ أضيف للمفضلة');
    } else {
        wishlist.splice(idx, 1);
        btn.classList.remove('liked');
        showToast('💔 حذف من المفضلة');
    }
    saveWishlist(); updateWishlistUI(); renderWishlistPanel();
}

function updateWishlistUI() {
    const count = wishlist.length;
    const badge = document.getElementById('wishlistBadge');
    const bnavBadge = document.getElementById('bnavBadge');
    const wishlistNavBtn = document.getElementById('wishlistToggleMobile');
    if (badge) { badge.textContent = count; badge.style.display = count > 0 ? 'flex' : 'none'; }
    if (bnavBadge) { bnavBadge.textContent = count; bnavBadge.style.display = count > 0 ? 'flex' : 'none'; }
    if (wishlistNavBtn) { wishlistNavBtn.classList.toggle('has-items', count > 0); }
    document.querySelectorAll('.wishlist-btn').forEach(btn => {
        const card = btn.closest('.product-card');
        if (!card) return;
        const id = parseInt(card.dataset.id);
        btn.classList.toggle('liked', !!wishlist.find(p => p.id === id));
    });
}

function renderWishlistPanel() {
    const body = document.getElementById('wishlistBody');
    if (!body) return;
    if (wishlist.length === 0) {
        body.innerHTML = `<div class="wishlist-empty"><i class="far fa-heart"></i><p>قائمة المفضلة فارغة</p><small style="color:var(--gray-300);">اضغط على القلب لإضافة منتج</small></div>`;
        return;
    }
    body.innerHTML = wishlist.map(p => `
        <div class="wishlist-item">
            ${p.img ? `<img src="${p.img}" class="wishlist-item-img" alt="${p.name}" onerror="this.style.display='none'">` : `<div class="wishlist-item-img" style="display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--gray-300);"><i class="fas fa-pills"></i></div>`}
            <div class="wishlist-item-info">
                <div class="wishlist-item-name">${p.name}</div>
                <div class="wishlist-item-price">${parseInt(p.price).toLocaleString('ar-DZ')} دج</div>
                <a href="det.php?id=${p.id}" style="font-size:12px;color:var(--theme-accent);font-weight:700;text-decoration:none;margin-top:4px;display:inline-block;"><i class="fas fa-eye"></i> عرض</a>
            </div>
            <button class="wishlist-item-remove" onclick="removeFromWishlist(${p.id})"><i class="fas fa-times"></i></button>
        </div>`).join('');
}

function removeFromWishlist(id) {
    wishlist = wishlist.filter(p => p.id !== id);
    saveWishlist(); updateWishlistUI(); renderWishlistPanel();
    document.querySelectorAll('.wishlist-btn').forEach(btn => {
        const card = btn.closest('.product-card');
        if (card && parseInt(card.dataset.id) === id) btn.classList.remove('liked');
    });
    showToast('💔 حذف من المفضلة');
}

// ===== TOAST =====
function showToast(msg) {
    const container = document.getElementById('toastContainer');
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.innerHTML = msg;
    container.appendChild(toast);
    setTimeout(() => { toast.classList.add('removing'); setTimeout(() => toast.remove(), 300); }, 2500);
}

// ===== PANELS =====
function openPanel(panelId, overlayId) {
    document.getElementById(panelId).classList.add('open');
    document.getElementById(overlayId).classList.add('open');
    document.body.style.overflow = 'hidden';
}
function closePanel(panelId, overlayId) {
    document.getElementById(panelId).classList.remove('open');
    document.getElementById(overlayId).classList.remove('open');
    document.body.style.overflow = '';
}

document.getElementById('wishlistToggle')?.addEventListener('click', () => { renderWishlistPanel(); openPanel('wishlistPanel', 'wishlistOverlay'); });
document.getElementById('wishlistToggleMobile')?.addEventListener('click', () => { renderWishlistPanel(); openPanel('wishlistPanel', 'wishlistOverlay'); });
document.getElementById('closeWishlist')?.addEventListener('click', () => closePanel('wishlistPanel', 'wishlistOverlay'));
document.getElementById('wishlistOverlay')?.addEventListener('click', () => closePanel('wishlistPanel', 'wishlistOverlay'));
document.getElementById('filterTrigger')?.addEventListener('click', () => openPanel('filterSidebar', 'filterOverlay'));
document.getElementById('filterTriggerMobile')?.addEventListener('click', () => openPanel('filterSidebar', 'filterOverlay'));
document.getElementById('closeFilter')?.addEventListener('click', () => closePanel('filterSidebar', 'filterOverlay'));
document.getElementById('filterOverlay')?.addEventListener('click', () => closePanel('filterSidebar', 'filterOverlay'));
document.getElementById('menuToggle')?.addEventListener('click', () => { openPanel('mobileMenu', 'mobileOverlay'); document.getElementById('menuToggle').classList.add('open'); });
document.getElementById('menuToggleMobile')?.addEventListener('click', () => openPanel('mobileMenu', 'mobileOverlay'));
document.getElementById('closeMenu')?.addEventListener('click', () => { closePanel('mobileMenu', 'mobileOverlay'); document.getElementById('menuToggle').classList.remove('open'); });
document.getElementById('mobileOverlay')?.addEventListener('click', () => { closePanel('mobileMenu', 'mobileOverlay'); document.getElementById('menuToggle').classList.remove('open'); });
document.getElementById('bnavShopBtn')?.addEventListener('click', (e) => { e.preventDefault(); document.getElementById('products-section')?.scrollIntoView({ behavior: 'smooth' }); });

// ===== SCROLL =====
const scrollTopBtn = document.getElementById('scrollTopBtn');
const mainHeader = document.getElementById('mainHeader');
window.addEventListener('scroll', () => {
    const y = window.scrollY;
    mainHeader.classList.toggle('scrolled', y > 80);
    scrollTopBtn.classList.toggle('show', y > 400);
}, { passive: true });
scrollTopBtn?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

document.querySelectorAll('a[href="#products-section"]').forEach(a => {
    a.addEventListener('click', e => { e.preventDefault(); document.getElementById('products-section')?.scrollIntoView({ behavior: 'smooth' }); });
});

document.querySelectorAll('.card-img').forEach(img => {
    img.addEventListener('error', function() {
        this.style.display = 'none';
        const wrap = this.closest('.card-img-wrap');
        if (wrap) { const ph = document.createElement('div'); ph.className = 'card-img-placeholder'; ph.innerHTML = '<i class="fas fa-pills"></i>'; wrap.prepend(ph); }
    });
});

// ===== INIT =====
updateWishlistUI();

// ===== META PIXEL =====
<?php if ($pixel && $pixel['meta_pixel_enabled'] && !empty(trim($pixel['meta_pixel_id']))): ?>
document.querySelectorAll('.product-card').forEach(card => {
    let tracked = false;
    card.addEventListener('mouseenter', () => {
        if (tracked) return; tracked = true;
        if (typeof fbq !== 'undefined') {
            fbq('track', 'ViewContent', { content_ids: [card.dataset.id], content_name: card.dataset.name, content_type: 'product', value: parseFloat(card.dataset.price), currency: 'DZD' });
        }
    });
});
<?php endif; ?>
</script>

<!-- Footer -->
<footer class="footer">
    <div class="footer-top">
        <div class="footer-brand">
            <div class="logo">
                <div class="logo-circle" style="width:44px;height:44px;">
                    <?php if(!empty($store['logo'])): ?>
                        <img src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>" alt="">
                    <?php else: ?>
                        <div class="logo-circle-placeholder"><?php echo mb_substr($store['name'], 0, 1); ?></div>
                    <?php endif; ?>
                </div>
                <span class="logo-name" style="color:white;font-size:20px;"><?php echo htmlspecialchars($store['name']); ?></span>
            </div>
            <p><?php echo htmlspecialchars($store['description'] ?? ''); ?></p>
            <div class="social-row">
                <?php if (!empty($store['facebook'])): ?><a href="<?php echo htmlspecialchars($store['facebook']); ?>" class="social-btn" target="_blank"><i class="fab fa-facebook-f"></i></a><?php endif; ?>
                <?php if (!empty($store['telegram'])): ?><a href="<?php echo htmlspecialchars($store['telegram']); ?>" class="social-btn" target="_blank"><i class="fab fa-telegram-plane"></i></a><?php endif; ?>
                <?php if (!empty($store['instgrame'])): ?><a href="<?php echo htmlspecialchars($store['instgrame']); ?>" class="social-btn" target="_blank"><i class="fab fa-instagram"></i></a><?php endif; ?>
                <?php if (!empty($store['youtube'])): ?><a href="<?php echo htmlspecialchars($store['youtube']); ?>" class="social-btn" target="_blank"><i class="fab fa-youtube"></i></a><?php endif; ?>
            </div>
        </div>
        <div>
            <div class="footer-title">روابط سريعة</div>
            <ul class="footer-links">
                <li><a href="index.php"><i class="fas fa-chevron-left"></i> الرئيسية</a></li>
                <li><a href="?"><i class="fas fa-chevron-left"></i> جميع المنتجات</a></li>
                <li><a href="?discount=1"><i class="fas fa-chevron-left"></i> العروض</a></li>
                <li><a href="track_order.php"><i class="fas fa-chevron-left"></i> تتبع الطلب</a></li>
            </ul>
        </div>
        <div>
            <div class="footer-title">تواصل معنا</div>
            <ul class="footer-links">
                <li><a href="tel:<?php echo htmlspecialchars($store['phone']); ?>"><i class="fas fa-phone-alt"></i> <?php echo htmlspecialchars($store['phone']); ?></a></li>
                <li><a href="mailto:<?php echo htmlspecialchars($store['emailp']); ?>"><i class="fas fa-envelope"></i> <?php echo htmlspecialchars($store['emailp']); ?></a></li>
            </ul>
        </div>
    </div>
    <div class="footer-bottom">
        جميع الحقوق محفوظة © <?php echo date('Y'); ?> —
        <strong style="color:var(--theme-accent);"><?php echo htmlspecialchars($store['name']); ?></strong>
    </div>
</footer>

</body>
</html>