Shopping Cart Mini

<div
  class="ws-shopping-cart"
  style="
    --ws-shopping-cart-bg: oklch(0.98 0.005 75);
    --ws-shopping-cart-text: oklch(0.2 0.02 75);
    --ws-shopping-cart-text-soft: oklch(0.45 0.015 75);
    --ws-shopping-cart-border: oklch(0.85 0.01 75);
    --ws-shopping-cart-accent: oklch(0.55 0.15 150);
    --ws-shopping-cart-action-bg: oklch(0.35 0.02 75);
    --ws-shopping-cart-action-text: oklch(0.98 0.005 75);
  "
>
  <div class="w-80 rounded-xl p-5 shadow-lg" style="background:var(--ws-shopping-cart-bg);border:1px solid var(--ws-shopping-cart-border)" role="region" aria-label="Mini cart">
    <h2 class="text-base font-semibold" style="color:var(--ws-shopping-cart-text)">Cart (3)</h2>

    <div class="mt-4 space-y-3">
      <!-- Item 1 -->
      <div class="flex items-center gap-3">
        <div class="h-12 w-12 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wireless Headphones"></div>
        <div class="flex-1 min-w-0">
          <p class="truncate text-sm font-medium" style="color:var(--ws-shopping-cart-text)">Wireless Headphones</p>
          <p class="text-xs" style="color:var(--ws-shopping-cart-text-soft)">Qty: 1</p>
        </div>
        <p class="text-sm font-semibold" style="color:var(--ws-shopping-cart-text)">$99</p>
      </div>

      <!-- Item 2 -->
      <div class="flex items-center gap-3">
        <div class="h-12 w-12 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Smart Watch Pro"></div>
        <div class="flex-1 min-w-0">
          <p class="truncate text-sm font-medium" style="color:var(--ws-shopping-cart-text)">Smart Watch Pro</p>
          <p class="text-xs" style="color:var(--ws-shopping-cart-text-soft)">Qty: 1</p>
        </div>
        <p class="text-sm font-semibold" style="color:var(--ws-shopping-cart-text)">$249</p>
      </div>

      <!-- Item 3 -->
      <div class="flex items-center gap-3">
        <div class="h-12 w-12 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Leather Backpack"></div>
        <div class="flex-1 min-w-0">
          <p class="truncate text-sm font-medium" style="color:var(--ws-shopping-cart-text)">Leather Backpack</p>
          <p class="text-xs" style="color:var(--ws-shopping-cart-text-soft)">Qty: 1</p>
        </div>
        <p class="text-sm font-semibold" style="color:var(--ws-shopping-cart-text)">$149</p>
      </div>
    </div>

    <div class="mt-4 pt-4" style="border-top:1px solid var(--ws-shopping-cart-border)">
      <div class="flex justify-between text-sm font-bold">
        <span style="color:var(--ws-shopping-cart-text)">Total</span>
        <span style="color:var(--ws-shopping-cart-text)">$497.00</span>
      </div>
      <div class="mt-3 flex flex-col gap-2">
        <a href="#" class="block rounded-lg px-4 py-2.5 text-center text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-shopping-cart-action-bg);color:var(--ws-shopping-cart-action-text)">Checkout</a>
        <a href="#" class="block rounded-lg px-4 py-2.5 text-center text-sm font-semibold transition hover:opacity-80" style="border:1px solid var(--ws-shopping-cart-border);color:var(--ws-shopping-cart-text)">View Cart</a>
      </div>
    </div>
  </div>
</div>