Caddie

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-green-50 to-teal-100 dark:from-green-950 dark:to-teal-900 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Global Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-3xl overflow-hidden animate-fade-in-up transition-colors duration-500">

    <!-- Header -->
    <div class="bg-gradient-to-r from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 p-6 sm:p-8 lg:p-10 text-white flex justify-between items-center rounded-t-3xl">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight drop-shadow-lg font-['Playfair_Display']">Your Growth Basket</h1>
      <span class="text-lg sm:text-xl font-semibold opacity-90">3 Items</span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 sm:p-8 lg:p-10">

      <!-- Cart Items Section -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">

        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/sports-gear-1/150/150" alt="Ergonomic Training Bar" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Ergonomic Training Bar</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Designed for peak performance and natural grip.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$89.99</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/yoga-mat-2/150/150" alt="Eco-Friendly Yoga Mat" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Eco-Friendly Yoga Mat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Sustainable and grippy for all your poses.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$49.50</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/resistance-bands-3/150/150" alt="Premium Resistance Bands Set" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Premium Resistance Bands Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Versatile for strength, flexibility, and recovery.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$29.99</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Continue Shopping Button -->
        <div class="pt-6 border-t border-green-200 dark:border-green-700 text-center">
          <button class="inline-flex items-center px-6 py-3 bg-teal-500 hover:bg-teal-600 dark:bg-teal-700 dark:hover:bg-teal-600 text-white font-semibold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            Continue Evolving
          </button>
        </div>

      </div>

      <!-- Summary Section -->
      <div class="lg:col-span-1 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-2xl p-6 sm:p-8 shadow-lg border border-teal-200 dark:border-teal-700 flex flex-col justify-between">

        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6 border-b pb-4 border-teal-300 dark:border-teal-600 font-['Playfair_Display']">Order Harmony</h2>

          <div class="mb-4">
            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
              <span class="text-gray-600 dark:text-gray-300">Subtotal</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$169.48</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$7.50</span>
            </div>
            <div class="flex justify-between items-center py-2">
              <span class="text-gray-600 dark:text-gray-300">Tax (8.25%)</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$13.98</span>
            </div>
          </div>

          <div class="bg-teal-100 dark:bg-teal-800 rounded-xl p-4 mb-6 shadow-inner border border-teal-300 dark:border-teal-600">
            <div class="flex justify-between items-center text-xl sm:text-2xl font-bold text-green-700 dark:text-green-300">
              <span>Total</span>
              <span>$190.96</span>
            </div>
          </div>


          <div class="space-y-4">
            <label for="coupon" class="block text-lg font-semibold text-gray-900 dark:text-gray-100">Nurture your discount: </label>
            <div class="flex rounded-lg shadow-sm overflow-hidden border border-green-300 dark:border-green-600">
                <input type="text" id="coupon" placeholder="Enter code" class="flex-grow p-3 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-l-lg">
                <button class="px-5 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold transform hover:scale-101 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-r-lg">
                  Apply
                </button>
            </div>
          </div>

        </div>

        <button class="w-full mt-8 py-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700 text-white text-xl font-bold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 animate-pulse-fade-in">
          Proceed to Thriving
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

    </div>

  </div>
</div>

<style>
  /* Custom animations for a more 'organic' feel */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  @keyframes pulse-fade-in {
    0% {
      opacity: 0.7;
      transform: scale(1);
      box-shadow: 0 0 0 rgba(16, 185, 129, 0.4); /* green-500 */
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
    }
    100% {
      opacity: 0.7;
      transform: scale(1);
      box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    }
  }

  .animate-pulse-fade-in {
    animation: pulse-fade-in 2s infinite ease-in-out;
  }

  /* Custom font styles, if loaded externally. For this example, assuming they are available or fallback. */
  /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap'); */
</style>
              

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-emerald-50 dark:from-gray-900 to-teal-50 dark:to-gray-800 p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 text-emerald-700 dark:text-emerald-300 text-center leading-tight tracking-tight drop-shadow-sm">Your Cart</h2>
      <p class="text-lg text-center text-gray-600 dark:text-gray-400 font-light">Ready to embark on your fitness journey?</p>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 space-y-6">

      <!-- Cart Item 1 -->
      <div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
        <img src="https://picsum.photos/seed/sports-shoe/100/100" alt="Running Shoe" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Elite Running Shoes</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Unleash your speed with ultimate comfort and support.</p>
          <div class="flex items-center justify-between mt-2 flex-wrap">
            <p class="text-md font-bold text-rose-600 dark:text-rose-400">$129.99</p>
            <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
              <span class="font-medium text-lg">1</span>
              <button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
            </div>
          </div>
        </div>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
        <img src="https://picsum.photos/seed/yoga-mat/100/100" alt="Yoga Mat" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Eco-Friendly Yoga Mat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Connect with nature and your inner self.</p>
          <div class="flex items-center justify-between mt-2 flex-wrap">
            <p class="text-md font-bold text-rose-600 dark:text-rose-400">$49.99</p>
            <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
              <span class="font-medium text-lg">1</span>
              <button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
      <div class="flex justify-between items-center text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">
        <span>Total:</span>
        <span class="text-rose-700 dark:text-rose-300">$179.98</span>
      </div>
      <button class="w-full py-4 rounded-xl text-xl font-semibold text-white bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg animate-bounce-once">Proceed to Checkout</button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }

  @keyframes bounce-once {
    0%, 100% {
      transform: translateY(0);
    }
    20%, 50%, 80% {
      transform: translateY(-5px);
    }
    40%, 60% {
      transform: translateY(0);
    }
  }
  .animate-bounce-once:hover {
    animation: bounce-once 0.8s ease-in-out;
  }
</style>
              

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700">

    <!-- Memphis Design Elements (Abstract) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-rose-500 dark:bg-rose-600 opacity-70 transform -translate-x-12 -translate-y-12 rotate-45 z-0"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gray-700 dark:bg-gray-600 opacity-30 transform translate-x-16 translate-y-16 skew-x-12 z-0"></div>
    <div class="absolute top-1/4 right-0 w-16 h-16 bg-black dark:bg-gray-900 opacity-40 rounded-full z-0"></div>

    <div class="relative z-10 p-5 sm:p-6 lg:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-black dark:text-white mb-6 text-center tracking-tight uppercase">
        Your Order Inquiry
      </h2>

      <!-- Cart Item -->
      <div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
        <div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <img src="https://picsum.photos/id/684/80/80" alt="Industrial Part 1" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-rose-500 opacity-20"></div>
        </div>
        <div class="ml-4 flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">High-Precision Bearing</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Part #ABC-12345</p>
          <div class="flex items-center mt-2">
            <span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$249.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">x 2</span>
          </div>
        </div>
        <button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Cart Item -->
      <div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
        <div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <img src="https://picsum.photos/id/111/80/80" alt="Industrial Part 2" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-rose-500 opacity-20"></div>
        </div>
        <div class="ml-4 flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">Heavy-Duty Gearbox</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Part #XYZ-98765</p>
          <div class="flex items-center mt-2">
            <span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$1250.00</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">x 1</span>
          </div>
        </div>
        <button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Totals Summary -->
      <div class="border-t-2 border-dashed border-gray-300 dark:border-gray-700 pt-4 mt-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Subtotal</span>
          <span class="text-lg font-semibold text-black dark:text-white">$1749.98</span>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Taxes & Fees (Est.)</span>
          <span class="text-lg font-semibold text-black dark:text-white">$0.00</span>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase tracking-wide">Estimated Total</span>
          <span class="text-xl sm:text-2xl font-extrabold text-rose-500 dark:text-rose-400">$1749.98</span>
        </div>
      </div>

      <button class="w-full bg-black dark:bg-white text-white dark:text-black py-3 px-6 rounded-lg text-lg font-semibold uppercase tracking-wider transition-all duration-300 ease-in-out hover:bg-rose-500 hover:text-white dark:hover:bg-rose-500 dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-rose-500 dark:focus:ring-rose-400 focus:ring-opacity-50 mt-6 shadow-lg">
        Proceed to Inquiry
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
        Prices are estimates for industrial clients. Final pricing subject to quote.
      </p>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-r from-emerald-700 to-green-800 dark:from-green-900 dark:to-emerald-900 text-white border-b-4 border-emerald-900 dark:border-emerald-700">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-wide drop-shadow-lg">Your Travel Cart</h1>
      <p class="mt-2 text-md sm:text-lg text-green-100">Review your selected adventures before checkout.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-4 sm:p-6 lg:p-8">
      <!-- Cart Items Section -->
      <div class="lg:col-span-2 space-y-6">

        <!-- Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/300/200?random=1" alt="Machu Picchu Tour" class="w-full sm:w-32 h-24 object-cover rounded-lg mr-0 sm:mr-4 mb-4 sm:mb-0 border-2 border-emerald-600 dark:border-emerald-400 group-hover:scale-105 transition-transform duration-300">
          <div class="flex-1">
            <h2 class="text-lg sm:text-xl font-bold text-emerald-800 dark:text-emerald-300">Machu Picchu Adventure (3 Days)</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300">Date: Oct 26 - Oct 29, 2024</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Participants: 2 Adults</p>
            <div class="flex items-center mt-2">
              <span class="text-lg font-semibold text-gray-800 dark:text-white">$1,200.00</span>
              <div class="flex ml-auto items-center space-x-2">
                <label for="qty-1" class="sr-only">Quantity</label>
                <input type="number" id="qty-1" value="1" min="1" class="w-16 text-center border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <button class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-500 transition-colors duration-200" aria-label="Remove item">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>
          <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200" aria-label="More options">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
        </div>

        <!-- Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/300/200?random=2" alt="Amazon River Cruise" class="w-full sm:w-32 h-24 object-cover rounded-lg mr-0 sm:mr-4 mb-4 sm:mb-0 border-2 border-emerald-600 dark:border-emerald-400 group-hover:scale-105 transition-transform duration-300">
          <div class="flex-1">
            <h2 class="text-lg sm:text-xl font-bold text-emerald-800 dark:text-emerald-300">Amazon River Cruise (Night)</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300">Date: Nov 15, 2024</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Participants: 1 Adult</p>
            <div class="flex items-center mt-2">
              <span class="text-lg font-semibold text-gray-800 dark:text-white">$350.00</span>
              <div class="flex ml-auto items-center space-x-2">
                <label for="qty-2" class="sr-only">Quantity</label>
                <input type="number" id="qty-2" value="1" min="1" class="w-16 text-center border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <button class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-500 transition-colors duration-200" aria-label="Remove item">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>
          <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200" aria-label="More options">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
        </div>

        <!-- Add more items, perhaps a placeholder for empty state -->
        <div class="text-center p-4 text-gray-500 dark:text-gray-400 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
          <p class="text-sm">Want to add more adventures? <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Explore our tours</a></p>
        </div>

      </div>

      <!-- Order Summary Section -->
      <div class="lg:col-span-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 h-fit sticky top-4">
        <h2 class="text-xl sm:text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4 border-b pb-2 border-gray-300 dark:border-gray-600">Order Summary</h2>
        <div class="space-y-4 text-gray-700 dark:text-gray-200">
          <div class="flex justify-between items-center">
            <span>Subtotal (2 items)</span>
            <span class="font-semibold">$1,550.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Estimated Taxes</span>
            <span class="font-semibold">$77.50</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Booking Fees</span>
            <span class="font-semibold">$25.00</span>
          </div>
          <div class="border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
            <div class="flex justify-between items-center text-lg font-bold text-emerald-800 dark:text-emerald-300">
              <span>Order Total</span>
              <span>$1,652.50</span>
            </div>
          </div>
        </div>

        <div class="mt-6">
          <label for="promo-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
          <div class="flex">
            <input type="text" id="promo-code" placeholder="SUMMER20" class="flex-grow border border-gray-300 dark:border-gray-600 rounded-l-md p-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
            <button class="bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded-r-md transition duration-200 ease-in-out">
              Apply
            </button>
          </div>
        </div>

        <button class="mt-6 w-full bg-emerald-700 hover:bg-emerald-800 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white font-extrabold py-3 rounded-lg text-lg tracking-wide shadow-lg transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-500 focus:ring-opacity-50">
          Proceed to Checkout
          <svg class="inline-block ml-2 w-5 h-5 -mt-1" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>

        <div class="mt-6 text-xs text-gray-500 dark:text-gray-400 text-center">
          <p>By proceeding, you agree to our <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Terms of Service</a> and <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Privacy Policy</a>.</p>
        </div>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Secure payment processed by:</p>
          <img src="https://picsum.photos/120/40?grayscale&random=3" alt="Payment Provider Logo" class="mx-auto rounded-md filter invert dark:filter-none opacity-80 dark:opacity-60">
        </div>

      </div>
    </div>
  </div>
</div>
              

                <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>
              

                <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-6xl bg-white border-4 border-blue-800 shadow-lg p-6 rounded-lg relative overflow-hidden dark:bg-gray-800 dark:border-blue-500">
    <!-- Retro Header Bar -->
    <div class="absolute top-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-b-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">SYSTEM CART V1.9.89Beta</span>
      <div class="flex space-x-2">
        <span>[FILE]</span>
        <span>[EDIT]</span>
        <span>[VIEW]</span>
        <span>[HELP]</span>
      </div>
    </div>
    <div class="pt-10 pb-4">
      <!-- Main Content Area -->
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items Section -->
        <div class="lg:w-2/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> INVENTORY SELECTION: ACTIVE</h2>

          <!-- Cart Item 1 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/tool1/120/120" alt="Industrial Robot Arm" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Z-900 Automated Assembly Arm</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: IND-RA9001 | Lot: 01-2023</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="2" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$49,999.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <!-- Cart Item 2 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/gearbox/120/120" alt="Precision Gearbox" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">HD Precision Gearbox (Model M8)</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: PART-GBM800 | Lot: 03-2024</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="5" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$1,250.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
            <button class="px-6 py-2 bg-blue-200 border-2 border-blue-400 text-blue-800 hover:bg-blue-300 rounded-md shadow-md dark:bg-blue-800 dark:border-blue-600 dark:text-blue-200 dark:hover:bg-blue-700">
              \u003c\u003c ADD MORE ITEMS
            </button>
            <button class="text-red-600 hover:underline">
              CLEAR ALL ITEMS
            </button>
          </div>
        </div>

        <!-- Order Summary Section -->
        <div class="lg:w-1/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> ORDER LOG: SUMMARY</h2>

          <div class="mb-4">
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Item Subtotal:</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$101,248.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Shipping (Freight):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$750.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Estimated Tax (7.5%):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$7,650.00</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-lg font-bold text-blue-800 dark:text-blue-300">TOTAL DUE:</span>
              <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100">$109,648.00</span>
            </div>
          </div>

          <div class="mb-6">
            <label for="promo" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-300">PROMO CODE / ACCOUNT ID:</label>
            <div class="flex">
              <input type="text" id="promo" class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" placeholder="Enter code">
              <button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-600">
                APPLY
              </button>
            </div>
          </div>

          <p class="text-gray-600 text-xs mb-4 dark:text-gray-400">
            <strong class="text-yellow-600 dark:text-yellow-400">\u003e\u003e SYSTEM MESSAGE:</strong> All orders are subject to final review and confirmation. Lead times may vary based on component availability. For bulk discounts, contact sales.
          </p>

          <button class="w-full bg-blue-800 text-white font-bold py-3 mt-4 rounded-md shadow-lg hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-500">
            \u003c\u003c INITIATE CHECKOUT PROTOCOL \u003e\u003e
          </button>
        </div>
      </div>
    </div>
    <!-- Retro Footer Bar -->
    <div class="absolute bottom-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-t-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">STATUS: READY | USER: JDOE89 | SESSION: ACTIVE</span>
      <div class="flex space-x-4">
        <span>[F1-Help]</span>
        <span>[F5-Refresh]</span>
        <span>[F12-Exit]</span>
      </div>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden lg:flex lg:flex-row-reverse">
    <!-- Order Summary / Cart Totals -->
    <div class="lg:w-1/3 p-6 sm:p-8 bg-orange-50 dark:bg-gray-700 border-b lg:border-b-0 lg:border-l border-orange-100 dark:border-gray-600">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-6 sm:mb-8">Order Summary</h2>
      <div class="space-y-4 mb-6">
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$385.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Shipping & Handling</span>
          <span>$15.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Taxes (5%)</span>
          <span>$19.25</span>
        </div>
      </div>
      <div class="border-t border-orange-200 dark:border-gray-600 pt-4 flex justify-between items-center text-xl font-semibold text-orange-900 dark:text-orange-100">
        <span>Order Total</span>
        <span>$419.25</span>
      </div>

      <div class="mt-8">
        <label for="promo_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
        <div class="flex">
          <input type="text" id="promo_code" class="flex-grow p-3 border border-orange-300 dark:border-gray-600 rounded-l-md focus:ring-orange-500 focus:border-orange-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none" placeholder="Enter code">
          <button class="px-4 py-3 bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-r-md transition duration-200 ease-in-out">
            Apply
          </button>
        </div>
      </div>

      <button class="mt-8 w-full bg-orange-800 hover:bg-orange-900 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-bold py-3 px-6 rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
        Proceed to Checkout
      </button>
      <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-400">
        Secure payment via SSL.
      </p>
    </div>

    <!-- Cart Items -->
    <div class="lg:w-2/3 p-6 sm:p-8">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 sm:mb-8">Your Shopping Cart (<span id="item_count">2</span> items)</h2>

      <div class="space-y-6">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/60/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Elegant Silk Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Burgundy Red, Size: One Size</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$120.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/166/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Artisan Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Autumn Brown, Size: Medium</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$265.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center">
        <a href="#" class="text-orange-700 dark:text-orange-400 hover:underline flex items-center mb-4 sm:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
          </svg>
          Continue Shopping
        </a>
        <button class="px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
          Clear Cart
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-8 transform transition-all duration-500 scale-95 md:scale-100
    dark:border dark:border-blue-700 dark:shadow-blue-500/30 shadow-lg">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-950 text-white
      before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-400/20 before:to-transparent before:animate-pulse-slow
      dark:before:from-blue-600/30 dark:before:to-transparent">
      <h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight tracking-tight text-shadow-lg
        dark:text-blue-200 dark:shadow-blue-300/50">
        Your Shopping Cart
      </h2>
      <p class="relative z-10 text-lg sm:text-xl font-light opacity-90">
        Review your items before checkout.
      </p>
      <div class="absolute inset-0 pointer-events-none glowing-lines"></div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">
              Ergonomic Wireless Mouse
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Color: Midnight Blue</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Premium USB-C Hub</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ports: 7-in-1</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">2</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item3/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Noise-Cancelling Headphones</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Model: ProAudio 3000</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$199.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <div class="flex justify-between items-center mt-6">
          <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-blue-400 dark:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900 glow-on-hover">
            <svg class="w-5 h-5" 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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            <span>Continue Shopping</span>
          </button>
          <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-red-400 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900 glow-on-hover">
            <svg class="w-5 h-5" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"/>
            </svg>
            <span>Clear Cart</span>
          </button>
        </div>
      </div>

      <!-- Order Summary -->
      <div class="lg:col-span-1 bg-gray-50 dark:bg-gray-700 rounded-lg p-4 sm:p-6 shadow-xl
        dark:border dark:border-blue-600/50 dark:shadow-blue-500/30
        relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-blue-500/10 before:blur-md before:animate-pulse-light">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight relative">Order Summary</h3>
        <div class="space-y-3 sm:space-y-4 text-lg text-gray-800 dark:text-gray-200 relative z-10">
          <div class="flex justify-between items-center">
            <span>Subtotal (4 items)</span>
            <span class="font-semibold">$400.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Shipping</span>
            <span class="font-semibold">$15.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Tax (8%)</span>
            <span class="font-semibold">$32.00</span>
          </div>
          <div class="h-px bg-gray-300 dark:bg-gray-600 my-4"></div>
          <div class="flex justify-between items-center font-bold text-xl sm:text-2xl text-blue-700 dark:text-blue-300">
            <span>Total</span>
            <span>$447.00</span>
          </div>
        </div>
        <button class="mt-6 w-full py-3 px-6 rounded-lg text-white font-bold text-lg sm:text-xl
          bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
          focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
          transition-all duration-300 transform hover:scale-105 shadow-lg border border-blue-700 dark:border-blue-900
          relative overflow-hidden glowing-button">
          Proceed to Checkout
          <span class="absolute top-0 left-0 w-full h-full bg-blue-500 opacity-0 animate-pulse-effect"></span>
        </button>
        <p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400 relative z-10">
          Shipping calculated at next step.
        </p>
      </div>
    </div>
  </div>

  <!-- Tailwind JIT / Custom styles for glow effects -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 0.3; }
    }
    @keyframes pulse-light {
      0%, 100% { opacity: 0.05; }
      50% { opacity: 0.15; }
    }
    @keyframes button-glow {
      0%, 100% { box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color); }
      50% { box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color); }
    }
    @keyframes text-shadow-glow {
      0%, 100% { text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.5); }
      50% { text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7); }
    }
    @keyframes pulse-effect {
      0% { transform: scale(0); opacity: 0.5; }
      100% { transform: scale(1); opacity: 0; }
    }

    .animate-pulse-slow { animation: pulse-slow 5s infinite ease-in-out; }
    .animate-pulse-light { animation: pulse-light 4s infinite ease-in-out; }
    .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .dark .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }

    .dark .text-shadow-glow {
      text-shadow: 0 0 5px #60A5FA, 0 0 10px #3B82F6;
      animation: text-shadow-glow 3s infinite alternate;
    }
    .glowing-button {
      --glow-color: #3B82F6;
      transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .dark .glowing-button {
      --glow-color: #60A5FA;
      box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }
    .glowing-button:hover {
      box-shadow: 0 0 8px var(--glow-color), 0 0 15px var(--glow-color), 0 0 25px var(--glow-color) !important;
    }
    .dark .glowing-button:hover {
      box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color) !important;
    }
    .glowing-button:focus {
        box-shadow: 0 0 0 4px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }

    .glow-on-hover {
      transition: box-shadow 0.3s, background-color 0.3s;
    }
    .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
    }

    .glowing-lines {
      pointer-events: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at top left, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%);
      filter: blur(10px);
      opacity: 0.6;
      animation: glowing-lines-effect 8s infinite alternate;
    }
    .dark .glowing-lines {
      background: radial-gradient(circle at top left, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%);
    }
    @keyframes glowing-lines-effect {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.02); opacity: 0.7; }
      100% { transform: scale(1); opacity: 0.6; }
    }
    .animate-pulse-effect {
      animation: pulse-effect 1.5s infinite;
    }
  </style>
</div>
              

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700 relative">
    <!-- Artistic Overlay (simulated with bg patterns) -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/watercolor.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/watercolor.png')] bg-repeat"></div>
    
    <div class="relaive z-10 p-6 sm:p-8">
      <h2 class="text-3xl sm:text-4xl font-bold mb-6 text-center text-stone-700 dark:text-stone-300 tracking-wide leading-tight" style="font-family: 'Playfair Display', serif;">Your Industrial Cart</h2>

      <!-- Cart Item -->
      <div class="flex flex-col sm:flex-row items-center bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm border border-stone-100 dark:border-stone-600 mb-4 transition-all duration-300 hover:shadow-md">
        <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mb-4 sm:mb-0 sm:mr-6 rounded-md overflow-hidden border border-stone-200 dark:border-stone-500">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/tool1/300/300" alt="Industrial Valve">
        </div>
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-stone-700 dark:text-stone-300 mb-2 leading-snug" style="font-family: 'Merriweather', serif;">Heavy-Duty Actuator Valve</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-2">SKU: IND-VL-789</p>
          <div class="flex items-center justify-center sm:justify-start text-lg">
            <span class="text-stone-900 dark:text-stone-100 font-bold mr-2">$499.00</span>
            <span class="text-stone-500 dark:text-stone-400">x 1</span>
          </div>
        </div>
        <div class="mt-4 sm:mt-0 flex-shrink-0">
          <button class="px-4 py-2 rounded-md bg-red-400 hover:bg-red-500 dark:bg-red-600 dark:hover:bg-red-700 text-white font-medium transition-colors duration-200 shadow-sm">
            Remove
          </button>
        </div>
      </div>

      <!-- Cart Item -->
      <div class="flex flex-col sm:flex-row items-center bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm border border-stone-100 dark:border-stone-600 mb-6 transition-all duration-300 hover:shadow-md">
        <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mb-4 sm:mb-0 sm:mr-6 rounded-md overflow-hidden border border-stone-200 dark:border-stone-500">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/gear/300/300" alt="Precision Gear Set">
        </div>
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-stone-700 dark:text-stone-300 mb-2 leading-snug" style="font-family: 'Merriweather', serif;">Precision Machined Gear Set</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-2">SKU: PRO-GR-123</p>
          <div class="flex items-center justify-center sm:justify-start text-lg">
            <span class="text-stone-900 dark:text-stone-100 font-bold mr-2">$250.00</span>
            <span class="text-stone-500 dark:text-stone-400">x 2</span>
          </div>
        </div>
        <div class="mt-4 sm:mt-0 flex-shrink-0">
          <button class="px-4 py-2 rounded-md bg-red-400 hover:bg-red-500 dark:bg-red-600 dark:hover:bg-red-700 text-white font-medium transition-colors duration-200 shadow-sm">
            Remove
          </button>
        </div>
      </div>

      <!-- Cart Summary -->
      <div class="border-t border-stone-200 dark:border-stone-600 pt-6 mt-6" style="border-style: dashed;">
        <div class="flex justify-between items-center mb-3">
          <span class="text-lg sm:text-xl text-stone-700 dark:text-stone-300">Subtotal:</span>
          <span class="text-lg sm:text-xl font-bold text-stone-900 dark:text-stone-100">$999.00</span>
        </div>
        <div class="flex justify-between items-center mb-3">
          <span class="text-lg sm:text-xl text-stone-700 dark:text-stone-300">Shipping:</span>
          <span class="text-lg sm:text-xl font-bold text-stone-900 dark:text-stone-100">$50.00</span>
        </div>
        <div class="flex justify-between items-center mb-6">
          <span class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200" style="font-family: 'Playfair Display', serif;">Total:</span>
          <span class="text-2xl sm:text-3xl font-extrabold text-stone-900 dark:text-stone-100">$1049.00</span>
        </div>

        <button class="w-full py-4 rounded-lg bg-stone-800 hover:bg-stone-900 dark:bg-stone-600 dark:hover:bg-stone-700 text-white text-xl font-bold tracking-wide shadow-lg transition-colors duration-200">
          Proceed to Checkout
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Optional: Add Google Fonts for better artistic feel -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
              

                <div class="font-sans antialiased text-[#222831] bg-[#FDF0D5] dark:bg-[#001D3D] dark:text-[#E0FBFC] min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-[#F6AE2D] dark:bg-[#003566] p-6 sm:p-8 rounded-lg shadow-xl border-4 border-[#00A1AB] dark:border-[#FFC300] transform transition duration-300 hover:scale-[1.01] overflow-hidden">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-[#001D3D] dark:text-[#E0FBFC] mb-6 sm:mb-8 text-center uppercase tracking-wide border-b-4 border-[#001D3D] dark:border-[#FFC300] pb-2">
      Your Groovy Cart
    </h1>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
        <img src="https://picsum.photos/100/100?random=1" alt="Vintage Gadget" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
        <div class="flex-1 text-center sm:text-left">
          <h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Retro Boombox</h2>
          <p class="text-sm text-[#393E46] dark:text-gray-300">Classic sound, modern vibe.</p>
          <div class="flex items-center justify-center sm:justify-start mt-2">
            <p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$129.99</p>
            <div class="flex items-center space-x-2">
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
              <span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">1</span>
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
            </div>
          </div>
        </div>
        <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
        <img src="https://picsum.photos/100/100?random=2" alt="Vintage Toy" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
        <div class="flex-1 text-center sm:text-left">
          <h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Pixelated Game Cartridge</h2>
          <p class="text-sm text-[#393E46] dark:text-gray-300">Unlock endless 8-bit adventures.</p>
          <div class="flex items-center justify-center sm:justify-start mt-2">
            <p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$39.50</p>
            <div class="flex items-center space-x-2">
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
              <span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">2</span>
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
            </div>
          </div>
        </div>
        <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="bg-[#FDF0D5] dark:bg-[#001D3D] p-6 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] mb-8">
      <h2 class="text-2xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-4 text-center border-b-2 border-[#F6AE2D] dark:border-[#FFC300] pb-2">Cart Totals</h2>
      <div class="flex justify-between items-center text-lg mb-2">
        <span class="text-[#393E46] dark:text-gray-300">Subtotal:</span>
        <span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="subtotal">$208.99</span>
      </div>
      <div class="flex justify-between items-center text-lg mb-4">
        <span class="text-[#393E46] dark:text-gray-300">Shipping:</span>
        <span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="shipping">$7.50</span>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t-2 border-[#F6AE2D] dark:border-[#FFC300] pt-4">
        <span class="text-[#001D3D] dark:text-[#E0FBFC]">Total:</span>
        <span class="text-[#00A1AB] dark:text-[#FFC300]" id="total">$216.49</span>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
        Continue Shopping
      </button>
      <button class="bg-[#00A1AB] dark:bg-[#2A9D8F] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#007D88] dark:hover:bg-[#3DDC84] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
        Proceed to Checkout
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </button>
    </div>

    <p class="text-center text-xs mt-8 text-[#393E46] dark:text-gray-400">
      Embrace the past, shop the future.
    </p>
  </div>
</div>