Product Bundle Base

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

  <div class="space-y-4">
    <!-- Main product (always included) -->
    <div class="flex items-center gap-4">
      <div class="h-16 w-16 shrink-0 rounded-lg bg-slate-100"></div>
      <div class="flex-1">
        <p class="text-xs font-semibold text-blue-600">This item:</p>
        <p class="text-sm font-medium text-slate-900">Premium Cotton T-Shirt</p>
        <p class="text-sm font-semibold text-slate-900">€29.00</p>
      </div>
    </div>

    <div class="flex items-center gap-3 pl-2">
      <span class="text-lg font-bold text-slate-300">+</span>
    </div>

    <!-- Bundle item 1 -->
    <div class="flex items-center gap-4">
      <label class="flex items-center gap-4 cursor-pointer flex-1">
        <input type="checkbox" checked class="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
        <div class="h-16 w-16 shrink-0 rounded-lg bg-slate-100"></div>
        <div class="flex-1">
          <p class="text-sm font-medium text-slate-900">Slim Fit Chinos</p>
          <select class="mt-1 rounded border-slate-200 bg-transparent px-2 py-0.5 text-xs text-slate-600">
            <option>Beige / M</option>
            <option>Navy / M</option>
            <option>Black / L</option>
          </select>
        </div>
        <p class="text-sm font-semibold text-slate-900">€49.00</p>
      </label>
    </div>

    <div class="flex items-center gap-3 pl-2">
      <span class="text-lg font-bold text-slate-300">+</span>
    </div>

    <!-- Bundle item 2 -->
    <div class="flex items-center gap-4">
      <label class="flex items-center gap-4 cursor-pointer flex-1">
        <input type="checkbox" checked class="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
        <div class="h-16 w-16 shrink-0 rounded-lg bg-slate-100"></div>
        <div class="flex-1">
          <p class="text-sm font-medium text-slate-900">Leather Belt</p>
          <select class="mt-1 rounded border-slate-200 bg-transparent px-2 py-0.5 text-xs text-slate-600">
            <option>Brown / One Size</option>
            <option>Black / One Size</option>
          </select>
        </div>
        <p class="text-sm font-semibold text-slate-900">€35.00</p>
      </label>
    </div>
  </div>

  <!-- Totals -->
  <div class="mt-6 border-t border-slate-200 pt-4">
    <div class="flex items-center justify-between text-sm">
      <span class="text-slate-500">Total price:</span>
      <div class="flex items-center gap-2">
        <span class="text-slate-400 line-through">€113.00</span>
        <span class="text-lg font-bold text-slate-900">€99.00</span>
      </div>
    </div>
    <button class="mt-3 w-full rounded-xl bg-[var(--ws-product-bundle-action-bg)] py-3 text-sm font-semibold text-[var(--ws-product-bundle-action-text)] hover:opacity-90">Add selected to cart</button>
  </div>
</section>