<?php
// تعريف BASE_URL

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once __DIR__ . '/db.php';

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();

$stmt2 = $pdo->query("SELECT * FROM stores WHERE id = 1");
$store = $stmt2->fetch();

$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() ?: 'غير مصنف';
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riham Cosmetics - ريهام كوسميتك</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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <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=Tajawal:wght@300;400;500;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

    <style>
        :root {
            --rose:       #e8547a;
            --rose-light: #f9a8bf;
            --rose-dark:  #c0395c;
            --blush:      #fce4ec;
            --blush-deep: #f8bbd9;
            --green:      #6abf69;
            --green-dark: #388e3c;
            --cream:      #fff8f9;
            --white:      #ffffff;
            --text-dark:  #3a1a24;
            --text-mid:   #7a4a5a;
            --text-light: #b08090;
            --shadow-sm:  0 2px 12px rgba(232,84,122,0.10);
            --shadow-md:  0 6px 28px rgba(232,84,122,0.18);
            --shadow-lg:  0 16px 48px rgba(232,84,122,0.22);
            --radius:     18px;
            --radius-sm:  10px;
            --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
        }

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

        body {
            background: var(--cream);
            color: var(--text-dark);
            font-family: 'Tajawal', sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* ===== PETAL BACKGROUND PATTERN ===== */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                radial-gradient(circle at 15% 20%, rgba(249,168,191,0.18) 0%, transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(106,191,105,0.12) 0%, transparent 35%),
                radial-gradient(circle at 50% 50%, rgba(252,228,236,0.25) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

        /* ===== TOP BAR ===== */
        .topbar {
            background: linear-gradient(90deg, var(--rose-dark), var(--rose), var(--rose-dark));
            background-size: 200% 100%;
            animation: shimmer-bar 4s linear infinite;
            padding: 9px 0;
            color: white;
            font-size: 13px;
            position: relative;
            z-index: 10;
        }
        @keyframes shimmer-bar {
            0%{background-position:0% 0%} 100%{background-position:200% 0%}
        }
        .topbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .topbar a {
            color: rgba(255,255,255,0.93);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition);
        }
        .topbar a:hover { color: white; transform: translateY(-1px); }
        .topbar-links { display: flex; gap: 20px; }
        .topbar-badge {
            background: rgba(255,255,255,0.22);
            border-radius: 20px;
            padding: 2px 12px;
            font-size: 12px;
            letter-spacing: 0.5px;
        }

        /* ===== HEADER ===== */
        .header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(16px);
            box-shadow: 0 2px 20px rgba(232,84,122,0.10);
            border-bottom: 2px solid var(--blush-deep);
        }
        .header-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        /* ===== LOGO ===== */
        .logo-area {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-shrink: 0;
        }
        .logo-img-wrap {
            position: relative;
            width: 68px;
            height: 68px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--rose-light);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        .logo-img-wrap:hover {
            transform: scale(1.06) rotate(-2deg);
            box-shadow: var(--shadow-md);
        }
        .logo-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .logo-text-block { line-height: 1.2; }
        .logo-name {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 700;
            color: var(--rose-dark);
            letter-spacing: -0.3px;
        }
        .logo-name span {
            font-style: italic;
            color: var(--green-dark);
        }
        .logo-sub {
            font-size: 12px;
            color: var(--text-light);
            font-weight: 300;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* ===== SEARCH ===== */
        .search-wrap {
            flex: 1;
            max-width: 520px;
        }
        .search-form {
            display: flex;
            border: 2px solid var(--blush-deep);
            border-radius: 50px;
            overflow: hidden;
            transition: var(--transition);
            background: var(--blush);
        }
        .search-form:focus-within {
            border-color: var(--rose);
            box-shadow: 0 0 0 4px rgba(232,84,122,0.12);
            background: white;
        }
        .search-form input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            padding: 12px 20px;
            font-size: 15px;
            font-family: 'Tajawal', sans-serif;
            color: var(--text-dark);
        }
        .search-form input::placeholder { color: var(--text-light); }
        .search-form button {
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            border: none;
            padding: 0 22px;
            color: white;
            cursor: pointer;
            font-size: 16px;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .search-form button:hover { background: linear-gradient(135deg, var(--rose-dark), #a02545); }

        /* ===== NAV ===== */
        .navbar {
            background: linear-gradient(90deg, var(--rose-dark) 0%, var(--rose) 50%, var(--green) 100%);
            position: relative;
        }
        .navbar::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--rose-dark), var(--rose-light), var(--green), var(--rose-light), var(--rose-dark));
        }
        .nav-list {
            list-style: none;
            display: flex;
            justify-content: center;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
        }
        .nav-item > a {
            display: flex;
            align-items: center;
            gap: 7px;
            color: white;
            text-decoration: none;
            padding: 16px 22px;
            font-weight: 500;
            font-size: 15px;
            transition: var(--transition);
            position: relative;
        }
        .nav-item > a::after {
            content: '';
            position: absolute;
            bottom: 8px; left: 50%; right: 50%;
            height: 2px;
            background: white;
            border-radius: 2px;
            transition: var(--transition);
        }
        .nav-item > a:hover::after { left: 16px; right: 16px; }
        .nav-item > a:hover { background: rgba(255,255,255,0.12); }

        /* Dropdown */
        .nav-item { position: relative; }
        .dropdown {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: white;
            min-width: 230px;
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-lg);
            display: none;
            overflow: hidden;
            border: 1px solid var(--blush-deep);
            z-index: 200;
        }
        .nav-item:hover .dropdown { display: block; animation: dropIn 0.25s ease; }
        @keyframes dropIn {
            from { opacity:0; transform:translateY(-8px); }
            to   { opacity:1; transform:translateY(0); }
        }
        .dropdown a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 11px 18px;
            color: var(--text-dark);
            text-decoration: none;
            font-size: 14px;
            border-bottom: 1px solid var(--blush);
            transition: var(--transition);
        }
        .dropdown a:last-child { border-bottom: none; }
        .dropdown a:hover { background: var(--blush); color: var(--rose-dark); padding-right: 24px; }

        /* ===== HERO BANNER ===== */
        .hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--blush) 0%, #fff0f5 40%, #f0fff0 100%);
            padding: 60px 24px;
            text-align: center;
            z-index: 1;
        }
        .hero-deco {
            position: absolute;
            border-radius: 50%;
            opacity: 0.18;
            pointer-events: none;
        }
        .hero-deco-1 { width:300px; height:300px; background:var(--rose-light); top:-80px; right:-60px; }
        .hero-deco-2 { width:200px; height:200px; background:var(--green); bottom:-40px; left:-40px; }
        .hero-deco-3 { width:140px; height:140px; background:var(--rose); top:30%; left:10%; }
        .hero-eyebrow {
            display: inline-block;
            background: linear-gradient(90deg, var(--rose), var(--green));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 14px;
        }
        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(32px, 5vw, 58px);
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.15;
            margin-bottom: 18px;
        }
        .hero-title em {
            font-style: italic;
            color: var(--rose-dark);
        }
        .hero-desc {
            color: var(--text-mid);
            font-size: 17px;
            max-width: 500px;
            margin: 0 auto 30px;
        }
        .hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            padding: 14px 36px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            box-shadow: 0 8px 24px rgba(192,57,92,0.35);
            transition: var(--transition);
        }
        .hero-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 32px rgba(192,57,92,0.45);
        }
        .hero-flowers {
            position: absolute;
            font-size: 28px;
            opacity: 0.25;
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%,100%{transform:translateY(0) rotate(0deg)}
            50%{transform:translateY(-16px) rotate(12deg)}
        }

        /* ===== SECTION TITLE ===== */
        .section-head {
            text-align: center;
            margin: 50px 0 32px;
            position: relative;
            z-index: 1;
        }
        .section-head h2 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(22px, 3vw, 36px);
            color: var(--text-dark);
            display: inline-block;
            position: relative;
            padding-bottom: 14px;
        }
        .section-head h2::before,
        .section-head h2::after {
            content: '✦';
            color: var(--rose-light);
            font-size: 18px;
            margin: 0 12px;
        }
        .section-head h2 .line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 64px;
            height: 3px;
            background: linear-gradient(90deg, var(--rose), var(--green));
            border-radius: 2px;
        }
        .section-head p {
            color: var(--text-light);
            font-size: 15px;
            margin-top: 8px;
        }

        /* ===== PRODUCT GRID ===== */
        .container { max-width:1400px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 28px;
        }

        /* ===== PRODUCT CARD ===== */
        .product-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            border: 1.5px solid var(--blush-deep);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            text-decoration: none;
            color: inherit;
            display: block;
            position: relative;
            animation: cardIn 0.5s ease both;
            animation-delay: calc(var(--i, 0) * 0.07s);
        }
        @keyframes cardIn {
            from { opacity:0; transform:translateY(22px) scale(0.97); }
            to   { opacity:1; transform:translateY(0) scale(1); }
        }
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
            border-color: var(--rose-light);
        }

        /* Discount badge */
        .badge-discount {
            position: absolute;
            top: 14px;
            right: 14px;
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            padding: 5px 13px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            z-index: 3;
            box-shadow: 0 3px 10px rgba(192,57,92,0.3);
        }
        .badge-featured {
            position: absolute;
            top: 14px;
            left: 14px;
            background: linear-gradient(135deg, var(--green), var(--green-dark));
            color: white;
            padding: 5px 13px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            z-index: 3;
            box-shadow: 0 3px 10px rgba(56,142,60,0.25);
        }

        /* Image */
        .card-img {
            position: relative;
            height: 230px;
            overflow: hidden;
            background: linear-gradient(135deg, var(--blush), #fce4f0);
        }
        .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .product-card:hover .card-img 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(--rose-light);
        }

        /* Overlay on hover */
        .card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(192,57,92,0.75) 100%);
            opacity: 0;
            transition: var(--transition);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 16px;
        }
        .product-card:hover .card-overlay { opacity: 1; }
        .overlay-btn {
            background: white;
            color: var(--rose-dark);
            border: none;
            padding: 10px 28px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transform: translateY(10px);
            transition: var(--transition);
            font-family: 'Tajawal', sans-serif;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .product-card:hover .overlay-btn { transform: translateY(0); }
        .overlay-btn:hover { background: var(--rose-dark); color: white; }

        /* Card body */
        .card-body { padding: 18px; }
        .card-cat {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--blush);
            color: var(--rose-dark);
            padding: 3px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .card-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 10px;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .card-price {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }
        .price-current {
            font-size: 22px;
            font-weight: 800;
            color: var(--rose-dark);
        }
        .price-old {
            font-size: 15px;
            color: var(--text-light);
            text-decoration: line-through;
        }
        .card-btn {
            width: 100%;
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            border: none;
            padding: 12px;
            border-radius: var(--radius-sm);
            font-family: 'Tajawal', sans-serif;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
            text-decoration: none;
        }
        .card-btn:hover {
            background: linear-gradient(135deg, var(--rose-dark), #8c1f3a);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(192,57,92,0.35);
        }

        /* ===== FILTER BUTTON ===== */
        .filter-fab {
            position: fixed;
            top: 50%;
            right: 22px;
            transform: translateY(-50%);
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            border: none;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            z-index: 200;
        }
        .filter-fab:hover { transform: translateY(-50%) scale(1.1); box-shadow: var(--shadow-lg); }

        /* ===== FILTER SIDEBAR ===== */
        .filter-sidebar {
            position: fixed;
            top: 0; right: -360px;
            width: 340px;
            height: 100%;
            background: white;
            box-shadow: var(--shadow-lg);
            z-index: 500;
            transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
            overflow-y: auto;
            border-left: 2px solid var(--blush-deep);
        }
        .filter-sidebar.open { right: 0; }
        .filter-sidebar-head {
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            padding: 22px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .filter-sidebar-head h3 { font-size: 18px; margin: 0; }
        .filter-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        .filter-close:hover { background: rgba(255,255,255,0.35); }
        .filter-body { padding: 20px; }
        .filter-section { margin-bottom: 24px; }
        .filter-section-title {
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
        }
        .filter-section-title i { color: var(--rose); }
        .filter-radio, .filter-check {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .filter-radio input, .filter-check input { accent-color: var(--rose); cursor: pointer; }
        .filter-input {
            width: 100%;
            padding: 10px 14px;
            border: 2px solid var(--blush-deep);
            border-radius: var(--radius-sm);
            font-family: 'Tajawal', sans-serif;
            font-size: 14px;
            outline: none;
            transition: var(--transition);
        }
        .filter-input:focus { border-color: var(--rose); }
        .filter-apply {
            width: 100%;
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            border: none;
            padding: 13px;
            border-radius: var(--radius-sm);
            font-family: 'Tajawal', sans-serif;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        .filter-apply:hover { background: linear-gradient(135deg, var(--rose-dark), #8c1f3a); }
        .filter-reset {
            display: block;
            text-align: center;
            color: var(--rose);
            font-weight: 600;
            text-decoration: none;
            font-size: 14px;
            transition: var(--transition);
        }
        .filter-reset:hover { color: var(--rose-dark); }

        /* ===== PAGINATION ===== */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin: 50px 0;
            flex-wrap: wrap;
        }
        .page-link {
            padding: 10px 18px;
            border: 2px solid var(--blush-deep);
            border-radius: var(--radius-sm);
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 600;
            transition: var(--transition);
            background: white;
        }
        .page-link:hover, .page-link.active {
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            border-color: var(--rose);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(192,57,92,0.3);
        }
        .page-dots { color: var(--text-light); padding: 0 6px; }

        /* ===== FOOTER ===== */
        .footer {
            background: linear-gradient(135deg, var(--text-dark) 0%, #5a1a2a 50%, #1a3a1a 100%);
            color: white;
            padding: 55px 0 22px;
            margin-top: 70px;
            position: relative;
            overflow: hidden;
        }
        .footer::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--rose-dark), var(--rose-light), var(--green), var(--rose-light), var(--rose-dark));
        }
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-title {
            font-family: 'Playfair Display', serif;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--rose-light);
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .footer-desc { color: rgba(255,255,255,0.75); line-height: 1.8; font-size: 14px; }
        .footer-links { list-style: none; padding: 0; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a {
            color: rgba(255,255,255,0.75);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 14px;
            transition: var(--transition);
        }
        .footer-links a i { color: var(--rose-light); }
        .footer-links a:hover { color: white; transform: translateX(-4px); }
        .social-row {
            display: flex;
            gap: 12px;
            margin-top: 18px;
        }
        .social-row a {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: var(--transition);
            font-size: 16px;
        }
        .social-row a:hover { background: var(--rose); transform: translateY(-3px); }
        .footer-bottom {
            text-align: center;
            padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.5);
            font-size: 13px;
        }
        .footer-bottom span { color: var(--rose-light); }

        /* ===== MOBILE NAV ===== */
        .mobile-nav {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: white;
            border-top: 2px solid var(--blush-deep);
            box-shadow: 0 -4px 20px rgba(232,84,122,0.12);
            z-index: 300;
            display: none;
        }
        .mobile-nav-list {
            display: flex;
            list-style: none;
            justify-content: space-around;
            padding: 8px 0;
        }
        .mobile-nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-light);
            font-size: 12px;
            gap: 4px;
            padding: 4px 12px;
            border-radius: var(--radius-sm);
            transition: var(--transition);
        }
        .mobile-nav-link.active, .mobile-nav-link:hover {
            color: var(--rose-dark);
            background: var(--blush);
        }
        .mobile-nav-link i { font-size: 20px; }

        /* ===== SCROLL TOP ===== */
        .scroll-top {
            position: fixed;
            bottom: 24px;
            left: 24px;
            background: linear-gradient(135deg, var(--rose), var(--rose-dark));
            color: white;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 200;
            box-shadow: var(--shadow-md);
            border: none;
            font-size: 16px;
        }
        .scroll-top.show { opacity: 1; visibility: visible; }
        .scroll-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

        /* ===== EMPTY STATE ===== */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            grid-column: 1 / -1;
        }
        .empty-state i { font-size: 56px; color: var(--rose-light); margin-bottom: 16px; }
        .empty-state h3 { color: var(--text-dark); font-size: 20px; margin-bottom: 8px; }
        .empty-state p { color: var(--text-light); margin-bottom: 20px; }

        /* ===== OVERLAY ===== */
        .overlay-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(58,26,36,0.4);
            backdrop-filter: blur(3px);
            z-index: 400;
            display: none;
        }
        .overlay-backdrop.show { display: block; }

        /* ===== RESPONSIVE ===== */
        @media(max-width:768px) {
            .header-inner { flex-wrap: wrap; }
            .nav-list { display: none; }
            .mobile-nav { display: block; }
            body { padding-bottom: 70px; }
            .footer { margin-bottom: 60px; }
            .scroll-top { bottom: 80px; }
            .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .hero { padding: 40px 16px; }
        }
        @media(max-width:480px) {
            .products-grid { grid-template-columns: 1fr; }
            .filter-sidebar { width: 100%; right: -100%; }
        }
    </style>
</head>
<body>

    <!-- Scroll Top -->
    <button class="scroll-top" id="scrollTop"><i class="fas fa-chevron-up"></i></button>

    <!-- Top Bar -->
    <div class="topbar">
        <div class="container">
            <div class="topbar-links">
                <a href="tel:<?php echo htmlspecialchars($store['phone']); ?>">
                    <i class="fas fa-phone-alt"></i>
                    <?php echo htmlspecialchars($store['phone']); ?>
                </a>
                <a href="mailto:<?php echo htmlspecialchars($store['emailp']); ?>">
                    <i class="fas fa-envelope"></i>
                    <?php echo htmlspecialchars($store['emailp']); ?>
                </a>
            </div>
            <span class="topbar-badge">🌸 منتجات تجميل أصيلة</span>
        </div>
    </div>

    <!-- Header -->
    <header class="header">
        <div class="header-inner">
            <!-- Logo -->
            <div class="logo-area">
                <div class="logo-img-wrap">
                    <?php if (!empty($store['logo'])): ?>
                        <img src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>"
                             alt="Riham Cosmetics"
                             onerror="this.style.display='none'">
                    <?php else: ?>
                        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--blush);font-size:28px;">🌸</div>
                    <?php endif; ?>
                </div>
                <div class="logo-text-block">
                    <div class="logo-name">Riham <span>Cosmetics</span></div>
                    <div class="logo-sub">ريهام كوسميتك</div>
                </div>
            </div>

            <!-- Search -->
            <div class="search-wrap">
                <form class="search-form" action="" method="GET" id="searchForm">
                    <input type="text" name="search" placeholder="ابحثي عن منتج جمالك..."
                           value="<?php echo htmlspecialchars($searchQuery); ?>">
                    <button type="submit"><i class="fas fa-search"></i> بحث</button>
                </form>
            </div>
        </div>

        <!-- Desktop Nav -->
        <nav class="navbar">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="index.php"><i class="fas fa-home"></i> الرئيسية</a>
                </li>
                <li class="nav-item">
                    <a href="track_order.php"><i class="fas fa-box"></i> طلباتك</a>
                </li>
                <li class="nav-item">
                    <a href="#"><i class="fas fa-th-large"></i> الأقسام <i class="fas fa-chevron-down" style="font-size:11px"></i></a>
                    <div class="dropdown">
                        <a href="?category="><i class="fas fa-star"></i> كل الأقسام</a>
                        <?php foreach ($categories as $cat): ?>
                            <a href="?category=<?php echo $cat['id']; ?>">
                                <i class="fas fa-angle-left"></i>
                                <?php echo htmlspecialchars($cat['name']); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#"><i class="fas fa-heart"></i> عنا</a>
                </li>
                <li class="nav-item">
                    <a href="#"><i class="fas fa-phone-alt"></i> اتصلي بنا</a>
                </li>
            </ul>
        </nav>
    </header>

    <!-- Hero Banner -->
    <section class="hero">
        <div class="hero-deco hero-deco-1"></div>
        <div class="hero-deco hero-deco-2"></div>
        <div class="hero-deco hero-deco-3"></div>
        <span class="hero-flowers" style="top:15%;right:8%;animation-delay:0s">🌸</span>
        <span class="hero-flowers" style="top:70%;right:20%;animation-delay:1.2s;font-size:20px">🌺</span>
        <span class="hero-flowers" style="top:25%;left:5%;animation-delay:0.6s;font-size:22px">🌷</span>
        <span class="hero-flowers" style="bottom:20%;left:25%;animation-delay:2s;font-size:16px">✿</span>
        <div style="position:relative;z-index:2;">
            <p class="hero-eyebrow">✦ مرحباً بك في عالم الجمال ✦</p>
            <h1 class="hero-title">
                جمالك يبدأ مع<br>
                <em>Riham Cosmetics</em>
            </h1>
            <p class="hero-desc">أفضل منتجات التجميل الأصيلة — بشرتك تستحق الأجمل 🌿</p>
            <a href="#products-section" class="hero-cta">
                <i class="fas fa-sparkles"></i>
                تسوقي الآن
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </section>

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

        <?php
        // Featured Products
        $stmt = $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
        ");
        $featuredProducts = $stmt->fetchAll();

        if ($featuredProducts):
        ?>
        <section>
            <div class="section-head">
                <h2>🌟 منتجات مميزة <span class="line"></span></h2>
                <p>اختيارات خاصة لك من أفضل منتجاتنا</p>
            </div>
            <div class="products-grid">
                <?php foreach ($featuredProducts as $i => $fp):
                    $discount = '';
                    $discPct = 0;
                    if ($fp['discounted_price'] && $fp['discounted_price'] < $fp['price']) {
                        $discPct = round(($fp['price'] - $fp['discounted_price']) / $fp['price'] * 100);
                        $discount = '<span class="badge-discount">خصم ' . $discPct . '%</span>';
                    }
                    $imgUrl = !empty($fp['image']) ? BASE_URL . 'admin/' . htmlspecialchars($fp['image']) : '';
                    $catName = getCategoryName($pdo, $fp['category_id']);
                    $price = $fp['discounted_price'] ?: $fp['price'];
                ?>
                <a href="det.php?id=<?php echo $fp['id']; ?>" class="product-card"
                   style="--i:<?php echo $i; ?>"
                   data-id="<?php echo $fp['id']; ?>"
                   data-name="<?php echo htmlspecialchars($fp['name'], ENT_QUOTES); ?>"
                   data-price="<?php echo $price; ?>"
                   data-cat="<?php echo htmlspecialchars($catName, ENT_QUOTES); ?>">
                    <span class="badge-featured">✦ مميز</span>
                    <?php echo $discount; ?>
                    <div class="card-img">
                        <?php if ($imgUrl): ?>
                            <img src="<?php echo $imgUrl; ?>" alt="<?php echo htmlspecialchars($fp['name']); ?>">
                        <?php else: ?>
                            <div class="card-img-placeholder">💄</div>
                        <?php endif; ?>
                        <div class="card-overlay">
                            <button class="overlay-btn"
                                onclick="event.preventDefault();event.stopPropagation();window.location.href='det.php?id=<?php echo $fp['id']; ?>'">
                                <i class="fas fa-eye"></i> عرض المنتج
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <span class="card-cat"><i class="fas fa-tag"></i> <?php echo htmlspecialchars($catName); ?></span>
                        <h3 class="card-title"><?php echo htmlspecialchars($fp['name']); ?></h3>
                        <div class="card-price">
                            <span class="price-current"><?php echo number_format($price, 2); ?> دج</span>
                            <?php if ($fp['discounted_price']): ?>
                                <span class="price-old"><?php echo number_format($fp['price'], 2); ?> دج</span>
                            <?php endif; ?>
                        </div>
                        <button class="card-btn"
                            onclick="event.preventDefault();event.stopPropagation();trackCart(<?php echo $fp['id']; ?>,'<?php echo htmlspecialchars($fp['name'],ENT_QUOTES); ?>',<?php echo $price; ?>);window.location.href='det.php?id=<?php echo $fp['id']; ?>'">
                            <i class="fas fa-shopping-bag"></i> اطلبي الآن
                        </button>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
        </section>
        <?php endif; ?>

        <!-- All Products -->
        <section id="products-section">
            <div class="section-head">
                <h2>🛍️ جميع المنتجات <span class="line"></span></h2>
                <p>اكتشفي مجموعتنا الكاملة من منتجات التجميل</p>
            </div>

            <div class="products-grid">
                <?php if (!empty($products)): ?>
                    <?php foreach ($products as $i => $p):
                        $discount = '';
                        if ($p['discounted_price'] && $p['discounted_price'] < $p['price']) {
                            $pct = round(($p['price'] - $p['discounted_price']) / $p['price'] * 100);
                            $discount = '<span class="badge-discount">خصم ' . $pct . '%</span>';
                        }
                        $imgUrl = !empty($p['image']) ? BASE_URL . 'admin/' . htmlspecialchars($p['image']) : '';
                        $catName = getCategoryName($pdo, $p['category_id']);
                        $price = $p['discounted_price'] ?: $p['price'];
                    ?>
                    <a href="det.php?id=<?php echo $p['id']; ?>" class="product-card"
                       style="--i:<?php echo $i; ?>"
                       data-id="<?php echo $p['id']; ?>"
                       data-name="<?php echo htmlspecialchars($p['name'], ENT_QUOTES); ?>"
                       data-price="<?php echo $price; ?>"
                       data-cat="<?php echo htmlspecialchars($catName, ENT_QUOTES); ?>">
                        <?php echo $discount; ?>
                        <div class="card-img">
                            <?php if ($imgUrl): ?>
                                <img src="<?php echo $imgUrl; ?>" alt="<?php echo htmlspecialchars($p['name']); ?>">
                            <?php else: ?>
                                <div class="card-img-placeholder">💋</div>
                            <?php endif; ?>
                            <div class="card-overlay">
                                <button class="overlay-btn"
                                    onclick="event.preventDefault();event.stopPropagation();window.location.href='det.php?id=<?php echo $p['id']; ?>'">
                                    <i class="fas fa-eye"></i> عرض المنتج
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <span class="card-cat"><i class="fas fa-tag"></i> <?php echo htmlspecialchars($catName); ?></span>
                            <h3 class="card-title"><?php echo htmlspecialchars($p['name']); ?></h3>
                            <div class="card-price">
                                <span class="price-current"><?php echo number_format($price, 2); ?> دج</span>
                                <?php if ($p['discounted_price']): ?>
                                    <span class="price-old"><?php echo number_format($p['price'], 2); ?> دج</span>
                                <?php endif; ?>
                            </div>
                            <button class="card-btn"
                                onclick="event.preventDefault();event.stopPropagation();trackCart(<?php echo $p['id']; ?>,'<?php echo htmlspecialchars($p['name'],ENT_QUOTES); ?>',<?php echo $price; ?>);window.location.href='det.php?id=<?php echo $p['id']; ?>'">
                                <i class="fas fa-shopping-bag"></i> اطلبي الآن
                            </button>
                        </div>
                    </a>
                    <?php endforeach; ?>

                <?php elseif (!empty($searchQuery)): ?>
                    <div class="empty-state">
                        <i class="fas fa-search"></i>
                        <h3>لا توجد نتائج لبحثك</h3>
                        <p>جربي كلمات بحث مختلفة</p>
                        <a href="?" class="card-btn" style="display:inline-flex;max-width:200px;margin:0 auto">
                            <i class="fas fa-redo"></i> عرض الكل
                        </a>
                    </div>
                <?php else: ?>
                    <div class="empty-state">
                        <i class="fas fa-box-open"></i>
                        <h3>لا توجد منتجات حالياً</h3>
                        <p>سيتم إضافة منتجات جميلة قريباً 🌸</p>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Pagination -->
            <?php if ($totalPages > 1):
                $qp = $_GET;
                unset($qp['page']);
            ?>
            <div class="pagination">
                <?php if ($page > 1): ?>
                    <a href="?page=<?= $page-1 ?>&<?= http_build_query($qp) ?>" class="page-link">
                        <i class="fas fa-chevron-right"></i> السابق
                    </a>
                <?php endif; ?>

                <?php for ($i = max(1,$page-2); $i <= min($totalPages,$page+2); $i++): ?>
                    <a href="?page=<?= $i ?>&<?= http_build_query($qp) ?>"
                       class="page-link <?= $i==$page?'active':'' ?>"><?= $i ?></a>
                <?php endfor; ?>

                <?php if ($page < $totalPages): ?>
                    <a href="?page=<?= $page+1 ?>&<?= http_build_query($qp) ?>" class="page-link">
                        التالي <i class="fas fa-chevron-left"></i>
                    </a>
                <?php endif; ?>
            </div>
            <?php endif; ?>
        </section>
    </main>

    <!-- Filter FAB -->
    <button class="filter-fab" id="filterFab" title="تصفية المنتجات">
        <i class="fas fa-sliders-h"></i>
    </button>

    <!-- Overlay -->
    <div class="overlay-backdrop" id="overlayBackdrop"></div>

    <!-- Filter Sidebar -->
    <div class="filter-sidebar" id="filterSidebar">
        <div class="filter-sidebar-head">
            <h3><i class="fas fa-filter"></i> تصفية المنتجات</h3>
            <button class="filter-close" id="filterClose"><i class="fas fa-times"></i></button>
        </div>
        <div class="filter-body">
            <form action="" method="GET" id="filterForm">
                <?php if (isset($_GET['search'])): ?>
                    <input type="hidden" name="search" value="<?= htmlspecialchars($_GET['search']) ?>">
                <?php endif; ?>

                <!-- Categories -->
                <div class="filter-section">
                    <div class="filter-section-title"><i class="fas fa-tags"></i> الفئات</div>
                    <label class="filter-radio">
                        <input type="radio" name="category" value="" <?= empty($categoryFilter)?'checked':'' ?>>
                        كل الفئات
                    </label>
                    <?php foreach ($categories as $cat): ?>
                    <label class="filter-radio">
                        <input type="radio" name="category" value="<?= $cat['id'] ?>"
                               <?= $categoryFilter==$cat['id']?'checked':'' ?>>
                        <?= htmlspecialchars($cat['name']) ?>
                    </label>
                    <?php endforeach; ?>
                </div>

                <!-- Price -->
                <div class="filter-section">
                    <div class="filter-section-title"><i class="fas fa-money-bill-wave"></i> أقصى سعر</div>
                    <input type="number" name="max_price" class="filter-input"
                           value="<?= isset($_GET['max_price'])?htmlspecialchars($_GET['max_price']):'' ?>"
                           placeholder="مثال: 5000 دج" min="0">
                </div>

                <!-- Discount -->
                <div class="filter-section">
                    <div class="filter-section-title"><i class="fas fa-percentage"></i> العروض</div>
                    <label class="filter-check">
                        <input type="checkbox" name="discount" value="1"
                               <?= (isset($_GET['discount'])&&$_GET['discount']=='1')?'checked':'' ?>>
                        عروض وخصومات فقط 🏷️
                    </label>
                </div>

                <button type="submit" class="filter-apply">
                    <i class="fas fa-check"></i> تطبيق الفلتر
                </button>
                <a href="?" class="filter-reset"><i class="fas fa-redo"></i> إعادة تعيين</a>
            </form>
        </div>
    </div>

    <!-- Mobile Nav -->
    <nav class="mobile-nav">
        <ul class="mobile-nav-list">
            <li>
                <a href="index.php" class="mobile-nav-link <?= basename($_SERVER['PHP_SELF'])=='index.php'?'active':'' ?>">
                    <i class="fas fa-home"></i> الرئيسية
                </a>
            </li>
            <li>
                <a href="track_order.php" class="mobile-nav-link <?= basename($_SERVER['PHP_SELF'])=='track_order.php'?'active':'' ?>">
                    <i class="fas fa-shopping-bag"></i> طلباتي
                </a>
            </li>
        </ul>
    </nav>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div>
                    <h3 class="footer-title"><i class="fas fa-store"></i> Riham Cosmetics</h3>
                    <p class="footer-desc"><?php echo htmlspecialchars($store['description']); ?></p>
                    <div class="social-row">
                        <?php if (!empty($store['facebook'])): ?>
                            <a href="<?= htmlspecialchars($store['facebook']) ?>" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <?php endif; ?>
                        <?php if (!empty($store['telegram'])): ?>
                            <a href="<?= htmlspecialchars($store['telegram']) ?>" target="_blank"><i class="fab fa-telegram-plane"></i></a>
                        <?php endif; ?>
                        <?php if (!empty($store['instgrame'])): ?>
                            <a href="<?= htmlspecialchars($store['instgrame']) ?>" target="_blank"><i class="fab fa-instagram"></i></a>
                        <?php endif; ?>
                        <?php if (!empty($store['youtube'])): ?>
                            <a href="<?= htmlspecialchars($store['youtube']) ?>" target="_blank"><i class="fab fa-youtube"></i></a>
                        <?php endif; ?>
                    </div>
                </div>
                <div>
                    <h3 class="footer-title"><i class="fas fa-headset"></i> تواصلي معنا</h3>
                    <ul class="footer-links">
                        <li>
                            <a href="tel:<?= htmlspecialchars($store['phone']) ?>">
                                <i class="fas fa-phone"></i>
                                <?= htmlspecialchars($store['phone']) ?>
                            </a>
                        </li>
                        <li>
                            <a href="mailto:<?= htmlspecialchars($store['emailp']) ?>">
                                <i class="fas fa-envelope"></i>
                                <?= htmlspecialchars($store['emailp']) ?>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <i class="far fa-copyright"></i>
                جميع الحقوق محفوظة © <?php echo date('Y'); ?>
                <span>Riham Cosmetics</span> 🌸
            </div>
        </div>
    </footer>

    <script>
    function trackCart(id, name, price) {
        if (typeof fbq !== 'undefined') {
            fbq('track', 'AddToCart', {
                content_ids: [id], content_name: name,
                content_type: 'product', value: parseFloat(price), currency: 'DZD'
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Scroll top
        const scrollBtn = document.getElementById('scrollTop');
        window.addEventListener('scroll', () => {
            scrollBtn.classList.toggle('show', window.scrollY > 300);
        });
        scrollBtn.addEventListener('click', () => window.scrollTo({top:0,behavior:'smooth'}));

        // Filter sidebar
        const fab = document.getElementById('filterFab');
        const sidebar = document.getElementById('filterSidebar');
        const closeBtn = document.getElementById('filterClose');
        const backdrop = document.getElementById('overlayBackdrop');

        function openFilter() {
            sidebar.classList.add('open');
            backdrop.classList.add('show');
            document.body.style.overflow = 'hidden';
        }
        function closeFilter() {
            sidebar.classList.remove('open');
            backdrop.classList.remove('show');
            document.body.style.overflow = '';
        }

        fab.addEventListener('click', openFilter);
        closeBtn.addEventListener('click', closeFilter);
        backdrop.addEventListener('click', closeFilter);

        // Broken images
        document.querySelectorAll('.card-img img').forEach(img => {
            img.addEventListener('error', function() {
                this.parentElement.innerHTML = '<div class="card-img-placeholder">💋</div>';
            });
        });

        // Responsive nav
        function respNav() {
            const mn = document.querySelector('.mobile-nav');
            const dn = document.querySelector('.navbar');
            if (window.innerWidth <= 768) {
                mn && (mn.style.display = 'block');
                dn && (dn.style.display = 'none');
            } else {
                mn && (mn.style.display = 'none');
                dn && (dn.style.display = 'block');
            }
        }
        respNav();
        window.addEventListener('resize', respNav);

        // Track product views on hover
        document.querySelectorAll('.product-card').forEach(card => {
            let seen = false;
            card.addEventListener('mouseenter', () => {
                if (!seen && 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',
                        content_category: card.dataset.cat
                    });
                    seen = true;
                }
            });
        });
    });
    </script>
</body>
</html>