You are modifying the product stepper section you just created for my Shopify theme.

The current implementation has several problems. Please fix the existing code instead of rebuilding everything from scratch.

Current problems:

1. Product image is displayed too large
The product media/gallery area is too zoomed in and takes too much visual space.
Please reduce the product image display size and make the layout balanced.

Expected:
- Desktop layout: product media on the left, product info stepper on the right.
- Product media should not overflow or appear extremely zoomed.
- Use max-width / max-height / object-fit: contain where needed.
- Keep a clean white product page layout.
- On desktop, product image area should be around 52% width and product info around 48%, or another balanced ratio.
- On mobile, product image should be full width but not oversized.

2. Step mapping is wrong
When I go to the Frame Style step, it still displays Size options.
This means the option mapping logic is incorrect.

Please fix the step-to-option mapping.

Desired steps:
Step 1: Size
Step 2: Background
Step 3: Frame Style
Step 4: Custom Upload
Final action: Add to Cart

There should be no separate Review Order step.

Important:
Each step must show the correct product option only.
- Size step should only show Size option values.
- Background step should only show Background option values.
- Frame Style step should only show Frame Style / Framing Option / Color option values, depending on the real Shopify backend option name.
- Upload step should show Pet Name and UploadKit/custom upload area only.

If the backend product option names are different, create a clear mapping layer instead of repeating the Size options for every step.

Use logic similar to:
- Find product option whose name includes "size" for Step 1.
- Find product option whose name includes "background" for Step 2.
- Find product option whose name includes "frame", "framing", "style", or "color" for Step 3.
- If an option cannot be found, do not show Size as fallback. Instead show a clear theme editor warning or console warning.

3. Remove Review Order step
The current stepper has:
Size / Background / Frame / Custom / Review

Please remove the Review step completely.

New stepper should be:
1. Size
2. Background
3. Frame
4. Custom

After the customer completes Custom Upload, the main CTA should be Add to Cart.

There should not be a Review Order screen.

4. Next Step button must be separate from Add to Cart
Currently the earlier steps appear to use the Add to Cart button area or product form button behavior incorrectly.

Fix this:
- Step 1, Step 2, and Step 3 should only have a normal button: "Next Step"
- They must not submit the product form.
- They must not trigger cart add.
- They must not show UploadKit beside the button.
- They should only move the customer to the next step after validation.

Only Step 4 should show the actual Shopify Add to Cart button.

5. UploadKit placement is wrong
UploadKit currently appears beside the button or in an awkward position, especially on earlier steps.

Fix this:
- UploadKit/custom upload field should only appear inside Step 4.
- It should not appear beside Next Step buttons.
- It should not appear in Step 1, Step 2, or Step 3.
- It should be visually integrated into the Step 4 section.
- Pet Name input should appear together with UploadKit in Step 4.
- Add to Cart button should appear below Pet Name and UploadKit, not beside them.

Important:
Do not break UploadKit functionality.
If UploadKit is injected by an app block or a Shopify block, make this product stepper section support a dedicated editable block/area where I can manually add UploadKit from the Shopify theme editor.

6. Make the final Add to Cart area editable in the Shopify section editor
I need to control the upload area myself from the Shopify theme editor, because only when I add UploadKit manually in the right block/area will it display correctly.

Please add a section block or editable area for the Custom Upload step.

Preferred section block structure:
- block type: custom_upload
- block name: Custom Upload / UploadKit Area
- This block should render only inside Step 4.
- It should support app blocks if Shopify theme app blocks are available.
- If app blocks are not supported in this section, create a clearly marked Liquid block area where UploadKit code can be inserted.
- Pet Name input should be part of Step 4 and should be editable/configurable if possible.
- The Add to Cart button should remain below this upload block.

If the current theme already uses blocks for product form elements, keep compatibility with that system.

7. Description / Shipping / Guarantee section is not editable
Currently the three sections are not editable enough.

Fix this:
The product information tabs/accordion must be editable from the section settings.

Add theme editor settings for:
- Description tab title
- Description content source:
- Option A: use product.description
- Option B: custom rich text
- Custom description rich text
- Shipping tab title
- Shipping rich text
- Guarantee tab title
- Guarantee rich text
- Read more text
- Read less text
- Collapsed text height

Default tab labels:
- Description
- Shipping
- Guarantee

Default content:
- Description can use product.description
- Shipping and Guarantee should use editable rich text from settings

8. Description / Shipping / Guarantee must collapse with Read More
The tabs currently show too much content and do not collapse like the competitor.

Expected behavior:
- The three tabs should appear in one row on desktop.
- Clicking a tab changes the content.
- Only a short preview of the selected tab content is shown initially.
- Show a “Read more” link/button below the preview.
- Clicking “Read more” expands the full content.
- Clicking “Read less” collapses it again.
- On mobile, this can become accordion style if easier, but it still needs read more/read less behavior.
- The collapsed height should be controllable from section settings, for example 120px or 160px.
- The content should fade out at the bottom when collapsed if possible.

9. Improve visual layout of buttons
The current "Next Step" button is too tall and looks like a black vertical pill.

Fix the button styling:
- Next Step button should be horizontal, full width or normal CTA width
- Use black background with white text
- Border radius around 14px to 999px depending on the design
- Height around 48px to 56px
- It should not appear as a tall vertical oval
- Back button should be secondary style: light gray background, dark text
- Add to Cart button should be the strongest CTA

10. Keep LoveInPix style
Use my LoveInPix style:
- White / very light gray background
- Coral accent color: #ff6b6b or current section accent color
- Black main CTA
- Rounded cards
- Clean modern layout
- Friendly custom pet portrait ecommerce feeling

11. Preserve Shopify functionality
Do not break:
- Real Shopify variant selection
- Selected variant ID input name="id"
- Quantity input
- Add to cart
- UploadKit
- Line item properties
- Cart drawer
- Sticky header
- Product media gallery

12. Required final structure
The product form should work like this:

Step 1: Size
- Show Size options
- Next Step button only

Step 2: Background
- Show Background options
- Back button
- Next Step button only

Step 3: Frame Style
- Show Frame Style options
- Back button
- Next Step button only

Step 4: Custom
- Show Pet Name input
- Show UploadKit/custom upload editable block area
- Show Quantity selector
- Show Add to Cart button
- Show Back button
- Submit real Shopify product form only here

13. Debug output
After fixing the code, please provide:
- Which files were modified
- Which section was modified
- How the product option mapping works now
- How to edit Description / Shipping / Guarantee in the theme editor
- How to place UploadKit inside the Custom Upload step
- Whether the final Add to Cart button is the real Shopify product form submit button
- How to test each step