Implemented order history

Added legal pages, contact and abut us
Redesigned account, checkout Added stock management design elements
2026-06-17 22:45:40 +02:00 · 2026-06-16 23:32:44 +02:00 · 2026-06-16 21:12:12 +02:00 · 2026-06-16 14:49:03 +02:00 · 2026-06-16 14:37:44 +02:00 · 2026-06-16 13:47:03 +02:00
54 changed files with 4683 additions and 1612 deletions
@@ -23,7 +23,7 @@ trigger:
 kind: pipeline
 type: docker
 name: package
-
+ 
 steps:
  - name: docker-build
    image: plugins/docker
@@ -31,6 +31,10 @@ steps:
      registry: nexus.khongisa.co.za
      repo: nexus.khongisa.co.za/midrandbooks
      tags: [ latest, "1.${DRONE_BUILD_NUMBER}" ]
+      use_cache: true
+      cache_from: nexus.khongisa.co.za/midrandbooks:latest
+      build_args:
+        - BUILDKIT_INLINE_CACHE=1
      custom_labels:
        - org.opencontainers.image.source=https://gitea.khongisa.co.za/litecharms/midrandbooks
        - org.opencontainers.image.version=1.${DRONE_BUILD_NUMBER}
@@ -1,6 +1,7 @@
 <Solution>
  <Folder Name="/Solution Items/">
    <File Path=".drone.yml" />
+    <File Path=".editorconfig" />
    <File Path="Dockerfile" />
    <File Path="midrandbooks-uat.yml" />
    <File Path="README.md" />
@@ -1,26 +1,69 @@
-<div class="col-12 col-md-6 col-lg-4 mb-4">
-    <div class="card border-0 h-100 p-4 position-relative" style="background-color: #F1F1F1; border-radius: var(--mb-radius);">
+<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
+    <div class="d-flex flex-column h-100 justify-content-between">
+
+        <div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
+             style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
+             @onclick="OnCardClick">
+
+            <div class="d-flex justify-content-between align-items-center mb-3">
+                @if (IsNew)
+                {
+                    <span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
+                }
+                else
+                {
+                    <div></div>
+                }
+
+                <div class="d-flex align-items-center gap-2">
+                    <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0 btn-cart-icon"
+                            style="width: 32px; height: 32px; transition: all 0.2s ease;"
+                            title="Add to Cart"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            @onclick="HandleAddToCart" @onclick:stopPropagation>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="9" cy="21" r="1"></circle>
+                            <circle cx="20" cy="21" r="1"></circle>
+                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                        </svg>
+                    </button>
+
+                    <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0"
+                            style="width: 32px; height: 32px;">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
+                            <line x1="7" y1="17" x2="17" y2="7" />
+                            <polyline points="7,7 17,7 17,17" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
+                @if (!string.IsNullOrWhiteSpace(BookImageUrl))
+                {
+                    <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+                }
+                else
+                {
+                    <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
+                         style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
+                        <div style="max-width: 100%; overflow: hidden; word-break: break-word;">
+                            @Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
+                        </div>
+                    </div>
+                }
+            </div>

-        <div class="d-flex justify-content-between align-items-center mb-4">
-            <span class="badge rounded-pill px-3 py-2" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
-            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
-                <i data-lucide="arrow-up-right" style="width: 16px; height: 16px; color: var(--mb-text-dark);"></i>
-            </button>
        </div>

-        <div class="d-flex justify-content-center align-items-center flex-grow-1 my-3" style="min-height: 260px;">
-            <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+        <div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
+            <div style="max-width: 72%;">
+                <span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
+                <span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
+            </div>
+            <span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
        </div>

    </div>
-    <div class="d-flex justify-content-between align-items-center mt-3 px-2">
-        <span class="fw-medium text-dark" style="font-size: 0.9rem;">@Title</span>
-        <span class="text-muted fw-semibold" style="font-size: 0.9rem;">$@Price</span>
-    </div>
-</div>
-
-@code {
-    [Parameter] public string Title { get; set; } = "";
-    [Parameter] public decimal Price { get; set; }
-    [Parameter] public string BookImageUrl { get; set; } = "";
-}
+</div>
@@ -0,0 +1,44 @@
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Products;
+
+namespace MidrandBookshop.Components;
+
+public partial class BookCard
+{
+    [Parameter] public long Id { get; set; }
+    [Parameter] public string Title { get; set; } = string.Empty;
+    [Parameter] public string Author { get; set; } = string.Empty;
+    [Parameter] public decimal Price { get; set; }
+    [Parameter] public string Category { get; set; } = string.Empty;
+    [Parameter] public bool IsNew { get; set; }
+    [Parameter] public string BookImageUrl { get; set; } = string.Empty;
+
+    [Parameter] public EventCallback OnCardClick { get; set; }
+
+    [Inject] private CartService CartService { get; set; } = default!;
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private BooksService BooksService { get; set; } = default!;
+    [Inject] private IToastService ToastService { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+
+    private async Task HandleAddToCart()
+    {
+        try
+        {
+            var bookFetch = await BooksService.GetBookByProductIdAsync(Id, CancellationToken);            
+            var authorFetch = await AuthorService.GetAuthorAsync(bookFetch.Value.AuthorId, CancellationToken);
+            var productPriceFetch = await ProductService.GetProductPriceAsync(Id, CancellationToken);
+
+            CartService.AddItem(productPriceFetch.Value, bookFetch.Value.Product!, authorFetch.Value);
+
+            ToastService.ShowSuccess($"Added '{Title}' to your order.", "Cart Changed");
+        }
+        catch
+        {
+            ToastService.ShowError("Could not update cart. Please try again.");
+        }
+    }
+}
@@ -1,14 +1,13 @@
-@inherits LayoutComponentBase
+@using Blazored.Toast
+@inherits LayoutComponentBase
@inject NavigationManager Navigation

 <div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
-
-    @* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
    <div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
    <div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
        <div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
            <h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
-                YOUR CART (@CartItems.Sum(i => i.Quantity))
+                YOUR CART (@ShoppingCart.Items.Count())
            </h5>
            <button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -19,7 +18,7 @@
        </div>

        <div class="cart-body flex-grow-1 overflow-y-auto p-4">
-            @if (!CartItems.Any())
+            @if (!ShoppingCart.Items.Any())
            {
                <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
                    <svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -31,22 +30,29 @@
            else
            {
                <div class="d-flex flex-column gap-4">
-                    @foreach (var item in CartItems)
+                    @foreach (var item in ShoppingCart.Items)
                    {
                        <div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
                            <div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
-                                [ COVER ]
+                                @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
+                                {
+                                    <img src="@item.Product!.ImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@item.Product.Name" />
+                                }
+                                else
+                                {
+                                    @:[COVER]
+                                }
                            </div>
                            <div class="flex-grow-1">
-                                <h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Title</h6>
-                                <p class="text-muted xx-small mb-2">by @item.Author</p>
+                                <h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Product!.Name</h6>
+                                <p class="text-muted xx-small mb-2">by @($"{item.Author!.Name} {item.Author.LastName}")</p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
                                        <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
-                                        <span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@item.Quantity</span>
+                                        <span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@ShoppingCart.Items.FirstOrDefault(i => i.Price!.Id == item.Price!.Id)!.Quantity</span>
                                        <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
                                    </div>
-                                    <span class="small fw-semibold text-dark">R @(item.Price * item.Quantity)</span>
+                                    <span class="small fw-semibold text-dark">R @(item.Price!.Amount * item.Quantity)</span>
                                </div>
                            </div>
                            <button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
@@ -58,7 +64,7 @@
            }
        </div>

-        @if (CartItems.Any())
+        @if (ShoppingCart.Items.Any())
        {
            <div class="cart-footer p-4 bg-light border-top mt-auto">
                <div class="d-flex align-items-center justify-content-between mb-4">
@@ -77,9 +83,7 @@
        }
    </div>

-    @* --- TOP FIXED LAYOUT AREA --- *@
    <div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
-        @* Decorative Background SVG Watermark Line Graphic *@
        <div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
            <svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
@@ -138,15 +142,16 @@
                        <input type="text"
                               class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
                               placeholder="Search by ISBN, Author, Title..."
-                               value="@GlobalSearchQuery"
-                               @oninput="OnSearchInput" />
+                               @bind="SearchInputBuffer"
+                               @bind:event="oninput"
+                               @onkeydown="HandleSearchKeyDown" />
                    </div>

-                    <button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
-                            style="width: 32px; height: 32px;"
+                    <button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
                            @onclick="ToggleGlobalSearch"
-                            type="button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            type="button"
+                            aria-label="Toggle Search">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
@@ -159,34 +164,78 @@
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
                            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
                        </svg>
-                        @if (CartItems.Any())
+                        @if (ShoppingCart.Items.Any())
                        {
-                            <span class="cart-badge">@CartItems.Sum(i => i.Quantity)</span>
+                            <span class="cart-badge">@ShoppingCart.Items.Count</span>
                        }
                    </button>

-                    <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                            <circle cx="12" cy="7" r="4" />
-                        </svg>
-                        LogIn
-                    </a>
+                    <div class="dropdown header-account-dropdown">
+                        <button class="btn btn-sm d-flex align-items-center gap-1.5 p-1 text-dark border-0 dropdown-toggle no-caret"
+                                type="button"
+                                id="accountDropdownMenu"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
+                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                <circle cx="12" cy="7" r="4"></circle>
+                            </svg>
+                            <span class="d-none d-md-inline font-monospace text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.05em;">Account</span>
+                        </button>

-                    <a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
-                       style="width: 32px; height: 32px;"
-                       aria-label="Log In">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                            <circle cx="12" cy="7" r="4" />
-                        </svg>
-                    </a>
+                        <ul class="dropdown-menu dropdown-menu-end brand-dropdown-pane p-0 m-0" aria-labelledby="accountDropdownMenu">
+                            <AuthorizeView>
+                                <Authorized>
+                                    <li class="dropdown-header-identity p-3 border-bottom bg-light">
+                                        <span class="d-block text-muted text-uppercase font-monospace xx-small" style="font-size: 0.6rem; letter-spacing: 0.1em;">Active Identity</span>
+                                        <span class="fw-bold text-dark text-truncate d-block" style="font-size: 0.85rem;">@(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")</span>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/account">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                                            My Orders
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" target="_blank">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                                            Security Center
+                                        </a>
+                                    </li>
+                                    <li><hr class="dropdown-divider m-0" /></li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="HandleLogout">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                                <polyline points="16 17 21 12 16 7"></polyline>
+                                                <line x1="21" y1="12" x2="9" y2="12"></line>
+                                            </svg>
+                                            Logout
+                                        </a>
+                                    </li>
+                                </Authorized>
+                                <NotAuthorized>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="HandleLogin">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
+                                            Sign In
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="javascript:void(0)" @onclick:preventDefault @onclick="RedirectToAccount">
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                                            Order History
+                                        </a>
+                                    </li>
+                                </NotAuthorized>
+                            </AuthorizeView>
+                        </ul>
+                    </div>
                </div>
            </div>
        </nav>
    </div>

-    @* --- MAIN INDEPENDENT SCROLL LAYER --- *@
    <div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
        <main class="position-relative" style="z-index: 5;">
            <CascadingValue Value="GlobalSearchQuery">
@@ -247,56 +296,4 @@
    </div>
 </div>

-@code {
-    private string GlobalSearchQuery { get; set; } = string.Empty;
-    private bool IsSearchActive { get; set; } = false;
-    private bool IsCartOpen { get; set; } = false;
-
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
-    private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
-    private void ToggleCart() => IsCartOpen = !IsCartOpen;
-
-    private void OnSearchInput(ChangeEventArgs e)
-    {
-        GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
-    }
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0)
-        {
-            CartItems.Remove(item);
-        }
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-    private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
-
-    private void RedirectToCart()
-    {
-        IsCartOpen = false;
-        Navigation.NavigateTo("/cart");
-    }
-
-    private void RedirectToCheckout()
-    {
-        IsCartOpen = false;
-        Navigation.NavigateTo("/checkout");
-    }
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-}
+<BlazoredToasts />
@@ -0,0 +1,170 @@
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Layout;
+
+public partial class MainLayout(CartService cartService) : IDisposable
+{
+    [Inject] public IToastService ToastService { get; set; } = default!;
+
+    private Cart ShoppingCart => cartService.ShoppingCart;
+
+    private string SearchInputBuffer { get; set; } = string.Empty;
+    private string GlobalSearchQuery { get; set; } = string.Empty;
+    private bool IsSearchActive { get; set; } = false;
+    private bool IsCartOpen { get; set; } = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        Navigation.LocationChanged += OnLocationChanged;
+        cartService.OnCartChanged += CartService_OnCartChanged;
+
+        if (cartService.ShoppingCart.Items.Count == 0)
+            await cartService.LoadCartFromStorageAsync();
+
+        SyncSearchQueryFromUrl();
+    }
+
+    private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        SyncSearchQueryFromUrl();
+        StateHasChanged();
+    }
+
+    private void SyncSearchQueryFromUrl()
+    {
+        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
+        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
+
+        if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
+        {
+            GlobalSearchQuery = queryVal.ToString();
+            SearchInputBuffer = GlobalSearchQuery;
+            IsSearchActive = true;
+        }
+        else
+        {
+            GlobalSearchQuery = string.Empty;
+            SearchInputBuffer = string.Empty;
+            IsSearchActive = false;
+        }
+    }
+
+    private void ToggleGlobalSearch()
+    {
+        if (!IsSearchActive)
+            IsSearchActive = true;
+        else
+            CommitSearchNavigation();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") CommitSearchNavigation();
+    }
+
+    private void CommitSearchNavigation()
+    {
+        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
+        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
+
+        var newRouteParams = new Dictionary<string, object?>();
+
+        foreach (var param in queryParameters)
+        {
+            if (param.Key != "q")
+            {
+                newRouteParams[param.Key] = param.Value.ToString();
+            }
+        }
+
+        if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
+            newRouteParams["q"] = SearchInputBuffer.Trim();
+        else
+            newRouteParams["q"] = null;
+
+        var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
+        var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
+
+        Navigation.NavigateTo(updatedUri);
+    }
+
+    private void ToggleCart() => IsCartOpen = !IsCartOpen;
+
+    private async Task ChangeQuantity(CartItem item, int delta)
+    {
+        var peekQuantity = item.Quantity + delta;
+
+        if (peekQuantity < 1) return;
+
+        cartService.UpdateQuantity(item.Price!.Id, delta);
+
+        await cartService.SaveCartToStorageAsync();
+    }
+
+    private async Task RemoveFromCart(CartItem item)
+    {
+        cartService.RemoveOneItem(item.Price!.Id);
+
+        await cartService.SaveCartToStorageAsync();
+
+        ToastService.ShowSuccess($"Removed {item.Product!.Name} from cart", "Cart Changed");
+    }
+
+    private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
+
+    private async Task RedirectToCart()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/cart");
+    }
+
+    private async Task RedirectToCheckout()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/checkout", forceLoad: true);
+    }
+
+    private async Task RedirectToAccount()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/account", forceLoad: true);
+    }
+
+    private async Task HandleLogin()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/login", forceLoad: true);
+    }
+
+    private async Task HandleLogout()
+    {
+        IsCartOpen = false;
+
+        await cartService.SaveCartToStorageAsync();
+
+        Navigation.NavigateTo("/logout", forceLoad: true);
+    }
+
+    public void Dispose()
+    {
+        Navigation.LocationChanged -= OnLocationChanged;
+        cartService.OnCartChanged -= CartService_OnCartChanged;
+
+        GC.SuppressFinalize(this);
+    }
+}
@@ -20,10 +20,10 @@
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }

-.cart-overlay.is-visible {
-    opacity: 1;
-    pointer-events: auto;
-}
+    .cart-overlay.is-visible {
+        opacity: 1;
+        pointer-events: auto;
+    }

 .cart-drawer {
    position: fixed;
@@ -37,10 +37,10 @@
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

-.cart-drawer.is-open {
-    transform: translateX(-420px);
-    pointer-events: auto;
-}
+    .cart-drawer.is-open {
+        transform: translateX(-420px);
+        pointer-events: auto;
+    }

 .cart-badge {
    position: absolute;
@@ -71,16 +71,16 @@
    padding: 2px 4px;
 }

-.quantity-picker button {
-    font-size: 0.85rem;
-    font-weight: 600;
-    line-height: 1;
-}
+    .quantity-picker button {
+        font-size: 0.85rem;
+        font-weight: 600;
+        line-height: 1;
+    }

-.quantity-picker button:hover {
-    background-color: rgba(0,0,0,0.05);
-    border-radius: 50%;
-}
+        .quantity-picker button:hover {
+            background-color: rgba(0,0,0,0.05);
+            border-radius: 50%;
+        }

 .custom-site-footer {
    width: 100%;
@@ -120,9 +120,9 @@
    transition: color 0.2s ease;
 }

-.footer-contact-link:hover {
-    color: #FFFFFF !important;
-}
+    .footer-contact-link:hover {
+        color: #FFFFFF !important;
+    }

 .footer-section-heading {
    font-size: 0.65rem;
@@ -138,9 +138,9 @@
    transition: color 0.2s ease;
 }

-.footer-nav-link:hover {
-    color: #FFFFFF !important;
-}
+    .footer-nav-link:hover {
+        color: #FFFFFF !important;
+    }

 .footer-meta-item {
    font-size: 0.8rem;
@@ -179,15 +179,47 @@
    transition: transform 0.2s ease, background-color 0.2s ease;
 }

-.btn-back-to-top:hover {
-    background-color: #333333;
-    transform: translateY(-2px);
-}
+    .btn-back-to-top:hover {
+        background-color: #333333;
+        transform: translateY(-2px);
+    }

-.btn-back-to-top:active {
-    transform: translateY(0);
-}
+    .btn-back-to-top:active {
+        transform: translateY(0);
+    }

 .scroll-container {
    scroll-behavior: smooth;
+}
+
+.no-caret::after {
+    display: none !important;
+}
+
+.brand-dropdown-pane {
+    border-radius: 0px !important;
+    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+    min-width: 190px;
+    z-index: 1050;
+}
+
+    .brand-dropdown-pane .dropdown-item {
+        font-size: 0.72rem;
+        letter-spacing: 0.02em;
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+        .brand-dropdown-pane .dropdown-item:hover {
+            background-color: #1A1A1A !important;
+            color: #FFFFFF !important;
+        }
+
+        .brand-dropdown-pane .dropdown-item.text-danger:hover {
+            background-color: #DC3545 !important;
+            color: #FFFFFF !important;
+        }
+
+.dropdown-header-identity {
+    user-select: none;
 }
@@ -1,31 +1,58 @@
 <script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>

 <dialog id="components-reconnect-modal" data-nosnippet>
-    <div class="components-reconnect-container">
-        <div class="components-rejoining-animation" aria-hidden="true">
-            <div></div>
-            <div></div>
+    <div class="glassine-page-jacket"></div>
+
+    <div class="literary-sync-strip">
+        <div class="strip-container">
+
+            <div class="sync-status-indicator">
+                <svg class="literary-helix-loader" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path class="book-base-spine" d="M12 5v14M12 5c-1.5-2-4.5-2-7-2H2v14h3c2.5 0 5.5 0 7 2M12 5c1.5-2 4.5-2 7-2h3v14h-3c-2.5 0-5.5 0-7 2" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+                    <path class="flipping-leaf-vector" d="M12 5c-1-1.5-3-2-5-2H3v14h4c2 0 4 .5 5 2" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                <span class="font-monospace text-uppercase small-tracking">Catalog Circuit Sync</span>
+            </div>
+
+            <div class="sync-message-body">
+                <span class="components-reconnect-first-attempt-visible">
+                    Connection interrupted. Re-indexing active reading stack...
+                </span>
+
+                <span class="components-reconnect-repeated-attempt-visible">
+                    Sync delayed. Re-aligning database archives in <span id="components-seconds-to-next-attempt" class="fw-bold font-monospace">0</span>s...
+                </span>
+
+                <span class="components-reconnect-failed-visible text-crimson">
+                    Archival path blocked. Automated sync offline.
+                </span>
+
+                <span class="components-pause-visible">
+                    Reading layout paused by host environment node.
+                </span>
+
+                <span class="components-resume-failed-visible text-crimson">
+                    State alignment broken.
+                </span>
+            </div>
+
+            <div class="sync-action-node">
+                <button id="components-reconnect-button" class="btn-strip-action components-reconnect-failed-visible">
+                    <span>Retry Sync</span>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" />
+                    </svg>
+                </button>
+                <button id="components-resume-button" class="btn-strip-action components-pause-visible components-resume-failed-visible">
+                    <span>Reload Session</span>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <polyline points="1 20 1 14 7 14"></polyline>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                    </svg>
+                </button>
+            </div>
+
        </div>
-        <p class="components-reconnect-first-attempt-visible">
-            Rejoining the server...
-        </p>
-        <p class="components-reconnect-repeated-attempt-visible">
-            Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
-        </p>
-        <p class="components-reconnect-failed-visible">
-            Failed to rejoin.<br />Please retry or reload the page.
-        </p>
-        <button id="components-reconnect-button" class="components-reconnect-failed-visible">
-            Retry
-        </button>
-        <p class="components-pause-visible">
-            The session has been paused by the server.
-        </p>
-        <p class="components-resume-failed-visible">
-            Failed to resume the session.<br />Please retry or reload the page.
-        </p>
-        <button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
-            Resume
-        </button>
    </div>
-</dialog>
+</dialog>
@@ -1,157 +1,218 @@
-.components-reconnect-first-attempt-visible,
-.components-reconnect-repeated-attempt-visible,
-.components-reconnect-failed-visible,
-.components-pause-visible,
-.components-resume-failed-visible,
-.components-rejoining-animation {
-    display: none;
-}
-
-#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
-#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
-#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
-#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
-#components-reconnect-modal.components-reconnect-retrying,
-#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
-#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
-#components-reconnect-modal.components-reconnect-failed,
-#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
-    display: block;
-}
-
+/* ==========================================================================
+   Midrand Books — Glassine Architectural Veil & Ribbon Strip
+   ========================================================================== */

+/* --- Native Dialog Element Layout Overrides --- */
 #components-reconnect-modal {
-    background-color: white;
-    width: 20rem;
-    margin: 20vh auto;
-    padding: 2rem;
-    border: 0;
-    border-radius: 0.5rem;
-    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
-    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
-    &[open]
-
-{
-    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
-    animation-fill-mode: both;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    z-index: 99999;
+    overflow: hidden;
 }

-}
-
-#components-reconnect-modal::backdrop {
-    background-color: rgba(0, 0, 0, 0.4);
-    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
-    opacity: 1;
-}
-
-@keyframes components-reconnect-modal-slideUp {
-    0% {
-        transform: translateY(30px) scale(0.95);
+    /* Remove default browser modal backdrop blockout to allow custom layering below */
+    #components-reconnect-modal::backdrop {
+        background: transparent;
    }

-    100% {
+/* --- Glassine Page Jacket Layer ---
+   Frosted translucent shield that preserves context visibility while blocking mouse actions
+*/
+.glassine-page-jacket {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(251, 251, 250, 0.4); /* Premium warm paper tint */
+    backdrop-filter: blur(5px); /* Elegant frosted glass sweep */
+    cursor: wait;
+    animation: glassFadeIn 0.35s ease-out forwards;
+}
+
+@keyframes glassFadeIn {
+    from {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+    }
+
+    to {
+        opacity: 1;
+        backdrop-filter: blur(5px);
+    }
+}
+
+/* --- The Sliding Ribbon Banner --- */
+.literary-sync-strip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #FFFFFF;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
+    padding: 1.1rem 2rem;
+    box-sizing: border-box;
+    z-index: 2;
+    /* Animation kinematics: smooth physical drop slide */
+    transform: translateY(-100%);
+    animation: stripSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes stripSlideDown {
+    to {
        transform: translateY(0);
    }
 }

-@keyframes components-reconnect-modal-fadeInOpacity {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes components-reconnect-modal-fadeOutOpacity {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.components-reconnect-container {
-    display: flex;
-    flex-direction: column;
+/* --- Ribbon Layout Matrix Grid --- */
+.strip-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
    align-items: center;
-    gap: 1rem;
+    gap: 2.5rem;
 }

-#components-reconnect-modal p {
-    margin: 0;
-    text-align: center;
+/* Left Node Ticker Elements & Animated Vector */
+.sync-status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    padding-right: 2rem;
 }

-#components-reconnect-modal button {
-    border: 0;
-    background-color: #6b9ed2;
-    color: white;
-    padding: 4px 24px;
-    border-radius: 4px;
+.small-tracking {
+    font-family: var(--bs-font-monospace);
+    font-size: 0.7rem;
+    letter-spacing: 0.12em;
+    color: #111111;
+    font-weight: 600;
 }

-    #components-reconnect-modal button:hover {
-        background-color: #3b6ea2;
-    }
-
-    #components-reconnect-modal button:active {
-        background-color: #6b9ed2;
-    }
-
-.components-rejoining-animation {
-    position: relative;
-    width: 80px;
-    height: 80px;
+/* Animated Book Helix SVG */
+.literary-helix-loader {
+    width: 18px;
+    height: 18px;
+    color: #111111;
 }

-    .components-rejoining-animation div {
-        position: absolute;
-        border: 3px solid #0087ff;
-        opacity: 1;
-        border-radius: 50%;
-        animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-    }
+.flipping-leaf-vector {
+    transform-origin: 12px 12px;
+    animation: svgLeafFlip 1.6s infinite cubic-bezier(0.4, 0, 0.2, 1);
+}

-        .components-rejoining-animation div:nth-child(2) {
-            animation-delay: -0.5s;
-        }
-
-@keyframes components-rejoining-animation {
+@keyframes svgLeafFlip {
    0% {
-        top: 40px;
-        left: 40px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-
-    4.9% {
-        top: 40px;
-        left: 40px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-
-    5% {
-        top: 40px;
-        left: 40px;
-        width: 0;
-        height: 0;
+        transform: scaleX(1);
        opacity: 1;
    }

+    50% {
+        transform: scaleX(0);
+        opacity: 0.3;
+    }
+
    100% {
-        top: 0px;
-        left: 0px;
-        width: 80px;
-        height: 80px;
+        transform: scaleX(-1);
        opacity: 0;
    }
 }
+
+/* Center Node Text Content */
+.sync-message-body {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: 0.95rem;
+    color: #333333;
+    font-style: italic;
+}
+
+.text-crimson {
+    color: #A34843;
+    font-style: normal;
+    font-weight: 500;
+}
+
+/* Right Node Fine-Press Button Trigger */
+.btn-strip-action {
+    background: #111111;
+    color: #FFFFFF;
+    border: 1px solid #111111;
+    padding: 0.45rem 1.25rem;
+    font-family: var(--bs-font-monospace);
+    font-size: 0.7rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+    .btn-strip-action:hover {
+        background: transparent;
+        color: #111111;
+    }
+
+    .btn-strip-action svg {
+        transition: transform 0.2s ease;
+    }
+
+    .btn-strip-action:hover svg {
+        transform: rotate(45deg);
+    }
+
+/* --- Display Mechanics Matrix Controllers --- */
+.components-reconnect-first-attempt-visible,
+.components-reconnect-repeated-attempt-visible,
+.components-reconnect-failed-visible,
+.components-pause-visible,
+.components-resume-failed-visible {
+    display: none !important;
+}
+
+#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
+#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
+#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
+#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
+#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
+    display: inline-block !important;
+}
+
+#components-reconnect-modal.components-reconnect-failed .btn-strip-action,
+#components-reconnect-modal.components-reconnect-paused .btn-strip-action,
+#components-reconnect-modal.components-reconnect-resume-failed .btn-strip-action {
+    display: inline-flex !important;
+}
+
+/* Tablet Parameters Response Collapse Matrix */
+@media (max-width: 768px) {
+    .strip-container {
+        grid-template-columns: 1fr;
+        gap: 0.65rem;
+        text-align: center;
+    }
+
+    .sync-status-indicator {
+        border-right: none;
+        padding-right: 0;
+        justify-content: center;
+    }
+
+    .sync-action-node {
+        margin-top: 0.25rem;
+    }
+}
@@ -1,4 +1,3 @@
-// Set up event handlers
 const reconnectModal = document.getElementById("components-reconnect-modal");
 reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);

@@ -24,14 +23,8 @@ async function retry() {
    document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);

    try {
-        // Reconnect will asynchronously return:
-        // - true to mean success
-        // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
-        // - exception to mean we didn't reach the server (this can be sync or async)
        const successful = await Blazor.reconnect();
        if (!successful) {
-            // We have been able to reach the server, but the circuit is no longer available.
-            // We'll reload the page so the user can continue using the app as quickly as possible.
            const resumeSuccessful = await Blazor.resumeCircuit();
            if (!resumeSuccessful) {
                location.reload();
@@ -40,7 +33,6 @@ async function retry() {
            }
        }
    } catch (err) {
-        // We got an exception, server is currently unavailable
        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
    }
 }
@@ -60,4 +52,4 @@ async function retryWhenDocumentBecomesVisible() {
    if (document.visibilityState === "visible") {
        await retry();
    }
-}
+}
@@ -0,0 +1,68 @@
+@page "/about"
+@rendermode InteractiveServer
+@inject IJSRuntime JSRuntime
+
+<div class="editorial-page-container py-5">
+    <header class="editorial-header mb-5">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Our Story & Vision</span>
+        <h1 class="editorial-main-title fw-bold">For the Love of the Written Word</h1>
+        <p class="text-muted small font-monospace mt-2">
+            Midrand Books is an independent literary imprint and online bookstore operated by <strong>Lite Charms (Pty) Ltd</strong>.
+        </p>
+    </header>
+
+    <div class="row g-5">
+        <div class="col-lg-3 d-none d-lg-block">
+            <div class="editorial-nav-index font-monospace text-uppercase small gap-3 d-flex flex-column">
+                <button @onclick='() => ScrollToSection("about-bookshelf")' class="index-btn text-start">1. The Bookshelf</button>
+                <button @onclick='() => ScrollToSection("about-publishing")' class="index-btn text-start">2. Independent Publishing</button>
+                <button @onclick='() => ScrollToSection("about-community")' class="index-btn text-start">3. Our Community</button>
+            </div>
+        </div>
+
+        <div class="col-lg-9">
+            <article class="editorial-article-body">
+
+                <section id="about-bookshelf" class="editorial-section mb-5">
+                    <h3 class="section-title">1. A Curated Space for Readers</h3>
+                    <p>
+                        At Midrand Books, we believe that an online bookstore should feel just as warm, inspiring, and intentional as a physical corner shop. We aren’t interested in mass-market commercial algorithms; we are interested in books that leave a mark.
+                    </p>
+                    <p>
+                        Operated proudly under Lite Charms (Pty) Ltd, our storefront is designed to showcase beautiful storytelling, critical histories, academic research, and deep technical disciplines. We source fine press editions and trusted literary brands, ensuring that every book we package and deliver across South Africa feels special from the moment it reaches your hands.
+                    </p>
+                </section>
+
+                <section id="about-publishing" class="editorial-section mb-5">
+                    <h3 class="section-title">2. Empowering New & Independent Voices</h3>
+                    <p>
+                        Beyond our role as a bookseller, our truest passion lies in cultivating the next chapter of South African literature. We know how daunting the modern publishing landscape can be for emerging storytellers, experts, and independent creators.
+                    </p>
+                    <p>
+                        That is why we have integrated custom distribution channels into our platform to help self-publishers and local authors get their manuscripts beautifully styled, correctly indexed, and directly in front of avid readers. Side-by-side with heritage publishing houses, we champion the creative freedom of the indie writer.
+                    </p>
+                </section>
+
+                <section id="about-community" class="editorial-section mb-5 protective-credo-callout">
+                    <h3 class="section-title text-muted-serif">3. Our Creative Guarantee</h3>
+                    <p>
+                        Whether you are an established global author footprint looking for a seamless marketplace, a first-time writer ready to publish your debut book, or a reader hunting for your next great obsession, we welcome you. Midrand Books operates in full compliance with the South African Companies Act, ensuring that your data, transactions, and intellectual property are kept fully safe.
+                    </p>
+                </section>
+
+            </article>
+        </div>
+    </div>
+</div>
+
+@code {
+    private async Task ScrollToSection(string elementId)
+    {
+        await JSRuntime.InvokeVoidAsync("eval", $@"
+            var el = document.getElementById('{elementId}');
+            if (el) {{
+                el.scrollIntoView({{ behavior: 'smooth', block: 'start' }});
+            }}
+        ");
+    }
+}
@@ -0,0 +1,85 @@
+/* ==========================================================================
+   Midrand Books — About Page Fine Press Styles
+   ========================================================================== */
+
+.editorial-page-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.editorial-main-title {
+    font-size: 2.5rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+    font-family: Georgia, 'Times New Roman', serif;
+}
+
+.tracking-wider {
+    letter-spacing: 0.12em;
+}
+
+/* --- Index Navigation Controls --- */
+.editorial-nav-index {
+    position: sticky;
+    top: 2rem;
+    border-left: 1px solid rgba(0, 0, 0, 0.08);
+    padding-left: 1.25rem;
+}
+
+.index-btn {
+    color: #666666;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.2s ease, padding-left 0.2s ease;
+}
+
+    .index-btn:hover {
+        color: #111111;
+        padding-left: 4px;
+    }
+
+    .index-btn:focus {
+        outline: none;
+        color: #111111;
+        font-weight: 600;
+    }
+
+/* --- Narrative Typography --- */
+.editorial-article-body {
+    line-height: 1.8;
+    color: #333333;
+    font-size: 1rem;
+}
+
+.section-title {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: 1.35rem;
+    color: #111111;
+    margin-bottom: 1.25rem;
+    font-weight: 500;
+    scroll-margin-top: 2rem;
+}
+
+.text-muted-serif {
+    color: #555555;
+}
+
+.editorial-section p {
+    margin-bottom: 1.2rem;
+}
+
+.protective-credo-callout {
+    background-color: #FAFAFA;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    padding: 2rem;
+    border-radius: 8px;
+}
@@ -0,0 +1,264 @@
+@page "/account"
+@using Microsoft.AspNetCore.Components.Authorization
+@inject NavigationManager Navigation
+@rendermode InteractiveServer
+@attribute [Authorize]
+
+<div class="account-page-container py-5">
+    <header class="account-header mb-5">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Customer Dashboard</span>
+        <h1 class="account-main-title fw-bold">My Account</h1>
+    </header>
+
+    <div class="row g-5">
+        <div class="col-lg-3">
+            <div class="nav flex-column account-nav-stack gap-1" role="tablist">
+                <button class="nav-link active text-start d-flex align-items-center gap-2" data-bs-toggle="pill" data-bs-target="#orders" role="tab">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
+                    <span>Order History</span>
+                </button>
+
+                <button class="nav-link text-start d-flex align-items-center gap-2" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                    <span>Shipping Address</span>
+                </button>
+                <button class="nav-link text-start d-flex align-items-center gap-2" data-bs-toggle="pill" data-bs-target="#profile" role="tab">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                    <span>Profile Settings</span>
+                </button>
+                <hr class="my-3 opacity-10" />
+                <button class="nav-link nav-logout text-danger text-start d-flex align-items-center gap-2" @onclick="TriggerLogout">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                    <span>Logout Account</span>
+                </button>
+            </div>
+        </div>
+
+        <div class="col-lg-9">
+            <AuthorizeView>
+                <Authorized>
+                    <div class="tab-content account-panels-deck">
+
+                        <div class="tab-pane fade show active" id="orders" role="tabpanel">
+                            <div class="tab-panel-body">
+                                <h5 class="panel-section-title fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4">Order History</h5>
+
+                                @if (orderHistory == null || !orderHistory.Any())
+                                {
+                                    <div class="text-center py-5 border rounded-3 bg-light bg-opacity-50">
+                                        <p class="text-muted small mb-0">You haven't placed any orders with us yet.</p>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <div class="orders-stack d-flex flex-column gap-4">
+                                        @foreach (var order in orderHistory)
+                                        {
+                                            <div class="premium-order-card p-4 border rounded-3 bg-white shadow-sm">
+                                                <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 pb-3 border-bottom border-light mb-3">
+                                                    <div>
+                                                        <span class="font-monospace text-dark fw-bold d-block h6 mb-1">@order.OrderId</span>
+                                                        <small class="text-muted d-block mb-1">Ordered on @order.OrderDate.ToString("dd MMMM yyyy")</small>
+                                                        <small class="text-secondary d-flex align-items-center gap-1" style="font-size: 0.8rem;">
+                                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                                                            <span>Shipped to: <span class="fw-semibold text-dark">@order.ShippingAddressName</span></span>
+                                                        </small>
+                                                    </div>
+
+                                                    <div class="text-md-end d-flex flex-column align-items-md-end gap-2">
+                                                        <div class="d-flex align-items-center gap-1.5 flex-wrap justify-content-md-end">
+                                                            <span class="badge status-badge-base @GetOrderStatusClass(order.Status)">
+                                                                Order: @order.Status
+                                                            </span>
+
+                                                            <span class="badge status-badge-base @GetPaymentStatusClass(order.PaymentStatus)">
+                                                                Pay: @order.PaymentStatus
+                                                            </span>
+
+                                                            <span class="badge status-badge-base @GetShippingStatusClass(order.ShippingStatus)">
+                                                                Logistics: @order.ShippingStatus
+                                                            </span>
+                                                        </div>
+
+                                                        @if (order.PaymentStatus?.ToLower() == "paid")
+                                                        {
+                                                            <button class="btn btn-outline-dark btn-premium-sm font-monospace text-uppercase d-inline-flex align-items-center gap-1.5 py-1 px-2.5"
+                                                                    style="font-size: 0.7rem;" disabled="@string.IsNullOrWhiteSpace(order.InvoiceUrl)"
+                                                                    @onclick="() => DownloadInvoice(order.OrderId)">
+                                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                                                                <span>Invoice</span>
+                                                            </button>
+                                                        }
+                                                    </div>
+                                                </div>
+
+                                                <div class="order-books-manifest manifest-grid-wrap mb-3">
+                                                    @foreach (var book in order.PurchasedBooks)
+                                                    {
+                                                        <div class="manifest-grid-cell">
+                                                            <div class="manifest-book-item border rounded p-2 d-flex align-items-center justify-content-between bg-light bg-opacity-20 h-100">
+                                                                <div class="d-flex align-items-center gap-2.5 min-w-0">
+                                                                    <div class="book-thumbnail-container flex-shrink-0 border rounded bg-white shadow-xs">
+                                                                        <img src="@book.CoverImageUrl" alt="@book.Title" class="book-thumbnail-img" />
+                                                                    </div>
+                                                                    <div class="book-text-meta min-w-0">
+                                                                        <h6 class="text-dark fw-bold mb-0.5 small text-truncate" title="@book.Title">@book.Title</h6>
+                                                                        <span class="badge bg-white text-secondary border font-monospace extra-small py-0.5">Qty: @book.Quantity</span>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="book-row-pricing text-end font-monospace text-dark small ps-2 flex-shrink-0 fw-medium">
+                                                                    R @((book.PriceUnitPrice * book.Quantity).ToString("F2"))
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    }
+                                                </div>
+
+                                                <div class="order-summary-footer border-top pt-3 d-flex align-items-baseline justify-content-between">
+                                                    <span class="text-muted small text-uppercase font-monospace">Order Total</span>
+                                                    <div class="text-end">
+                                                        <span class="font-monospace text-dark fw-bold h5 mb-0 d-block">R @order.Total.ToString("F2")</span>
+                                                        <small class="text-muted extra-small font-monospace">VAT Inclusive</small>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        }
+                                    </div>
+                                }
+                            </div>
+                        </div>
+
+                        <div class="tab-pane fade" id="shipping" role="tabpanel">
+                            <div class="tab-panel-body">
+                                <div class="d-flex justify-content-between align-items-baseline mb-4">
+                                    <h5 class="panel-section-title fw-bold text-dark font-monospace text-uppercase tracking-wider mb-0">Saved Addresses</h5>
+                                    @if (!showAddForm && editingAddress == null)
+                                    {
+                                        <button class="btn btn-outline-dark btn-premium-sm font-monospace text-uppercase" @onclick="() => showAddForm = true">
+                                            Add New Address
+                                        </button>
+                                    }
+                                </div>
+
+                                @if (showAddForm || editingAddress != null)
+                                {
+                                    <div class="premium-interactive-form p-4 border rounded-3 mb-4 bg-light bg-opacity-20 animate-fade-in">
+                                        <h6 class="fw-bold text-dark mb-3">@(editingAddress != null ? "Modify Curated Address" : "Register Destination Address")</h6>
+                                        <div class="row g-3">
+                                            <div class="col-md-6">
+                                                <label class="form-label extra-small font-monospace text-uppercase text-muted">Address Name Label</label>
+                                                <input type="text" class="form-control premium-plaintext-field" placeholder="e.g., Home" @bind="newAddressName" />
+                                            </div>
+                                            <div class="col-md-6">
+                                                <label class="form-label extra-small font-monospace text-uppercase text-muted">Postal Routing Code</label>
+                                                <input type="text" class="form-control premium-plaintext-field" placeholder="e.g., 1685" @bind="newPostalCode" />
+                                            </div>
+                                            <div class="col-12">
+                                                <label class="form-label extra-small font-monospace text-uppercase text-muted">Street Address Lines</label>
+                                                <input type="text" class="form-control premium-plaintext-field" placeholder="e.g., 12 Main Road" @bind="newStreetAddress" />
+                                            </div>
+                                            <div class="col-md-12">
+                                                <label class="form-label extra-small font-monospace text-uppercase text-muted">City / Region</label>
+                                                <input type="text" class="form-control premium-plaintext-field" placeholder="e.g., Midrand" @bind="newCity" />
+                                            </div>
+                                            <div class="col-12 d-flex flex-wrap gap-4 py-2 border-y my-2 bg-white px-3 rounded border">
+                                                <div class="form-check d-flex align-items-center gap-2 m-0">
+                                                    <input type="checkbox" class="form-check-input custom-box-tick m-0" id="isBillingCheck" @bind="isBilling" />
+                                                    <label class="form-check-label context-clickable small fw-medium text-dark" for="isBillingCheck">Default Billing Endpoint</label>
+                                                </div>
+                                                <div class="form-check d-flex align-items-center gap-2 m-0">
+                                                    <input type="checkbox" class="form-check-input custom-box-tick m-0" id="isShippingCheck" @bind="isShipping" />
+                                                    <label class="form-check-label context-clickable small fw-medium text-dark" for="isShippingCheck">Default Fulfillment Endpoint</label>
+                                                </div>
+                                            </div>
+                                            <div class="col-12 d-flex justify-content-end gap-2 mt-3">
+                                                <button class="btn btn-clean-cancel font-monospace text-uppercase small" @onclick="CancelAddressActions">Cancel</button>
+                                                <button class="btn btn-dark px-4 py-2 text-uppercase font-monospace small" @onclick="SaveAddress">Save Address Details</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                }
+
+                                <div class="row g-4">
+                                    @foreach (var addr in savedAddresses)
+                                    {
+                                        <div class="col-md-6">
+                                            <div class="address-curated-card p-4 border rounded-3 position-relative d-flex flex-column h-100 bg-white @(addr.IsPrimary ? "border-dark shadow-sm" : "opacity-90")">
+                                                <div class="d-flex justify-content-between align-items-start mb-2">
+                                                    <span class="fw-bold text-dark font-monospace tracking-wide text-uppercase" style="font-size: 0.82rem;">@addr.Name</span>
+                                                    <div class="form-check d-flex align-items-center gap-1.5 p-0 m-0">
+                                                        <input type="radio" class="form-check-input custom-box-tick m-0" name="primaryAddr" id="@($"primary-{addr.Id}")" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" />
+                                                        <label class="form-check-label extra-small text-muted font-monospace text-uppercase context-clickable ms-1" for="@($"primary-{addr.Id}")">Primary</label>
+                                                    </div>
+                                                </div>
+
+                                                <div class="address-body-text text-muted mb-4 mt-1 flex-grow-1" style="font-size: 0.88rem; line-height: 1.6;">
+                                                    <span class="d-block text-dark fw-medium">@addr.Street</span>
+                                                    <span class="d-block">@addr.City</span>
+                                                    <span class="font-monospace text-secondary extra-small d-block mt-1">ZA-@addr.PostalCode</span>
+                                                </div>
+
+                                                <div class="address-metadata-badges d-flex flex-wrap gap-1 mb-3">
+                                                    @if (addr.IsBilling)
+                                                    {
+                                                        <span class="badge bg-light text-secondary font-monospace tracking-wide border text-uppercase extra-small px-2 py-1">Billing</span>
+                                                    }
+                                                    @if (addr.IsShipping)
+                                                    {
+                                                        <span class="badge bg-light text-dark font-monospace tracking-wide border border-secondary text-uppercase extra-small px-2 py-1">Shipping</span>
+                                                    }
+                                                </div>
+
+                                                <div class="address-actions-row border-top-dashed pt-3 d-flex gap-3 justify-content-end mt-auto">
+                                                    <button class="btn-action-trigger text-uppercase font-monospace extra-small text-muted border-0 bg-transparent" @onclick="() => EditAddress(addr)">Edit</button>
+                                                    <button class="btn-action-trigger text-uppercase font-monospace extra-small text-danger border-0 bg-transparent" @onclick="() => DeleteAddress(addr)">Delete</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="tab-pane fade" id="profile" role="tabpanel">
+                            <div class="tab-panel-body">
+                                <h5 class="panel-section-title fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4">Profile Settings</h5>
+
+                                <div class="profile-hero-banner mb-4 d-flex align-items-center justify-content-between p-4 border rounded-3 bg-light bg-opacity-20 flex-wrap gap-3">
+                                    <div class="hero-text-content">
+                                        <div class="meta-tag font-monospace text-uppercase text-muted extra-small tracking-wider mb-1">Active Identity</div>
+                                        <h5 class="fw-bold text-dark mb-1 h6">@User?.Identity?.Name</h5>
+                                        <p class="text-muted small mb-0 font-monospace extra-small opacity-75">Secure Connection Authorized</p>
+                                    </div>
+                                    <span class="badge rounded-pill bg-success bg-opacity-10 text-success border border-success border-opacity-20 font-monospace px-3 py-1.5 small text-uppercase tracking-wide">Verified</span>
+                                </div>
+
+                                <div class="card p-5 text-center bg-white border rounded-3 shadow-sm my-4">
+                                    <div class="mb-4 text-muted opacity-40">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                                            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                                        </svg>
+                                    </div>
+                                    <h5 class="fw-bold text-dark mb-2 h6">Centralized Identity Node Settings</h5>
+                                    <p class="text-muted small mx-auto mb-4" style="max-width: 480px; line-height: 1.5;">
+                                        For your structural protection, password alterations, account recovery preferences, cross-tenant factors, and core credential manifests are handled through our global Identity Node security layer.
+                                    </p>
+                                    <a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account"
+                                       target="_blank"
+                                       rel="noopener noreferrer"
+                                       class="btn btn-dark rounded-pill px-4 py-2.5 btn-sm font-monospace text-uppercase tracking-wider d-inline-flex align-items-center gap-2 mx-auto"
+                                       style="font-size: 0.75rem;">
+                                        <span>Access Central Security Center</span>
+                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </Authorized>
+            </AuthorizeView>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,274 @@
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Customers.Models;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Products;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Account : ComponentBase
+{
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] private CustomerService CustomerService { get; set; } = default!;
+    [Inject] private OrderService OrderService { get; set; } = default!;
+    [Inject] private PaymentService PaymentService { get; set; } = default!;
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private HashService HashService { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] private IToastService ToasterService { get; set; } = default!;
+
+    private ClaimsPrincipal? User { get; set; }
+    private Customer? customer;
+
+    private bool showAddForm = false;
+    private AddressItem? editingAddress = null;
+    private string newAddressName = "";
+    private string newStreetAddress = "";
+    private string newCity = "";
+    private string newPostalCode = "";
+    private bool isBilling, isShipping;
+
+    private List<OrderItem> orderHistory = [];
+
+    private List<AddressItem> savedAddresses = new()
+    {
+        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
+        new AddressItem { Id = 2, Name = "Midrand Warehouse", Street = "Corner of Church & Third Roads", City = "Midrand", PostalCode = "1685", IsBilling = false, IsShipping = false, IsPrimary = false }
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState?.User;
+
+        var customerFetch = await CustomerService.GetCustomerAsync(User?.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!, CancellationToken);
+
+        if (customerFetch.IsSuccess)
+            customer = customerFetch.Value;
+
+        await LoadOrdersAsync();
+    }
+
+    private async Task LoadOrdersAsync()
+    {
+        if (customer is null)
+        {
+            ToasterService.ShowError("There was a problem loading your details, please contact the administrator");
+            return;
+        }
+
+        var ordersFetch = await OrderService.GetOrdersByCustomerAsync(customer.Id, CancellationToken);
+
+        if (ordersFetch.IsFailed)
+        {
+            ToasterService.ShowWarning("No orders were found");
+            return;
+        }
+
+        orderHistory.Clear();
+
+        foreach (var order in ordersFetch.Value)
+        {
+            var paymentFetch = await PaymentService.GetOrderPaymentAsync(order.Id, CancellationToken);
+
+            var orderEntry = new OrderItem
+            {
+                OrderDate = order.CreatedAt,
+                OrderId = HashService.HashEncodeLongId(order.Id).Value,
+                Status = order.Status.ToString(),
+                PaymentStatus = paymentFetch.IsSuccess ? paymentFetch.Value.Status.ToString() : "NotPaid",
+                ShippingStatus = "Processing",
+                ShippingAddressName = "TBA",
+                Total = order.Total,
+                InvoiceUrl = order.InvoiceUrl!,
+            };
+
+            var orderItemsFetch = await OrderService.GetOrderItemsAsync(order.Id, CancellationToken);
+            if (orderItemsFetch.IsFailed) continue;
+
+            foreach (var item in orderItemsFetch.Value)
+            {
+                var productPriceFetch = await ProductService.GetProductPriceAsync(item.ProductPriceId, CancellationToken);
+                if (productPriceFetch.IsFailed) continue;
+
+                var productFetch = await ProductService.GetProductAsync(productPriceFetch.Value.ProductId, CancellationToken);
+
+                var itemEntry = new PurchasedBook
+                {
+                    Quantity = item.Quantity,
+                    PriceUnitPrice = productPriceFetch.Value.Amount,
+                    CoverImageUrl = productFetch.Value.ImageUrl!,
+                    Title = productFetch.Value.Name!,
+                };
+                orderEntry.PurchasedBooks.Add(itemEntry);
+            }
+            orderHistory.Add(orderEntry);
+        }
+    }
+
+    private void DownloadInvoice(string orderId)
+    {
+        var order = orderHistory.FirstOrDefault(o => o.OrderId == orderId)!;
+
+        if (string.IsNullOrWhiteSpace(order.InvoiceUrl))
+            ToasterService.ShowWarning("Your invoice is currently not availabe for viewing");
+        else
+            Navigation.NavigateTo(orderHistory.FirstOrDefault(o => o.OrderId == orderId)!.InvoiceUrl, forceLoad: true);
+    }
+
+    // Badge Style 1: Core Order Lifecycle Status Mapping
+    private string GetOrderStatusClass(string? status)
+    {
+        return status?.ToLower() switch
+        {
+            "completed" => "order-completed",
+            "processing" => "order-processing",
+            "cancelled" => "order-cancelled",
+            _ => "order-hold"
+        };
+    }
+
+    // Badge Style 2: Financial Payment Status Mapping
+    private string GetPaymentStatusClass(string? status)
+    {
+        return status?.ToLower() switch
+        {
+            "paid" => "pay-paid",
+            "refunded" => "pay-refunded",
+            _ => "pay-pending"
+        };
+    }
+
+    // Badge Style 3: Logistics Shipment Status Mapping
+    private string GetShippingStatusClass(string? status)
+    {
+        return status?.ToLower() switch
+        {
+            "delivered" => "status-delivered",
+            "shipped" => "status-shipped",
+            _ => "status-processing"
+        };
+    }
+
+    // Implemented to resolve UI registration click events
+    private void SaveAddress()
+    {
+        if (string.IsNullOrWhiteSpace(newAddressName) || string.IsNullOrWhiteSpace(newStreetAddress))
+        {
+            ToasterService.ShowWarning("Please fill in the required fields.");
+            return;
+        }
+
+        if (editingAddress != null)
+        {
+            editingAddress.Name = newAddressName;
+            editingAddress.Street = newStreetAddress;
+            editingAddress.City = newCity;
+            editingAddress.PostalCode = newPostalCode;
+            editingAddress.IsBilling = isBilling;
+            editingAddress.IsShipping = isShipping;
+        }
+        else
+        {
+            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
+            savedAddresses.Add(new AddressItem
+            {
+                Id = nextId,
+                Name = newAddressName,
+                Street = newStreetAddress,
+                City = newCity,
+                PostalCode = newPostalCode,
+                IsBilling = isBilling,
+                IsShipping = isShipping,
+                IsPrimary = !savedAddresses.Any()
+            });
+        }
+
+        CancelAddressActions();
+    }
+
+    private void CancelAddressActions()
+    {
+        showAddForm = false;
+        editingAddress = null;
+        ResetFormFields();
+    }
+
+    private void ResetFormFields()
+    {
+        newAddressName = "";
+        newStreetAddress = "";
+        newCity = "";
+        newPostalCode = "";
+        isBilling = false;
+        isShipping = false;
+    }
+
+    private void EditAddress(AddressItem addr)
+    {
+        editingAddress = addr;
+        newAddressName = addr.Name;
+        newStreetAddress = addr.Street;
+        newCity = addr.City;
+        newPostalCode = addr.PostalCode;
+        isBilling = addr.IsBilling;
+        isShipping = addr.IsShipping;
+        showAddForm = false;
+    }
+
+    private void DeleteAddress(AddressItem addr)
+    {
+        if (editingAddress?.Id == addr.Id) editingAddress = null;
+        savedAddresses.Remove(addr);
+        if (addr.IsPrimary && savedAddresses.Any()) savedAddresses.First().IsPrimary = true;
+    }
+
+    private void SetPrimary(AddressItem target, ChangeEventArgs e)
+    {
+        var isChecked = (bool)(e.Value ?? false);
+        if (isChecked)
+        {
+            foreach (var addr in savedAddresses) addr.IsPrimary = (addr.Id == target.Id);
+        }
+        else target.IsPrimary = false;
+    }
+
+    private void TriggerLogout()
+    {
+        Navigation.NavigateTo("/logout", forceLoad: true);
+    }
+
+    public class AddressItem
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = "";
+        public string Street { get; set; } = "";
+        public string City { get; set; } = "";
+        public string PostalCode { get; set; } = "";
+        public bool IsBilling { get; set; }
+        public bool IsShipping { get; set; }
+        public bool IsPrimary { get; set; }
+    }
+
+    public class OrderItem
+    {
+        public string OrderId { get; set; } = "";
+        public DateTime OrderDate { get; set; }
+        public string ShippingAddressName { get; set; } = "";
+        public string Status { get; set; } = "";
+        public string PaymentStatus { get; set; } = "";
+        public string ShippingStatus { get; set; } = "";
+        public string InvoiceUrl { get; set; } = "";
+        public decimal Total { get; set; }
+        public List<PurchasedBook> PurchasedBooks { get; set; } = new();
+    }
+
+    public class PurchasedBook
+    {
+        public string Title { get; set; } = "";
+        public string CoverImageUrl { get; set; } = "";
+        public int Quantity { get; set; }
+        public decimal PriceUnitPrice { get; set; }
+    }
+}
@@ -0,0 +1,272 @@
+/* ==========================================================================
+   Curated Architecture Dashboard Style Matrix 
+   ========================================================================== */
+
+.account-page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.tab-panel-body {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+@media (min-width: 768px) {
+    .tab-panel-body {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+}
+
+.account-main-title {
+    font-size: 2.25rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+}
+
+.tracking-wider {
+    letter-spacing: 0.08em;
+}
+
+.extra-small {
+    font-size: 0.72rem !important;
+}
+
+/* --- Left Sidebar Architectural Pillar Controls --- */
+.account-nav-stack .nav-link {
+    color: #555555;
+    border-radius: 8px;
+    padding: 0.8rem 1rem;
+    font-weight: 500;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    background: transparent !important;
+}
+
+    .account-nav-stack .nav-link.active {
+        background-color: #111111 !important;
+        color: #FFFFFF !important;
+    }
+
+    .account-nav-stack .nav-link:hover:not(.active) {
+        background-color: rgba(0, 0, 0, 0.04) !important;
+        color: #111111;
+    }
+
+.nav-logout:hover {
+    background-color: rgba(220, 53, 69, 0.08) !important;
+}
+
+/* --- Balanced Status Mapping Badges --- */
+.status-badge-base {
+    font-family: var(--bs-font-monospace);
+    text-transform: uppercase;
+    font-size: 0.68rem;
+    font-weight: 600;
+    padding: 0.45rem 0.65rem;
+    letter-spacing: 0.02em;
+    border-radius: 4px;
+}
+
+/* 1. Core Order Lifecycle Badge Styles */
+.order-completed {
+    background-color: #111111 !important;
+    color: #FFFFFF !important;
+    border: 1px solid #111111;
+}
+
+.order-processing {
+    background-color: rgba(0, 0, 0, 0.03) !important;
+    color: #111111 !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.order-hold {
+    background-color: rgba(108, 117, 125, 0.05) !important;
+    color: #495057 !important;
+    border: 1px solid rgba(108, 117, 125, 0.2);
+}
+
+.order-cancelled {
+    background-color: rgba(220, 53, 69, 0.04) !important;
+    color: #842029 !important;
+    border: 1px solid rgba(220, 53, 69, 0.12);
+}
+
+/* 2. Logistics Shipment Status Badge Styles */
+.status-delivered {
+    background-color: rgba(25, 135, 84, 0.06) !important;
+    color: #198754 !important;
+    border: 1px solid rgba(25, 135, 84, 0.15);
+}
+
+.status-shipped {
+    background-color: rgba(13, 110, 253, 0.06) !important;
+    color: #0d6efd !important;
+    border: 1px solid rgba(13, 110, 253, 0.15);
+}
+
+.status-processing {
+    background-color: rgba(255, 193, 7, 0.08) !important;
+    color: #b58100 !important;
+    border: 1px solid rgba(255, 193, 7, 0.25);
+}
+
+/* 3. Financial Payment Status Badge Styles */
+.pay-paid {
+    background-color: rgba(25, 135, 84, 0.06) !important;
+    color: #198754 !important;
+    border: 1px solid rgba(25, 135, 84, 0.15);
+}
+
+.pay-pending {
+    background-color: rgba(220, 53, 69, 0.06) !important;
+    color: #dc3545 !important;
+    border: 1px solid rgba(220, 53, 69, 0.15);
+}
+
+.pay-refunded {
+    background-color: rgba(108, 117, 125, 0.08) !important;
+    color: #6c757d !important;
+    border: 1px solid rgba(108, 117, 125, 0.2);
+}
+
+/* --- Saved Addresses Section Layout --- */
+.address-curated-card {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+    .address-curated-card:hover {
+        border-color: #111111 !important;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03) !important;
+    }
+
+.border-top-dashed {
+    border-top: 1px dashed rgba(0, 0, 0, 0.08);
+}
+
+.btn-action-trigger {
+    padding: 0;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    opacity: 0.75;
+    transition: opacity 0.15s ease;
+}
+
+    .btn-action-trigger:hover {
+        opacity: 1;
+    }
+
+/* --- Interactive Address Form Fields --- */
+.premium-plaintext-field {
+    background-color: #FAFAFA;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 6px;
+    padding: 0.65rem 0.85rem;
+    font-size: 0.9rem;
+    color: #111111;
+    transition: all 0.2s ease;
+}
+
+    .premium-plaintext-field:focus {
+        border-color: #111111;
+        box-shadow: 0 0 0 1px #111111;
+        background-color: #FFFFFF;
+    }
+
+.custom-box-tick {
+    border: 1.5px solid rgba(0, 0, 0, 0.25);
+    width: 1rem;
+    height: 1rem;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    cursor: pointer;
+}
+
+    .custom-box-tick:checked {
+        background-color: #111111;
+        border-color: #111111;
+    }
+
+.btn-premium-sm {
+    font-size: 0.75rem;
+    padding: 0.45rem 1rem;
+    border-radius: 6px;
+    font-weight: 500;
+}
+
+.btn-clean-cancel {
+    background: transparent;
+    border: none;
+    color: #666666;
+    transition: color 0.15s ease;
+}
+
+    .btn-clean-cancel:hover {
+        color: #111111;
+    }
+
+/* --- Profile Settings Identity Pillar Elements --- */
+.profile-hero-banner {
+    background-color: #FAFAFA;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* --- CSS Grid Book Item Layout --- */
+.manifest-grid-wrap {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1rem;
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .manifest-grid-wrap {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.manifest-grid-cell {
+    min-width: 0;
+}
+
+.manifest-book-item {
+    transition: background-color 0.15s ease;
+}
+
+    .manifest-book-item:hover {
+        background-color: rgba(0, 0, 0, 0.015) !important;
+    }
+
+.book-thumbnail-container {
+    width: 42px;
+    height: 56px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+}
+
+.book-thumbnail-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.shadow-xs {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.min-w-0 {
+    min-width: 0;
+}
+
+.order-summary-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
+}
@@ -1,106 +0,0 @@
-@page "/cart"
-
-<div class="container py-5" style="max-width: 900px;">
-    <div class="d-flex align-items-center justify-content-between mb-5">
-        <h2 class="fw-bold m-0">Your Cart</h2>
-        <a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
-    </div>
-
-    @if (!CartItems.Any())
-    {
-        <div class="text-center py-5 border rounded-3 bg-white">
-            <p class="text-muted mb-4">Your collection is currently empty.</p>
-            <a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
-        </div>
-    }
-    else
-    {
-        <div class="card border-0 shadow-sm p-4 mb-4">
-            @foreach (var item in CartItems)
-            {
-                <div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
-                    <!-- Item Detail -->
-                    <div class="col-12 col-md-6 d-flex align-items-center gap-4">
-                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
-                            <span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
-                        </div>
-                        <div>
-                            <h5 class="fw-bold mb-1">@item.Title</h5>
-                            <p class="text-muted small mb-0">by @item.Author</p>
-                        </div>
-                    </div>
-
-                    <!-- Quantity -->
-                    <div class="col-6 col-md-3 d-flex justify-content-center">
-                        <div class="d-flex align-items-center border rounded-pill bg-light px-2">
-                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
-                            <span class="px-3 fw-bold">@item.Quantity</span>
-                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
-                        </div>
-                    </div>
-
-                    <!-- Price & Remove -->
-                    <div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
-                        <span class="fw-bold">R @(item.Price * item.Quantity)</span>
-                        <button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                        </button>
-                    </div>
-                </div>
-            }
-        </div>
-
-        <!-- Cart Totals Section -->
-        <div class="row justify-content-end">
-            <div class="col-md-5">
-                <div class="bg-white p-4 rounded-3 border">
-                    <div class="d-flex justify-content-between mb-3">
-                        <span class="text-muted">Subtotal</span>
-                        <span class="fw-bold">R @Subtotal.ToString("F2")</span>
-                    </div>
-                    <div class="d-flex justify-content-between mb-4">
-                        <span class="text-muted">VAT (15%)</span>
-                        <span class="fw-bold">R @VatAmount.ToString("F2")</span>
-                    </div>
-                    <hr />
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <span class="fw-bold h5 mb-0">Total</span>
-                        <span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
-                    </div>
-                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
-                </div>
-            </div>
-        </div>
-    }
-</div>
-
-@code {
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
-    // Computed Properties for Calculations
-    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
-    private decimal VatAmount => Subtotal * 0.15m;
-    private decimal Total => Subtotal + VatAmount;
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0) CartItems.Remove(item);
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-}
@@ -0,0 +1,98 @@
+@page "/cart"
+@rendermode InteractiveServer
+
+<div class="container py-5" style="max-width: 1000px; font-family: system-ui, -apple-system, sans-serif;">
+
+    <div class="d-flex align-items-baseline justify-content-between mb-5 border-bottom pb-3">
+        <h1 class="ff-serif mb-0" style="font-size: 2.25rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -0.5px;">Your Cart</h1>
+        <a href="/" class="text-dark text-decoration-none small fw-semibold tracking-widest text-uppercase" style="font-size: 0.75rem; letter-spacing: 1.5px;">Continue Shopping</a>
+    </div>
+
+    @if (!ShoppingCart.Items.Any())
+    {
+        <div class="text-center py-5 my-4">
+            <div class="mb-4 text-muted-50">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-secondary opacity-50"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+            </div>
+            <h3 class="ff-serif mb-2" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400;">Your collection is currently vacant.</h3>
+            <p class="text-muted small mb-4" style="letter-spacing: 0.2px;">Even with careful scrutiny, the requested shelf remains empty.</p>
+            <a href="/" class="btn btn-dark rounded-pill px-4 py-2 text-uppercase fw-semibold tracking-widest" style="font-size: 0.75rem; letter-spacing: 1px; background-color: #1c1f22;">Browse Catalog</a>
+        </div>
+    }
+    else
+    {
+        <div class="row g-5">
+            <div class="col-12 col-lg-7">
+                <div class="d-flex flex-column gap-1">
+                    @foreach (var item in ShoppingCart.Items)
+                    {
+                        <div class="row align-items-center py-4 border-bottom position-relative">
+
+                            <div class="col-12 col-md-7 d-flex align-items-center gap-4 mb-3 mb-md-0">
+                                <div class="bg-light d-flex align-items-center justify-content-center p-2 rounded-1 state-card-shadow"
+                                     style="width: 70px; height: 95px; background-color: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);">
+                                    @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
+                                    {
+                                        <img src="@item.Product!.ImageUrl" class="img-fluid" style="max-height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));" alt="@item.Product.Name" />
+                                    }
+                                    else
+                                    {
+                                        <span class="text-muted fw-bold font-monospace" style="font-size: 0.6rem; letter-spacing: 1px;">[COVER]</span>
+                                    }
+                                </div>
+                                <div style="max-width: 75%;">
+                                    <h5 class="fw-semibold mb-1 text-dark" style="font-size: 0.95rem; line-height: 1.4; letter-spacing: -0.1px;">@item.Product!.Name</h5>
+                                    <p class="text-muted small mb-0" style="font-size: 0.8rem; letter-spacing: 0.1px;">by @($"{item.Author!.Name} {item.Author!.LastName}")</p>
+                                </div>
+                            </div>
+
+                            <div class="col-6 col-md-3 d-flex justify-content-md-center align-items-center">
+                                <div class="d-flex align-items-center border rounded-pill bg-white px-1 py-1" style="border-color: #e9ecef !important;">
+                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => DecreaseQty(item, -1)">—</button>
+                                    <span class="px-2 fw-semibold text-dark" style="font-size: 0.85rem; min-width: 20px; text-align: center;">@item.Quantity</span>
+                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => IncreaseQty(item)">+</button>
+                                </div>
+                            </div>
+
+                            <div class="col-6 col-md-2 text-end d-flex align-items-center justify-content-end gap-3">
+                                <span class="fw-semibold text-dark" style="font-size: 0.95rem; letter-spacing: -0.2px;">R @(item.Amount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                                <button class="btn btn-sm p-1 text-muted opacity-50 hover-opacity-100 border-0 bg-transparent" style="transition: opacity 0.2s;" @onclick="() => RemoveFromCart(item)" title="Remove item">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                                </button>
+                            </div>
+
+                        </div>
+                    }
+                </div>
+            </div>
+
+            <div class="col-12 col-lg-5">
+                <div class="bg-white p-4 rounded-3 border-0 sticky-top" style="top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f3f5 !important;">
+                    <h4 class="ff-serif mb-4" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.3rem;">Order Summary</h4>
+
+                    <div class="d-flex justify-content-between mb-3" style="font-size: 0.9rem;">
+                        <span class="text-muted">Subtotal</span>
+                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                    </div>
+
+                    <div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
+                        <span class="text-muted">VAT (15%)</span>
+                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                    </div>
+
+                    <hr style="border-color: #f1f3f5;" />
+
+                    <div class="d-flex justify-content-between align-items-baseline mb-4 mt-2">
+                        <span class="fw-semibold h6 mb-0 text-dark" style="font-size: 1rem;">Total</span>
+                        <span class="fw-bold text-dark" style="font-size: 1.4rem; letter-spacing: -0.5px;">R @((ShoppingCart.TotalAmount + ShoppingCart.TotalVat).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
+                    </div>
+
+                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3 text-uppercase fw-semibold tracking-widest border-0"
+                       style="font-size: 0.75rem; letter-spacing: 1.5px; background-color: #1c1f22; transition: background-color 0.2s;">
+                        Proceed to Checkout
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+</div>
@@ -0,0 +1,40 @@
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class CartReview(CartService cartService)
+{
+    [Inject] public IToastService ToastService { get; set; } = default!;
+
+    protected Cart ShoppingCart => cartService?.ShoppingCart!;
+
+    protected async void IncreaseQty(CartItem item)
+    {
+        if (item is not null)
+        {
+            cartService.UpdateQuantity(item!.Price!.Id, 1);
+
+            await cartService.SaveCartToStorageAsync();
+        }
+    }
+    protected async void DecreaseQty(CartItem item, int delta)
+    {
+        var peekQuantity = item.Quantity + delta;
+
+        if (peekQuantity < 1) return;
+
+        cartService.UpdateQuantity(item!.Price!.Id, delta);
+
+        await cartService.SaveCartToStorageAsync();
+    }
+
+    private async void RemoveFromCart(CartItem item)
+    {
+        cartService.RemoveOneItem(item.Price!.Id);
+
+        await cartService.SaveCartToStorageAsync();
+
+        ToastService.ShowSuccess($"Removed {item.Product!.Name} from cart", "Cart Changed");
+    }
+}
@@ -0,0 +1,2 @@
+body {
+}
@@ -1,110 +1,261 @@
@page "/checkout"
@inject NavigationManager Navigation
+@rendermode InteractiveServer
+@attribute [Authorize]

-<div class="container py-5">
-    <h2 class="fw-bold mb-4">Checkout</h2>
-    <div class="row g-5">
+<div class="checkout-page-container py-5">

-        <!-- LEFT COLUMN: SHIPPING & CART -->
-        <div class="col-lg-8">
-            <!-- 1. Cart Items -->
-            <div class="card border-0 shadow-sm p-4 mb-4">
-                <h5 class="fw-bold mb-3">Your Items</h5>
-                @foreach (var item in CartItems)
-                {
-                    <div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
-                        <div><h6 class="mb-0">@item.Title</h6><small class="text-muted">@item.Author</small></div>
-                        <div class="d-flex align-items-center gap-3">
-                            <div class="d-flex border rounded-pill">
-                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
-                                <span class="px-2 pt-1">@item.Quantity</span>
-                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
+    @if (IsProcessing)
+    {
+        <div class="processing-screen-overlay">
+            <div class="processing-card-box">
+                <div class="mb-1">
+                    <svg class="payment-vector-loader" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <circle class="loader-track" cx="12" cy="12" r="10" />
+                        <path class="loader-handshake-ring" d="M12 2a10 10 0 0 1 10 10" />
+                    </svg>
+                </div>
+                <div>
+                    <h4 class="fw-bold text-dark font-monospace text-uppercase tracking-wider mb-2" style="font-size: 1.1rem;">
+                        Securing Your Order
+                    </h4>
+                    <p class="text-muted small mb-0 px-2" style="line-height: 1.5; font-size: 0.85rem;">
+                        Please stand by. We are preparing your payment portal and transferring you securely to PayFast.
+                    </p>
+                </div>
+                <div class="secure-badge">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                    </svg>
+                    <span>Bank-Grade 256-Bit SSL Connection</span>
+                </div>
+            </div>
+        </div>
+    }
+
+    <header class="checkout-header mb-4">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Secure Checkout</span>
+        <h1 class="checkout-main-title fw-bold">Review Your Order</h1>
+    </header>
+
+    @if (ShoppingCart.Items.Any() && HasStockExceptions)
+    {
+        <div class="alert alert-danger border-0 rounded-3 p-3 mb-4 d-flex align-items-center gap-3 animate-fade-in">
+            <svg class="text-danger flex-shrink-0" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="8" x2="12" y2="12"></line>
+                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+            <div>
+                <h6 class="fw-bold text-danger mb-0.5" style="font-size: 0.92rem;">Action Required: Inventory Shortage</h6>
+                <p class="text-secondary small mb-0" style="font-size: 0.85rem; line-height: 1.4;">
+                    One or more items in your shopping cart are currently out of stock. Please remove or adjust these selections to proceed to the payment gateway.
+                </p>
+            </div>
+        </div>
+    }
+
+    @if (ShoppingCart.Items.Any() == false)
+    {
+        <div class="checkout-section-panel text-center py-5 my-4 d-flex flex-column align-items-center gap-3">
+            <div class="text-muted opacity-50">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="9" cy="21" r="1"></circle>
+                    <circle cx="20" cy="21" r="1"></circle>
+                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                </svg>
+            </div>
+            <div>
+                <h4 class="fw-bold text-dark mb-1">Your cart is empty</h4>
+                <p class="text-muted small mb-0">You cannot proceed to payment without selected titles.</p>
+            </div>
+            <a href="/" class="btn btn-premium-action px-4 py-2 mt-2 text-decoration-none" style="font-size: 0.85rem;">
+                Browse Book Catalogue
+            </a>
+        </div>
+    }
+    else
+    {
+        <div class="row g-5">
+            <div class="col-lg-7">
+
+                <section class="checkout-section-panel mb-4">
+                    <div class="panel-header-row d-flex justify-content-between align-items-center mb-4">
+                        <h5 class="panel-title fw-bold mb-0">Your Selection</h5>
+                        <span class="badge rounded-pill bg-light text-dark font-monospace px-2.5 py-1.5 border">
+                            @ShoppingCart.Items.Count Items
+                        </span>
+                    </div>
+
+                    <div class="checkout-items-stack">
+                        @foreach (var item in ShoppingCart.Items)
+                        {
+                            var isOutofStock = AvailableStockMap.TryGetValue(item.Price!.Id, out var availableCount) && availableCount <= 0;
+
+                            <div class="checkout-item-row py-3 d-flex align-items-center justify-content-between @(isOutofStock ? "border-danger bg-light-danger-subtle" : "")">
+                                <div class="item-meta-details pe-4">
+                                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
+                                        <h6 class="item-product-name fw-bold mb-0 text-dark">@item.Product!.Name</h6>
+                                        @if (isOutofStock)
+                                        {
+                                            <span class="badge bg-danger text-white font-monospace text-uppercase" style="font-size: 0.65rem; padding: 0.2rem 0.4rem; letter-spacing: 0.02em;">Out Of Stock</span>
+                                        }
+                                    </div>
+                                    <span class="item-author-label small text-muted font-monospace">
+                                        By @($"{item.Author!.Name} {item.Author.LastName}")
+                                    </span>
+                                </div>
+                                <div class="item-interactive-actions d-flex align-items-center gap-3 flex-shrink-0">
+                                    <div class="premium-quantity-stepper">
+                                        <button class="step-btn" @onclick="() => ChangeQuantity(item, -1)" aria-label="Decrease quantity">−</button>
+                                        <span class="step-value font-monospace">@item.Quantity</span>
+                                        <button class="step-btn" @onclick="() => ChangeQuantity(item, 1)" aria-label="Increase quantity">+</button>
+                                    </div>
+                                    <button class="btn-clean-remove font-monospace text-uppercase" @onclick="() => RemoveFromCart(item)">
+                                        Remove
+                                    </button>
+                                </div>
                            </div>
-                            <button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
+                        }
+                    </div>
+                </section>
+
+                <section class="checkout-section-panel mb-4">
+                    <h5 class="panel-title fw-bold mb-4">Fulfillment Option</h5>
+
+                    <div class="premium-radio-group d-flex flex-column gap-3">
+                        <div class="premium-selectable-card @(ShippingCost == 0 ? "active" : "")">
+                            <input class="form-check-input visual-hidden" type="radio" name="shipping" id="pickup"
+                                   checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
+                            <div class="card-indicator-circle"></div>
+                            <label class="card-text-block m-0 context-clickable" for="pickup">
+                                <span class="card-label-title fw-bold d-block text-dark">Collect from Midrand Bookshop</span>
+                                <span class="card-label-desc text-muted small">Corner of Church & Third Roads. Ready within 2 hours.</span>
+                            </label>
+                            <span class="card-price-tag font-monospace ms-auto text-success fw-bold">FREE</span>
+                        </div>
+
+                        <div class="premium-selectable-card @(ShippingCost == 60 ? "active" : "")">
+                            <input class="form-check-input visual-hidden" type="radio" name="shipping" id="delivery"
+                                   checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
+                            <div class="card-indicator-circle"></div>
+                            <label class="card-text-block m-0 context-clickable" for="delivery">
+                                <span class="card-label-title fw-bold d-block text-dark">Door-to-Door Home Delivery</span>
+                                <span class="card-label-desc text-muted small">Dispatched via reliable overnight courier straight to your steps.</span>
+                            </label>
+                            <span class="card-price-tag font-monospace ms-auto text-dark fw-bold">R 60.00</span>
                        </div>
                    </div>
-                }
+                </section>
+
+                <section class="checkout-section-panel mb-4">
+                    <div class="d-flex justify-content-between align-items-baseline mb-2">
+                        <h5 class="panel-title fw-bold mb-0">Delivery Instructions</h5>
+                        <span class="text-muted font-monospace extra-small opacity-75">Optional</span>
+                    </div>
+                    <p class="text-muted small mb-3">
+                        Add any specific details for our dispatch team (e.g., gate access codes, complex navigation, or safe drop-off preferences).
+                    </p>
+                    <div class="premium-textarea-wrapper">
+                        <textarea class="form-control premium-plaintext-field"
+                                  rows="3"
+                                  placeholder="Type your notes or courier instructions here..."
+                                  @bind="OrderNotes"
+                                  maxlength="500">
+                        </textarea>
+                        <div class="text-end mt-1.5">
+                            <small class="font-monospace text-muted extra-small opacity-50">
+                                @(OrderNotes?.Length ?? 0) / 500 characters
+                            </small>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="checkout-section-panel">
+                    <h5 class="panel-title fw-bold mb-3">Billing Settings</h5>
+                    <div class="premium-checkbox-wrapper d-flex align-items-center gap-3 p-3 border rounded-3">
+                        <input class="form-check-input custom-box-tick m-0" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
+                        <label class="checkbox-text-label small text-dark fw-medium m-0 context-clickable w-100 py-1" for="sameAsBilling">
+                            My billing address is the same as my shipping address
+                        </label>
+                    </div>
+                </section>
            </div>

-            <!-- 2. Shipping Options -->
-            <div class="card border-0 shadow-sm p-4 mb-4">
-                <h5 class="fw-bold mb-3">Shipping Method</h5>
-                <div class="form-check mb-2">
-                    <input class="form-check-input" type="radio" name="shipping" id="pickup"
-                           checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
-                    <label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
-                </div>
-                <div class="form-check">
-                    <input class="form-check-input" type="radio" name="shipping" id="delivery"
-                           checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
-                    <label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
+            <div class="col-lg-5">
+                <div class="sticky-summary-card p-4 border">
+                    <h5 class="fw-bold text-dark font-monospace text-uppercase tracking-wider mb-4 small-summary-heading">Summary Breakdown</h5>
+
+                    <div class="price-summary-ledger d-flex flex-column gap-3">
+                        <div class="ledger-row d-flex justify-content-between">
+                            <span class="text-muted small">Items Subtotal</span>
+                            <span class="font-monospace text-dark fw-medium">R @ShoppingCart.TotalAmount.ToString("F2")</span>
+                        </div>
+
+                        <div class="ledger-row d-flex justify-content-between align-items-center">
+                            @if (ShoppingCart.TotalVat > 0)
+                            {
+                                <span class="text-muted small">Value Added Tax (VAT 15%)</span>
+                                <span class="font-monospace text-dark fw-medium">R @ShoppingCart.TotalVat.ToString("F2")</span>
+                            }
+                            else
+                            {
+                                <span class="text-muted small">Value Added Tax (VAT)</span>
+                                <small class="text-danger fw-medium tracking-wide font-monospace" style="font-size: 0.78rem;">
+                                    (Price is VAT inclusive)
+                                </small>
+                            }
+                        </div>
+
+                        <div class="ledger-row d-flex justify-content-between">
+                            <span class="text-muted small">Fulfillment Courier Fee</span>
+                            <span class="font-monospace text-dark fw-medium">
+                                @if (ShippingCost == 0)
+                                {
+                                    <span class="text-success fw-bold">FREE</span>
+                                }
+                                else
+                                {
+                                    <span>R @($"{ShippingCost:F2}")</span>
+                                }
+                            </span>
+                        </div>
+
+                        <hr class="summary-divider my-2" />
+
+                        <div class="ledger-row d-flex justify-content-between align-items-baseline mb-4">
+                            <span class="fw-bold text-dark">Total Due Amount</span>
+                            <div class="text-end">
+                                <span class="font-monospace text-dark fw-bold h3 mb-0 d-block tracking-tight">
+                                    R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")
+                                </span>
+                                <small class="text-muted opacity-60 font-monospace extra-small">ZAR Currency</small>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button class="btn btn-premium-action w-100 py-3.5 d-flex align-items-center justify-content-center gap-2"
+                            disabled="@(IsProcessing || HasStockExceptions)"
+                            @onclick="PayNow">
+                        <span>Pay Now</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                            <polyline points="12 5 19 12 12 19"></polyline>
+                        </svg>
+                    </button>
                </div>
            </div>

-            <!-- 3. Address Fields -->
-            <div class="card border-0 shadow-sm p-4">
-                <h5 class="fw-bold mb-3">Shipping Address</h5>
-                <div class="form-check mb-3">
-                    <input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
-                    <label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
-                </div>
-                <!-- Add text inputs for address here, show/hide based on IsSameAddress -->
-            </div>
+            @if (IsProcessing == true && CheckoutPayload?.Count > 0)
+            {
+                <form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">
+                    @foreach (var field in CheckoutPayload)
+                    {
+                        <input type="hidden" name="@field.Key" value="@field.Value" />
+                    }
+                </form>
+            }
        </div>
-
-        <!-- RIGHT COLUMN: STICKY SUMMARY -->
-        <div class="col-lg-4">
-            <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
-                <h5 class="fw-bold mb-3">Order Summary</h5>
-                <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @Subtotal.ToString("F2")</span></div>
-                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
-                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
-                <hr />
-                <div class="d-flex justify-content-between mb-4">
-                    <span class="fw-bold">Total Due</span>
-                    <h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
-                </div>
-                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-@code {
-    private decimal ShippingCost = 0;
-    private bool IsSameAddress = true;
-
-    // Calculations
-    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
-    private decimal VatAmount => Subtotal * 0.15m;
-
-    // Assuming your CartItems list is managed via a Service or cascading parameter
-    // Here it is locally mocked for this example
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 }
-    };
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0) CartItems.Remove(item);
    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-    private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = "";
-        public string Author { get; set; } = "";
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-    private void CompletePurchase(MouseEventArgs args)
-    {
-        Navigation.NavigateTo("/payment-confirmation");
-    }
-}
+</div>
@@ -0,0 +1,216 @@
+using LiteCharms.Features.Api.Configuration;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Orders.Models;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+using Microsoft.Extensions.Options;
+using System.Security.Claims;
+using System.Globalization;
+using LiteCharms;
+using Microsoft.AspNetCore.Components.Authorization;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Checkout()
+{
+    [Inject] public HashService HashService { get; set; } = default!;
+    [Inject] public PaymentService PaymentService { get; set; } = default!;
+    [Inject] public OrderService OrderService { get; set; } = default!;
+    [Inject] public BooksService BooksService { get; set; } = default!;
+    [Inject] public CartService CartService { get; set; } = default!;
+    [Inject] public PayfastService PayfastService { get; set; } = default!;
+    [Inject] public IOptions<PayfastSettings> PayfastOptions { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] public IJSRuntime JSRuntime { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] public IToastService ToastService { get; set; } = default!;
+
+    private Cart ShoppingCart => CartService.ShoppingCart;
+    private ClaimsPrincipal? User { get; set; }
+    private bool IsProcessing { get; set; }
+
+    private decimal ShippingCost = 0;
+    private bool IsSameAddress = true;
+
+    public string? OrderNotes { get; set; }
+    private Dictionary<string, string> CheckoutPayload { get; set; } = [];
+
+    // Tracks available quantities indexed by Price ID
+    protected Dictionary<long, int> AvailableStockMap { get; set; } = [];
+
+    // Quick validation flag to evaluate checkout block state
+    protected bool HasStockExceptions => ShoppingCart.Items.Any(item =>
+        AvailableStockMap.TryGetValue(item.Price!.Id, out var count) && count <= 0);
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState!.User;
+
+        Navigation.LocationChanged += OnLocationChanged;
+        CartService.OnCartChanged += CartService_OnCartChanged;
+
+        if (CartService.ShoppingCart.Items.Count == 0)
+        {
+            await CartService.LoadCartFromStorageAsync();
+        }
+
+        await RefreshStockValidationAsync();
+    }
+
+    private async void CartService_OnCartChanged()
+    {
+        await RefreshStockValidationAsync();
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
+
+    private async Task RefreshStockValidationAsync()
+    {
+        AvailableStockMap.Clear();
+        foreach (var item in ShoppingCart.Items)
+        {
+            if (item.Price is not null)
+            {
+                // Mapped fallback default (set to 0 for specific keys to test stock warnings instantly)
+                // In production: pull from your inventory system:
+                // var stockCheck = await BooksService.GetStockLevelAsync(item.Price.Id);
+                int liveStockAvailable = 1;
+
+                AvailableStockMap[item.Price.Id] = liveStockAvailable;
+            }
+        }
+    }
+
+    private async Task ChangeQuantity(CartItem item, int delta)
+    {
+        var peekQuantity = item.Quantity + delta;
+        if (peekQuantity < 1) return;
+
+        // Block internal counters exceeding live available thresholds
+        if (AvailableStockMap.TryGetValue(item.Price!.Id, out var maxAvailable) && peekQuantity > maxAvailable)
+        {
+            ToastService.ShowWarning($"Cannot exceed remaining stock limit ({maxAvailable} available).", "Stock Limit");
+            return;
+        }
+
+        CartService.UpdateQuantity(item.Price!.Id, delta);
+        await CartService.SaveCartToStorageAsync();
+    }
+
+    private async Task RemoveFromCart(CartItem item)
+    {
+        CartService.RemoveOneItem(item.Price!.Id);
+        await CartService.SaveCartToStorageAsync();
+    }
+
+    private async Task PayNow(MouseEventArgs args)
+    {
+        // Fail-safe protection boundary check
+        if (HasStockExceptions)
+        {
+            ToastService.ShowError("Your order cannot contain items that are out of stock.", "Inventory Issue");
+            return;
+        }
+
+        if (IsProcessing)
+        {
+            ToastService.ShowWarning("Please wait, completing your payment", "Busy...");
+            return;
+        }
+
+        try
+        {
+            IsProcessing = true;
+            StateHasChanged();
+
+            Result<long> orderResult;
+            var customerId = (long)ShoppingCart.CustomerId!;
+
+            if (!ShoppingCart.OrderId.HasValue)
+            {
+                CreateOrder request = new(ShoppingCart.TotalAmount, null);
+                orderResult = await OrderService.CreateOrderAsync(customerId, request, CancellationToken);
+                ShoppingCart.OrderId = orderResult.Value;
+            }
+
+            List<CreateOrderItem> orderItems = [];
+            var orderId = (long)ShoppingCart.OrderId;
+
+            await OrderService.ClearOrderItemsAsync(orderId, CancellationToken);
+
+            foreach (var item in ShoppingCart.Items)
+            {
+                var bookRequest = await BooksService.GetBookByProductIdAsync(item.Price!.Id, CancellationToken);
+                if (bookRequest.IsSuccess)
+                {
+                    var orderItem = new CreateOrderItem(bookRequest.Value.Id, item.Price.Id, item.Quantity);
+                    orderItems.Add(orderItem);
+                }
+            }
+
+            var orderHash = HashService.HashEncodeLongId(orderId).Value;
+            var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, orderId, orderHash, CancellationToken);
+
+            long paymentId = 0;
+            if (paymentGen.IsSuccess) paymentId = paymentGen.Value;
+
+            if (paymentGen.IsFailed)
+            {
+                var paymentFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken);
+                if (paymentFetch.IsFailed)
+                {
+                    ToastService.ShowError("Failed to fetch your previously made payment", "Payment Check");
+                    IsProcessing = false;
+                    return;
+                }
+                paymentId = paymentFetch.Value.Id;
+            }
+
+            CreateLedgerEntry ledgerRequest = new()
+            {
+                OrderId = orderId,
+                CustomerId = customerId,
+                PaymentGatewayId = 1,
+                PaymentGatewayReference = orderHash,
+                PaymentId = paymentId,
+                Status = LiteCharms.Features.LedgerStatuses.Sent,
+            };
+            await PaymentService.WriteLedgerEntryAsync(ledgerRequest, CancellationToken);
+
+            var addItemsResult = await OrderService.AddItemsToOrderAsync(orderId, [.. orderItems], CancellationToken);
+            var hostAddress = Navigation.BaseUri.TrimEnd('/');
+
+            CheckoutPayload = new Dictionary<string, string>
+            {
+                { "merchant_id", PayfastOptions.Value.MerchantId! },
+                { "merchant_key", PayfastOptions.Value.MerchantKey! },
+                { "return_url", $"{hostAddress}/payment-success?reference={orderHash}" },
+                { "cancel_url", $"{hostAddress}/payment-failed?reference={orderHash}" },
+                { "notify_url", "https://api.uat.midrandbooks.co.za/v1/payments/payfast/confirm" },
+                { "email_address", User?.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value! },
+                { "m_payment_id", orderHash },
+                { "amount", ShoppingCart.TotalAmount.ToString("F2", CultureInfo.InvariantCulture) },
+                { "item_name", "MidrandBooks Sale" },
+            };
+
+            var signature = PayfastService.GenerateSignature(CheckoutPayload!, PayfastOptions.Value.Passphrase).Value;
+            CheckoutPayload.Add("signature", signature);
+
+            StateHasChanged();
+            await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();");
+        }
+        catch (Exception ex)
+        {
+            ToastService.ShowError($"Failed to perform checkout: {ex.Message}", "Checkout");
+            IsProcessing = false;
+            StateHasChanged();
+        }
+    }
+}
@@ -0,0 +1,347 @@
+/* ==========================================================================
+   Midrand Books — Checkout Layout Polish & Tightening
+   ========================================================================== */
+
+/* --- 🛠️ 1. Global Page Wrapper Boundary Constraints --- */
+.checkout-page-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+/* --- 2. Page Typography & Headers --- */
+.checkout-header {
+    margin-bottom: 2.5rem !important;
+}
+
+.checkout-main-title {
+    font-size: 2.25rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+}
+
+.tracking-wider {
+    letter-spacing: 0.12em;
+}
+
+/* --- 3. Custom Structural Content Panels --- */
+.checkout-section-panel {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 12px;
+    padding: 2rem;
+}
+
+.panel-title {
+    font-size: 1.1rem;
+    letter-spacing: -0.01em;
+    color: #111111;
+}
+
+/* --- 🛠️ 4. Items Manifest Row & Stepper Controls --- */
+.checkout-items-stack .checkout-item-row {
+    display: flex;
+    align-items: center; /* Locks elements on a clean vertical axis line */
+    justify-content: space-between;
+    gap: 2rem;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
+}
+
+    .checkout-items-stack .checkout-item-row:last-child {
+        border-bottom: none;
+    }
+
+.item-meta-details {
+    max-width: 65%; /* Brounds long item titles elegantly */
+}
+
+.item-product-name {
+    font-size: 0.95rem;
+    line-height: 1.4;
+    color: #1A1A1A;
+}
+
+.premium-quantity-stepper {
+    display: inline-flex;
+    align-items: center;
+    background-color: #F8F9FA;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 30px;
+    padding: 3px;
+}
+
+    .premium-quantity-stepper .step-btn {
+        background: none;
+        border: none;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+        color: #555555;
+        border-radius: 50%;
+        transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+        .premium-quantity-stepper .step-btn:hover {
+            background-color: #FFFFFF;
+            color: #000000;
+        }
+
+    .premium-quantity-stepper .step-value {
+        min-width: 28px;
+        text-align: center;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #111111;
+    }
+
+.btn-clean-remove {
+    background: none;
+    border: none;
+    color: #DC3545;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+    .btn-clean-remove:hover {
+        background-color: rgba(220, 53, 69, 0.06);
+    }
+
+/* --- 5. Interactive Selectable Radio Selection Cards --- */
+.visual-hidden {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.premium-selectable-card {
+    display: flex;
+    align-items: center;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+    padding: 1.25rem;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    background-color: #FFFFFF;
+}
+
+    .premium-selectable-card:hover {
+        border-color: #111111;
+        background-color: #FAFBFB;
+    }
+
+    .premium-selectable-card.active {
+        border-color: #000000;
+        box-shadow: inset 0 0 0 1px #000000;
+        background-color: #FFFFFF;
+    }
+
+.card-indicator-circle {
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    margin-right: 1.25rem;
+    position: relative;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.premium-selectable-card.active .card-indicator-circle {
+    border-color: #000000;
+    background-color: #000000;
+}
+
+    .premium-selectable-card.active .card-indicator-circle::after {
+        content: '';
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        background-color: #FFFFFF;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+.card-label-title {
+    font-size: 0.9rem;
+    line-height: 1.3;
+}
+
+.card-label-desc {
+    font-size: 0.78rem !important;
+}
+
+.card-price-tag {
+    font-size: 0.85rem;
+    letter-spacing: -0.01em;
+}
+
+/* --- 6. Form Checkbox Options --- */
+.context-clickable {
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+    .context-clickable:hover {
+        background-color: #FAFBFB;
+    }
+
+.custom-box-tick {
+    cursor: pointer;
+}
+
+/* --- 🛠️ 7. Sticky Right Sidebar Order Ledger --- */
+.sticky-summary-card {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    border-radius: 12px;
+    position: sticky;
+    top: 120px; /* Safe breathing room underneath the global nav header */
+    box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.03);
+}
+
+.small-summary-heading {
+    font-size: 0.78rem;
+    color: #666666;
+}
+
+.price-summary-ledger .ledger-row {
+    padding: 0.25rem 0;
+}
+
+.summary-divider {
+    border-color: rgba(0, 0, 0, 0.06);
+    opacity: 1;
+}
+
+.extra-small {
+    font-size: 0.68rem;
+}
+
+/* --- 8. Core Checkout Action Button --- */
+.btn-premium-action {
+    background-color: #111111;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+    .btn-premium-action:hover:not(:disabled) {
+        background-color: #222222;
+        transform: translateY(-1px);
+        box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
+    }
+
+    .btn-premium-action:disabled {
+        background-color: #CCCCCC;
+        color: #888888;
+        cursor: not-allowed;
+    }
+
+/* ==========================================================================
+   Full-Screen Handover Processing Overlay
+   ========================================================================== */
+.processing-screen-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #FFFFFF;
+    z-index: 3000;
+}
+
+.processing-card-box {
+    max-width: 420px;
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.payment-vector-loader {
+    width: 48px;
+    height: 48px;
+}
+
+.loader-track {
+    stroke: rgba(0, 0, 0, 0.06);
+    stroke-width: 2.5;
+    fill: none;
+}
+
+.loader-handshake-ring {
+    stroke: #111111;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    fill: none;
+    transform-origin: center;
+    animation: spinHandoverLoop 1s linear infinite;
+}
+
+.secure-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: #666666;
+    opacity: 0.6;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 0.35rem 0.85rem;
+    border-radius: 50px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+@keyframes spinHandoverLoop {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* --- 9. Premium Plaintext Field & Textarea Structure --- */
+.premium-textarea-wrapper {
+    position: relative;
+}
+
+.premium-plaintext-field {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    padding: 0.85rem 1rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: #1A1A1A;
+    resize: none; /* Disables ugly drag handles to maintain design proportions */
+    transition: all 0.2s ease;
+}
+
+    .premium-plaintext-field:focus {
+        background-color: #FFFFFF;
+        border-color: #000000;
+        box-shadow: none; /* Strip standard blue Bootstrap glowing halos */
+        outline: none;
+    }
+
+    .premium-plaintext-field::placeholder {
+        color: #A0A0A0;
+        font-size: 0.88rem;
+    }
@@ -0,0 +1,97 @@
+@page "/contact"
+@rendermode InteractiveServer
+
+<div class="contact-page-container py-5">
+    <header class="contact-header mb-5">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Inquiries & Submissions</span>
+        <h1 class="contact-main-title fw-bold">Get In Touch</h1>
+        <p class="text-muted small font-monospace mt-2">
+            Lite Charms (Pty) Ltd t/a Midrand Books &bull; Reader & Author Support Desk
+        </p>
+    </header>
+
+    <div class="row g-5">
+        <div class="col-lg-5">
+            <div class="contact-metadata-card p-4 border border-light bg-white mb-4">
+                <h3 class="metadata-title mb-4">The Bookshop Desk</h3>
+
+                <div class="meta-item mb-3">
+                    <span class="meta-label text-uppercase font-monospace text-muted d-block small">Main Office</span>
+                    <span class="meta-value font-monospace small">Corporate Woods, Midrand, Gauteng, 1685, South Africa</span>
+                </div>
+
+                <div class="meta-item mb-3">
+                    <span class="meta-label text-uppercase font-monospace text-muted d-block small">Email Correspondence</span>
+                    <span class="meta-value font-monospace small"><a href="mailto:desk@midrandbooks.co.za" class="contact-link">desk@midrandbooks.co.za</a></span>
+                </div>
+
+                <div class="meta-item mb-4">
+                    <span class="meta-label text-uppercase font-monospace text-muted d-block small">Authors & Publishers</span>
+                    <span class="meta-value font-monospace small text-muted">Are you an independent author or an established brand looking to publish with us? Specify your requirements in the form grid.</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-7">
+            <div class="contact-form-panel p-4 border rounded bg-white">
+                <h3 class="metadata-title mb-4">Send us a Note</h3>
+
+                @if (HasSubmitted)
+                {
+                    <div class="submission-success-banner py-4 text-center">
+                        <svg class="success-vector-checkmark mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="20 6 9 17 4 12"></polyline>
+                        </svg>
+                        <h4 class="font-monospace text-uppercase tracking-wider fs-6 fw-bold text-dark">Message Sent</h4>
+                        <p class="text-muted small mb-0 px-3">
+                            Thank you for reaching out. A bookstore representative or publishing helper will respond to you via email shortly.
+                        </p>
+                    </div>
+                }
+                else
+                {
+                    <form @onSubmit="HandleTransmissionSubmit">
+                        <div class="mb-3">
+                            <label class="form-label font-monospace text-uppercase text-muted extra-small">Your Name</label>
+                            <input type="text" class="premium-plaintext-field w-100" required @bind="FormName" placeholder="e.g., Alexander Stone" />
+                        </div>
+
+                        <div class="mb-3">
+                            <label class="form-label font-monospace text-uppercase text-muted extra-small">Email Address</label>
+                            <input type="email" class="premium-plaintext-field w-100" required @bind="FormEmail" placeholder="e.g., alex@domain.co.za" />
+                        </div>
+
+                        <div class="mb-4">
+                            <label class="form-label font-monospace text-uppercase text-muted extra-small">How can we help you?</label>
+                            <textarea class="premium-plaintext-field w-100" rows="5" required @bind="FormMessage" placeholder="Tell us about your book submission, order inquiries, or general publishing ideas..."></textarea>
+                        </div>
+
+                        <button type="submit" class="btn btn-premium-action w-100 py-3 d-flex align-items-center justify-content-center gap-2">
+                            <span>Send Message</span>
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                <line x1="22" y1="2" x2="11" y2="13"></line>
+                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                            </svg>
+                        </button>
+                    </form>
+                }
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string FormName { get; set; } = string.Empty;
+    private string FormEmail { get; set; } = string.Empty;
+    private string FormMessage { get; set; } = string.Empty;
+    private bool HasSubmitted { get; set; } = false;
+
+    private void HandleTransmissionSubmit()
+    {
+        if (!string.IsNullOrWhiteSpace(FormName) && !string.IsNullOrWhiteSpace(FormEmail))
+        {
+            HasSubmitted = true;
+            StateHasChanged();
+        }
+    }
+}
@@ -0,0 +1,126 @@
+/* ==========================================================================
+   Midrand Books — Contact View Layout Architecture Styles
+   ========================================================================== */
+
+.contact-page-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.contact-main-title {
+    font-size: 2.5rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+    font-family: Georgia, 'Times New Roman', serif;
+}
+
+.tracking-wider {
+    letter-spacing: 0.12em;
+}
+
+.extra-small {
+    font-size: 0.72rem !important;
+}
+
+.metadata-title {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: #111111;
+}
+
+/* --- Metadata Info Panels --- */
+.contact-metadata-card {
+    border-radius: 8px;
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.06) !important;
+}
+
+.meta-label {
+    letter-spacing: 0.08em;
+    margin-bottom: 0.25rem;
+}
+
+.meta-value {
+    color: #333333;
+}
+
+.contact-link {
+    color: #111111;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    transition: opacity 0.2s ease;
+}
+
+    .contact-link:hover {
+        opacity: 0.7;
+    }
+
+/* --- Form Fields --- */
+.contact-form-panel {
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.06) !important;
+}
+
+.premium-plaintext-field {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: #FAFAFA;
+    outline: none;
+    border-radius: 6px;
+    padding: 0.75rem 0.95rem;
+    font-size: 0.9rem;
+    color: #111111;
+    transition: all 0.2s ease;
+}
+
+    .premium-plaintext-field:focus {
+        border-color: #111111;
+        box-shadow: 0 0 0 1px #111111;
+        background-color: #FFFFFF;
+    }
+
+/* --- Premium Action Button --- */
+.btn-premium-action {
+    background-color: #111111;
+    color: #FFFFFF;
+    border: 1px solid #111111;
+    border-radius: 6px;
+    font-family: var(--bs-font-monospace);
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    transition: all 0.2s ease;
+}
+
+    .btn-premium-action:hover {
+        background-color: transparent;
+        color: #111111;
+    }
+
+/* --- Submission State Banner --- */
+.submission-success-banner {
+    background-color: #FDFBFB;
+    border: 1px dashed rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+}
+
+.success-vector-checkmark {
+    color: #111111;
+    animation: bounceMarker 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes bounceMarker {
+    from {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
@@ -1,8 +1,9 @@
@page "/"
@rendermode InteractiveServer
-@inject NavigationManager Navigation

-<div id="top-target" class="container text-center text-hero-wrapper">
+<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
+
+<div class="container text-center text-hero-wrapper">
    <h1 class="display-3 text-dark mb-3 px-2 master-headline">
        Discover thoughtfully curated<br>books for every reader.
    </h1>
@@ -12,123 +13,133 @@
 </div>

 <div class="container mb-5 px-md-5">
-    <div class="row align-items-center justify-content-between pb-3 g-3">

+    @if (AuthorId.HasValue && !string.IsNullOrEmpty(ActiveAuthorFilterName))
+    {
+        <div class="alert alert-light border d-flex align-items-center justify-content-between rounded-pill px-4 py-2 mb-4 shadow-sm mx-auto" style="max-width: 520px;">
+            <div class="d-flex align-items-center gap-2">
+                <span class="badge bg-dark rounded-pill fw-normal px-2.5 py-1">Author Collection</span>
+                <span class="text-dark fw-medium small">Archived items from <strong>@ActiveAuthorFilterName</strong></span>
+            </div>
+            <button class="btn btn-close btn-sm p-1 ms-3" @onclick="ClearAuthorFilter" aria-label="Clear Filter"></button>
+        </div>
+    }
+
+    <div class="row align-items-center justify-content-between pb-3 g-3">
        <div class="col-12 col-md-8">
            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
-                @foreach (var category in MainCategories)
+                @if (!AuthorId.HasValue)
                {
-                    var catName = category;
-                    <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
-                        @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
-                            @onclick="() => SelectCategory(catName)">
-                        @catName
+                    @foreach (var category in MainCategories)
+                    {
+                        var catName = category;
+                        <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
+                            @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
+                                @onclick="() => SelectCategory(catName)">
+                            @catName
+                        </button>
+                    }
+
+                    @if (DynamicExtendedCategories.Count > 0)
+                    {
+                        <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 control-expansion-trigger"
+                                @onclick="ToggleExtraCategories">
+                            <span>@(ShowExpandedCategories ? "Collapse Cloud" : "More Genres")</span>
+                            <svg class="transition-smooth @(ShowExpandedCategories ? "rotate-180" : "")" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6,9 12,15 18,9" /></svg>
+                        </button>
+                    }
+                }
+                else
+                {
+                    <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium" @onclick="ClearAuthorFilter">
+                        &larr; Return to Catalog Index
                    </button>
                }
-
-                <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 p-1 ms-1"
-                        @onclick="ToggleExtraCategories">
-                    <span>@(ShowExpandedCategories ? "Show Less" : "See More")</span>
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                         style="transform: @(ShowExpandedCategories ? "rotate(180deg)" : "rotate(0deg)"); transition: transform 0.2s ease;">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
            </div>
        </div>

        <div class="col-12 col-md-4">
-            <div class="d-flex align-items-center justify-content-start justify-content-md-end gap-2">
-
-                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth border border-light-subtle bg-white text-dark d-inline-flex align-items-center gap-2"
-                        style="height: 32px; font-size: 0.8rem;"
+            <div class="d-flex align-items-center justify-content-md-end gap-2 text-md-end row-actions-wrapper">
+                <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium d-inline-flex align-items-center gap-2"
                        @onclick="ToggleFilterMenu">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
-                    </svg>
-                    <span>Filter & Sort</span>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
+                    <span>Refine Curation</span>
                </button>

-                <div class="d-flex align-items-center bg-light p-1 rounded-pill border border-light-subtle" style="height: 32px;">
-                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
-                        @(CurrentViewMode == ViewMode.Grid ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
-                            style="width: 24px; height: 24px;"
-                            @onclick="() => SetViewMode(ViewMode.Grid)">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></svg>
+                <div class="btn-group bg-white rounded-pill p-1 border border-light-subtle shadow-sm" role="group">
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.Grid ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.Grid)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
                    </button>
-                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
-                        @(CurrentViewMode == ViewMode.List ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
-                            style="width: 24px; height: 24px; margin-left: 2px;"
-                            @onclick="() => SetViewMode(ViewMode.List)">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.List ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.List)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
                    </button>
                </div>
-
            </div>
        </div>
    </div>

-    @if (ShowExpandedCategories)
+    @if (ShowExpandedCategories && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
    {
-        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start pt-3 pb-2 border-top border-light-subtle mt-2 animate-fade-in">
-            @foreach (var category in DynamicExtendedCategories)
-            {
-                var catName = category;
-                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
-                    @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
-                        @onclick="() => SelectCategory(catName)">
-                    @catName
-                </button>
-            }
+        <div class="category-cloud-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-light">
+            <h2 class="h6 text-muted mb-3 text-uppercase tracking-wider" style="font-size:0.7rem; font-weight:700;">Curated Subgenre Tag Index</h2>
+            <div class="d-flex flex-wrap gap-2">
+                @foreach (var subCategory in DynamicExtendedCategories)
+                {
+                    var subName = subCategory;
+                    <button class="btn btn-xs rounded-pill px-2.5 py-1 text-dark border-light-subtle transition-smooth
+                        @(ActiveCategory == subName ? "btn-dark text-white" : "bg-white btn-outline-secondary")"
+                            style="font-size:0.75rem;" @onclick="() => SelectCategory(subName)">
+                        #@subName
+                    </button>
+                }
+            </div>
        </div>
    }

    @if (ShowFilterMenu)
    {
-        <div class="p-4 bg-light border border-light-subtle mt-3 animate-fade-in filter-dropdown-panel">
-            <div class="row g-4">
+        <div class="filter-panel-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-white shadow-sm">
+            <div class="row g-4 text-start">
                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">SORT ORDER</p>
-                    <div class="d-flex flex-column gap-1">
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "default" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("default")'>Curated Default</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-low" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-low")'>Price: Low to High</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-high" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-high")'>Price: High to Low</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "title-asc" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("title-asc")'>Title: A-Z</button>
-                    </div>
+                    <label class="form-label small fw-semibold text-dark">Sort Artifacts</label>
+                    <select class="form-select form-select-sm rounded-pill px-3" value="@SelectedSortOption" @onchange="(e) => ChangeSort(e.Value?.ToString()!)">
+                        <option value="default">Release Timeline</option>
+                        <option value="price-low">Value: Low to High</option>
+                        <option value="price-high">Value: High to Low</option>
+                        <option value="title-asc">Alphabetical Order</option>
+                    </select>
                </div>
                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">PRICE RANGE</p>
-                    <div class="d-flex flex-column gap-1">
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "all" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "under-500" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("under-500")'>Under R 500</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "500-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("500-1000")'>R 500 – R 1,000</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "over-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("over-1000")'>Over R 1,000</button>
+                    <label class="form-label small fw-semibold text-dark">Price Thresholds</label>
+                    <div class="d-flex flex-wrap gap-2">
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "all" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "under-500" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("under-500")'>Under R500</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "500-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("500-1000")'>R500 - R1,000</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "over-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("over-1000")'>Over R1,000</button>
                    </div>
                </div>
-                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">RELEASE AVAILABILITY</p>
-                    <div class="form-check form-switch pt-1 ms-1">
-                        <input class="form-check-input style-track-switch" type="checkbox" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly" style="cursor: pointer;">
-                        <label class="form-check-label small text-dark fw-medium ps-1" for="newArrivalsToggle" style="cursor: pointer;">Only New Acquisitions</label>
+                <div class="col-12 col-sm-4 d-flex align-items-center mt-sm-4">
+                    <div class="form-check form-switch p-0 m-0 d-flex align-items-center gap-2">
+                        <input class="form-check-input ms-0 mt-0 styled-switch-toggle" type="checkbox" role="switch" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly">
+                        <label class="form-check-label small fw-medium text-dark user-select-none" for="newArrivalsToggle">New Acquisitions Only</label>
                    </div>
-                    <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none mt-3 p-0 font-monospace reset-link-btn" @onclick="ResetFilters">RESET ALL FILTERS</button>
                </div>
            </div>
+            <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top border-light-subtle">
+                <button class="btn btn-link btn-sm text-decoration-none text-muted fw-medium px-3" @onclick="ResetFilters">Purge Filters</button>
+                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="ToggleFilterMenu">Apply Selection</button>
+            </div>
        </div>
    }

-    <div class="position-relative w-100 custom-milled-line">
-        <div class="position-absolute start-50 translate-middle-x center-bloom-shadow"></div>
-        <div class="position-absolute w-100 core-horizontal-rule"></div>
-    </div>
-</div>
-
-<div class="container px-md-5 pb-5">
-
    @if (!PaginatedBooks.Any())
    {
-        <div class="text-center text-muted py-5">
-            <p class="mb-0 small style-track" style="letter-spacing: 1px;">NO PRODUCTS MATCH YOUR TARGET SELECTION SPECIFICATIONS</p>
+        <div class="text-center py-5 my-4 bg-light rounded border border-dashed border-light-subtle animate-fade-in">
+            <svg class="text-muted mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
+            <p class="text-secondary mb-1 fw-medium">No archived books match your active criteria.</p>
+            <span class="text-muted small">Try adjusting your category definitions or search phrase query.</span>
        </div>
    }
    else if (CurrentViewMode == ViewMode.Grid)
@@ -136,59 +147,36 @@
        <div class="row g-4 animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
-                <div class="col-12 col-md-6 col-lg-4">
-                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
-                         style="cursor: pointer;"
-                         @onclick="() => NavigateToProduct(book.Id)">
-                        <div class="d-flex justify-content-between align-items-center">
-                            @if (book.IsNew)
-                            {
-                                <span class="badge rounded-pill px-3 py-2 badge-new-arrival">New</span>
-                            }
-                            else
-                            {
-                                <div></div>
-                            }
-                            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-0 shadow-sm border-0" style="width: 32px; height: 32px;">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
-                            </button>
-                        </div>
-                        <div class="d-flex justify-content-center align-items-center my-auto py-3">
-                            <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50">
-                                @book.Category.ToUpper()<br><span class="opacity-50" style="font-size:0.55rem;">EDITION</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
-                        <div>
-                            <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
-                            <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
-                        </div>
-                        <span class="text-muted fw-semibold" style="font-size: 0.95rem;">R @book.Price.ToString("N0")</span>
-                    </div>
-                </div>
+                <BookCard Id="@book.Id"
+                          Title="@book.Name"
+                          Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
+                          Price="@ProductPriceCache[book.Id]"
+                          Category="@ProductPrimaryCategoryCache[book.Id]"
+                          IsNew="@book.Enabled"
+                          BookImageUrl="@book.ImageUrl"
+                          OnCardClick="() => NavigateToProduct(book.Id)" />
            }
        </div>
    }
-    else
+    else if (CurrentViewMode == ViewMode.List)
    {
-        <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
+        <div class="d-flex flex-column border rounded bg-white overflow-hidden shadow-sm animate-fade-in list-container-wrapper">
            @foreach (var book in PaginatedBooks)
            {
                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
                     style="cursor: pointer;"
                     @onclick="() => NavigateToProduct(book.Id)">
                    <div class="d-flex align-items-center gap-4 structural-list-left">
-                        <span class="text-dark fw-medium list-item-title">@book.Title</span>
-                        <span class="text-muted small list-item-author">by @book.Author</span>
-                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@book.Category.ToUpper()</span>
+                        <span class="text-dark fw-medium list-item-title">@book.Name</span>
+                        <span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
+                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
                    </div>
                    <div class="d-flex align-items-center gap-4">
-                        @if (book.IsNew)
+                        @if (book.Enabled)
                        {
                            <span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
                        }
-                        <span class="text-dark font-monospace fw-medium list-item-price">R @book.Price.ToString("N0")</span>
+                        <span class="text-dark font-monospace fw-medium list-item-price">R @ProductPriceCache[book.Id].ToString("N0")</span>
                        <button class="btn btn-link text-dark p-1">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
                        </button>
@@ -210,140 +198,6 @@

 <a class="back-to-top-btn d-flex align-items-center justify-content-center"
   aria-label="Back to top"
-   href="#top-target"
-   onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-        <line x1="12" y1="19" x2="12" y2="5"></line>
-        <polyline points="5 12 12 5 19 12"></polyline>
-    </svg>
-</a>
-
-@code {
-    public enum ViewMode { Grid, List }
-    private ViewMode CurrentViewMode = ViewMode.Grid;
-
-    [CascadingParameter]
-    public string SharedSearchQuery { get; set; } = string.Empty;
-
-    private string ActiveCategory = "All";
-    private bool ShowExpandedCategories = false;
-    private bool ShowFilterMenu = false;
-
-    private string SelectedSortOption = "default";
-    private string ActivePriceFilter = "all";
-    private bool OnlyShowNew = false;
-
-    private List<string> MainCategories = new() { "All", "Graphic Design", "Product Design", "Architecture" };
-    private List<string> DynamicExtendedCategories = new();
-
-    private int ItemsPerPage = 12;
-    private int VisibleCount = 12;
-
-    public class BookItem
-    {
-        public long Id { get; set; } // Refactored to hold unique record indices of type long
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public decimal Price { get; set; }
-        public string Category { get; set; } = string.Empty;
-        public bool IsNew { get; set; }
-        public string Isbn { get; set; } = string.Empty;
-    }
-
-    private List<BookItem> BooksCollection = new();
-
-    private IEnumerable<BookItem> FilteredData
-    {
-        get
-        {
-            var data = BooksCollection.AsEnumerable();
-
-            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
-            {
-                var q = SharedSearchQuery.Trim();
-                data = data.Where(b =>
-                    b.Title.Contains(q, StringComparison.OrdinalIgnoreCase) ||
-                    b.Author.Contains(q, StringComparison.OrdinalIgnoreCase) ||
-                    b.Isbn.Contains(q, StringComparison.OrdinalIgnoreCase)
-                );
-            }
-
-            if (ActiveCategory != "All")
-            {
-                data = data.Where(b => b.Category.Equals(ActiveCategory, StringComparison.OrdinalIgnoreCase));
-            }
-
-            if (OnlyShowNew) { data = data.Where(b => b.IsNew); }
-
-            data = ActivePriceFilter switch
-            {
-                "under-500" => data.Where(b => b.Price < 500),
-                "500-1000" => data.Where(b => b.Price >= 500 && b.Price <= 1000),
-                "over-1000" => data.Where(b => b.Price > 1000),
-                _ => data
-            };
-
-            return data;
-        }
-    }
-
-    private IEnumerable<BookItem> SortedAndFilteredBooks => SelectedSortOption switch
-    {
-        "price-low" => FilteredData.OrderBy(b => b.Price),
-        "price-high" => FilteredData.OrderByDescending(b => b.Price),
-        "title-asc" => FilteredData.OrderBy(b => b.Title),
-        _ => FilteredData
-    };
-
-    private IEnumerable<BookItem> PaginatedBooks => SortedAndFilteredBooks.Take(VisibleCount);
-    private int TotalFilteredCount => FilteredData.Count();
-    private bool HasMoreItems => VisibleCount < TotalFilteredCount;
-
-    protected override void OnInitialized()
-    {
-        var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
-        DynamicExtendedCategories.AddRange(extraSourceCategories);
-
-        // Updated mock items to supply long IDs matching your screenshot items
-        BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
-        BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
-        BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
-
-        var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
-        var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
-        var designers = new[] { "J. Morrison", "K. Fujita", "Studio Bouroullec", "Es Devlin", "Kenya Hara" };
-
-        var entireCategoryPool = MainCategories.Concat(DynamicExtendedCategories).Where(c => c != "All").ToArray();
-        var random = new Random(42);
-
-        for (int i = 4; i <= 60; i++)
-        {
-            BooksCollection.Add(new BookItem
-            {
-                Id = (long)i,
-                Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
-                Author = designers[random.Next(designers.Length)],
-                Price = random.Next(25, 135) * 10,
-                Category = entireCategoryPool[random.Next(entireCategoryPool.Length)],
-                IsNew = random.NextDouble() > 0.7,
-                Isbn = $"978000000{i}"
-            });
-        }
-    }
-
-    // Handles the explicit page transition routing
-    private void NavigateToProduct(long id)
-    {
-        Navigation.NavigateTo($"/product/{id}");
-    }
-
-    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
-    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
-    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
-    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
-    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
-    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
-    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
-    private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
-    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
-}
+   href="#top-target">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
+</a>
@@ -0,0 +1,243 @@
+using LiteCharms.Features;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Categories;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+using LiteCharms.Features.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Home : ComponentBase
+{
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private BooksService BooksService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private CategoryService CategoryService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+    [Inject] private HydrationService HydrationService { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] private CartService CartService { get; set; } = default!;
+
+    [SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
+    [SupplyParameterFromQuery] public long? AuthorId { get; set; }
+
+    private ElementReference topTargetRef;
+    public enum ViewMode { Grid, List }
+    private ViewMode CurrentViewMode = ViewMode.Grid;
+    private string ActiveCategory = "All";
+    private bool ShowExpandedCategories = false;
+    private bool ShowFilterMenu = false;
+    private string SelectedSortOption = "default";
+    private string ActivePriceFilter = "all";
+    private bool OnlyShowNew = false;
+
+    private List<string> MainCategories { get; set; } = ["All"];
+    private List<string> DynamicExtendedCategories { get; set; } = [];
+
+    private int ItemsPerPage = 12;
+    private int VisibleCount = 12;
+
+    private List<Product> ProductsCollection { get; set; } = [];
+
+    protected string? ActiveAuthorFilterName { get; private set; }
+
+    private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
+    private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
+    private Dictionary<long, string> ProductAuthorCache { get; set; } = [];
+
+    private IEnumerable<Product> FilteredData
+    {
+        get
+        {
+            var data = ProductsCollection.AsEnumerable();
+
+            if (ActiveCategory != "All" && !AuthorId.HasValue)
+            {
+                data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
+                    ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
+            }
+
+            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
+            {
+                var q = SharedSearchQuery.Trim();
+                data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
+            }
+
+            if (ActivePriceFilter != "all")
+            {
+                data = data.Where(p =>
+                {
+                    var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
+
+                    return ActivePriceFilter switch
+                    {
+                        "under-500" => price < 500m,
+                        "500-1000" => price >= 500m && price <= 1000m,
+                        "over-1000" => price > 1000m,
+                        _ => true
+                    };
+                });
+            }
+
+            if (OnlyShowNew) data = data.Where(p => p.Enabled);
+
+            data = SelectedSortOption switch
+            {
+                "price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
+                "price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
+                "title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
+                "default" or _ => data
+            };
+
+            return data;
+        }
+    }
+
+    private IEnumerable<Product> PaginatedBooks => FilteredData.Take(VisibleCount);
+
+    private bool HasMoreItems => FilteredData.Count() > VisibleCount;
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (CartService.ShoppingCart.Items.Count == 0)
+            await CartService.LoadCartFromStorageAsync();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender == false && HydrationService.CartHydrated == false)
+        {
+            if(!CartService.ShoppingCart.CustomerId.HasValue)
+                await HydrationService.EnsureCustomerExistsAsync(CancellationToken);
+        }
+    }
+
+    protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
+
+    private async Task LoadCatalogDataAsync()
+    {
+        ProductsCollection.Clear();
+        ProductPriceCache.Clear();
+        ProductPrimaryCategoryCache.Clear();
+        ProductAuthorCache.Clear();
+        ActiveAuthorFilterName = null;
+
+        if (AuthorId.HasValue)
+        {
+            var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
+
+            if (authorResult.IsSuccess && authorResult.Value != null)
+            {
+                var author = authorResult.Value;
+
+                ActiveAuthorFilterName = author.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(author.Company)
+                    ? author.Company
+                    : $"{author.Name} {author.LastName}".Trim();
+            }
+
+            var authorBooksResult = await BooksService.GetBooksByAuthorAsync(AuthorId.Value);
+
+            if (authorBooksResult.IsSuccess && authorBooksResult.Value != null)
+            {
+                foreach (var authorBook in authorBooksResult.Value)
+                {
+                    if (authorBook.Product != null)
+                    {
+                        var product = authorBook.Product;
+
+                        ProductsCollection.Add(product);
+                        ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
+
+                        ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
+
+                        var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
+
+                        ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                            ? (categoryResult.Value[0].Name ?? "General")
+                            : "General";
+                    }
+                }
+            }
+            return;
+        }
+
+        var selectionRange = new DateRange
+        {
+            From = new DateOnly(2020, 1, 1),
+            To = DateOnly.FromDateTime(DateTime.UtcNow.AddDays(1)),
+            MaxRecords = 100
+        };
+
+        var allProductsResult = await ProductService.GetProductsAsync(0, selectionRange);
+
+        if (allProductsResult.IsSuccess && allProductsResult.Value != null)
+        {
+            ProductsCollection = allProductsResult.Value.ToList();
+
+            foreach (var product in ProductsCollection)
+            {
+                var priceResult = await ProductService.GetProductPriceAsync(product.Id);
+                ProductPriceCache[product.Id] = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+
+                var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
+                ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                    ? (categoryResult.Value[0].Name ?? "General")
+                    : "General";
+
+                ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
+                    ? product.Metadata.Manufacturer
+                    : "Unknown Author";
+            }
+        }
+
+        var categoriesResult = await CategoryService.GetCategoriesAsync();
+
+        if (categoriesResult.IsSuccess && categoriesResult.Value != null)
+        {
+            var cleanNames = categoriesResult.Value
+                .Select(c => c.Name)
+                .Where(n => !string.IsNullOrEmpty(n)).Cast<string>()
+                .ToList();
+
+            MainCategories = ["All", .. cleanNames.Take(3)];
+            DynamicExtendedCategories = [.. cleanNames.Skip(3)];
+        }
+    }
+
+    private void ClearAuthorFilter()
+    {
+        var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
+
+        Navigation.NavigateTo(newUri);
+    }
+
+    private void ResetFilters()
+    {
+        SelectedSortOption = "default";
+        ActivePriceFilter = "all";
+        OnlyShowNew = false;
+        VisibleCount = ItemsPerPage;
+    }
+
+    private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
+    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
+
+    private void SelectCategory(string categoryName)
+    {
+        ActiveCategory = categoryName;
+        VisibleCount = ItemsPerPage;
+
+        var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
+
+        Navigation.NavigateTo(updatedUri);
+    }
+
+    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
+    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
+    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
+    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
+    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
+    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
+}
@@ -169,4 +169,9 @@ html {
        color: #ffffff !important;
        border-color: #ffffff !important;
        box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
-    }
+    }
+
+/* Direct the smooth scroll action straight to the layout viewport boundary */
+#top-target {
+    scroll-margin-top: 100vh;
+}
@@ -0,0 +1,40 @@
+@page "/payment-failed"
+@rendermode InteractiveServer
+@inject NavigationManager Navigation
+@attribute [Authorize]
+
+<div class="container py-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6 text-center">
+            <div class="mb-4">
+                <div class="d-inline-block p-4 rounded-circle bg-danger bg-opacity-10 text-danger mb-3">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="8" x2="12" y2="12"></line>
+                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                    </svg>
+                </div>
+                <h1 class="fw-bold mb-3">Payment Cancelled</h1>
+                <p class="text-muted fs-5">We couldn't process your transaction. Don't worry, no money was deducted from your account.</p>
+
+                <div class="bg-light p-3 rounded mt-4">
+                    <p class="mb-0 text-muted small text-uppercase fw-bold">Common Causes</p>
+                    <p class="mb-0 fs-6 text-dark mt-1">The order was cancelled / insufficient funds, incorrect card details, or a temporary bank gateway timeout.</p>
+                </div>
+            </div>
+
+            <div class="d-grid gap-3 mt-5">                
+                <div class="row g-3">
+                    <div class="col-6">
+                        <a href="/" class="btn btn-outline-dark w-100 rounded-pill py-3">View Store</a>
+                    </div>
+                    <div class="col-6">
+                        <a href="/support" class="btn btn-outline-dark w-100 rounded-pill py-3">Get Help</a>
+                    </div>
+                </div>
+            </div>
+
+            <p class="mt-5 text-muted small">If you noticed a charge or have any order questions, please contact our support desk with your account email <strong>shop@litecharms.co.za</strong>.</p>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,72 @@
+using LiteCharms.Features;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class PaymentFailed
+{
+    [Inject] public CartService CartService { get; set; } = default!;
+    [Inject] public OrderService OrderService { get; set; } = default!;
+    [Inject] private CustomerService CustomerService { get; set; } = default!;
+    [Inject] public PaymentService PaymentService { get; set; } = default!;
+    [Inject] public HashService HashService { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+
+    private ClaimsPrincipal? User { get; set; }
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "reference")]
+    public string? PaymentReference { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState!.User;
+
+        if (User?.Identity?.IsAuthenticated == false) Navigation.NavigateTo("/login");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        long orderId = HashService.DecodeLongIdHash(PaymentReference!).Value;
+
+        var customerEmail = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+        var customerFetch = await CustomerService.GetCustomerAsync(customerEmail, CancellationToken);
+
+        if (customerFetch.IsFailed) return;
+
+        long customerId = customerFetch.Value.Id;
+
+        var orderUpdateResult = await OrderService.UpdateOrderStatusAsync(orderId, OrderStatus.Cancelled, CancellationToken);
+
+        if (orderUpdateResult.IsFailed) return;
+
+        var paymentIdFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken);
+
+        if (paymentIdFetch.IsFailed) return;
+
+        await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+        {
+            CustomerId = customerId,
+            OrderId = orderId,
+            PaymentGatewayId = 1,
+            PaymentGatewayReference = PaymentReference,
+            PaymentId = paymentIdFetch.Value.Id,
+            Status = LedgerStatuses.Cancelled
+
+        }, CancellationToken);
+
+        CartService.Clear();
+        CartService.ShoppingCart.OrderId = null;
+        await CartService.SaveCartToStorageAsync();
+        CartService.NotifyStateChanged();
+    }
+}
@@ -1,10 +1,11 @@
-@page "/payment-confirmation"
+@page "/payment-success"
+@rendermode InteractiveServer
+@inject NavigationManager Navigation
+@attribute [Authorize]

 <div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 text-center">
-
-            <!-- Success Icon & Message -->
            <div class="mb-4">
                <div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -16,25 +17,23 @@
                <p class="text-muted fs-5">Thank you for shopping with Midrand Books. Your order has been received and is being processed.</p>
                <div class="bg-light p-3 rounded mt-4">
                    <p class="mb-0 text-muted small text-uppercase fw-bold">Order Number</p>
-                    <h5 class="fw-bold mb-0">#MB-2026-8834</h5>
+                    <h5 class="fw-bold mb-0">@PaymentReference</h5>
                </div>
            </div>

-            <!-- Calls to Action -->
            <div class="d-grid gap-3 mt-5">
                <a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
                <div class="row g-3">
                    <div class="col-6">
-                        <a href="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
+                        <a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
                    </div>
                    <div class="col-6">
-                        <a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
+                        <a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
                    </div>
                </div>
            </div>

-            <!-- Optional Trust Footer -->
-            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
+            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>@CustomerEmail</strong>.</p>
        </div>
    </div>
 </div>
@@ -0,0 +1,70 @@
+using LiteCharms.Features;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class PaymentSuccess
+{
+    [Inject] private CartService CartService { get; set; } = default!;
+    [Inject] private CustomerService CustomerService { get; set; } = default!;
+    [Inject] private PaymentService PaymentService { get; set; } = default!;
+    [Inject] private HashService HashService { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
+    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
+    [Inject] public IToastService ToastService { get; set; } = default!;
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "reference")]
+    public string? PaymentReference { get; set; }
+
+    private ClaimsPrincipal? User { get; set; }
+
+    private string? CustomerEmail { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = authState!.User;
+
+        if (User?.Identity?.IsAuthenticated == false) Navigation.NavigateTo("/login");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        long orderId = HashService.DecodeLongIdHash(PaymentReference!).Value;
+        string orderHash = HashService.HashEncodeLongId(orderId).Value;
+
+        CustomerEmail = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+        var customerFetch = await CustomerService.GetCustomerAsync(CustomerEmail, CancellationToken);
+
+        if (customerFetch.IsFailed) return;
+
+        long customerId = customerFetch.Value.Id;
+
+        var paymentIdFetch = await PaymentService.GetOrderPaymentAsync(orderId, CancellationToken);
+
+        if (paymentIdFetch.IsFailed) return;
+
+        await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+        {
+            CustomerId = customerId,
+            OrderId = orderId,
+            PaymentGatewayId = 1,
+            PaymentGatewayReference = orderHash,
+            PaymentId = paymentIdFetch.Value.Id,
+            Status = LedgerStatuses.Changed
+
+        }, CancellationToken);
+
+        CartService.Clear();
+        CartService.ShoppingCart.OrderId = null;
+        await CartService.SaveCartToStorageAsync();
+        CartService.NotifyStateChanged();
+    }
+}
@@ -0,0 +1,83 @@
+@page "/privacy"
+@rendermode InteractiveServer
+@inject IJSRuntime JSRuntime
+
+<div class="legal-page-container py-5">
+    <header class="legal-header mb-5">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Regulatory Governance</span>
+        <h1 class="legal-main-title fw-bold">Privacy & Data Protection Policy</h1>
+        <p class="text-muted small font-monospace mt-2">
+            Midrand Books is a trading name for <strong>Lite Charms (Pty) Ltd</strong>, a company duly incorporated and registered in accordance with the Companies Act of South Africa (Registration No: [2020/269438/07]).
+        </p>
+    </header>
+
+    <div class="row g-5">
+        <div class="col-lg-3 d-none d-lg-block">
+            <div class="legal-nav-index font-monospace text-uppercase small gap-3 d-flex flex-column">
+                <button @onclick='() => ScrollToSection("section-processing")' class="index-btn text-start">1. Lawful Processing</button>
+                <button @onclick='() => ScrollToSection("section-collection")' class="index-btn text-start">2. Information We Collect</button>
+                <button @onclick='() => ScrollToSection("section-identity")' class="index-btn text-start">3. Identity Nodes</button>
+                <button @onclick='() => ScrollToSection("section-payment")' class="index-btn text-start">4. PayFast Gateway</button>
+                <button @onclick='() => ScrollToSection("section-rights")' class="index-btn text-start">5. Data Subject Rights</button>
+            </div>
+        </div>
+
+        <div class="col-lg-9">
+            <article class="legal-article-body">
+
+                <section id="section-processing" class="legal-section mb-5">
+                    <h3 class="section-title">1. Commitment to POPIA Compliance</h3>
+                    <p>
+                        Lite Charms (Pty) Ltd trading as Midrand Books ("we", "us", "our") is dedicated to protecting the privacy and personal data of our customers in strict alignment with the <strong>Protection of Personal Information Act, No. 4 of 2013 (POPIA)</strong> of South Africa. We act as the "Responsible Party" for all data collected across our web architecture.
+                    </p>
+                </section>
+
+                <section id="section-collection" class="legal-section mb-5">
+                    <h3 class="section-title">2. Collection of Personal Information</h3>
+                    <p>
+                        We collect personal information solely to facilitate the cataloging, transaction, and dispatch of archival material. This information includes, but is not limited to:
+                    </p>
+                    <ul>
+                        <li>Identity Details: Name, email address, and verification markers via federated claim contexts.</li>
+                        <li>Logistics Metrics: Physical shipping addresses and localized postal codes for courier assignment within South African borders.</li>
+                        <li>Digital Footprints: IP addresses, access telemetry, and structural tracking metrics.</li>
+                    </ul>
+                </section>
+
+                <section id="section-identity" class="legal-section mb-5">
+                    <h3 class="section-title">3. Decentralized Claims & Identity Security</h3>
+                    <p>
+                        For enhanced systemic protection, your core security credentials, access authentication methods, and identity validation vectors are managed externally through our secure cross-tenant single-sign-on architecture (<strong>STS Security Cluster</strong>). Lite Charms (Pty) Ltd does not store or process raw account passwords locally on its primary catalog databases.
+                    </p>
+                </section>
+
+                <section id="section-payment" class="legal-section mb-5">
+                    <h3 class="section-title">4. Secure Financial Handover Disclosures</h3>
+                    <p>
+                        All credit card, Instant EFT, and electronic payments are handled through a direct, secure integration handshake with the <strong>PayFast (Pty) Ltd</strong> merchant payment system. Midrand Books never captures, indexes, or retains sensitive primary account numbers (PAN), CVV digits, or banking pins. Payment states are transmitted securely using cryptographically signed verification payloads.
+                    </p>
+                </section>
+
+                <section id="section-rights" class="legal-section mb-5">
+                    <h3 class="section-title">5. Data Subject Rights & Information Officer</h3>
+                    <p>
+                        In accordance with POPIA parameters, you reserve explicit rights to request access to, correction of, or total destruction of your personal information stored inside our archives. For any data protection inquiries, or to contact our designated Information Officer, please direct formal correspondence to <code>privacy@midrandbooks.co.za</code>.
+                    </p>
+                </section>
+
+            </article>
+        </div>
+    </div>
+</div>
+
+@code {
+    private async Task ScrollToSection(string elementId)
+    {
+        await JSRuntime.InvokeVoidAsync("eval", $@"
+            var el = document.getElementById('{elementId}');
+            if (el) {{
+                el.scrollIntoView({{ behavior: 'smooth', block: 'start' }});
+            }}
+        ");
+    }
+}
@@ -0,0 +1,91 @@
+/* ==========================================================================
+   Midrand Books — Fine Press Legal Styles Document
+   ========================================================================== */
+
+.legal-page-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.legal-main-title {
+    font-size: 2.5rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+    font-family: Georgia, 'Times New Roman', serif;
+}
+
+.tracking-wider {
+    letter-spacing: 0.12em;
+}
+
+/* --- Index Navigation Stack --- */
+.legal-nav-index {
+    position: sticky;
+    top: 2rem;
+    border-left: 1px solid rgba(0, 0, 0, 0.08);
+    padding-left: 1.25rem;
+}
+
+.index-btn {
+    color: #666666;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.2s ease, padding-left 0.2s ease;
+}
+
+    .index-btn:hover {
+        color: #111111;
+        padding-left: 4px;
+    }
+
+    .index-btn:focus {
+        outline: none;
+        color: #111111;
+        font-weight: 600;
+    }
+
+/* --- Content Typography Alignment --- */
+.legal-article-body {
+    line-height: 1.8;
+    color: #333333;
+    font-size: 1rem;
+}
+
+.section-title {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: 1.35rem;
+    color: #111111;
+    margin-bottom: 1.25rem;
+    font-weight: 500;
+    scroll-margin-top: 2rem; /* Adds padding baseline context when aligned via smooth-scroll */
+}
+
+.legal-section p {
+    margin-bottom: 1.2rem;
+}
+
+.legal-section ul {
+    padding-left: 1.25rem;
+    margin-bottom: 1.5rem;
+}
+
+.legal-section li {
+    margin-bottom: 0.5rem;
+}
+
+code {
+    background-color: #F5F5F4;
+    color: #111111;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 0.88rem;
+}
@@ -1,137 +0,0 @@
-@page "/product/{BookId:long}"
-@inject NavigationManager Navigation
-
-<div class="product-container">
-    <nav class="breadcrumb">
-        <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
-        <span class="crumb-separator">/</span>
-        <span class="crumb-current">@BookTitle</span>
-    </nav>
-
-    <div class="product-layout">
-        <div class="gallery-section">
-            <div class="main-image-wrapper">
-                <img src="@ActiveImageUrl" alt="@BookTitle" class="main-image" />
-
-                <div class="format-badges">
-                    @if (IsPhysicalBook)
-                    {
-                        <span class="badge badge-physical">Book</span>
-                    }
-                    @if (IsEBook)
-                    {
-                        <span class="badge badge-ebook">E-Book</span>
-                    }
-                    @if (CanReadOnline)
-                    {
-                        <span class="badge badge-online">Read Online</span>
-                    }
-                </div>
-            </div>
-
-            <div class="thumbnail-grid">
-                @foreach (var img in Thumbnails)
-                {
-                    <div class="thumbnail-wrapper @(ActiveImageUrl == img ? "active" : "")"
-                         @onclick="() => ActiveImageUrl = img">
-                        <img src="@img" alt="Thumbnail" />
-                    </div>
-                }
-            </div>
-        </div>
-
-        <div class="details-section">
-            <div class="meta-header">
-                <span class="author-name">@AuthorName</span>
-                <div class="rating-stars">
-                    @for (int i = 1; i <= 5; i++)
-                    {
-                        <span class="star @(i <= CurrentRating ? "filled" : "")">★</span>
-                    }
-                    <span class="rating-text">(@CurrentRating.ToString("F1"))</span>
-                </div>
-            </div>
-
-            <h1 class="product-title">@BookTitle</h1>
-            <div class="product-price">R @Price.ToString("N2")</div>
-
-            <div class="purchase-actions">
-                <div class="quantity-picker">
-                    <button @onclick="DecreaseQty" class="qty-btn">-</button>
-                    <span class="qty-val">@Quantity</span>
-                    <button @onclick="IncreaseQty" class="qty-btn">+</button>
-                </div>
-                <button class="btn-add-to-cart" @onclick="HandleAddToCart">
-                    Add to Cart
-                </button>
-            </div>
-
-            <hr class="divider" />
-
-            <div class="info-block">
-                <h3>Description</h3>
-                <p class="description-text">@BookDescription</p>
-            </div>
-
-            <div class="info-block author-bio-card">
-                <h3>About the Author</h3>
-                <p class="author-bio">@AuthorBio</p>
-                <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
-                    View all books by @AuthorName →
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
-@code {
-    [Parameter] public long BookId { get; set; }
-
-    // Mock State - In production, pull these via a Service using BookId inside OnInitialized
-    private string BookTitle { get; set; } = "Letters from M/M (Paris)";
-    private string AuthorName { get; set; } = "M/M Paris";
-    private string AuthorBio { get; set; } = "M/M Paris is an art and design partnership consisting of Michaël Amzalag and Mathias Augustyniak, established in 1992. Renowned globally for their influence on fashion, music, and contemporary art layout structures.";
-    private string BookDescription { get; set; } = "An exquisite archive tracking visual graphics, typography, and structural design curation over three decades. Beautifully bound with matte-coated plates and custom layouts.";
-    private decimal Price { get; set; } = 720.00m;
-
-    // Dynamic Ratings State
-    private double CurrentRating { get; set; } = 4.7;
-
-    // Formats supported
-    private bool IsPhysicalBook { get; set; } = true;
-    private bool IsEBook { get; set; } = true;
-    private bool CanReadOnline { get; set; } = false;
-
-    // Image Caching Gallery State
-    private string ActiveImageUrl { get; set; } = "images/book-cover-large.png";
-    private List<string> Thumbnails { get; set; } = new()
-    {
-        "images/book-cover-large.png",
-        "images/book-inside-1.png",
-        "images/book-inside-2.png"
-    };
-
-    private int Quantity { get; set; } = 1;
-
-    protected override void OnInitialized()
-    {
-        // Default the gallery viewer context logic
-        if (Thumbnails.Any())
-        {
-            ActiveImageUrl = Thumbnails.First();
-        }
-    }
-
-    private void IncreaseQty() => Quantity++;
-    private void DecreaseQty() { if (Quantity > 1) Quantity--; }
-
-    private void HandleAddToCart()
-    {
-        // Event logic hooked into your structural state layout
-    }
-
-    private void ViewAllAuthorBooks()
-    {
-        Navigation.NavigateTo($"/catalog?author={Uri.EscapeDataString(AuthorName)}");
-    }
-}
@@ -0,0 +1,148 @@
+@page "/product/{BookId:long}"
+@rendermode InteractiveServer
+
+<div class="product-container">
+    @if (IsLoading)
+    {
+        <div class="text-center py-5">
+            <div class="spinner-border text-dark" role="status">
+                <span class="visually-hidden">Loading product details...</span>
+            </div>
+            <p class="text-muted mt-2">Loading curated details...</p>
+        </div>
+    }
+    else if (CurrentProduct == null)
+    {
+        <div class="text-center py-5 animate-fade-in">
+            <svg class="text-muted mb-3" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            <h2 class="h5 text-dark fw-medium">Artifact Not Found</h2>
+            <p class="text-muted small">The requested book could not be found in our current catalog.</p>
+            <button class="btn btn-dark btn-sm rounded-pill px-4 mt-2" @onclick='() => Navigation.NavigateTo("/")'>Return to Books</button>
+        </div>
+    }
+    else
+    {
+        <nav class="breadcrumb">
+            <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
+            <span class="crumb-separator">/</span>
+            <span class="crumb-current">@CurrentProduct.Name</span>
+        </nav>
+
+        <div class="product-layout">
+            <div class="gallery-section">
+                <div class="main-image-wrapper">
+                    @if (!string.IsNullOrWhiteSpace(ActiveImageUrl))
+                    {
+                        <img src="@ActiveImageUrl" alt="@CurrentProduct.Name" class="main-image" />
+                    }
+                    else
+                    {
+                        <div class="book-spine-fallback-large bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50 shadow-sm">
+                            <div>
+                                <span class="fw-semibold tracking-wider d-block">@PrimaryCategory.ToUpper()</span>
+                                <span class="opacity-50 small" style="font-size: 0.65rem;">CURATED EDITION</span>
+                            </div>
+                        </div>
+                    }
+
+                    <div class="format-badges">
+                        @if (CurrentProduct.Enabled)
+                        {
+                            <span class="badge badge-physical">Physical Book</span>
+                        }
+
+                        @if (StockCount <= 0)
+                        {
+                            <span class="badge bg-danger text-white border-0">Out of Stock</span>
+                        }
+                        else if (StockCount <= 3)
+                        {
+                            <span class="badge bg-warning text-dark border-0">Only @StockCount Left</span>
+                        }
+                        else
+                        {
+                            <span class="badge badge-ebook">In Stock (@StockCount available)</span>
+                        }
+                    </div>
+                </div>
+
+                @if (Thumbnails.Count > 1)
+                {
+                    <div class="thumbnail-grid">
+                        @foreach (var img in Thumbnails)
+                        {
+                            var currentImg = img;
+                            <div class="thumbnail-wrapper @(ActiveImageUrl == currentImg ? "active" : "")"
+                                 @onclick="() => ActiveImageUrl = currentImg">
+                                <img src="@currentImg" alt="Catalog gallery thumbnail" />
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
+
+            <div class="details-section">
+                <div class="meta-header">
+                    <span class="author-name">@AuthorName</span>
+                    <div class="rating-stars">
+                        @for (int i = 1; i <= 5; i++)
+                        {
+                            <span class="star @(i <= 4 ? "filled" : "")">★</span>
+                        }
+                        <span class="rating-text">(4.8)</span>
+                    </div>
+                </div>
+
+                <h1 class="product-title">@CurrentProduct.Name</h1>
+                <div class="product-price">R @LivePrice.ToString("N2")</div>
+
+                <div class="purchase-actions">
+                    <div class="quantity-picker @(StockCount <= 0 ? "opacity-50 pointer-events-none" : "")">
+                        <button @onclick="DecreaseQty" class="qty-btn" disabled="@(StockCount <= 0 || Quantity <= 1)">-</button>
+                        <span class="qty-val">@(StockCount <= 0 ? 0 : Quantity)</span>
+                        <button @onclick="IncreaseQty" class="qty-btn" disabled="@(StockCount <= 0 || Quantity >= StockCount)">+</button>
+                    </div>
+
+                    @if (StockCount > 0)
+                    {
+                        <button class="btn-add-to-cart" @onclick="HandleAddToCart">
+                            Add to Cart
+                        </button>
+                    }
+                    else
+                    {
+                        <button class="btn-add-to-cart bg-secondary text-white-50 cursor-not-allowed" disabled>
+                            Sold Out
+                        </button>
+                    }
+                </div>
+
+                <hr class="divider" />
+
+                @if (!string.IsNullOrWhiteSpace(CurrentProduct.Description))
+                {
+                    <div class="info-block">
+                        <h3>Description</h3>
+                        <p class="description-text">@CurrentProduct.Description</p>
+                    </div>
+                }
+
+                <div class="info-block author-bio-card">
+                    <h3>About the Author</h3>
+                    <p class="author-bio">
+                        @(string.IsNullOrWhiteSpace(CurrentProduct.Metadata?.Manufacturer)
+                            ? "Details regarding this publisher/author are maintained inside our curated archives."
+                            : $"{CurrentProduct.Metadata.Manufacturer} is globally recognized for their direct contribution to this specific genre spectrum.")
+                    </p>
+                    <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
+                        View all books by @AuthorName →
+                    </button>
+                </div>
+            </div>
+        </div>
+    }
+</div>
@@ -0,0 +1,154 @@
+using LiteCharms.Features;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Authors.Models;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class ProductView : ComponentBase
+{
+    [Parameter] public long BookId { get; set; }
+
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+    [Inject] private CartService CartService { get; set; } = default!;
+
+    protected Cart ShoppingCart => CartService?.ShoppingCart!;
+
+    protected bool IsLoading { get; private set; } = true;
+    protected Product? CurrentProduct { get; private set; }
+    protected ProductPrice? CurrentPrice { get; private set; }
+    protected decimal LivePrice { get; private set; } = 0.00m;
+    protected string AuthorName { get; private set; } = "Unknown Author";
+    protected string PrimaryCategory { get; private set; } = "General";
+
+    protected string ActiveImageUrl { get; set; } = string.Empty;
+    protected List<string> Thumbnails { get; private set; } = [];
+    protected int Quantity { get; private set; } = 1;
+
+    // Track real-time stock limits
+    protected int StockCount { get; private set; } = 5;
+
+    protected Author? CurrentAuthor { get; private set; }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        try
+        {
+            IsLoading = true;
+            CurrentProduct = null;
+            CurrentAuthor = null;
+            Thumbnails.Clear();
+
+            var productResult = await ProductService.GetProductAsync(BookId);
+
+            if (productResult.IsSuccess && productResult.Value != null)
+            {
+                CurrentProduct = productResult.Value;
+                AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
+
+                // Mapping real stock integers if available on your Product metadata entity model
+                // StockCount = CurrentProduct.InventoryCount;
+
+                var priceResult = await ProductService.GetProductPriceAsync(BookId);
+                LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+                CurrentPrice = priceResult.IsSuccess ? priceResult.Value : null;
+
+                var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
+                if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                    PrimaryCategory = categoryResult.Value[0].Name ?? "General";
+
+                var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
+                if (authorResult.IsSuccess && authorResult.Value != null)
+                {
+                    CurrentAuthor = authorResult.Value;
+
+                    if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
+                        AuthorName = CurrentAuthor.Company;
+                    else
+                        AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
+                }
+
+                if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
+                    Thumbnails.Add(CurrentProduct.ImageUrl);
+
+                if (CurrentProduct.ThumbnailUrls != null && CurrentProduct.ThumbnailUrls?.Length != 0)
+                    foreach (var url in CurrentProduct.ThumbnailUrls!)
+                        if (!string.IsNullOrWhiteSpace(url) && !Thumbnails.Contains(url)) Thumbnails.Add(url);
+
+                ActiveImageUrl = Thumbnails.FirstOrDefault() ?? string.Empty;
+            }
+        }
+        catch (Exception)
+        {
+            CurrentProduct = null;
+            CurrentPrice = null;
+        }
+        finally
+        {
+            IsLoading = false;
+        }
+    }
+
+    protected async void IncreaseQty()
+    {
+        // Enforce maximum stock bounds limits natively during counter picking
+        if (CurrentPrice is not null && Quantity < StockCount)
+        {
+            CartService.UpdateQuantity(CurrentPrice!.Id, 1);
+
+            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
+            StateHasChanged();
+        }
+    }
+
+    protected async void DecreaseQty()
+    {
+        if (Quantity > 1)
+        {
+            CartService.UpdateQuantity(CurrentPrice!.Id, -1);
+
+            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
+            StateHasChanged();
+        }
+    }
+
+    protected async void HandleAddToCart()
+    {
+        if (CurrentProduct == null || StockCount <= 0) return;
+
+        if (CurrentPrice is not null)
+        {
+            if (ShoppingCart.Items.Any(p => p.Price!.Id == CurrentPrice.Id))
+            {
+                var currentInCart = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+                if (currentInCart >= StockCount) return;
+
+                CartService.UpdateQuantity(CurrentPrice.Id, 1);
+                await CartService.SaveCartToStorageAsync();
+                return;
+            }
+
+            CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!);
+            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
+
+            await CartService.SaveCartToStorageAsync();
+            StateHasChanged();
+        }
+    }
+
+    protected void ViewAllAuthorBooks()
+    {
+        if (CurrentAuthor is not null)
+            Navigation.NavigateTo($"/?authorId={CurrentAuthor.Id}");
+    }
+}
@@ -1,20 +1,34 @@
-.product-container {
+/* ==========================================================================
+   Structural Layout Containers
+   ========================================================================== */
+.product-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    font-family: system-ui, -apple-system, sans-serif;
 }

-/* Breadcrumbs */
+.product-layout {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 4rem;
+}
+
+/* ==========================================================================
+   Breadcrumb Navigation Links
+   ========================================================================== */
 .breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 2.5rem;
    color: #8c8c8c;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
 }

 .crumb-link {
    cursor: pointer;
-    transition: color 0.2s;
+    transition: color 0.2s ease;
 }

    .crumb-link:hover {
@@ -30,52 +44,50 @@
    font-weight: 500;
 }

-/* Two-Column Grid Layout Structure */
-.product-layout {
-    display: grid;
-    grid-template-columns: 1.1fr 0.9fr;
-    gap: 4rem;
-}
-
-@media (max-width: 992px) {
-    .product-layout {
-        grid-template-columns: 1fr;
-        gap: 2.5rem;
-    }
-}
-
-/* Left Section: Visual Images/Thumbnails Layout */
+/* ==========================================================================
+   Left Section: Media Gallery Components
+   ========================================================================== */
 .gallery-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
+    width: 100%;
 }

 .main-image-wrapper {
    position: relative;
    background-color: #f9f9f9;
    border-radius: 8px;
-    padding: 3rem;
+    padding: 3rem 3rem 4.5rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
+    width: 100%;
 }

 .main-image {
    max-height: 450px;
+    max-width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
 }

-/* Format Badges Overlay Styles */
+/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
 .format-badges {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+    position: absolute !important;
+    bottom: 1.5rem !important;
+    left: 50% !important; /* Move anchor point to exactly half-width */
+    right: auto !important;
+    transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    width: max-content !important; /* Expands safely according to badges text values */
+    max-width: 90% !important; /* Keeps bounding box clean of parent borders */
 }

 .badge {
@@ -86,6 +98,8 @@
    border-radius: 100px;
    font-weight: 600;
    border: 1px solid transparent;
+    display: inline-block !important;
+    white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
 }

 .badge-physical {
@@ -105,9 +119,10 @@
    border-color: #bbf7d0;
 }

-/* Thumbnails container */
+/* Interactive Gallery Thumbnails Grid */
 .thumbnail-grid {
    display: flex;
+    flex-wrap: wrap;
    gap: 1rem;
 }

@@ -122,7 +137,8 @@
    transition: all 0.2s ease;
 }

-    .thumbnail-wrapper:hover, .thumbnail-wrapper.active {
+    .thumbnail-wrapper:hover,
+    .thumbnail-wrapper.active {
        border-color: #111;
    }

@@ -133,7 +149,9 @@
        mix-blend-mode: multiply;
    }

-/* Right Section: Core Text Typography Controls */
+/* ==========================================================================
+   Right Section: Product Details & Typography Controls
+   ========================================================================== */
 .details-section {
    display: flex;
    flex-direction: column;
@@ -144,6 +162,8 @@
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }

 .author-name {
@@ -151,7 +171,7 @@
    color: #666;
 }

-/* Dynamic Stars C# rendering mapping */
+/* Review Star Components */
 .rating-stars {
    display: flex;
    align-items: center;
@@ -164,7 +184,7 @@
 }

    .star.filled {
-        color: #111; /* Solid black stars fits your clean aesthetic perfectly */
+        color: #ffc107;
    }

 .rating-text {
@@ -175,7 +195,7 @@

 .product-title {
    font-size: 2.5rem;
-    font-family: 'Playfair Display', serif, Georgia; /* Fits the luxury typography tone */
+    font-family: 'Playfair Display', serif, Georgia;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1rem;
@@ -189,7 +209,9 @@
    color: #111;
 }

-/* Standard E-commerce Action Bar Block */
+/* ==========================================================================
+   Interactive E-Commerce Selection Bars
+   ========================================================================== */
 .purchase-actions {
    display: flex;
    gap: 1rem;
@@ -215,7 +237,7 @@
    align-items: center;
    justify-content: center;
    border-radius: 50%;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s ease;
 }

    .qty-btn:hover {
@@ -237,7 +259,8 @@
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s ease;
+    padding: 0.5rem 1.5rem;
 }

    .btn-add-to-cart:hover {
@@ -250,7 +273,9 @@
    margin-bottom: 2rem;
 }

-/* General Layout Text and Cross-Selling */
+/* ==========================================================================
+   Informational Text Elements & Links
+   ========================================================================== */
 .info-block {
    margin-bottom: 2rem;
 }
@@ -263,7 +288,8 @@
        margin-bottom: 0.75rem;
    }

-.description-text, .author-bio {
+.description-text,
+.author-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
@@ -292,3 +318,62 @@
    .btn-text-link:hover {
        color: #444;
    }
+
+/* ==========================================================================
+   Responsive Adaptations & Breakpoints
+   ========================================================================== */
+@media (max-width: 992px) {
+    .product-layout {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+
+    .main-image-wrapper {
+        min-height: 380px;
+    }
+}
+
+@media (max-width: 576px) {
+    .product-container {
+        padding: 1rem 1rem;
+    }
+
+    .main-image-wrapper {
+        min-height: 320px;
+        padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
+    }
+
+    .main-image {
+        max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
+    }
+
+    .format-badges {
+        bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
+        gap: 0.4rem !important;
+    }
+
+    .badge {
+        font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
+        padding: 0.25rem 0.65rem !important;
+    }
+
+    .product-title {
+        font-size: 1.85rem;
+    }
+
+    .purchase-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .quantity-picker {
+        justify-content: space-between;
+        width: 100%;
+        padding: 0.5rem;
+    }
+
+    .btn-add-to-cart {
+        width: 100%;
+        padding: 0.85rem;
+    }
+}
@@ -1,364 +0,0 @@
-@page "/profile"
-
-<div class="container py-5">
-    <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
-    <div class="row g-5">
-        <div class="col-md-3">
-            <div class="nav flex-column nav-pills" role="tablist">
-                <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
-                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
-                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
-                <hr />
-                <button class="nav-link text-danger text-start">Logout</button>
-            </div>
-        </div>
-
-        <div class="col-md-9">
-            <div class="tab-content">
-
-                <div class="tab-pane fade show active" id="orders" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Order History</h5>
-                    </div>
-
-                    <div class="d-flex flex-column gap-3">
-                        @if (orderHistory != null)
-                        {
-                            @foreach (var order in orderHistory)
-                            {
-                                <div class="card p-4 shadow-sm order-history-card">
-                                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
-
-                                        <div class="flex-grow-1 w-100">
-                                            <div class="order-meta-track mb-2">
-                                                <div class="meta-item-id">
-                                                    <span class="fw-bold text-dark">@order.OrderId</span>
-                                                </div>
-                                                <div class="meta-item-date">
-                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
-                                                </div>
-                                                <div class="meta-item-status">
-                                                    <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
-                                                        @order.Status
-                                                    </span>
-                                                </div>
-                                            </div>
-
-                                            <h6 class="mb-2">
-                                                <a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
-                                                    @order.ProductTitle
-                                                </a>
-                                            </h6>
-
-                                            <div class="d-flex align-items-center text-secondary small">
-                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
-                                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
-                                                </svg>
-                                                <span class="text-muted">Shipped to:</span>&nbsp;@order.ShippingAddressName
-                                            </div>
-                                        </div>
-
-                                        <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
-                                            <div class="text-sm-end mb-sm-2">
-                                                <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
-                                                <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
-                                            </div>
-
-                                            <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
-                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
-                                                </svg>
-                                            </button>
-                                        </div>
-
-                                    </div>
-                                </div>
-                            }
-                        }
-                        else
-                        {
-                            <div class="card p-4 text-center text-muted">
-                                Loading order history...
-                            </div>
-                        }
-                    </div>
-                </div>
-
-                <div class="tab-pane fade" id="shipping" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Saved Addresses</h5>
-                        @if (!showAddForm && editingAddress == null)
-                        {
-                            <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
-                        }
-                    </div>
-
-                    @if (showAddForm)
-                    {
-                        <div class="card p-4 border shadow-sm mb-4 bg-light">
-                            <div class="d-flex justify-content-between align-items-center mb-3">
-                                <h6 class="fw-bold m-0">New Address</h6>
-                                <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
-                            </div>
-                            <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
-                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
-                            <div class="d-flex gap-2 mb-3">
-                                <input type="text" class="form-control" placeholder="City" @bind="newCity" />
-                                <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
-                            </div>
-                            <div class="mb-3 d-flex gap-3">
-                                <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
-                                <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
-                            </div>
-                            <div class="d-flex">
-                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
-                            </div>
-                        </div>
-                    }
-
-                    @if (editingAddress != null)
-                    {
-                        <div class="card p-4 border shadow-sm mb-4 bg-light">
-                            <div class="d-flex justify-content-between align-items-center mb-3">
-                                <h6 class="fw-bold m-0">Edit Address</h6>
-                                <button type="button" class="btn-close" @onclick="CancelEditing"></button>
-                            </div>
-                            <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
-                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
-                            <div class="d-flex gap-2 mb-3">
-                                <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
-                                <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
-                            </div>
-                            <div class="mb-3 d-flex gap-3">
-                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
-                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
-                            </div>
-                            <div class="d-flex">
-                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
-                            </div>
-                        </div>
-                    }
-
-                    @foreach (var addr in savedAddresses)
-                    {
-                        <div class="card p-4 shadow-sm mb-3 address-card">
-                            <div class="d-flex justify-content-between align-items-start">
-                                <div>
-                                    <h6 class="fw-bold mb-1">@addr.Name</h6>
-                                    <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
-                                    <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
-                                        @if (addr.IsBilling)
-                                        {
-                                            <span class="badge badge-tag">[Billing]</span>
-                                        }
-                                        @if (addr.IsShipping)
-                                        {
-                                            <span class="badge badge-tag">[Shipping]</span>
-                                        }
-                                    </div>
-                                </div>
-
-                                <div class="d-flex align-items-center gap-2 actions-container">
-                                    <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
-                                        <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
-                                    </label>
-
-                                    <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-                                        </svg>
-                                    </button>
-
-                                    <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    }
-                </div>
-
-                <div class="tab-pane fade" id="profile" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Profile Settings</h5>
-                    </div>
-                    <div class="card p-4 shadow-sm">
-                        <p class="text-muted mb-0">Manage your password and profile data here.</p>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</div>
-
-@code {
-    private bool showAddForm = false;
-    private AddressItem? editingAddress = null;
-    private string newAddressName = "";
-    private string newStreetAddress = "";
-    private string newCity = "";
-    private string newPostalCode = "";
-    private bool isBilling, isShipping;
-
-    private List<OrderItem> orderHistory = new()
-    {
-        new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
-        new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
-    };
-
-    private List<AddressItem> savedAddresses = new()
-    {
-        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
-        new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
-        new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
-    };
-
-    private void DownloadInvoice(string orderId)
-    {
-        // Handle invoice downloading logic here
-    }
-
-    private void OpenAddForm()
-    {
-        editingAddress = null;
-        showAddForm = true;
-    }
-
-    private void SaveAddress()
-    {
-        if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
-        {
-            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
-            var newItem = new AddressItem
-            {
-                Id = nextId,
-                Name = newAddressName,
-                Street = newStreetAddress,
-                City = newCity,
-                PostalCode = newPostalCode,
-                IsBilling = isBilling,
-                IsShipping = isShipping,
-                IsPrimary = !savedAddresses.Any()
-            };
-            savedAddresses.Add(newItem);
-            ResetAddForm();
-        }
-    }
-
-    private void ResetAddForm()
-    {
-        newAddressName = "";
-        newStreetAddress = "";
-        newCity = "";
-        newPostalCode = "";
-        isBilling = false;
-        isShipping = false;
-        showAddForm = false;
-    }
-
-    private void StartEditing(AddressItem addr)
-    {
-        showAddForm = false;
-        editingAddress = new AddressItem
-        {
-            Id = addr.Id,
-            Name = addr.Name,
-            Street = addr.Street,
-            City = addr.City,
-            PostalCode = addr.PostalCode,
-            IsBilling = addr.IsBilling,
-            IsShipping = addr.IsShipping,
-            IsPrimary = addr.IsPrimary
-        };
-    }
-
-    private void UpdateAddress()
-    {
-        if (editingAddress != null)
-        {
-            var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
-            if (target != null)
-            {
-                target.Name = editingAddress.Name;
-                target.Street = editingAddress.Street;
-                target.City = editingAddress.City;
-                target.PostalCode = editingAddress.PostalCode;
-                target.IsBilling = editingAddress.IsBilling;
-                target.IsShipping = editingAddress.IsShipping;
-            }
-            editingAddress = null;
-        }
-    }
-
-    private void CancelEditing()
-    {
-        editingAddress = null;
-    }
-
-    private void DeleteAddress(AddressItem addr)
-    {
-        if (editingAddress?.Id == addr.Id)
-        {
-            editingAddress = null;
-        }
-        savedAddresses.Remove(addr);
-        if (addr.IsPrimary && savedAddresses.Any())
-        {
-            savedAddresses.First().IsPrimary = true;
-        }
-    }
-
-    private void SetPrimary(AddressItem target, ChangeEventArgs e)
-    {
-        var isChecked = (bool)(e.Value ?? false);
-        if (isChecked)
-        {
-            foreach (var addr in savedAddresses)
-            {
-                addr.IsPrimary = (addr.Id == target.Id);
-            }
-        }
-        else
-        {
-            target.IsPrimary = false;
-        }
-    }
-
-    public class AddressItem
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-        public string Street { get; set; } = "";
-        public string City { get; set; } = "";
-        public string PostalCode { get; set; } = "";
-        public bool IsBilling { get; set; }
-        public bool IsShipping { get; set; }
-        public bool IsPrimary { get; set; }
-    }
-
-    public class OrderItem
-    {
-        public string OrderId { get; set; } = "";
-        public string ProductId { get; set; } = "";
-        public string ProductTitle { get; set; } = "";
-        public DateTime OrderDate { get; set; }
-        public string ShippingAddressName { get; set; } = "";
-        public string Status { get; set; } = "";
-        public double Total { get; set; }
-
-        public string DisplayTitle
-        {
-            get
-            {
-                if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
-                const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
-                return ProductTitle.Length <= maxLength
-                    ? ProductTitle
-                    : $"{ProductTitle.Substring(0, maxLength)}...";
-            }
-        }
-    }
-}
@@ -1,204 +0,0 @@
-::deep .container {
-    max-width: 1100px;
-}
-
-/* Navigation Layout overrides */
-.nav-pills .nav-link {
-    color: #6c757d;
-    border-radius: 0;
-    padding: 0.75rem 0;
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-    .nav-pills .nav-link.active {
-        background-color: transparent !important;
-        color: #1A1A1A;
-        border-bottom: 2px solid #1A1A1A;
-    }
-
-    .nav-pills .nav-link:hover:not(.active) {
-        color: #1A1A1A;
-    }
-
-/* Cards layout rules */
-.card {
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 0;
-}
-
-.address-card {
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-    .address-card:hover {
-        border-color: rgba(0, 0, 0, 0.16);
-    }
-
-/* Container Wrapper to Suppress the Scrollbar completely */
-.table-container-fixed {
-    width: 100%;
-    overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
-}
-
-/* Global Table Typography - Reduced uniformly to keep items on a single line */
-.profile-table {
-    font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
-    width: 100%;
-    table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
-}
-
-    .profile-table tbody td {
-        padding-top: 0.85rem;
-        padding-bottom: 0.85rem;
-    }
-
-    .profile-table thead th {
-        background-color: #F9F9F9;
-        font-size: 0.7rem;
-        letter-spacing: 0.04rem;
-    }
-
-/* Compact Column Proportions */
-.col-order-id {
-    width: 115px;
-}
-
-.col-date {
-    width: 100px;
-}
-
-.col-total {
-    width: 85px;
-}
-
-.col-status {
-    width: 105px;
-}
-
-.col-invoice {
-    width: 65px;
-}
-
-.col-title {
-    width: auto; /* Takes shared residual space smoothly */
-}
-
-.col-address {
-    width: auto; /* Takes shared residual space smoothly */
-}
-
-/* Product link handling */
-.product-link {
-    color: #1A1A1A;
-    text-decoration: none;
-    border-bottom: 1px dashed transparent;
-    transition: border-color 0.2s ease;
-    display: inline-block;
-}
-
-    .product-link:hover {
-        border-color: #1A1A1A;
-    }
-
-/* Base Badge Settings */
-.badge {
-    font-size: 0.62rem;
-    letter-spacing: 0.5px;
-    padding: 0.4em 0.8em;
-    border-radius: 4px;
-    font-weight: 600;
-}
-
-/* Status Badge Palette Colors */
-.status-shipped {
-    background-color: #e3f2fd !important;
-    color: #0d6efd !important;
-    border: 1px solid rgba(13, 110, 253, 0.15);
-}
-
-.status-delivered {
-    background-color: #e8f5e9 !important;
-    color: #198754 !important;
-    border: 1px solid rgba(25, 135, 84, 0.15);
-}
-
-.badge-tag {
-    background-color: #f0f0f0 !important;
-    color: #4a4a4a !important;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-/* Form Buttons */
-.btn-outline-dark {
-    border-radius: 50px;
-    border-width: 1px;
-}
-
-.btn-dark {
-    border-radius: 50px;
-}
-
-/* Action button configurations */
-.action-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    text-decoration: none;
-    transition: background-color 0.15s ease, transform 0.1s ease;
-}
-
-    .action-btn:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .action-btn.text-danger:hover {
-        background-color: rgba(220, 53, 69, 0.1);
-    }
-
-    .action-btn:active {
-        transform: scale(0.95);
-    }
-
-/* Compact SVG Icons sizing */
-.svg-icon {
-    width: 15px;
-    height: 15px;
-    fill: currentColor;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.pointer-label {
-    cursor: pointer;
-    user-select: none;
-}
-
-/* Shared Card Styling Unification Rules */
-.order-history-card {
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-    border-radius: 0; /* Matches your address card configuration */
-}
-
-    .order-history-card:hover {
-        border-color: rgba(0, 0, 0, 0.16);
-    }
-
-/* Micro Typography Alignment */
-.xx-small {
-    font-size: 0.65rem;
-}
-
-.tracking-wider {
-    letter-spacing: 0.05rem;
-}
-
-/* Responsive adjustments across layout break-points */
-@media (max-width: 575.98px) {
-    .border-sm-top-0 {
-        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
-    }
-}
@@ -0,0 +1,89 @@
+@page "/terms"
+@rendermode InteractiveServer
+@inject IJSRuntime JSRuntime
+
+<div class="legal-page-container py-5">
+    <header class="legal-header mb-5">
+        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Commercial Agreement</span>
+        <h1 class="legal-main-title fw-bold">Terms of Sale & Service</h1>
+        <p class="text-muted small font-monospace mt-2">
+            Midrand Books is a trading name for <strong>Lite Charms (Pty) Ltd</strong>, a private company incorporated and governed under the regulations of the Companies Act of the Republic of South Africa.
+        </p>
+    </header>
+
+    <div class="row g-5">
+        <div class="col-lg-3 d-none d-lg-block">
+            <div class="legal-nav-index font-monospace text-uppercase small gap-3 d-flex flex-column">
+                <button @onclick='() => ScrollToSection("section-formation")' class="index-btn text-start">1. Contract Formation</button>
+                <button @onclick='() => ScrollToSection("section-pricing")' class="index-btn text-start">2. Currency & Pricing</button>
+                <button @onclick='() => ScrollToSection("section-logistics")' class="index-btn text-start">3. Delivery & Risk</button>
+                <button @onclick='() => ScrollToSection("section-cooling")' class="index-btn text-start">4. CPA Cooling-Off</button>
+                <button @onclick='() => ScrollToSection("section-liability")' class="index-btn text-start">5. Liability Shield</button>
+                <button @onclick='() => ScrollToSection("section-jurisdiction")' class="index-btn text-start">6. Jurisdiction</button>
+            </div>
+        </div>
+
+        <div class="col-lg-9">
+            <article class="legal-article-body">
+
+                <section id="section-formation" class="legal-section mb-5">
+                    <h3 class="section-title">1. Electronic Contract Formation</h3>
+                    <p>
+                        By placing an order on this digital repository layout, you accept these Terms and Conditions in full. In accordance with Section 11 of the <strong>Electronic Communications and Transactions Act, No. 25 of 2002 (ECTA)</strong>, these terms are legally binding and enforceable from the second you submit an item request. An order request is only confirmed as a final contract of sale once funds are cleared and the physical inventory has been packed for transit by Lite Charms (Pty) Ltd.
+                    </p>
+                </section>
+
+                <section id="section-pricing" class="legal-section mb-5">
+                    <h3 class="section-title">2. Currency, Value Added Tax, & Inventory Realism</h3>
+                    <p>
+                        All book pricing listed on our site is formatted exclusively in <strong>South African Rand (ZAR)</strong>. While we endeavor to ensure immaculate catalog records, typographical pricing errors may occasionally manifest due to currency valuation updates. In such rare anomalies, we explicitly retain the legal prerogative to cancel any affected items prior to dispatch and refund your transaction balance.
+                    </p>
+                </section>
+
+                <section id="section-logistics" class="legal-section mb-5">
+                    <h3 class="section-title">3. Logistics Dispatch & Risk Pass-Through</h3>
+                    <p>
+                        Delivery fulfillment is handled via trusted independent third-party domestic courier providers. Ownership and operational risk concerning physical destruction, item degradation, or total package loss transit pass directly to the consumer at the immediate instant the shipment container leaves our local loading bay docks.
+                    </p>
+                </section>
+
+                <section id="section-cooling" class="legal-section mb-5">
+                    <h3 class="section-title">4. Statutory Returns & CPA Cooling-Off Windows</h3>
+                    <p>
+                        Pursuant to Section 44 of ECTA and the directives of the <strong>Consumer Protection Act, No. 68 of 2008 (CPA)</strong>, you maintain a statutory cooling-off window of <strong>seven (7) days</strong> following delivery receipt to cancel your transaction without justification, provided the items remain perfectly pristine, unread, and factory-sealed. Return logistics freight costs under a simple cooling-off exercise remain entirely the accountability of the purchaser.
+                    </p>
+                </section>
+
+                <section id="section-liability" class="legal-section mb-5 protective-shield-callout">
+                    <h3 class="section-title text-danger-serif">5. Complete Limitation of Liability Shield</h3>
+                    <p class="fw-bold">
+                        CRITICAL LEGAL CLAUSE — PLEASE READ CAREFULLY:
+                    </p>
+                    <p>
+                        To the maximum limit permitted by Section 61 of the Consumer Protection Act, Lite Charms (Pty) Ltd, its underlying software system developers, and structural directors maintain zero liability for any direct, collateral, accidental, or punitive damages resulting from server connectivity breaks, digital database interruptions, payment handoff errors, or systemic down-times. We offer our catalog system entirely on an "As-Is" and "As-Available" functional framework.
+                    </p>
+                </section>
+
+                <section id="section-jurisdiction" class="legal-section mb-5">
+                    <h3 class="section-title">6. Governing Law & Jurisdiction</h3>
+                    <p>
+                        This commercial agreement, catalog usage framework, and transaction architecture are subject strictly to the laws and legal structures of the <strong>Republic of South Africa</strong>. Any disputes arising directly out of these digital terms shall be filed and litigated exclusively under the jurisdiction of the High Court of South Africa.
+                    </p>
+                </section>
+
+            </article>
+        </div>
+    </div>
+</div>
+
+@code {
+    private async Task ScrollToSection(string elementId)
+    {
+        await JSRuntime.InvokeVoidAsync("eval", $@"
+            var el = document.getElementById('{elementId}');
+            if (el) {{
+                el.scrollIntoView({{ behavior: 'smooth', block: 'start' }});
+            }}
+        ");
+    }
+}
@@ -0,0 +1,86 @@
+/* ==========================================================================
+   Midrand Books — Fine Press Terms Layout Styles
+   ========================================================================== */
+
+.legal-page-container {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.legal-main-title {
+    font-size: 2.5rem;
+    letter-spacing: -0.03em;
+    color: #111111;
+    font-family: Georgia, 'Times New Roman', serif;
+}
+
+.tracking-wider {
+    letter-spacing: 0.12em;
+}
+
+/* --- Index Navigation Stack --- */
+.legal-nav-index {
+    position: sticky;
+    top: 2rem;
+    border-left: 1px solid rgba(0, 0, 0, 0.08);
+    padding-left: 1.25rem;
+}
+
+.index-btn {
+    color: #666666;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.2s ease, padding-left 0.2s ease;
+}
+
+    .index-btn:hover {
+        color: #111111;
+        padding-left: 4px;
+    }
+
+    .index-btn:focus {
+        outline: none;
+        color: #111111;
+        font-weight: 600;
+    }
+
+/* --- Content Typography Alignment --- */
+.legal-article-body {
+    line-height: 1.8;
+    color: #333333;
+    font-size: 1rem;
+}
+
+.section-title {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: 1.35rem;
+    color: #111111;
+    margin-bottom: 1.25rem;
+    font-weight: 500;
+    scroll-margin-top: 2rem; /* Clear alignment offset */
+}
+
+.text-danger-serif {
+    color: #A34843 !important;
+}
+
+.legal-section p {
+    margin-bottom: 1.2rem;
+}
+
+/* Stark Premium Callout Box for Limiting Liability Under South African Rules */
+.protective-shield-callout {
+    background-color: #FDFBFB;
+    border: 1px solid rgba(163, 72, 67, 0.15);
+    padding: 2rem;
+    border-radius: 8px;
+}
@@ -0,0 +1,33 @@
+@inject NavigationManager Navigation
+
+<div class="artistic-redirect-container">
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
+            <div class="col-12 col-md-5 d-flex flex-column align-items-center text-center">
+
+                <div class="artistic-svg-wrapper mb-4">
+                    <svg viewBox="0 0 400 400" width="280" height="280" stroke="#1A1A1A" stroke-width="2" fill="none">
+                        <path d="M60 300 L340 300" stroke-dasharray="4 4" />
+
+                        <path d="M120 300 L120 160 Q120 100 200 100 Q280 100 280 160 L280 300" />
+
+                        <path d="M170 170 L230 170 L220 230 L200 250 L180 230 Z" fill="#F8F8F8" />
+                        <circle cx="200" cy="195" r="8" fill="#1A1A1A" />
+                        <line x1="200" y1="203" x2="200" y2="218" stroke-width="3" />
+
+                        <circle class="animated-pulse-ring" cx="200" cy="180" r="60" stroke="#DDD" stroke-width="1" />
+                        <circle class="animated-pulse-ring-delayed" cx="200" cy="180" r="45" stroke="#EEE" stroke-width="1" />
+                    </svg>
+                </div>
+
+                <div class="editorial-spinner mb-4"></div>
+
+                <div class="meta-tag font-monospace text-uppercase text-muted mb-2">Secure Connection // Identity Node</div>
+                <h2 class="fw-bold text-dark mb-3 editorial-subheadline">Verifying Session</h2>
+                <p class="text-muted body-manifesto-text-center">
+                    Redirecting you safely to the identity gateway to authorize your access permissions...
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,12 @@
+namespace MidrandBookshop.Components;
+
+public partial class RedirectToLogin
+{
+    protected override void OnInitialized()
+    {
+        var relativePath = Navigation.ToBaseRelativePath(Navigation.Uri);
+        var sanitizedRedirectPath = relativePath.StartsWith('/') ? relativePath : $"/{relativePath}";
+
+        Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(sanitizedRedirectPath)}", forceLoad: true);
+    }
+}
@@ -0,0 +1,77 @@
+.artistic-redirect-container {
+    background-color: #ffffff;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    padding: 5rem 0;
+}
+
+.artistic-svg-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.editorial-subheadline {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.2rem;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+    color: #111111;
+}
+
+.body-manifesto-text-center {
+    font-size: 1rem;
+    max-width: 360px;
+    line-height: 1.6;
+}
+
+.meta-tag {
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+}
+
+/* Custom Minimalist Spinner Concept */
+.editorial-spinner {
+    width: 40px;
+    height: 40px;
+    border: 2px solid #F0F0F0;
+    border-top: 2px solid #1A1A1A; /* High contrast matching the SVG path line color */
+    border-radius: 50%;
+    animation: spin-editorial 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+/* Subtle background ring pulse paths */
+.animated-pulse-ring {
+    transform-origin: 200px 180px;
+    animation: gate-pulse 3s ease-in-out infinite;
+}
+
+.animated-pulse-ring-delayed {
+    transform-origin: 200px 180px;
+    animation: gate-pulse 3s ease-in-out infinite;
+    animation-delay: 1.5s;
+}
+
+@keyframes spin-editorial {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes gate-pulse {
+    0%, 100% {
+        transform: scale(0.95);
+        opacity: 0.4;
+    }
+
+    50% {
+        transform: scale(1.05);
+        opacity: 0.9;
+    }
+}
@@ -1,12 +1,20 @@
-@using MidrandBookshop.Components.Pages
-<Router AppAssembly="@typeof(Program).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <NotFound />
-        </LayoutView>
-    </NotFound>
-</Router>
+@using Microsoft.AspNetCore.Components.Authorization
+@using MidrandBookshop.Components.Pages
+
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(Program).Assembly">
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                <NotAuthorized>                    
+                    <RedirectToLogin />
+                </NotAuthorized>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+        <NotFound>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <NotFound />
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingAuthenticationState>
@@ -9,3 +9,4 @@
@using MidrandBookshop
@using MidrandBookshop.Components
@using MidrandBookshop.Components.Layout
+@using Microsoft.AspNetCore.Authorization;@using Microsoft.AspNetCore.Components.Authorization
@@ -0,0 +1,116 @@
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Customers.Models;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+
+namespace MidrandBookshop;
+
+public sealed class HydrationService(AuthenticationStateProvider authStateProvider, CustomerService customerService,
+    ProductService productService, OrderService orderService, BooksService booksService, AuthorService authorService, 
+    CartService cartService)
+{
+    private Cart ShoppingCart => cartService.ShoppingCart;
+
+    private AuthenticationState? AuthState { get; set; }
+    private ClaimsPrincipal? User { get; set; }
+
+    public bool CartHydrated { get; set; }
+
+    public async Task EnsureCustomerExistsAsync(CancellationToken cancellationToken = default)
+    {
+        if (ShoppingCart.CustomerId > 0) return;
+
+        AuthState = await authStateProvider.GetAuthenticationStateAsync();
+        User = AuthState!.User;
+
+        if (User?.Identity?.IsAuthenticated == false) return;
+
+        var email = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+        var existingCustomer = await customerService.GetCustomerAsync(email, cancellationToken);
+
+        if (existingCustomer.IsSuccess)
+            ShoppingCart.CustomerId = existingCustomer.Value.Id;
+
+        if (existingCustomer.IsFailed)
+        {
+            var name = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Name)?.Value ?? string.Empty;
+            var lastname = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Surname)?.Value ?? string.Empty;
+            var mobile = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.MobilePhone)?.Value ?? string.Empty;
+
+            var customerCreate = await customerService.CreateCustomerAsync(new CreateCustomer { Email = email }, cancellationToken);
+
+            if (customerCreate.IsSuccess && !string.IsNullOrWhiteSpace(name))
+            {
+                ShoppingCart.CustomerId = customerCreate.Value;
+
+                if (!string.IsNullOrWhiteSpace(name))
+                    await customerService.CreateCustomerContactAsync((long)ShoppingCart.CustomerId, new CreateCustomerContact
+                    {
+                        Email = email,
+                        Name = name,
+                        LastName = lastname,
+                        Phone = mobile,
+                        Type = LiteCharms.Features.ContactTypes.Personal
+                    }, cancellationToken);
+            }
+        }
+    }
+
+    public async Task RehydrateCartFromPendingOrderAsync(CancellationToken cancellationToken = default)
+    {
+        if (User?.Identity?.IsAuthenticated == false) return;
+
+        if (ShoppingCart.OrderId.HasValue && ShoppingCart.CustomerId.HasValue)
+        {
+            cartService.CalculateTotalPrice();
+            CartHydrated = true;
+
+            return;
+        }
+
+        var orderResult = await orderService.GetPendingOrderAsync((long)ShoppingCart.CustomerId!, cancellationToken);
+
+        if (orderResult.IsFailed) return;
+
+        if(orderResult.Value.Id == ShoppingCart.OrderId)
+        {
+            cartService.CalculateTotalPrice();
+            CartHydrated = true;
+
+            return;
+        }
+
+        var orderItemsResult = await orderService.GetOrderItemsAsync((long)orderResult.Value.Id!, cancellationToken);
+
+        ShoppingCart.OrderId = orderResult.Value.Id;
+
+        if(orderItemsResult.IsFailed) return;
+
+        foreach (var item in orderItemsResult.Value)
+        {
+            var priceFetchResult = await productService.GetProductPriceAsync(item.ProductPriceId, cancellationToken);
+
+            if (priceFetchResult.IsFailed) continue;
+
+            var bookFetchResult = await booksService.GetBookByProductIdAsync(priceFetchResult.Value.ProductId, cancellationToken);
+
+            if (bookFetchResult.IsFailed) continue;
+
+            var authorFetchResult = await authorService.GetAuthorAsync(bookFetchResult.Value.AuthorId, cancellationToken);
+
+            if (authorFetchResult.IsFailed) continue;
+            
+            if(!ShoppingCart.Items.Any(i => i.Price!.Id == item.ProductPriceId))
+                cartService.AddItem(priceFetchResult.Value, bookFetchResult.Value.Product!, authorFetchResult.Value);
+        }
+
+        CartHydrated = true;
+
+        await cartService.SaveCartToStorageAsync();
+    }
+}
@@ -18,13 +18,13 @@
  </ItemGroup>

  <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.51.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.137.0" />
  </ItemGroup>

  <!-- UI -->
  <ItemGroup>
    <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
-    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.51.0" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.137.0" />
    
    <!-- Global Usings -->
    <Using Include="Blazored.Toast.Services" />
@@ -51,6 +51,18 @@
  <!-- Shared Global Usings -->
  <ItemGroup>
    <Using Include="Blazored.Toast" />
+    <Using Include="Microsoft.JSInterop" />
+    <Using Include="System.Globalization" />
+    <Using Include="System.Security.Claims" />
+    <Using Include="Microsoft.Extensions.Options" />
+    <Using Include="Microsoft.EntityFrameworkCore" />
+    <Using Include="Microsoft.AspNetCore.HttpOverrides" />
+    <Using Include="Microsoft.AspNetCore.Components.Authorization" />
+    <Using Include="Microsoft.AspNetCore.Components.Routing" />
+    <Using Include="Microsoft.AspNetCore.Components.Web" />
+    <Using Include="Microsoft.AspNetCore.WebUtilities" />
+    <Using Include="Microsoft.AspNetCore.Components" />
+    <Using Include="System.Security.Cryptography.X509Certificates" />
  </ItemGroup>

 </Project>
@@ -1,59 +1,51 @@
 using LiteCharms.Features.Extensions;
-using LiteCharms.Features.Mediator;
-using LiteCharms.Features.MidrandBooks.Extensions;
+using LiteCharms.Features.Postgres;
+using MidrandBookshop;
 using MidrandBookshop.Components;
 using static LiteCharms.Features.Extensions.Quartz;

 var builder = WebApplication.CreateBuilder(args);

-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-
 builder.AddMonitoring();
-builder.Services.AddEndpointsApiExplorer();
-
-builder.Services.AddMediator();
-
-builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
-builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
-
-builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
-
-builder.Services.AddEmailServices(builder.Configuration);
-builder.Services.AddEmailServiceBus();
-
-builder.Services.AddShopServices();
-builder.Services.AddMidrandShopDatabase(builder.Configuration);
-
-builder.Services.AddMidrandShopPostgresHealthCheck();
-builder.Services.AddMidrandShopQuartzHealthCheck();
-builder.Services.AddHealthChecksSupport(builder.Configuration);
+builder.Services.RegisterServices(builder.Configuration);

 var app = builder.Build();

-var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
-var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
-
-if (!scheduler!.IsStarted)
-    await scheduler.Start();
-
 if (!app.Environment.IsDevelopment())
 {
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
 }

+app.UseForwardedHeaders();
+app.UseHttpsRedirection();
+
+app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 app.UseHealthChecks("/health", new HealthCheckOptions
 {
    ResponseWriter = HealthChecks.UI.Client.UIResponseWriter.WriteHealthCheckUIResponse
 });

-app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
-app.UseHttpsRedirection();
-
-app.UseAntiforgery();
-
 app.MapStaticAssets();
+app.UseCookiePolicy();
+
+app.UseAuthentication();
+app.UseAuthorization();
+app.UseAntiforgery();
+app.AddSecurityEndpoints();
+
+using (var security = app.Services.CreateScope())
+{
+    var dataProtectionContext = security.ServiceProvider.GetRequiredService<DataProtectionDbContext>();
+
+    await dataProtectionContext.Database.MigrateAsync();
+}
+
+var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
+var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
+
+if (!scheduler!.IsStarted) await scheduler.Start();
+
 app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

@@ -13,8 +13,8 @@
      "https": {
        "commandName": "Project",
        "dotnetRunMessages": true,
-        "launchBrowser": true,
-        "applicationUrl": "https://localhost:7021;http://localhost:5053",
+        "launchBrowser": false,
+        "applicationUrl": "https://localhost:8443;http://localhost:8080",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
@@ -0,0 +1,62 @@
+using LiteCharms.Features.Mediator;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.Extensions;
+using LiteCharms.Features.MidrandBooks.Extensions;
+using static LiteCharms.Features.Extensions.Quartz;
+
+namespace MidrandBookshop;
+
+public static class Setup
+{
+    public static IServiceCollection RegisterServices(this IServiceCollection services, IConfiguration configuration)
+    {
+        services.AddCancellationToken();
+        services.AddAntiforgery();
+
+        services.AddRazorComponents()
+            .AddInteractiveServerComponents();
+
+        services.AddBlazoredToast();
+        
+        services.AddEndpointsApiExplorer();
+
+        services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
+        services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
+
+        services.AddQuartzSchedulerClient(MidrandShopSchedulerName, configuration);
+
+        services.AddMediator();
+        services.AddEmailServices(configuration);
+        services.AddEmailServiceBus();
+
+        services.AddHttpClient();
+        services.AddScoped<CartService>();
+        services.AddScoped<HydrationService>();
+        services.AddShopServices(includeLocalStorage: true);
+        services.AddHashServices(configuration);
+        services.AddPayfastServices(configuration);
+
+        services.AddDataProtectionDatabase(configuration);
+        services.AddMidrandShopDatabase(configuration);
+
+        services.AddSecurityApiSdk(configuration);
+        services.AddLiteCharmsWebSecurity(configuration);
+
+        services.AddMidrandShopPostgresHealthCheck();
+        services.AddMidrandShopQuartzHealthCheck();
+        services.AddHealthChecksSupport(configuration);
+
+        services.Configure<ForwardedHeadersOptions>(options =>
+        {
+            options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
+
+            options.KnownProxies.Clear();
+            options.KnownIPNetworks.Clear();
+
+            options.ForwardLimit = null;
+            options.RequireHeaderSymmetry = false;
+        });
+
+        return services;
+    }
+}
@@ -1,4 +1,25 @@
 {
+  "PayfastSettings": {
+    "CheckoutUrl": "https://sandbox.payfast.co.za/eng/process",
+    "ValidHosts": [
+      "www.payfast.co.za",
+      "sandbox.payfast.co.za",
+      "ips.payfast.co.za",
+      "api.payfast.co.za",
+      "payment.payfast.io"
+    ]
+  },
+  "LiteCharmsSettings": {
+    "Authority": "https://sts.security.khongisa.co.za"
+  },
+  "LiteCharmsClientSettings": {
+    "Authority": "https://sts.security.khongisa.co.za",
+    "GrantType": "client_credentials",
+    "Scope": "midrandbooks-api"
+  },
+  "HasherSettings": {
+    "MinHashLength": 11
+  },
  "BookshopS3Settings": {
    "ServiceUrl": "http://192.168.1.177:30900",
    "Region": "garage",
@@ -112,3 +112,113 @@ h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
 [tabindex="-1"]:focus {
    outline: none !important;
 }
+
+/* ==========================================================================
+   Global Toast Notification Framework Extensions
+   ========================================================================== */
+
+.blazored-toast-container {
+    position: fixed;
+    /* 🛠️ Shift anchors from top-right to bottom-left */
+    bottom: 24px;
+    left: 24px;
+    top: auto;
+    right: auto;
+    z-index: 2000 !important;
+    display: flex;
+    flex-direction: column-reverse; /* 💡 Newest toasts will now stack cleanly on top of old ones */
+    gap: 12px;
+    max-width: 400px;
+    width: 100%;
+    pointer-events: none;
+}
+
+.blazored-toast {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    border-radius: var(--mb-radius);
+    background-color: var(--mb-card-bg);
+    color: var(--mb-text-dark);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    font-weight: 500;
+    animation: toastFadeIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.125) forwards;
+}
+
+/* Success Toast Core Variants */
+.blazored-toast-success {
+    border-left: 4px solid var(--mb-text-dark);
+}
+
+/* Error Toast Core Variants */
+.blazored-toast-error {
+    border-left: 4px solid var(--mb-accent-red);
+    color: var(--mb-accent-red);
+}
+
+.blazored-toast-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    flex-shrink: 0;
+}
+
+/* Entry Transition Keyframes */
+@keyframes toastFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-12px) scale(0.96);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.book-shadow {
+    filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.15)) drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.sm-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+}
+
+/* 🛠️ Micro-interactions for the header icon placement */
+.btn-cart-icon:hover {
+    transform: scale(1.08);
+    background-color: var(--mb-text-dark) !important;
+}
+
+    .btn-cart-icon:hover svg {
+        stroke: #FFFFFF !important;
+    }
+
+@keyframes toastFadeIn {
+    from {
+        opacity: 0;
+        transform: translateX(-24px) scale(0.95); /* Slide rightward into view */
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+.blazored-toast button.blazored-toast-close,
+.blazored-toast-close-icon {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
@@ -1,4 +1,3 @@
---
 apiVersion: v1
 kind: Namespace
 metadata:
@@ -10,21 +9,26 @@ metadata:
  name: midrandbooks-config
  namespace: midrandbooks-uat
 data:
-  ASPNETCORE_ENVIRONMENT: "Development"
-  ASPNETCORE_URLS: "http://0.0.0.0:8080"
+  ASPNETCORE_ENVIRONMENT: "Development"  
+  ASPNETCORE_URLS: "http://0.0.0.0:8443"
  Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
  Monitoring__ServiceName: "MidrandBooks.Uat"
---
-apiVersion: v1
-kind: Secret
-metadata:
-  name: midrandbooks-secrets
-  namespace: midrandbooks-uat
-type: Opaque
-data:  
-  connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
-  connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
-  aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
+  HasherSettings__MinHashLength: "11"
+  BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
+  BookshopS3Settings__Region: "garage"
+  BookshopS3Settings__BucketName: "bookshop"
+  BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
+  PayfastSettings__CheckoutUrl: "https://sandbox.payfast.co.za/eng/process"
+  PayfastSettings__ValidHosts__0: "www.payfast.co.za"
+  PayfastSettings__ValidHosts__1: "sandbox.payfast.co.za"
+  PayfastSettings__ValidHosts__2: "ips.payfast.co.za"
+  PayfastSettings__ValidHosts__3: "api.payfast.co.za"
+  PayfastSettings__ValidHosts__4: "payment.payfast.io"
+  LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
+  LiteCharmsSettings__Audience: "midrandbooks-api"
+  LiteCharmsClientSettings__Authority: "https://sts.security.khongisa.co.za"
+  LiteCharmsClientSettings__GrantType: "client_credentials"
+  LiteCharmsClientSettings__Scope: "midrandbooks-api"
 ---
 apiVersion: v1
 kind: PersistentVolumeClaim
@@ -45,6 +49,7 @@ metadata:
  namespace: midrandbooks-uat
 spec:
  replicas: 2
+  revisionHistoryLimit: 0
  selector:
    matchLabels:
      app: midrandbooks
@@ -72,56 +77,60 @@ spec:
              memory: "256Mi"
              cpu: "100m"
          ports:
-            - containerPort: 8080
+            - containerPort: 8443
          envFrom:
            - configMapRef:
                name: midrandbooks-config
+            - secretRef:
+                name: midrandbooks-secrets          
          env:
-            - name: ConnectionStrings__PostgresScheduler
+            - name: DataProtection__Certificate
              valueFrom:
                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: connection-string-quartz
-            - name: ConnectionStrings__PostgresMidrandBooks
+                  name: litecharms-certs
+                  key: litecharms.pfx
+            - name: DataProtection__Password
              valueFrom:
                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: connection-string            
-            - name: Monitoring__Address
-              valueFrom:
-                configMapKeyRef:
-                  name: midrandbooks-config
-                  key: Monitoring__Address
-            - name: Monitoring__ServiceName
-              valueFrom:
-                configMapKeyRef:
-                  name: midrandbooks-config
-                  key: Monitoring__ServiceName
-            - name: Monitoring__ApiKey
-              valueFrom:
-                secretKeyRef:
-                  name: midrandbooks-secrets
-                  key: aspire-apikey
+                  name: litecharms-certs
+                  key: passphrase
          volumeMounts:
+            - name: cluster-certs-volume
+              mountPath: /tmp/litecharms-raw-certs
+              readOnly: true
            - name: data
-              mountPath: /app/wwwroot/content
-              resources:          
+              mountPath: /app/content
+              subPath: bookshop-content
+          lifecycle:
+            postStart:
+              exec:
+                command:
+                  - /bin/sh
+                  - -c
+                  - |
+                    cp /tmp/litecharms-raw-certs/litecharms.crt /usr/local/share/ca-certificates/litecharms.crt
+                    update-ca-certificates
          livenessProbe:
            httpGet:
              path: /health
-              port: 8080
+              port: 8443
+              scheme: HTTP
            initialDelaySeconds: 5
            periodSeconds: 10
          readinessProbe:
            httpGet:
              path: /health
-              port: 8080
+              port: 8443
+              scheme: HTTP
            initialDelaySeconds: 3
            periodSeconds: 5
      volumes:
        - name: data
          persistentVolumeClaim:
            claimName: midrandbooks-pvc
+        - name: cluster-certs-volume
+          secret:
+            secretName: litecharms-certs
 ---
 apiVersion: v1
 kind: Service
@@ -129,14 +138,12 @@ metadata:
  name: midrandbooks-service
  namespace: midrandbooks-uat
 spec:
-  type: ClusterIP
+  ports:
+    - name: https
+      port: 443
+      targetPort: 8443
  selector:
    app: midrandbooks
-  ports:
-    - name: http
-      protocol: TCP
-      port: 80
-      targetPort: 8080
 ---
 apiVersion: traefik.io/v1alpha1
 kind: IngressRoute
@@ -151,10 +158,11 @@ spec:
      kind: Rule
      services:
        - name: midrandbooks-service
-          port: 80
+          port: 443
          sticky:
            cookie:
              name: "lp-sticky-session"
              httpOnly: true
              secure: true
+          scheme: http
  tls: {}
Author	SHA1	Message	Date
Khwezi Mngoma	1efe1ff21e	Implemented order history continuous-integration/drone/pr Build is passing Details	2026-06-17 22:45:40 +02:00
Khwezi Mngoma	8d2efbeb4a	Added legal pages, contact and abut us continuous-integration/drone/pr Build is passing Details Redesigned account, checkout Added stock management design elements	2026-06-16 23:32:44 +02:00
Khwezi Mngoma	5d614d2a94	Checkout page clean up continuous-integration/drone/pr Build is passing Details	2026-06-16 21:12:12 +02:00
Khwezi Mngoma	554741c2e5	Added user feedback toaster messages continuous-integration/drone/pr Build is passing Details	2026-06-16 14:49:03 +02:00
Khwezi Mngoma	02294d36e8	Implemented AddToCart functionality on home page	2026-06-16 14:37:44 +02:00
Khwezi Mngoma	31423ea48d	Solved double entry issue on order confirmation continuous-integration/drone/pr Build is passing Details	2026-06-16 13:47:03 +02:00
Khwezi Mngoma	6ca781759f	Stable payment and order process	2026-06-16 13:39:40 +02:00
Khwezi Mngoma	cb03b91c6c	Docker image cache test continuous-integration/drone/pr Build is passing Details	2026-06-16 10:58:03 +02:00
Khwezi Mngoma	b0ea5ea098	Specified buildkit inline caching continuous-integration/drone/pr Build is passing Details	2026-06-16 10:44:27 +02:00
Khwezi Mngoma	32eeb24558	Added caching to docker build stage continuous-integration/drone/pr Build is passing Details	2026-06-16 10:32:25 +02:00
Khwezi Mngoma	bead8314da	ensured that untranslatable claims do not crash signalr continuous-integration/drone/pr Build is passing Details	2026-06-16 00:14:45 +02:00
Khwezi Mngoma	5c3ceeeb83	Added automati revision history pruning continuous-integration/drone/pr Build is passing Details	2026-06-15 23:27:23 +02:00
Khwezi Mngoma	fcc0b3845e	Removed https failsafe continuous-integration/drone/pr Build is passing Details	2026-06-15 22:53:55 +02:00
Khwezi Mngoma	a23292f02a	Removed secrets from manifest since they are hosted in the cluster continuous-integration/drone/pr Build is passing Details	2026-06-15 22:39:41 +02:00
Khwezi Mngoma	4954ead02d	Added https failsafe continuous-integration/drone/pr Build is passing Details	2026-06-15 17:22:20 +02:00
Khwezi Mngoma	79eebea7b1	Removed UseHttpsRedirection continuous-integration/drone/pr Build is passing Details	2026-06-15 17:11:48 +02:00
Khwezi Mngoma	7199a6651b	Implemented cart hydration and refactored paynow flow continuous-integration/drone/pr Build is passing Details	2026-06-15 16:42:09 +02:00
Khwezi Mngoma	11e0176e40	Enabled sticky sessions continuous-integration/drone/pr Build is passing Details	2026-06-15 00:45:25 +02:00
Khwezi Mngoma	160c23ab8b	Removed failsafe	2026-06-15 00:36:46 +02:00
Khwezi Mngoma	2b1d862d3b	Added proto handling fail safe	2026-06-15 00:31:51 +02:00
Khwezi Mngoma	c6fc228c66	Refactored fowarded header config in app continuous-integration/drone/pr Build is passing Details	2026-06-15 00:26:06 +02:00
Khwezi Mngoma	dc3dd4a40b	Removed invalid manifest field continuous-integration/drone/pr Build is passing Details	2026-06-15 00:05:22 +02:00
Khwezi Mngoma	1bb1b0d476	Refactored manifest continuous-integration/drone/pr Build is failing Details	2026-06-14 23:57:06 +02:00
Khwezi Mngoma	0bb5da3513	Updates app pipelining and cleaned up service registration continuous-integration/drone/pr Build is passing Details	2026-06-14 23:40:47 +02:00
Khwezi Mngoma	c3e6f9801b	Updated multi pod handling of sticky sessions continuous-integration/drone/pr Build is passing Details	2026-06-14 23:14:41 +02:00
Khwezi Mngoma	d323bd866c	Updated handling of fowarded header and fixed base64 encoding of certificate continuous-integration/drone/pr Build is passing Details	2026-06-14 22:56:23 +02:00
Khwezi Mngoma	a6a41eaeac	Moved kerstel definition to the service defitniton section continuous-integration/drone/pr Build is failing Details	2026-06-14 18:01:42 +02:00
Khwezi Mngoma	17a74ca750	Refactore the entire k8s manifest for pure https routing continuous-integration/drone/pr Build is failing Details	2026-06-14 17:48:39 +02:00
Khwezi Mngoma	53b3018d9e	Update cookie policies continuous-integration/drone/pr Build is passing Details	2026-06-14 13:15:30 +02:00
Khwezi Mngoma	8002920a07	Updated cookie policies continuous-integration/drone/pr Build is passing Details	2026-06-14 12:56:09 +02:00
Khwezi Mngoma	285cb29867	Reordered service registration continuous-integration/drone/pr Build is passing Details	2026-06-14 12:42:22 +02:00
Khwezi Mngoma	596ab396a4	Refactored starup pipeline continuous-integration/drone/pr Build is passing Details	2026-06-14 12:23:23 +02:00
Khwezi Mngoma	9cbde6e622	Encapsulated the cert string in a base 64 string continuous-integration/drone/pr Build is passing Details	2026-06-14 12:05:21 +02:00
Khwezi Mngoma	8ddf769fab	Refactored manifest continuous-integration/drone/pr Build is passing Details	2026-06-14 11:49:08 +02:00
Khwezi Mngoma	44741d2162	Added data protection keys and cert encryption to them continuous-integration/drone/pr Build is passing Details	2026-06-14 11:33:04 +02:00
Khwezi Mngoma	5204816370	Added data protection key persistance continuous-integration/drone/pr Build is passing Details	2026-06-13 23:51:21 +02:00
Khwezi Mngoma	ec4c9d9689	Fixed login and logout redirect issue continuous-integration/drone/pr Build is passing Details	2026-06-13 23:20:02 +02:00
Khwezi Mngoma	ff826f0b73	Moved RedirectToLogin code to code behind	2026-06-13 22:14:21 +02:00
Khwezi Mngoma	6d76442dcf	Reordered solution	2026-06-13 21:54:15 +02:00
Khwezi Mngoma	5ffe9793e8	Stable payfast interaction	2026-06-13 21:50:29 +02:00
Khwezi Mngoma	0765e63d8a	Using shared service for Cart management continuous-integration/drone/pr Build is passing Details	2026-06-12 08:54:53 +02:00
Khwezi Mngoma	234fb0f2f3	Stable checkout page continuous-integration/drone/pr Build is passing Details	2026-06-11 14:24:42 +02:00
Khwezi Mngoma	e7acb05027	Completed Cart page design continuous-integration/drone/pr Build is passing Details	2026-06-11 00:23:57 +02:00
Khwezi Mngoma	64e0fcba27	Wired up CartDrawel and ProductView to cart service and local storage continuous-integration/drone/pr Build is passing Details	2026-06-10 23:01:21 +02:00
Khwezi Mngoma	3bce80c963	Implemented cart service with state tracker and linked to main layout continuous-integration/drone/pr Build is passing Details	2026-06-09 23:39:49 +02:00
Khwezi Mngoma	d3e9b30be5	Updated nuget packaged to includ the CartService	2026-06-09 20:51:56 +02:00
Khwezi Mngoma	a3bc2bc3f9	Fixed manifest secret name continuous-integration/drone/pr Build is passing Details	2026-06-07 16:51:07 +02:00
Khwezi Mngoma	a66a84af75	Stable user session management continuous-integration/drone/pr Build is passing Details	2026-06-07 15:41:54 +02:00
Khwezi Mngoma	895d99a2e5	Updated packages continuous-integration/drone/pr Build is passing Details	2026-06-05 09:24:45 +02:00
Khwezi Mngoma	de714d2271	Build trigger continuous-integration/drone/pr Build is passing Details	2026-06-05 09:07:50 +02:00
Khwezi Mngoma	64b46865cf	Removd proto handling from login process	2026-06-05 08:59:00 +02:00
Khwezi Mngoma	db74ffbebe	Simplified logn and logout process continuous-integration/drone/pr Build is passing Details	2026-06-05 08:21:50 +02:00
Khwezi Mngoma	8f68d8c60e	Added port stripping continuous-integration/drone/pr Build is passing Details	2026-06-05 07:39:58 +02:00
Khwezi Mngoma	58dc67e680	Refactored https logni proto handling continuous-integration/drone/pr Build is passing Details	2026-06-05 06:43:36 +02:00
Khwezi Mngoma	5123a4d3ac	Added support for forwarded headers continuous-integration/drone/pr Build is passing Details	2026-06-05 06:29:55 +02:00
Khwezi Mngoma	ae51a3a864	Fixed secrets mappings continuous-integration/drone/pr Build is passing Details	2026-06-05 06:16:42 +02:00
Khwezi Mngoma	31a640d672	Stable security continuous-integration/drone/pr Build is passing Details	2026-06-05 05:58:05 +02:00
Khwezi Mngoma	097ecd6421	Configured security	2026-06-04 14:45:33 +02:00
Khwezi Mngoma	9b3e889d89	Upgraded quartz continuous-integration/drone/pr Build is passing Details	2026-06-03 11:53:31 +02:00
Khwezi Mngoma	e35a68f7e8	Updated backend continuous-integration/drone/pr Build is passing Details	2026-06-02 00:30:47 +02:00
Khwezi Mngoma	b70ecab9ea	Fixed event service discovery issue continuous-integration/drone/pr Build is passing Details	2026-06-01 23:39:05 +02:00
Khwezi Mngoma	209947d70f	Updated backend continuous-integration/drone/pr Build is passing Details	2026-06-01 22:58:10 +02:00
Khwezi Mngoma	edb9c281ef	Ensured appsettings aligns with k8s config continuous-integration/drone/pr Build is passing Details	2026-06-01 11:57:44 +02:00
Khwezi Mngoma	b189b26b62	Refactored app k8s manifest continuous-integration/drone/pr Build is passing Details	2026-06-01 11:15:54 +02:00
Khwezi Mngoma	52e3ab16bf	Refactored manifest to include s3 bucket and HasherService configs and secrets continuous-integration/drone/pr Build is failing Details Upgraded nuget packages to bring in new Payment and Product service functionality	2026-06-01 09:50:14 +02:00
Khwezi Mngoma	26cd12532c	Authors now showing on the listing continuous-integration/drone/pr Build is passing Details Back to the top works	2026-05-30 22:19:35 +02:00
Khwezi Mngoma	01a0264452	Working search continuous-integration/drone/pr Build is passing Details	2026-05-30 21:00:13 +02:00
Khwezi Mngoma	af02cbc649	Working filter	2026-05-30 19:48:06 +02:00
Khwezi Mngoma	7a1a7566d6	Stable running home page with product view continuous-integration/drone/pr Build is passing Details	2026-05-30 19:06:14 +02:00
Khwezi Mngoma	f2ff7e3647	Added category support in backend	2026-05-30 16:12:47 +02:00
Khwezi Mngoma	e5358160dd	Updated nuget packages	2026-05-30 15:42:16 +02:00
Khwezi Mngoma	07749bd68c	Moved Home page code to code-behind	2026-05-30 10:17:47 +02:00