A clearer view of Shopify bundles in cart, similar to checkout

{% if item.item_components.size > 0 %}
	<style>#product--bundle img{max-width: 100%;width: 100%;object-fit: contain;border: 1px solid #ccc;border-radius: 5px;padding: 2px;}</style>
	<ul id="product--bundle" style="list-style:none;padding-left:0;display: flex;flex-direction: column;flex-wrap: nowrap;gap:.75rem;">
	{% for subitem in item.item_components %}
	<li style="display:flex;flex-direction:row;gap:1rem;">
	  <div style="display:inline-flex;">
	    <div>{{ subitem.image | image_url: width: 40, height: 40 | image_tag }}</div>
	  </div>
	  <div style="flex:1;">
	    <div style="font-size:14px;">{{ subitem.quantity }} × {{ subitem.product.title }}</div>
	    <div style="color:grey;font-size:12px;">{{ subitem.variant.title }}</div>
	  </div>
	</li>
	{% endfor %}
	</ul>
{% endif %}