diff --git a/.workbench/Screenshot_1.png b/.workbench/Screenshot_1.png
new file mode 100644
index 0000000..8886c23
Binary files /dev/null and b/.workbench/Screenshot_1.png differ
diff --git a/.workbench/Screenshot_2.png b/.workbench/Screenshot_2.png
new file mode 100644
index 0000000..1acf8d4
Binary files /dev/null and b/.workbench/Screenshot_2.png differ
diff --git a/.workbench/Screenshot_3.png b/.workbench/Screenshot_3.png
new file mode 100644
index 0000000..e3e1068
Binary files /dev/null and b/.workbench/Screenshot_3.png differ
diff --git a/wwwroot/icons/bank.svg b/wwwroot/icons/bank.svg
new file mode 100644
index 0000000..838f254
--- /dev/null
+++ b/wwwroot/icons/bank.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m24 23a1 1 0 0 1 -1 1h-22a1 1 0 0 1 0-2h22a1 1 0 0 1 1 1zm-23.709-14.448a2.443 2.443 0 0 1 .153-2.566 4.716 4.716 0 0 1 1.668-1.5l7.501-3.904a5.174 5.174 0 0 1 4.774 0l7.5 3.907a4.716 4.716 0 0 1 1.668 1.5 2.443 2.443 0 0 1 .153 2.566 2.713 2.713 0 0 1 -2.416 1.445h-.292v8h1a1 1 0 0 1 0 2h-20a1 1 0 0 1 0-2h1v-8h-.292a2.713 2.713 0 0 1 -2.417-1.448zm4.709 9.448h3v-8h-3zm5-8v8h4v-8zm9 0h-3v8h3zm-16.937-2.375a.717.717 0 0 0 .645.375h18.584a.717.717 0 0 0 .645-.375.452.452 0 0 0 -.024-.5 2.7 2.7 0 0 0 -.949-.864l-7.5-3.907a3.176 3.176 0 0 0 -2.926 0l-7.5 3.907a2.712 2.712 0 0 0 -.949.865.452.452 0 0 0 -.026.499z"/></svg>
\ No newline at end of file
diff --git a/wwwroot/icons/coins.svg b/wwwroot/icons/coins.svg
new file mode 100644
index 0000000..6dbea92
--- /dev/null
+++ b/wwwroot/icons/coins.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M16.5,0c-4.206,0-7.5,1.977-7.5,4.5v2.587c-.483-.057-.985-.087-1.5-.087C3.294,7,0,8.977,0,11.5v8c0,2.523,3.294,4.5,7.5,4.5,3.407,0,6.216-1.297,7.16-3.131,.598,.087,1.214,.131,1.84,.131,4.206,0,7.5-1.977,7.5-4.5V4.5c0-2.523-3.294-4.5-7.5-4.5Zm5.5,12.5c0,1.18-2.352,2.5-5.5,2.5-.512,0-1.014-.035-1.5-.103v-1.984c.49,.057,.992,.087,1.5,.087,2.194,0,4.14-.538,5.5-1.411v.911ZM2,14.589c1.36,.873,3.306,1.411,5.5,1.411s4.14-.538,5.5-1.411v.911c0,1.18-2.352,2.5-5.5,2.5s-5.5-1.32-5.5-2.5v-.911Zm20-6.089c0,1.18-2.352,2.5-5.5,2.5-.535,0-1.06-.038-1.566-.112-.193-.887-.8-1.684-1.706-2.323,.984,.28,2.092,.435,3.272,.435,2.194,0,4.14-.538,5.5-1.411v.911Zm-5.5-6.5c3.148,0,5.5,1.32,5.5,2.5s-2.352,2.5-5.5,2.5-5.5-1.32-5.5-2.5,2.352-2.5,5.5-2.5ZM7.5,9c3.148,0,5.5,1.32,5.5,2.5s-2.352,2.5-5.5,2.5-5.5-1.32-5.5-2.5,2.352-2.5,5.5-2.5Zm0,13c-3.148,0-5.5-1.32-5.5-2.5v-.911c1.36,.873,3.306,1.411,5.5,1.411s4.14-.538,5.5-1.411v.911c0,1.18-2.352,2.5-5.5,2.5Zm9-3c-.512,0-1.014-.035-1.5-.103v-1.984c.49,.057,.992,.087,1.5,.087,2.194,0,4.14-.538,5.5-1.411v.911c0,1.18-2.352,2.5-5.5,2.5Z"/></svg>
diff --git a/wwwroot/icons/credit-card.svg b/wwwroot/icons/credit-card.svg
new file mode 100644
index 0000000..e061fd1
--- /dev/null
+++ b/wwwroot/icons/credit-card.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><circle cx="5.5" cy="15.5" r="1.5"/><path d="M19,3H5A5.006,5.006,0,0,0,0,8v8a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V8A5.006,5.006,0,0,0,19,3ZM5,5H19a3,3,0,0,1,3,3H2A3,3,0,0,1,5,5ZM19,19H5a3,3,0,0,1-3-3V10H22v6A3,3,0,0,1,19,19Z"/></svg>
diff --git a/wwwroot/icons/gift-card.svg b/wwwroot/icons/gift-card.svg
new file mode 100644
index 0000000..d761c8d
--- /dev/null
+++ b/wwwroot/icons/gift-card.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M19,6h-1.226c1.413-1.38,1.629-3.195,.545-4.64-.545-.728-1.34-1.198-2.239-1.326-.902-.131-1.795,.102-2.521,.646-.678,.508-1.178,1.155-1.547,1.813-.369-.659-.869-1.305-1.547-1.813C9.739,.135,8.844-.097,7.945,.034c-.899,.128-1.694,.599-2.239,1.326-1.078,1.437-.87,3.24,.547,4.64h-1.253C2.243,6,0,8.243,0,11v8c0,2.757,2.243,5,5,5h14c2.757,0,5-2.243,5-5V11c0-2.757-2.243-5-5-5Zm-4.24-3.72c.245-.184,.537-.28,.837-.28,.403,0,.898,.261,1.123,.56,.641,.854,.043,1.644-.343,2.013-1.561,1.385-3.217,1.427-3.358,1.428h-.013c.019-.091,.025-.186,.017-.283l-.002-.021c.089-.598,.461-2.458,1.739-3.416Zm-7.084,2.316c-.414-.395-1.011-1.182-.37-2.037,.225-.299,.552-.493,.922-.546,.373-.048,.739,.043,1.038,.267,1.279,.959,1.651,2.822,1.74,3.416l-.002,.021c-.008,.097-.002,.192,.017,.283h-.013c-.141,0-1.797-.042-3.332-1.403Zm-2.676,3.403h5.824c-.751,1.951-3.666,1.999-3.826,2-.552,0-.999,.448-.999,1s.448,1,1,1c1.417,0,3.697-.488,5-2.056,1.303,1.569,3.583,2.056,5,2.056,.552,0,1-.447,1-1s-.448-1-1-1c-.142,0-3.078-.026-3.827-2h5.827c1.654,0,3,1.346,3,3v6H2v-6c0-1.654,1.346-3,3-3Zm14,14H5c-1.654,0-3-1.346-3-3H22c0,1.654-1.346,3-3,3Z"/></svg>
diff --git a/wwwroot/icons/loan.svg b/wwwroot/icons/loan.svg
new file mode 100644
index 0000000..7db1e08
--- /dev/null
+++ b/wwwroot/icons/loan.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="m23.018,8.785c-.595-.542-1.356-.821-2.169-.782-.804.037-1.545.386-2.085.981l-3.217,3.534c-.427-.704-1.124-1.224-1.945-1.425.246-.477.398-1.009.398-1.582,0-2.517-1.763-5.472-4.115-6.569.337-.352.666-.743.93-1.163.488-.772-.048-1.78-.962-1.78h-3.708c-.914,0-1.449,1.008-.962,1.78.265.42.593.81.93,1.163-2.352,1.096-4.115,4.052-4.115,6.569,0,.654.193,1.26.508,1.783-1.468.593-2.508,2.027-2.508,3.705v5c0,2.206,1.794,4,4,4h4.965c2.85,0,5.57-1.22,7.467-3.348l6.804-7.637c1.094-1.225.996-3.123-.218-4.23Zm-15.018-4.285c1.821.049,4,2.738,4,5.012,0,.821-.673,1.488-1.5,1.488h-5c-.827,0-1.5-.667-1.5-1.488,0-2.274,2.179-4.963,4-5.012Zm13.742,7.184l-6.805,7.638c-1.517,1.702-3.693,2.678-5.973,2.678h-4.965c-1.103,0-2-.897-2-2v-5c0-1.103.897-2,2-2h8.857c.63,0,1.143.512,1.143,1.142,0,.564-.422,1.051-.98,1.131l-5.161.737c-.547.078-.927.584-.849,1.131.078.546.584.922,1.132.848l5.161-.737c1.175-.168,2.128-.988,2.514-2.058l4.427-4.865c.181-.2.43-.316.699-.329.271-.007.528.082.728.262.407.372.44,1.009.072,1.421Z"/>
+</svg>
diff --git a/wwwroot/icons/mobilepay.svg b/wwwroot/icons/mobilepay.svg
new file mode 100644
index 0000000..feb2a8c
--- /dev/null
+++ b/wwwroot/icons/mobilepay.svg
@@ -0,0 +1,19 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="1.6799999999999997">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="3.936">
+
<defs>
+
<style>.a{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}</style>
+
</defs>
+
<path class="a" d="M18.924,19.1788l4.3315,10.45a21.1489,21.1489,0,0,1,9.042-2.1117,19.2351,19.2351,0,0,1,8.7714,2.1117v-10.45a10.3349,10.3349,0,0,0-3.5735-1.4078l-2.22-5.5768A20.3917,20.3917,0,0,0,26.45,13.9268C20.1693,16.6882,18.924,19.1788,18.924,19.1788Z"/>
+
<path class="a" d="M32.8978,27.5311,35.6164,33.76a2.3649,2.3649,0,0,1-1.2215,3.1135L21.9571,42.302a2.3651,2.3651,0,0,1-3.1135-1.2215L7.1292,14.24a2.3649,2.3649,0,0,1,1.2215-3.1135L20.7885,5.698A2.3651,2.3651,0,0,1,23.902,6.92l2.98,6.8279"/>
+
</g>
+
<g id="SVGRepo_iconCarrier">
+
<defs>
+
<style>.a{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}</style>
+
</defs>
+
<path class="a" d="M18.924,19.1788l4.3315,10.45a21.1489,21.1489,0,0,1,9.042-2.1117,19.2351,19.2351,0,0,1,8.7714,2.1117v-10.45a10.3349,10.3349,0,0,0-3.5735-1.4078l-2.22-5.5768A20.3917,20.3917,0,0,0,26.45,13.9268C20.1693,16.6882,18.924,19.1788,18.924,19.1788Z"/>
+
<path class="a" d="M32.8978,27.5311,35.6164,33.76a2.3649,2.3649,0,0,1-1.2215,3.1135L21.9571,42.302a2.3651,2.3651,0,0,1-3.1135-1.2215L7.1292,14.24a2.3649,2.3649,0,0,1,1.2215-3.1135L20.7885,5.698A2.3651,2.3651,0,0,1,23.902,6.92l2.98,6.8279"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/wwwroot/poc-checkout.html b/wwwroot/poc-checkout.html
index 6507508..b7162e3 100644
--- a/wwwroot/poc-checkout.html
+++ b/wwwroot/poc-checkout.html
@@ -4,34 +4,22 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Checkout POC</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
-    /* Design tokens fra calendar-base.css */
     :root {
-      /* Colors - UI */
       --color-border: #e0e0e0;
       --color-surface: #fff;
       --color-background: #f5f5f5;
       --color-background-hover: #f0f0f0;
       --color-background-alt: #fafafa;
-      --color-text: #333333;
+      --color-text: #333;
       --color-text-secondary: #666;
-      --color-primary: #1976d2;
-
-      /* Named color palette */
-      --b-color-blue: #1e88e5;
-      --b-color-green: #43a047;
-      --b-color-red: #e53935;
-      --b-color-amber: #ffb300;
-      --b-color-purple: #8e24aa;
-      --b-color-teal: #00897b;
-      --b-mix: #fff;
-
-      /* Shadows */
-      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-
-      /* Transitions */
+      --color-teal: #00897b;
+      --color-red: #e53935;
       --transition-fast: 150ms ease;
+      --font-mono: 'JetBrains Mono', monospace;
     }
 
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -39,596 +27,941 @@
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: var(--color-background);
+      font-size: 14px;
+      color: var(--color-text);
     }
 
-    /* Demo layout */
-    .demo-container {
-      padding: 16px;
-    }
+    .demo-trigger { padding: 20px; }
 
     .demo-btn {
-      padding: 8px 16px;
-      border: 1px solid var(--color-border);
-      border-radius: 4px;
-      cursor: pointer;
-      background: var(--color-primary);
+      padding: 12px 24px;
+      background: var(--color-teal);
       color: white;
+      border: none;
+      border-radius: 4px;
       font-size: 14px;
-      font-weight: 500;
-      transition: background var(--transition-fast);
+      cursor: pointer;
     }
 
-    .demo-btn:hover {
-      background: #1565c0;
-    }
-
-    /* ==========================================
-       CHECKOUT OVERLAY
-       ========================================== */
-
-    swp-checkout-overlay {
+    /* Overlay & Panel */
+    .overlay {
       position: fixed;
       inset: 0;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgba(0,0,0,0.25);
       opacity: 0;
       visibility: hidden;
-      transition: opacity 200ms ease, visibility 200ms ease;
-      z-index: 1000;
+      transition: opacity 200ms, visibility 200ms;
+      z-index: 100;
     }
+    .overlay.open { opacity: 1; visibility: visible; }
 
-    swp-checkout-overlay.open {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    swp-checkout-panel {
+    .panel {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
-      width: 800px;
-      max-width: 100%;
-      background: var(--color-surface);
-      border-left: 1px solid var(--color-border);
-      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+      width: 80%;
+      background: var(--color-background);
       transform: translateX(100%);
       transition: transform 200ms ease;
       display: flex;
       flex-direction: column;
-      z-index: 1001;
-    }
-
-    swp-checkout-panel.open {
-      transform: translateX(0);
+      z-index: 101;
+      box-shadow: -4px 0 20px rgba(0,0,0,0.15);
     }
+    .panel.open { transform: translateX(0); }
 
     /* Header */
-    swp-checkout-header {
+    .header {
       display: flex;
       align-items: center;
-      gap: 16px;
-      padding: 16px 20px;
+      gap: 40px;
+      padding: 20px 28px;
+      background: var(--color-surface);
       border-bottom: 1px solid var(--color-border);
-      background: var(--color-background-alt);
     }
 
-    swp-customer-name {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--color-text);
-    }
+    .header-field { display: flex; align-items: center; gap: 10px; }
+    .header-label { color: var(--color-text-secondary); font-size: 13px; }
+    .header-value { font-weight: 500; font-size: 15px; }
+    .header-link { color: var(--color-teal); cursor: pointer; font-size: 13px; }
 
-    swp-header-separator {
-      width: 1px;
-      height: 20px;
-      background: var(--color-border);
-    }
-
-    swp-checkout-date {
-      font-size: 14px;
-      color: var(--color-text-secondary);
-    }
-
-    swp-checkout-resource {
-      font-size: 14px;
-      color: var(--color-text-secondary);
-    }
-
-    swp-close-btn {
-      margin-left: auto;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      background: none;
-      cursor: pointer;
+    .header-select {
+      padding: 6px 28px 6px 10px;
+      border: 1px solid var(--color-border);
       border-radius: 4px;
-      font-size: 18px;
+      font-size: 14px;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
+      appearance: none;
+    }
+
+    .header-close {
+      margin-left: auto;
+      background: none;
+      border: none;
+      font-size: 20px;
       color: var(--color-text-secondary);
-      transition: background var(--transition-fast);
+      cursor: pointer;
+      padding: 4px 8px;
     }
 
-    swp-close-btn:hover {
-      background: var(--color-background-hover);
-    }
-
-    /* Main content - two columns */
-    swp-checkout-content {
+    /* Main layout */
+    .main {
       flex: 1;
       display: grid;
-      grid-template-columns: 280px 1fr;
+      grid-template-columns: 20% 1fr 35%;
       overflow: hidden;
     }
 
-    /* Left: Product catalog */
-    swp-product-catalog {
-      display: flex;
-      flex-direction: column;
+    /* Sidebar */
+    .sidebar {
       border-right: 1px solid var(--color-border);
-      background: var(--color-background-alt);
+      display: flex;
+      flex-direction: column;
+      background: var(--color-surface);
     }
 
-    swp-catalog-header {
-      padding: 12px;
+    .search-box {
+      padding: 20px;
       border-bottom: 1px solid var(--color-border);
     }
 
-    swp-search-input {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: var(--color-surface);
+    .search-input {
+      width: 100%;
+      padding: 12px 14px 12px 40px;
       border: 1px solid var(--color-border);
-      border-radius: 4px;
-    }
-
-    swp-search-input input {
-      flex: 1;
-      border: none;
-      outline: none;
+      border-radius: 6px;
       font-size: 14px;
-      background: transparent;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
     }
 
-    swp-search-input input::placeholder {
-      color: var(--color-text-secondary);
-    }
-
-    swp-catalog-list {
-      flex: 1;
-      overflow-y: auto;
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
-    swp-product-card {
-      display: block;
-      padding: 12px;
-      background: var(--color-surface);
-      border: 1px solid var(--color-border);
-      border-radius: 4px;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-
-    swp-product-card:hover {
-      border-color: var(--color-primary);
-      box-shadow: var(--shadow-sm);
-    }
-
-    swp-product-name {
-      display: block;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--color-text);
-      margin-bottom: 4px;
-    }
-
-    swp-product-meta {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-      color: var(--color-text-secondary);
-    }
-
-    swp-product-price {
-      font-weight: 500;
-      color: var(--color-text);
-    }
-
-    swp-product-duration {
-      opacity: 0.8;
-    }
-
-    /* Right: Cart */
-    swp-cart-section {
-      display: flex;
-      flex-direction: column;
-      background: var(--color-surface);
-    }
-
-    swp-cart-header {
-      padding: 12px 16px;
+    .menu-section {
       border-bottom: 1px solid var(--color-border);
-      font-size: 13px;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: var(--color-text-secondary);
+      padding: 12px 0;
     }
 
-    swp-cart-list {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    swp-cart-item {
-      --b-primary: var(--b-color-blue);
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      padding: 12px;
-      background: color-mix(in srgb, var(--b-primary) 5%, var(--b-mix));
-      border-left: 3px solid var(--b-primary);
-      border-radius: 4px;
-    }
-
-    swp-cart-item-content {
-      flex: 1;
-    }
-
-    swp-cart-item-name {
-      display: block;
-      font-size: 15px;
-      font-weight: 500;
-      color: var(--color-text);
-      margin-bottom: 4px;
-    }
-
-    swp-cart-item-meta {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 13px;
-      color: var(--color-text-secondary);
-    }
-
-    swp-cart-item-resource {
-      font-weight: 500;
-    }
-
-    swp-cart-item-price {
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--color-text);
-      white-space: nowrap;
-    }
-
-    swp-cart-item-remove {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      background: none;
-      cursor: pointer;
-      border-radius: 4px;
-      font-size: 14px;
-      color: var(--color-text-secondary);
-      opacity: 0.6;
-      transition: all var(--transition-fast);
-    }
-
-    swp-cart-item-remove:hover {
-      opacity: 1;
-      background: color-mix(in srgb, var(--b-color-red) 15%, var(--b-mix));
-      color: var(--b-color-red);
-    }
-
-    /* Cart total */
-    swp-cart-total {
+    .menu-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 16px;
-      margin: 0 16px 16px;
-      background: var(--color-text);
-      color: var(--color-surface);
-      border-radius: 4px;
-    }
-
-    swp-total-label {
+      padding: 12px 20px;
       font-size: 14px;
-      opacity: 0.7;
-    }
-
-    swp-total-amount {
-      font-size: 22px;
-      font-weight: 600;
-    }
-
-    /* Footer */
-    swp-checkout-footer {
-      display: flex;
-      gap: 12px;
-      padding: 16px 20px;
-      border-top: 1px solid var(--color-border);
-      background: var(--color-surface);
-    }
-
-    swp-footer-btn {
-      flex: 1;
-      padding: 14px 20px;
-      border: 1px solid var(--color-border);
-      border-radius: 4px;
-      font-size: 15px;
-      font-weight: 500;
-      font-family: inherit;
       cursor: pointer;
-      transition: all var(--transition-fast);
+    }
+    .menu-item:hover { background: var(--color-background-hover); }
+    .menu-item.active { color: var(--color-teal); font-weight: 500; }
+
+    .categories {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px 0;
     }
 
-    swp-footer-btn.btn-secondary {
+    .category {
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 20px;
+      font-size: 14px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+    }
+    .category:hover { background: var(--color-background-hover); color: var(--color-text); }
+
+    /* Cart area */
+    .cart-area {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--color-background);
+    }
+
+    .cart-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px;
+    }
+
+    .cart-section {
+      margin-bottom: 24px;
+    }
+
+    .cart-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .cart-section-header {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      padding: 0 4px 10px;
+      border-bottom: 1px solid var(--color-border);
+      margin-bottom: 12px;
+    }
+
+    .cart-section-items {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    /* Cart footer with totals */
+    .cart-footer {
+      padding: 20px 24px;
       background: var(--color-surface);
+      border-top: 1px solid var(--color-border);
+    }
+
+    .cart-totals {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .cart-total-row {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+    }
+
+    .cart-total-row .label {
+      color: var(--color-text-secondary);
+    }
+
+    .cart-total-row .value {
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
+    .cart-total-row.grand {
+      padding-top: 12px;
+      border-top: 1px solid var(--color-border);
+      margin-top: 4px;
+    }
+
+    .cart-total-row.grand .label {
+      font-size: 16px;
+      font-weight: 600;
       color: var(--color-text);
     }
 
-    swp-footer-btn.btn-secondary:hover {
-      background: var(--color-background-hover);
+    .cart-total-row.grand .value {
+      font-family: var(--font-mono);
+      font-size: 24px;
+      font-weight: 700;
     }
 
-    swp-footer-btn.btn-primary {
-      background: var(--b-color-green);
-      color: white;
-      border-color: var(--b-color-green);
-    }
-
-    swp-footer-btn.btn-primary:hover {
-      background: #388e3c;
-    }
-
-    /* Empty cart state */
-    swp-cart-empty {
+    /* Cart item card */
+    .cart-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 12px 16px;
+      background: var(--color-surface);
+      border-radius: 6px;
+    }
+
+    .item-qty {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .qty-btn {
+      width: 26px;
+      height: 26px;
+      border: 1px solid var(--color-border);
+      background: var(--color-surface);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--color-text-secondary);
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      flex: 1;
-      padding: 40px;
-      color: var(--color-text-secondary);
+    }
+    .qty-btn:hover { background: var(--color-background-hover); }
+
+    .qty-val {
+      width: 24px;
       text-align: center;
-    }
-
-    swp-cart-empty-icon {
-      font-size: 48px;
-      margin-bottom: 12px;
-      opacity: 0.5;
-    }
-
-    swp-cart-empty-text {
       font-size: 14px;
+      font-weight: 500;
     }
+
+    .item-info {
+      flex: 1;
+    }
+
+    .item-name {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .item-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .item-price {
+      text-align: right;
+    }
+
+    .item-total {
+      font-family: var(--font-mono);
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .item-remove {
+      background: none;
+      border: none;
+      font-size: 16px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      opacity: 0.3;
+      padding: 4px;
+    }
+    .item-remove:hover { opacity: 1; color: var(--color-red); }
+
+    /* Payment Panel */
+    .payment-panel {
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .payment-total {
+      padding: 24px 28px;
+      text-align: center;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .payment-total-amount {
+      font-family: var(--font-mono);
+      font-size: 48px;
+      font-weight: 700;
+      color: var(--color-text);
+      letter-spacing: -2px;
+    }
+
+    .payment-total-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .payment-methods {
+      display: flex;
+      gap: 8px;
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--color-border);
+      flex-wrap: wrap;
+    }
+
+    .method-btn {
+      flex: 1 1 auto;
+      min-width: 70px;
+      padding: 12px 8px;
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+      text-align: center;
+      transition: all var(--transition-fast);
+    }
+
+    .method-btn:hover {
+      border-color: #ccc;
+    }
+
+    .method-btn.active {
+      border-color: var(--color-teal);
+      background: rgba(0, 137, 123, 0.05);
+    }
+
+    .method-btn-icon {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto 4px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    .method-btn-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    .method-btn.active .method-btn-label {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    .payment-input-section {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .payment-input-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    .payment-input-row {
+      display: flex;
+      gap: 10px;
+    }
+
+    .payment-input {
+      flex: 1;
+      padding: 12px 16px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-family: var(--font-mono);
+      font-size: 22px;
+      font-weight: 600;
+      text-align: right;
+    }
+
+    .payment-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .btn-pay-rest {
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .btn-pay-rest:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    .btn-add-payment {
+      width: 100%;
+      padding: 12px;
+      margin-top: 12px;
+      border: none;
+      border-radius: 6px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .btn-add-payment:hover {
+      background: #00796b;
+    }
+
+    .btn-add-payment:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    /* Registered payments */
+    .registered-payments {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 24px;
+    }
+
+    .registered-payments-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    .payment-entry {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .payment-entry-icon {
+      width: 20px;
+      height: 20px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    .payment-entry-info {
+      flex: 1;
+    }
+
+    .payment-entry-method {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .payment-entry-detail {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .payment-entry-amount {
+      font-family: var(--font-mono);
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-teal);
+    }
+
+    .payment-entry-remove {
+      background: none;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      font-size: 16px;
+      opacity: 0.5;
+      padding: 4px;
+    }
+
+    .payment-entry-remove:hover {
+      opacity: 1;
+      color: var(--color-red);
+    }
+
+    .no-payments {
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      text-align: center;
+      padding: 24px;
+    }
+
+    /* Payment footer */
+    .payment-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    .remaining-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .remaining-label {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    .remaining-value {
+      font-family: var(--font-mono);
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-red);
+    }
+
+    .remaining-value.zero {
+      color: var(--color-teal);
+    }
+
+    .btn-complete {
+      width: 100%;
+      padding: 16px;
+      border: none;
+      border-radius: 6px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 16px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .btn-complete:hover {
+      background: #00796b;
+    }
+
+    .btn-complete:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    .payment-actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 16px;
+    }
+
+    .btn-secondary {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+    }
+
+    .btn-secondary:hover {
+      border-color: #ccc;
+    }
+
   </style>
 </head>
 <body>
-  <div class="demo-container">
-    <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 12px;">
-      Klik for at åbne checkout overlay
-    </p>
-    <button class="demo-btn" onclick="openCheckout()">Gå til betaling</button>
+  <div class="demo-trigger">
+    <button class="demo-btn" onclick="openPanel()">Gå til betaling</button>
   </div>
 
-  <!-- Overlay -->
-  <swp-checkout-overlay id="checkoutOverlay" onclick="closeCheckout()"></swp-checkout-overlay>
+  <div class="overlay" id="overlay" onclick="closePanel()"></div>
 
-  <!-- Checkout Panel -->
-  <swp-checkout-panel id="checkoutPanel" onclick="event.stopPropagation()">
-    <swp-checkout-header>
-      <swp-customer-name>Sofie Nielsen</swp-customer-name>
-      <swp-header-separator></swp-header-separator>
-      <swp-checkout-date>9. dec 2025</swp-checkout-date>
-      <swp-header-separator></swp-header-separator>
-      <swp-checkout-resource>Emma</swp-checkout-resource>
-      <swp-close-btn onclick="closeCheckout()">✕</swp-close-btn>
-    </swp-checkout-header>
+  <div class="panel" id="panel">
+    <div class="header">
+      <div class="header-field">
+        <span class="header-label">Kunde</span>
+        <span class="header-value">Sofie Nielsen</span>
+        <span class="header-link">Fjern</span>
+      </div>
+      <div class="header-field">
+        <span class="header-label">Dato</span>
+        <span class="header-value">16. dec 2025</span>
+      </div>
+      <div class="header-field">
+        <span class="header-label">Betjent af</span>
+        <select class="header-select">
+          <option>Emma Larsen</option>
+          <option>Anett Davidsson</option>
+        </select>
+      </div>
+      <button class="header-close" onclick="closePanel()">✕</button>
+    </div>
 
-    <swp-checkout-content>
-      <!-- Product Catalog -->
-      <swp-product-catalog>
-        <swp-catalog-header>
-          <swp-search-input>
-            <span>🔍</span>
-            <input type="text" placeholder="Søg produkt eller service..." id="searchInput" oninput="filterProducts()">
-          </swp-search-input>
-        </swp-catalog-header>
-        <swp-catalog-list id="catalogList">
-          <swp-product-card onclick="addToCart('klipning', 'Klipning og styling', 500, '60 min')">
-            <swp-product-name>Klipning og styling</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>500 DKK</swp-product-price>
-              <swp-product-duration>60 min</swp-product-duration>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('bundfarve', 'Bundfarve', 800, '90 min')">
-            <swp-product-name>Bundfarve</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>800 DKK</swp-product-price>
-              <swp-product-duration>90 min</swp-product-duration>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('olaplex', 'Olaplex behandling', 350, '30 min')">
-            <swp-product-name>Olaplex behandling</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>350 DKK</swp-product-price>
-              <swp-product-duration>30 min</swp-product-duration>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('highlights', 'Highlights', 1200, '120 min')">
-            <swp-product-name>Highlights</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>1.200 DKK</swp-product-price>
-              <swp-product-duration>120 min</swp-product-duration>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('vask', 'Vask og føn', 150, '20 min')">
-            <swp-product-name>Vask og føn</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>150 DKK</swp-product-price>
-              <swp-product-duration>20 min</swp-product-duration>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('shampoo', 'Olaplex Shampoo', 299)">
-            <swp-product-name>Olaplex Shampoo</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>299 DKK</swp-product-price>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('conditioner', 'Olaplex Conditioner', 319)">
-            <swp-product-name>Olaplex Conditioner</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>319 DKK</swp-product-price>
-            </swp-product-meta>
-          </swp-product-card>
-          <swp-product-card onclick="addToCart('hairoil', 'Hair Oil Treatment', 199)">
-            <swp-product-name>Hair Oil Treatment</swp-product-name>
-            <swp-product-meta>
-              <swp-product-price>199 DKK</swp-product-price>
-            </swp-product-meta>
-          </swp-product-card>
-        </swp-catalog-list>
-      </swp-product-catalog>
+    <div class="main">
+      <div class="sidebar">
+        <div class="search-box">
+          <input type="text" class="search-input" placeholder="Søg varer...">
+        </div>
+        <div class="menu-section">
+          <div class="menu-item"><span>Brugerdefineret linje</span></div>
+          <div class="menu-item"><span>Tidligere salg</span></div>
+          <div class="menu-item"><span>Refunder</span></div>
+          <div class="menu-item active"><span>Services</span></div>
+        </div>
+        <div class="categories">
+          <div class="category"><span>Acidic Bonding</span><span>›</span></div>
+          <div class="category"><span>Amino Mint</span><span>›</span></div>
+          <div class="category"><span>Color Gloss</span><span>›</span></div>
+          <div class="category"><span>Conditioner</span><span>›</span></div>
+          <div class="category"><span>Styling</span><span>›</span></div>
+          <div class="category"><span>Olaplex</span><span>›</span></div>
+        </div>
+      </div>
 
-      <!-- Cart -->
-      <swp-cart-section>
-        <swp-cart-header>Kurv</swp-cart-header>
-        <swp-cart-list id="cartList">
-          <!-- Pre-filled from booking -->
-          <swp-cart-item data-id="klipning">
-            <swp-cart-item-content>
-              <swp-cart-item-name>Klipning og styling</swp-cart-item-name>
-              <swp-cart-item-meta>
-                <swp-cart-item-resource>Emma</swp-cart-item-resource>
-                <span>·</span>
-                <span>60 min</span>
-              </swp-cart-item-meta>
-            </swp-cart-item-content>
-            <swp-cart-item-price>500 DKK</swp-cart-item-price>
-            <swp-cart-item-remove onclick="removeFromCart('klipning')">✕</swp-cart-item-remove>
-          </swp-cart-item>
-          <swp-cart-item data-id="bundfarve">
-            <swp-cart-item-content>
-              <swp-cart-item-name>Bundfarve</swp-cart-item-name>
-              <swp-cart-item-meta>
-                <swp-cart-item-resource>Emma</swp-cart-item-resource>
-                <span>·</span>
-                <span>90 min</span>
-              </swp-cart-item-meta>
-            </swp-cart-item-content>
-            <swp-cart-item-price>800 DKK</swp-cart-item-price>
-            <swp-cart-item-remove onclick="removeFromCart('bundfarve')">✕</swp-cart-item-remove>
-          </swp-cart-item>
-        </swp-cart-list>
-        <swp-cart-total>
-          <swp-total-label>Total</swp-total-label>
-          <swp-total-amount id="totalAmount">1.300 DKK</swp-total-amount>
-        </swp-cart-total>
-      </swp-cart-section>
-    </swp-checkout-content>
+      <div class="cart-area">
+        <div class="cart-list">
+          <!-- Services -->
+          <div class="cart-section">
+            <div class="cart-section-header">Services</div>
+            <div class="cart-section-items">
+              <div class="cart-item">
+                <div class="item-qty">
+                  <button class="qty-btn">−</button>
+                  <span class="qty-val">1</span>
+                  <button class="qty-btn">+</button>
+                </div>
+                <div class="item-info">
+                  <div class="item-name">Dameklip</div>
+                  <div class="item-meta">Emma Larsen · 45 min</div>
+                </div>
+                <div class="item-price">
+                  <div class="item-total">725 kr</div>
+                </div>
+                <button class="item-remove">✕</button>
+              </div>
+              <div class="cart-item">
+                <div class="item-qty">
+                  <button class="qty-btn">−</button>
+                  <span class="qty-val">1</span>
+                  <button class="qty-btn">+</button>
+                </div>
+                <div class="item-info">
+                  <div class="item-name">Gloss extra langt/tykt hår</div>
+                  <div class="item-meta">Emma Larsen · 90 min</div>
+                </div>
+                <div class="item-price">
+                  <div class="item-total">900 kr</div>
+                </div>
+                <button class="item-remove">✕</button>
+              </div>
+            </div>
+          </div>
 
-    <swp-checkout-footer>
-      <swp-footer-btn class="btn-secondary" onclick="closeCheckout()">Annuller</swp-footer-btn>
-      <swp-footer-btn class="btn-primary" onclick="registerPayment()">Registrer betaling</swp-footer-btn>
-    </swp-checkout-footer>
-  </swp-checkout-panel>
+          <!-- Produkter -->
+          <div class="cart-section">
+            <div class="cart-section-header">Produkter</div>
+            <div class="cart-section-items">
+              <div class="cart-item">
+                <div class="item-qty">
+                  <button class="qty-btn">−</button>
+                  <span class="qty-val">1</span>
+                  <button class="qty-btn">+</button>
+                </div>
+                <div class="item-info">
+                  <div class="item-name">Olaplex No. 3</div>
+                  <div class="item-meta">100ml</div>
+                </div>
+                <div class="item-price">
+                  <div class="item-total">300 kr</div>
+                </div>
+                <button class="item-remove">✕</button>
+              </div>
+              <div class="cart-item">
+                <div class="item-qty">
+                  <button class="qty-btn">−</button>
+                  <span class="qty-val">2</span>
+                  <button class="qty-btn">+</button>
+                </div>
+                <div class="item-info">
+                  <div class="item-name">India supercharged mask</div>
+                  <div class="item-meta">250ml</div>
+                </div>
+                <div class="item-price">
+                  <div class="item-total">350 kr</div>
+                </div>
+                <button class="item-remove">✕</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="cart-footer">
+          <div class="cart-totals">
+            <div class="cart-total-row">
+              <span class="label">Subtotal</span>
+              <span class="value">1.820 kr</span>
+            </div>
+            <div class="cart-total-row">
+              <span class="label">Moms (25%)</span>
+              <span class="value">455 kr</span>
+            </div>
+            <div class="cart-total-row grand">
+              <span class="label">Total</span>
+              <span class="value">2.275 kr</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Payment Panel -->
+      <div class="payment-panel">
+        <div class="payment-total">
+          <div class="payment-total-amount" id="totalAmount">2.275 kr</div>
+          <div class="payment-total-label">Total at betale</div>
+        </div>
+
+        <div class="payment-methods">
+          <button class="method-btn active" onclick="selectMethod('kort')">
+            <img class="method-btn-icon" src="icons/credit-card.svg" alt="">
+            <span class="method-btn-label">Kort</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('kontant')">
+            <img class="method-btn-icon" src="icons/coins.svg" alt="">
+            <span class="method-btn-label">Kontant</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('mobilepay')">
+            <img class="method-btn-icon" src="icons/mobilepay.svg" alt="">
+            <span class="method-btn-label">MobilePay</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('bank')">
+            <img class="method-btn-icon" src="icons/bank.svg" alt="">
+            <span class="method-btn-label">Bank</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('gavekort')">
+            <img class="method-btn-icon" src="icons/gift-card.svg" alt="">
+            <span class="method-btn-label">Gavekort</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('tilgode')">
+            <img class="method-btn-icon" src="icons/loan.svg" alt="">
+            <span class="method-btn-label">Tilgode</span>
+          </button>
+        </div>
+
+        <div class="payment-input-section">
+          <div class="payment-input-label" id="inputLabel">Beløb at betale med Kort</div>
+          <div class="payment-input-row">
+            <input type="text" class="payment-input" id="paymentInput" value="2.275" inputmode="decimal">
+            <button class="btn-pay-rest" onclick="payRest()">Betal rest<br><span id="restAmount">(2.275 kr)</span></button>
+          </div>
+          <button class="btn-add-payment" onclick="addPayment()">+ Tilføj betaling</button>
+        </div>
+
+        <div class="registered-payments">
+          <div class="registered-payments-label">Registrerede betalinger</div>
+          <div id="paymentsList">
+            <div class="no-payments">Ingen betalinger registreret</div>
+          </div>
+        </div>
+
+        <div class="payment-footer">
+          <div class="remaining-row">
+            <span class="remaining-label">Restbeløb</span>
+            <span class="remaining-value" id="remainingAmount">2.275 kr</span>
+          </div>
+          <button class="btn-complete" id="btnComplete" disabled>Afslut salg</button>
+          <div class="payment-actions">
+            <button class="btn-secondary">Print kvittering</button>
+            <button class="btn-secondary">Send på mail</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <script>
-    // Cart state
-    let cart = [
-      { id: 'klipning', name: 'Klipning og styling', price: 500, duration: '60 min', resource: 'Emma' },
-      { id: 'bundfarve', name: 'Bundfarve', price: 800, duration: '90 min', resource: 'Emma' }
-    ];
+    const total = 2275;
+    const payments = [];
+    let currentMethod = 'kort';
 
-    function openCheckout() {
-      document.getElementById('checkoutOverlay').classList.add('open');
-      document.getElementById('checkoutPanel').classList.add('open');
+    const methodLabels = {
+      'kort': 'Kort',
+      'kontant': 'Kontant',
+      'mobilepay': 'MobilePay',
+      'bank': 'Bank',
+      'gavekort': 'Gavekort',
+      'tilgode': 'Tilgode'
+    };
+
+    const methodIcons = {
+      'kort': 'icons/credit-card.svg',
+      'kontant': 'icons/coins.svg',
+      'mobilepay': 'icons/mobilepay.svg',
+      'bank': 'icons/bank.svg',
+      'gavekort': 'icons/gift-card.svg',
+      'tilgode': 'icons/loan.svg'
+    };
+
+    function openPanel() {
+      document.getElementById('overlay').classList.add('open');
+      document.getElementById('panel').classList.add('open');
     }
 
-    function closeCheckout() {
-      document.getElementById('checkoutOverlay').classList.remove('open');
-      document.getElementById('checkoutPanel').classList.remove('open');
+    function closePanel() {
+      document.getElementById('overlay').classList.remove('open');
+      document.getElementById('panel').classList.remove('open');
     }
 
-    function addToCart(id, name, price, duration) {
-      if (cart.find(item => item.id === id)) return; // Already in cart
+    function selectMethod(method) {
+      currentMethod = method;
 
-      cart.push({ id, name, price, duration, resource: 'Emma' });
-      renderCart();
+      // Update active button
+      document.querySelectorAll('.method-btn').forEach(btn => btn.classList.remove('active'));
+      event.currentTarget.classList.add('active');
+
+      // Update label
+      document.getElementById('inputLabel').textContent = `Beløb at betale med ${methodLabels[method]}`;
+
+      // Set input to remaining amount
+      payRest();
     }
 
-    function removeFromCart(id) {
-      cart = cart.filter(item => item.id !== id);
-      renderCart();
+    function payRest() {
+      const remaining = getRemaining();
+      document.getElementById('paymentInput').value = formatNumber(remaining);
     }
 
-    function renderCart() {
-      const cartList = document.getElementById('cartList');
+    function addPayment() {
+      const amount = parseAmount(document.getElementById('paymentInput').value);
+      if (amount <= 0) return;
 
-      if (cart.length === 0) {
-        cartList.innerHTML = `
-          <swp-cart-empty>
-            <swp-cart-empty-icon>🛒</swp-cart-empty-icon>
-            <swp-cart-empty-text>Kurven er tom</swp-cart-empty-text>
-          </swp-cart-empty>
-        `;
-      } else {
-        cartList.innerHTML = cart.map(item => `
-          <swp-cart-item data-id="${item.id}">
-            <swp-cart-item-content>
-              <swp-cart-item-name>${item.name}</swp-cart-item-name>
-              <swp-cart-item-meta>
-                <swp-cart-item-resource>${item.resource}</swp-cart-item-resource>
-                ${item.duration ? `<span>·</span><span>${item.duration}</span>` : ''}
-              </swp-cart-item-meta>
-            </swp-cart-item-content>
-            <swp-cart-item-price>${item.price.toLocaleString('da-DK')} DKK</swp-cart-item-price>
-            <swp-cart-item-remove onclick="removeFromCart('${item.id}')">✕</swp-cart-item-remove>
-          </swp-cart-item>
-        `).join('');
+      payments.push({
+        method: currentMethod,
+        amount: amount
+      });
+
+      updatePaymentsList();
+      updateTotals();
+
+      // Reset input to new remaining
+      payRest();
+    }
+
+    function removePayment(index) {
+      payments.splice(index, 1);
+      updatePaymentsList();
+      updateTotals();
+      payRest();
+    }
+
+    function updatePaymentsList() {
+      const container = document.getElementById('paymentsList');
+
+      if (payments.length === 0) {
+        container.innerHTML = '<div class="no-payments">Ingen betalinger registreret</div>';
+        return;
       }
 
-      // Update total
-      const total = cart.reduce((sum, item) => sum + item.price, 0);
-      document.getElementById('totalAmount').textContent = total.toLocaleString('da-DK') + ' DKK';
+      container.innerHTML = payments.map((p, i) => `
+        <div class="payment-entry">
+          <img class="payment-entry-icon" src="${methodIcons[p.method]}" alt="">
+          <div class="payment-entry-info">
+            <div class="payment-entry-method">${methodLabels[p.method]}</div>
+          </div>
+          <span class="payment-entry-amount">+${formatNumber(p.amount)} kr</span>
+          <button class="payment-entry-remove" onclick="removePayment(${i})">✕</button>
+        </div>
+      `).join('');
     }
 
-    function filterProducts() {
-      const query = document.getElementById('searchInput').value.toLowerCase();
-      const cards = document.querySelectorAll('swp-product-card');
+    function updateTotals() {
+      const remaining = getRemaining();
 
-      cards.forEach(card => {
-        const name = card.querySelector('swp-product-name').textContent.toLowerCase();
-        card.style.display = name.includes(query) ? 'block' : 'none';
-      });
+      // Update remaining display
+      const remainingEl = document.getElementById('remainingAmount');
+      remainingEl.textContent = formatNumber(remaining) + ' kr';
+
+      // Update rest button
+      document.getElementById('restAmount').textContent = `(${formatNumber(remaining)} kr)`;
+
+      // Toggle styling and button state
+      const btnComplete = document.getElementById('btnComplete');
+      if (remaining <= 0) {
+        remainingEl.classList.add('zero');
+        btnComplete.disabled = false;
+      } else {
+        remainingEl.classList.remove('zero');
+        btnComplete.disabled = true;
+      }
     }
 
-    function registerPayment() {
-      alert('Betaling registreret!');
-      closeCheckout();
+    function getRemaining() {
+      const paid = payments.reduce((sum, p) => sum + p.amount, 0);
+      return Math.max(0, total - paid);
     }
 
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') closeCheckout();
+    function formatNumber(num) {
+      return num.toLocaleString('da-DK');
+    }
+
+    function parseAmount(str) {
+      if (!str) return 0;
+      const cleaned = str.replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
+      return parseFloat(cleaned) || 0;
+    }
+
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') closePanel();
     });
   </script>
 </body>