Product Sticky ATC Base

<div class="ws-product-sticky-atc ws-sticky-atc fixed bottom-0 left-0 z-40 w-full translate-y-full border-t border-slate-200 bg-[var(--ws-product-sticky-atc-bg)]/95 backdrop-blur-sm transition-transform duration-300" id="sticky-atc">
  <div class="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3">
    <!-- Product thumbnail -->
    <div class="hidden h-12 w-12 shrink-0 rounded-lg bg-slate-100 sm:block"></div>

    <!-- Product info -->
    <div class="hidden min-w-0 flex-1 sm:block">
      <p class="truncate text-sm font-medium text-slate-900">Premium Cotton T-Shirt</p>
      <p class="text-sm font-bold text-slate-900">€29.00</p>
    </div>

    <!-- Variant selector -->
    <select class="rounded-lg border border-slate-200 bg-[var(--ws-product-sticky-atc-bg)] px-3 py-2 text-sm text-slate-700 focus:ring-2 focus:ring-blue-500">
      <option>White / S — €29.00</option>
      <option>White / M — €29.00</option>
      <option>Black / M — €29.00</option>
      <option>Navy / L — €29.00</option>
    </select>

    <!-- Quantity -->
    <div class="flex items-center rounded-lg border border-slate-200">
      <button class="px-3 py-2 text-slate-500 hover:text-slate-900 dark:hover:text-white" aria-label="Decrease">−</button>
      <span class="w-8 text-center text-sm font-medium text-slate-900">1</span>
      <button class="px-3 py-2 text-slate-500 hover:text-slate-900 dark:hover:text-white" aria-label="Increase">+</button>
    </div>

    <!-- ATC button -->
    <button class="rounded-xl bg-[var(--ws-product-sticky-atc-action-bg)] px-6 py-2.5 text-sm font-semibold text-[var(--ws-product-sticky-atc-action-text)] hover:opacity-90">Add to Cart</button>
  </div>
</div>