diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..3e7a5ae
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,192 @@
+# Front-end Guidelines
+
+This is a Laravel 12 e-commerce project using Lunar PHP (headless). These guidelines apply to all front-end work.
+
+---
+
+## Project Language Settings
+
+
+- **Greek register:** `singular` — use the informal second person (εσύ/σου/σε). e.g. "Η κριτική σου", "Το όνομά σου", "Το email σου"
+
+
+All UI text written for this project must follow the register above.
+
+---
+
+## Tech Stack
+
+- **Laravel 12** + **Lunar PHP 1.3** (headless e-commerce)
+- **Blade** for templating (`@extends`, `@section`, `@yield`, components)
+- **Tailwind CSS v4** via `@tailwindcss/vite` — zero config, `@import 'tailwindcss'` only
+- **Stimulus JS** for interactivity — controllers registered in `resources/js/stimulus/index.js`
+- **Popover API** (native browser) for overlays — no JS overlay libraries
+- SQLite database, `npm run dev` for local asset compilation
+
+---
+
+## Key File Locations
+
+| What | Where |
+|---|---|
+| CSS entry point | `resources/css/app.css` |
+| Font definitions | `resources/css/fonts.css` |
+| JS entry point | `resources/js/app.js` |
+| Stimulus controllers | `resources/js/stimulus/` |
+| JS utilities | `resources/js/utils/` |
+| Layout | `resources/views/layouts/app.blade.php` |
+| UI components (atomic) | `resources/views/components/ui/` |
+| Section components | `resources/views/components/` |
+| Page views | `resources/views/{page}/` |
+| Public assets | `public/images/` |
+
+---
+
+## Design Reference
+
+The Bluebeard template (`resources/css/bluebeard.css`) is used as a **reference only** for colors, spacing, typography, and effects. It is never imported or used directly. Everything is translated to Tailwind utilities or custom CSS where unavoidable.
+
+The boboko project at `/Users/farenoubi/Projects/boboko-test` can be referenced for CSS architecture patterns.
+
+---
+
+## Tailwind vs. Custom CSS
+
+**Prefer Tailwind utilities by default.** Write custom CSS only when something genuinely cannot be expressed as a utility:
+
+- Pseudo-elements (`::before`, `::after`) with dynamic transforms or transitions
+- Complex descendant/sibling selectors (e.g. `.group:hover .nav-dropdown`)
+- Keyframe animations
+- The underline-slide animation on nav links (background-size trick)
+
+**Never** write inline CSS (`style="..."`). **Never** write custom CSS for something Tailwind already covers.
+
+When a component requires a CSS class (e.g. as a hook for a pseudo-element), still put all properties that can be Tailwind utilities as classes on the element in the component file. The CSS rule should contain only what genuinely cannot be a utility — pseudo-elements, complex selectors, keyframes. Do not default to putting all styles in the CSS class just because the class exists.
+
+When custom CSS is needed, add it to `resources/css/app.css` inside `@layer components`. Keep the rule minimal — only what can't be a utility.
+
+---
+
+## Design Tokens
+
+Defined in `@theme {}` in `app.css`:
+
+- `--font-sans`: Manrope (body text)
+- `--font-display`: Manrope (headings, nav, buttons) — kept separate from `--font-sans` in case they diverge later
+
+Reuse existing colors (`neutral-200`, `black`), font sizes, spacing, and border styles as components are built. Do not invent new values — check what's already in use first.
+
+---
+
+## Component Structure
+
+### `resources/views/components/ui/` — atomic, reusable UI elements
+
+Single-purpose, stateless or minimally stateful elements used across many contexts:
+
+- `button.blade.php` ✓
+- `input.blade.php`
+- `input-group.blade.php`
+- `icon.blade.php`
+- `image.blade.php`
+- `tabs.blade.php` / `tab.blade.php`
+- `accordion.blade.php`
+- `tooltip.blade.php`
+- `badge.blade.php`
+- etc.
+
+### `resources/views/components/` — section-level or composite components
+
+Larger reusable blocks made of several elements, often with real content:
+
+- `header.blade.php` ✓
+- `footer.blade.php`
+- `cta.blade.php`
+- `product-card.blade.php`
+- `contact-section.blade.php`
+- etc.
+
+---
+
+## Interactivity
+
+### Popover API for overlays
+
+For **tooltips, modals, dropdowns, and any overlay**: use the native [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) with CSS — no JS, no libraries.
+
+```html
+
+
...
+```
+
+Style open/closed states with `[popover]` and `:popover-open` selectors in CSS.
+
+### Stimulus JS for behavior
+
+Use Stimulus when JS is genuinely needed (form handling, cart updates, dynamic state, etc.).
+
+- Keep controllers lean: manage state and coordinate the DOM, don't build UI inside them
+- Use Stimulus values, targets, and outlets — avoid reading from the DOM imperatively
+- **Never inject HTML strings or classes from inside a controller.** Instead, drive appearance via data attributes or CSS classes toggled on existing elements, and let CSS handle the visual result
+- Never write inline JS (`onclick="..."`, etc.)
+
+### Pure CSS for simple interactions
+
+Hover dropdowns, focus states, active states — handle with CSS (`:hover`, `:focus-within`, `.group:hover`) before reaching for Stimulus.
+
+---
+
+## Accessibility (ARIA)
+
+Always add ARIA attributes. This is not optional:
+
+- Interactive elements: `aria-label`, `aria-expanded`, `aria-controls`, `aria-haspopup` as appropriate
+- Images: meaningful `alt` text, or `alt=""` + `aria-hidden="true"` for decorative images
+- Icons used as buttons: `aria-label` on the button, `aria-hidden="true"` on the SVG
+- Form fields: always associated `