diff --git a/backend/app/__pycache__/config.cpython-314.pyc b/backend/app/__pycache__/config.cpython-314.pyc
index 58a4980..56b6ae3 100644
Binary files a/backend/app/__pycache__/config.cpython-314.pyc and b/backend/app/__pycache__/config.cpython-314.pyc differ
diff --git a/backend/app/__pycache__/main.cpython-314.pyc b/backend/app/__pycache__/main.cpython-314.pyc
index 0ea81bf..a04021c 100644
Binary files a/backend/app/__pycache__/main.cpython-314.pyc and b/backend/app/__pycache__/main.cpython-314.pyc differ
diff --git a/backend/app/models/__pycache__/product.cpython-314.pyc b/backend/app/models/__pycache__/product.cpython-314.pyc
index 8700f61..127d1b2 100644
Binary files a/backend/app/models/__pycache__/product.cpython-314.pyc and b/backend/app/models/__pycache__/product.cpython-314.pyc differ
diff --git a/backend/app/models/__pycache__/user.cpython-314.pyc b/backend/app/models/__pycache__/user.cpython-314.pyc
index dc80046..b0180e7 100644
Binary files a/backend/app/models/__pycache__/user.cpython-314.pyc and b/backend/app/models/__pycache__/user.cpython-314.pyc differ
diff --git a/backend/app/routers/__pycache__/auth.cpython-314.pyc b/backend/app/routers/__pycache__/auth.cpython-314.pyc
index ddf9b57..be63612 100644
Binary files a/backend/app/routers/__pycache__/auth.cpython-314.pyc and b/backend/app/routers/__pycache__/auth.cpython-314.pyc differ
diff --git a/backend/app/routers/__pycache__/contact.cpython-314.pyc b/backend/app/routers/__pycache__/contact.cpython-314.pyc
index f4b587b..0065bea 100644
Binary files a/backend/app/routers/__pycache__/contact.cpython-314.pyc and b/backend/app/routers/__pycache__/contact.cpython-314.pyc differ
diff --git a/backend/app/routers/__pycache__/products.cpython-314.pyc b/backend/app/routers/__pycache__/products.cpython-314.pyc
index 1018c7b..46554be 100644
Binary files a/backend/app/routers/__pycache__/products.cpython-314.pyc and b/backend/app/routers/__pycache__/products.cpython-314.pyc differ
diff --git a/backend/app/schemas/__pycache__/product.cpython-314.pyc b/backend/app/schemas/__pycache__/product.cpython-314.pyc
index 9342840..dac3d42 100644
Binary files a/backend/app/schemas/__pycache__/product.cpython-314.pyc and b/backend/app/schemas/__pycache__/product.cpython-314.pyc differ
diff --git a/backend/app/schemas/__pycache__/user.cpython-314.pyc b/backend/app/schemas/__pycache__/user.cpython-314.pyc
index 800d4cc..e2ddb52 100644
Binary files a/backend/app/schemas/__pycache__/user.cpython-314.pyc and b/backend/app/schemas/__pycache__/user.cpython-314.pyc differ
diff --git a/backend/app/services/__pycache__/auth.cpython-314.pyc b/backend/app/services/__pycache__/auth.cpython-314.pyc
index 4351b98..97a15ff 100644
Binary files a/backend/app/services/__pycache__/auth.cpython-314.pyc and b/backend/app/services/__pycache__/auth.cpython-314.pyc differ
diff --git a/backend/app/services/__pycache__/product.cpython-314.pyc b/backend/app/services/__pycache__/product.cpython-314.pyc
index b593364..e4ae8f0 100644
Binary files a/backend/app/services/__pycache__/product.cpython-314.pyc and b/backend/app/services/__pycache__/product.cpython-314.pyc differ
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 5581b59..9c775b0 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -8,16 +8,26 @@ export default function Footer() {
       <div className="footer-container">
         <div className="footer-section">
           <div className="footer-brand">
-            <span className="footer-logo">👟</span>
+            <span className="footer-logo">BM</span>
             <h3>Brand Master</h3>
           </div>
-          <p>Your ultimate destination for fashion and footwear.</p>
+          <p>Premium sneaker boutique for collectors, fashion leaders, and modern street luxury.</p>
           <div className="social-links">
-            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" title="Instagram">📷</a>
-            <a href="https://wa.me/972532441361" target="_blank" rel="noopener noreferrer" title="WhatsApp">💬</a>
+            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" title="Instagram">Instagram</a>
+            <a href="https://wa.me/972532441361" target="_blank" rel="noopener noreferrer" title="WhatsApp">WhatsApp</a>
           </div>
         </div>
 
+        <div className="footer-section">
+          <h4>Quick Links</h4>
+          <ul>
+            <li><Link to="/">Home</Link></li>
+            <li><Link to="/products">Shop</Link></li>
+            <li><Link to="/sales">Sale</Link></li>
+            <li><Link to="/wishlist">Wishlist</Link></li>
+          </ul>
+        </div>
+
         <div className="footer-section">
           <h4>Shop</h4>
           <ul>
@@ -30,20 +40,15 @@ export default function Footer() {
         </div>
 
         <div className="footer-section">
-          <h4>Company</h4>
+          <h4>Customer Service</h4>
           <ul>
             <li><Link to="/about">About Us</Link></li>
             <li><Link to="/contact">Contact</Link></li>
+            <li><Link to="/orders">Shipping & Delivery</Link></li>
+            <li><a href="#">Terms & Conditions</a></li>
             <li><a href="#">Privacy Policy</a></li>
-            <li><a href="#">Terms of Service</a></li>
           </ul>
         </div>
-
-        <div className="footer-section">
-          <h4>Contact</h4>
-          <p>Email: info@brandmaster.com</p>
-          <p>Phone: +972 53-244-1361</p>
-        </div>
       </div>
 
       <div className="footer-bottom">
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 104d1f4..d0d1fbd 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -24,7 +24,11 @@ export default function Navbar() {
     <nav className="navbar">
       <div className="navbar-container">
         <Link to="/" className="navbar-logo">
-          <span className="logo-icon">👟</span> Brand Master
+          <span className="logo-icon">BM</span>
+          <span>
+            <small>BRAND MASTER</small>
+            <strong>Luxury Sneakers</strong>
+          </span>
         </Link>
 
         <div className="navbar-center">
@@ -45,18 +49,18 @@ export default function Navbar() {
         <div className="navbar-icons">
           {token ? (
             <>
-              <Link to="/wishlist" className="icon-btn" title="Wishlist">
-                ❤️
+              <Link to="/wishlist" className="icon-btn" title="Wishlist" aria-label="Wishlist">
+                ♡
               </Link>
-              <Link to="/cart" className="icon-btn cart-btn" title="Cart">
+              <Link to="/cart" className="icon-btn cart-btn" title="Cart" aria-label="Cart">
                 🛒
                 {cart.length > 0 && <span className="cart-count">{cart.length}</span>}
               </Link>
-              <Link to="/my-messages" className="icon-btn" title="My Messages">
-                💬
+              <Link to="/my-messages" className="icon-btn" title="My Messages" aria-label="Messages">
+                ✉
               </Link>
-              <Link to="/profile" className="icon-btn" title="Profile">
-                👤
+              <Link to="/profile" className="icon-btn" title="Profile" aria-label="Profile">
+                ◉
               </Link>
               <button onClick={handleLogout} className="btn btn-small">
                 Logout
@@ -64,10 +68,16 @@ export default function Navbar() {
             </>
           ) : (
             <>
-              <Link to="/cart" className="icon-btn cart-btn" title="Cart">
+              <Link to="/wishlist" className="icon-btn" title="Wishlist" aria-label="Wishlist">
+                ♡
+              </Link>
+              <Link to="/cart" className="icon-btn cart-btn" title="Cart" aria-label="Cart">
                 🛒
                 {cart.length > 0 && <span className="cart-count">{cart.length}</span>}
               </Link>
+              <Link to="/profile" className="icon-btn" title="Profile" aria-label="Profile">
+                ◉
+              </Link>
               <Link to="/login" className="btn btn-small">
                 Login
               </Link>
diff --git a/frontend/src/components/ProductCard.jsx b/frontend/src/components/ProductCard.jsx
index cf47d74..8ee11f8 100644
--- a/frontend/src/components/ProductCard.jsx
+++ b/frontend/src/components/ProductCard.jsx
@@ -30,6 +30,7 @@ export default function ProductCard({ product }) {
             alt={product.name}
             onError={() => setImageError(true)}
           />
+          <span className="product-wishlist-icon" aria-hidden="true">♡</span>
           {product.is_on_sale && discount > 0 && (
             <div className="discount-badge">{discount}% OFF</div>
           )}
diff --git a/frontend/src/components/ProductFilters.jsx b/frontend/src/components/ProductFilters.jsx
index 8a613f4..b530854 100644
--- a/frontend/src/components/ProductFilters.jsx
+++ b/frontend/src/components/ProductFilters.jsx
@@ -144,13 +144,12 @@ export default function ProductFilters({ onFilter }) {
 
       <div className="filter-group">
         <label>Price Range</label>
-        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+        <div className="price-range-inputs">
           <input
             type="number"
             placeholder="Min"
             value={filters.min_price}
             onChange={(e) => handleFilterChange('min_price', e.target.value)}
-            style={{ width: '80px', padding: '0.5rem' }}
           />
           <span>-</span>
           <input
@@ -158,7 +157,6 @@ export default function ProductFilters({ onFilter }) {
             placeholder="Max"
             value={filters.max_price}
             onChange={(e) => handleFilterChange('max_price', e.target.value)}
-            style={{ width: '80px', padding: '0.5rem' }}
           />
         </div>
       </div>
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
index 56fbec2..231099b 100644
--- a/frontend/src/components/SearchBar.jsx
+++ b/frontend/src/components/SearchBar.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useContext } from 'react'
-import { AuthContext } from '../context/AuthContext'
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
 import api from '../api'
 import '../styles/global.css'
 
@@ -38,10 +38,15 @@ export default function SearchBar() {
       {showResults && results.length > 0 && (
         <div className="search-results">
           {results.map((product) => (
-            <a key={product.id} href={`/product/${product.id}`} className="search-result-item">
+            <Link
+              key={product.id}
+              to={`/product/${product.id}`}
+              className="search-result-item"
+              onClick={() => setShowResults(false)}
+            >
               <span>{product.name}</span>
               <span>₪{product.price.toFixed(2)}</span>
-            </a>
+            </Link>
           ))}
         </div>
       )}
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
index d0c557b..e4d7ca5 100644
--- a/frontend/src/pages/Cart.jsx
+++ b/frontend/src/pages/Cart.jsx
@@ -35,51 +35,36 @@ export default function Cart() {
       ) : (
         <div className="cart-container">
           <div className="cart-items">
-            <table className="cart-table">
-              <thead>
-                <tr>
-                  <th>Product</th>
-                  <th>Price</th>
-                  <th>Quantity</th>
-                  <th>Total</th>
-                  <th>Action</th>
-                </tr>
-              </thead>
-              <tbody>
-                {cart.map((item, index) => (
-                  <tr key={index}>
-                    <td>
-                      <div className="cart-item-product">
-                        <img src={item.product.images[0]} alt={item.product.name} />
-                        <div>
-                          <p className="product-name">{item.product.name}</p>
-                          {item.size && <p>Size: {item.size}</p>}
-                        </div>
-                      </div>
-                    </td>
-                    <td>₪{(item.product.discount_price || item.product.price).toFixed(2)}</td>
-                    <td>
-                      <div className="quantity-control">
-                        <button onClick={() => updateQuantity(index, item.quantity - 1)}>−</button>
-                        <span>{item.quantity}</span>
-                        <button onClick={() => updateQuantity(index, item.quantity + 1)}>+</button>
-                      </div>
-                    </td>
-                    <td>
-                      ₪{((item.product.discount_price || item.product.price) * item.quantity).toFixed(2)}
-                    </td>
-                    <td>
-                      <button
-                        className="btn btn-small btn-danger"
-                        onClick={() => removeFromCart(index)}
-                      >
-                        Remove
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+            {cart.map((item, index) => (
+              <article key={index} className="cart-item">
+                <img src={item.product.images[0]} alt={item.product.name} />
+                <div>
+                  <p className="product-name">{item.product.name}</p>
+                  <p className="brand">{item.product.brand}</p>
+                  {item.size && <p className="text-muted">Size: {item.size}</p>}
+                  <p className="price">
+                    <span className="current">₪{(item.product.discount_price || item.product.price).toFixed(2)}</span>
+                  </p>
+                </div>
+                <div>
+                  <div className="quantity-control">
+                    <button onClick={() => updateQuantity(index, item.quantity - 1)}>−</button>
+                    <span>{item.quantity}</span>
+                    <button onClick={() => updateQuantity(index, item.quantity + 1)}>+</button>
+                  </div>
+                  <p style={{ marginTop: '0.5rem', textAlign: 'right' }}>
+                    ₪{((item.product.discount_price || item.product.price) * item.quantity).toFixed(2)}
+                  </p>
+                  <button
+                    className="btn btn-small btn-danger"
+                    style={{ marginTop: '0.5rem' }}
+                    onClick={() => removeFromCart(index)}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </article>
+            ))}
           </div>
 
           <div className="cart-summary">
@@ -91,7 +76,7 @@ export default function Cart() {
               </div>
               <div className="summary-row">
                 <span>Shipping:</span>
-                <span>$10.00</span>
+                <span>₪10.00</span>
               </div>
               <div className="summary-row">
                 <span>Tax:</span>
diff --git a/frontend/src/pages/Checkout.jsx b/frontend/src/pages/Checkout.jsx
index f875aaf..e9b03a1 100644
--- a/frontend/src/pages/Checkout.jsx
+++ b/frontend/src/pages/Checkout.jsx
@@ -150,7 +150,7 @@ export default function Checkout() {
       <div className="checkout-container">
         <form onSubmit={handleSubmit} className="checkout-form">
           <div className="form-section">
-            <h2>Contact Information</h2>
+            <h2>Shipping Information</h2>
 
             <div className="form-group">
               <label>
@@ -201,7 +201,7 @@ export default function Checkout() {
           </div>
 
           <div className="form-section">
-            <h2>Shipping Address</h2>
+            <h2>Address Details</h2>
 
             <div className="form-group">
               <label>
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
index c627822..00f1c57 100644
--- a/frontend/src/pages/Contact.jsx
+++ b/frontend/src/pages/Contact.jsx
@@ -97,12 +97,12 @@ export default function Contact() {
           <h2>Get in Touch</h2>
 
           <div className="info-item">
-            <h3>📞 Phone</h3>
+            <h3>Phone</h3>
             <p>+972 53-244-1361</p>
           </div>
 
           <div className="info-item">
-            <h3>✉️ Email</h3>
+            <h3>Email</h3>
             <p>info@brandmaster.com</p>
           </div>
 
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index c66a896..45e312c 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -43,32 +43,56 @@ export default function Home() {
 
   if (loading) return <div className="loading">Loading...</div>
 
+  const brands = Array.from(
+    new Set([...featured, ...newArrivals, ...onSale].map((item) => item.brand).filter(Boolean))
+  ).slice(0, 8)
+
   return (
     <div className="home">
-      {/* Hero Section */}
       <section className="hero">
         <div className="hero-content">
-          <h1>Welcome to Brand Master</h1>
-          <p>Discover the latest in fashion and footwear</p>
-          <Link to="/products" className="btn btn-large">
-            Shop Now
-          </Link>
+          <span className="kicker">Luxury Sneaker House</span>
+          <h1>Curated Premium Sneakers. Built for Statement.</h1>
+          <p>
+            Discover exclusive releases, iconic silhouettes, and elevated essentials in a modern black-and-gold retail experience.
+          </p>
+          <div className="hero-cta-row">
+            <Link to="/products" className="btn btn-large">Shop Now</Link>
+            <Link to="/sales" className="btn btn-secondary btn-large">Explore Sales</Link>
+          </div>
+        </div>
+        <div className="hero-media">
+          <img
+            src="https://images.unsplash.com/photo-1543508282-6319a3e2621f?auto=format&fit=crop&w=1400&q=80"
+            alt="Luxury sneaker collection"
+          />
         </div>
       </section>
 
-      {/* Category Highlights */}
-      <section className="section">
-        <h2>Shop by Category</h2>
-        <div className="grid">
-          {categories.map((cat) => (
-            <CategoryCard key={cat.id} category={cat} />
-          ))}
+      <section className="feature-strip">
+        <div className="item">
+          <strong>100% Authentic</strong>
+          <span>Verified premium stock</span>
+        </div>
+        <div className="item">
+          <strong>Secure Payment</strong>
+          <span>Safe and encrypted checkout</span>
+        </div>
+        <div className="item">
+          <strong>Free Shipping</strong>
+          <span>Orders over ₪299</span>
+        </div>
+        <div className="item">
+          <strong>Easy Returns</strong>
+          <span>14-day return policy</span>
         </div>
       </section>
 
-      {/* Featured Products */}
       <section className="section">
-        <h2>Featured Products</h2>
+        <div className="section-header">
+          <h2>Featured Products</h2>
+          <p>Hand-picked from this week's premium drops</p>
+        </div>
         <div className="grid">
           {featured.map((product) => (
             <ProductCard key={product.id} product={product} />
@@ -76,39 +100,70 @@ export default function Home() {
         </div>
       </section>
 
-      {/* New Arrivals */}
       <section className="section">
-        <h2>New Arrivals</h2>
+        <div className="section-header">
+          <h2>New Arrivals</h2>
+          <p>Fresh releases from top designer brands</p>
+        </div>
         <div className="grid">
-          {newArrivals.slice(0, 4).map((product) => (
+          {newArrivals.slice(0, 8).map((product) => (
             <ProductCard key={product.id} product={product} />
           ))}
         </div>
       </section>
 
-      {/* On Sale */}
       <section className="section sale-banner">
-        <h2>🔥 Limited Time Offers</h2>
-        <p>Up to 50% off on selected items</p>
-        <Link to="/sales" className="btn btn-large">
-          View All Sales
-        </Link>
+        <h2>Private Sale Collection</h2>
+        <p>Limited-time markdowns across selected statement pieces.</p>
+        <Link to="/sales" className="btn btn-large">View All Sales</Link>
       </section>
 
-      {/* Best Sellers */}
       <section className="section">
-        <h2>Best Sellers</h2>
+        <div className="section-header">
+          <h2>Best Sellers</h2>
+          <p>The silhouettes our community keeps coming back for</p>
+        </div>
         <div className="grid">
-          {onSale.slice(0, 4).map((product) => (
+          {onSale.slice(0, 8).map((product) => (
             <ProductCard key={product.id} product={product} />
           ))}
         </div>
       </section>
 
-      {/* Promo Banner */}
+      <section className="section">
+        <div className="section-header">
+          <h2>Shop by Category</h2>
+          <p>Build your fit by category</p>
+        </div>
+        <div className="grid">
+          {categories.map((cat) => (
+            <CategoryCard key={cat.id} category={cat} />
+          ))}
+        </div>
+      </section>
+
+      {brands.length > 0 && (
+        <section className="section">
+          <div className="section-header">
+            <h2>Brands</h2>
+            <p>Curated premium houses</p>
+          </div>
+          <div className="grid">
+            {brands.map((brand) => (
+              <div key={brand} className="category-card">
+                <div style={{ padding: '1.2rem' }}>
+                  <h3>{brand}</h3>
+                  <p>Explore selected {brand} silhouettes in the Brand Master collection.</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
       <section className="promo-banner">
-        <h3>Subscribe to Our Newsletter</h3>
-        <p>Get exclusive deals and updates</p>
+        <h3>Join the Private Client List</h3>
+        <p>Get priority access to drops, restocks, and members-only pricing.</p>
         <input type="email" placeholder="Enter your email" />
         <button className="btn">Subscribe</button>
       </section>
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 75e72cd..a4d0893 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -21,6 +21,7 @@ export default function Login() {
   const [resetEmail, setResetEmail] = useState('')
   const [resetPin, setResetPin] = useState('')
   const [newPassword, setNewPassword] = useState('')
+  const [rememberMe, setRememberMe] = useState(true)
   const [resetLoading, setResetLoading] = useState(false)
   const [currentUserData, setCurrentUserData] = useState(null)
 
@@ -138,50 +139,72 @@ export default function Login() {
   return (
     <div className="auth-page">
       <div className="auth-container">
-        <h1>Login</h1>
-
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label>Email, Username, or Phone</label>
-            <input
-              type="text"
-              name="identifier"
-              value={formData.identifier}
-              onChange={handleChange}
-              placeholder="Enter email, username, or phone"
-              required
-            />
+        <div className="auth-visual">
+          <img
+            src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?auto=format&fit=crop&w=1200&q=80"
+            alt="Premium sneaker"
+          />
+          <div className="auth-visual-copy">
+            <h3>Welcome Back</h3>
+            <p>Log in to your account and continue your premium shopping experience.</p>
           </div>
+        </div>
 
-          <div className="form-group">
-            <label>Password</label>
-            <input
-              type="password"
-              name="password"
-              value={formData.password}
-              onChange={handleChange}
-              required
-            />
-          </div>
+        <div className="auth-panel">
+          <h1>Login</h1>
 
-          <div className="forgot-password-link">
-            <button
-              type="button"
-              className="link-button"
-              onClick={() => setShowForgotPassword(true)}
-            >
-              Forgot Password?
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label>Email, Username, or Phone</label>
+              <input
+                type="text"
+                name="identifier"
+                value={formData.identifier}
+                onChange={handleChange}
+                placeholder="Enter email, username, or phone"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Password</label>
+              <input
+                type="password"
+                name="password"
+                value={formData.password}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="auth-meta">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={rememberMe}
+                  onChange={(e) => setRememberMe(e.target.checked)}
+                />
+                Remember Me
+              </label>
+
+              <button
+                type="button"
+                className="link-button"
+                onClick={() => setShowForgotPassword(true)}
+              >
+                Forgot Password?
+              </button>
+            </div>
+
+            <button type="submit" className="btn btn-full" disabled={loading}>
+              {loading ? 'Logging in...' : 'Login'}
             </button>
-          </div>
+          </form>
 
-          <button type="submit" className="btn btn-full" disabled={loading}>
-            {loading ? 'Logging in...' : 'Login'}
-          </button>
-        </form>
-
-        <p className="auth-switch">
-          Don't have an account? <Link to="/register">Sign up here</Link>
-        </p>
+          <p className="auth-switch">
+            Don't have an account? <Link to="/register">Sign up here</Link>
+          </p>
+        </div>
       </div>
 
       {/* Forgot Password Modal */}
diff --git a/frontend/src/pages/MyMessages.css b/frontend/src/pages/MyMessages.css
index 9b74cd5..2151cf6 100644
--- a/frontend/src/pages/MyMessages.css
+++ b/frontend/src/pages/MyMessages.css
@@ -1,291 +1,125 @@
 .messages-page {
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  padding: 2rem 0;
+  padding-top: 1.2rem;
 }
 
 .messages-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  background: linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(9, 9, 9, 0.95));
+  border-radius: 16px;
+  padding: 1rem;
 }
 
 .messages-header {
-  margin-bottom: 2rem;
-}
-
-.messages-header h1 {
-  font-size: 2.5rem;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 0.5rem;
-}
-
-.messages-header p {
-  color: #666;
-  font-size: 1.1rem;
-}
-
-.error-message {
-  background-color: #fee;
-  border: 1px solid #fcc;
-  color: #c33;
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1.5rem;
-}
-
-.no-messages {
-  background: white;
-  border-radius: 12px;
-  padding: 3rem;
-  text-align: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.no-messages-icon {
-  font-size: 4rem;
   margin-bottom: 1rem;
 }
 
-.no-messages h3 {
-  font-size: 1.5rem;
-  color: #333;
-  margin-bottom: 0.5rem;
+.messages-header h1 {
+  font-size: 2rem;
 }
 
-.no-messages p {
-  color: #666;
-  margin-bottom: 1.5rem;
+.messages-header p {
+  color: var(--text-muted);
 }
 
 .messages-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+  display: grid;
+  gap: 0.8rem;
 }
 
 .message-card {
-  background: white;
+  border: 1px solid rgba(212, 175, 55, 0.18);
   border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.3s ease;
-}
-
-.message-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 0.95rem;
 }
 
 .message-card-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.message-title-section {
-  flex: 1;
+  gap: 0.6rem;
+  margin-bottom: 0.7rem;
 }
 
 .message-title-section h3 {
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #333;
-  margin: 0 0 0.5rem 0;
+  margin-bottom: 0.2rem;
 }
 
 .message-date {
-  font-size: 0.9rem;
-  color: #888;
-  margin: 0;
-}
-
-.status-badge {
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.message-content {
-  margin-bottom: 1.5rem;
-}
-
-.message-content h4 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #555;
-  margin-bottom: 0.75rem;
-}
-
-.message-box {
-  background: #f9f9f9;
-  border-radius: 8px;
-  padding: 1.25rem;
-  border-left: 4px solid #007bff;
-}
-
-.message-box p {
-  margin: 0;
-  color: #333;
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
-
-.admin-response {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 2px solid #e5e5e5;
+  color: var(--text-soft);
+  font-size: 0.85rem;
 }
 
+.message-content h4,
 .admin-response h4 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #10b981;
-  margin-bottom: 0.75rem;
-  display: flex;
-  align-items: center;
+  margin-bottom: 0.35rem;
+  color: var(--gold-bright);
 }
 
-.response-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: #10b981;
-  color: white;
-  border-radius: 50%;
-  margin-right: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: bold;
-}
-
-.response-box {
-  background: #f0fdf4;
-  border: 1px solid #86efac;
-  border-radius: 8px;
-  padding: 1.25rem;
-  border-left: 4px solid #10b981;
+.message-box,
+.response-box,
+.message-details {
+  border: 1px solid rgba(212, 175, 55, 0.15);
+  background: rgba(0, 0, 0, 0.35);
+  border-radius: 10px;
+  padding: 0.75rem;
 }
 
+.message-box p,
 .response-box p {
-  margin: 0;
-  color: #333;
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
-
-.waiting-response {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 2px solid #e5e5e5;
+  color: var(--text-muted);
 }
 
 .waiting-response p {
-  color: #888;
+  color: var(--text-soft);
   font-style: italic;
-  margin: 0;
-}
-
-.message-details-section {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid #e5e5e5;
 }
 
 .details-toggle {
-  background: none;
-  border: none;
-  color: #007bff;
-  font-size: 0.9rem;
-  cursor: pointer;
-  padding: 0.5rem 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: color 0.2s ease;
-}
-
-.details-toggle:hover {
-  color: #0056b3;
-}
-
-.message-details {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: #f9f9f9;
-  border-radius: 8px;
+  color: var(--gold-bright);
+  margin-top: 0.75rem;
 }
 
 .details-grid {
+  margin-top: 0.6rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.detail-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
 }
 
 .detail-item strong {
-  font-weight: 600;
-  color: #555;
-  font-size: 0.9rem;
+  color: var(--text-main);
+  font-size: 0.86rem;
 }
 
 .detail-item span {
-  color: #666;
-  font-size: 0.95rem;
+  color: var(--text-muted);
+  font-size: 0.86rem;
 }
 
 .messages-actions {
-  margin-top: 2rem;
+  margin-top: 0.8rem;
+}
+
+.no-messages {
   text-align: center;
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 12px;
+  padding: 1.6rem;
+  background: rgba(255, 255, 255, 0.02);
 }
 
-.btn-secondary {
-  background-color: #6c757d;
-  color: white;
+.no-messages-icon {
+  font-size: 2rem;
+  margin-bottom: 0.4rem;
 }
 
-.btn-secondary:hover {
-  background-color: #5a6268;
-}
-
-/* Loading state */
-.loading {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  color: #666;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .messages-header h1 {
-    font-size: 2rem;
+@media (max-width: 720px) {
+  .details-grid {
+    grid-template-columns: 1fr;
   }
 
   .message-card-header {
     flex-direction: column;
-    gap: 1rem;
-  }
-
-  .status-badge {
-    align-self: flex-start;
-  }
-
-  .details-grid {
-    grid-template-columns: 1fr;
+    align-items: flex-start;
   }
 }
diff --git a/frontend/src/pages/ProductDetail.jsx b/frontend/src/pages/ProductDetail.jsx
index bb0a5fb..4f0a8ab 100644
--- a/frontend/src/pages/ProductDetail.jsx
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -137,7 +137,7 @@ export default function ProductDetail() {
           <p className="brand">{product.brand}</p>
 
           <div className="rating">
-            <span>⭐⭐⭐⭐⭐ (42 reviews)</span>
+            <span>★★★★★ (42 reviews)</span>
           </div>
 
           <div className="price">
@@ -151,6 +151,8 @@ export default function ProductDetail() {
             )}
           </div>
 
+          <p className="model-code">Model Code: {product.sku || product.id}</p>
+
           <p className="description">{product.description}</p>
 
           {product.sizes.length > 0 && (
@@ -198,10 +200,11 @@ export default function ProductDetail() {
               Add to Cart
             </button>
             <button
-              className={`btn btn-icon ${inWishlist ? 'active' : ''}`}
+              className={`btn-icon ${inWishlist ? 'active' : ''}`}
               onClick={handleToggleWishlist}
+              aria-label="Add to wishlist"
             >
-              {inWishlist ? '❤️' : '🤍'}
+              {inWishlist ? '♥' : '♡'}
             </button>
           </div>
 
diff --git a/frontend/src/pages/Products.jsx b/frontend/src/pages/Products.jsx
index 9b6271e..88df26a 100644
--- a/frontend/src/pages/Products.jsx
+++ b/frontend/src/pages/Products.jsx
@@ -110,7 +110,7 @@ export default function Products() {
             </span>
             <button
               onClick={() => { setShowAll(s => !s); setCurrentPage(1) }}
-              style={{ marginLeft: '1rem', padding: '0.3rem 0.8rem', borderRadius: '4px', border: '1px solid #ccc', cursor: 'pointer', fontSize: '0.85rem' }}
+              className="page-btn"
             >
               {showAll ? 'Paginate' : 'Show All'}
             </button>
@@ -128,11 +128,11 @@ export default function Products() {
 
             {/* Pagination controls (hidden when Show All is active) */}
             {!showAll && totalPages > 1 && (
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', marginTop: '2rem', flexWrap: 'wrap' }}>
+              <div className="pagination">
                 <button
                   onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                   disabled={currentPage <= 1}
-                  style={{ padding: '0.5rem 1rem', borderRadius: '4px', border: '1px solid #ccc', cursor: currentPage <= 1 ? 'not-allowed' : 'pointer', opacity: currentPage <= 1 ? 0.5 : 1 }}
+                  className="page-btn"
                 >
                   ← Prev
                 </button>
@@ -143,7 +143,7 @@ export default function Products() {
                     <button
                       key={page}
                       onClick={() => setCurrentPage(page)}
-                      style={{ padding: '0.5rem 1rem', borderRadius: '4px', border: '1px solid #ccc', cursor: 'pointer', backgroundColor: page === currentPage ? '#333' : 'white', color: page === currentPage ? 'white' : 'inherit' }}
+                      className={`page-btn ${page === currentPage ? 'active' : ''}`}
                     >
                       {page}
                     </button>
@@ -152,7 +152,7 @@ export default function Products() {
                 <button
                   onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                   disabled={currentPage >= totalPages}
-                  style={{ padding: '0.5rem 1rem', borderRadius: '4px', border: '1px solid #ccc', cursor: currentPage >= totalPages ? 'not-allowed' : 'pointer', opacity: currentPage >= totalPages ? 0.5 : 1 }}
+                  className="page-btn"
                 >
                   Next →
                 </button>
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index c8605b5..d43212e 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import api from '../api'
 import { AuthContext } from '../context/AuthContext'
 import Toast from '../components/Toast'
@@ -26,6 +26,12 @@ export default function Profile() {
   const [saving, setSaving] = useState(false)
   const [changingPassword, setChangingPassword] = useState(false)
   const [toast, setToast] = useState(null)
+  const [activeSection, setActiveSection] = useState('overview')
+  const [stats, setStats] = useState({
+    orders: 0,
+    wishlist: 0,
+    messages: 0,
+  })
 
   useEffect(() => {
     if (!token) {
@@ -37,9 +43,20 @@ export default function Profile() {
 
   const fetchProfile = async () => {
     try {
-      const response = await api.get('/users/me')
-      setFormData(response.data)
-      setUser(response.data)
+      const [profileRes, ordersRes, wishlistRes, messagesRes] = await Promise.all([
+        api.get('/users/me'),
+        api.get('/orders').catch(() => ({ data: [] })),
+        api.get('/wishlist').catch(() => ({ data: [] })),
+        api.get('/my-messages').catch(() => ({ data: [] })),
+      ])
+
+      setFormData(profileRes.data)
+      setUser(profileRes.data)
+      setStats({
+        orders: ordersRes.data.length || 0,
+        wishlist: wishlistRes.data.length || 0,
+        messages: messagesRes.data.length || 0,
+      })
     } catch (error) {
       console.error('Error fetching profile:', error)
     } finally {
@@ -103,145 +120,178 @@ export default function Profile() {
 
   return (
     <div className="profile-page">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
-        <h1>My Profile</h1>
-        {user?.is_admin && (
-          <span style={{ 
-            backgroundColor: '#ff6b6b', 
-            color: 'white', 
-            padding: '0.25rem 0.75rem', 
-            borderRadius: '4px', 
-            fontSize: '0.875rem',
-            fontWeight: 'bold' 
-          }}>
-            ADMIN
-          </span>
-        )}
-      </div>
+      <h1>
+        My Profile
+        {user?.is_admin && <span className="admin-pill">ADMIN</span>}
+      </h1>
 
-      <div className="profile-container">
-        <form onSubmit={handleSubmit} className="profile-form">
-          <h2>Personal Information</h2>
-
-          <div className="form-group">
-            <label>Full Name</label>
-            <input
-              type="text"
-              name="full_name"
-              value={formData.full_name}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="form-group">
-            <label>Email</label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-            />
-          </div>
-
-          <div className="form-group">
-            <label>Phone</label>
-            <input
-              type="tel"
-              name="phone"
-              value={formData.phone || ''}
-              onChange={handleChange}
-            />
-          </div>
-
-          <h2>Shipping Address</h2>
-
-          <div className="form-group">
-            <label>Address</label>
-            <input
-              type="text"
-              name="address"
-              value={formData.address || ''}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="form-row">
-            <div className="form-group">
-              <label>City</label>
-              <input
-                type="text"
-                name="city"
-                value={formData.city || ''}
-                onChange={handleChange}
-              />
-            </div>
-
-            <div className="form-group">
-              <label>Postal Code</label>
-              <input
-                type="text"
-                name="postal_code"
-                value={formData.postal_code || ''}
-                onChange={handleChange}
-              />
-            </div>
-
-            <div className="form-group">
-              <label>Country</label>
-              <input
-                type="text"
-                name="country"
-                value={formData.country || ''}
-                onChange={handleChange}
-              />
-            </div>
-          </div>
-
-          <button type="submit" className="btn btn-full" disabled={saving}>
-            {saving ? 'Saving...' : 'Save Changes'}
+      <div className="profile-shell">
+        <nav className="profile-nav">
+          <button
+            className={activeSection === 'overview' ? 'active' : ''}
+            onClick={() => setActiveSection('overview')}
+            type="button"
+          >
+            Overview
           </button>
-        </form>
-
-        <form onSubmit={handlePasswordChange} className="profile-form" style={{ marginTop: '2rem' }}>
-          <h2>Change Password</h2>
-
-          <div className="form-group">
-            <label>Current Password</label>
-            <input
-              type="password"
-              value={passwordData.old_password}
-              onChange={(e) => setPasswordData({ ...passwordData, old_password: e.target.value })}
-              required
-            />
-          </div>
-
-          <div className="form-group">
-            <label>New Password</label>
-            <input
-              type="password"
-              value={passwordData.new_password}
-              onChange={(e) => setPasswordData({ ...passwordData, new_password: e.target.value })}
-              minLength="6"
-              required
-            />
-          </div>
-
-          <div className="form-group">
-            <label>Confirm New Password</label>
-            <input
-              type="password"
-              value={passwordData.confirm_password}
-              onChange={(e) => setPasswordData({ ...passwordData, confirm_password: e.target.value })}
-              minLength="6"
-              required
-            />
-          </div>
-
-          <button type="submit" className="btn btn-full" disabled={changingPassword}>
-            {changingPassword ? 'Changing...' : 'Change Password'}
+          <Link to="/orders">Orders</Link>
+          <Link to="/wishlist">Wishlist</Link>
+          <Link to="/my-messages">Messages</Link>
+          <button
+            className={activeSection === 'addresses' ? 'active' : ''}
+            onClick={() => setActiveSection('addresses')}
+            type="button"
+          >
+            Addresses
           </button>
-        </form>
+          <button
+            className={activeSection === 'settings' ? 'active' : ''}
+            onClick={() => setActiveSection('settings')}
+            type="button"
+          >
+            Account Settings
+          </button>
+        </nav>
+
+        <div className="profile-forms">
+          <div className="profile-metrics">
+            <div className="profile-metric">
+              <span>Total Orders</span>
+              <strong>{stats.orders}</strong>
+            </div>
+            <div className="profile-metric">
+              <span>Wishlist Count</span>
+              <strong>{stats.wishlist}</strong>
+            </div>
+            <div className="profile-metric">
+              <span>Messages Count</span>
+              <strong>{stats.messages}</strong>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="profile-form">
+            <h2>{activeSection === 'addresses' ? 'Addresses' : 'Personal Information'}</h2>
+
+            <div className="form-group">
+              <label>Full Name</label>
+              <input
+                type="text"
+                name="full_name"
+                value={formData.full_name}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Email</label>
+              <input
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Phone</label>
+              <input
+                type="tel"
+                name="phone"
+                value={formData.phone || ''}
+                onChange={handleChange}
+              />
+            </div>
+
+            <h2>Shipping Address</h2>
+
+            <div className="form-group">
+              <label>Address</label>
+              <input
+                type="text"
+                name="address"
+                value={formData.address || ''}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-row">
+              <div className="form-group">
+                <label>City</label>
+                <input
+                  type="text"
+                  name="city"
+                  value={formData.city || ''}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="form-group">
+                <label>Postal Code</label>
+                <input
+                  type="text"
+                  name="postal_code"
+                  value={formData.postal_code || ''}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="form-group">
+                <label>Country</label>
+                <input
+                  type="text"
+                  name="country"
+                  value={formData.country || ''}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+
+            <button type="submit" className="btn btn-full" disabled={saving}>
+              {saving ? 'Saving...' : 'Save Changes'}
+            </button>
+          </form>
+
+          <form onSubmit={handlePasswordChange} className="profile-form">
+            <h2>Account Settings</h2>
+
+            <div className="form-group">
+              <label>Current Password</label>
+              <input
+                type="password"
+                value={passwordData.old_password}
+                onChange={(e) => setPasswordData({ ...passwordData, old_password: e.target.value })}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>New Password</label>
+              <input
+                type="password"
+                value={passwordData.new_password}
+                onChange={(e) => setPasswordData({ ...passwordData, new_password: e.target.value })}
+                minLength="6"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Confirm New Password</label>
+              <input
+                type="password"
+                value={passwordData.confirm_password}
+                onChange={(e) => setPasswordData({ ...passwordData, confirm_password: e.target.value })}
+                minLength="6"
+                required
+              />
+            </div>
+
+            <button type="submit" className="btn btn-full" disabled={changingPassword}>
+              {changingPassword ? 'Changing...' : 'Change Password'}
+            </button>
+          </form>
+        </div>
       </div>
       
       {toast && (
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
index 43e5624..fa4ff6f 100644
--- a/frontend/src/pages/Register.jsx
+++ b/frontend/src/pages/Register.jsx
@@ -60,73 +60,86 @@ export default function Register() {
   return (
     <div className="auth-page">
       <div className="auth-container">
-        <h1>Create Account</h1>
-
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label>Full Name</label>
-            <input
-              type="text"
-              name="full_name"
-              value={formData.full_name}
-              onChange={handleChange}
-              required
-            />
+        <div className="auth-visual">
+          <img
+            src="https://images.unsplash.com/photo-1515955656352-a1fa3ffcd111?auto=format&fit=crop&w=1200&q=80"
+            alt="Luxury sneaker"
+          />
+          <div className="auth-visual-copy">
+            <h3>Create Account</h3>
+            <p>Join Brand Master and access exclusive collections and member-only drops.</p>
           </div>
+        </div>
 
-          <div className="form-group">
-            <label>Email</label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-            />
-          </div>
+        <div className="auth-panel">
+          <h1>Create Account</h1>
 
-          <div className="form-group">
-            <label>Username (Optional)</label>
-            <input
-              type="text"
-              name="username"
-              value={formData.username}
-              onChange={handleChange}
-              placeholder="Choose a unique username"
-            />
-          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label>Full Name</label>
+              <input
+                type="text"
+                name="full_name"
+                value={formData.full_name}
+                onChange={handleChange}
+                required
+              />
+            </div>
 
-          <div className="form-group">
-            <label>Phone (Optional)</label>
-            <input
-              type="tel"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-              placeholder="+972 XX-XXX-XXXX"
-            />
-          </div>
+            <div className="form-group">
+              <label>Email</label>
+              <input
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+              />
+            </div>
 
-          <div className="form-group">
-            <label>Password</label>
-            <input
-              type="password"
-              name="password"
-              value={formData.password}
-              onChange={handleChange}
-              minLength="6"
-              required
-            />
-          </div>
+            <div className="form-group">
+              <label>Username (Optional)</label>
+              <input
+                type="text"
+                name="username"
+                value={formData.username}
+                onChange={handleChange}
+                placeholder="Choose a unique username"
+              />
+            </div>
 
-          <button type="submit" className="btn btn-full" disabled={loading}>
-            {loading ? 'Creating account...' : 'Sign Up'}
-          </button>
-        </form>
+            <div className="form-group">
+              <label>Phone (Optional)</label>
+              <input
+                type="tel"
+                name="phone"
+                value={formData.phone}
+                onChange={handleChange}
+                placeholder="+972 XX-XXX-XXXX"
+              />
+            </div>
 
-        <p className="auth-switch">
-          Already have an account? <Link to="/login">Login here</Link>
-        </p>
+            <div className="form-group">
+              <label>Password</label>
+              <input
+                type="password"
+                name="password"
+                value={formData.password}
+                onChange={handleChange}
+                minLength="6"
+                required
+              />
+            </div>
+
+            <button type="submit" className="btn btn-full" disabled={loading}>
+              {loading ? 'Creating account...' : 'Sign Up'}
+            </button>
+          </form>
+
+          <p className="auth-switch">
+            Already have an account? <Link to="/login">Login here</Link>
+          </p>
+        </div>
       </div>
       
       {toast && (
diff --git a/frontend/src/pages/Sales.jsx b/frontend/src/pages/Sales.jsx
index 1d1095d..fd23700 100644
--- a/frontend/src/pages/Sales.jsx
+++ b/frontend/src/pages/Sales.jsx
@@ -30,8 +30,8 @@ export default function Sales() {
   return (
     <div className="sales-page">
       <div className="sales-header">
-        <h1>🔥 Limited Time Offers</h1>
-        <p>Huge discounts on selected items - Limited time only!</p>
+        <h1>Limited Time Offers</h1>
+        <p>Luxury selections with exclusive markdowns. Ends soon.</p>
       </div>
 
       {loading ? (
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index a2f2bf9..32c9bbf 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,818 +1,1036 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');
+
+:root {
+  --bg-base: #050505;
+  --bg-elevated: #0b0b0b;
+  --bg-card: #111111;
+  --bg-card-soft: #151515;
+  --gold: #d4af37;
+  --gold-bright: #ebca62;
+  --gold-muted: rgba(212, 175, 55, 0.24);
+  --border: rgba(212, 175, 55, 0.2);
+  --text-main: #ffffff;
+  --text-muted: #b8b8b8;
+  --text-soft: #8a8a8a;
+  --success: #67c583;
+  --danger: #ff6d6d;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
+  --shadow-gold: 0 12px 40px rgba(212, 175, 55, 0.14);
+  --surface-glass: linear-gradient(135deg, rgba(20, 20, 20, 0.86), rgba(9, 9, 9, 0.76));
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-:root {
-  --primary: #ff6b6b;
-  --primary-dark: #ff5252;
-  --secondary: #1a1a1a;
-  --light: #f5f5f5;
-  --gray: #888888;
-  --gray-light: #e0e0e0;
-  --border-radius: 8px;
-  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+html,
+body,
+#root {
+  min-height: 100%;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-  color: var(--secondary);
+  font-family: 'Poppins', sans-serif;
   line-height: 1.6;
-  background-color: #fff;
-}
-
-html, body, #root {
-  height: 100%;
+  color: var(--text-main);
+  background:
+    radial-gradient(circle at 15% -10%, rgba(212, 175, 55, 0.13), transparent 40%),
+    radial-gradient(circle at 85% 0%, rgba(212, 175, 55, 0.08), transparent 38%),
+    linear-gradient(150deg, #020202 0%, #050505 40%, #0a0a0a 100%);
 }
 
 a {
-  text-decoration: none;
   color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
 }
 
 button {
   cursor: pointer;
-  font-family: inherit;
   border: none;
-  border-radius: var(--border-radius);
+  background: none;
+}
+
+::selection {
+  background: rgba(212, 175, 55, 0.24);
+  color: #fff;
 }
 
-/* App Layout */
 .app {
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 }
 
 .main-content {
   flex: 1;
-  padding: 0;
-}
-
-/* Navbar */
-.navbar {
-  background: white;
-  box-shadow: var(--shadow);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.navbar-container {
-  max-width: 1200px;
+  width: min(1320px, 94vw);
   margin: 0 auto;
-  padding: 1rem 2rem;
+  padding: 2rem 0 4rem;
+}
+
+/* Generic */
+.section {
+  margin: 4rem 0;
+}
+
+.section h2,
+.sales-header h1,
+.products-page h1,
+.product-detail h1,
+.cart-page h1,
+.checkout-page h1,
+.auth-container h1,
+.profile-page h1,
+.contact-page h1,
+.orders-page h1,
+.wishlist-page h1,
+.about-page h1,
+.messages-header h1 {
+  font-family: 'Montserrat', sans-serif;
+  letter-spacing: 0.02em;
+  font-weight: 700;
+}
+
+.section h2 {
+  font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.2rem);
+  margin-bottom: 1.25rem;
+}
+
+.section-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  gap: 2rem;
+  align-items: flex-end;
+  gap: 0.8rem;
+  margin-bottom: 1rem;
 }
 
-.navbar-logo {
-  font-size: 1.5rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  white-space: nowrap;
+.section-header p {
+  color: var(--text-soft);
+  font-size: 0.92rem;
 }
 
-.logo-icon {
-  font-size: 2rem;
+.grid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 }
 
-.navbar-center {
-  flex: 1;
-  max-width: 400px;
-}
-
-.navbar-menu {
-  display: flex;
-  gap: 2rem;
-  list-style: none;
-  flex-wrap: wrap;
-}
-
-.navbar-menu a {
-  color: var(--secondary);
-  font-weight: 500;
-  transition: color 0.3s;
-  padding-bottom: 0.25rem;
-  border-bottom: 2px solid transparent;
-}
-
-.navbar-menu a:hover {
-  color: var(--primary);
-}
-
-.navbar-menu a.active {
-  color: var(--primary);
-  border-bottom-color: var(--primary);
-}
-
-.navbar-menu a.admin-link {
-  color: var(--primary);
-  font-weight: bold;
-}
-
-.navbar-icons {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.icon-btn {
-  font-size: 1.5rem;
-  cursor: pointer;
-  transition: transform 0.3s;
-  position: relative;
-}
-
-.icon-btn:hover {
-  transform: scale(1.1);
-}
-
-.cart-count {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  background: var(--primary);
-  color: white;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: bold;
+.loading,
+.error,
+.no-products,
+.empty-state,
+.empty-cart {
+  border: 1px solid var(--border);
+  background: var(--surface-glass);
+  backdrop-filter: blur(8px);
+  border-radius: var(--radius-md);
+  padding: 2.2rem;
+  text-align: center;
+  color: var(--text-muted);
 }
 
 /* Buttons */
 .btn {
-  padding: 0.75rem 1.5rem;
-  border-radius: var(--border-radius);
-  background: var(--primary);
-  color: white;
-  font-weight: 600;
-  transition: background 0.3s;
-  display: inline-block;
-  text-align: center;
-  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.78rem 1.4rem;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
+  color: #121212;
+  font-weight: 700;
+  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
 }
 
 .btn:hover:not(:disabled) {
-  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-gold);
+  filter: saturate(1.05);
 }
 
 .btn:disabled {
-  opacity: 0.6;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
-.btn-small {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-}
-
-.btn-large {
-  padding: 1rem 2rem;
-  font-size: 1rem;
-}
-
 .btn-full {
   width: 100%;
 }
 
-.btn-secondary {
-  background: transparent;
-  color: var(--primary);
-  border: 2px solid var(--primary);
+.btn-large {
+  padding: 0.95rem 1.8rem;
 }
 
-.btn-secondary:hover {
-  background: var(--light);
+.btn-small {
+  padding: 0.55rem 0.9rem;
+  font-size: 0.86rem;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--text-main);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  border-color: rgba(212, 175, 55, 0.48);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
 }
 
 .btn-outline {
-  background: transparent;
-  color: var(--secondary);
-  border: 2px solid var(--gray-light);
-}
-
-.btn-outline:hover {
-  border-color: var(--secondary);
+  background: rgba(212, 175, 55, 0.05);
+  border: 1px solid var(--border);
+  color: var(--gold-bright);
 }
 
 .btn-danger {
-  background: #e74c3c;
+  background: transparent;
+  border: 1px solid rgba(255, 109, 109, 0.4);
+  color: #ff7f7f;
 }
 
-.btn-danger:hover {
-  background: #c0392b;
+.btn-danger:hover:not(:disabled) {
+  box-shadow: 0 10px 24px rgba(255, 109, 109, 0.17);
 }
 
 .btn-icon {
-  padding: 0.5rem;
-  background: transparent;
-  font-size: 1.5rem;
-  border-radius: 50%;
-  transition: background 0.3s;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  color: var(--gold);
 }
 
-.btn-icon:hover {
-  background: var(--light);
+/* Navbar */
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+  border-bottom: 1px solid var(--border);
+  background: rgba(5, 5, 5, 0.82);
+  backdrop-filter: blur(12px);
 }
 
-.btn-icon.active {
-  background: var(--primary) + '20';
-}
-
-/* Grid */
-.grid {
+.navbar-container {
+  width: min(1320px, 94vw);
+  margin: 0 auto;
+  min-height: 84px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 2rem;
-  margin-top: 2rem;
+  grid-template-columns: auto minmax(180px, 1fr) auto auto;
+  gap: 1rem;
+  align-items: center;
 }
 
-/* Sections */
-.section {
-  max-width: 1200px;
-  margin: 4rem auto;
-  padding: 0 2rem;
+.navbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.72rem;
+  font-family: 'Montserrat', sans-serif;
+  white-space: nowrap;
 }
 
-.section h2 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-  color: var(--secondary);
+.logo-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.36rem;
+  color: var(--gold);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.03));
 }
 
-/* Hero Section */
+.navbar-logo small {
+  display: block;
+  font-size: 0.62rem;
+  letter-spacing: 0.22em;
+  color: var(--text-soft);
+}
+
+.navbar-logo strong {
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+}
+
+.navbar-center {
+  width: 100%;
+  max-width: 360px;
+}
+
+.search-bar {
+  position: relative;
+}
+
+.search-bar input {
+  width: 100%;
+  height: 42px;
+  border-radius: 12px;
+  padding: 0 2.5rem 0 0.95rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-main);
+}
+
+.search-bar input:focus {
+  outline: none;
+  border-color: var(--border);
+  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
+}
+
+.search-bar::after {
+  content: '⌕';
+  position: absolute;
+  right: 0.85rem;
+  top: 0.42rem;
+  color: var(--gold);
+  font-size: 1.12rem;
+}
+
+.search-results {
+  position: absolute;
+  inset: calc(100% + 0.5rem) 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: #0d0d0d;
+  z-index: 5;
+  box-shadow: var(--shadow-soft);
+}
+
+.search-result-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 0.95rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  color: var(--text-muted);
+}
+
+.search-result-item:hover {
+  background: rgba(212, 175, 55, 0.08);
+  color: #fff;
+}
+
+.navbar-menu {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 1.3rem;
+}
+
+.navbar-menu a {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  position: relative;
+  transition: color 0.2s ease;
+}
+
+.navbar-menu a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -0.45rem;
+  width: 0;
+  height: 2px;
+  background: var(--gold);
+  transition: width 0.24s ease;
+}
+
+.navbar-menu a:hover,
+.navbar-menu a.active,
+.navbar-menu a.admin-link {
+  color: var(--gold-bright);
+}
+
+.navbar-menu a:hover::after,
+.navbar-menu a.active::after,
+.navbar-menu a.admin-link::after {
+  width: 100%;
+}
+
+.navbar-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(212, 175, 55, 0.25);
+  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gold);
+  background: rgba(212, 175, 55, 0.04);
+  transition: transform 0.24s ease, border-color 0.24s ease;
+  position: relative;
+}
+
+.icon-btn:hover {
+  transform: translateY(-2px);
+  border-color: rgba(212, 175, 55, 0.5);
+}
+
+.cart-count {
+  position: absolute;
+  top: -7px;
+  right: -6px;
+  width: 19px;
+  height: 19px;
+  border-radius: 999px;
+  background: var(--gold);
+  color: #121212;
+  font-size: 0.72rem;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Home */
 .hero {
-  background: linear-gradient(135deg, var(--primary) 0%, #ff8787 100%);
-  color: white;
-  padding: 6rem 2rem;
-  text-align: center;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  overflow: hidden;
+  padding: clamp(1.2rem, 4vw, 3rem);
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  align-items: center;
+  gap: clamp(1rem, 2vw, 2rem);
+  background:
+    linear-gradient(110deg, rgba(3, 3, 3, 0.92), rgba(11, 11, 11, 0.86) 50%, rgba(212, 175, 55, 0.08)),
+    radial-gradient(circle at 74% 18%, rgba(212, 175, 55, 0.17), transparent 35%);
+  box-shadow: var(--shadow-soft);
+}
+
+.hero-content {
+  max-width: 580px;
 }
 
 .hero-content h1 {
-  font-size: 3rem;
+  font-family: 'Montserrat', sans-serif;
+  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
+  line-height: 1.1;
   margin-bottom: 1rem;
 }
 
 .hero-content p {
-  font-size: 1.2rem;
-  margin-bottom: 2rem;
+  color: var(--text-muted);
+  margin-bottom: 1.8rem;
+  max-width: 520px;
 }
 
-/* Product Card */
-.product-card {
-  background: white;
-  border-radius: var(--border-radius);
+.hero-cta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem;
+}
+
+.hero .kicker {
+  display: inline-block;
+  margin-bottom: 0.85rem;
+  border: 1px solid var(--border);
+  color: var(--gold-bright);
+  padding: 0.4rem 0.82rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.hero-media {
+  min-height: 320px;
+  border-radius: 20px;
   overflow: hidden;
-  box-shadow: var(--shadow);
-  transition: transform 0.3s, box-shadow 0.3s;
+  position: relative;
+}
+
+.hero-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-media::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 40%);
+}
+
+.feature-strip {
+  margin-top: 1.2rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  overflow: hidden;
+}
+
+.feature-strip .item {
+  background: rgba(255, 255, 255, 0.015);
+  padding: 1rem;
+  border-right: 1px solid rgba(212, 175, 55, 0.1);
+}
+
+.feature-strip .item:last-child {
+  border-right: none;
+}
+
+.feature-strip .item strong {
+  display: block;
+  font-size: 0.95rem;
+  margin-bottom: 0.15rem;
+}
+
+.feature-strip .item span {
+  font-size: 0.83rem;
+  color: var(--text-soft);
+}
+
+.sale-banner,
+.promo-banner {
+  border: 1px solid var(--border);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(5, 5, 5, 0.75));
+  border-radius: var(--radius-md);
+  padding: 1.8rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.promo-banner {
+  margin: 4rem 0;
+}
+
+.promo-banner input {
+  width: min(340px, 100%);
+  height: 44px;
+}
+
+/* Cards */
+.product-card-link {
+  display: block;
+}
+
+.product-card,
+.category-card,
+.order-card,
+.contact-form,
+.contact-info,
+.profile-form,
+.checkout-form,
+.checkout-summary,
+.cart-items,
+.cart-summary,
+.filters-sidebar {
+  border: 1px solid var(--border);
+  background: linear-gradient(150deg, #0f0f0f, #161616 65%, #131313);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-soft);
+}
+
+.product-card {
+  overflow: hidden;
+  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
 }
 
 .product-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
+  transform: translateY(-6px);
+  box-shadow: var(--shadow-gold);
+  border-color: rgba(212, 175, 55, 0.42);
 }
 
 .product-image-container {
   position: relative;
-  overflow: hidden;
+  background: #0b0b0b;
   aspect-ratio: 1;
-  background: var(--light);
+  overflow: hidden;
 }
 
 .product-image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.3s;
+  transition: transform 0.45s ease;
 }
 
 .product-card:hover .product-image-container img {
-  transform: scale(1.05);
+  transform: scale(1.06);
 }
 
-.discount-badge, .featured-badge {
+.discount-badge,
+.featured-badge {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  background: var(--primary);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  font-weight: bold;
-  font-size: 0.875rem;
+  top: 0.75rem;
+  right: 0.75rem;
+  padding: 0.32rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.discount-badge {
+  background: linear-gradient(140deg, #e17070, #be3b3b);
+  color: #fff;
 }
 
 .featured-badge {
   right: auto;
-  left: 10px;
-  background: #4CAF50;
+  left: 0.75rem;
+  background: rgba(212, 175, 55, 0.16);
+  border: 1px solid var(--border);
+  color: var(--gold-bright);
+}
+
+.product-wishlist-icon {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.52);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.95rem;
+  color: var(--gold-bright);
 }
 
 .product-info {
-  padding: 1.5rem;
+  padding: 1rem;
 }
 
 .product-info h3 {
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  font-size: 1rem;
+  font-weight: 600;
+  min-height: 2.8rem;
+  color: #f4f4f4;
 }
 
 .brand {
-  color: var(--gray);
-  font-size: 0.875rem;
-  margin-bottom: 0.75rem;
+  color: var(--gold);
+  margin-top: 0.22rem;
+  font-size: 0.85rem;
 }
 
 .price {
-  margin-bottom: 0.75rem;
   display: flex;
-  gap: 0.5rem;
+  gap: 0.45rem;
   align-items: center;
+  margin: 0.72rem 0;
 }
 
 .price .original {
-  color: var(--gray);
   text-decoration: line-through;
-  font-size: 0.9rem;
+  color: var(--text-soft);
 }
 
 .price .discounted,
-.price .current {
-  font-weight: bold;
-  font-size: 1.2rem;
-  color: var(--primary);
+.price .current,
+.price span {
+  color: var(--gold-bright);
+  font-weight: 700;
+  font-size: 1.16rem;
 }
 
 .stock {
-  font-size: 0.875rem;
-  margin-bottom: 1rem;
+  font-size: 0.84rem;
 }
 
 .in-stock {
-  color: #4CAF50;
-  font-weight: 600;
+  color: var(--success);
 }
 
 .out-of-stock {
-  color: #e74c3c;
-  font-weight: 600;
+  color: var(--danger);
 }
 
-/* Category Card */
 .category-card {
-  display: block;
-  background: white;
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: var(--shadow);
-  transition: transform 0.3s;
-  cursor: pointer;
-}
-
-.category-card:hover {
-  transform: translateY(-4px);
+  padding: 0.8rem;
 }
 
 .category-card img {
+  border-radius: 12px;
+  height: 210px;
   width: 100%;
-  height: 200px;
   object-fit: cover;
 }
 
 .category-card h3 {
-  padding: 1rem;
-  font-size: 1.2rem;
+  margin-top: 0.9rem;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1rem;
 }
 
 .category-card p {
-  padding: 0 1rem 1rem;
-  color: var(--gray);
-  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-size: 0.85rem;
 }
 
-/* Search Bar */
-.search-bar {
-  position: relative;
-  width: 100%;
-}
-
-.search-bar input {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--gray-light);
-  border-radius: var(--border-radius);
-  font-size: 0.95rem;
-}
-
-.search-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: white;
-  border: 1px solid var(--gray-light);
-  border-top: none;
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 10;
-}
-
-.search-result-item {
-  display: block;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--gray-light);
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.search-result-item:hover {
-  background: var(--light);
-}
-
-/* Filters */
-.filters-sidebar {
-  background: var(--light);
-  padding: 1.5rem;
-  border-radius: var(--border-radius);
-  height: fit-content;
-}
-
-.filters-sidebar h3 {
-  margin-bottom: 1.5rem;
-  font-size: 1.1rem;
-}
-
-.filter-group {
-  margin-bottom: 1.5rem;
-}
-
-.filter-group label {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
-}
-
-.filter-group select,
-.filter-group input[type="checkbox"] {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--gray-light);
-  border-radius: 4px;
-  font-size: 0.9rem;
-}
-
-.filter-group input[type="checkbox"] {
-  width: auto;
-  margin-right: 0.5rem;
-}
-
-/* Products Page */
-.products-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.products-page h1 {
-  margin-bottom: 2rem;
-  font-size: 2rem;
+/* Product page */
+.products-page,
+.sales-page,
+.cart-page,
+.checkout-page,
+.auth-page,
+.profile-page,
+.contact-page,
+.orders-page,
+.wishlist-page,
+.about-page,
+.messages-page,
+.product-detail {
+  padding-top: 1.2rem;
 }
 
 .products-container {
   display: grid;
-  grid-template-columns: 250px 1fr;
-  gap: 2rem;
+  grid-template-columns: 270px 1fr;
+  gap: 1.2rem;
+  margin-top: 1rem;
 }
 
-.products-content {
-  display: flex;
-  flex-direction: column;
+.filters-sidebar {
+  padding: 1rem;
+  position: sticky;
+  top: 96px;
+  height: fit-content;
+}
+
+.filters-sidebar h3 {
+  margin-bottom: 0.9rem;
+  color: var(--gold-bright);
+}
+
+.filter-group {
+  margin-bottom: 0.95rem;
+}
+
+.price-range-inputs {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 0.45rem;
+  align-items: center;
+}
+
+.form-group label,
+.filter-group label {
+  display: block;
+  color: var(--text-muted);
+  margin-bottom: 0.35rem;
+  font-size: 0.9rem;
+}
+
+input,
+select,
+textarea,
+.filter-group input,
+.filter-group select,
+.quantity-selector input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.02);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 11px;
+  padding: 0.62rem 0.8rem;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #737373;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--border);
+  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.11);
 }
 
 .sort-bar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-  gap: 1rem;
   flex-wrap: wrap;
+  align-items: center;
+  gap: 0.7rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 12px;
+  padding: 0.72rem;
 }
 
-.sort-bar select {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--gray-light);
-  border-radius: var(--border-radius);
-}
-
+.sort-bar label,
 .product-count {
-  color: var(--gray);
+  color: var(--text-muted);
   font-size: 0.9rem;
 }
 
-.no-products {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--gray);
+.pagination {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-top: 1.4rem;
 }
 
-/* Product Detail */
-.product-detail {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
+.pagination .page-btn {
+  min-width: 38px;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-muted);
 }
 
+.page-btn {
+  min-width: 38px;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-muted);
+}
+
+.pagination .page-btn.active,
+.pagination .page-btn:hover {
+  color: #121212;
+  background: var(--gold);
+}
+
+/* Product detail */
 .detail-container {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  margin-top: 2rem;
+  grid-template-columns: 1.35fr 1fr;
+  gap: 1.3rem;
 }
 
-.detail-images {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.detail-images,
+.detail-info {
+  border: 1px solid var(--border);
+  background: linear-gradient(135deg, #101010, #161616);
+  border-radius: var(--radius-md);
+  padding: 1rem;
 }
 
 .main-image-container {
   position: relative;
-  width: 100%;
-  max-width: 500px;
-  aspect-ratio: 1 / 1;
-  border-radius: var(--border-radius);
+  border-radius: 14px;
   overflow: hidden;
-  background-color: #f5f5f5;
-  margin: 0 auto;
+  min-height: 460px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .main-image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
-  background-color: #f5f5f5;
+  object-fit: cover;
 }
 
 .nav-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: rgba(255, 255, 255, 0.9);
-  border: none;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  font-size: 24px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s;
-  z-index: 10;
-}
-
-.nav-arrow:hover {
-  background-color: rgba(255, 255, 255, 1);
-  transform: translateY(-50%) scale(1.1);
+  border: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.65);
+  color: var(--gold);
+  font-size: 1.25rem;
 }
 
 .nav-arrow.prev {
-  left: 1rem;
+  left: 0.8rem;
 }
 
 .nav-arrow.next {
-  right: 1rem;
+  right: 0.8rem;
 }
 
 .thumbnail-gallery {
-  display: flex;
-  gap: 0.5rem;
-  overflow-x: auto;
-  padding: 0.5rem 0;
+  margin-top: 0.8rem;
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
 }
 
 .thumbnail {
-  width: 80px;
-  height: 80px;
+  width: 100%;
+  aspect-ratio: 1;
   object-fit: cover;
-  border-radius: 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
   cursor: pointer;
-  border: 2px solid transparent;
-  transition: all 0.3s;
-  flex-shrink: 0;
-}
-
-.thumbnail:hover {
-  border-color: var(--primary-color);
-  opacity: 0.8;
 }
 
 .thumbnail.active {
-  border-color: var(--primary-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-color: var(--gold);
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.26);
 }
 
 .detail-info h1 {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.detail-info .brand {
-  font-size: 1rem;
-  margin-bottom: 1rem;
+  font-size: clamp(1.6rem, 1.35rem + 1.6vw, 2.4rem);
+  line-height: 1.14;
 }
 
 .rating {
-  margin-bottom: 1.5rem;
-  font-size: 1rem;
+  color: var(--gold-bright);
+  margin: 0.55rem 0;
 }
 
-.detail-info .description {
-  color: var(--gray);
-  line-height: 1.8;
-  margin-bottom: 1.5rem;
+.model-code {
+  color: var(--text-soft);
+  font-size: 0.9rem;
+  margin-bottom: 1.1rem;
+}
+
+.description {
+  color: var(--text-muted);
+  margin-bottom: 1.1rem;
 }
 
 .option-group {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
-.option-group label {
+.option-group > label {
   display: block;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
+  color: var(--text-muted);
+  margin-bottom: 0.45rem;
 }
 
-.color-options,
 .size-options {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+  gap: 0.5rem;
 }
 
-.color-btn,
 .size-btn {
-  padding: 0.75rem 1rem;
-  border: 2px solid var(--gray-light);
-  border-radius: var(--border-radius);
-  background: white;
-  cursor: pointer;
-  transition: all 0.3s;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 10px;
+  color: #ececec;
+  min-height: 42px;
 }
 
-.color-btn:hover,
+.size-btn.active,
 .size-btn:hover {
-  border-color: var(--primary);
-}
-
-.color-btn.active,
-.size-btn.active {
-  border-color: var(--primary);
-  background: var(--primary);
-  color: white;
+  border-color: var(--gold);
+  background: rgba(212, 175, 55, 0.11);
 }
 
 .quantity-selector {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: 1px solid var(--gray-light);
-  border-radius: var(--border-radius);
-  width: fit-content;
+  width: 150px;
+  display: grid;
+  grid-template-columns: 42px 1fr 42px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .quantity-selector button {
-  width: 40px;
-  height: 40px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 1.2rem;
+  color: var(--gold);
+  background: rgba(212, 175, 55, 0.04);
 }
 
 .quantity-selector input {
-  width: 60px;
   border: none;
+  border-left: 1px solid var(--border);
+  border-right: 1px solid var(--border);
   text-align: center;
-  font-weight: bold;
-}
-
-.stock-info {
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: var(--light);
-  border-radius: var(--border-radius);
+  border-radius: 0;
 }
 
 .action-buttons {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.action-buttons .btn {
-  flex: 1;
-}
-
-.action-buttons .btn-icon {
-  flex: 0;
-  width: auto;
+  margin: 1.35rem 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.65rem;
 }
 
 .product-details {
-  padding-top: 2rem;
-  border-top: 1px solid var(--gray-light);
-}
-
-.product-details h3 {
-  margin-bottom: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding-top: 1rem;
 }
 
 .product-details ul {
   list-style: none;
-}
-
-.product-details li {
-  padding: 0.5rem 0;
-  color: var(--gray);
-}
-
-/* Cart Page */
-.cart-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.cart-page h1 {
-  margin-bottom: 2rem;
-}
-
-.empty-cart {
-  text-align: center;
-  padding: 3rem;
-  background: var(--light);
-  border-radius: var(--border-radius);
-}
-
-.empty-cart p {
-  margin-bottom: 1.5rem;
-  color: var(--gray);
-}
-
-.cart-container {
   display: grid;
-  grid-template-columns: 1fr 350px;
-  gap: 2rem;
+  gap: 0.33rem;
+  color: var(--text-muted);
 }
 
-.cart-table {
-  width: 100%;
-  border-collapse: collapse;
+/* Cart */
+.cart-container,
+.checkout-container,
+.profile-container,
+.contact-container {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  gap: 1rem;
+  margin-top: 1rem;
 }
 
-.cart-table th {
-  background: var(--light);
+.cart-items,
+.cart-summary {
   padding: 1rem;
-  text-align: left;
-  font-weight: 600;
-  border-bottom: 2px solid var(--gray-light);
 }
 
-.cart-table td {
-  padding: 1rem;
-  border-bottom: 1px solid var(--gray-light);
+.cart-item {
+  display: grid;
+  grid-template-columns: 88px 1fr auto;
+  gap: 0.8rem;
+  align-items: center;
+  padding: 0.9rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.cart-item:last-child {
+  border-bottom: none;
 }
 
 .cart-item-product {
   display: flex;
-  gap: 1rem;
+  gap: 0.72rem;
   align-items: center;
 }
 
 .cart-item-product img {
-  width: 80px;
-  height: 80px;
+  width: 82px;
+  height: 82px;
+  border-radius: 10px;
   object-fit: cover;
-  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.cart-item > img {
+  width: 82px;
+  height: 82px;
+  border-radius: 10px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.09);
 }
 
 .product-name {
@@ -820,1081 +1038,635 @@ button {
 }
 
 .quantity-control {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: 1px solid var(--gray-light);
-  border-radius: 4px;
-  width: fit-content;
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .quantity-control button {
   width: 30px;
-  height: 30px;
-  background: transparent;
-  cursor: pointer;
+  color: var(--gold);
 }
 
-.cart-summary {
-  background: var(--light);
-  padding: 1.5rem;
-  border-radius: var(--border-radius);
-  height: fit-content;
-  position: sticky;
-  top: 100px;
+.quantity-control span {
+  width: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #efefef;
 }
 
-.cart-summary h3 {
-  margin-bottom: 1.5rem;
+.summary-rows,
+.summary-items {
+  display: grid;
+  gap: 0.55rem;
 }
 
-.summary-rows {
-  margin-bottom: 1.5rem;
-}
-
-.summary-row {
+.summary-row,
+.summary-item {
   display: flex;
   justify-content: space-between;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--gray-light);
+  color: var(--text-muted);
 }
 
-.summary-row.total {
-  font-weight: bold;
-  font-size: 1.1rem;
-  border-top: 2px solid var(--gray-light);
-  border-bottom: none;
-  padding: 1rem 0;
-}
-
-/* Checkout Page */
-.checkout-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.checkout-page h1 {
-  margin-bottom: 2rem;
-}
-
-.checkout-container {
-  display: grid;
-  grid-template-columns: 1fr 350px;
-  gap: 2rem;
+.summary-row.total,
+.summary-total {
+  margin-top: 0.8rem;
+  padding-top: 0.8rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  color: #fff;
+  font-weight: 700;
 }
 
+/* Checkout */
 .checkout-form,
 .checkout-summary {
-  background: var(--light);
-  padding: 2rem;
-  border-radius: var(--border-radius);
+  padding: 1rem;
 }
 
 .form-section {
-  margin-bottom: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 0.9rem;
+  margin-bottom: 0.9rem;
 }
 
 .form-section h2 {
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--gray-light);
-  border-radius: var(--border-radius);
-  font-size: 0.95rem;
-  font-family: inherit;
-  transition: border-color 0.3s;
-}
-
-.form-group input:focus,
-.form-group select:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: var(--primary);
-}
-
-.form-group input.error,
-.form-group select.error,
-.form-group textarea.error {
-  border-color: #f44336;
-}
-
-.required {
-  color: #f44336;
-  margin-left: 2px;
-}
-
-.error-message {
-  display: block;
-  color: #f44336;
-  font-size: 0.85rem;
-  margin-top: 0.25rem;
-}
-
-.payment-info {
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
-  color: var(--secondary);
-}
-
-.text-muted {
-  color: var(--gray);
-  font-size: 0.9rem;
+  font-size: 1.02rem;
+  color: var(--gold-bright);
+  margin-bottom: 0.6rem;
 }
 
 .form-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
 }
 
-.checkout-summary {
-  height: fit-content;
-  position: sticky;
-  top: 100px;
+.required {
+  color: #e69191;
 }
 
-.summary-items {
-  margin-bottom: 1.5rem;
-}
-
-.summary-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--gray-light);
-  font-size: 0.9rem;
-}
-
-.summary-total {
-  padding-top: 1rem;
-  font-size: 1.1rem;
-  color: var(--primary);
-}
-
-/* Auth Pages */
-.auth-page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: calc(100vh - 200px);
-  padding: 2rem;
-}
-
-.auth-container {
-  background: white;
-  padding: 3rem;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-lg);
-  width: 100%;
-  max-width: 400px;
-}
-
-.auth-container h1 {
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.auth-container form {
-  margin-bottom: 1.5rem;
-}
-
-.auth-container p {
-  text-align: center;
-  color: var(--gray);
-  margin-bottom: 1rem;
-}
-
-.auth-container a {
-  color: var(--primary);
-  font-weight: 600;
-}
-
-.forgot-password-link {
-  text-align: right;
-  margin-bottom: 1rem;
-  margin-top: -0.5rem;
-}
-
-.link-button {
-  background: none;
-  border: none;
-  color: var(--primary);
-  font-size: 0.9rem;
-  cursor: pointer;
-  padding: 0;
-  text-decoration: underline;
-  transition: color 0.3s;
-}
-
-.link-button:hover {
-  color: var(--primary-dark);
-}
-
-.auth-switch {
-  margin-top: 1.5rem !important;
-}
-
-.modal-description {
-  color: var(--gray);
-  margin-bottom: 1.5rem;
-  text-align: left !important;
-}
-
-.admin-demo {
-  color: #ff6b6b !important;
-  font-weight: bold !important;
+.error,
+.error-message {
+  color: #ff8d8d;
 }
 
 .error-message {
-  background: #f8d7da;
-  color: #721c24;
+  font-size: 0.8rem;
+  margin-top: 0.2rem;
+}
+
+.payment-info,
+.text-muted {
+  color: var(--text-muted);
+}
+
+/* Auth */
+.auth-page {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.auth-container {
+  width: min(1040px, 100%);
+  min-height: 620px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin: 1.4rem auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-soft);
+  background: #101010;
+}
+
+.auth-visual {
+  position: relative;
+  background: #070707;
+}
+
+.auth-visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.7;
+}
+
+.auth-visual-copy {
+  position: absolute;
+  inset: auto 1.2rem 1.2rem;
   padding: 1rem;
-  border-radius: var(--border-radius);
+  border-radius: 12px;
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.auth-panel {
+  padding: clamp(1rem, 3vw, 2.2rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.auth-panel h1 {
   margin-bottom: 1rem;
-  text-align: center;
 }
 
-.demo-account {
-  background: #e3f2fd;
+.forgot-password-link,
+.auth-switch {
+  margin-top: 0.65rem;
+}
+
+.link-button {
+  color: var(--gold-bright);
+  font-size: 0.88rem;
+}
+
+.auth-meta {
+  margin: 0.7rem 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-muted);
+  font-size: 0.88rem;
+}
+
+.auth-meta label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.auth-switch a {
+  color: var(--gold-bright);
+}
+
+/* Modal + toast */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.62);
+  display: grid;
+  place-items: center;
+  z-index: 80;
   padding: 1rem;
-  border-radius: var(--border-radius);
-  margin-top: 1.5rem;
-  font-size: 0.875rem;
 }
 
-.demo-account p {
-  margin: 0.25rem 0;
+.modal-content {
+  width: min(530px, 100%);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: #111;
+}
+
+.modal-header {
+  padding: 0.9rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-body {
+  padding: 1rem;
+}
+
+.modal-close {
+  color: #d7d7d7;
+  font-size: 1.25rem;
+}
+
+.cart-modal {
+  text-align: center;
+  padding: 1.4rem;
+}
+
+.cart-modal-icon {
+  width: 54px;
+  height: 54px;
+  margin: 0 auto 0.8rem;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  color: var(--gold);
+  display: grid;
+  place-items: center;
+}
+
+.cart-modal-actions {
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.6rem;
+  justify-content: center;
+}
+
+.toast {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  width: min(360px, calc(100vw - 2rem));
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.85rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: #111;
+  box-shadow: var(--shadow-soft);
+  z-index: 95;
+}
+
+.toast-success .toast-icon {
+  color: var(--success);
+}
+
+.toast-error .toast-icon {
+  color: #ff8d8d;
+}
+
+.toast-info .toast-icon {
+  color: #8fc1ff;
+}
+
+.toast-close {
+  margin-left: auto;
+  color: #bbb;
+}
+
+/* Profile */
+.profile-shell {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.profile-nav {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-glass);
+  padding: 0.7rem;
+  height: fit-content;
+}
+
+.profile-nav button,
+.profile-nav a {
+  width: 100%;
   text-align: left;
+  color: var(--text-muted);
+  padding: 0.62rem 0.75rem;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  display: block;
 }
 
-/* Profile Page */
-.profile-page,
-.orders-page,
-.wishlist-page {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 2rem;
+.profile-nav .active,
+.profile-nav button:hover,
+.profile-nav a:hover {
+  color: var(--gold-bright);
+  border-color: var(--border);
+  background: rgba(212, 175, 55, 0.09);
 }
 
-.profile-page h1,
-.orders-page h1,
-.wishlist-page h1 {
-  margin-bottom: 2rem;
+.profile-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 0.9rem;
 }
 
-.profile-container {
-  background: var(--light);
-  padding: 2rem;
-  border-radius: var(--border-radius);
+.profile-metric {
+  border: 1px solid var(--border);
+  background: rgba(212, 175, 55, 0.05);
+  border-radius: 12px;
+  padding: 0.75rem;
+}
+
+.profile-metric span {
+  color: var(--text-soft);
+  font-size: 0.8rem;
+}
+
+.profile-metric strong {
+  font-size: 1.5rem;
+  color: var(--gold-bright);
+  font-family: 'Montserrat', sans-serif;
+}
+
+.admin-pill {
+  margin-left: 0.7rem;
+  border: 1px solid var(--border);
+  color: var(--gold-bright);
+  border-radius: 999px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.75rem;
+}
+
+.profile-forms {
+  display: grid;
+  gap: 0.95rem;
+}
+
+.profile-form {
+  padding: 1rem;
 }
 
 .profile-form h2 {
-  font-size: 1.3rem;
-  margin: 1.5rem 0 1rem;
+  margin-bottom: 0.75rem;
+  color: var(--gold-bright);
 }
 
-.profile-form h2:first-child {
-  margin-top: 0;
-}
-
-/* Orders Page */
-.orders-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
+/* Orders & wishlist */
+.orders-container,
+.wishlist-container {
+  margin-top: 1rem;
+  display: grid;
+  gap: 0.95rem;
 }
 
 .order-card {
-  background: white;
-  border: 1px solid var(--gray-light);
-  border-radius: var(--border-radius);
-  padding: 2rem;
-  box-shadow: var(--shadow);
+  padding: 1rem;
 }
 
 .order-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid var(--gray-light);
-  padding-bottom: 1rem;
+  gap: 0.75rem;
 }
 
-.order-header h3 {
-  font-size: 1.2rem;
+.status,
+.status-badge {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.72rem;
+  color: var(--gold-bright);
 }
 
-.status {
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.status.pending {
-  background: #fff3cd;
-  color: #856404;
-}
-
-.status.paid {
-  background: #d4edda;
-  color: #155724;
-}
-
-.status.shipped {
-  background: #d1ecf1;
-  color: #0c5460;
-}
-
-.status.delivered {
-  background: #d4edda;
-  color: #155724;
-}
-
-.order-details {
-  margin-bottom: 1.5rem;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-  color: var(--gray);
-}
-
-.order-items {
-  margin-bottom: 1.5rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--gray-light);
+.order-details,
+.order-items,
+.shipping-info {
+  margin-top: 0.75rem;
 }
 
 .order-item {
-  display: flex;
-  gap: 1rem;
+  display: grid;
+  grid-template-columns: 60px 1fr auto;
+  gap: 0.6rem;
   align-items: center;
-  margin-bottom: 0.75rem;
+  padding: 0.45rem 0;
 }
 
 .order-item img {
   width: 60px;
   height: 60px;
+  border-radius: 9px;
   object-fit: cover;
-  border-radius: 4px;
 }
 
-.shipping-info {
-  background: var(--light);
-  padding: 1rem;
-  border-radius: var(--border-radius);
-}
-
-.shipping-info h4 {
-  margin-bottom: 0.5rem;
-}
-
-.shipping-info p {
-  font-size: 0.9rem;
-  color: var(--gray);
-  margin-bottom: 0.25rem;
-}
-
-/* Wishlist Page */
 .wishlist-item {
-  position: relative;
+  display: grid;
+  gap: 0.7rem;
 }
 
-.wishlist-item .btn {
-  margin-top: 0.5rem;
-}
-
-/* About Page */
+/* About + contact */
 .about-page {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.about-page h1 {
-  margin-bottom: 2rem;
-  font-size: 2.5rem;
+  display: grid;
+  gap: 0.95rem;
 }
 
 .about-section {
-  margin-bottom: 3rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-glass);
+  padding: 1rem;
 }
 
 .about-section h2 {
-  font-size: 1.8rem;
-  margin-bottom: 1rem;
-  color: var(--primary);
+  margin-bottom: 0.45rem;
+  color: var(--gold-bright);
 }
 
-.about-section p {
-  font-size: 1rem;
-  line-height: 1.8;
-  color: var(--gray);
+.about-section p,
+.values-list li {
+  color: var(--text-muted);
 }
 
 .values-list {
   list-style: none;
-  margin-top: 1rem;
-}
-
-.values-list li {
-  padding: 1rem;
-  margin-bottom: 0.75rem;
-  background: var(--light);
-  border-left: 4px solid var(--primary);
-  border-radius: 4px;
+  display: grid;
+  gap: 0.45rem;
 }
 
 .why-us-grid {
+  margin-top: 0.75rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin-top: 1.5rem;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .why-us-card {
-  background: var(--light);
-  padding: 1.5rem;
-  border-radius: var(--border-radius);
-  text-align: center;
-  transition: transform 0.3s;
-}
-
-.why-us-card:hover {
-  transform: translateY(-4px);
-}
-
-.why-us-card h3 {
-  font-size: 1.2rem;
-  margin-bottom: 0.75rem;
-}
-
-/* Contact Page */
-.contact-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.contact-page h1 {
-  margin-bottom: 2rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.8rem;
+  background: rgba(255, 255, 255, 0.02);
 }
 
 .contact-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  margin-top: 2rem;
-}
-
-.contact-info h2 {
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.info-item {
-  margin-bottom: 2rem;
-}
-
-.info-item h3 {
-  font-size: 1.1rem;
-  margin-bottom: 0.75rem;
-  color: var(--primary);
-}
-
-.info-item p {
-  color: var(--gray);
-  line-height: 1.8;
-}
-
-.social-links {
-  display: flex;
-  gap: 1rem;
-}
-
-.social-links a {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  background: var(--primary);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.3s;
-}
-
-.social-links a:hover {
-  background: var(--primary-dark);
-}
-
-.social-icons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
   margin-top: 1rem;
 }
 
-.social-icon {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border-radius: var(--border-radius);
-  background: var(--light);
-  color: var(--secondary);
-  transition: all 0.3s;
-  text-decoration: none;
-}
-
-.social-icon:hover {
-  transform: translateX(8px);
-  box-shadow: var(--shadow);
-}
-
-.social-icon svg {
-  flex-shrink: 0;
-}
-
-.social-icon.instagram:hover {
-  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
-  color: white;
-}
-
-.social-icon.whatsapp:hover {
-  background: #25D366;
-  color: white;
-}
-
-.social-icon span {
-  font-weight: 500;
-  font-size: 1rem;
-}
-
+.contact-info,
 .contact-form {
-  background: var(--light);
-  padding: 2rem;
-  border-radius: var(--border-radius);
+  padding: 1rem;
 }
 
-.contact-form h2 {
-  font-size: 1.5rem;
-  margin-bottom: 1.5rem;
+.info-item {
+  margin-bottom: 0.9rem;
+}
+
+.info-item h3 {
+  color: var(--gold-bright);
+  margin-bottom: 0.2rem;
+}
+
+.social-links,
+.social-icons {
+  display: flex;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+}
+
+.social-icon,
+.social-links a {
+  border: 1px solid var(--border);
+  padding: 0.5rem 0.7rem;
+  border-radius: 10px;
+  color: var(--gold);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
 }
 
 .success-message {
-  background: #d4edda;
-  color: #155724;
-  padding: 1rem;
-  border-radius: var(--border-radius);
-  margin-bottom: 1rem;
-  text-align: center;
-  font-weight: 600;
-}
-
-/* Sales Page */
-.sales-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.sales-header {
-  background: linear-gradient(135deg, var(--primary) 0%, #ff8787 100%);
-  color: white;
-  padding: 3rem 2rem;
-  border-radius: var(--border-radius);
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.sales-header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.sales-header p {
-  font-size: 1.1rem;
-}
-
-/* Sale Banner */
-.sale-banner {
-  background: linear-gradient(135deg, var(--primary) 0%, #ff8787 100%);
-  color: white;
-  padding: 3rem 2rem;
-  text-align: center;
-  border-radius: var(--border-radius);
-}
-
-.sale-banner h2 {
-  color: white;
-}
-
-.sale-banner p {
-  font-size: 1.1rem;
-  margin-bottom: 1.5rem;
-}
-
-/* Promo Banner */
-.promo-banner {
-  background: linear-gradient(135deg, var(--secondary) 0%, #424242 100%);
-  color: white;
-  padding: 3rem 2rem;
-  text-align: center;
-  border-radius: var(--border-radius);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.promo-banner h3 {
-  font-size: 1.5rem;
-}
-
-.promo-banner input {
-  max-width: 400px;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: none;
-  border-radius: var(--border-radius);
-}
-
-.promo-banner .btn {
-  max-width: 400px;
-}
-
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.modal-content {
-  background: white;
-  border-radius: var(--border-radius);
-  padding: 2rem;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: var(--shadow-lg);
-  animation: slideUp 0.3s ease-out;
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--gray-light);
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-size: 1.5rem;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  color: var(--gray);
-  cursor: pointer;
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.3s;
-}
-
-.modal-close:hover {
-  color: var(--secondary);
-}
-
-.modal-body {
-  margin-bottom: 0;
-}
-
-/* Cart Modal Specific */
-.cart-modal {
-  text-align: center;
-  max-width: 400px;
-}
-
-.cart-modal-icon {
-  width: 60px;
-  height: 60px;
-  background: #4CAF50;
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  margin: 0 auto 1rem;
-}
-
-.cart-modal h2 {
-  margin-bottom: 0.5rem;
-  color: var(--secondary);
-}
-
-.cart-modal-message {
-  color: var(--gray);
-  margin-bottom: 1.5rem;
-}
-
-.cart-modal-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
-
-.cart-modal-actions .btn {
-  flex: 1;
-  max-width: 200px;
-}
-
-/* Toast Notifications */
-.toast {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  background: white;
-  padding: 1rem 1.5rem;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  z-index: 1001;
-  min-width: 300px;
-  animation: slideInRight 0.3s ease-out;
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(400px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.toast-success {
-  border-left: 4px solid #4CAF50;
-}
-
-.toast-error {
-  border-left: 4px solid #f44336;
-}
-
-.toast-info {
-  border-left: 4px solid #2196F3;
-}
-
-.toast-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  flex-shrink: 0;
-}
-
-.toast-success .toast-icon {
-  background: #4CAF50;
-  color: white;
-}
-
-.toast-error .toast-icon {
-  background: #f44336;
-  color: white;
-}
-
-.toast-info .toast-icon {
-  background: #2196F3;
-  color: white;
-}
-
-.toast-message {
-  flex: 1;
-  color: var(--secondary);
-}
-
-.toast-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: var(--gray);
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.toast-close:hover {
-  color: var(--secondary);
+  border: 1px solid rgba(103, 197, 131, 0.4);
+  background: rgba(103, 197, 131, 0.11);
+  color: #87e0a1;
+  border-radius: 10px;
+  padding: 0.65rem;
+  margin-bottom: 0.8rem;
 }
 
 /* Footer */
 .footer {
-  background: var(--secondary);
-  color: white;
   margin-top: auto;
-  padding: 3rem 0 1rem;
+  border-top: 1px solid var(--border);
+  background: #080808;
 }
 
 .footer-container {
-  max-width: 1200px;
+  width: min(1320px, 94vw);
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 2.2rem 0 1.4rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
-  margin-bottom: 2rem;
-}
-
-.footer-section h3,
-.footer-section h4 {
-  margin-bottom: 1rem;
-  font-size: 1rem;
+  gap: 1rem;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr;
 }
 
 .footer-brand {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: 0.62rem;
+  margin-bottom: 0.65rem;
 }
 
 .footer-logo {
-  font-size: 1.5rem;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--gold);
 }
 
-.footer-brand h3 {
-  margin: 0;
-  font-size: 1.2rem;
-}
-
-.footer-section p {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 0.9rem;
-  line-height: 1.8;
-}
-
-.footer-section a {
-  display: block;
-  color: rgba(255, 255, 255, 0.7);
+.footer-section h4 {
+  color: var(--gold-bright);
   margin-bottom: 0.5rem;
-  transition: color 0.3s;
 }
 
-.footer-section a:hover {
-  color: white;
+.footer-section ul {
+  list-style: none;
+  display: grid;
+  gap: 0.35rem;
 }
 
-.social-links {
-  display: flex;
-  gap: 1rem;
-  margin-top: 1rem;
+.footer-section li,
+.footer-section p {
+  color: var(--text-muted);
 }
 
 .footer-bottom {
-  text-align: center;
-  padding-top: 2rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.9rem;
+  border-top: 1px solid rgba(212, 175, 55, 0.12);
+  color: var(--text-soft);
+  padding: 0.8rem 0;
+  width: min(1320px, 94vw);
+  margin: 0 auto;
 }
 
-/* Loading & Empty States */
-.loading,
-.empty-state {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--gray);
-  font-size: 1.1rem;
+/* Admin and models fallback theme */
+.admin-page,
+.models-page,
+.admin-content,
+.admin-tabs,
+.admin-form,
+.admin-grid,
+.admin-table {
+  color: var(--text-main);
 }
 
-.empty-state {
-  background: var(--light);
-  border-radius: var(--border-radius);
-  margin: 2rem auto;
-  max-width: 500px;
-}
-
-.empty-state .btn {
-  margin-top: 1.5rem;
-}
-
-.text-muted {
-  color: var(--gray);
-  font-size: 0.9rem;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
+/* Responsive */
+@media (max-width: 1180px) {
   .navbar-container {
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-
-  .navbar-center {
-    order: 3;
-    flex-basis: 100%;
-    max-width: 100%;
+    grid-template-columns: auto 1fr auto;
   }
 
   .navbar-menu {
-    gap: 1rem;
-    font-size: 0.9rem;
+    order: 4;
+    grid-column: 1 / -1;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-bottom: 0.7rem;
   }
 
-  .grid {
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 1rem;
-  }
-
-  .hero-content h1 {
-    font-size: 2rem;
-  }
-
-  .detail-container {
-    grid-template-columns: 1fr;
-  }
-
-  .products-container {
+  .products-container,
+  .detail-container,
+  .cart-container,
+  .checkout-container,
+  .profile-shell,
+  .contact-container,
+  .auth-container,
+  .footer-container {
     grid-template-columns: 1fr;
   }
 
   .filters-sidebar {
-    display: none;
-  }
-
-  .cart-container,
-  .checkout-container,
-  .contact-container {
-    grid-template-columns: 1fr;
-  }
-
-  .cart-summary,
-  .checkout-summary {
     position: static;
   }
 
-  .cart-table {
-    font-size: 0.85rem;
+  .feature-strip {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .cart-table th,
-  .cart-table td {
-    padding: 0.5rem;
-  }
-
-  .sort-bar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .footer-container {
+  .hero {
     grid-template-columns: 1fr;
   }
+
+  .main-image-container {
+    min-height: 320px;
+  }
 }
 
-@media (max-width: 480px) {
-  .navbar-logo {
-    font-size: 1.2rem;
+@media (max-width: 720px) {
+  .main-content {
+    width: min(1320px, 96vw);
+    padding-top: 1rem;
+  }
+
+  .navbar-container {
+    min-height: 76px;
+    gap: 0.6rem;
+  }
+
+  .navbar-center {
+    grid-column: 1 / -1;
+    order: 3;
+    max-width: 100%;
   }
 
   .navbar-icons {
-    gap: 0.5rem;
+    justify-content: flex-end;
   }
 
-  .btn {
-    padding: 0.6rem 1rem;
-    font-size: 0.9rem;
+  .feature-strip,
+  .profile-metrics,
+  .form-row {
+    grid-template-columns: 1fr;
   }
 
-  .grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 0.75rem;
+  .action-buttons {
+    grid-template-columns: 1fr;
   }
 
-  .hero-content h1 {
-    font-size: 1.5rem;
+  .cart-item {
+    grid-template-columns: 1fr;
+    text-align: left;
   }
 
-  .section {
-    padding: 0 1rem;
-  }
-
-  .auth-container {
-    padding: 1.5rem;
-  }
-
-  .contact-form,
-  .profile-container {
-    padding: 1rem;
+  .cart-modal-actions {
+    flex-direction: column;
   }
 }