Retro_Vintage_Shopping_Cart_Component

<div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-amber-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-4 border-amber-200 dark:border-stone-700 transform transition duration-500 hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b-4 border-amber-200 dark:border-stone-700 bg-amber-200 dark:bg-stone-700">
      <h1 class="text-3xl sm:text-4xl font-bold text-amber-900 dark:text-stone-100 text-center uppercase tracking-wider font-['Press_Start_2P'] drop-shadow-lg">Your Cart</h1>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">
      <!-- Cart Item 1 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage1/120/120" alt="Retro Camera" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">The 'Viewfinder' Camera</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Analog aesthetics, digital reliability.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$499.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty1" class="sr-only">Quantity</label>
          <input type="number" id="qty1" value="1" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage2/120/120" alt="Old School Headphones" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">The 'Soundscape' Headphones</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Crystal clear audio, classic design.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$129.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty2" class="sr-only">Quantity</label>
          <input type="number" id="qty2" value="2" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage3/120/120" alt="Vinyl Record" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">Classic Rock Vinyl</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Timeless tunes, warm analog sound.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$24.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty3" class="sr-only">Quantity</label>
          <input type="number" id="qty3" value="1" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 border-t-4 border-amber-200 dark:border-stone-700 bg-amber-200 dark:bg-stone-700">
      <div class="flex justify-between items-center text-xl sm:text-2xl font-bold text-amber-900 dark:text-stone-100 mb-4">
        <span class="uppercase font-['Press_Start_2P']">Total:</span>
        <span class="text-3xl sm:text-4xl text-amber-950 dark:text-stone-50 drop-shadow-md">$774.96</span>
      </div>
      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="flex-1 py-3 px-6 bg-amber-700 hover:bg-amber-800 dark:bg-stone-700 dark:hover:bg-stone-600 text-white font-bold rounded-lg shadow-lg uppercase tracking-wider transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 border-2 border-amber-800 dark:border-stone-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-stone-500">
          Continue Shopping
        </button>
        <button class="flex-1 py-3 px-6 bg-amber-900 hover:bg-amber-950 dark:bg-stone-900 dark:hover:bg-stone-800 text-white font-bold rounded-lg shadow-lg uppercase tracking-wider transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 border-2 border-amber-950 dark:border-stone-800 focus:outline-none focus:ring-4 focus:ring-amber-400 dark:focus:ring-stone-600">
          Proceed to Checkout
        </button>
      </div>
    </div>
  </div>

  <!-- Add a specific font if you want the 'Press Start 2P' effect or remove it -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  </style>
</div>