---
categories: true
carousel: {{theme_settings.homepage_show_carousel}}
products:
    new:
        limit: {{theme_settings.homepage_new_products_count}}
    featured:
        limit: {{theme_settings.homepage_featured_products_count}}
    top_sellers:
        limit: {{theme_settings.homepage_top_products_count}}
blog:
    recent_posts:
        limit: {{theme_settings.homepage_blog_posts_count}}
        summary: 300
brands:
shop_by_brand:
    limit: 10
gql: "query HomeMakers { site { brands(first: 12) { edges { node { name path defaultImage { url(width: 320) } } } } } }"
---
{{#partial "hero"}}

    {{!-- BigCommerce Marketing Banners (Control Panel > Marketing > Banners).
         Platform auto-filters by page + position + visibility + date rule,
         so the theme only needs to render them. Independent of yen-topbar.
         Rendered at the very top of the page (above the hero carousel) so the
         "top" banner position is consistent with category/brand/search pages. --}}
    {{#if banners.top}}
    <div class="yen-container"><div class="yen-mkt-banner yen-mkt-banner--top">{{#each banners.top}}<div class="yen-mkt-banner__item">{{{this}}}</div>{{/each}}</div></div>
    {{/if}}

    {{{region name="home_below_menu"}}}

    {{!-- Ember Theme: Hero Carousel (3-slide, content-synced) --}}
    <section class="yen-hero yen-hero-carousel"
             aria-roledescription="carousel"
             aria-label="{{lang 'homepage.hero_carousel_label'}}"
             data-yen-hero-carousel
             data-yen-slide-label="{{lang 'homepage.hero_slide_position' current='%current%' total='%total%'}}"
             data-autoplay="{{#if carousel.slides}}{{#if carousel.swap_frequency}}{{carousel.swap_frequency}}{{else}}6000{{/if}}{{else}}6000{{/if}}">
        {{assignVar 'yenPills' theme_settings.yen-hero-pills}}{{assignVar 'yenPill1' theme_settings.yen-hero-pill-1}}{{assignVar 'yenPill2' theme_settings.yen-hero-pill-2}}{{assignVar 'yenPill3' theme_settings.yen-hero-pill-3}}{{> components/common/promise-pill-vars}}
        {{!-- The editorial preset brings its own photographs and copy: the classic ones are
             furniture, which is what made the Fashion variation read as the Home store. --}}
        {{assignVar 'yenHeroKey' 'homepage.hero_slide'}}{{assignVar 'yenCtaKey' 'homepage.hero_slide'}}{{assignVar 'yenHeroDir' 'img/yen-theme/'}}
        {{#if theme_settings.yen-layout-preset '===' 'editorial'}}{{assignVar 'yenHeroKey' 'homepage.editorial_slide'}}{{assignVar 'yenHeroDir' 'img/yen-theme/editorial/'}}{{/if}}
        {{!-- The Food variation keeps the classic layout but not its furniture: its content
             set brings food photographs and copy. --}}
        {{#if theme_settings.yen-content-set '===' 'food'}}{{assignVar 'yenHeroKey' 'homepage.food_slide'}}{{assignVar 'yenCtaKey' 'homepage.food_slide'}}{{assignVar 'yenHeroDir' 'img/yen-theme/food/'}}{{/if}}
        {{!-- Classic slides 2 and 3 sell bedrooms and patios, so on a store of its own they keep only
             their Page Builder region, and yen-theme.js drops a slide whose region is empty; the
             demo stores (hidden yen-demo-content) keep the sample slides. yenHeroCount 1 marks that. --}}
        {{assignVar 'yenHeroCount' 3}}
        {{#if carousel.slides}}{{assignVar 'yenHeroCount' carousel.slides.length}}{{else if (getVar 'yenHeroKey') '===' 'homepage.hero_slide'}}{{#unless theme_settings.yen-demo-content}}{{assignVar 'yenHeroCount' 1}}{{/unless}}{{/if}}
        <div class="container">
            {{!-- Every slide shares one box, so the first Control Panel photograph's shape sets
                 how tall it grows on a wide screen (editorial and market). --}}
            <div class="yen-hero-carousel__viewport"{{#each carousel.slides}}{{#if @first}}{{#if stencil_image.width}}{{#if stencil_image.height}} style="--yen-hero-ratio: calc({{stencil_image.height}} / {{stencil_image.width}})"{{/if}}{{/if}}{{/if}}{{/each}}>
{{#if carousel.slides}}
                {{!-- Control Panel > Storefront > Carousel. Requested by the front matter only while
                     homepage_show_carousel is on, so with it off -- or with no slides -- the theme's
                     own slides below render instead. Same markup and classes as those, so the
                     presets, the phone layout and yen-theme.js treat both alike. Text is escaped. --}}
                {{!-- On the storefront the root context is out of reach inside this loop (the slide
                     count rendered as "undefined"), so what the slides read from the page is copied in first. --}}
                {{assignVar 'yenCpTotal' carousel.slides.length}}{{assignVar 'yenCpPreset' theme_settings.yen-layout-preset}}{{assignVar 'yenCpFocus1' theme_settings.yen-hero-1-focus}}{{assignVar 'yenCpFocus2' theme_settings.yen-hero-2-focus}}{{assignVar 'yenCpFocus3' theme_settings.yen-hero-3-focus}}{{assignVar 'yenCpContainer' theme_settings.yen-container-width}}
                {{#each carousel.slides}}
                {{!-- A button with no link is left out, so it does not earn the slide a text column. --}}
                {{assignVar 'yenCpCta' ''}}{{#if button_text}}{{#if url}}{{assignVar 'yenCpCta' 'y'}}{{/if}}{{/if}}
                <article class="yen-hero-carousel__slide{{#if @first}} is-active{{/if}}" data-slide-index="{{@index}}" aria-hidden="{{#if @first}}false{{else}}true{{/if}}" aria-roledescription="slide" aria-label="{{lang 'homepage.hero_slide_position' current=(add @index 1) total=(getVar 'yenCpTotal')}}">
                    <div class="yen-hero-carousel__fallback{{#or heading text (getVar 'yenCpCta')}}{{else}} yen-hero-carousel__fallback--media-only{{/or}}{{#if url}}{{#unless button_text}} yen-hero-carousel__fallback--linked{{/unless}}{{/if}}">
                        {{#or heading text (getVar 'yenCpCta')}}
                        <div class="yen-hero-carousel__content">
                            {{#if heading}}<h2 class="yen-hero-carousel__heading">{{heading}}</h2>{{/if}}
                            {{#if text}}<p class="yen-hero-carousel__subheading">{{text}}</p>{{/if}}
                            {{!-- A button with no link has nowhere to go, so it is left out. --}}
                            {{#if button_text}}{{#if url}}
                            <div class="yen-hero-carousel__actions">
                                <a class="button button--accent yen-hero-carousel__cta" href="{{url}}"{{#unless @first}} tabindex="-1"{{/unless}}><span class="yen-hero-carousel__cta-label">{{button_text}} <span aria-hidden="true">&rarr;</span></span></a>
                            </div>
                            {{/if}}{{/if}}
                            {{> components/home/hero-pills}}
                        </div>
                        {{/or}}
                        {{!-- `sizes` is the theme slides' hint: the box is the same, only the photo differs. An
                             image-only classic slide fills the container instead of the 7fr column. --}}
                        <div class="yen-hero-carousel__media">
                            {{#if url}}{{#unless button_text}}<a class="yen-hero-carousel__media-link" href="{{url}}"{{#unless alt_text}} aria-label="{{#if heading}}{{heading}}{{else}}{{lang 'homepage.hero_slide_number' number=(add @index 1)}}{{/if}}"{{/unless}}{{#unless @first}} tabindex="-1"{{/unless}}>{{/unless}}{{/if}}
                            <img src="{{getImageSrcset stencil_image 1x='1280w'}}"{{#if @first}}{{#if (getVar 'yenCpFocus1')}} class="yen-hero-focus-{{getVar 'yenCpFocus1'}}"{{/if}}{{/if}}{{#if @index '===' 1}}{{#if (getVar 'yenCpFocus2')}} class="yen-hero-focus-{{getVar 'yenCpFocus2'}}"{{/if}}{{/if}}{{#if @index '===' 2}}{{#if (getVar 'yenCpFocus3')}} class="yen-hero-focus-{{getVar 'yenCpFocus3'}}"{{/if}}{{/if}} srcset="{{getImageSrcset stencil_image use_default_sizes=true}}" sizes="{{#if (getVar 'yenCpPreset') '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if (getVar 'yenCpPreset') '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}{{#or heading text (getVar 'yenCpCta')}}(min-width: 1401px) 800px, (min-width: 801px) 58vw{{else}}(min-width: {{getVar 'yenCpContainer'}}px) {{getVar 'yenCpContainer'}}px{{/or}}, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" alt="{{alt_text}}"{{#if stencil_image.width}} width="{{stencil_image.width}}" height="{{stencil_image.height}}"{{/if}} {{#if @first}}loading="eager" fetchpriority="high"{{else}}loading="lazy"{{/if}} />
                            {{#if url}}{{#unless button_text}}</a>{{/unless}}{{/if}}
                        </div>
                    </div>
                </article>
                {{/each}}
{{else}}

                {{!-- Slide 1 — Page Builder region. Merchants drop a Banner widget
                     (image + heading + subheading + CTA) into this slot via Page Builder.
                     Falls back to default content below if no widget is placed (so the
                     demo store and freshly-installed themes still look complete). --}}
                <article class="yen-hero-carousel__slide is-active" data-slide-index="0" aria-hidden="false" aria-roledescription="slide" aria-label="{{lang 'homepage.hero_slide_position' current=1 total=3}}">
                    <div class="yen-hero-carousel__region" data-region="home_hero_slide_1">
                        {{{region name="home_hero_slide_1"}}}
                    </div>
                    {{!-- Slide 1 only. It is the LCP element on the home page, and
                          loading="eager" alone just means "do not defer" -- the browser
                          still queues it behind whatever it discovered first.
                          fetchpriority="high" says this is the one image worth contending
                          for. Slides 2 and 3 stay lazy: they are off-screen until the
                          carousel advances, and marking them high would compete with the
                          slide actually being looked at. --}}
                    <div class="yen-hero-carousel__fallback">
                        <div class="yen-hero-carousel__content">
                            <h2 class="yen-hero-carousel__heading">{{lang (concat (getVar 'yenHeroKey') '_1_heading_lead')}} <span class="yen-accent">{{lang (concat (getVar 'yenHeroKey') '_1_heading_accent')}}</span> {{lang (concat (getVar 'yenHeroKey') '_1_heading_trail')}}</h2>
                            {{!-- The classic subtitle promises fast shipping and easy returns, so it says so
                                  only beside the built-in pills with a free-shipping threshold. --}}
                            <p class="yen-hero-carousel__subheading">{{#if (getVar 'yenHeroKey') '===' 'homepage.hero_slide'}}{{#if (getVar 'yenPills') '===' 'custom'}}{{lang 'homepage.hero_slide_1_sub_short'}}{{else if (getVar 'yenPills') '===' 'off'}}{{lang 'homepage.hero_slide_1_sub_short'}}{{else if (getVar 'yenPill1Shows')}}{{lang 'homepage.hero_slide_1_sub'}}{{else}}{{lang 'homepage.hero_slide_1_sub_short'}}{{/if}}{{else}}{{lang (concat (getVar 'yenHeroKey') '_1_sub')}}{{/if}}</p>
                            <div class="yen-hero-carousel__actions">
                                {{!-- Fallback CTAs use BC's universal /categories/ route (the
                                     "All Categories" index page that exists on every BC store by
                                     default). Never point a fallback CTA at a demo-store category
                                     slug — it 404s on a freshly installed store. All three slides
                                     follow the same pair: primary -> /categories/, secondary ->
                                     the blog, so no slide ships two buttons with one destination.
                                     For real production sites, merchants should override this
                                     slide via Page Builder Banner widget with their preferred
                                     category/page URL. --}}
                                <a class="button button--accent yen-hero-carousel__cta" href="/categories/"><span class="yen-hero-carousel__cta-label">{{lang (concat (getVar 'yenCtaKey') '_1_cta')}} <span aria-hidden="true">&rarr;</span></span></a>
                                {{#if blog.url}}<a class="button yen-hero-carousel__cta yen-hero-carousel__cta--ghost" href="{{blog.url}}"><span class="yen-hero-carousel__cta-label">{{lang (concat (getVar 'yenCtaKey') '_1_cta_alt')}}</span></a>{{/if}}
                            </div>
                            {{> components/home/hero-pills}}
                        </div>
                        {{!-- Hero renditions are theme assets, so getImageSrcset cannot build
                             this srcset — it resolves a BigCommerce image object, and a file the
                             theme ships has none. The widths come from
                             scripts/images/build-hero-variants.js.

                             `sizes` mirrors the layout by hand: the image column is 7fr of the
                             5fr/7fr grid in _yen-theme.scss inside a container capped at 1400px,
                             which is the 732px Lighthouse measured, and it steps down as those
                             columns even out and then stack. On phones the photo covers a box
                             shorter than its 2.13:1 (classic up to 640px, editorial and market up
                             to 800px), so the hint there is the cropped width, box height x 2.13,
                             and yen-hero-<n>-focus picks the crop. Change the grid and this has to
                             move with it, on all three slides — a stale hint picks the wrong rendition
                             silently, costing sharpness or bytes rather than failing. --}}
                        <div class="yen-hero-carousel__media">
                            <picture>
                                <source
                                    type="image/webp"
                                    srcset="{{cdn (concat (getVar 'yenHeroDir') 'hero-1-800.webp')}} 800w, {{cdn (concat (getVar 'yenHeroDir') 'hero-1-1200.webp')}} 1200w, {{cdn (concat (getVar 'yenHeroDir') 'hero-1.webp')}} 1600w"
                                    sizes="{{#if theme_settings.yen-layout-preset '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if theme_settings.yen-layout-preset '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}(min-width: 1401px) 800px, (min-width: 801px) 58vw, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" />
                                <img src="{{cdn (concat (getVar 'yenHeroDir') 'hero-1.jpg')}}"{{#if theme_settings.yen-hero-1-focus}} class="yen-hero-focus-{{theme_settings.yen-hero-1-focus}}"{{/if}} srcset="{{cdn (concat (getVar 'yenHeroDir') 'hero-1-800.jpg')}} 800w, {{cdn (concat (getVar 'yenHeroDir') 'hero-1-1200.jpg')}} 1200w, {{cdn (concat (getVar 'yenHeroDir') 'hero-1.jpg')}} 1600w" sizes="{{#if theme_settings.yen-layout-preset '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if theme_settings.yen-layout-preset '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}(min-width: 1401px) 800px, (min-width: 801px) 58vw, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" alt="{{lang (concat (getVar 'yenHeroKey') '_1_alt')}}" loading="eager" fetchpriority="high" width="1600" height="750" />
                            </picture>
                        </div>
                    </div>
                </article>

                {{!-- Slide 2 --}}
                <article class="yen-hero-carousel__slide" data-slide-index="1" aria-hidden="true" aria-roledescription="slide" aria-label="{{lang 'homepage.hero_slide_position' current=2 total=3}}"{{#if (getVar 'yenHeroCount') '===' 1}} data-yen-region-only{{/if}}>
                    <div class="yen-hero-carousel__region" data-region="home_hero_slide_2">
                        {{{region name="home_hero_slide_2"}}}
                    </div>
                    {{#unless (getVar 'yenHeroCount') '===' 1}}
                    <div class="yen-hero-carousel__fallback">
                        <div class="yen-hero-carousel__content">
                            <h2 class="yen-hero-carousel__heading">{{lang (concat (getVar 'yenHeroKey') '_2_heading_lead')}} <span class="yen-accent">{{lang (concat (getVar 'yenHeroKey') '_2_heading_accent')}}</span> {{lang (concat (getVar 'yenHeroKey') '_2_heading_trail')}}</h2>
                            <p class="yen-hero-carousel__subheading">{{lang (concat (getVar 'yenHeroKey') '_2_sub')}}</p>
                            <div class="yen-hero-carousel__actions">
                                <a class="button button--accent yen-hero-carousel__cta" href="/categories/" tabindex="-1"><span class="yen-hero-carousel__cta-label">{{lang (concat (getVar 'yenCtaKey') '_2_cta')}} <span aria-hidden="true">&rarr;</span></span></a>
                                {{#if blog.url}}<a class="button yen-hero-carousel__cta yen-hero-carousel__cta--ghost" href="{{blog.url}}" tabindex="-1"><span class="yen-hero-carousel__cta-label">{{lang (concat (getVar 'yenCtaKey') '_2_cta_alt')}}</span></a>{{/if}}
                            </div>
                            {{> components/home/hero-pills}}
                        </div>
                        <div class="yen-hero-carousel__media">
                            <picture>
                                <source
                                    type="image/webp"
                                    srcset="{{cdn (concat (getVar 'yenHeroDir') 'hero-2-800.webp')}} 800w, {{cdn (concat (getVar 'yenHeroDir') 'hero-2-1200.webp')}} 1200w, {{cdn (concat (getVar 'yenHeroDir') 'hero-2.webp')}} 1600w"
                                    sizes="{{#if theme_settings.yen-layout-preset '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if theme_settings.yen-layout-preset '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}(min-width: 1401px) 800px, (min-width: 801px) 58vw, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" />
                                <img src="{{cdn (concat (getVar 'yenHeroDir') 'hero-2.jpg')}}"{{#if theme_settings.yen-hero-2-focus}} class="yen-hero-focus-{{theme_settings.yen-hero-2-focus}}"{{/if}} srcset="{{cdn (concat (getVar 'yenHeroDir') 'hero-2-800.jpg')}} 800w, {{cdn (concat (getVar 'yenHeroDir') 'hero-2-1200.jpg')}} 1200w, {{cdn (concat (getVar 'yenHeroDir') 'hero-2.jpg')}} 1600w" sizes="{{#if theme_settings.yen-layout-preset '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if theme_settings.yen-layout-preset '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}(min-width: 1401px) 800px, (min-width: 801px) 58vw, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" alt="{{lang (concat (getVar 'yenHeroKey') '_2_alt')}}" loading="lazy" width="1600" height="750" />
                            </picture>
                        </div>
                    </div>
                    {{/unless}}
                </article>

                {{!-- Slide 3 --}}
                <article class="yen-hero-carousel__slide" data-slide-index="2" aria-hidden="true" aria-roledescription="slide" aria-label="{{lang 'homepage.hero_slide_position' current=3 total=3}}"{{#if (getVar 'yenHeroCount') '===' 1}} data-yen-region-only{{/if}}>
                    <div class="yen-hero-carousel__region" data-region="home_hero_slide_3">
                        {{{region name="home_hero_slide_3"}}}
                    </div>
                    {{#unless (getVar 'yenHeroCount') '===' 1}}
                    <div class="yen-hero-carousel__fallback">
                        <div class="yen-hero-carousel__content">
                            <h2 class="yen-hero-carousel__heading">{{lang (concat (getVar 'yenHeroKey') '_3_heading_lead')}} <span class="yen-accent">{{lang (concat (getVar 'yenHeroKey') '_3_heading_accent')}}</span> {{lang (concat (getVar 'yenHeroKey') '_3_heading_trail')}}</h2>
                            <p class="yen-hero-carousel__subheading">{{lang (concat (getVar 'yenHeroKey') '_3_sub')}}</p>
                            <div class="yen-hero-carousel__actions">
                                <a class="button button--accent yen-hero-carousel__cta" href="/categories/" tabindex="-1"><span class="yen-hero-carousel__cta-label">{{lang (concat (getVar 'yenCtaKey') '_3_cta')}} <span aria-hidden="true">&rarr;</span></span></a>
                                {{#if blog.url}}<a class="button yen-hero-carousel__cta yen-hero-carousel__cta--ghost" href="{{blog.url}}" tabindex="-1"><span class="yen-hero-carousel__cta-label">{{lang (concat (getVar 'yenCtaKey') '_3_cta_alt')}}</span></a>{{/if}}
                            </div>
                            {{> components/home/hero-pills}}
                        </div>
                        <div class="yen-hero-carousel__media">
                            <picture>
                                <source
                                    type="image/webp"
                                    srcset="{{cdn (concat (getVar 'yenHeroDir') 'hero-3-800.webp')}} 800w, {{cdn (concat (getVar 'yenHeroDir') 'hero-3-1200.webp')}} 1200w, {{cdn (concat (getVar 'yenHeroDir') 'hero-3.webp')}} 1600w"
                                    sizes="{{#if theme_settings.yen-layout-preset '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if theme_settings.yen-layout-preset '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}(min-width: 1401px) 800px, (min-width: 801px) 58vw, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" />
                                <img src="{{cdn (concat (getVar 'yenHeroDir') 'hero-3.jpg')}}"{{#if theme_settings.yen-hero-3-focus}} class="yen-hero-focus-{{theme_settings.yen-hero-3-focus}}"{{/if}} srcset="{{cdn (concat (getVar 'yenHeroDir') 'hero-3-800.jpg')}} 800w, {{cdn (concat (getVar 'yenHeroDir') 'hero-3-1200.jpg')}} 1200w, {{cdn (concat (getVar 'yenHeroDir') 'hero-3.jpg')}} 1600w" sizes="{{#if theme_settings.yen-layout-preset '===' 'editorial'}}(max-width: 800px) 981px, (max-width: 1323px) 1323px, 100vw{{else if theme_settings.yen-layout-preset '===' 'market'}}(max-width: 800px) 1024px, (max-width: 1323px) 1323px, 100vw{{else}}(min-width: 1401px) 800px, (min-width: 801px) 58vw, (min-width: 641px) 100vw, (min-width: 358px) 120vw, 427px{{/if}}" alt="{{lang (concat (getVar 'yenHeroKey') '_3_alt')}}" loading="lazy" width="1600" height="750" />
                            </picture>
                        </div>
                    </div>
                    {{/unless}}
                </article>
{{/if}}

{{#unless carousel.slides.length '===' 1}}
                <button type="button" class="yen-hero-carousel__nav yen-hero-carousel__nav--prev" data-yen-hero-prev aria-label="{{lang 'homepage.hero_prev'}}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="22" height="22"><polyline points="15 18 9 12 15 6"/></svg>
                </button>
                <button type="button" class="yen-hero-carousel__nav yen-hero-carousel__nav--next" data-yen-hero-next aria-label="{{lang 'homepage.hero_next'}}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="22" height="22"><polyline points="9 18 15 12 9 6"/></svg>
                </button>
{{/unless}}
            </div>

{{!-- One slide: no dots, and yen-theme.js starts no autoplay, so no pause button either. --}}
{{#unless carousel.slides.length '===' 1}}
            <div class="yen-hero-carousel__dots" aria-label="{{lang 'homepage.hero_dots_label'}}">
{{#if carousel.slides}}
                {{#each carousel.slides}}
                <button type="button" class="yen-hero-carousel__dot{{#if @first}} is-active{{/if}}" data-yen-hero-dot="{{@index}}"{{#if @first}} aria-current="true"{{/if}} aria-label="{{lang 'homepage.hero_slide_number' number=(add @index 1)}}"></button>
                {{/each}}
{{else}}
                <button type="button" class="yen-hero-carousel__dot is-active" data-yen-hero-dot="0" aria-current="true" aria-label="{{lang 'homepage.hero_slide_number' number=1}}"></button>
                <button type="button" class="yen-hero-carousel__dot" data-yen-hero-dot="1" aria-label="{{lang 'homepage.hero_slide_number' number=2}}"></button>
                <button type="button" class="yen-hero-carousel__dot" data-yen-hero-dot="2" aria-label="{{lang 'homepage.hero_slide_number' number=3}}"></button>
{{/if}}
                {{!-- Hidden until yen-theme.js shows it: without scripts there is no autoplay to stop. --}}
                <button type="button" class="yen-hero-carousel__pause" data-yen-hero-pause aria-pressed="false" aria-label="{{lang 'homepage.hero_pause'}}" hidden>
                    <svg class="yen-hero-carousel__pause-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="14" height="14"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
                    <svg class="yen-hero-carousel__play-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="14" height="14"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z"/></svg>
                </button>
            </div>
{{/unless}}
        </div>
    </section>

    {{{region name="home_below_carousel"}}}

    {{!-- Market preset: the trust claims as a slim strip here, instead of the tiles below. --}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}{{> components/home/market/trust-strip}}{{/if}}
{{/partial}}

{{#partial "page"}}

    {{!-- Promotion notices sit on the page gutter like every other block, not edge to edge. --}}
    {{#if shipping_messages}}
    <div class="yen-container yen-home-notices">
        {{#each shipping_messages}}
            {{> components/common/alert/alert-info message}}
        {{/each}}
    </div>
    {{/if}}

<div class="main full">

    {{!-- Shop by Category --}}
    {{#if categories.length}}
    <section class="yen-section--tight yen-section--alt">
        <div class="yen-container">
            <div class="yen-section-header">
                <h2 class="yen-section-title">{{lang 'categories.shop_by'}}</h2>
            </div>
            {{!-- Five framed cards fill the classic row; the market preset sets its aisles
                  four to a row as photographs, so it shows eight in two rows. --}}
            {{assignVar 'yenCatCount' 5}}{{#if theme_settings.yen-layout-preset '===' 'market'}}{{assignVar 'yenCatCount' 8}}{{/if}}
            <div class="yen-cat-grid">
                {{#each (limit categories (getVar 'yenCatCount'))}}
                    {{> components/category/yen-cat-card}}
                {{/each}}
            </div>
            <div class="yen-section-viewall-wrap">
                <a href="/categories/" class="yen-section-viewall">{{lang 'homepage.view_all_categories'}} <span aria-hidden="true">&rarr;</span></a>
            </div>
        </div>
    </section>
    {{/if}}

    {{!-- Shop by Brand --}}
    {{#if brands.length}}
    <section class="yen-section--tight">
        <div class="yen-container">
            <div class="yen-section-header">
                <h2 class="yen-section-title">{{lang 'homepage.shop_by_brand'}}</h2>
            </div>
            <div class="yen-brand-row">
                {{#each brands}}
                    <a class="yen-brand-card" href="{{url}}">
                        <span class="yen-brand-card__logo">
                            {{#if image}}
                                <img src="{{getImage image 'brand_size'}}" alt="{{name}}" width="80" height="80" loading="lazy" />
                            {{else}}
                                <span class="yen-brand-card__initial" aria-hidden="true">{{name}}</span>
                            {{/if}}
                        </span>
                        <span class="yen-brand-card__name">{{name}}</span>
                    </a>
                {{/each}}
            </div>
            <div class="yen-section-viewall-wrap">
                <a href="{{urls.brands}}" class="yen-section-viewall">{{lang 'brand.view_brands'}} <span aria-hidden="true">&rarr;</span></a>
            </div>
        </div>
    </section>
    {{/if}}

    {{!-- Promo Banner. The market preset pairs it with the Lookbook further down instead
         (components/home/market/offers.html). --}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}{{else}}
    {{#if theme_settings.yen-show-promo-banner}}
    {{> components/home/promo-url}}
    {{#if (getVar 'yenViewallUrl')}}
    <section class="yen-promo-banner">
        <div class="yen-container">
            <div class="yen-promo-banner__inner">
                <div class="yen-promo-banner__content">
                    <span class="yen-promo-banner__tag">
                        <svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12" aria-hidden="true"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
                        {{#if theme_settings.yen-promo-banner-tag}}{{theme_settings.yen-promo-banner-tag}}{{else}}{{lang 'homepage.promo_tag'}}{{/if}}
                    </span>
                    <h2 class="yen-promo-banner__title">
                        {{#if theme_settings.yen-promo-banner-title}}{{{theme_settings.yen-promo-banner-title}}}{{else if theme_settings.yen-content-set '===' 'food'}}{{{lang 'homepage.food_promo_title'}}}{{else}}{{{lang 'homepage.promo_title'}}}{{/if}}
                    </h2>
                    <p class="yen-promo-banner__desc">{{#if theme_settings.yen-promo-banner-desc}}{{theme_settings.yen-promo-banner-desc}}{{else if theme_settings.yen-content-set '===' 'food'}}{{{lang 'homepage.food_promo_desc'}}}{{else}}{{{lang 'homepage.promo_desc'}}}{{/if}}</p>
                    <a class="yen-promo-banner__btn" href="{{getVar 'yenViewallUrl'}}">
                        {{#if theme_settings.yen-promo-banner-btn}}{{theme_settings.yen-promo-banner-btn}}{{else}}{{lang 'homepage.promo_btn'}}{{/if}} <span aria-hidden="true">&rarr;</span>
                    </a>
                    {{!-- Each claim only while its hero pill shows (components/common/promise-pill-vars). --}}
                    {{> components/common/promise-pill-vars}}
                    {{#if theme_settings.yen-promo-banner-show-trust}}{{#or (getVar 'yenPill1Shows') (getVar 'yenPill2Shows') (getVar 'yenPill3Shows')}}
                    <div class="yen-promo-banner__trust">
                        {{#if (getVar 'yenPill1Shows')}}{{#or (trim theme_settings.yen-trust-shipping-title) (if (getVar 'yenPillThr') '>' 0)}}
                        <span class="yen-promo-banner__trust-item">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 7h11v10H3z"/><path d="M14 10h4l3 3v4h-7z"/><circle cx="7" cy="19" r="1.5"/><circle cx="18" cy="19" r="1.5"/></svg>
                            {{#if theme_settings.yen-trust-shipping-title}}{{theme_settings.yen-trust-shipping-title}}{{else if (getVar 'yenPillThr') '>' 0}}{{lang 'homepage.trust_shipping_title'}}{{/if}}
                            {{!-- The store's own threshold, restated in the shopper's currency by
                                  convertThresholds(), as in the header's topbar sentence. Left out
                                  when the store has no threshold. --}}
                            {{#if theme_settings.yen-cart-show-shipping-progress}}{{#if theme_settings.yen-cart-free-shipping-threshold '>' 0}}<small data-yen-threshold="{{theme_settings.yen-cart-free-shipping-threshold}}" data-yen-threshold-tpl="{{lang 'homepage.trust_shipping_note' amount='{amount}'}}" data-yen-currency="{{currency_selector.active_currency_code}}" data-yen-currencies="{{currency_selector.currencies.length}}"{{#if currency_selector.currencies.length '>' 1}} data-yen-threshold-pending{{/if}}>{{lang 'homepage.trust_shipping_note' amount=(concat settings.money.currency_token theme_settings.yen-cart-free-shipping-threshold)}}</small>{{/if}}{{/if}}
                        </span>
                        {{/or}}{{/if}}
                        {{#if (getVar 'yenPill2Shows')}}
                        <span class="yen-promo-banner__trust-item">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
                            {{#if theme_settings.yen-trust-returns-title}}{{theme_settings.yen-trust-returns-title}}{{else}}{{lang 'homepage.trust_returns_title'}}{{/if}}
                            <small>{{#if (trim theme_settings.yen-trust-returns-note)}}{{trim theme_settings.yen-trust-returns-note}}{{else}}{{lang 'homepage.trust_returns_note'}}{{/if}}</small>
                        </span>
                        {{/if}}
                        {{#if (getVar 'yenPill3Shows')}}
                        <span class="yen-promo-banner__trust-item">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/></svg>
                            {{#if theme_settings.yen-trust-secure-title}}{{theme_settings.yen-trust-secure-title}}{{else}}{{lang 'homepage.trust_secure_title'}}{{/if}}
                            <small>{{lang 'homepage.trust_secure_note'}}</small>
                        </span>
                        {{/if}}
                    </div>
                    {{/or}}{{/if}}
                </div>

                <div class="yen-promo-banner__showcase" aria-hidden="true">
                    {{#if theme_settings.yen-promo-banner-image}}
                        {{!-- Below the fold on every viewport, and decorative — the banner's
                             words are live text beside it, not baked into the picture. The
                             three sibling images further down already defer; this one was
                             the outlier, and Lighthouse measured 112 KiB of it blocking the
                             first screen for nothing.

                             A merchant upload has unknown proportions, so it gets no
                             width/height (a guessed pair would distort it; the layout
                             reserves the box in CSS) and no renditions. The two banners the
                             theme ships come in 400-1200px renditions; the photo covers a
                             box about 400px tall, so it is drawn ~853px wide (1167px at
                             769-999px, where the box is taller). Hidden on phones. --}}
                        {{#if theme_settings.yen-promo-banner-image '===' 'img/yen-theme/promo-banner.jpg'}}
                        {{> components/common/yen-theme-picture src='img/yen-theme/promo-banner.jpg' width='1600' height='750' wide=true sizes='(min-width: 1000px) 853px, 1167px' classname='yen-promo-banner__image'}}
                        {{else if theme_settings.yen-promo-banner-image '===' 'img/yen-theme/food/promo-banner.jpg'}}
                        {{> components/common/yen-theme-picture src='img/yen-theme/food/promo-banner.jpg' width='1600' height='750' wide=true sizes='(min-width: 1000px) 853px, 1167px' classname='yen-promo-banner__image'}}
                        {{else}}
                        <img src="{{cdn theme_settings.yen-promo-banner-image}}" alt="" class="yen-promo-banner__image" loading="lazy" decoding="async" />
                        {{/if}}
                    {{else}}
                        {{#if theme_settings.yen-promo-banner-img1}}
                        <img src="{{theme_settings.yen-promo-banner-img1}}" alt="" class="yen-promo-banner__image" loading="lazy">
                        {{/if}}
                    {{/if}}
                </div>
            </div>
        </div>
    </section>
    {{/if}}
    {{/if}}
    {{/if}}

    {{!-- Product Tabs: Featured / Best Sellers / New Arrivals. The market preset shows
         the feeds as shelves instead, below the flash sale; its `home_above_products`
         region moves with them, so it is always directly above the first product feed. --}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}{{else}}{{{region name="home_above_products"}}}{{/if}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}{{else}}{{> components/home/product-tabs}}{{/if}}

    {{!-- Trust/Promo Badges. The market preset has them as the strip under the hero. --}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}{{else}}
    {{#if theme_settings.yen-show-trust-badges}}
    {{!-- Each badge only while its hero pill shows and it has a title (promise-pill-vars). --}}
    {{> components/common/promise-pill-vars}}
    {{#or (getVar 'yenPill1Shows') (getVar 'yenPill2Shows') (getVar 'yenPill3Shows')}}
    <section class="yen-section--tight yen-section--trust">
        <div class="yen-container">
            <div class="yen-grid-3">
                {{#if (getVar 'yenPill1Shows')}}{{#if (trim theme_settings.yen-trust-shipping-title)}}
                <div class="yen-promo">
                    <div class="yen-promo__icon yen-promo__icon--shipping">
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 7h11v10H3z"/><path d="M14 10h4l3 3v4h-7z"/><circle cx="7" cy="19" r="1.5"/><circle cx="18" cy="19" r="1.5"/></svg>
                    </div>
                    <div>
                        <div class="yen-promo__title">{{theme_settings.yen-trust-shipping-title}}</div>
                        {{#if (trim theme_settings.yen-trust-shipping-desc)}}<div class="yen-promo__desc">{{theme_settings.yen-trust-shipping-desc}}</div>{{/if}}
                    </div>
                </div>
                {{/if}}{{/if}}
                {{#if (getVar 'yenPill3Shows')}}{{#if (trim theme_settings.yen-trust-secure-title)}}
                <div class="yen-promo">
                    <div class="yen-promo__icon yen-promo__icon--secure">
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/></svg>
                    </div>
                    <div>
                        <div class="yen-promo__title">{{theme_settings.yen-trust-secure-title}}</div>
                        {{#if (trim theme_settings.yen-trust-secure-desc)}}<div class="yen-promo__desc">{{theme_settings.yen-trust-secure-desc}}</div>{{/if}}
                    </div>
                </div>
                {{/if}}{{/if}}
                {{#if (getVar 'yenPill2Shows')}}{{#if (trim theme_settings.yen-trust-returns-title)}}
                <div class="yen-promo">
                    <div class="yen-promo__icon yen-promo__icon--returns">
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
                    </div>
                    <div>
                        <div class="yen-promo__title">{{theme_settings.yen-trust-returns-title}}</div>
                        {{#if (trim theme_settings.yen-trust-returns-desc)}}<div class="yen-promo__desc">{{theme_settings.yen-trust-returns-desc}}</div>{{/if}}
                    </div>
                </div>
                {{/if}}{{/if}}
            </div>
        </div>
    </section>
    {{/or}}
    {{/if}}
    {{/if}}

    {{!-- Flash Sale / Countdown. Rendered only when the chosen source has products: Fashion
         flags none as featured, and with the source on Featured the band drew its title and
         timer over an empty grid. --}}
    {{assignVar 'yenFlash' ''}}
    {{#if theme_settings.yen-flash-sale-products '==' 'featured'}}{{#if products.featured}}{{assignVar 'yenFlash' 'featured'}}{{/if}}{{else if theme_settings.yen-flash-sale-products '==' 'new'}}{{#if products.new}}{{assignVar 'yenFlash' 'new'}}{{/if}}{{else}}{{#if products.top_sellers}}{{assignVar 'yenFlash' 'top'}}{{/if}}{{/if}}
    {{!-- Only discounted products are a sale: the band shows those and nothing without one. --}}
    {{assignVar 'yenFlashHit' 0}}
    {{#if (getVar 'yenFlash') '===' 'featured'}}{{#each products.featured}}{{> components/home/flash-discount}}{{/each}}{{else if (getVar 'yenFlash') '===' 'new'}}{{#each products.new}}{{> components/home/flash-discount}}{{/each}}{{else if (getVar 'yenFlash') '===' 'top'}}{{#each products.top_sellers}}{{> components/home/flash-discount}}{{/each}}{{/if}}
    {{#if theme_settings.yen-show-flash-sale}}{{#if (getVar 'yenFlashHit')}}
    <section class="yen-section yen-flash-sale">
        <div class="yen-container">
            <div class="yen-flash-sale__header">
                <div>
                    <h2 class="yen-section-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24" aria-hidden="true"><path d="M13 2L3 14h9l-1 10 10-12h-9l1-10z"/></svg>
                        {{#if theme_settings.yen-flash-sale-title}}{{theme_settings.yen-flash-sale-title}}{{else}}{{lang 'homepage.flash_sale'}}{{/if}}
                    </h2>
                    {{!-- "Hurry up" only against an end date the merchant set; no date, no countdown. --}}
                    {{#if theme_settings.yen-flash-sale-desc}}<p class="yen-flash-sale__sub">{{theme_settings.yen-flash-sale-desc}}</p>{{else if theme_settings.yen-flash-sale-end}}<p class="yen-flash-sale__sub">{{lang 'homepage.flash_sale_desc'}}</p>{{/if}}
                </div>
                {{#if theme_settings.yen-flash-sale-end}}
                    <div class="yen-flash-sale__timer" data-yen-countdown="{{theme_settings.yen-flash-sale-end}}"></div>
                {{/if}}
            </div>
            <div class="yen-grid-4">
                {{#if (getVar 'yenFlash') '===' 'featured'}}
                    {{#each products.featured}}{{#or price.sale_price_with_tax.value price.sale_price_without_tax.value (if price.rrp_with_tax.value '>' price.with_tax.value) (if price.rrp_without_tax.value '>' price.without_tax.value)}}{{> components/products/yen-product-card theme_settings=../theme_settings settings=../settings customer=../customer show_compare=../theme_settings.yen-show-compare}}{{/or}}{{/each}}
                {{else if (getVar 'yenFlash') '===' 'new'}}
                    {{#each products.new}}{{#or price.sale_price_with_tax.value price.sale_price_without_tax.value (if price.rrp_with_tax.value '>' price.with_tax.value) (if price.rrp_without_tax.value '>' price.without_tax.value)}}{{> components/products/yen-product-card theme_settings=../theme_settings settings=../settings customer=../customer show_compare=../theme_settings.yen-show-compare}}{{/or}}{{/each}}
                {{else}}
                    {{#each products.top_sellers}}{{#or price.sale_price_with_tax.value price.sale_price_without_tax.value (if price.rrp_with_tax.value '>' price.with_tax.value) (if price.rrp_without_tax.value '>' price.without_tax.value)}}{{> components/products/yen-product-card theme_settings=../theme_settings settings=../settings customer=../customer show_compare=../theme_settings.yen-show-compare}}{{/or}}{{/each}}
                {{/if}}
            </div>
            {{assignVar 'yenFlashSort' 'bestselling'}}{{#if (getVar 'yenFlash') '===' 'featured'}}{{assignVar 'yenFlashSort' 'featured'}}{{else if (getVar 'yenFlash') '===' 'new'}}{{assignVar 'yenFlashSort' 'newest'}}{{/if}}
            {{> components/home/viewall-url category="Sale" sort=(getVar 'yenFlashSort')}}
            {{#if (getVar 'yenViewallUrl')}}
            <div class="yen-section-viewall-wrap">
                <a href="{{getVar 'yenViewallUrl'}}" class="yen-section-viewall">{{lang 'homepage.view_all_flash_sale'}} <span aria-hidden="true">&rarr;</span></a>
            </div>
            {{/if}}
        </div>
    </section>
    {{/if}}{{/if}}

    {{!-- Market preset: the new arrivals, this week's deal beside the Lookbook, then the
         best sellers and the makers. The new-arrivals shelf went with the deli take and
         came back: without it the page had too little to buy (Giao, 2026-10-01). The
         region the tabs carry comes along. --}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}
    {{assignVar 'yenLookDir' 'img/lookbook/'}}
    {{#if theme_settings.yen-content-set '===' 'food'}}{{assignVar 'yenLookDir' 'img/lookbook/food/'}}{{/if}}
    {{{region name="home_above_products"}}}
    {{> components/home/market/shelf products=products.new title=(lang 'products.new') category="New Arrivals" sort="newest" viewall=(lang 'homepage.view_all_new')}}
    {{> components/home/market/offers}}
    {{> components/home/market/shelf products=products.top_sellers title=(lang 'products.top') category="Best Sellers" sort="bestselling" viewall=(lang 'homepage.view_all_top')}}
    {{> components/home/market/makers}}
    {{{region name="home_below_featured_products"}}}
    {{/if}}

    {{{region name="home_below_top_products"}}}

    {{!-- What Customers Say: the merchant's own quotes, with no rating or "verified" mark the
         theme cannot know. Off by default, and nothing at all without a quote. --}}
    {{#if theme_settings.yen-show-testimonials}}{{#or theme_settings.yen-testimonial-1-quote theme_settings.yen-testimonial-2-quote theme_settings.yen-testimonial-3-quote}}
    <section class="yen-section yen-section--dark">
        <div class="yen-container">
            <div class="yen-testimonials__hero">
                {{#if theme_settings.yen-testimonials-count}}
                <span class="yen-testimonials__eyebrow">{{lang 'testimonials.eyebrow' count=theme_settings.yen-testimonials-count}}</span>
                {{/if}}
                <h2 class="yen-section-title yen-testimonials__title">{{lang 'testimonials.title_lead'}} <em>{{lang 'testimonials.title_accent'}}</em><br>{{lang 'testimonials.title_trail'}}</h2>
                <p class="yen-testimonials__sub">{{lang 'testimonials.sub'}}</p>
                {{#if theme_settings.yen-testimonials-score}}
                <div class="yen-testimonials-agg yen-testimonials-agg--inline">
                    <span class="is-srOnly" data-yen-agg-label="{{lang 'testimonials.aggregate_label' score='{score}'}}">{{lang 'testimonials.aggregate_label' score=theme_settings.yen-testimonials-score}}</span>
                    <span class="yen-testimonials-agg__score" aria-hidden="true">{{theme_settings.yen-testimonials-score}}</span>
                    <span class="yen-testimonials-agg__stars" aria-hidden="true" data-yen-agg-score="{{theme_settings.yen-testimonials-score}}">{{#for 1 5}}<span class="yen-testimonials-agg__star"><svg viewBox="2 2 20 20" width="16" height="16" focusable="false"><path d="M12 2.5l2.95 6.5 7.05.65-5.35 4.7L18.2 21 12 17.3 5.8 21l1.55-6.65L2 9.65l7.05-.65z"/></svg><span class="yen-testimonials-agg__star-fill"><svg viewBox="2 2 20 20" width="16" height="16" focusable="false"><path d="M12 2.5l2.95 6.5 7.05.65-5.35 4.7L18.2 21 12 17.3 5.8 21l1.55-6.65L2 9.65l7.05-.65z"/></svg></span></span>{{/for}}</span>
                    {{#if theme_settings.yen-testimonials-count}}
                    <span class="yen-testimonials-agg__count">{{lang 'testimonials.based_on' count=theme_settings.yen-testimonials-count}}</span>
                    {{/if}}
                </div>
                {{/if}}
            </div>
            <div class="yen-grid-3" role="region" tabindex="0" aria-label="{{lang 'testimonials.heading'}}">
                {{#if theme_settings.yen-testimonial-1-quote}}
                <div class="yen-testimonial">
                    <p class="yen-testimonial__quote">&ldquo;{{theme_settings.yen-testimonial-1-quote}}&rdquo;</p>
                    <div class="yen-testimonial__footer">
                        <span class="yen-testimonial__avatar" aria-hidden="true">{{truncate theme_settings.yen-testimonial-1-name 1}}</span>
                        <div class="yen-testimonial__info">
                            <div class="yen-testimonial__name">{{theme_settings.yen-testimonial-1-name}}</div>
                            <div class="yen-testimonial__time">{{theme_settings.yen-testimonial-1-time}}</div>
                        </div>
                    </div>
                </div>
                {{/if}}
                {{#if theme_settings.yen-testimonial-2-quote}}
                <div class="yen-testimonial">
                    <p class="yen-testimonial__quote">&ldquo;{{theme_settings.yen-testimonial-2-quote}}&rdquo;</p>
                    <div class="yen-testimonial__footer">
                        <span class="yen-testimonial__avatar" aria-hidden="true">{{truncate theme_settings.yen-testimonial-2-name 1}}</span>
                        <div class="yen-testimonial__info">
                            <div class="yen-testimonial__name">{{theme_settings.yen-testimonial-2-name}}</div>
                            <div class="yen-testimonial__time">{{theme_settings.yen-testimonial-2-time}}</div>
                        </div>
                    </div>
                </div>
                {{/if}}
                {{#if theme_settings.yen-testimonial-3-quote}}
                <div class="yen-testimonial">
                    <p class="yen-testimonial__quote">&ldquo;{{theme_settings.yen-testimonial-3-quote}}&rdquo;</p>
                    <div class="yen-testimonial__footer">
                        <span class="yen-testimonial__avatar" aria-hidden="true">{{truncate theme_settings.yen-testimonial-3-name 1}}</span>
                        <div class="yen-testimonial__info">
                            <div class="yen-testimonial__name">{{theme_settings.yen-testimonial-3-name}}</div>
                            <div class="yen-testimonial__time">{{theme_settings.yen-testimonial-3-time}}</div>
                        </div>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </section>
    {{/or}}{{/if}}

    {{!-- Brand Story / Video. Not on the market preset, whose page is products first. --}}
    {{#if theme_settings.yen-layout-preset '===' 'market'}}{{else}}
    {{#if theme_settings.yen-show-brand-story}}
    <section class="yen-section yen-brand-story">
        <div class="yen-container">
            <div class="yen-brand-story__grid">
                <div class="yen-brand-story__content">
                    <span class="yen-brand-story__tag">{{#if theme_settings.yen-brand-story-tag}}{{theme_settings.yen-brand-story-tag}}{{else}}{{lang 'homepage.brand_story_tag'}}{{/if}}</span>
                    <h2 class="yen-brand-story__title">{{#if theme_settings.yen-brand-story-title}}{{theme_settings.yen-brand-story-title}}{{else}}{{lang 'homepage.brand_story_title'}}{{/if}}</h2>
                    <p class="yen-brand-story__desc">{{#if theme_settings.yen-brand-story-desc}}{{theme_settings.yen-brand-story-desc}}{{else}}{{lang 'homepage.brand_story_desc'}}{{/if}}</p>
                    {{!-- Sample figures no store's data backs: only on the demo stores (hidden yen-demo-content). --}}
                    {{#if theme_settings.yen-demo-content}}
                    <div class="yen-brand-story__stats">
                        <div class="yen-brand-story__stat">
                            <span class="yen-brand-story__stat-num">{{#if theme_settings.yen-brand-stat-1-num}}{{theme_settings.yen-brand-stat-1-num}}{{else}}10K+{{/if}}</span>
                            <span class="yen-brand-story__stat-label">{{#if theme_settings.yen-brand-stat-1-label}}{{theme_settings.yen-brand-stat-1-label}}{{else}}{{lang 'homepage.brand_story_stat_1_label'}}{{/if}}</span>
                        </div>
                        <div class="yen-brand-story__stat">
                            <span class="yen-brand-story__stat-num">{{#if theme_settings.yen-brand-stat-2-num}}{{theme_settings.yen-brand-stat-2-num}}{{else}}5K+{{/if}}</span>
                            <span class="yen-brand-story__stat-label">{{#if theme_settings.yen-brand-stat-2-label}}{{theme_settings.yen-brand-stat-2-label}}{{else}}{{lang 'homepage.brand_story_stat_2_label'}}{{/if}}</span>
                        </div>
                        <div class="yen-brand-story__stat">
                            <span class="yen-brand-story__stat-num">{{#if theme_settings.yen-brand-stat-3-num}}{{theme_settings.yen-brand-stat-3-num}}{{else}}99%{{/if}}</span>
                            <span class="yen-brand-story__stat-label">{{#if theme_settings.yen-brand-stat-3-label}}{{theme_settings.yen-brand-stat-3-label}}{{else}}{{lang 'homepage.brand_story_stat_3_label'}}{{/if}}</span>
                        </div>
                    </div>
                    {{/if}}
                    {{!-- Resolved from the merchant's own "About Us" Web Page: the theme
                         cannot create that page, and a hardcoded /about-us 404s on a
                         store that never made one, so the button is dropped instead.
                         A duplicate page name renders the button twice, which is
                         cosmetic — the href stays intact because {{#filter}} wraps the
                         whole element here rather than sitting inside an attribute. --}}
                    {{#filter pages "About Us" property="name"}}
                    <a class="yen-brand-story__btn" href="{{url}}">
                        {{#if ../theme_settings.yen-brand-story-btn}}{{../theme_settings.yen-brand-story-btn}}{{else}}{{lang 'homepage.brand_story_btn'}}{{/if}} <span aria-hidden="true">&rarr;</span>
                    </a>
                    {{/filter}}
                </div>
                {{#if theme_settings.yen-brand-story-video}}
                <div class="yen-brand-story__media">
                    <div class="yen-brand-story__video">
                        <iframe src="{{theme_settings.yen-brand-story-video}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </section>
    {{/if}}
    {{/if}}

    {{{region name="home_below_new_products"}}}

    {{!-- Latest Blog Posts --}}
    {{#if blog.recent_posts.length}}
    <section class="yen-section yen-section--alt yen-blog-home">
        <div class="yen-container">
            <div class="yen-section-header">
                {{!-- The Food content set opens its journal on recipes (Giao, 2026-10-01). --}}
                <h2 class="yen-section-title">{{#if theme_settings.yen-content-set '===' 'food'}}{{lang 'homepage.food_blog_heading'}}{{else}}{{lang 'homepage.blog_heading'}}{{/if}}</h2>
            </div>
            {{!-- getImage resolves only a preset or a setting holding a size, so the literal
                  '600x400' this used to pass fetched the original (~100-120 KB per card).
                  The photo is cropped to cover its box, so a ~3:2 thumbnail (the common
                  shape) is drawn 1.5x the box height wide whenever that beats the box
                  width: 1.125x the width of the 4:3 frame, and 423px in market's 148x282
                  tile at 801px. --}}
            {{#if theme_settings.yen-layout-preset '===' 'market'}}{{assignVar 'yenBlogSizes' '(min-width: 801px) 423px, (min-width: 468px) 470px, calc(113vw - 56px)'}}{{else}}{{assignVar 'yenBlogSizes' '(min-width: 1600px) 569px, (min-width: 768px) calc(38vw - 30px), (min-width: 468px) 470px, calc(113vw - 56px)'}}{{/if}}
            <div class="yen-grid-3">
                {{#each blog.recent_posts}}
                <article class="yen-blog-card">
                    <a href="{{url}}" class="yen-blog-card__img" aria-hidden="true" tabindex="-1">
                        {{#if thumbnail}}
                            <img src="{{getImageSrcset thumbnail 1x='640w'}}" srcset="{{getImageSrcset thumbnail 320w='320w' 640w='640w' 960w='960w' 1280w='1280w'}}" sizes="{{getVar 'yenBlogSizes'}}" alt="{{thumbnail.alt}}" loading="lazy" decoding="async">
                        {{else}}
                            {{> components/blog/thumb-placeholder}}
                        {{/if}}
                    </a>
                    <div class="yen-blog-card__body">
                        {{#each (limit (sortBy tags "name") 1)}}
                            <span class="yen-blog-card__tag">{{name}}</span>
                        {{/each}}
                        <h3 class="yen-blog-card__title">
                            <a href="{{url}}">{{title}}</a>
                        </h3>
                        {{#if summary}}
                        <p class="yen-blog-card__excerpt">{{> components/blog/excerpt words=22 capped=99}}</p>
                        {{/if}}
                        <div class="yen-blog-card__footer">
                            <span>{{#if author}}{{author}}{{else}}{{lang 'blog.default_author'}}{{/if}}</span>
                            <span>{{date_published}}</span>
                        </div>
                        <a href="{{url}}" class="yen-blog-card__read-more">{{lang 'blog.read_more_link'}} <span aria-hidden="true">&rarr;</span></a>
                    </div>
                </article>
                {{/each}}
            </div>
            <div class="yen-section-viewall-wrap">
                <a href="{{#if urls.blog}}{{urls.blog}}{{else}}/blog/{{/if}}" class="yen-section-viewall">{{#if theme_settings.yen-content-set '===' 'food'}}{{lang 'homepage.food_blog_read_more'}}{{else}}{{lang 'homepage.blog_read_more'}}{{/if}} <span aria-hidden="true">&rarr;</span></a>
            </div>
        </div>
    </section>
    {{/if}}

    {{!-- Recently Viewed Products --}}
    {{#if theme_settings.yen-show-recently-viewed}}
    <section class="yen-section" id="yen-recently-viewed"{{#or customer (unless settings.hide_price_from_guests)}} data-show-prices{{/or}} data-max-display="{{theme_settings.yen-recently-viewed-count}}" style="display:none;">
        <div class="yen-container">
            <div class="yen-section-header">
                <h2 class="yen-section-title">{{lang 'homepage.recently_viewed'}}</h2>
            </div>
            <div class="yen-recently-viewed__grid yen-grid-4"></div>
        </div>
    </section>
    {{/if}}

    {{!-- Newsletter CTA --}}
    {{#if theme_settings.yen-show-newsletter}}
    <section class="yen-nl-section">
        <div class="yen-container">
            <div class="yen-nl-card">
                <div class="yen-nl-left">
                    <div class="yen-nl-badge">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                        {{lang 'newsletter.heading'}}
                    </div>
                    <h3 class="yen-nl-title">{{#if theme_settings.yen-footer-newsletter-title}}{{theme_settings.yen-footer-newsletter-title}}{{else}}{{{lang 'newsletter.deals_headline'}}}{{/if}}</h3>
                    {{!-- The control panel's own summary (Email marketing > Show newsletter summary) wins over the theme text. --}}
                    <div class="yen-nl-desc">{{#all settings.show_newsletter_summary settings.newsletter_summary}}{{settings.newsletter_summary}}{{else if theme_settings.yen-footer-newsletter-desc}}{{theme_settings.yen-footer-newsletter-desc}}{{else if theme_settings.yen-demo-content}}{{lang 'newsletter.subscribe_intro'}}{{else}}{{lang 'newsletter.subscribe_intro_plain'}}{{/all}}</div>
                </div>
                <div class="yen-nl-right">
                    <form class="yen-nl-form" action="{{urls.subscribe.action}}" method="post">
                        <input type="hidden" name="action" value="subscribe">
                        <input type="hidden" name="nl_first_name" value="bc">
                        <input type="hidden" name="check" value="1">
                        <label for="nl-email" class="u-hiddenVisually">{{lang 'common.email_address'}}</label>
                        <input id="nl-email" class="yen-nl-input" type="email" name="nl_email" value="{{customer.email}}" placeholder="{{lang 'newsletter.email_placeholder'}}" autocomplete="email" required>
                        <button class="yen-nl-btn" type="submit">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                            <span class="yen-nl-btn__label">{{lang 'newsletter.subscribe_submit'}}</span>
                            <svg class="yen-nl-btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                        </button>
                    </form>
                    <div class="yen-nl-note">{{lang 'newsletter.privacy_note'}}</div>
                </div>
            </div>
        </div>
    </section>
    {{/if}}

    {{!-- As Seen In / Press Logos --}}
    {{#if theme_settings.yen-show-press}}
    <section class="yen-section--tight yen-press">
        <div class="yen-container">
            <p class="yen-press__header">{{#if theme_settings.yen-press-title}}{{theme_settings.yen-press-title}}{{else}}{{lang 'homepage.press_title'}}{{/if}}</p>
            <div class="yen-press__logos">
                {{#if theme_settings.yen-press-1-img}}
                {{#if theme_settings.yen-press-1-url}}<a class="yen-press__item" href="{{theme_settings.yen-press-1-url}}" target="_blank" rel="noopener noreferrer">{{else}}<span class="yen-press__item">{{/if}}
                    <img src="{{theme_settings.yen-press-1-img}}" alt="{{lang 'homepage.press_logo_alt'}}" loading="lazy">
                {{#if theme_settings.yen-press-1-url}}</a>{{else}}</span>{{/if}}
                {{/if}}
                {{#if theme_settings.yen-press-2-img}}
                {{#if theme_settings.yen-press-2-url}}<a class="yen-press__item" href="{{theme_settings.yen-press-2-url}}" target="_blank" rel="noopener noreferrer">{{else}}<span class="yen-press__item">{{/if}}
                    <img src="{{theme_settings.yen-press-2-img}}" alt="{{lang 'homepage.press_logo_alt'}}" loading="lazy">
                {{#if theme_settings.yen-press-2-url}}</a>{{else}}</span>{{/if}}
                {{/if}}
                {{#if theme_settings.yen-press-3-img}}
                {{#if theme_settings.yen-press-3-url}}<a class="yen-press__item" href="{{theme_settings.yen-press-3-url}}" target="_blank" rel="noopener noreferrer">{{else}}<span class="yen-press__item">{{/if}}
                    <img src="{{theme_settings.yen-press-3-img}}" alt="{{lang 'homepage.press_logo_alt'}}" loading="lazy">
                {{#if theme_settings.yen-press-3-url}}</a>{{else}}</span>{{/if}}
                {{/if}}
                {{#if theme_settings.yen-press-4-img}}
                {{#if theme_settings.yen-press-4-url}}<a class="yen-press__item" href="{{theme_settings.yen-press-4-url}}" target="_blank" rel="noopener noreferrer">{{else}}<span class="yen-press__item">{{/if}}
                    <img src="{{theme_settings.yen-press-4-img}}" alt="{{lang 'homepage.press_logo_alt'}}" loading="lazy">
                {{#if theme_settings.yen-press-4-url}}</a>{{else}}</span>{{/if}}
                {{/if}}
                {{#if theme_settings.yen-press-5-img}}
                {{#if theme_settings.yen-press-5-url}}<a class="yen-press__item" href="{{theme_settings.yen-press-5-url}}" target="_blank" rel="noopener noreferrer">{{else}}<span class="yen-press__item">{{/if}}
                    <img src="{{theme_settings.yen-press-5-img}}" alt="{{lang 'homepage.press_logo_alt'}}" loading="lazy">
                {{#if theme_settings.yen-press-5-url}}</a>{{else}}</span>{{/if}}
                {{/if}}
            </div>
        </div>
    </section>
    {{/if}}

</div>

{{!-- BigCommerce Marketing Banners assigned to the bottom position. --}}
{{#if banners.bottom}}
<div class="yen-container"><div class="yen-mkt-banner yen-mkt-banner--bottom">{{#each banners.bottom}}<div class="yen-mkt-banner__item">{{{this}}}</div>{{/each}}</div></div>
{{/if}}

{{{region name="home_above_footer"}}}
{{/partial}}
{{> layout/base}}