Shopping Cart Empty

<section
  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="mx-auto max-w-2xl px-6 py-24 text-center lg:py-32" style="background:var(--ws-shopping-cart-bg);color:var(--ws-shopping-cart-text)">
    <!-- Cart Icon -->
    <div class="mx-auto flex h-24 w-24 items-center justify-center rounded-full" style="background:oklch(0.95 0.005 75)">
      <svg class="h-12 w-12" style="color:var(--ws-shopping-cart-text-soft)" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
      </svg>
    </div>

    <h1 class="mt-6 text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-shopping-cart-text)">Your cart is empty</h1>
    <p class="mt-3 text-base leading-relaxed" style="color:var(--ws-shopping-cart-text-soft)">Looks like you have not added anything to your cart yet. Browse our products and find something you love.</p>

    <a href="#" class="mt-8 inline-block rounded-xl px-6 py-3.5 text-base font-semibold transition hover:opacity-90" style="background:var(--ws-shopping-cart-action-bg);color:var(--ws-shopping-cart-action-text)">Continue Shopping</a>
  </div>
</section>