Best Seller

Please build a custom Shopify Liquid section for a Collection page. You MUST follow every single instruction below strictly. Do not hallucinate fields or ignore the schema requirements.

### 1. GENERAL LAYOUT & CSS
- Create a 2-column grid layout (Left Column and Right Column).
- The main container must have a max-width of 1200px, centered on the screen.
- On desktop, columns should be side-by-side (grid-template-columns: 1fr 1fr; gap: 24px).
- On mobile, they should stack vertically.

### 2. LEFT COLUMN: "WHY CHOOSE US" (SCHEMA & LIQUID)
- **Design:** Soft cyan/light blue background gradient with rounded corners (16px).
- **Schema Requirements (CRITICAL):**
1. DO NOT create individual text settings for headings or bullet points.
2. Create exactly ONE `richtext` setting with the id `"why_choose_content"` and label `"Why Choose Us Content"`. This is crucial so I can connect my dynamic collection metafield to this single block in the theme editor.
3. Create an `image_picker` setting with id `"left_bg_image"` for the background.
4. Create an `image_picker` setting with id `"left_product_image"` for the vape device image on the bottom right of this column.
- **Liquid Requirements:** Output `{{ section.settings.why_choose_content }}` inside the left column div. Place the `left_product_image` absolutely positioned at the bottom right.

### 3. RIGHT COLUMN: "NICOTINE STRENGTH GUIDE" (SCHEMA)
- **Schema Requirements:**
1. `text` setting id: `"right_title"`, label: `"Title"`, default: `"NICOTINE STRENGTH GUIDE"`.
2. `text` setting id: `"right_subtitle"`, label: `"Subtitle"`.
3. `image_picker` setting id: `"card_icon_1"`, label: `"Card 1 Background Icon"`.
4. `image_picker` setting id: `"card_icon_2"`, label: `"Card 2 Background Icon"`.
5. `image_picker` setting id: `"card_icon_3"`, label: `"Card 3 Background Icon"`.
6. `text` setting id: `"footer_text"`, label: `"Footer Text"`.
7. `url` setting id: `"footer_link"`, label: `"Footer Link"`.

### 4. RIGHT COLUMN: NICOTINE CARDS (DYNAMIC LOGIC & LOOP)
- **Layout:** The 3 strength cards must be displayed HORIZONTALLY side-by-side in one row (use CSS `grid-template-columns: repeat(3, 1fr)`). Do NOT stack them vertically.
- **Dynamic Metaobject Loop:** You must loop through my specific metaobject to generate the cards. Use this exact loop: `{% for strength in shop.metaobjects['strength_based'].values %}`.
- **Inside the Loop:**
- Card 1 (index 1) background: Light Green (#e6f7eb). Apply `card_icon_1` as a faint background image.
- Card 2 (index 2) background: Light Blue (#e6f0fa). Apply `card_icon_2` as a faint background image.
- Card 3 (index 3) background: Light Pink (#fae6ea). Apply `card_icon_3` as a faint background image.
- Print the name using `{{ strength.display_name }}` as a bold heading.
- Print the text "Nicotine Strength" as a sub-label.

### 5. DYNAMIC PRODUCT COUNTER (CRITICAL LOGIC)
- Inside the metaobject loop mentioned above, you MUST calculate how many products in the current collection match that strength.
- Write this specific Liquid logic inside the card loop:
`{% assign prod_count = 0 %}`
`{% for product in collection.products %}`
` {% if product.metafields.custom.strength.value.display_name == strength.display_name %}`
` {% assign prod_count = prod_count | plus: 1 %}`
` {% endif %}`
`{% endfor %}`
- Output the result inside the card like this: `

{{ prod_count }} Products

`.

### 6. FINAL OUTPUT
Write the complete file including ``, `<div class="container">...</div>`, and `{% schema %}` blocks ensuring all dynamic elements, horizontal alignments, and product counters work correctly based on the instructions above.