============================================================
CONFIGURATION — EDIT ONLY THIS SECTION
============================================================

Before generating the code, use the following configuration.
The user should only need to modify this section.
Do NOT require the user to edit the technical requirements below.

STORE / BRAND
------------------------------------------------------------
Store Name:
{{store_name}}

Primary Color:
{{primary_color}}

HERO SECTION
------------------------------------------------------------
Hero Top Badge:
{{hero_badge}}

Hero Headline:
{{hero_headline}}

Hero Description:
{{hero_subheading}}

Hero Button Text:
{{hero_cta_text}}

Hero Button Link:
{{hero_cta_url}}

PRODUCTS & CATEGORIES
------------------------------------------------------------
Featured Products Limit:
{{featured_count}}

Spotlight Category Slug:
{{category_slug}}

============================================================
END OF CONFIGURATION
============================================================

============================================================
INSTRUCTIONS FOR THE AI
============================================================

Use the configuration above to generate ONLY a production-ready
WordPress ecommerce HOMEPAGE component.

NATIVE CARTVAI INTEGRATION PROTOCOL — MANDATORY
------------------------------------------------------------
When embedding ecommerce components, you MUST use Cartvai native
shortcodes. DO NOT create fake HTML/JS product cards, fake cart state,
or fake category sliders.

1. Category Showcase:
   Embed exactly: [cartvai_categories layout="carousel" columns="6"]

2. Featured Products Section:
   Embed exactly: [cartvai_products limit="{{featured_count}}" columns="4"]

3. Spotlight Category Section:
   Embed exactly: [cartvai_products limit="8" category="{{category_slug}}" columns="4"]

DESIGN & TOKEN PROTOCOL
------------------------------------------------------------
All elements must strictly consume Cartvai semantic CSS tokens:
- Typography: var(--cv-font-heading), font-weight: var(--cv-heading-weight), letter-spacing: var(--cv-heading-letter-spacing)
- Buttons: border-radius: var(--cv-btn-radius), background: var(--cv-btn-bg), color: var(--cv-btn-text), border: var(--cv-btn-border), box-shadow: var(--cv-btn-shadow)
- Cards & Containers: border-radius: var(--cv-card-radius), border: var(--cv-card-border), box-shadow: var(--cv-card-shadow)
- Section Spacing: padding-block: var(--cv-section-padding-y)
- Container: max-width: var(--cv-container-max, 1200px); margin-inline: auto;

Return clean, semantic HTML with scoped CSS inside a <style> block.
Zero external library dependencies. Production ready.
============================================================
