From 5637b6d7f530d1682ef4c2890ebf32b175c10982 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@outlook.com>
Date: Mon, 15 Jun 2026 17:51:57 +0000
Subject: [PATCH] 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/addresses.php        |   1 +
 account/includes/sidebar.php | 110 ++---------------
 account/index.php            | 192 ++----------------------------
 account/order.php            |   1 +
 account/orders.php           |   1 +
 account/profile.php          |   1 +
 account/reviews.php          |   1 +
 account/wallet.php           |   1 +
 account/wishlist.php         |   1 +
 assets/css/account.css       | 223 +++++++++++++++++++++++++++++++++++
 assets/css/cart.css          | 154 ++++++++++++++++++++++++
 assets/css/checkout.css      | 103 ++++++++++++++++
 cart.php                     |  63 +++++-----
 checkout.php                 |  49 ++++----
 14 files changed, 556 insertions(+), 345 deletions(-)
 create mode 100644 assets/css/account.css
 create mode 100644 assets/css/cart.css
 create mode 100644 assets/css/checkout.css

diff --git a/account/addresses.php b/account/addresses.php
index dd568f5..e0aeda3 100644
--- a/account/addresses.php
+++ b/account/addresses.php
@@ -92,6 +92,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     }
 }
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 ?>
diff --git a/account/includes/sidebar.php b/account/includes/sidebar.php
index 2f6bd28..58cc711 100644
--- a/account/includes/sidebar.php
+++ b/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">
diff --git a/account/index.php b/account/index.php
index 2c676b0..95d0c20 100644
--- a/account/index.php
+++ b/account/index.php
@@ -33,188 +33,10 @@ $walletTransactions = db()->fetchAll(
     ['id' => $customer['customer_id']]
 );
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v=' . filemtime(__DIR__ . '/../assets/css/account.css') . '">';
 require_once __DIR__ . '/../includes/header.php';
 ?>
 
-<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;
-}
-
-.dashboard-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
-.dashboard-stat {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    text-align: center;
-}
-
-.dashboard-stat-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 1rem;
-    font-size: 1.25rem;
-}
-
-.dashboard-stat-icon.primary {
-    background: rgba(255, 94, 26, 0.1);
-    color: var(--color-primary);
-}
-
-.dashboard-stat-icon.success {
-    background: rgba(16, 185, 129, 0.1);
-    color: var(--color-success);
-}
-
-.dashboard-stat-icon.warning {
-    background: rgba(245, 158, 11, 0.1);
-    color: var(--color-warning);
-}
-
-.dashboard-stat-value {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 0.25rem;
-}
-
-.dashboard-stat-label {
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-}
-
-.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;
-}
-
-.order-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-    border-bottom: 1px solid var(--color-border);
-}
-
-.order-item:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-}
-
-.order-item:first-child {
-    padding-top: 0;
-}
-
-.order-info h4 {
-    margin: 0 0 0.25rem;
-    font-size: 0.9375rem;
-}
-
-.order-info p {
-    margin: 0;
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
-}
-
-@media (max-width: 768px) {
-    .account-layout {
-        grid-template-columns: 1fr;
-    }
-    
-    .account-sidebar {
-        position: static;
-    }
-    
-    .dashboard-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-</style>
-
 <section class="section" style="padding-top: 2rem;">
     <div class="container">
         <?php if (hasFlash('success')): ?>
@@ -226,14 +48,14 @@ require_once __DIR__ . '/../includes/header.php';
         <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="active"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
                     <li><a href="/account/orders.php"><i class="fas fa-shopping-bag"></i> My Orders</a></li>
@@ -242,7 +64,7 @@ require_once __DIR__ . '/../includes/header.php';
                     <li><a href="/account/addresses.php"><i class="fas fa-map-marker-alt"></i> Addresses</a></li>
                     <li><a href="/account/profile.php"><i class="fas fa-user"></i> Profile</a></li>
                     <li><a href="/account/reviews.php"><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>
             
diff --git a/account/order.php b/account/order.php
index f7850c2..f0874c4 100644
--- a/account/order.php
+++ b/account/order.php
@@ -25,6 +25,7 @@ if (!$order) {
 $items = json_decode($order['items'], true);
 $shippingAddress = json_decode($order['shipping_address'] ?? '{}', true);
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 
diff --git a/account/orders.php b/account/orders.php
index 4e3422e..bb6d2ff 100644
--- a/account/orders.php
+++ b/account/orders.php
@@ -31,6 +31,7 @@ $orders = db()->fetchAll(
     array_merge($params, ['limit' => $pagination['per_page'], 'offset' => $pagination['offset']])
 );
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 ?>
diff --git a/account/profile.php b/account/profile.php
index b171b3c..60b917b 100644
--- a/account/profile.php
+++ b/account/profile.php
@@ -86,6 +86,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
 $preferences = json_decode($customer['preferences'] ?? '{}', true);
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 ?>
diff --git a/account/reviews.php b/account/reviews.php
index 209af5a..e88692a 100644
--- a/account/reviews.php
+++ b/account/reviews.php
@@ -45,6 +45,7 @@ $eligibleProducts = db()->fetchAll(
     ['cid' => $customer['customer_id'], 'cid2' => $customer['customer_id']]
 );
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 ?>
diff --git a/account/wallet.php b/account/wallet.php
index f54a726..e4ab714 100644
--- a/account/wallet.php
+++ b/account/wallet.php
@@ -22,6 +22,7 @@ $transactions = db()->fetchAll(
     ['id' => $customer['customer_id'], 'limit' => $pagination['per_page'], 'offset' => $pagination['offset']]
 );
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 ?>
diff --git a/account/wishlist.php b/account/wishlist.php
index fd90b0a..6ead900 100644
--- a/account/wishlist.php
+++ b/account/wishlist.php
@@ -32,6 +32,7 @@ $wishlistItems = db()->fetchAll(
     ['id' => $customer['customer_id']]
 );
 
+$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
 require_once __DIR__ . '/../includes/header.php';
 require_once __DIR__ . '/includes/sidebar.php';
 ?>
diff --git a/assets/css/account.css b/assets/css/account.css
new file mode 100644
index 0000000..1291293
--- /dev/null
+++ b/assets/css/account.css
@@ -0,0 +1,223 @@
+/* Account Layout */
+.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-avatar {
+    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;
+}
+
+.account-sidebar-user {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.account-sidebar-user h3 {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+}
+
+.account-sidebar-user p {
+    font-size: 0.875rem;
+    margin: 0;
+    color: var(--color-text-muted);
+}
+
+.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-nav a.danger {
+    color: var(--color-error);
+}
+
+.account-content {
+    min-height: 500px;
+}
+
+.account-header {
+    margin-bottom: 2rem;
+}
+
+.account-header h1 {
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+}
+
+/* Section Cards */
+.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;
+}
+
+/* Order List Items */
+.order-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.order-item:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.order-item:first-child {
+    padding-top: 0;
+}
+
+.order-info h4 {
+    margin: 0 0 0.25rem;
+    font-size: 0.9375rem;
+}
+
+.order-info p {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+}
+
+.order-meta {
+    text-align: right;
+}
+
+.order-meta .amount {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+/* Dashboard Stats Grid */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.dashboard-stat {
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.dashboard-stat-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1rem;
+    font-size: 1.25rem;
+}
+
+.dashboard-stat-icon.primary {
+    background: rgba(255, 94, 26, 0.1);
+    color: var(--color-primary);
+}
+
+.dashboard-stat-icon.success {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--color-success);
+}
+
+.dashboard-stat-icon.warning {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--color-warning);
+}
+
+.dashboard-stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+}
+
+.dashboard-stat-label {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .account-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .account-sidebar {
+        position: static;
+    }
+
+    .dashboard-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
diff --git a/assets/css/cart.css b/assets/css/cart.css
new file mode 100644
index 0000000..5bbf104
--- /dev/null
+++ b/assets/css/cart.css
@@ -0,0 +1,154 @@
+/* Cart Page Layout */
+.cart-layout {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 2rem;
+    align-items: start;
+}
+
+.cart-empty {
+    padding: 3rem;
+    text-align: center;
+}
+
+.cart-empty-icon {
+    font-size: 4rem;
+    color: var(--color-text-muted);
+    margin-bottom: 1rem;
+}
+
+/* Cart Items */
+.cart-items-list {
+    display: grid;
+    gap: 1rem;
+}
+
+.cart-item {
+    display: grid;
+    grid-template-columns: 80px 1fr auto auto;
+    gap: 1rem;
+    align-items: center;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.cart-item:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.cart-item-img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+}
+
+.cart-item-name {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.cart-item-price {
+    color: var(--color-text-muted);
+    margin: 0;
+}
+
+/* Quantity Selector */
+.quantity-selector {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+}
+
+.qty-btn {
+    padding: 0.25rem 0.75rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--color-text);
+    transition: var(--transition);
+}
+
+.qty-btn:hover {
+    color: var(--color-primary);
+}
+
+.qty-input {
+    width: 50px;
+    text-align: center;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    font-family: inherit;
+}
+
+.cart-item-total {
+    text-align: right;
+}
+
+.cart-item-total .amount {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.btn-remove {
+    background: none;
+    border: none;
+    color: var(--color-error);
+    cursor: pointer;
+    font-size: 0.875rem;
+    padding: 0;
+}
+
+/* Order Summary Sidebar */
+.cart-summary {
+    position: sticky;
+    top: 100px;
+}
+
+.cart-summary-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.cart-summary-total {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.free-shipping-msg {
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    margin: 0.5rem 0;
+}
+
+@media (max-width: 768px) {
+    .cart-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .cart-summary {
+        position: static;
+    }
+
+    .cart-item {
+        grid-template-columns: 64px 1fr;
+        grid-template-rows: auto auto;
+    }
+
+    .cart-item-img {
+        width: 64px;
+        height: 64px;
+    }
+
+    .quantity-selector,
+    .cart-item-total {
+        grid-column: 2;
+    }
+}
diff --git a/assets/css/checkout.css b/assets/css/checkout.css
new file mode 100644
index 0000000..4ca76a0
--- /dev/null
+++ b/assets/css/checkout.css
@@ -0,0 +1,103 @@
+/* Checkout Page Layout */
+.checkout-layout {
+    display: grid;
+    grid-template-columns: 1fr 400px;
+    gap: 2rem;
+    align-items: start;
+}
+
+/* Address grid: city / state / zip */
+.address-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 1rem;
+}
+
+/* Order Summary Sidebar */
+.checkout-summary {
+    position: sticky;
+    top: 100px;
+}
+
+/* Scrollable cart preview in sidebar */
+.checkout-items-preview {
+    max-height: 250px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+}
+
+.checkout-item {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.checkout-item:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.checkout-item-img {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+    flex-shrink: 0;
+}
+
+.checkout-item-info {
+    flex: 1;
+}
+
+.checkout-item-info p {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+}
+
+.checkout-item-info small {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+}
+
+.checkout-item-total {
+    text-align: right;
+    font-weight: 600;
+}
+
+.checkout-summary-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.checkout-summary-total {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.secure-badge {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    text-align: center;
+    margin-top: 1rem;
+}
+
+@media (max-width: 768px) {
+    .checkout-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .checkout-summary {
+        position: static;
+        order: -1;
+    }
+
+    .address-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
diff --git a/cart.php b/cart.php
index 5729028..5c5e1e0 100644
--- a/cart.php
+++ b/cart.php
@@ -9,6 +9,7 @@ $metaDescription = 'Review your coffee selections and checkout securely.';
 $canonicalUrl = 'https://tomsjavajive.com/cart.php';
 $metaRobots = "noindex, nofollow";
 $suppressSchema = true;
+$extraHead = '<link rel="stylesheet" href="/assets/css/cart.css?v=' . filemtime(__DIR__ . '/assets/css/cart.css') . '">';
 require_once __DIR__ . '/includes/header.php';
 
 $cart = getCart();
@@ -66,39 +67,37 @@ $total = $subtotal + $shippingCost;
                 </div>
             </div>
         <?php else: ?>
-            <div style="display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: start;">
-                
+            <div class="cart-layout">
+
                 <!-- Cart Items -->
                 <div class="card">
                     <div class="card-body">
-                        <div style="display: grid; gap: 1rem;">
+                        <div class="cart-items-list">
                             <?php foreach ($cartItems as $item): ?>
-                                <div class="cart-item" data-product-id="<?= $item['product_id'] ?>" 
-                                     style="display: grid; grid-template-columns: 80px 1fr auto auto; gap: 1rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
-                                    
+                                <div class="cart-item" data-product-id="<?= $item['product_id'] ?>">
+
                                     <img src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['name']) ?>"
-                                         style="width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md);">
-                                    
+                                         class="cart-item-img">
+
                                     <div>
                                         <a href="/product.php?id=<?= $item['product_id'] ?>">
-                                            <h4 style="margin-bottom: 0.25rem;"><?= htmlspecialchars($item['name']) ?></h4>
+                                            <h4 class="cart-item-name"><?= htmlspecialchars($item['name']) ?></h4>
                                         </a>
-                                        <p class="text-muted mb-0"><?= formatCurrency($item['unit_price']) ?> each</p>
+                                        <p class="cart-item-price"><?= formatCurrency($item['unit_price']) ?> each</p>
                                     </div>
-                                    
-                                    <div class="quantity-selector" style="display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
-                                        <button type="button" class="qty-minus btn" style="padding: 0.25rem 0.75rem;"
+
+                                    <div class="quantity-selector">
+                                        <button type="button" class="qty-btn"
                                                 onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] - 1 ?>)">-</button>
-                                        <input type="number" class="qty-input" value="<?= $item['quantity'] ?>" min="1" max="<?= $item['stock'] ?>" 
-                                               style="width: 50px; text-align: center; border: none; outline: none;"
+                                        <input type="number" class="qty-input" value="<?= $item['quantity'] ?>" min="1" max="<?= $item['stock'] ?>"
                                                onchange="updateCartItem('<?= $item['product_id'] ?>', this.value)">
-                                        <button type="button" class="qty-plus btn" style="padding: 0.25rem 0.75rem;"
+                                        <button type="button" class="qty-btn"
                                                 onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] + 1 ?>)">+</button>
                                     </div>
-                                    
-                                    <div style="text-align: right;">
-                                        <p style="font-weight: 600; margin-bottom: 0.25rem;"><?= formatCurrency($item['total']) ?></p>
-                                        <button type="button" class="btn btn-sm" style="color: var(--color-error);"
+
+                                    <div class="cart-item-total">
+                                        <p class="amount"><?= formatCurrency($item['total']) ?></p>
+                                        <button type="button" class="btn-remove"
                                                 onclick="removeFromCart('<?= $item['product_id'] ?>')">
                                             <i class="fas fa-trash"></i> Remove
                                         </button>
@@ -108,40 +107,40 @@ $total = $subtotal + $shippingCost;
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Order Summary -->
-                <div class="card" style="position: sticky; top: 100px;">
+                <div class="card cart-summary">
                     <div class="card-header">
                         <h3 style="margin: 0;">Order Summary</h3>
                     </div>
                     <div class="card-body">
-                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                        <div class="cart-summary-row">
                             <span>Subtotal</span>
                             <span id="cart-subtotal"><?= formatCurrency($subtotal) ?></span>
                         </div>
-                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                        <div class="cart-summary-row">
                             <span>Shipping</span>
                             <span id="cart-shipping">
                                 <?php if ($shippingCost == 0): ?>
-                                    <span style="color: var(--color-success);">FREE</span>
+                                    <span class="text-success">FREE</span>
                                 <?php else: ?>
                                     <?= formatCurrency($shippingCost) ?>
                                 <?php endif; ?>
                             </span>
                         </div>
-                        
-                        <?php if ($shippingCost > 0 && isset($shippingSettings['free_shipping_threshold'])): 
+
+                        <?php if ($shippingCost > 0 && isset($shippingSettings['free_shipping_threshold'])):
                             $remaining = $shippingSettings['free_shipping_threshold'] - $subtotal;
                         ?>
-                            <p style="font-size: 0.875rem; color: var(--color-primary); margin: 0.5rem 0;">
-                                <i class="fas fa-truck"></i> 
+                            <p class="free-shipping-msg">
+                                <i class="fas fa-truck"></i>
                                 Add <?= formatCurrency($remaining) ?> more for FREE shipping!
                             </p>
                         <?php endif; ?>
-                        
+
                         <hr style="margin: 1rem 0;">
-                        
-                        <div style="display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600;">
+
+                        <div class="cart-summary-total">
                             <span>Total</span>
                             <span id="cart-total"><?= formatCurrency($total) ?></span>
                         </div>
diff --git a/checkout.php b/checkout.php
index 79f9c13..5673ed0 100644
--- a/checkout.php
+++ b/checkout.php
@@ -158,6 +158,7 @@ $metaDescription = 'Complete your coffee order with secure checkout.';
 $canonicalUrl = 'https://tomsjavajive.com/checkout.php';
 $metaRobots = "noindex, nofollow";
 $suppressSchema = true;
+$extraHead = '<link rel="stylesheet" href="/assets/css/checkout.css?v=' . filemtime(__DIR__ . '/assets/css/checkout.css') . '">';
 require_once __DIR__ . '/includes/header.php';
 ?>
 
@@ -166,7 +167,7 @@ require_once __DIR__ . '/includes/header.php';
         <h1 style="margin-bottom: 2rem;">Checkout</h1>
         
         <form method="POST" action="" id="checkout-form">
-            <div style="display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start;">
+            <div class="checkout-layout">
                 
                 <!-- Customer & Shipping Info -->
                 <div>
@@ -231,7 +232,7 @@ require_once __DIR__ . '/includes/header.php';
                                 <?php endif; ?>
                             </div>
                             
-                            <div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem;">
+                            <div class="address-grid">
                                 <div class="form-group">
                                     <label class="form-label">City *</label>
                                     <input type="text" name="city" class="form-input" 
@@ -275,62 +276,60 @@ require_once __DIR__ . '/includes/header.php';
                 </div>
                 
                 <!-- Order Summary -->
-                <div class="card" style="position: sticky; top: 100px;">
+                <div class="card checkout-summary">
                     <div class="card-header">
                         <h3 style="margin: 0;">Order Summary</h3>
                     </div>
                     <div class="card-body">
                         <!-- Cart Items -->
-                        <div style="max-height: 250px; overflow-y: auto; margin-bottom: 1rem;">
+                        <div class="checkout-items-preview">
                             <?php foreach ($cartItems as $item): ?>
-                                <div style="display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
-                                    <img src="<?= htmlspecialchars($item['image']) ?>" alt="" 
-                                         style="width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md);">
-                                    <div style="flex: 1;">
-                                        <p style="font-weight: 500; margin-bottom: 0.25rem;"><?= htmlspecialchars($item['name']) ?></p>
-                                        <p class="text-muted" style="font-size: 0.875rem;">
-                                            <?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?>
-                                        </p>
+                                <div class="checkout-item">
+                                    <img src="<?= htmlspecialchars($item['image']) ?>" alt=""
+                                         class="checkout-item-img">
+                                    <div class="checkout-item-info">
+                                        <p><?= htmlspecialchars($item['name']) ?></p>
+                                        <small><?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?></small>
                                     </div>
-                                    <div style="text-align: right;">
-                                        <strong><?= formatCurrency($item['total']) ?></strong>
+                                    <div class="checkout-item-total">
+                                        <?= formatCurrency($item['total']) ?>
                                     </div>
                                 </div>
                             <?php endforeach; ?>
                         </div>
-                        
+
                         <!-- Totals -->
-                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                        <div class="checkout-summary-row">
                             <span>Subtotal</span>
                             <span><?= formatCurrency($subtotal) ?></span>
                         </div>
-                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
+                        <div class="checkout-summary-row">
                             <span>Shipping</span>
                             <span>
                                 <?php if ($shippingCost == 0): ?>
-                                    <span style="color: var(--color-success);">FREE</span>
+                                    <span class="text-success">FREE</span>
                                 <?php else: ?>
                                     <?= formatCurrency($shippingCost) ?>
                                 <?php endif; ?>
                             </span>
                         </div>
-                        
+
                         <hr style="margin: 1rem 0;">
-                        
-                        <div style="display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600;">
+
+                        <div class="checkout-summary-total">
                             <span>Total</span>
                             <span><?= formatCurrency($total) ?></span>
                         </div>
-                        
+
                         <button type="submit" class="btn btn-primary btn-lg btn-block mt-2">
                             Continue to Payment
                         </button>
-                        
+
                         <a href="/cart.php" class="btn btn-secondary btn-block mt-1">
                             <i class="fas fa-arrow-left"></i> Back to Cart
                         </a>
-                        
-                        <p class="text-muted text-center mt-2" style="font-size: 0.75rem;">
+
+                        <p class="secure-badge">
                             <i class="fas fa-lock"></i> Secure checkout powered by Stripe
                         </p>
                     </div>