type: user

role: user

content:
     1→<?php
     2→
     3→use Illuminate\Foundation\Application;
     4→use Illuminate\Foundation\Configuration\Exceptions;
     5→use Illuminate\Foundation\Configuration\Middleware;
     6→
     7→return Application::configure(basePath: dirname(__DIR__))
     8→    ->withRouting(
     9→        web: __DIR__.'/../routes/web.php',
    10→        commands: __DIR__.'/../routes/console.php',
    11→        health: '/up',
    12→    )
    13→    ->withMiddleware(function (Middleware $middleware): void {
    14→        //
    15→    })
    16→    ->withExceptions(function (Exceptions $exceptions): void {
    17→        //
    18→    })->create();
    19→

prompt:
Explore the current state of the Laravel project at /Users/fabianwesner/Herd/shop. I need to understand:

1. What files already exist (models, controllers, migrations, routes, views, tests, etc.)
2. Current state of composer.json dependencies
3. Current state of package.json
4. Current .env configuration
5. Current config files (auth.php, database.php, etc.)
6. Current routes/web.php, routes/api.php, routes/console.php
7. Current app directory structure
8. Current tests directory structure
9. Current database/migrations directory
10. Current resources/views directory

Give me a comprehensive overview of what already exists vs what needs to be built.


userType: external

slug: iterative-seeking-pine

type: progress

type: assistant

type: message

role: assistant

service_tier: standard

prompt:
Explore the current state of the Laravel project at /Users/fabianwesner/Herd/shop. I need to understand:

1. What files already exist (models, controllers, migrations, routes, views, tests, etc.)
2. Current state of composer.json dependencies
3. Current state of package.json
4. Current .env configuration
5. Current config files (auth.php, database.php, etc.)
6. Current routes/web.php, routes/api.php, routes/console.php
7. Current app directory structure
8. Current tests directory structure
9. Current database/migrations directory
10. Current resources/views directory

Give me a comprehensive overview of what already exists vs what needs to be built.


content:
     1→# 04 - Storefront UI/UX Specification
     2→
     3→> E-commerce platform - Customer-facing storefront UI/UX requirements
     4→
     5→---
     6→
     7→## Conventions
     8→
     9→| Convention | Detail |
    10→|---|---|
    11→| CSS Framework | Tailwind CSS v4, mobile-first design, dark mode support |
    12→| Interactivity | Livewire v4 for all dynamic UI (cart, filters, checkout) |
    13→| Templating | Blade templates with reusable storefront-prefixed components |
    14→| Accessibility | WCAG 2.2 AA compliance throughout |
    15→| Responsive | Mobile-first with progressive enhancement at small, medium, large, and extra-large breakpoints |
    16→| Currency | All prices stored as integers (cents), formatted with locale-aware helpers |
    17→| Images | Lazy-loaded, with proper alt text and maintained aspect ratios |
    18→
    19→---
    20→
    21→## Currency Formatting
    22→
    23→All monetary amounts are stored as integers in minor units (cents) and must be formatted for display according to these rules:
    24→
    25→| Setting | Value |
    26→|---------|-------|
    27→| Decimal separator | `.` (period) |
    28→| Thousands separator | `,` (comma) |
    29→| Currency symbol | After amount with space (e.g., `24.99 EUR`) |
    30→| Decimal places | Always 2 |
    31→| Free amounts | Display as `0.00 EUR` |
    32→| Negative amounts (refunds) | Prefix with `-` (e.g., `-12.50 EUR`) |
    33→
    34→**Helper:** Use a shared Blade component or helper (e.g., `<x-price :amount="$amount" :currency="$currency" />`) to ensure consistent formatting across all storefront pages.
    35→
    36→**Examples:**
    37→- 2499 cents -> `24.99 EUR`
    38→- 0 cents -> `0.00 EUR`
    39→- 149900 cents -> `1,499.00 EUR`
    40→
    41→---
    42→
    43→## 1. Theme System Architecture
    44→
    45→### 1.1 View Organization
    46→
    47→The storefront views are organized into the following categories:
    48→
    49→| Category | Purpose | Views |
    50→|---|---|---|
    51→| Layouts | Master page shell | app (master layout) |
    52→| Pages | Core storefront pages | home, collection, product, cart, search, page (static CMS) |
    53→| Checkout | Purchase flow | checkout index, order confirmation |
    54→| Account | Customer area | login, register, dashboard, orders (list + detail), addresses |
    55→| Errors | Error states | 404, 503 |
    56→| Components | Reusable UI elements | product-card, price, badge, quantity-selector, address-form, order-summary, breadcrumbs, pagination |
    57→
    58→### 1.2 Layout Hierarchy
    59→
    60→All storefront pages extend a single master layout, which provides the full page shell including header, footer, cart drawer, and global Livewire listeners. Individual page templates fill the main content section.
    61→
    62→### 1.3 Theme Settings
    63→
    64→Theme settings are stored in the database as JSON (keyed by theme ID). A singleton service loads and caches the active theme settings for the current store. Settings control:
    65→
    66→- Announcement bar visibility, text, link, and background color
    67→- Sticky header toggle
    68→- Home page section order and visibility
    69→- Color palette overrides (primary, secondary, accent)
    70→- Typography scale
    71→- Footer content and social links
    72→- Dark mode behavior (system preference, toggle, or forced)
    73→
    74→### 1.4 Section-Based Architecture
    75→
    76→Each page is composed of configurable sections. Sections are Blade includes or Livewire components receiving configuration from theme settings.
    77→
    78→| Section | Description | Used On |
    79→|---|---|---|
    80→| Hero | Full-width banner with heading, subheading, call-to-action | Home |
    81→| Featured Collections | Grid of collection cards | Home |
    82→| Featured Products | Grid of product cards (lazy-loaded) | Home |
    83→| Newsletter | Email signup form | Home, Footer |
    84→| Rich Text | Customizable content block | Home, Pages |
    85→
    86→### 1.5 Blade Components
    87→
    88→All reusable UI elements are implemented as Blade components with a storefront prefix. See Section 16 for the full component library reference.
    89→
    90→---
    91→
    92→## 2. Base Layout
    93→
    94→### 2.1 Document Head
    95→
    96→The document head includes:
    97→
    98→| Element | Description |
    99→|---|---|
   100→| Character encoding | UTF-8 |
   101→| Viewport | Width = device width, initial scale 1 |
   102→| Meta description | Page-specific, yielded from child templates |
   103→| Title | Page-specific title appended with the app name |
   104→| Stylesheets | Compiled CSS via Vite |
   105→| Scripts | Compiled JS via Vite |
   106→| Livewire styles | Injected by Livewire |
   107→| Language attribute | Set on the HTML element from application locale |
   108→| Scroll behavior | Smooth scrolling enabled globally |
   109→
   110→### 2.2 Skip Link
   111→
   112→A visually hidden "Skip to main content" link is the first element in the body. It becomes visible on keyboard focus, positioned fixed at top-left with a clear visual treatment (solid background, shadow, focus ring). Supports dark mode.
   113→
   114→**Accessibility:** Allows keyboard users to bypass the header navigation and jump directly to the main content area.
   115→
   116→### 2.3 Announcement Bar
   117→
   118→Optional, controlled by theme settings. Renders a full-width bar above the header.
   119→
   120→| Attribute | Description |
   121→|---|---|
   122→| Position | Full-width, above the header |
   123→| Background | Configurable color, defaults to dark background (light text) / inverted in dark mode |
   124→| Text | Centered, small size, configurable content |
   125→| Link | Optional, underlined, opens in same tab |
   126→| Dismiss | Close button (X icon) on the right side; dismissal persisted via localStorage |
   127→| Height | Auto height with vertical padding |
   128→
   129→### 2.4 Header
   130→
   131→The header serves as the primary navigation banner.
   132→
   133→**Desktop Layout (large breakpoint and above):**
   134→
   135→```
   136→+--------------------------------------------------------------+
   137→| [Logo]      [Nav Item] [Nav Item] [Nav Item]     [S] [C] [A] |
   138→+--------------------------------------------------------------+
   139→```
   140→
   141→| Element | Position | Description |
   142→|---|---|---|
   143→| Logo | Left | Linked to home page. Shows image if logo URL is set in theme settings, otherwise store name as text. Max height approximately 40px on desktop, 32px on smaller screens |
   144→| Main Navigation | Center | Horizontal nav with links sourced from the "main-menu" navigation menu. Supports one level of dropdown submenus (revealed on hover/focus) |
   145→| Search Icon | Right group | Button that opens the search modal |
   146→| Cart Icon | Right group | Button that opens the cart drawer. Displays item count badge (small circular indicator, primary color background, white text) |
   147→| Account Icon | Right group | Link to account dashboard (logged in) or login page (guest) |
   148→
   149→**Mobile Layout (below large breakpoint):**
   150→
   151→```
   152→+--------------------------------------------------------------+
   153→| [Hamburger]           [Logo]                            [Cart]|
   154→+--------------------------------------------------------------+
   155→```
   156→
   157→| Element | Position | Description |
   158→|---|---|---|
   159→| Hamburger menu | Left | Toggle button for mobile navigation drawer |
   160→| Logo | Center | Same as desktop but horizontally centered |
   161→| Cart icon | Right | Same as desktop |
   162→
   163→**Sticky Header (optional):**
   164→
   165→When enabled in theme settings, the header sticks to the top of the viewport with a semi-transparent background and backdrop blur. A subtle bottom border appears on scroll.
   166→
   167→**Mobile Navigation Drawer:**
   168→
   169→| Attribute | Description |
   170→|---|---|
   171→| Animation | Slides in from the left side |
   172→| Height | Full viewport height |
   173→| Backdrop | Semi-transparent dark overlay behind the drawer |
   174→| Close button | X icon at the top-right of the drawer |
   175→| Navigation items | Vertical stack with comfortable tap targets |
   176→| Submenus | Collapsible accordion pattern with chevron icons |
   177→| Account link | Positioned at the bottom of the navigation list |
   178→| Focus behavior | Focus is trapped within the drawer while open |
   179→| ARIA | Labeled as "Mobile navigation" |
   180→
   181→### 2.5 Main Content Area
   182→
   183→The main content area is a landmark element with a unique ID for skip-link targeting. It occupies at least the full viewport height.
   184→
   185→### 2.6 Footer
   186→
   187→The footer is a content-info landmark.
   188→
   189→**Layout:**
   190→
   191→```
   192→+--------------------------------------------------------------+
   193→| [Column 1: Links]  [Column 2: Links]  [Column 3: Store Info] |
   194→|                                                               |
   195→| [Social Icons]                                                |
   196→| [Copyright] [Payment Icons]                                   |
   197→+--------------------------------------------------------------+
   198→```
   199→
   200→| Element | Description |
   201→|---|---|
   202→| Link columns | Responsive grid: 2 columns on mobile, 3 on tablet, up to 4 on desktop. Links sourced from "footer-menu" navigation menu. Each column has an uppercase heading and a list of links |
   203→| Store info column | Store name, address (if configured), contact email |
   204→| Social links | Row of icon links (Facebook, Instagram, Twitter/X, TikTok, YouTube) configured in theme settings. Each with screen reader label. Icons are 20x20, muted color with hover to full contrast |
   205→| Copyright line | Small muted text: "(c) {year} {store name}. All rights reserved." |
   206→| Payment method icons | Row of SVG icons for accepted payment methods (Visa, Mastercard, Amex, PayPal, etc.). Slightly reduced opacity |
   207→| Spacing | Generous vertical padding, content constrained to max-width container with horizontal padding |
   208→| Background | Light gray (dark: very dark gray), top border separator |
   209→
   210→### 2.7 Cart Drawer (Livewire)
   211→
   212→The cart drawer is always present in the layout as a global Livewire component. It listens for the "cart-updated" browser event to refresh and open. See Section 6 for full specification.
   213→
   214→### 2.8 Dark Mode
   215→
   216→Dark mode is implemented via Tailwind's dark variant. The behavior is controlled by theme settings:
   217→
   218→| Mode | Implementation |
   219→|---|---|
   220→| System preference (default) | Follows OS-level dark mode preference automatically |
   221→| Toggle | User-controlled toggle button in header/footer; preference stored in localStorage |
   222→| Forced light/dark | Applied at server render time on the HTML element |
   223→
   224→**Color Token Patterns:**
   225→
   226→| Token | Light Mode | Dark Mode |
   227→|---|---|---|
   228→| Page background | White | Near-black |
   229→| Card/section background | Light gray | Very dark gray |
   230→| Heading text | Near-black | White |
   231→| Body text | Medium gray | Light gray |
   232→| Borders | Light gray | Medium-dark gray |
   233→| Primary actions | Blue, darkens on hover | Slightly lighter blue, lightens on hover |
   234→
   235→---
   236→
   237→## 3. Home Page (GET /)
   238→
   239→The home page renders sections in the order defined by theme settings. Each section can be toggled on/off and reordered. Default section order:
   240→
   241→1. Hero Banner
   242→2. Featured Collections
   243→3. Featured Products
   244→4. Newsletter Signup
   245→5. Rich Text
   246→
   247→### 3.1 Hero Banner Section
   248→
   249→**Layout:** Full-width container (no max-width on the outer wrapper). Inner content constrained to standard max-width.
   250→
   251→**Desktop (large breakpoint and above):**
   252→
   253→```
   254→+--------------------------------------------------------------+
   255→|                                                               |
   256→|  [Background Image / Gradient]                                |
   257→|                                                               |
   258→|       [Heading - very large, bold]                            |
   259→|       [Subheading - medium, regular weight]                   |
   260→|       [CTA Button - primary, large]                           |
   261→|                                                               |
   262→+--------------------------------------------------------------+
   263→```
   264→
   265→| Attribute | Description |
   266→|---|---|
   267→| Background | Full-width image (cover, centered) or gradient. Image set via theme settings. Semi-transparent dark overlay for text readability |
   268→| Content | Centered vertically and horizontally, white text |
   269→| Heading | H1 or H2 depending on context. Very large on desktop, progressively smaller on mobile. Bold, tight tracking |
   270→| Subheading | Regular paragraph, medium size, generous top margin. Constrained to a comfortable reading width |
   271→| CTA | Styled as primary button, large. Links to a configured collection or product |
   272→| Height | Minimum 600px on desktop, 500px on tablet, 400px on mobile, 300px on small mobile |
   273→| Padding | Generous vertical and horizontal padding |
   274→
   275→**Mobile:** Same structure but stacked, with reduced font sizes and shorter minimum height. Full-bleed background image remains.
   276→
   277→**Accessibility:**
   278→
   279→- If background is an image, it is decorative (the content provides meaning)
   280→- CTA button has descriptive text (e.g., "Shop the summer collection")
   281→
   282→### 3.2 Featured Collections Section
   283→
   284→**Layout:** Section with heading and grid of collection cards.
   285→
   286→| Attribute | Description |
   287→|---|---|
   288→| Section heading | H2, large, bold, centered, with generous bottom margin |
   289→| Grid | 2 columns on mobile, 4 columns on large screens, with gap spacing |
   290→| Count | 2 to 4 collections, configurable in theme settings |
   291→
   292→**Collection Card:**
   293→
   294→```
   295→+---------------------------+
   296→|  [Collection Image]       |
   297→|  3:4 aspect ratio         |
   298→|  cover-fit, rounded       |
   299→|                           |
   300→|  [Title overlay at bottom]|
   301→|  [Shop now ->]            |
   302→+---------------------------+
   303→```
   304→
   305→| Element | Description |
   306→|---|---|
   307→| Image | 3:4 aspect ratio, cover-fit, rounded corners. Gradient overlay at bottom fading from transparent to semi-transparent dark |
   308→| Title | White text overlaid at bottom of image, semi-bold, medium-large size |
   309→| "Shop now" link | Small white text below title, slightly transparent, underlined. Becomes fully opaque on hover |
   310→| Interaction | Entire card is clickable. Subtle scale-up on hover with smooth transition |
   311→
   312→**Accessibility:**
   313→
   314→- Each card link has the collection title as accessible name
   315→- Images have alt text matching the collection title
   316→
   317→### 3.3 Featured Products Section
   318→
   319→**Livewire Component:** FeaturedProducts
   320→
   321→This section uses Livewire for lazy loading to improve initial page load.
   322→
   323→| Attribute | Description |
   324→|---|---|
   325→| Section heading | H2, same styling as featured collections heading |
   326→| Grid | 2 columns on mobile, 3 on tablet, 4 on desktop, with gap spacing |
   327→| Products | 4 to 8, configurable. Sourced from a configured collection or "best sellers" logic |
   328→| Loading state | Skeleton placeholders with pulsing animation, matching the product card dimensions |
   329→
   330→Each product uses the product-card component (see Section 16).
   331→
   332→### 3.4 Newsletter Signup Section
   333→
   334→**Livewire Component:** NewsletterSignup
   335→
   336→**Layout:**
   337→
   338→```
   339→+--------------------------------------------------------------+
   340→|  [Heading: "Stay in the loop"]                                |
   341→|  [Subtext: "Subscribe for exclusive offers and updates."]     |
   342→|  [Email input] [Subscribe button]                             |
   343→+--------------------------------------------------------------+
   344→```
   345→
   346→| Attribute | Description |
   347→|---|---|
   348→| Background | Light gray (dark mode: darker gray), generous vertical padding |
   349→| Content | Centered, constrained to a comfortable width |
   350→| Heading | H2, medium-large, bold |
   351→| Subtext | Muted color, small top margin |
   352→| Form | Horizontal layout with gap. Input takes remaining width, button shrinks to fit |
   353→| Input | Email type, placeholder "Enter your email", required |
   354→| Button | Primary style, "Subscribe" text |
   355→| Success state | Replaces form with "Thanks for subscribing!" message |
   356→| Error state | Inline error below input in red, small text |
   357→| Loading state | Button text changes to "Subscribing..." during submission |
   358→
   359→**Accessibility:**
   360→
   361→- Label associated with email input (visually hidden if using placeholder)
   362→- Success/error messages in a polite live region for screen readers
   363→
   364→### 3.5 Rich Text Section
   365→
   366→Simple section rendering customizable content from theme settings.
   367→
   368→| Attribute | Description |
   369→|---|---|
   370→| Container | Constrained to comfortable reading width, centered, vertical padding |
   371→| Content | Sanitized HTML from theme settings, styled with typography (prose) styling for headings, paragraphs, lists, links |
   372→| Dark mode | Inverted prose styling |
   373→
   374→---
   375→
   376→## 4. Collection Page (GET /collections/{handle})
   377→
   378→**Livewire Component:** CollectionPage
   379→
   380→### 4.1 Collection Header
   381→
   382→| Element | Description |
   383→|---|---|
   384→| Breadcrumbs | Home > Collections > {Collection Title} |
   385→| Title | H1, large, bold |
   386→| Description | Rendered HTML from collection description, styled with prose/typography, constrained width |
   387→| Spacing | Generous vertical padding |
   388→
   389→### 4.2 Toolbar
   390→
   391→Horizontal bar between the header and the product grid.
   392→
   393→**Desktop:**
   394→
   395→```
   396→+--------------------------------------------------------------+
   397→| [Filter toggle button]          [X products] [Sort dropdown]  |
   398→+--------------------------------------------------------------+
   399→```
   400→
   401→**Mobile:**
   402→
   403→```
   404→+--------------------------------------------------------------+
   405→| [Filter button]                           [Sort dropdown]     |
   406→+--------------------------------------------------------------+
   407→```
   408→
   409→| Element | Description |
   410→|---|---|
   411→| Product count | Small muted text, e.g., "24 products" |
   412→| Sort dropdown | Select element with live Livewire binding |
   413→
   414→**Sort Options:**
   415→
   416→| Option | Description |
   417→|---|---|
   418→| Featured | Default sort order |
   419→| Price: Low to High | Ascending by price |
   420→| Price: High to Low | Descending by price |
   421→| Newest | Descending by creation date |
   422→| Best Selling | Descending by sales count |
   423→
   424→### 4.3 Filter Sidebar
   425→
   426→**Desktop (large breakpoint and above):** Persistent sidebar on the left, approximately 256px wide.
   427→**Mobile (below large breakpoint):** Slide-out drawer from the left, triggered by "Filter" button with filter icon.
   428→
   429→**Filter Groups:**
   430→
   431→Each filter group is a collapsible section with a heading and toggle chevron.
   432→
   433→| Filter Group | Type | Binding | Description |
   434→|---|---|---|---|
   435→| Availability | Single checkbox | Live | "In stock" toggle |
   436→| Price Range | Two number inputs | Live with 500ms debounce | "Min" and "Max" inputs with currency symbol prefix, displayed side by side |
   437→| Product Type | Checkbox list | Live | Dynamically sourced from products in the collection |
   438→| Vendor | Checkbox list | Live | Dynamically sourced from products in the collection |
   439→
   440→**Clear All:**
   441→
   442→- Link at the top of the filter sidebar: "Clear all filters"
   443→- Only visible when at least one filter is active
   444→- Small, blue, interactive text
   445→
   446→**Active Filter Pills:**
   447→
   448→- Displayed above the product grid (below toolbar) when filters are active
   449→- Each pill: rounded tag with filter value text and a remove (X) button
   450→- "Clear all" link at the end of the pills row
   451→
   452→**Mobile Filter Drawer:**
   453→
   454→| Attribute | Description |
   455→|---|---|
   456→| Position | Full-height overlay from left side |
   457→| Header | "Filters" title + close button (X) |
   458→| Content | Same filter groups as desktop, stacked vertically |
   459→| Footer | Sticky "Apply" button at bottom that closes the drawer |
   460→| Clear | "Clear all" link in header area |
   461→| Focus | Trapped within drawer while open |
   462→
   463→### 4.4 Product Grid
   464→
   465→| Attribute | Description |
   466→|---|---|
   467→| Layout | Fills remaining width next to the sidebar |
   468→| Columns | 2 on mobile, 3 on tablet, 3 on desktop (when sidebar visible). Without sidebar: 2 mobile, 3 tablet, 4 desktop |
   469→| Loading state | Subtle opacity reduction on the grid while results update |
   470→
   471→### 4.5 Product Card (Component)
   472→
   473→The product card is a reusable component used on collection pages, search results, and featured products sections.
   474→
   475→```
   476→+---------------------------+
   477→|  [Product Image]          |
   478→|  1:1 aspect ratio         |
   479→|  cover-fit, rounded       |
   480→|  (hover: show 2nd image)  |
   481→|                           |
   482→|  [Sale badge]  [Sold out] |
   483→+---------------------------+
   484→|  [Product Title]          |
   485→|  [Price]  [Compare price] |
   486→|  [Quick Add / Options]    |
   487→+---------------------------+
   488→```
   489→
   490→**Image Behavior:**
   491→
   492→| Attribute | Description |
   493→|---|---|
   494→| Container | Square aspect ratio, rounded corners, overflow hidden, gray placeholder background |
   495→| Primary image | Cover-fit, fills the container |
   496→| Secondary image | On hover (desktop with hover capability only), crossfades to the second product image |
   497→| Fallback | If no image, show a centered shopping bag placeholder icon |
   498→| Loading | Lazy-loaded |
   499→
   500→**Badges:**
   501→
   502→| Badge | Condition | Position |
   503→|---|---|---|
   504→| "Sale" | compare_at_amount > price_amount | Top-left of image, stacked vertically |
   505→| "Sold out" | All variants out of stock with deny policy | Top-left of image, stacked vertically |
   506→
   507→**Text Content:**
   508→
   509→| Element | Description |
   510→|---|---|
   511→| Title | H3 (or configurable heading level), small semi-bold text. Truncated to 2 lines |
   512→| Price | Current price in small semi-bold text. Compare-at price shown with strikethrough if applicable |
   513→| Quick Add | Single variant: "Add to cart" button. Multiple variants: "Choose options" link text. Hidden by default on desktop (shown on hover), always visible on mobile |
   514→
   515→**Accessibility:**
   516→
   517→- Card link wraps the entire card; title serves as the accessible name
   518→- Badges have screen reader labels (e.g., "On sale")
   519→- Price changes announced via parent live region when filtering changes results
   520→
   521→### 4.6 Pagination
   522→
   523→| Attribute | Description |
   524→|---|---|
   525→| Style | Numbered pagination with previous/next arrow buttons |
   526→| Current page | Highlighted with primary color background and white text |
   527→| Other pages | Muted text, hover background |
   528→| Disabled | Reduced opacity and not-allowed cursor on previous (at first page) or next (at last page) |
   529→| Truncation | Ellipsis for large page counts |
   530→| Mobile | Simplified: previous/next only with current page indicator |
   531→
   532→### 4.7 Empty State
   533→
   534→When no products match the current filters:
   535→
   536→```
   537→+--------------------------------------------------------------+
   538→|  [Search icon - large, muted]                                 |
   539→|  "No products found"                                          |
   540→|  "Try adjusting your filters or browse our full collection."  |
   541→|  [Clear filters button]                                       |
   542→+--------------------------------------------------------------+
   543→```
   544→
   545→| Element | Description |
   546→|---|---|
   547→| Icon | Large, muted search icon |
   548→| Heading | Medium, semi-bold |
   549→| Subtext | Muted, descriptive guidance |
   550→| Button | Secondary style, "Clear filters" |
   551→| Position | Centered in the grid area with generous vertical padding |
   552→
   553→---
   554→
   555→## 5. Product Page (GET /products/{handle})
   556→
   557→**Livewire Component:** ProductPage
   558→
   559→### 5.1 Layout
   560→
   561→**Desktop (large breakpoint and above):** Two-column, 50/50 split. Left column (images) is sticky while the right column (product info) scrolls.
   562→
   563→**Mobile:** Single column, stacked. Images first, then product info.
   564→
   565→```
   566→Desktop:
   567→+-------------------------------+-------------------------------+
   568→|  [Image Gallery]              |  [Product Info]               |
   569→|  (sticky while scrolling)     |  (scrollable)                 |
   570→+-------------------------------+-------------------------------+
   571→
   572→Mobile:
   573→+--------------------------------------------------------------+
   574→|  [Image Gallery - horizontal scroll]                          |
   575→+--------------------------------------------------------------+
   576→|  [Product Info - full width]                                  |
   577→+--------------------------------------------------------------+
   578→```
   579→
   580→Container constrained to standard max-width with horizontal padding and vertical spacing.
   581→
   582→### 5.2 Image Gallery (Left Column)
   583→
   584→**Desktop:**
   585→
   586→```
   587→+-------------------------------+
   588→|                               |
   589→|  [Main Image - large]         |
   590→|  1:1 aspect ratio, rounded    |
   591→|                               |
   592→+-------------------------------+
   593→| [Thumb] [Thumb] [Thumb] ...  |
   594→+-------------------------------+
   595→```
   596→
   597→| Attribute | Description |
   598→|---|---|
   599→| Main image | Square aspect ratio, large rounded corners, cover-fit. Gray placeholder background |
   600→| Zoom on hover | Optional (theme setting): image scales to 150% and follows cursor position |
   601→| Thumbnail strip | Horizontal row with overflow scroll, small gap between thumbnails |
   602→| Each thumbnail | 64x64px, rounded, cover-fit, pointer cursor. Active thumbnail has a colored border |
   603→| Variant images | When a variant is selected that has specific images, those images are shown |
   604→
   605→**Mobile:**
   606→
   607→| Attribute | Description |
   608→|---|---|
   609→| Gallery | Horizontal scrollable row with snap-scroll behavior |
   610→| Each image | Full-width, square aspect ratio, rounded, cover-fit |
   611→| Scroll indicators | Row of dots below the gallery. Active dot is dark (light in dark mode), inactive dots are gray |
   612→
   613→**Accessibility:**
   614→
   615→| Requirement | Description |
   616→|---|---|
   617→| Alt text | Main image has descriptive alt text from product media data |
   618→| Thumbnails | Rendered as buttons with labels "View image X of Y" and current state indicator |
   619→| Region | Gallery wrapped in a labeled region ("Product images") |
   620→
   621→### 5.3 Product Info (Right Column)
   622→
   623→#### Breadcrumbs
   624→
   625→Home > {Primary Collection} > {Product Title}. Small, muted text with separator characters.
   626→
   627→#### Product Title
   628→
   629→H1, large, bold.
   630→
   631→#### Price Display
   632→
   633→| Element | Description |
   634→|---|---|
   635→| Current price | Large, bold |
   636→| Compare-at price | Medium, muted, strikethrough (shown when set and higher than current price) |
   637→| Sale badge | Inline badge next to the price |
   638→| Currency | Formatted based on the store's default currency |
   639→| Live updates | Price container is a live region, so price changes when variant changes are announced to screen readers |
   640→
   641→#### Variant Selector
   642→
   643→For each product option (e.g., Size, Color), render a selector group.
   644→
   645→**Radio button style (for options with 6 or fewer values):**
   646→
   647→```
   648→Size
   649→[S] [M] [L] [XL] [XXL]
   650→```
   651→
   652→| State | Visual Description |
   653→|---|---|
   654→| Available | Bordered pill shape, pointer cursor, border darkens on hover |
   655→| Selected | Primary color border with subtle background tint and focus ring |
   656→| Unavailable | Muted border, muted text, strikethrough, reduced opacity, not-allowed cursor |
   657→
   658→**Select dropdown style:** Used when the option has more than 6 values.
   659→
   660→**Color swatches (when option name is "Color"):**
   661→
   662→| Attribute | Description |
   663→|---|---|
   664→| Shape | Circular, 32x32px |
   665→| Color | Determined by value name mapped to a color lookup or inline style |
   666→| Selected state | Ring with offset around the swatch |
   667→| Tooltip | Shows color name on hover |
   668→
   669→**Livewire behavior:**
   670→
   671→- Selected options are a key-value map (e.g., Size = M, Color = Red)
   672→- Selected variant is computed by matching all selected options to the variant option values
   673→- On change: updates price, stock messaging, available images, and add-to-cart availability
   674→
   675→#### Stock Messaging
   676→
   677→Displayed below the variant selector.
   678→
   679→| Condition | Message | Visual Style |
   680→|---|---|---|
   681→| In stock, quantity > 10 | "In stock" | Green text with check icon |
   682→| In stock, quantity <= 10 | "Only X left in stock" | Amber text with warning icon |
   683→| Out of stock, deny policy | "Out of stock" | Red text with X icon |
   684→| Out of stock, continue policy | "Available on backorder" | Blue text with info icon |
   685→
   686→Small text, icon + text inline. Wrapped in a live region for screen reader announcements on variant change.
   687→
   688→#### Quantity Selector
   689→
   690→Uses the quantity-selector component.
   691→
   692→```
   693→[-] [3] [+]
   694→```
   695→
   696→| Attribute | Description |
   697→|---|---|
   698→| Container | Inline flex, bordered, rounded |
   699→| Decrease button | "-" icon, 40x40px. Disabled at minimum (1) |
   700→| Input | Centered number input, 56px wide, 40px tall. Min = 1, Max = available stock (deny policy) or unlimited (continue policy) |
   701→| Increase button | "+" icon, same size. Disabled at maximum |
   702→| Disabled state | Reduced opacity, not-allowed cursor |
   703→| Labels | Input labeled "Quantity", buttons labeled "Decrease quantity" / "Increase quantity" |
   704→
   705→#### Add to Cart Button
   706→
   707→| Attribute | Description |
   708→|---|---|
   709→| Width | Full width |
   710→| Style | Primary button: blue background, white text, semi-bold, generous padding, rounded |
   711→| Text | "Add to cart" |
   712→| Loading state | Text changes to "Adding..." with spinner icon. Button disabled during loading |
   713→| Sold out state | Gray background, muted text, not-allowed cursor. Text: "Sold out" |
   714→| Spacing | Generous top margin |
   715→
   716→**Livewire action (addToCart):**
   717→
   718→1. Validates variant is selected and in stock
   719→2. Adds to cart (creates cart if none exists in session)
   720→3. Dispatches "cart-updated" browser event
   721→4. Cart drawer opens automatically
   722→
   723→#### Product Description
   724→
   725→- Separated from above content by a horizontal rule with generous vertical spacing
   726→- Rendered HTML styled with prose/typography styling
   727→
   728→#### Tags
   729→
   730→- Displayed below the description (if tags exist)
   731→- Horizontal wrapping row with gap
   732→- Each tag: rounded pill, gray background, small text
   733→
   734→### 5.4 Accessibility Summary
   735→
   736→| Requirement | Implementation |
   737→|---|---|
   738→| Variant radio buttons | Properly labeled with labels and grouped with fieldset/legend |
   739→| Live regions | Price display, stock messaging, add-to-cart feedback |
   740→| Image alt text | All images have meaningful alt text |
   741→| Keyboard | Tab through thumbnails, variant options, quantity controls, and add-to-cart |
   742→| Focus indicators | Visible ring styles on all interactive elements |
   743→
   744→---
   745→
   746→## 6. Cart Drawer
   747→
   748→**Livewire Component:** CartDrawer
   749→
   750→### 6.1 Trigger and Animation
   751→
   752→| Attribute | Description |
   753→|---|---|
   754→| Trigger | "cart-updated" browser event (from add-to-cart actions), or clicking the cart icon in the header |
   755→| Animation | Slides in from the right side of the viewport. Transforms from fully off-screen to visible |
   756→| Backdrop | Fixed full-screen semi-transparent dark overlay. Click to close |
   757→| Panel | Fixed, right-aligned, full height, full width on small screens or 384px on larger screens. White background (dark mode: near-black), shadow |
   758→| Body | Scroll locked when drawer is open |
   759→
   760→### 6.2 Drawer Header
   761→
   762→```
   763→+--------------------------------------+
   764→| Your Cart (3)                    [X] |
   765→+--------------------------------------+
   766→```
   767→
   768→| Element | Description |
   769→|---|---|
   770→| Heading | H2, semi-bold, medium-large text |
   771→| Item count | In parentheses after heading |
   772→| Close button | X icon, labeled "Close cart" |
   773→| Layout | Flex row, space-between, with horizontal padding and bottom border |
   774→
   775→### 6.3 Cart Line Items
   776→
   777→Scrollable list area occupying the space between header and totals.
   778→
   779→Each line item:
   780→
   781→```
   782→+--------------------------------------+
   783→| [Thumb]  Title                       |
   784→|          Variant: Size M / Blue      |
   785→|          [-] [2] [+]       $49.98    |
   786→|                             [Remove] |
   787→+--------------------------------------+
   788→```
   789→
   790→| Element | Description |
   791→|---|---|
   792→| Thumbnail | 64x64px, rounded, cover-fit, non-shrinking |
   793→| Title | Small semi-bold text, truncated to 1 line |
   794→| Variant info | Extra-small muted text showing selected options |
   795→| Quantity stepper | Compact version of quantity-selector (smaller buttons, 32x32px) |
   796→| Line total | Small semi-bold text |
   797→| Remove button | Trash icon, muted color, turns red on hover. Labeled "Remove {item title} from cart" |
   798→| Separation | Bottom border between items, vertical padding per item |
   799→| Loading | Opacity reduction on the line item during quantity update |
   800→
   801→### 6.4 Discount Code Section
   802→
   803→Below the line items list, above totals.
   804→
   805→**No discount applied:**
   806→
   807→```
   808→+--------------------------------------+
   809→| [Discount code input] [Apply]        |
   810→+--------------------------------------+
   811→```
   812→
   813→**Discount applied:**
   814→
   815→```
   816→+--------------------------------------+
   817→| SUMMER20 (-15%)              [Remove]|
   818→+--------------------------------------+
   819→```
   820→
   821→| Attribute | Description |
   822→|---|---|
   823→| Input | Small text, placeholder "Discount code" |
   824→| Apply button | Secondary style, small |
   825→| Success state | Green text showing the code and discount type, with a remove button |
   826→| Error state | Small red text below, e.g., "Invalid discount code" or "This code has expired" |
   827→| Loading state | Button text changes to "Applying..." |
   828→
   829→### 6.5 Totals Section
   830→
   831→```
   832→+--------------------------------------+
   833→| Subtotal                     $149.97 |
   834→| Discount (SUMMER20)          -$22.50 |
   835→| ------------------------------------ |
   836→| Estimated total              $127.47 |
   837→+--------------------------------------+
   838→```
   839→
   840→| Element | Description |
   841→|---|---|
   842→| Position | Sticky at the bottom of the drawer, with top border |
   843→| Each line | Flex row, justified space-between, small text |
   844→| Discount line | Only shown when discount applied, green text |
   845→| Total | Slightly larger text, semi-bold |
   846→| Note | "Shipping and taxes calculated at checkout" in extra-small muted text below totals |
   847→
   848→### 6.6 Action Buttons
   849→
   850→| Button | Description |
   851→|---|---|
   852→| Checkout | Primary, full-width. Creates checkout record, then navigates to checkout page |
   853→| Continue shopping | Centered text link below checkout button. Small muted text, hover to darker. Closes the drawer |
   854→
   855→### 6.7 Empty Cart State
   856→
   857→```
   858→+--------------------------------------+
   859→|                                      |
   860→|  [Shopping bag icon - large]         |
   861→|  "Your cart is empty"                |
   862→|  [Continue shopping button]          |
   863→|                                      |
   864→+--------------------------------------+
   865→```
   866→
   867→| Element | Description |
   868→|---|---|
   869→| Layout | Centered vertically and horizontally in the drawer content area |
   870→| Icon | Large, very muted shopping bag icon |
   871→| Text | Muted, with top margin |
   872→| Button | Secondary style, closes the drawer |
   873→
   874→### 6.8 Accessibility
   875→
   876→| Requirement | Description |
   877→|---|---|
   878→| Role | Dialog with modal behavior, labeled "Shopping cart" |
   879→| Focus trap | Tab/Shift+Tab cycles through drawer elements only |
   880→| On open | Focus moves to the close button or first interactive element |
   881→| On close | Focus returns to the element that triggered the drawer (cart icon) |
   882→| Escape key | Closes the drawer |
   883→| Feedback | All quantity changes and removals announced via polite live region |
   884→
   885→---
   886→
   887→## 7. Full Cart Page (GET /cart)
   888→
   889→**Livewire Component:** CartPage
   890→
   891→Same functionality as the cart drawer but in a full-page layout.
   892→
   893→### 7.1 Desktop Layout
   894→
   895→```
   896→+--------------------------------------------------------------+
   897→|  Your Cart                                                    |
   898→+--------------------------------------------------------------+
   899→|  Image | Product      | Price   | Quantity | Total   |       |
   900→|  ------|------------- |---------|----------|---------|-------|
   901→|  [img] | Title        | $24.99  | [-][2][+]| $49.98  | [X]   |
   902→|        | Size: M      |         |          |         |       |
   903→|  [img] | Title        | $34.99  | [-][1][+]| $34.99  | [X]   |
   904→|        | Color: Blue  |         |          |         |       |
   905→+--------------------------------------------------------------+
   906→|                                            Subtotal: $84.97   |
   907→|                              [Discount code] [Apply]          |
   908→|                                            Discount: -$12.75  |
   909→|                                            Total:    $72.22   |
   910→|                                                               |
   911→|                                            [Checkout button]  |
   912→|                                            [Continue shopping]|
   913→+--------------------------------------------------------------+
   914→```
   915→
   916→| Attribute | Description |
   917→|---|---|
   918→| Container | Constrained max-width, centered, with horizontal padding and vertical spacing |
   919→| Title | H1, large bold, generous bottom margin |
   920→| Desktop layout | Proper table with header row and body |
   921→| Table headers | Left-aligned, small, semi-bold, muted, uppercase, wide tracking |
   922→| Mobile layout | Card-based layout (same as cart drawer items, stacked) |
   923→
   924→### 7.2 Totals and Actions
   925→
   926→- Right-aligned on desktop, full-width on mobile
   927→- Same discount code input/apply functionality as drawer
   928→- Same totals breakdown
   929→- "Checkout" button: primary, aligned right
   930→- "Continue shopping" link: below checkout button
   931→
   932→### 7.3 Empty State
   933→
   934→Same as drawer empty state but centered in the page content area with more vertical padding.
   935→
   936→---
   937→
   938→## 8. Checkout Page (GET /checkout/{checkoutId})
   939→
   940→**Livewire Component:** CheckoutPage
   941→
   942→### 8.1 Layout
   943→
   944→**Desktop (large breakpoint and above):** Two-column layout. Left column (wider, approx 60%) contains the form sections. Right column (narrower, approx 40%) contains the sticky order summary.
   945→
   946→**Mobile:** Single column. Order summary is a collapsible section at the top (collapsed by default, showing a toggle with "Show order summary" / "Hide order summary" + chevron + total amount).
   947→
   948→```
   949→Desktop:
   950→+-------------------------------+-------------------+
   951→|  [Checkout Form Sections]     | [Order Summary]   |
   952→|  (wider, ~60%)                | (narrower, ~40%)  |
   953→|                               | (sticky)          |
   954→+-------------------------------+-------------------+
   955→
   956→Mobile:
   957→+--------------------------------------------------------------+
   958→|  [Order Summary - collapsible]                                |
   959→+--------------------------------------------------------------+
   960→|  [Checkout Form Sections]                                     |
   961→+--------------------------------------------------------------+
   962→```
   963→
   964→### 8.2 Checkout Steps
   965→
   966→The checkout uses a single-page design with collapsible sections. Steps: Contact, Shipping Address, Shipping Method, Payment Method & Pay.
   967→
   968→**Step State Behavior:**
   969→
   970→| State | Description |
   971→|---|---|
   972→| Completed | Shows summary of entered data with an "Edit" link |
   973→| Current | Expanded with the full form |
   974→| Future | Collapsed, muted, not interactive |
   975→
   976→Each step header shows the step number + title, e.g., "1. Contact information".
   977→
   978→#### Step 1 - Contact Information
   979→
   980→| Field | Description |
   981→|---|---|
   982→| Email | Full-width email input, required. Validated on blur |
   983→| Account link | "Already have an account? Log in" link below email, small blue text |
   984→| Continue button | Primary, below the form |
   985→
   986→#### Step 2 - Shipping Address
   987→
   988→Uses the address-form component.
   989→
   990→**Fields:**
   991→
   992→| Field | Type | Required | Layout Width |
   993→|---|---|---|---|
   994→| First name | Text | Yes | Half |
   995→| Last name | Text | Yes | Half |
   996→| Address line 1 | Text | Yes | Full |
   997→| Address line 2 | Text | No | Full |
   998→| City | Text | Yes | Half |
   999→| State/Province | Select or text | Yes (varies by country) | Half |
  1000→| Postal code | Text | Yes | Half |
  1001→| Country | Select | Yes | Half |
  1002→| Phone | Tel | No | Full |
  1003→
  1004→- Layout: 2-column grid, full-width fields span both columns
  1005→- Country select: on change, State/Province updates to show relevant regions
  1006→- All fields validate on blur
  1007→
  1008→**Billing address:**
  1009→
  1010→- Checkbox: "Billing address same as shipping" (checked by default)
  1011→- When unchecked, a second address form appears for billing
  1012→
  1013→**Saved addresses (logged-in customers):**
  1014→
  1015→- Dropdown above the form: "Select a saved address" with saved addresses listed
  1016→- "Use a new address" option to show the blank form
  1017→- On selection, form fields populate with the saved address data
  1018→
  1019→Continue button: primary.
  1020→
  1021→#### Step 3 - Shipping Method
  1022→
  1023→Radio button list of available shipping methods, filtered server-side by matching the shipping address to shipping zones.
  1024→
  1025→```
  1026→+--------------------------------------------------------------+
  1027→| (o) Standard Shipping          5-7 business days       $7.99 |
  1028→| ( ) Express Shipping           2-3 business days      $14.99 |
  1029→| ( ) Free Shipping              7-10 business days      Free  |
  1030→+--------------------------------------------------------------+
  1031→```
  1032→
  1033→| Attribute | Description |
  1034→|---|---|
  1035→| Each option | Bordered, rounded card with padding. Selected: primary border with subtle background tint. Unselected: gray border |
  1036→| Label layout | Method name (left), estimated delivery (center), price (right) |
  1037→| Live binding | On selection, the order summary sidebar updates totals |
  1038→| No methods | Warning message: "No shipping methods are available for your address. Please verify your address or contact us." in amber text with info icon |
  1039→
  1040→Continue button: primary.
  1041→
  1042→#### Step 4 - Payment Method & Pay
  1043→
  1044→All payment is handled onsite via the Mock PSP. No external redirects, no iframes, no third-party scripts.
  1045→
  1046→**Payment method selection (radio buttons):**
  1047→
  1048→```
  1049→+--------------------------------------------------------------+
  1050→| Select a payment method                                       |
  1051→|                                                               |
  1052→| (o) Credit Card                                               |
  1053→| ( ) PayPal                                                    |
  1054→| ( ) Bank Transfer                                             |
  1055→+--------------------------------------------------------------+
  1056→```
  1057→
  1058→| Attribute | Description |
  1059→|---|---|
  1060→| Layout | Radio button list, each option in a bordered card (same styling as shipping method radios) |
  1061→| Default | First option (Credit Card) is pre-selected |
  1062→| Live binding | On selection, the payment form below updates to show the relevant fields |
  1063→
  1064→**Credit Card form (shown when Credit Card is selected):**
  1065→
  1066→```
  1067→+--------------------------------------------------------------+
  1068→| Card number     [4242 4242 4242 4242        ]                |
  1069→| Cardholder name [John Doe                   ]                |
  1070→| Expiry          [12/28     ]  CVC [123    ]                  |
  1071→+--------------------------------------------------------------+
  1072→| [Pay now - 29.98 EUR]                                        |
  1073→+--------------------------------------------------------------+
  1074→```
  1075→
  1076→| Field | Type | Required | Validation |
  1077→|---|---|---|---|
  1078→| Card number | Text (digits, auto-formatted with spaces every 4 digits) | Yes | 16 digits |
  1079→| Cardholder name | Text | Yes | Max 255 |
  1080→| Expiry | Text (MM/YY format) | Yes | Valid future date |
  1081→| CVC | Text (3-4 digits) | Yes | 3-4 digits |
  1082→
  1083→**PayPal form (shown when PayPal is selected):**
  1084→
  1085→```
  1086→+--------------------------------------------------------------+
  1087→| Your PayPal payment will be processed securely.               |
  1088→|                                                               |
  1089→| [Pay with PayPal - 29.98 EUR]                                |
  1090→+--------------------------------------------------------------+
  1091→```
  1092→
  1093→No additional form fields. The button text changes to "Pay with PayPal - {total}".
  1094→
  1095→**Bank Transfer form (shown when Bank Transfer is selected):**
  1096→
  1097→```
  1098→+--------------------------------------------------------------+
  1099→| After placing your order, you will receive bank transfer      |
  1100→| instructions. Your order will be held for 7 days while we     |
  1101→| await your payment.                                           |
  1102→|                                                               |
  1103→| [Place order - 29.98 EUR]                                     |
  1104→+--------------------------------------------------------------+
  1105→```
  1106→
  1107→No additional form fields. The button text changes to "Place order - {total}" (not "Pay now", since payment is deferred).
  1108→
  1109→| Element | Description |
  1110→|---|---|
  1111→| Pay/Place button | Primary, full-width, large text. Loading state: "Processing..." with spinner. Calls `POST /checkouts/{id}/pay` with the selected method and card details (if credit card). |
  1112→| Error handling | On payment decline (magic card number), display an inline error callout: "Payment declined: {reason}". The customer can correct details and retry. |
  1113→| Success (card/paypal) | On successful instant capture, redirect to confirmation page. |
  1114→| Success (bank_transfer) | On successful order placement, redirect to confirmation page (which shows bank transfer instructions). |
  1115→
  1116→### 8.3 Order Summary Sidebar (Right Column)
  1117→
  1118→Sticky on desktop.
  1119→
  1120→```
  1121→+-------------------------------+
  1122→|  Order Summary                |
  1123→+-------------------------------+
  1124→|  [Thumb] Title x2     $49.98 |
  1125→|          Size: M              |
  1126→|  [Thumb] Title x1     $34.99 |
  1127→+-------------------------------+
  1128→|  [Discount code] [Apply]     |
  1129→+-------------------------------+
  1130→|  Subtotal              $84.97|
  1131→|  Discount             -$12.75|
  1132→|  Shipping               $7.99|
  1133→|  Tax                    $5.74|
  1134→|  ----------------------------|
  1135→|  Total                 $85.95|
  1136→+-------------------------------+
  1137→```
  1138→
  1139→| Element | Description |
  1140→|---|---|
  1141→| Background | Light gray (dark: dark gray), large rounded corners, with padding |
  1142→| Cart items | Compact list with small thumbnail (48x48px), truncated title, quantity badge, and line total |
  1143→| Discount code input | Same as cart drawer |
  1144→| Totals | Line items for subtotal, discount (conditional), shipping ("Calculated at next step" until selected), tax (calculated after address), and total |
  1145→| Updates | Event-driven from step completion actions (no polling) |
  1146→
  1147→### 8.4 Accessibility
  1148→
  1149→| Requirement | Description |
  1150→|---|---|
  1151→| Labels | All form inputs have associated label elements |
  1152→| Validation errors | Linked via describedby pointing to error message element |
  1153→| Required fields | Marked with required attribute and visual asterisk |
  1154→| Step transitions | Focus moves to the first input of the newly expanded step |
  1155→| Shipping radios | Grouped in a fieldset with legend |
  1156→| Totals | Live region for screen reader updates |
  1157→
  1158→---
  1159→
  1160→## 9. Order Confirmation (GET /checkout/{checkoutId}/confirmation)
  1161→
  1162→### 9.1 Layout
  1163→
  1164→Centered content, single column.
  1165→
  1166→```
  1167→+--------------------------------------------------------------+
  1168→|  [Checkmark icon - green circle]                              |
  1169→|  "Thank you for your order!"                                  |
  1170→|  Order #1042                                                  |
  1171→|  "We've sent a confirmation to you@email.com"                 |
  1172→+--------------------------------------------------------------+
  1173→|  Order Summary                                                |
  1174→|  [Items list with thumbnails]                                 |
  1175→+--------------------------------------------------------------+
  1176→|  Shipping Address          |  Payment Method                  |
  1177→|  Jane Doe                  |  Credit Card ending in 4242      |
  1178→|  123 Main St               |  (or: PayPal / Bank Transfer)    |
  1179→|  New York, NY 10001        |                                  |
  1180→+--------------------------------------------------------------+
  1181→|  Subtotal        $84.97                                       |
  1182→|  Shipping         $7.99                                       |
  1183→|  Tax              $5.74                                       |
  1184→|  Total           $98.70                                       |
  1185→+--------------------------------------------------------------+
  1186→|  [Continue shopping button]  [View order - if logged in]      |
  1187→+--------------------------------------------------------------+
  1188→```
  1189→
  1190→| Element | Description |
  1191→|---|---|
  1192→| Container | Constrained to a comfortable width, centered, generous vertical padding |
  1193→| Success icon | Large green checkmark in a circle, centered |
  1194→| Heading | H1, large bold, centered, generous top margin |
  1195→| Order number | Medium muted text, centered |
  1196→| Email notice | Small muted text, centered |
  1197→
  1198→### 9.2 Order Details
  1199→
  1200→| Element | Description |
  1201→|---|---|
  1202→| Items | List with thumbnail, title, variant info, quantity, price |
  1203→| Address and payment | Two-column grid on desktop, stacked on mobile |
  1204→| Payment method display | Shows "Credit Card ending in {last4}", "PayPal", or "Bank Transfer" depending on `order.payment_method` |
  1205→| Totals | Right-aligned summary |
  1206→
  1207→#### Bank Transfer Instructions (shown only when `payment_method = bank_transfer`)
  1208→
  1209→A prominent callout (info variant) displayed between the order details and the totals:
  1210→
  1211→```
  1212→+--------------------------------------------------------------+
  1213→|  [info icon] Bank Transfer Instructions                       |
  1214→|                                                               |
  1215→|  Please transfer the total amount to the following account:   |
  1216→|                                                               |
  1217→|  Bank:     Mock Bank AG                                       |
  1218→|  IBAN:     DE89 3704 0044 0532 0130 00                        |
  1219→|  BIC:      COBADEFFXXX                                        |
  1220→|  Amount:   29.98 EUR                                          |
  1221→|  Reference: #1042                                             |
  1222→|                                                               |
  1223→|  Please complete your transfer within 7 days. Your order will |
  1224→|  be processed once payment is confirmed by our team.          |
  1225→+--------------------------------------------------------------+
  1226→```
  1227→
  1228→The reference field uses the order number so the admin can match incoming transfers.
  1229→
  1230→### 9.3 Actions
  1231→
  1232→| Button | Description |
  1233→|---|---|
  1234→| Continue shopping | Primary, links to home page |
  1235→| View order | Link to account order detail page (logged-in customers only) |
  1236→| Layout | Centered row with gap |
  1237→
  1238→---
  1239→
  1240→## 10. Customer Account Pages
  1241→
  1242→All account pages require authentication. Unauthenticated access redirects to the login page.
  1243→
  1244→### 10.1 Login (GET /account/login)
  1245→
  1246→**Livewire Component:** Login
  1247→
  1248→```
  1249→+--------------------------------------------------------------+
  1250→|  Log in to your account                                       |
  1251→|                                                               |
  1252→|  [Email input]                                                |
  1253→|  [Password input]                                             |
  1254→|  [Forgot password? link]                                      |
  1255→|  [Log in button]                                              |
  1256→|                                                               |
  1257→|  Don't have an account? [Create one]                          |
  1258→+--------------------------------------------------------------+
  1259→```
  1260→
  1261→| Element | Description |
  1262→|---|---|
  1263→| Container | Narrow max-width, centered, generous vertical padding |
  1264→| Heading | H1, medium-large, bold, centered |
  1265→| Form | Vertical stack with gap |
  1266→| Email | Email type, required, autocomplete for email |
  1267→| Password | Password type, required, autocomplete for current password |
  1268→| Forgot password | Small blue link, right-aligned |
  1269→| Submit button | Primary, full-width, "Log in" |
  1270→| Error messages | Inline below fields in small red text |
  1271→| General error | Invalid credentials shown in a callout/alert above the form |
  1272→| Register link | "Create one" link to registration page |
  1273→
  1274→### 10.2 Register (GET /account/register)
  1275→
  1276→**Livewire Component:** Register
  1277→
  1278→```
  1279→+--------------------------------------------------------------+
  1280→|  Create an account                                            |
  1281→|                                                               |
  1282→|  [Name input]                                                 |
  1283→|  [Email input]                                                |
  1284→|  [Password input]                                             |
  1285→|  [Confirm password input]                                     |
  1286→|  [ ] Subscribe to marketing emails                            |
  1287→|  [Create account button]                                      |
  1288→|                                                               |
  1289→|  Already have an account? [Log in]                            |
  1290→+--------------------------------------------------------------+
  1291→```
  1292→
  1293→| Element | Description |
  1294→|---|---|
  1295→| Container | Narrow max-width, centered, generous vertical padding |
  1296→| Heading | H1, medium-large, bold, centered |
  1297→| Form | Vertical stack with gap |
  1298→| Name | Text type, required, autocomplete for name |
  1299→| Email | Email type, required, autocomplete for email |
  1300→| Password | Password type, required, minimum 8 characters, autocomplete for new password |
  1301→| Confirm password | Password type, required, autocomplete for new password |
  1302→| Marketing checkbox | Checkbox with label "Subscribe to marketing emails" |
  1303→| Submit button | Primary, full-width, "Create account" |
  1304→| On success | Redirect to account dashboard |
  1305→
  1306→### 10.3 Account Dashboard (GET /account)
  1307→
  1308→```
  1309→+--------------------------------------------------------------+
  1310→|  Welcome back, Jane!                                          |
  1311→+--------------------------------------------------------------+
  1312→|  [Orders card]     [Addresses card]     [Log out card]        |
  1313→+--------------------------------------------------------------+
  1314→|  Recent Orders                                                |
  1315→|  # | Date       | Status  | Total   | Action                 |
  1316→|  --|------------|---------|---------|--------                 |
  1317→|  1042 | Jan 15  | Paid    | $98.70  | View                   |
  1318→|  1041 | Jan 10  | Shipped | $45.00  | View                   |
  1319→+--------------------------------------------------------------+
  1320→```
  1321→
  1322→| Element | Description |
  1323→|---|---|
  1324→| Container | Constrained max-width, centered, with padding |
  1325→| Welcome heading | H1, medium-large bold |
  1326→| Quick links | Responsive grid: 1 column on mobile, 3 on tablet+. Each card has border, rounded corners, padding, hover shadow |
  1327→| Orders card | Order icon, "Order history", "View all your orders" |
  1328→| Addresses card | Location icon, "Addresses", "Manage your addresses" |
  1329→| Log out card | Logout icon, "Log out", submits POST logout form |
  1330→| Recent orders | Table showing last 5 orders. Status shown as badge component |
  1331→
  1332→### 10.4 Order History (GET /account/orders)
  1333→
  1334→| Attribute | Description |
  1335→|---|---|
  1336→| Heading | H1, "Order History" |
  1337→| Table columns | Order (link), Date, Status (badge), Total, Action ("View" link) |
  1338→| Status badge colors | Pending: yellow. Paid: green. Fulfilled: blue. Cancelled: gray. Refunded: red |
  1339→| Mobile | Card-based layout instead of table. Each card shows order number, date, status, and total |
  1340→| Pagination | Standard pagination component |
  1341→
  1342→### 10.5 Order Detail (GET /account/orders/{orderNumber})
  1343→
  1344→```
  1345→+--------------------------------------------------------------+
  1346→|  Order #1042                      Status: [Paid] [Fulfilled] |
  1347→|  Placed on January 15, 2026                                  |
  1348→+--------------------------------------------------------------+
  1349→|  Items                                                        |
  1350→|  [Thumb] Product Title x2              $49.98                 |
  1351→|          Size: M                                              |
  1352→+--------------------------------------------------------------+
  1353→|  Shipping Address    |  Billing Address   | Payment           |
  1354→|  Jane Doe            |  Same as shipping  | Visa ****4242     |
  1355→|  123 Main St         |                    |                   |
  1356→+--------------------------------------------------------------+
  1357→|  Subtotal        $84.97                                       |
  1358→|  Shipping         $7.99                                       |
  1359→|  Tax              $5.74                                       |
  1360→|  Discount        -$0.00                                       |
  1361→|  Total           $98.70                                       |
  1362→+--------------------------------------------------------------+
  1363→|  Fulfillment                                                  |
  1364→|  Shipped via UPS - 1Z999AA10123456784                         |
  1365→|  [Track shipment ->]                                          |
  1366→+--------------------------------------------------------------+
  1367→```
  1368→
  1369→| Element | Description |
  1370→|---|---|
  1371→| Breadcrumbs | Account > Orders > #1042 |
  1372→| Header | Order number and status badges |
  1373→| Date | Small muted text |
  1374→| Items | Table with thumbnail, title + variant info, quantity, line total |
  1375→| Info grid | Three columns on desktop (shipping, billing, payment), stacked on mobile |
  1376→| Totals | Summary breakdown |
  1377→| Fulfillment | Only shown if fulfillments exist. Shows tracking company, number, and link to tracking URL (opens in new tab safely) |
  1378→
  1379→### 10.6 Address Book (GET /account/addresses)
  1380→
  1381→**Livewire Component:** AddressBook
  1382→
  1383→```
  1384→+--------------------------------------------------------------+
  1385→|  Your Addresses                          [+ Add new address]  |
  1386→+--------------------------------------------------------------+
  1387→|  [Default badge]              |                               |
  1388→|  Jane Doe                     |  Jane Doe                     |
  1389→|  123 Main St                  |  456 Oak Ave                  |
  1390→|  New York, NY 10001           |  Chicago, IL 60601            |
  1391→|  United States                |  United States                |
  1392→|  [Edit] [Delete]              |  [Edit] [Delete] [Set default]|
  1393→+--------------------------------------------------------------+
  1394→```
  1395→
  1396→| Attribute | Description |
  1397→|---|---|
  1398→| Grid | 1 column on mobile, 2 on tablet, 3 on desktop |
  1399→| Each card | Bordered, rounded, with padding. Default address has a primary-colored border and "Default" badge |
  1400→| Content | Formatted address lines |
  1401→| Actions | Edit and Delete text buttons, with "Set as default" on non-default addresses |
  1402→| Add new | Opens modal with address-form component |
  1403→| Edit | Opens same modal pre-filled |
  1404→| Delete | Confirmation dialog before deleting |
  1405→
  1406→---
  1407→
  1408→## 11. Search
  1409→
  1410→### 11.1 Search Modal
  1411→
  1412→**Livewire Component:** SearchModal
  1413→
  1414→Triggered by clicking the search icon in the header.
  1415→
  1416→```
  1417→+--------------------------------------------------------------+
  1418→|  [Search input with icon]                           [X close] |
  1419→+--------------------------------------------------------------+
  1420→|  Products                                                     |
  1421→|  [Thumb] Product Title            $24.99                      |
  1422→|  [Thumb] Product Title            $34.99                      |
  1423→|                                                               |
  1424→|  Collections                                                  |
  1425→|  Summer Collection                                            |
  1426→|  Winter Collection                                            |
  1427→|                                                               |
  1428→|  [View all X results ->]                                      |
  1429→+--------------------------------------------------------------+
  1430→```
  1431→
  1432→| Attribute | Description |
  1433→|---|---|
  1434→| Overlay | Full-screen semi-transparent dark backdrop |
  1435→| Modal | Centered, moderate max-width, rounded corners, shadow |
  1436→| Search input | Large text, search icon prefix, autofocus on open. Live binding with 300ms debounce |
  1437→| Results | Appear below input as user types. Grouped by type: "Products" and "Collections" headings |
  1438→| Product results | Thumbnail, title, price. Clickable to product page |
  1439→| Collection results | Title only. Clickable to collection page |
  1440→| Max results | 5 per category in the modal |
  1441→| View all | Link at the bottom navigating to the full search results page |
  1442→| Loading | Skeleton lines while fetching |
  1443→| No results | "No results for '{query}'" message |
  1444→| Keyboard | Escape closes, arrow keys navigate results, Enter selects highlighted result |
  1445→| Focus | Trapped within the modal |
  1446→| ARIA | Dialog role, modal, labeled "Search". Results list as listbox with option items |
  1447→
  1448→### 11.2 Search Results Page (GET /search?q=)
  1449→
  1450→**Livewire Component:** SearchResults
  1451→
  1452→Same layout as the collection page (Section 4) with the following differences:
  1453→
  1454→| Difference | Description |
  1455→|---|---|
  1456→| Heading | H1, "X results for '{query}'" or "Search results for '{query}'" |
  1457→| Breadcrumbs | Home > Search results |
  1458→| Filters | Same filter sidebar (availability, price, type, vendor) |
  1459→| Sort | Same sort dropdown |
  1460→| Product grid | Same product card component |
  1461→| Pagination | Same pagination |
  1462→| Empty state | "No results found for '{query}'. Try a different search term." with a search input to try again |
  1463→
  1464→---
  1465→
  1466→## 12. Content Pages (GET /pages/{handle})
  1467→
  1468→### 12.1 Layout
  1469→
  1470→| Element | Description |
  1471→|---|---|
  1472→| Breadcrumbs | Home > {Page Title} |
  1473→| Title | H1, large bold |
  1474→| Body | Rendered HTML from body_html, styled with prose/typography styling, constrained to comfortable reading width (configurable to full width via theme settings) |
  1475→| Container | Standard max-width, centered, with padding |
  1476→
  1477→---
  1478→
  1479→## 13. Error Pages
  1480→
  1481→### 13.1 404 Page
  1482→
  1483→```
  1484→+--------------------------------------------------------------+
  1485→|  [404 - large, bold, very muted]                              |
  1486→|  "Page not found"                                             |
  1487→|  "The page you're looking for doesn't exist or has been       |
  1488→|   moved."                                                     |
  1489→|                                                               |
  1490→|  [Search input]                                               |
  1491→|  [Go to home page button]                                     |
  1492→+--------------------------------------------------------------+
  1493→```
  1494→
  1495→| Element | Description |
  1496→|---|---|
  1497→| Layout | Full viewport height, centered vertically and horizontally |
  1498→| 404 text | Very large, bold, extremely muted (barely visible as a background element) |
  1499→| Heading | Medium-large, bold |
  1500→| Subtext | Muted, moderate max-width, centered |
  1501→| Search | Simple input + button, submits to search page |
  1502→| Home link | Secondary button |
  1503→
  1504→### 13.2 503 / Maintenance Page
  1505→
  1506→```
  1507→+--------------------------------------------------------------+
  1508→|  [Store logo]                                                 |
  1509→|  "We'll be back soon"                                         |
  1510→|  "We're currently performing maintenance. Please check back   |
  1511→|   shortly."                                                   |
  1512→+--------------------------------------------------------------+
  1513→```
  1514→
  1515→| Element | Description |
  1516→|---|---|
  1517→| Layout | Full viewport height, centered column |
  1518→| Logo | Standard height, centered |
  1519→| Heading | Medium-large, bold |
  1520→| Subtext | Muted, moderate max-width, centered |
  1521→| Style | Consistent with the store theme (colors, fonts) |
  1522→
  1523→---
  1524→
  1525→## 14. Responsive Breakpoints
  1526→
  1527→Default breakpoints used across the storefront:
  1528→
  1529→| Breakpoint | Min-width | Typical Devices |
  1530→|---|---|---|
  1531→| Base (none) | 0px | Mobile phones (portrait) |
  1532→| Small | 640px | Mobile phones (landscape), small tablets |
  1533→| Medium | 768px | Tablets (portrait) |
  1534→| Large | 1024px | Tablets (landscape), small desktops |
  1535→| Extra-large | 1280px | Desktops |
  1536→
  1537→### Key Responsive Behaviors
  1538→
  1539→| Component | Mobile (base) | Tablet (medium) | Desktop (large+) |
  1540→|---|---|---|---|
  1541→| Navigation | Hamburger + drawer | Hamburger + drawer | Horizontal nav bar |
  1542→| Product grid | 2 columns | 3 columns | 3-4 columns |
  1543→| Product page | Stacked (images, then info) | Stacked | Side-by-side 50/50 |
  1544→| Cart drawer | Full-screen overlay | 384px sidebar | 384px sidebar |
  1545→| Checkout | Single column, summary collapsed | Single column | Two columns (form + summary) |
  1546→| Footer | Stacked columns | 2-column grid | 3-4 column grid |
  1547→| Collection filters | Drawer overlay | Drawer overlay | Persistent sidebar |
  1548→| Account tables | Card-based layout | Card-based layout | Table layout |
  1549→
  1550→### Touch Considerations
  1551→
  1552→| Consideration | Requirement |
  1553→|---|---|
  1554→| Tap targets | Minimum 44x44px for all interactive elements on mobile |
  1555→| Hover effects | Only applied on devices with hover capability |
  1556→| Swipe gestures | Horizontal swipe on product images (mobile gallery), cart drawer close |
  1557→
  1558→---
  1559→
  1560→## 15. Accessibility Checklist
  1561→
  1562→### Global (All Pages)
  1563→
  1564→| Requirement | Description |
  1565→|---|---|
  1566→| Skip link | "Skip to main content" link, first element in body |
  1567→| Landmark roles | Banner for header, main for content, contentinfo for footer, labeled nav elements |
  1568→| Heading hierarchy | Single H1 per page, logical H2-H6 nesting |
  1569→| Focus indicators | Visible ring on all interactive elements with offset |
  1570→| Color contrast | Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA) |
  1571→| Keyboard navigation | All interactive elements reachable via Tab, operable via Enter/Space |
  1572→| Screen reader text | Visually hidden text for icon-only buttons (close, cart, search) |
  1573→| Language | Lang attribute on HTML element |
  1574→| Images | All images have alt attributes; decorative images marked appropriately |
  1575→
  1576→### Page-Specific Accessibility
  1577→
  1578→| Page | Requirements |
  1579→|---|---|
  1580→| Collection Page | Live region for product count/grid on filter change. Filter sidebar labeled as navigation. Sort dropdown has associated label |
  1581→| Product Page | Variant selector uses fieldset/legend grouping. Price and stock in live regions. Image gallery thumbnails as buttons with current state |
  1582→| Cart Drawer | Dialog role with modal behavior, labeled "Shopping cart". Focus trap. Quantity changes in live region |
  1583→| Checkout | Form validation with describedby linking to errors, invalid state on fields. Focus management on step transitions. Shipping radios in fieldset/legend. Totals in live region |
  1584→| Search Modal | Dialog role with modal behavior. Results as listbox with option items. Active descendant tracking for keyboard navigation |
  1585→| Account Pages | All form inputs labeled. Tables use proper header markup with column scope. Status badges readable by text (not color-only) |
  1586→
  1587→### Keyboard Interactions
  1588→
  1589→| Component | Key | Action |
  1590→|---|---|---|
  1591→| Hamburger menu | Enter/Space | Toggle open/close |
  1592→| Mobile nav drawer | Escape | Close |
  1593→| Dropdown menus | Arrow Up/Down | Navigate items |
  1594→| Dropdown menus | Escape | Close |
  1595→| Cart drawer | Escape | Close |
  1596→| Search modal | Escape | Close |
  1597→| Search results | Arrow Up/Down | Navigate results |
  1598→| Search results | Enter | Select highlighted result |
  1599→| Variant radio buttons | Arrow Left/Right | Navigate options |
  1600→| Quantity input | Arrow Up/Down | Increment/decrement |
  1601→| Modals/dialogs | Tab/Shift+Tab | Cycle focus within (trap) |
  1602→
  1603→---
  1604→
  1605→## 16. Component Library
  1606→
  1607→### storefront-layout
  1608→
  1609→Master layout wrapper.
  1610→
  1611→| Prop | Type | Default | Description |
  1612→|---|---|---|---|
  1613→| title | string | App name from config | Page title |
  1614→| metaDescription | string | Empty | Meta description tag |
  1615→
  1616→### storefront-product-card
  1617→
  1618→Renders a single product card in grid contexts.
  1619→
  1620→| Prop | Type | Default | Description |
  1621→|---|---|---|---|
  1622→| product | Product model | Required | Product with variants, media, and inventory eager-loaded |
  1623→| headingLevel | string | h3 | Heading tag for the product title |
  1624→| showQuickAdd | boolean | true | Whether to show the quick add / choose options action |
  1625→
  1626→**Eager-load requirements:** product.variants.inventoryItem, product.media (sorted by position).
  1627→
  1628→### storefront-price
  1629→
  1630→Displays a formatted price with optional compare-at price.
  1631→
  1632→| Prop | Type | Default | Description |
  1633→|---|---|---|---|
  1634→| amount | integer | Required | Price in minor units (cents) |
  1635→| currency | string | USD | ISO 4217 currency code |
  1636→| compareAtAmount | integer or null | null | Original price in minor units for sale display |
  1637→
  1638→**Rendering:** Formats amount using Laravel's Number currency helper. If compareAtAmount is set and greater than amount, shows compare-at price with strikethrough styling and a "Sale" badge.
  1639→
  1640→### storefront-badge
  1641→
  1642→Renders a styled badge/tag.
  1643→
  1644→| Prop | Type | Default | Description |
  1645→|---|---|---|---|
  1646→| text | string | Required | Badge text |
  1647→| variant | string | default | Visual variant: sale, sold-out, new, default |
  1648→
  1649→**Variant Styles:**
  1650→
  1651→| Variant | Background | Text Color |
  1652→|---|---|---|
  1653→| sale | Light red (dark: dark red tint) | Red |
  1654→| sold-out | Light gray (dark: dark gray) | Medium gray |
  1655→| new | Light blue (dark: dark blue tint) | Blue |
  1656→| default | Light gray (dark: dark gray) | Dark gray |
  1657→
  1658→**Base appearance:** Inline pill shape, rounded-full, extra-small medium-weight text with horizontal padding.
  1659→
  1660→### storefront-quantity-selector
  1661→
  1662→Number input with increment/decrement buttons.
  1663→
  1664→| Prop | Type | Default | Description |
  1665→|---|---|---|---|
  1666→| value | integer | 1 | Current quantity |
  1667→| min | integer | 1 | Minimum allowed value |
  1668→| max | integer or null | null | Maximum allowed value (null = unlimited) |
  1669→| wireModel | string | Required | Livewire model binding string |
  1670→| compact | boolean | false | Smaller variant for cart drawer |
  1671→
  1672→### storefront-address-form
  1673→
  1674→Renders a full address form with all fields.
  1675→
  1676→| Prop | Type | Default | Description |
  1677→|---|---|---|---|
  1678→| address | array or null | null | Pre-filled address data |
  1679→| prefix | string | Empty | Livewire model prefix (e.g., "shipping" for shipping.firstName) |
  1680→
  1681→### storefront-order-summary
  1682→
  1683→Renders the checkout order summary sidebar.
  1684→
  1685→| Prop | Type | Default | Description |
  1686→|---|---|---|---|
  1687→| checkout | Checkout model | Required | Checkout with cart, cart lines, and variants eager-loaded |
  1688→| showDiscountInput | boolean | true | Whether to show the discount code input |
  1689→
  1690→### storefront-breadcrumbs
  1691→
  1692→Renders a breadcrumb navigation trail.
  1693→
  1694→| Prop | Type | Default | Description |
  1695→|---|---|---|---|
  1696→| items | array | Required | Array of objects with label and url. Last item has no URL (current page) |
  1697→
  1698→**Rendering:**
  1699→
  1700→- Wrapped in a nav element labeled "Breadcrumb"
  1701→- Ordered list with separator characters between items
  1702→- Current page (last item) has a "current page" indicator and distinct styling
  1703→- Includes structured data (BreadcrumbList schema) for SEO
  1704→
  1705→### storefront-pagination
  1706→
  1707→Wraps Laravel's pagination with custom styling.
  1708→
  1709→| Prop | Type | Default | Description |
  1710→|---|---|---|---|
  1711→| paginator | LengthAwarePaginator | Required | Laravel paginator instance |
  1712→
  1713→**Rendering:**
  1714→
  1715→- Wrapped in a nav element labeled "Pagination"
  1716→- Previous/Next buttons with arrow icons
  1717→- Numbered page buttons with current page highlighted
  1718→- Ellipsis for truncated ranges
  1719→- Mobile: previous/next only with "Page X of Y" text
  1720→
  1721→---
  1722→
  1723→## 17. Livewire Component Summary
  1724→
  1725→| Component | Location | Purpose |
  1726→|---|---|---|
  1727→| FeaturedProducts | Home page | Lazy-loaded featured products grid |
  1728→| NewsletterSignup | Home page, footer | Email subscription form |
  1729→| CollectionPage | Collection page | Filtering, sorting, pagination |
  1730→| ProductPage | Product page | Variant selection, add to cart |
  1731→| CartDrawer | Layout (global) | Slide-in cart with line management |
  1732→| CartPage | Cart page | Full-page cart |
  1733→| CheckoutPage | Checkout | Multi-step checkout flow |
  1734→| SearchModal | Layout (global) | Autocomplete search overlay |
  1735→| SearchResults | Search page | Full search results with filters |
  1736→| Login | Login page | Authentication form |
  1737→| Register | Register page | Registration form |
  1738→| AddressBook | Addresses page | CRUD for saved addresses |
  1739→
  1740→---
  1741→
  1742→## 18. Browser Event Communication
  1743→
  1744→Livewire components communicate via dispatched browser events:
  1745→
  1746→| Event Name | Dispatched By | Listened By | Payload |
  1747→|---|---|---|---|
  1748→| cart-updated | ProductPage, CartDrawer, CartPage | CartDrawer (opens + refreshes), Header (badge count) | cartId, itemCount |
  1749→| open-cart-drawer | Header cart icon click | CartDrawer | None |
  1750→| close-cart-drawer | CartDrawer close actions | CartDrawer | None |
  1751→| open-search-modal | Header search icon click | SearchModal | None |
  1752→| close-search-modal | SearchModal close actions | SearchModal | None |
  1753→| variant-changed | ProductPage (variant selector) | ProductPage (internal) | variantId, price, stock |
  1754→
  1755→---
  1756→
  1757→## 19. SEO and Structured Data
  1758→
  1759→### Meta Tags
  1760→
  1761→Each page type sets appropriate meta tags:
  1762→
  1763→| Page | Title Pattern | Description Source |
  1764→|---|---|---|
  1765→| Home | Store name | Theme settings |
  1766→| Collection | "{Collection title} - {Store name}" | Collection description (stripped of markup) |
  1767→| Product | "{Product title} - {Store name}" | Product description (stripped, truncated to 160 chars) |
  1768→| Content page | "{Page title} - {Store name}" | Page body (stripped, truncated) |
  1769→| Search | "Search results - {Store name}" | Static |
  1770→
  1771→### Open Graph Tags
  1772→
  1773→Product pages include Open Graph tags for social sharing:
  1774→
  1775→| Tag | Value |
  1776→|---|---|
  1777→| og:title | Product title |
  1778→| og:description | Meta description |
  1779→| og:image | Primary product image URL |
  1780→| og:type | product |
  1781→| og:url | Current page URL |
  1782→| product:price:amount | Formatted price (dollars) |
  1783→| product:price:currency | Store currency code |
  1784→
  1785→### JSON-LD Structured Data
  1786→
  1787→| Schema Type | Used On |
  1788→|---|---|
  1789→| Product | Product pages |
  1790→| BreadcrumbList | Breadcrumb navigation on all pages |
  1791→| Organization | Footer (store info) |
  1792→
  1793→---
  1794→
  1795→## 20. User Flow Diagrams
  1796→
  1797→### Browse to Purchase Flow
  1798→
  1799→```mermaid
  1800→flowchart TD
  1801→    A[Home Page] --> B{Browse}
  1802→    B --> C[Collection Page]
  1803→    B --> D[Search Modal]
  1804→    D --> E[Search Results Page]
  1805→    C --> F[Product Page]
  1806→    E --> F
  1807→    F --> G{Select Variant}
  1808→    G --> H[Set Quantity]
  1809→    H --> I[Add to Cart]
  1810→    I --> J[Cart Drawer Opens]
  1811→    J --> K{Continue?}
  1812→    K -->|Continue Shopping| B
  1813→    K -->|Apply Discount| L[Enter Discount Code]
  1814→    L --> J
  1815→    K -->|Checkout| M[Checkout Page]
  1816→    M --> N[Step 1: Contact Info]
  1817→    N --> O[Step 2: Shipping Address]
  1818→    O --> P[Step 3: Shipping Method]
  1819→    P --> Q[Step 4: Payment Method & Pay]
  1820→    Q --> S[Order Confirmation]
  1821→    S --> T{Next?}
  1822→    T -->|Continue Shopping| A
  1823→    T -->|View Order| U[Account Order Detail]
  1824→```
  1825→
  1826→### Account Management Flow
  1827→
  1828→```mermaid
  1829→flowchart TD
  1830→    A[Login Page] --> B{Has Account?}
  1831→    B -->|No| C[Register Page]
  1832→    C --> D[Account Dashboard]
  1833→    B -->|Yes| D
  1834→    D --> E{Action}
  1835→    E --> F[Order History]
  1836→    F --> G[Order Detail]
  1837→    G --> H[Track Shipment]
  1838→    E --> I[Address Book]
  1839→    I --> J{Action}
  1840→    J --> K[Add Address]
  1841→    J --> L[Edit Address]
  1842→    J --> M[Delete Address]
  1843→    J --> N[Set Default Address]
  1844→    E --> O[Log Out]
  1845→```
  1846→
  1847→### Cart Management Flow
  1848→
  1849→```mermaid
  1850→flowchart TD
  1851→    A[Add to Cart] --> B[Cart Drawer Opens]
  1852→    B --> C{Action}
  1853→    C --> D[Update Quantity]
  1854→    D --> B
  1855→    C --> E[Remove Item]
  1856→    E --> F{Cart Empty?}
  1857→    F -->|Yes| G[Empty Cart State]
  1858→    G --> H[Continue Shopping]
  1859→    F -->|No| B
  1860→    C --> I[Apply Discount Code]
  1861→    I --> J{Valid?}
  1862→    J -->|Yes| K[Discount Applied]
  1863→    K --> B
  1864→    J -->|No| L[Error Message]
  1865→    L --> B
  1866→    C --> M[Proceed to Checkout]
  1867→    M --> N[Checkout Page]
  1868→    C --> O[View Full Cart Page]
  1869→    O --> N
  1870→```
  1871→
  1872→### Component State Diagram
  1873→
  1874→```mermaid
  1875→stateDiagram-v2
  1876→    [*] --> Empty: Cart initialized
  1877→
  1878→    state "Cart Drawer" as CD {
  1879→        Empty --> HasItems: Add item
  1880→        HasItems --> HasItems: Update quantity
  1881→        HasItems --> HasItems: Apply discount
  1882→        HasItems --> Empty: Remove last item
  1883→        HasItems --> Checkout: Proceed to checkout
  1884→    }
  1885→
  1886→    state "Product Page" as PP {
  1887→        NoVariant --> VariantSelected: Select options
  1888→        VariantSelected --> InStock: Stock > 0
  1889→        VariantSelected --> OutOfStock: Stock = 0
  1890→        InStock --> Adding: Click add to cart
  1891→        Adding --> InStock: Complete
  1892→        OutOfStock --> SoldOut: Deny policy
  1893→        OutOfStock --> Backorder: Continue policy
  1894→    }
  1895→
  1896→    state "Checkout" as CO {
  1897→        Contact --> ShippingAddress: Complete step 1
  1898→        ShippingAddress --> ShippingMethod: Complete step 2
  1899→        ShippingMethod --> Payment: Complete step 3
  1900→        Payment --> Processing: Submit payment
  1901→        Processing --> Confirmation: Payment success
  1902→        Processing --> Payment: Payment failure
  1903→    }
  1904→```
  1905→
  1906→---
  1907→
  1908→## 21. Flash / Toast Messages
  1909→
  1910→| Action | Message | Type |
  1911→|--------|---------|------|
  1912→| Item added to cart | "Added to cart" | success |
  1913→| Item removed from cart | "Item removed" | success |
  1914→| Cart is empty | "Your cart is empty" | info |
  1915→| Discount applied | "Discount applied" | success |
  1916→| Invalid discount code | "Invalid discount code" | error |
  1917→| Out of stock | "This product is currently out of stock" | warning |
  1918→| Registration success | "Account created successfully" | success |
  1919→| Login success | (redirect, no message) | - |
  1920→| Login failed | "Invalid credentials" | error |
  1921→| Password reset sent | "We have emailed your password reset link!" | success |
  1922→| Order placed | "Thank you for your order!" | success |
  1923→

prompt:
Read ALL the specification files in /Users/fabianwesner/Herd/shop/specs/ directory. I need the full content of:
1. specs/01-DATABASE-SCHEMA.md (read in chunks if needed)
2. specs/02-API-ROUTES.md (read in chunks if needed)
3. specs/03-ADMIN-UI.md (read in chunks if needed)
4. specs/04-STOREFRONT-UI.md (read in chunks if needed)
5. specs/05-BUSINESS-LOGIC.md (read in chunks if needed)
6. specs/06-AUTH-AND-SECURITY.md (read in chunks if needed)
7. specs/07-SEEDERS-AND-TEST-DATA.md (read in chunks if needed)
8. specs/08-PLAYWRIGHT-E2E-PLAN.md (read in chunks if needed)

For each file provide a comprehensive summary including:
- All table/column definitions
- All API endpoints
- All UI components and their specifications
- All business rules
- All test specifications
- All seeder data definitions

This is critical - I need ALL the details, not just summaries. Extract every table name, column, relationship, route, component, and test case.


prompt:
Read ALL the specification files in /Users/fabianwesner/Herd/shop/specs/ directory. I need the full content of:
1. specs/01-DATABASE-SCHEMA.md (read in chunks if needed)
2. specs/02-API-ROUTES.md (read in chunks if needed)
3. specs/03-ADMIN-UI.md (read in chunks if needed)
4. specs/04-STOREFRONT-UI.md (read in chunks if needed)
5. specs/05-BUSINESS-LOGIC.md (read in chunks if needed)
6. specs/06-AUTH-AND-SECURITY.md (read in chunks if needed)
7. specs/07-SEEDERS-AND-TEST-DATA.md (read in chunks if needed)
8. specs/08-PLAYWRIGHT-E2E-PLAN.md (read in chunks if needed)

For each file provide a comprehensive summary including:
- All table/column definitions
- All API endpoints
- All UI components and their specifications
- All business rules
- All test specifications
- All seeder data definitions

This is critical - I need ALL the details, not just summaries. Extract every table name, column, relationship, route, component, and test case.


content:
     1→<?php
     2→
     3→return [
     4→
     5→    /*
     6→    |--------------------------------------------------------------------------
     7→    | Authentication Defaults
     8→    |--------------------------------------------------------------------------
     9→    |
    10→    | This option defines the default authentication "guard" and password
    11→    | reset "broker" for your application. You may change these values
    12→    | as required, but they're a perfect start for most applications.
    13→    |
    14→    */
    15→
    16→    'defaults' => [
    17→        'guard' => env('AUTH_GUARD', 'web'),
    18→        'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
    19→    ],
    20→
    21→    /*
    22→    |--------------------------------------------------------------------------
    23→    | Authentication Guards
    24→    |--------------------------------------------------------------------------
    25→    |
    26→    | Next, you may define every authentication guard for your application.
    27→    | Of course, a great default configuration has been defined for you
    28→    | which utilizes session storage plus the Eloquent user provider.
    29→    |
    30→    | All authentication guards have a user provider, which defines how the
    31→    | users are actually retrieved out of your database or other storage
    32→    | system used by the application. Typically, Eloquent is utilized.
    33→    |
    34→    | Supported: "session"
    35→    |
    36→    */
    37→
    38→    'guards' => [
    39→        'web' => [
    40→            'driver' => 'session',
    41→            'provider' => 'users',
    42→        ],
    43→    ],
    44→
    45→    /*
    46→    |--------------------------------------------------------------------------
    47→    | User Providers
    48→    |--------------------------------------------------------------------------
    49→    |
    50→    | All authentication guards have a user provider, which defines how the
    51→    | users are actually retrieved out of your database or other storage
    52→    | system used by the application. Typically, Eloquent is utilized.
    53→    |
    54→    | If you have multiple user tables or models you may configure multiple
    55→    | providers to represent the model / table. These providers may then
    56→    | be assigned to any extra authentication guards you have defined.
    57→    |
    58→    | Supported: "database", "eloquent"
    59→    |
    60→    */

prompt:
Explore the current state of the Laravel project at /Users/fabianwesner/Herd/shop. I need to understand:

1. What files already exist (models, controllers, migrations, routes, views, tests, etc.)
2. Current state of composer.json dependencies
3. Current state of package.json
4. Current .env configuration
5. Current config files (auth.php, database.php, etc.)
6. Current routes/web.php, routes/api.php, routes/console.php
7. Current app directory structure
8. Current tests directory structure
9. Current database/migrations directory
10. Current resources/views directory

Give me a comprehensive overview of what already exists vs what needs to be built.