Product Volume Discount Base

<section class="ws-product-volume-discount ws-volume-discount rounded-2xl border border-slate-200 bg-[var(--ws-product-volume-discount-bg)] p-6">
  <h3 class="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500">Volume Discounts</h3>

  <div class="space-y-2">
    <!-- Tier 1 -->
    <label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50 dark:hover:border-blue-600 dark:has-[:checked]:border-blue-500 dark:has-[:checked]:bg-blue-900/20">
      <div class="flex items-center gap-3">
        <input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500" checked>
        <div>
          <p class="text-sm font-medium text-slate-900">Buy 1 item</p>
          <p class="text-xs text-slate-500">Regular price</p>
        </div>
      </div>
      <p class="text-sm font-bold text-slate-900">€29.00</p>
    </label>

    <!-- Tier 2 -->
    <label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 dark:hover:border-blue-600">
      <div class="flex items-center gap-3">
        <input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500">
        <div>
          <p class="text-sm font-medium text-slate-900">Buy 3 items <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 10%</span></p>
          <p class="text-xs text-slate-500">€26.10 per item</p>
        </div>
      </div>
      <div class="text-right">
        <p class="text-xs text-slate-400 line-through">€87.00</p>
        <p class="text-sm font-bold text-slate-900">€78.30</p>
      </div>
    </label>

    <!-- Tier 3 -->
    <label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 dark:hover:border-blue-600">
      <div class="flex items-center gap-3">
        <input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500">
        <div>
          <p class="text-sm font-medium text-slate-900">Buy 5 items <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 20%</span></p>
          <p class="text-xs text-slate-500">€23.20 per item</p>
        </div>
      </div>
      <div class="text-right">
        <p class="text-xs text-slate-400 line-through">€145.00</p>
        <p class="text-sm font-bold text-slate-900">€116.00</p>
      </div>
    </label>

    <!-- Tier 4: Best value -->
    <label class="relative flex cursor-pointer items-center justify-between rounded-xl border-2 border-amber-400 p-3 transition">
      <span class="absolute -top-2.5 left-3 rounded-full bg-amber-400 px-2 py-0.5 text-[10px] font-bold uppercase text-amber-900">Best Value</span>
      <div class="flex items-center gap-3">
        <input type="radio" name="volume" class="text-blue-600 focus:ring-blue-500">
        <div>
          <p class="text-sm font-medium text-slate-900">Buy 10 items <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 30%</span></p>
          <p class="text-xs text-slate-500">€20.30 per item</p>
        </div>
      </div>
      <div class="text-right">
        <p class="text-xs text-slate-400 line-through">€290.00</p>
        <p class="text-sm font-bold text-slate-900">€203.00</p>
      </div>
    </label>
  </div>

  <button class="mt-4 w-full rounded-xl bg-[var(--ws-product-volume-discount-action-bg)] py-3 text-sm font-semibold text-[var(--ws-product-volume-discount-action-text)] hover:opacity-90">Choose this deal</button>
</section>