CSS modularization Phase 2: account, cart, checkout

Extract account/cart/checkout styles into dedicated CSS files; remove inline styles and orphaned style blocks from HTML. Wire $extraHead on all account pages, cart.php, and checkout.php.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

account/includes/sidebar.php

@@ -6,115 +6,19 @@
 $customer = CustomerAuth::getFullUser();
 ?>
 
-<style>
-.account-layout {
-    display: grid;
-    grid-template-columns: 250px 1fr;
-    gap: 2rem;
-}
-
-.account-sidebar {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    height: fit-content;
-    position: sticky;
-    top: 90px;
-}
-
-.account-nav {
-    list-style: none;
-}
-
-.account-nav li {
-    margin-bottom: 0.5rem;
-}
-
-.account-nav a {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    border-radius: var(--radius-md);
-    color: var(--color-text);
-    transition: all 0.2s;
-}
-
-.account-nav a:hover {
-    background: var(--color-background);
-    color: var(--color-primary);
-}
-
-.account-nav a.active {
-    background: var(--color-primary);
-    color: white;
-}
-
-.account-nav a i {
-    width: 20px;
-    text-align: center;
-}
-
-.account-content {
-    min-height: 500px;
-}
-
-.account-header {
-    margin-bottom: 2rem;
-}
-
-.account-header h1 {
-    font-size: 1.75rem;
-    margin-bottom: 0.5rem;
-}
-
-.section-card {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    margin-bottom: 1.5rem;
-}
-
-.section-card-header {
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.section-card-header h3 {
-    margin: 0;
-    font-size: 1rem;
-}
-
-.section-card-body {
-    padding: 1.5rem;
-}
-
-@media (max-width: 768px) {
-    .account-layout {
-        grid-template-columns: 1fr;
-    }
-    
-    .account-sidebar {
-        position: static;
-    }
-}
-</style>
-
 <section class="section" style="padding-top: 2rem;">
     <div class="container">
         <div class="account-layout">
             <!-- Sidebar -->
             <aside class="account-sidebar">
-                <div style="text-align: center; margin-bottom: 1.5rem;">
-                    <div style="width: 80px; height: 80px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem;">
+                <div class="account-sidebar-user">
+                    <div class="account-avatar">
                         <?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
                     </div>
-                    <h3 style="margin: 0 0 0.25rem; font-size: 1rem;"><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
-                    <p class="text-muted" style="font-size: 0.875rem; margin: 0;"><?= htmlspecialchars($customer['email']) ?></p>
+                    <h3><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
+                    <p><?= htmlspecialchars($customer['email']) ?></p>
                 </div>
-                
+
                 <ul class="account-nav">
                     <li><a href="/account/" class="<?= ($currentPage ?? '') === 'dashboard' ? 'active' : '' ?>"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
                     <li><a href="/account/orders.php" class="<?= ($currentPage ?? '') === 'orders' ? 'active' : '' ?>"><i class="fas fa-shopping-bag"></i> My Orders</a></li>
@@ -124,9 +28,9 @@ $customer = CustomerAuth::getFullUser();
                     <li><a href="/account/addresses.php" class="<?= ($currentPage ?? '') === 'addresses' ? 'active' : '' ?>"><i class="fas fa-map-marker-alt"></i> Addresses</a></li>
                     <li><a href="/account/profile.php" class="<?= ($currentPage ?? '') === 'profile' ? 'active' : '' ?>"><i class="fas fa-user"></i> Profile</a></li>
                     <li><a href="/account/reviews.php" class="<?= ($currentPage ?? '') === 'reviews' ? 'active' : '' ?>"><i class="fas fa-star"></i> My Reviews</a></li>
-                    <li><a href="/logout.php" style="color: var(--color-error);"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
+                    <li><a href="/logout.php" class="danger"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
                 </ul>
             </aside>
-            
+
             <!-- Main Content -->
             <div class="account-content">