Build a complete single-file Arabic RTL e-commerce store for auto parts in HTML/CSS/JS.
Replicate the STRUCTURE, LAYOUT, CATEGORIES, and DESIGN of medrar.sa — not the data.

## TECH REQUIREMENTS
- Single HTML file — everything inline (no external files)
- Fonts: Cairo + Tajawal from Google Fonts
- Pure vanilla JS, no frameworks
- localStorage for cart/wishlist persistence
- Fully responsive: desktop / tablet / mobile

---

## SITE STRUCTURE & PAGE ORDER

### NAVBAR (sticky)
- Announcement bar (marquee, scrolling offers text)
- Main nav: Logo | الرئيسية | المتجر | المدونة | من نحن | تواصل معنا
- Right side: search input + cart icon with badge + my account icon
- Mobile: hamburger menu → slide-in drawer

---

## HOME PAGE — exact section order:

### Section 1 — Hero Banner
- Full-width dark banner with overlay gradient
- Large headline + subtitle + 2 CTA buttons

### Section 2 — Quick Category Icons Row
Horizontal scrollable row of 6 small icon+label cards:
[ زيوت المحركات ] [ الفلاتر والصيانة ] [ الفرامل ] [ الأجزاء الكهربائية ] [ اكسسوارات ] [ اسطبات وشمعات ]

### Section 3 — Brand Category Cards (3×2 grid)
Large clickable cards, each with icon + brand name + product count:
[ منتجات MD ] [ قطع غيار تويوتا ] [ قطع غيار لكزس ]
[ قطع غيار نيسان ] [ قطع غيار ميتسوبيشي ] [ قطع غيار ايسوزو ]

### Section 4 — Sub-brand Row (3 horizontal cards, full width)
[ كمبروسرات MD ] [ مساعدات MD ] [ قطع غيار MD ]

### Section 5 — Featured Products Grid
Section title + "عرض الكل" link
Grid: 4 cols desktop / 2 tablet / 1 mobile
Product cards (see card spec below)

### Section 6 — VIN Helper Banner
Full-width dark CTA section:
- Icon + title: "لا تتعب نفسك بالبحث!"
- Body text explaining VIN lookup service
- Button: "تواصل مع الفني"

### Section 7 — Blog Articles Row
Section title + "عرض الكل" link
3 article cards: thumbnail placeholder + date + author + title + excerpt + "قراءة المزيد"

### Section 8 — Stats Bar
4 animated counter stats in a horizontal dark band:
[ X منتج ] [ X عميل ] [ X طلب ] [ X فروع ]
Each with label underneath

### Section 9 — Installment Payment Partners
Section title
4 cards side by side:
[ تابي — 6 دفعات ] [ تمارا — 4 دفعات ] [ إمكان — 5 دفعات ] [ ام أي اس باي — 4 دفعات ]
Each card: icon placeholder + name + short description

### Section 10 — Customer Reviews Carousel
Section title + star average
Horizontal scrollable review cards:
Each card: avatar circle + name + star rating + review text

### FOOTER
4-column grid:
- Col 1 (wide): Logo + store description + Tax number field + app store badges (decorative) + "موثق لدى منصة الأعمال السعودية" badge
- Col 2: روابط مهمة (8 links)
- Col 3: أقسام المتجر (category links)
- Col 4: تواصل معنا (phone, email, social icons)
Bottom bar: copyright text + payment method icons row

---

## SHOP PAGE layout:

### Top: breadcrumb + page title + active filter chips (removable)
### Layout: sidebar (right, RTL) + products area (left)

**Sidebar filters:**
- Filter by brand: [ تويوتا ] [ لكزس ] [ نيسان ] [ ميتسوبيشي ] [ ايسوزو ] [ MD ] — checkboxes
- Filter by category: [ زيوت ] [ فلاتر ] [ فرامل ] [ كهرباء ] [ تعليق ] [ كمبروسرات ] [ اسطبات وشمعات ] [ اكسسوارات ] — checkboxes
- Price range: two inputs (min / max) + apply button
- Clear all filters link

**Products area header:**
- Result count | Sort dropdown | Grid/List toggle buttons

**Products grid:** 3 cols → 2 → 1

---

## PRODUCT CARD SPEC (used in shop + home sections):
- Image area (emoji/icon centered, dark bg)
- Top-right badges: [ خصم % ] [ جديد ] [ مميز ]
- Top-left: wishlist heart toggle button
- Brand label (colored, uppercase, small)
- Product name (bold)
- Part number (monospace, gold/muted)
- Short description (2-line clamp)
- Price row: current price (large, accent color) + old price (strikethrough, muted) if on sale
- Stock status line: ✅ متوفر / ⚠️ كمية محدودة / ❌ نفذ
- Add to cart button (disabled if out of stock)

---

## PRODUCT DETAIL PAGE layout:

**Breadcrumb** (Home > Category > Product name)

**Two-column grid:**
Left col — Image section:
- Main large image box (emoji centered, dark bg, rounded)
- Row of 3 thumbnail variants below

Right col — Info section:
- Brand label
- Product title (large, Tajawal)
- Part number + copy icon
- Star rating row + review count
- Price block (card bg): big price + old price + savings badge + VAT note "السعر شامل ضريبة القيمة المضافة 15%"
- Installment line: "أو قسّمها على 4 دفعات مع تمارا"
- Qty selector (−/number/+) + Add to cart button + Wishlist button
- Specs grid (2×2): السيارة / الفئة / الضمان / المخزون
- Description section (expandable)
- Features list (checkmarks)
- Trust badges row: 4 small cards

---

## CART SIDEBAR (slide in from left — RTL):
- Header: "سلة التسوق" + item count + close X
- Scrollable items list:
  Each item: image box + name + brand + unit price + qty (−/+) + remove (×)
- Footer:
  - Subtotal row
  - Shipping row (free above 300 ريال, else show fee)
  - VAT 15% row
  - Total row (large, bold)
  - Installment note
  - Checkout button (full width)
  - Continue shopping link

---

## CHECKOUT PAGE layout (2 columns):

Left col — Steps:
- Step 1: بيانات العميل (name, phone, email)
- Step 2: عنوان الشحن (city, district, street, building, postal code)
- Step 3: طريقة الدفع — selectable method cards:
  [ الدفع عند الاستلام ] [ تحويل بنكي ] [ بطاقة ائتمانية ] [ تمارا ] [ تابي ]
- Step 4: كود الخصم — input + apply button

Right col (sticky):
- Order summary card: items list + subtotal + shipping + VAT + total + place order button

---

## SUCCESS PAGE (centered):
- Animated ✅ icon (bounceIn)
- "تم استلام طلبك بنجاح! 🎉"
- Order number (auto-generated)
- "سيتواصل معك فريقنا خلال 24 ساعة"
- Back to shop button

---

## ABOUT PAGE layout:

- Hero: full-width dark banner with title + subtitle
- Story section: text on right, icon/image on left
- Stats bar: 4 counters (same as homepage)
- Brands we serve: 6 brand logo cards
- MD Brand spotlight section: dark card with description
- VIN service section (same as homepage)
- Team/values cards: 4 cards

---

## BLOG PAGE layout:
- Page title + subtitle
- 3-column article grid:
  Each card: image placeholder (dark bg, aspect 16:9) + category tag + date + title + excerpt + "قراءة المزيد" button

---

## ADMIN PAGE layout:
- Top stats: 4 KPI cards (total products / inventory value / low stock / out of stock)
- Toolbar: search input + brand filter dropdown + "إضافة منتج" button
- Data table:
  Columns: الأيقونة | الاسم + رقم القطعة | الماركة | الفئة | السعر | المخزون | الإجراءات
  Stock badge colors: green (متوفر) / gold (كمية محدودة) / red (نفذ)
  Action buttons: ✏️ تعديل | 🗑️ حذف
- Add/Edit product modal:
  Fields: الاسم | رقم القطعة | الماركة (select) | الفئة (select) | السعر | سعر الخصم | الكمية | الحد الأدنى للتنبيه | الضمان | الأيقونة (emoji) | الوصف | مميز (checkbox) | جديد (checkbox)
  Buttons: حفظ | إلغاء

---

## DESIGN SYSTEM

### Color Palette
- Page background: #07070A
- Card surface 1: #0F0F13
- Card surface 2: #141418
- Border default: rgba(255,255,255,0.06)
- Border hover: rgba(255,255,255,0.12)
- Primary action: deep blue #1A5FAB → hover #2070C8
- Accent gold: #C9982A
- Danger/discount badge: #C8211A
- Success/in-stock: #22c55e
- Low stock: #C9982A
- Text primary: #FFFFFF
- Text secondary: rgba(255,255,255,0.55)
- Text muted: rgba(255,255,255,0.35)

### Typography
- Display/headings: Tajawal, weight 900
- Body: Cairo, weight 400–700
- Part numbers: monospace font, gold color, letter-spacing 0.5px

### Spacing & Radius
- Card radius: 16px
- Button radius: 10px
- Input radius: 8px
- Section padding: 48px 0
- Card padding: 16px

### Elevation / Shadow
- Cards default: none
- Cards hover: 0 16px 48px rgba(0,0,0,0.5)
- Primary button: 0 4px 16px rgba(26,95,171,0.3)
- Primary button hover: 0 8px 28px rgba(26,95,171,0.5)

### Transitions
- All interactive: cubic-bezier(0.4,0,0.2,1) 250ms
- Card hover lift: translateY(-4px)
- Button hover lift: translateY(-2px)

### Animations
- Page load: staggered fadeIn + translateY(20px) via IntersectionObserver
- Stats counters: count-up animation on scroll into view
- Hero badge: blinking dot (opacity pulse)
- Button click: ripple effect (white radial, opacity 0.2)
- Cart panel: slide from left, cubic-bezier
- Toast: slide-up from bottom, auto-dismiss 2.8s
- Product image: scale(1.05) on card hover

### Scrollbar
- Width: 3px
- Track: #07070A
- Thumb: linear-gradient(180deg, #1A5FAB, #C9982A)

### Focus States
- All focusable: outline 2px rgba(26,95,171,0.5), offset 2px

---

## JS FEATURES
- SPA routing: showPage(name) — no reload
- Cart: add/remove/update qty/persist localStorage/live badge
- Wishlist: toggle/persist localStorage
- Real-time search across name + part number
- Combinable filters: brand + category + price range
- Sort: newest / price asc / price desc / most discounted
- Grid / list view toggle
- Admin full CRUD → re-renders all sections
- Coupon system: configurable codes + discount %
- Toast notification (non-blocking, queue-able)
- Stats counter animation (IntersectionObserver)
- Scroll reveal animations (IntersectionObserver)
- Lazy image loading
- Debounced search (300ms)
- Passive scroll listeners
- Back-to-top button (appears after 400px)
- Link prefetch on hover
- Image error fallback

---

## OUTPUT RULES
- Return ONE complete self-contained HTML file
- No placeholder comments like "add content here"
- No TODO items
- All Arabic text must be natural and correct
- RTL layout throughout — no mixed directions
- All sections fully rendered and functional
- Seed at least 12 demo products covering all brands and categories
- Mobile first, fully responsive