# Store merchandising

> Storefront home blocks: category tiles, hero and promo banners, a flash-deal strip with a live countdown and stock progress, a reusable product carousel for related and recently viewed items, and a brand strip.

Source: https://docs.nasaqui.com/components/store-merch

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/store-merch.json
```

The blocks that make a storefront home page. `StoreCategoryTiles`, `StoreHeroBanner` and `StorePromoBanners` lead shoppers in. `StoreFlashDeals` shows time-limited offers with a countdown. `StoreProductCarousel` is a scroll-snapping row of the storefront product card and is reused for related products, recently viewed and new arrivals on any page. `StoreBrandStrip` lists brands as text or official logos.

Everything takes plain data (`CommerceProduct`, banner objects) and reports through callbacks.

## When to use

- Home and landing pages of a shop.
- `StoreProductCarousel` under a product page or in a cart.

## When not to use

- The main results grid with filters: use `StoreListing`.
- A general image carousel: use `Carousel`.

## Import

```tsx
import { StoreProductCarousel, StoreFlashDeals } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
<StoreHeroBanner items={hero} />
<StoreCategoryTiles items={tiles} />
<StoreFlashDeals deals={deals} currency="USD" onAddToCart={add} />
<StoreProductCarousel title="Recently viewed" products={merchViewedProducts(all, viewedIds, current.id)} currency="USD" onAddToCart={add} />
```

## API

| Component | Key props |
| --- | --- |
| `StoreCategoryTiles` | `items` (`id`, `label`, `image?`, `count?`, `href?`), `title?`, `onSelect?`, `ratio?` |
| `StoreHeroBanner` | `items: StoreBanner[]` (one is static, several become a carousel), `autoplay?` (6000 or `false`) |
| `StorePromoBanners` | `items: StoreBanner[]`, `onSelect?` |
| `StoreCountdown` | `endsAt` (epoch ms), `onExpire?`, `now?` |
| `StoreFlashDeals` | `deals` (`product`, `endsAt`, `startsAt?`, `sold?`, `total?`), `currency`, `title?`, `viewAllHref?`, `onAddToCart?`, `onQuickView?`, `onExpire?` |
| `StoreProductCarousel` | `products`, `currency`, `title?`, `viewAllHref?`, `perView?` (2 to 6), `getHref?`, `wishlistIds?`, `onToggleWishlist?`, `onAddToCart?`, `onQuickView?`, `onNavigate?` |
| `StoreBrandStrip` | `brands` (`name`, `href?`, `logo?`), `title?`, `onSelect?` |

`StoreBanner`: `id`, `title`, `description?`, `cta?`, `href?`, `image?`, `imageAlt?`, `eyebrow?`, `tone?` (`brand`, `soft`, `dark`).

### Model helpers

Pure functions, importable in Node: `merchCountdownParts`, `merchNextTick`, `merchActiveDeals`, `merchDealProgress`, `merchRecordViewed`, `merchViewedProducts`, `merchRelatedProducts`.

## Accessibility

- Every block is a labelled region; the carousel uses slide groups with "n of total" names and arrow buttons.
- The countdown is `role="timer"` with a label that changes by the minute, so it is not read every second. When time is up it says the deal has ended.
- Hero autoplay stops on hover, focus and under reduced motion; the image zoom on hover is off under reduced motion.
- Brand names are text unless you supply an official logo.
- Images lazy-load with a token-coloured placeholder when missing or broken.

## RTL and Arabic

Slides, arrows and swipe direction mirror. Numbers in the countdown follow the locale's digits; the readout itself keeps a fixed left-to-right order so units line up.

## Code

### React

```tsx
<StoreHeroBanner items={hero} />
<StoreCategoryTiles items={tiles} />
<StoreFlashDeals deals={deals} currency="USD" onAddToCart={add} />
<StoreProductCarousel title="Recently viewed" products={merchViewedProducts(all, viewedIds, current.id)} currency="USD" onAddToCart={add} />
```

### shadcn

```tsx
<StoreHeroBanner items={hero} />
<StoreCategoryTiles items={tiles} />
<StoreFlashDeals deals={deals} currency="USD" onAddToCart={add} />
<StoreProductCarousel title="Recently viewed" products={merchViewedProducts(all, viewedIds, current.id)} currency="USD" onAddToCart={add} />
```

### Vue

```vue
<script setup lang="ts">
import { NqStoreCategoryTiles, NqStoreFlashDeals, NqStoreHeroBanner, NqStoreProductCarousel, merchViewedProducts, type CommerceProduct, type StoreBanner, type StoreCategoryTile, type StoreFlashDeal } from "@fadymondy/nasaq/vue";

const img = (seed: string) => [{ src: `https://picsum.photos/seed/${seed}/600/750`, alt: seed }];
const mk = (id: string, name: string, price: number, compareAt?: number): CommerceProduct => ({
  id,
  name,
  brand: "Nasaq Goods",
  category: "Clothing",
  images: img(id),
  options: [],
  variants: [{ id: `${id}-1`, options: {}, price, ...(compareAt ? { compareAt } : {}), stock: 12 }],
});
const all = [mk("tee", "Everyday tee", 2900, 3900), mk("hoodie", "Zip hoodie", 6900), mk("cap", "Canvas cap", 1900), mk("belt", "Leather belt", 3400), mk("scarf", "Linen scarf", 2700)];

const hero: StoreBanner[] = [
  { id: "summer", eyebrow: "New season", title: "Summer collection", description: "Light layers for warm days.", cta: "Shop now", href: "#summer", image: "https://picsum.photos/seed/hero-1/1200/700", tone: "brand" },
  { id: "sale", title: "Up to 40% off", description: "Last chance on winter favourites.", href: "#sale", image: "https://picsum.photos/seed/hero-2/1200/700", tone: "dark" },
];
const tiles: StoreCategoryTile[] = [
  { id: "tops", label: "Tops", count: 42, image: "https://picsum.photos/seed/tops/400/400" },
  { id: "bottoms", label: "Bottoms", count: 28, image: "https://picsum.photos/seed/bottoms/400/400" },
  { id: "accessories", label: "Accessories", count: 64, image: "https://picsum.photos/seed/acc/400/400" },
];
const hour = 3_600_000;
const t0 = Date.now();
const deals: StoreFlashDeal[] = [
  { id: "d1", product: all[0]!, endsAt: t0 + 5 * hour, sold: 34, total: 50 },
  { id: "d2", product: all[1]!, endsAt: t0 + 9 * hour, sold: 12, total: 40 },
];
const add = (_p: CommerceProduct, variant: { id: string }, qty: number) => console.log("add", variant.id, qty);
</script>

<template>
  <div class="flex flex-col gap-10">
    <NqStoreHeroBanner :items="hero" />
    <NqStoreCategoryTiles :items="tiles" />
    <NqStoreFlashDeals :deals="deals" currency="USD" @add-to-cart="add" />
    <NqStoreProductCarousel title="Recently viewed" :products="merchViewedProducts(all, ['tee', 'cap', 'belt'], 'hoodie')" currency="USD" @add-to-cart="add" />
  </div>
</template>
```

### Blade

```blade
@php
    // Home page blocks: hero, category tiles, flash deals and a recently viewed row. Prices are minor units; times are epoch milliseconds.
    $img = fn ($seed) => [['src' => "https://picsum.photos/seed/{$seed}/600/750", 'alt' => $seed]];
    $mk = fn ($id, $name, $price, $compareAt = null) => [
        'id' => $id, 'name' => $name, 'brand' => 'Nasaq Goods', 'category' => 'Clothing', 'images' => $img($id), 'options' => [],
        'variants' => [array_filter(['id' => $id.'-1', 'options' => [], 'price' => $price, 'compareAt' => $compareAt, 'stock' => 12], fn ($x) => $x !== null)],
    ];
    $all = [$mk('tee', 'Everyday tee', 2900, 3900), $mk('hoodie', 'Zip hoodie', 6900), $mk('cap', 'Canvas cap', 1900), $mk('belt', 'Leather belt', 3400), $mk('scarf', 'Linen scarf', 2700)];
    $hero = [
        ['id' => 'summer', 'eyebrow' => 'New season', 'title' => 'Summer collection', 'description' => 'Light layers for warm days.', 'cta' => 'Shop now', 'href' => '#summer', 'image' => 'https://picsum.photos/seed/hero-1/1200/700', 'tone' => 'brand'],
        ['id' => 'sale', 'title' => 'Up to 40% off', 'description' => 'Last chance on winter favourites.', 'href' => '#sale', 'image' => 'https://picsum.photos/seed/hero-2/1200/700', 'tone' => 'dark'],
    ];
    $tiles = [
        ['id' => 'tops', 'label' => 'Tops', 'count' => 42, 'image' => 'https://picsum.photos/seed/tops/400/400'],
        ['id' => 'bottoms', 'label' => 'Bottoms', 'count' => 28, 'image' => 'https://picsum.photos/seed/bottoms/400/400'],
        ['id' => 'accessories', 'label' => 'Accessories', 'count' => 64, 'image' => 'https://picsum.photos/seed/acc/400/400'],
    ];
    $nowMs = now()->getTimestamp() * 1000;
    $deals = [
        ['id' => 'd1', 'product' => $all[0], 'endsAt' => $nowMs + 5 * 3_600_000, 'sold' => 34, 'total' => 50],
        ['id' => 'd2', 'product' => $all[1], 'endsAt' => $nowMs + 9 * 3_600_000, 'sold' => 12, 'total' => 40],
    ];
    $viewed = [$all[2], $all[3], $all[4]];
@endphp
<div class="flex flex-col gap-10">
    <x-nq::store-merch.hero-banner :items="$hero" />
    <x-nq::store-merch.category-tiles :items="$tiles" />
    <x-nq::store-merch.flash-deals :deals="$deals" currency="USD" />
    <x-nq::store-merch.product-carousel title="Recently viewed" :products="$viewed" currency="USD" />
</div>
```

### HTML + Alpine

```html
<div class="flex flex-col gap-10">
    <section data-slot="store-hero-banner" aria-label="Promotions" >
        <div role="region" aria-roledescription="carousel" aria-label="Promotions" dir="ltr" lang="en" tabindex="0"
    data-slot="carousel" x-data="nqCarousel(JSON.parse('{\u0022loop\u0022:true,\u0022align\u0022:\u0022start\u0022,\u0022autoplay\u0022:6000,\u0022rtl\u0022:false,\u0022labels\u0022:{\u0022previous\u0022:\u0022Previous slide\u0022,\u0022next\u0022:\u0022Next slide\u0022,\u0022slides\u0022:\u0022Choose slide\u0022,\u0022goTo\u0022:\u0022Go to slide {n}\u0022,\u0022slide\u0022:\u0022Slide {n} of {total}\u0022,\u0022pause\u0022:\u0022Pause autoplay\u0022,\u0022play\u0022:\u0022Start autoplay\u0022}}'))" x-bind="root"
    class="rounded-card outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus group relative">
    <div data-slot="carousel-viewport" class="overflow-x-auto overflow-y-hidden rounded-[inherit] snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
    <div data-slot="carousel-content" class="-ms-4 flex touch-pan-y">
        <div role="group" aria-roledescription="slide" data-slot="carousel-item" class="min-w-0 shrink-0 grow-0 basis-full ps-4 snap-start -scroll-ms-4"><div data-id="summer" class="relative grid min-h-64 overflow-hidden rounded-card md:min-h-96 md:grid-cols-2 bg-primary text-primary-foreground">
    <div class="z-10 flex flex-col items-start justify-center gap-3 p-6 md:p-12">
        <span class="text-label opacity-80">New season</span>        <h2 class="text-h1 text-balance">Summer collection</h2>
        <p class="max-w-md text-body opacity-90">Light layers for warm days.</p>        <a data-slot="button"
     href="#summer"                         data-banner-id="summer" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-[calc(var(--nq-control)+8px)] px-5 text-body">
        Shop now
            <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg></a>
    </div>
    <div class="relative order-first aspect-[16/9] md:absolute md:inset-y-0 md:end-0 md:order-none md:aspect-auto md:w-1/2">
        <div class="contents" x-data="{ failed: false }" >
    <div role="img"  aria-label=""  data-slot="store-image-placeholder"
         x-show="failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  src="https://picsum.photos/seed/hero-1/1200/700" alt=""                          loading="eager" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
    </div>
</div></div>
                                    <div role="group" aria-roledescription="slide" data-slot="carousel-item" class="min-w-0 shrink-0 grow-0 basis-full ps-4 snap-start -scroll-ms-4"><div data-id="sale" class="relative grid min-h-64 overflow-hidden rounded-card md:min-h-96 md:grid-cols-2 bg-foreground text-background">
    <div class="z-10 flex flex-col items-start justify-center gap-3 p-6 md:p-12">
                <h2 class="text-h1 text-balance">Up to 40% off</h2>
        <p class="max-w-md text-body opacity-90">Last chance on winter favourites.</p>        <a data-slot="button"
     href="#sale"                         data-banner-id="sale" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-[calc(var(--nq-control)+8px)] px-5 text-body">
        Shop now
            <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg></a>
    </div>
    <div class="relative order-first aspect-[16/9] md:absolute md:inset-y-0 md:end-0 md:order-none md:aspect-auto md:w-1/2">
        <div class="contents" x-data="{ failed: false }" >
    <div role="img"  aria-label=""  data-slot="store-image-placeholder"
         x-show="failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  src="https://picsum.photos/seed/hero-2/1200/700" alt=""                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
    </div>
</div></div>
    </div>
</div>
            <button data-slot="carousel-previous"
     type="button"                  disabled      data-disabled     x-bind="previous" aria-label="Previous slide" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control p-0 absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-card/90 shadow-floating backdrop-blur-sm data-disabled:opacity-0 start-3">
        <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button data-slot="carousel-next"
     type="button"                         x-bind="next" aria-label="Next slide" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control p-0 absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-card/90 shadow-floating backdrop-blur-sm data-disabled:opacity-0 end-3">
        <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
            <div role="group" aria-label="Choose slide" data-slot="carousel-dots" x-bind="dots" style="display: none"
    class="mt-3 flex items-center justify-center gap-1.5">
    <template x-for="i in count" :key="i">
        <button type="button" x-bind="dot(i - 1)" class="relative h-2 rounded-full outline-none transition-[width,background-color] duration-150 ease-nq focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus after:absolute after:-inset-2 after:content-['']"></button>
    </template>
</div>
    <div class="sr-only" aria-atomic="true" x-bind="live"></div>
</div>
    </section>
    <section data-slot="store-category-tiles"  aria-labelledby="store-cats-h"  >
            <div class="mb-4 flex items-end justify-between gap-4"><h2 id="store-cats-h" class="text-h2 text-foreground">Shop by category</h2></div>
        <ul class="m-0 grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 lg:grid-cols-6">
                    <li>
                <a href="#tops" data-id="tops" class="group flex flex-col gap-2 rounded-card no-underline outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                    <span class="relative overflow-hidden rounded-card bg-secondary aspect-square">
                        <div class="contents" x-data="{ failed: false }" >
    <div role="img"  aria-label=""  data-slot="store-image-placeholder"
         x-show="failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground transition-transform duration-300 ease-nq group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  src="https://picsum.photos/seed/tops/400/400" alt=""                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover transition-transform duration-300 ease-nq group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
    </div>
                    </span>
                    <span class="flex flex-col">
                        <span class="text-label text-foreground group-hover:underline">Tops</span>
                        <span class="text-caption text-muted-foreground">Items: 42</span>                    </span>
                </a>
            </li>
                    <li>
                <a href="#bottoms" data-id="bottoms" class="group flex flex-col gap-2 rounded-card no-underline outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                    <span class="relative overflow-hidden rounded-card bg-secondary aspect-square">
                        <div class="contents" x-data="{ failed: false }" >
    <div role="img"  aria-label=""  data-slot="store-image-placeholder"
         x-show="failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground transition-transform duration-300 ease-nq group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  src="https://picsum.photos/seed/bottoms/400/400" alt=""                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover transition-transform duration-300 ease-nq group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
    </div>
                    </span>
                    <span class="flex flex-col">
                        <span class="text-label text-foreground group-hover:underline">Bottoms</span>
                        <span class="text-caption text-muted-foreground">Items: 28</span>                    </span>
                </a>
            </li>
                    <li>
                <a href="#accessories" data-id="accessories" class="group flex flex-col gap-2 rounded-card no-underline outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                    <span class="relative overflow-hidden rounded-card bg-secondary aspect-square">
                        <div class="contents" x-data="{ failed: false }" >
    <div role="img"  aria-label=""  data-slot="store-image-placeholder"
         x-show="failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground transition-transform duration-300 ease-nq group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  src="https://picsum.photos/seed/acc/400/400" alt=""                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover transition-transform duration-300 ease-nq group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
    </div>
                    </span>
                    <span class="flex flex-col">
                        <span class="text-label text-foreground group-hover:underline">Accessories</span>
                        <span class="text-caption text-muted-foreground">Items: 64</span>                    </span>
                </a>
            </li>
            </ul>
</section>
    <section data-slot="store-flash-deals" aria-labelledby="store-deals-h" x-data="nqStoreFlashDeals(JSON.parse('{\u0022now\u0022:null,\u0022serverNow\u0022:null,\u0022deals\u0022:[{\u0022id\u0022:\u0022d1\u0022,\u0022endsAt\u0022:1790690400000,\u0022startsAt\u0022:null},{\u0022id\u0022:\u0022d2\u0022,\u0022endsAt\u0022:1790704800000,\u0022startsAt\u0022:null}],\u0022labels\u0022:{\u0022timeLeft\u0022:\u0022Time left: {time}\u0022,\u0022days\u0022:\u0022days\u0022,\u0022hours\u0022:\u0022hours\u0022,\u0022minutes\u0022:\u0022minutes\u0022}}'))" x-show="hasLive"
        class="rounded-card border border-border bg-nq-surface-soft p-4 sm:p-6">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
            <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
                <h2 id="store-deals-h" class="text-h2 text-foreground">Flash deals</h2>
                <span class="inline-flex items-center gap-2 text-body-sm text-muted-foreground">
                    Ends in
                    <div data-slot="store-countdown" role="timer" x-bind:aria-label="label" dir="ltr"
    x-show="!done"  class="inline-flex items-center gap-1.5">
    <span aria-hidden="true" x-show="showDays"  style="display: none"  class="inline-flex min-w-11 flex-col items-center rounded-control bg-foreground px-1.5 py-1 text-background">
        <span class="text-label tabular-nums leading-none" x-text="d">0</span>
        <span class="text-[10px] leading-tight opacity-80">d</span>
    </span>
    <span aria-hidden="true" class="inline-flex min-w-11 flex-col items-center rounded-control bg-foreground px-1.5 py-1 text-background">
        <span class="text-label tabular-nums leading-none" x-text="h">05</span>
        <span class="text-[10px] leading-tight opacity-80">h</span>
    </span>
    <span aria-hidden="true" class="inline-flex min-w-11 flex-col items-center rounded-control bg-foreground px-1.5 py-1 text-background">
        <span class="text-label tabular-nums leading-none" x-text="m">00</span>
        <span class="text-[10px] leading-tight opacity-80">m</span>
    </span>
    <span aria-hidden="true" class="inline-flex min-w-11 flex-col items-center rounded-control bg-foreground px-1.5 py-1 text-background">
        <span class="text-label tabular-nums leading-none" x-text="s">00</span>
        <span class="text-[10px] leading-tight opacity-80">s</span>
    </span>
</div>
                </span>
            </div>
                    </div>
        <div role="region" aria-roledescription="carousel" aria-label="Flash deals" dir="ltr" lang="en" tabindex="0"
    data-slot="carousel" x-data="nqCarousel(JSON.parse('{\u0022loop\u0022:false,\u0022align\u0022:\u0022start\u0022,\u0022autoplay\u0022:0,\u0022rtl\u0022:false,\u0022labels\u0022:{\u0022previous\u0022:\u0022Previous slide\u0022,\u0022next\u0022:\u0022Next slide\u0022,\u0022slides\u0022:\u0022Choose slide\u0022,\u0022goTo\u0022:\u0022Go to slide {n}\u0022,\u0022slide\u0022:\u0022Slide {n} of {total}\u0022,\u0022pause\u0022:\u0022Pause autoplay\u0022,\u0022play\u0022:\u0022Start autoplay\u0022}}'))" x-bind="root"
    class="rounded-card outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus relative">
    <div data-slot="carousel-viewport" class="overflow-x-auto overflow-y-hidden rounded-[inherit] snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
    <div data-slot="carousel-content" class="-ms-4 flex touch-pan-y">
        <div role="group" aria-roledescription="slide" data-slot="carousel-item" data-deal-id="d1" class="min-w-0 shrink-0 grow-0 ps-4 snap-start -scroll-ms-4 basis-3/4 sm:basis-1/2 lg:basis-1/4"><div class="flex h-full flex-col gap-2">
                            <div data-slot="store-product-card-menu" class="h-full min-w-0">
    <article data-slot="store-product-card" data-layout="grid" x-data="nqStoreCard(JSON.parse('{\u0022product\u0022:{\u0022id\u0022:\u0022tee\u0022,\u0022name\u0022:\u0022Everyday tee\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022Clothing\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/tee\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022tee\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022tee-1\u0022,\u0022options\u0022:[],\u0022price\u0022:2900,\u0022compareAt\u0022:3900,\u0022stock\u0022:12}]},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:null,\u0022quickView\u0022:null,\u0022add\u0022:true,\u0022maxSwatches\u0022:5}'))" x-bind:data-layout="list ? 'list' : 'grid'"
         x-bind:data-sold-out="soldOut ? '' : undefined"
        x-bind:class="{ 'flex-row gap-4 sm:gap-6': list, 'flex-col gap-3': !list }"
        class="group/card relative flex min-w-0">
        <div data-slot="store-product-card-media" x-on:click="navigate()"
            x-bind:class="{ 'aspect-square w-32 sm:w-52': list, 'aspect-[4/5] w-full': !list }"
            class="relative shrink-0 cursor-pointer overflow-hidden rounded-card bg-secondary aspect-[4/5] w-full">
            <div class="contents">
                <img alt="Everyday tee" x-bind:src="primarySrc" x-bind:alt="product.name" x-show="imgOk"  src="https://picsum.photos/seed/tee/600/750"                     loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
                    x-bind:class="soldOut ? 'opacity-60' : ''" class="size-full object-cover ">
                <div role="img" aria-label="Everyday tee" data-slot="store-image-placeholder" x-show="!imgOk"  style="display: none"                     class="flex size-full items-center justify-center bg-secondary text-muted-foreground"><svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg></div>
            </div>
            <div aria-hidden="true" x-show="secondarySrc"  style="display: none"                 class="absolute inset-0 opacity-0 transition-opacity duration-200 ease-nq group-hover/card:opacity-100 motion-reduce:transition-none pointer-coarse:hidden">
                <div class="contents" x-data="{ failed: false }"  x-effect="secondarySrc; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(secondarySrc) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="secondarySrc" x-bind:alt="&#039;&#039;" x-show="(secondarySrc) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
            </div>
            <div class="pointer-events-none absolute start-2 top-2 flex max-w-[70%] flex-col items-start gap-1">
                <span class="contents" x-show="soldOut"  style="display: none" ><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Sold out</span>
</span>
                <span class="contents" x-show="percent > 0 && !soldOut" >
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><bdi x-text="percentText">25% off</bdi></span>
                </span>
                            </div>
            <div class="absolute end-2 top-2 flex flex-col gap-1.5" x-on:click.stop>
                <button data-slot="button"
     type="button"                         aria-pressed="false" aria-label="Add Everyday tee to wishlist" x-bind:aria-pressed="isWish ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-label="wishLabel" x-on:click="toggleWish()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm">
        <svg x-bind:class="{ 'fill-current text-nq-danger': isWish }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>
</svg></button>
                <span class="contents" x-show="hasQuick"  style="display: none" >
                    <button data-slot="button"
     type="button"                         aria-label="Quick view Everyday tee" x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg></button>
                </span>
            </div>
                            <div x-show="!list && canAdd"  x-on:click.stop
                    x-bind:class="(picking || status !== 'idle') ? 'opacity-100' : ''"
                    class="absolute inset-x-2 bottom-2 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
                    <div x-show="picking && missing" style="display: none" role="group" x-bind:aria-label="missingText" class="flex flex-col gap-2 rounded-control border border-border bg-popover p-2 shadow-floating">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-caption font-medium text-foreground" x-text="missingText"></p>
                            <button data-slot="button"
     type="button"                         aria-label="Close" x-on:click="picking = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover p-0 size-5">
        <span aria-hidden="true">×</span></button>
                        </div>
                        <template x-for="o in (missing ? [missing] : [])" x-bind:key="o.id">
                            <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                        </template>
                    </div>
                    <div x-show="!(picking && missing)">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-full">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                    </div>
                </div>
                    </div>
        <div class="flex min-w-0 flex-1 flex-col gap-1.5 " x-bind:class="{ 'justify-center': list }">
            <p class="truncate text-caption text-muted-foreground">Nasaq Goods</p>            <h3 class="text-body font-medium text-foreground">
                <a href="#tee" x-bind:href="link" x-on:click="$dispatch('nq-navigate', { productId: product.id, href: link })"
                    class="line-clamp-2 rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Everyday tee</a>
            </h3>
                                                    <span data-slot="store-price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-body text-foreground">
                    <span class="text-caption text-muted-foreground" x-show="fromText" x-text="fromText"  style="display: none" ></span>
                    <bdi class="font-medium tabular-nums" x-text="priceText">$29</bdi>
                    <s class="text-caption text-muted-foreground decoration-muted-foreground/60" x-show="compareText" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText">$39</bdi>
                    </s>
                </span>
                                    <template x-for="o in (colour && colour.values.length > 1 ? [colour] : [])" x-bind:key="o.id">
                <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 5)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 5) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 5) })"></span>
        </div>
    </div>
            </template>
                        <div x-show="list"  style="display: none"  class="contents">
                <template x-for="o in otherOptions" x-bind:key="o.id">
                    <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                </template>
                                    <div class="mt-1.5 flex flex-wrap items-center gap-2">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-fit">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                        <span class="contents" x-show="hasQuick"  style="display: none" >
                            <button data-slot="button"
     type="button"                         x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>Quick view</button>
                        </span>
                    </div>
                            </div>
            <label x-show="hasCompare"  style="display: none"  class="mt-1 flex w-fit cursor-pointer items-center gap-2 text-caption text-muted-foreground">
                <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="compareModel" aria-label="Compare Everyday tee" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                Compare
            </label>
            <span class="sr-only" role="status" aria-live="polite" x-text="liveText"></span>
        </div>
    </article>
</div>
                                                            <div class="flex flex-col gap-1">
                                    <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68" aria-label="68% claimed" class="h-1.5 overflow-hidden rounded-full bg-secondary">
                                        <div class="h-full rounded-full bg-nq-danger-solid" style="width: 68%"></div>
                                    </div>
                                    <span class="text-caption text-muted-foreground">68% claimed</span>
                                </div>
                                                    </div></div>
                                                        <div role="group" aria-roledescription="slide" data-slot="carousel-item" data-deal-id="d2" class="min-w-0 shrink-0 grow-0 ps-4 snap-start -scroll-ms-4 basis-3/4 sm:basis-1/2 lg:basis-1/4"><div class="flex h-full flex-col gap-2">
                            <div data-slot="store-product-card-menu" class="h-full min-w-0">
    <article data-slot="store-product-card" data-layout="grid" x-data="nqStoreCard(JSON.parse('{\u0022product\u0022:{\u0022id\u0022:\u0022hoodie\u0022,\u0022name\u0022:\u0022Zip hoodie\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022Clothing\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/hoodie\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022hoodie\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022hoodie-1\u0022,\u0022options\u0022:[],\u0022price\u0022:6900,\u0022stock\u0022:12}]},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:null,\u0022quickView\u0022:null,\u0022add\u0022:true,\u0022maxSwatches\u0022:5}'))" x-bind:data-layout="list ? 'list' : 'grid'"
         x-bind:data-sold-out="soldOut ? '' : undefined"
        x-bind:class="{ 'flex-row gap-4 sm:gap-6': list, 'flex-col gap-3': !list }"
        class="group/card relative flex min-w-0">
        <div data-slot="store-product-card-media" x-on:click="navigate()"
            x-bind:class="{ 'aspect-square w-32 sm:w-52': list, 'aspect-[4/5] w-full': !list }"
            class="relative shrink-0 cursor-pointer overflow-hidden rounded-card bg-secondary aspect-[4/5] w-full">
            <div class="contents">
                <img alt="Zip hoodie" x-bind:src="primarySrc" x-bind:alt="product.name" x-show="imgOk"  src="https://picsum.photos/seed/hoodie/600/750"                     loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
                    x-bind:class="soldOut ? 'opacity-60' : ''" class="size-full object-cover ">
                <div role="img" aria-label="Zip hoodie" data-slot="store-image-placeholder" x-show="!imgOk"  style="display: none"                     class="flex size-full items-center justify-center bg-secondary text-muted-foreground"><svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg></div>
            </div>
            <div aria-hidden="true" x-show="secondarySrc"  style="display: none"                 class="absolute inset-0 opacity-0 transition-opacity duration-200 ease-nq group-hover/card:opacity-100 motion-reduce:transition-none pointer-coarse:hidden">
                <div class="contents" x-data="{ failed: false }"  x-effect="secondarySrc; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(secondarySrc) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="secondarySrc" x-bind:alt="&#039;&#039;" x-show="(secondarySrc) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
            </div>
            <div class="pointer-events-none absolute start-2 top-2 flex max-w-[70%] flex-col items-start gap-1">
                <span class="contents" x-show="soldOut"  style="display: none" ><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Sold out</span>
</span>
                <span class="contents" x-show="percent > 0 && !soldOut"  style="display: none" >
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><bdi x-text="percentText">0% off</bdi></span>
                </span>
                            </div>
            <div class="absolute end-2 top-2 flex flex-col gap-1.5" x-on:click.stop>
                <button data-slot="button"
     type="button"                         aria-pressed="false" aria-label="Add Zip hoodie to wishlist" x-bind:aria-pressed="isWish ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-label="wishLabel" x-on:click="toggleWish()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm">
        <svg x-bind:class="{ 'fill-current text-nq-danger': isWish }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>
</svg></button>
                <span class="contents" x-show="hasQuick"  style="display: none" >
                    <button data-slot="button"
     type="button"                         aria-label="Quick view Zip hoodie" x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg></button>
                </span>
            </div>
                            <div x-show="!list && canAdd"  x-on:click.stop
                    x-bind:class="(picking || status !== 'idle') ? 'opacity-100' : ''"
                    class="absolute inset-x-2 bottom-2 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
                    <div x-show="picking && missing" style="display: none" role="group" x-bind:aria-label="missingText" class="flex flex-col gap-2 rounded-control border border-border bg-popover p-2 shadow-floating">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-caption font-medium text-foreground" x-text="missingText"></p>
                            <button data-slot="button"
     type="button"                         aria-label="Close" x-on:click="picking = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover p-0 size-5">
        <span aria-hidden="true">×</span></button>
                        </div>
                        <template x-for="o in (missing ? [missing] : [])" x-bind:key="o.id">
                            <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                        </template>
                    </div>
                    <div x-show="!(picking && missing)">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-full">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                    </div>
                </div>
                    </div>
        <div class="flex min-w-0 flex-1 flex-col gap-1.5 " x-bind:class="{ 'justify-center': list }">
            <p class="truncate text-caption text-muted-foreground">Nasaq Goods</p>            <h3 class="text-body font-medium text-foreground">
                <a href="#hoodie" x-bind:href="link" x-on:click="$dispatch('nq-navigate', { productId: product.id, href: link })"
                    class="line-clamp-2 rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Zip hoodie</a>
            </h3>
                                                    <span data-slot="store-price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-body text-foreground">
                    <span class="text-caption text-muted-foreground" x-show="fromText" x-text="fromText"  style="display: none" ></span>
                    <bdi class="font-medium tabular-nums" x-text="priceText">$69</bdi>
                    <s class="text-caption text-muted-foreground decoration-muted-foreground/60" x-show="compareText"  style="display: none" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText"></bdi>
                    </s>
                </span>
                                    <template x-for="o in (colour && colour.values.length > 1 ? [colour] : [])" x-bind:key="o.id">
                <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 5)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 5) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 5) })"></span>
        </div>
    </div>
            </template>
                        <div x-show="list"  style="display: none"  class="contents">
                <template x-for="o in otherOptions" x-bind:key="o.id">
                    <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                </template>
                                    <div class="mt-1.5 flex flex-wrap items-center gap-2">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-fit">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                        <span class="contents" x-show="hasQuick"  style="display: none" >
                            <button data-slot="button"
     type="button"                         x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>Quick view</button>
                        </span>
                    </div>
                            </div>
            <label x-show="hasCompare"  style="display: none"  class="mt-1 flex w-fit cursor-pointer items-center gap-2 text-caption text-muted-foreground">
                <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="compareModel" aria-label="Compare Zip hoodie" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                Compare
            </label>
            <span class="sr-only" role="status" aria-live="polite" x-text="liveText"></span>
        </div>
    </article>
</div>
                                                            <div class="flex flex-col gap-1">
                                    <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-label="30% claimed" class="h-1.5 overflow-hidden rounded-full bg-secondary">
                                        <div class="h-full rounded-full bg-nq-danger-solid" style="width: 30%"></div>
                                    </div>
                                    <span class="text-caption text-muted-foreground">30% claimed</span>
                                </div>
                                                    </div></div>
    </div>
</div>
            <button data-slot="carousel-previous"
     type="button"                  disabled      data-disabled     x-bind="previous" aria-label="Previous slide" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control p-0 absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-card/90 shadow-floating backdrop-blur-sm data-disabled:opacity-0 start-3">
        <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button data-slot="carousel-next"
     type="button"                         x-bind="next" aria-label="Next slide" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control p-0 absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-card/90 shadow-floating backdrop-blur-sm data-disabled:opacity-0 end-3">
        <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
    <div class="sr-only" aria-atomic="true" x-bind="live"></div>
</div>
    </section>
    <section data-slot="store-product-carousel" aria-labelledby="store-car-Recently-viewed" >
        <div class="mb-4 flex items-end justify-between gap-4">
            <h2 id="store-car-Recently-viewed" class="text-h2 text-foreground">Recently viewed</h2>
                    </div>
        <div role="region" aria-roledescription="carousel" aria-label="Recently viewed carousel" dir="ltr" lang="en" tabindex="0"
    data-slot="carousel" x-data="nqCarousel(JSON.parse('{\u0022loop\u0022:false,\u0022align\u0022:\u0022start\u0022,\u0022autoplay\u0022:0,\u0022rtl\u0022:false,\u0022labels\u0022:{\u0022previous\u0022:\u0022Previous slide\u0022,\u0022next\u0022:\u0022Next slide\u0022,\u0022slides\u0022:\u0022Choose slide\u0022,\u0022goTo\u0022:\u0022Go to slide {n}\u0022,\u0022slide\u0022:\u0022Slide {n} of {total}\u0022,\u0022pause\u0022:\u0022Pause autoplay\u0022,\u0022play\u0022:\u0022Start autoplay\u0022}}'))" x-bind="root"
    class="rounded-card outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus relative">
    <div data-slot="carousel-viewport" class="overflow-x-auto overflow-y-hidden rounded-[inherit] snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
    <div data-slot="carousel-content" class="-ms-4 flex touch-pan-y">
        <div role="group" aria-roledescription="slide" data-slot="carousel-item" class="min-w-0 shrink-0 grow-0 ps-4 snap-start -scroll-ms-4 basis-[70%] snap-start sm:basis-1/3 lg:basis-1/4"><div data-slot="store-product-card-menu" class="h-full min-w-0">
    <article data-slot="store-product-card" data-layout="grid" x-data="nqStoreCard(JSON.parse('{\u0022product\u0022:{\u0022id\u0022:\u0022cap\u0022,\u0022name\u0022:\u0022Canvas cap\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022Clothing\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/cap\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022cap\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022cap-1\u0022,\u0022options\u0022:[],\u0022price\u0022:1900,\u0022stock\u0022:12}]},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:null,\u0022quickView\u0022:null,\u0022add\u0022:true,\u0022maxSwatches\u0022:5}'))" x-bind:data-layout="list ? 'list' : 'grid'"
         x-bind:data-sold-out="soldOut ? '' : undefined"
        x-bind:class="{ 'flex-row gap-4 sm:gap-6': list, 'flex-col gap-3': !list }"
        class="group/card relative flex min-w-0">
        <div data-slot="store-product-card-media" x-on:click="navigate()"
            x-bind:class="{ 'aspect-square w-32 sm:w-52': list, 'aspect-[4/5] w-full': !list }"
            class="relative shrink-0 cursor-pointer overflow-hidden rounded-card bg-secondary aspect-[4/5] w-full">
            <div class="contents">
                <img alt="Canvas cap" x-bind:src="primarySrc" x-bind:alt="product.name" x-show="imgOk"  src="https://picsum.photos/seed/cap/600/750"                     loading="eager" decoding="async" data-slot="store-image" x-on:error="failed = true"
                    x-bind:class="soldOut ? 'opacity-60' : ''" class="size-full object-cover ">
                <div role="img" aria-label="Canvas cap" data-slot="store-image-placeholder" x-show="!imgOk"  style="display: none"                     class="flex size-full items-center justify-center bg-secondary text-muted-foreground"><svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg></div>
            </div>
            <div aria-hidden="true" x-show="secondarySrc"  style="display: none"                 class="absolute inset-0 opacity-0 transition-opacity duration-200 ease-nq group-hover/card:opacity-100 motion-reduce:transition-none pointer-coarse:hidden">
                <div class="contents" x-data="{ failed: false }"  x-effect="secondarySrc; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(secondarySrc) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="secondarySrc" x-bind:alt="&#039;&#039;" x-show="(secondarySrc) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
            </div>
            <div class="pointer-events-none absolute start-2 top-2 flex max-w-[70%] flex-col items-start gap-1">
                <span class="contents" x-show="soldOut"  style="display: none" ><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Sold out</span>
</span>
                <span class="contents" x-show="percent > 0 && !soldOut"  style="display: none" >
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><bdi x-text="percentText">0% off</bdi></span>
                </span>
                            </div>
            <div class="absolute end-2 top-2 flex flex-col gap-1.5" x-on:click.stop>
                <button data-slot="button"
     type="button"                         aria-pressed="false" aria-label="Add Canvas cap to wishlist" x-bind:aria-pressed="isWish ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-label="wishLabel" x-on:click="toggleWish()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm">
        <svg x-bind:class="{ 'fill-current text-nq-danger': isWish }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>
</svg></button>
                <span class="contents" x-show="hasQuick"  style="display: none" >
                    <button data-slot="button"
     type="button"                         aria-label="Quick view Canvas cap" x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg></button>
                </span>
            </div>
                            <div x-show="!list && canAdd"  x-on:click.stop
                    x-bind:class="(picking || status !== 'idle') ? 'opacity-100' : ''"
                    class="absolute inset-x-2 bottom-2 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
                    <div x-show="picking && missing" style="display: none" role="group" x-bind:aria-label="missingText" class="flex flex-col gap-2 rounded-control border border-border bg-popover p-2 shadow-floating">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-caption font-medium text-foreground" x-text="missingText"></p>
                            <button data-slot="button"
     type="button"                         aria-label="Close" x-on:click="picking = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover p-0 size-5">
        <span aria-hidden="true">×</span></button>
                        </div>
                        <template x-for="o in (missing ? [missing] : [])" x-bind:key="o.id">
                            <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                        </template>
                    </div>
                    <div x-show="!(picking && missing)">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-full">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                    </div>
                </div>
                    </div>
        <div class="flex min-w-0 flex-1 flex-col gap-1.5 " x-bind:class="{ 'justify-center': list }">
            <p class="truncate text-caption text-muted-foreground">Nasaq Goods</p>            <h3 class="text-body font-medium text-foreground">
                <a href="#cap" x-bind:href="link" x-on:click="$dispatch('nq-navigate', { productId: product.id, href: link })"
                    class="line-clamp-2 rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Canvas cap</a>
            </h3>
                                                    <span data-slot="store-price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-body text-foreground">
                    <span class="text-caption text-muted-foreground" x-show="fromText" x-text="fromText"  style="display: none" ></span>
                    <bdi class="font-medium tabular-nums" x-text="priceText">$19</bdi>
                    <s class="text-caption text-muted-foreground decoration-muted-foreground/60" x-show="compareText"  style="display: none" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText"></bdi>
                    </s>
                </span>
                                    <template x-for="o in (colour && colour.values.length > 1 ? [colour] : [])" x-bind:key="o.id">
                <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 5)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 5) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 5) })"></span>
        </div>
    </div>
            </template>
                        <div x-show="list"  style="display: none"  class="contents">
                <template x-for="o in otherOptions" x-bind:key="o.id">
                    <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                </template>
                                    <div class="mt-1.5 flex flex-wrap items-center gap-2">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-fit">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                        <span class="contents" x-show="hasQuick"  style="display: none" >
                            <button data-slot="button"
     type="button"                         x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>Quick view</button>
                        </span>
                    </div>
                            </div>
            <label x-show="hasCompare"  style="display: none"  class="mt-1 flex w-fit cursor-pointer items-center gap-2 text-caption text-muted-foreground">
                <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="compareModel" aria-label="Compare Canvas cap" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                Compare
            </label>
            <span class="sr-only" role="status" aria-live="polite" x-text="liveText"></span>
        </div>
    </article>
</div></div>
                                    <div role="group" aria-roledescription="slide" data-slot="carousel-item" class="min-w-0 shrink-0 grow-0 ps-4 snap-start -scroll-ms-4 basis-[70%] snap-start sm:basis-1/3 lg:basis-1/4"><div data-slot="store-product-card-menu" class="h-full min-w-0">
    <article data-slot="store-product-card" data-layout="grid" x-data="nqStoreCard(JSON.parse('{\u0022product\u0022:{\u0022id\u0022:\u0022belt\u0022,\u0022name\u0022:\u0022Leather belt\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022Clothing\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/belt\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022belt\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022belt-1\u0022,\u0022options\u0022:[],\u0022price\u0022:3400,\u0022stock\u0022:12}]},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:null,\u0022quickView\u0022:null,\u0022add\u0022:true,\u0022maxSwatches\u0022:5}'))" x-bind:data-layout="list ? 'list' : 'grid'"
         x-bind:data-sold-out="soldOut ? '' : undefined"
        x-bind:class="{ 'flex-row gap-4 sm:gap-6': list, 'flex-col gap-3': !list }"
        class="group/card relative flex min-w-0">
        <div data-slot="store-product-card-media" x-on:click="navigate()"
            x-bind:class="{ 'aspect-square w-32 sm:w-52': list, 'aspect-[4/5] w-full': !list }"
            class="relative shrink-0 cursor-pointer overflow-hidden rounded-card bg-secondary aspect-[4/5] w-full">
            <div class="contents">
                <img alt="Leather belt" x-bind:src="primarySrc" x-bind:alt="product.name" x-show="imgOk"  src="https://picsum.photos/seed/belt/600/750"                     loading="eager" decoding="async" data-slot="store-image" x-on:error="failed = true"
                    x-bind:class="soldOut ? 'opacity-60' : ''" class="size-full object-cover ">
                <div role="img" aria-label="Leather belt" data-slot="store-image-placeholder" x-show="!imgOk"  style="display: none"                     class="flex size-full items-center justify-center bg-secondary text-muted-foreground"><svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg></div>
            </div>
            <div aria-hidden="true" x-show="secondarySrc"  style="display: none"                 class="absolute inset-0 opacity-0 transition-opacity duration-200 ease-nq group-hover/card:opacity-100 motion-reduce:transition-none pointer-coarse:hidden">
                <div class="contents" x-data="{ failed: false }"  x-effect="secondarySrc; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(secondarySrc) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="secondarySrc" x-bind:alt="&#039;&#039;" x-show="(secondarySrc) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
            </div>
            <div class="pointer-events-none absolute start-2 top-2 flex max-w-[70%] flex-col items-start gap-1">
                <span class="contents" x-show="soldOut"  style="display: none" ><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Sold out</span>
</span>
                <span class="contents" x-show="percent > 0 && !soldOut"  style="display: none" >
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><bdi x-text="percentText">0% off</bdi></span>
                </span>
                            </div>
            <div class="absolute end-2 top-2 flex flex-col gap-1.5" x-on:click.stop>
                <button data-slot="button"
     type="button"                         aria-pressed="false" aria-label="Add Leather belt to wishlist" x-bind:aria-pressed="isWish ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-label="wishLabel" x-on:click="toggleWish()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm">
        <svg x-bind:class="{ 'fill-current text-nq-danger': isWish }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>
</svg></button>
                <span class="contents" x-show="hasQuick"  style="display: none" >
                    <button data-slot="button"
     type="button"                         aria-label="Quick view Leather belt" x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg></button>
                </span>
            </div>
                            <div x-show="!list && canAdd"  x-on:click.stop
                    x-bind:class="(picking || status !== 'idle') ? 'opacity-100' : ''"
                    class="absolute inset-x-2 bottom-2 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
                    <div x-show="picking && missing" style="display: none" role="group" x-bind:aria-label="missingText" class="flex flex-col gap-2 rounded-control border border-border bg-popover p-2 shadow-floating">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-caption font-medium text-foreground" x-text="missingText"></p>
                            <button data-slot="button"
     type="button"                         aria-label="Close" x-on:click="picking = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover p-0 size-5">
        <span aria-hidden="true">×</span></button>
                        </div>
                        <template x-for="o in (missing ? [missing] : [])" x-bind:key="o.id">
                            <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                        </template>
                    </div>
                    <div x-show="!(picking && missing)">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-full">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                    </div>
                </div>
                    </div>
        <div class="flex min-w-0 flex-1 flex-col gap-1.5 " x-bind:class="{ 'justify-center': list }">
            <p class="truncate text-caption text-muted-foreground">Nasaq Goods</p>            <h3 class="text-body font-medium text-foreground">
                <a href="#belt" x-bind:href="link" x-on:click="$dispatch('nq-navigate', { productId: product.id, href: link })"
                    class="line-clamp-2 rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Leather belt</a>
            </h3>
                                                    <span data-slot="store-price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-body text-foreground">
                    <span class="text-caption text-muted-foreground" x-show="fromText" x-text="fromText"  style="display: none" ></span>
                    <bdi class="font-medium tabular-nums" x-text="priceText">$34</bdi>
                    <s class="text-caption text-muted-foreground decoration-muted-foreground/60" x-show="compareText"  style="display: none" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText"></bdi>
                    </s>
                </span>
                                    <template x-for="o in (colour && colour.values.length > 1 ? [colour] : [])" x-bind:key="o.id">
                <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 5)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 5) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 5) })"></span>
        </div>
    </div>
            </template>
                        <div x-show="list"  style="display: none"  class="contents">
                <template x-for="o in otherOptions" x-bind:key="o.id">
                    <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                </template>
                                    <div class="mt-1.5 flex flex-wrap items-center gap-2">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-fit">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                        <span class="contents" x-show="hasQuick"  style="display: none" >
                            <button data-slot="button"
     type="button"                         x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>Quick view</button>
                        </span>
                    </div>
                            </div>
            <label x-show="hasCompare"  style="display: none"  class="mt-1 flex w-fit cursor-pointer items-center gap-2 text-caption text-muted-foreground">
                <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="compareModel" aria-label="Compare Leather belt" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                Compare
            </label>
            <span class="sr-only" role="status" aria-live="polite" x-text="liveText"></span>
        </div>
    </article>
</div></div>
                                    <div role="group" aria-roledescription="slide" data-slot="carousel-item" class="min-w-0 shrink-0 grow-0 ps-4 snap-start -scroll-ms-4 basis-[70%] snap-start sm:basis-1/3 lg:basis-1/4"><div data-slot="store-product-card-menu" class="h-full min-w-0">
    <article data-slot="store-product-card" data-layout="grid" x-data="nqStoreCard(JSON.parse('{\u0022product\u0022:{\u0022id\u0022:\u0022scarf\u0022,\u0022name\u0022:\u0022Linen scarf\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022Clothing\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/scarf\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022scarf\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022scarf-1\u0022,\u0022options\u0022:[],\u0022price\u0022:2700,\u0022stock\u0022:12}]},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:null,\u0022quickView\u0022:null,\u0022add\u0022:true,\u0022maxSwatches\u0022:5}'))" x-bind:data-layout="list ? 'list' : 'grid'"
         x-bind:data-sold-out="soldOut ? '' : undefined"
        x-bind:class="{ 'flex-row gap-4 sm:gap-6': list, 'flex-col gap-3': !list }"
        class="group/card relative flex min-w-0">
        <div data-slot="store-product-card-media" x-on:click="navigate()"
            x-bind:class="{ 'aspect-square w-32 sm:w-52': list, 'aspect-[4/5] w-full': !list }"
            class="relative shrink-0 cursor-pointer overflow-hidden rounded-card bg-secondary aspect-[4/5] w-full">
            <div class="contents">
                <img alt="Linen scarf" x-bind:src="primarySrc" x-bind:alt="product.name" x-show="imgOk"  src="https://picsum.photos/seed/scarf/600/750"                     loading="eager" decoding="async" data-slot="store-image" x-on:error="failed = true"
                    x-bind:class="soldOut ? 'opacity-60' : ''" class="size-full object-cover ">
                <div role="img" aria-label="Linen scarf" data-slot="store-image-placeholder" x-show="!imgOk"  style="display: none"                     class="flex size-full items-center justify-center bg-secondary text-muted-foreground"><svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg></div>
            </div>
            <div aria-hidden="true" x-show="secondarySrc"  style="display: none"                 class="absolute inset-0 opacity-0 transition-opacity duration-200 ease-nq group-hover/card:opacity-100 motion-reduce:transition-none pointer-coarse:hidden">
                <div class="contents" x-data="{ failed: false }"  x-effect="secondarySrc; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(secondarySrc) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="secondarySrc" x-bind:alt="&#039;&#039;" x-show="(secondarySrc) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
            </div>
            <div class="pointer-events-none absolute start-2 top-2 flex max-w-[70%] flex-col items-start gap-1">
                <span class="contents" x-show="soldOut"  style="display: none" ><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Sold out</span>
</span>
                <span class="contents" x-show="percent > 0 && !soldOut"  style="display: none" >
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><bdi x-text="percentText">0% off</bdi></span>
                </span>
                            </div>
            <div class="absolute end-2 top-2 flex flex-col gap-1.5" x-on:click.stop>
                <button data-slot="button"
     type="button"                         aria-pressed="false" aria-label="Add Linen scarf to wishlist" x-bind:aria-pressed="isWish ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-label="wishLabel" x-on:click="toggleWish()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm">
        <svg x-bind:class="{ 'fill-current text-nq-danger': isWish }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>
</svg></button>
                <span class="contents" x-show="hasQuick"  style="display: none" >
                    <button data-slot="button"
     type="button"                         aria-label="Quick view Linen scarf" x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control-sm p-0 rounded-full bg-card/90 shadow-xs backdrop-blur-sm opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg></button>
                </span>
            </div>
                            <div x-show="!list && canAdd"  x-on:click.stop
                    x-bind:class="(picking || status !== 'idle') ? 'opacity-100' : ''"
                    class="absolute inset-x-2 bottom-2 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-focus-within/card:opacity-100 group-hover/card:opacity-100 pointer-coarse:opacity-100">
                    <div x-show="picking && missing" style="display: none" role="group" x-bind:aria-label="missingText" class="flex flex-col gap-2 rounded-control border border-border bg-popover p-2 shadow-floating">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-caption font-medium text-foreground" x-text="missingText"></p>
                            <button data-slot="button"
     type="button"                         aria-label="Close" x-on:click="picking = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover p-0 size-5">
        <span aria-hidden="true">×</span></button>
                        </div>
                        <template x-for="o in (missing ? [missing] : [])" x-bind:key="o.id">
                            <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                        </template>
                    </div>
                    <div x-show="!(picking && missing)">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-full">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                    </div>
                </div>
                    </div>
        <div class="flex min-w-0 flex-1 flex-col gap-1.5 " x-bind:class="{ 'justify-center': list }">
            <p class="truncate text-caption text-muted-foreground">Nasaq Goods</p>            <h3 class="text-body font-medium text-foreground">
                <a href="#scarf" x-bind:href="link" x-on:click="$dispatch('nq-navigate', { productId: product.id, href: link })"
                    class="line-clamp-2 rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Linen scarf</a>
            </h3>
                                                    <span data-slot="store-price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-body text-foreground">
                    <span class="text-caption text-muted-foreground" x-show="fromText" x-text="fromText"  style="display: none" ></span>
                    <bdi class="font-medium tabular-nums" x-text="priceText">$27</bdi>
                    <s class="text-caption text-muted-foreground decoration-muted-foreground/60" x-show="compareText"  style="display: none" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText"></bdi>
                    </s>
                </span>
                                    <template x-for="o in (colour && colour.values.length > 1 ? [colour] : [])" x-bind:key="o.id">
                <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 5)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 5) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 5) })"></span>
        </div>
    </div>
            </template>
                        <div x-show="list"  style="display: none"  class="contents">
                <template x-for="o in otherOptions" x-bind:key="o.id">
                    <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" x-bind:aria-label="o.name" class="flex flex-wrap items-center gap-1.5" x-on:keydown="keys($event)" x-on:mouseleave="previewValue(null)">
            <template x-for="v in vals(o, 99)" x-bind:key="v.id">
                <button type="button" role="radio" x-bind:aria-checked="checked(o.id, v.id) ? 'true' : 'false'"
                    x-bind:aria-label="swatch(o) ? spoken(v.label, o.id, v.id) : undefined" x-bind:title="v.label"
                    x-bind:disabled="avail(o.id, v.id) === 'none'" x-bind:tabindex="tabindexFor(o.id, v.id)" x-bind:data-state="avail(o.id, v.id)"
                    x-bind:class="[
                        'relative shrink-0 outline-none transition-[box-shadow,border-color] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:cursor-not-allowed disabled:opacity-40',
                        swatch(o) ? 'rounded-full border border-nq-line-strong size-5' : 'rounded-control border px-2.5 text-label tabular-nums h-7 min-w-7 text-caption',
                        swatch(o) ? (checked(o.id, v.id) ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '') : (checked(o.id, v.id) ? 'border-primary bg-nq-selected text-foreground' : 'border-border bg-card text-foreground hover:bg-nq-hover'),
                        !swatch(o) && avail(o.id, v.id) === 'out' ? 'text-muted-foreground line-through' : '',
                    ]"
                    x-bind:style="swatch(o) && v.color ? { backgroundColor: v.color } : {}"
                    x-on:click="pick(o.id, v.id)" x-on:mouseenter="previewValue(v.id)" x-on:focus="previewValue(v.id)" x-on:blur="previewValue(null)">
                    <span class="contents" x-show="swatch(o)">
                        <span class="contents" x-show="o.display === 'image' && v.image"><div class="contents" x-data="{ failed: false }"  x-effect="v.image; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(v.image) || failed" style="display: none"         class="flex size-full items-center justify-center bg-secondary text-muted-foreground rounded-full">
        <svg aria-hidden="true" class="size-6 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>    </div>
            <img  x-bind:src="v.image" x-bind:alt="&#039;&#039;" x-show="(v.image) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover rounded-full">
    </div>
</span>
                        <span x-show="avail(o.id, v.id) === 'out'" aria-hidden="true" class="absolute inset-0 rounded-full bg-[linear-gradient(to_top_right,transparent_46%,var(--nq-fg)_46%,var(--nq-fg)_54%,transparent_54%)] opacity-70"></span>
                    </span>
                    <bdi x-show="!swatch(o)" x-text="v.label"></bdi>
                </button>
            </template>
            <span x-show="more(o, 99) > 0" class="text-caption text-muted-foreground" x-text="s('moreValues', { n: more(o, 99) })"></span>
        </div>
    </div>
                </template>
                                    <div class="mt-1.5 flex flex-wrap items-center gap-2">
                        <button data-slot="store-product-card-add"
     type="button"                         x-on:click="quickAdd()" x-bind:disabled="status === &#039;adding&#039; || addDisabled" x-bind:aria-busy="status === &#039;adding&#039; ? &#039;true&#039; : undefined" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5 w-fit">
        <svg x-show="status === 'added'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <svg x-show="status !== 'added'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg>                            <span x-text="addLabel">Add to cart</span></button>
                        <span class="contents" x-show="hasQuick"  style="display: none" >
                            <button data-slot="button"
     type="button"                         x-on:click="quickView()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>Quick view</button>
                        </span>
                    </div>
                            </div>
            <label x-show="hasCompare"  style="display: none"  class="mt-1 flex w-fit cursor-pointer items-center gap-2 text-caption text-muted-foreground">
                <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="compareModel" aria-label="Compare Linen scarf" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                Compare
            </label>
            <span class="sr-only" role="status" aria-live="polite" x-text="liveText"></span>
        </div>
    </article>
</div></div>
    </div>
</div>
            <button data-slot="carousel-previous"
     type="button"                  disabled      data-disabled     x-bind="previous" aria-label="Previous slide" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control p-0 absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-card/90 shadow-floating backdrop-blur-sm data-disabled:opacity-0 start-3">
        <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button data-slot="carousel-next"
     type="button"                         x-bind="next" aria-label="Next slide" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border text-foreground hover:bg-nq-hover size-control p-0 absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-card/90 shadow-floating backdrop-blur-sm data-disabled:opacity-0 end-3">
        <svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
    <div class="sr-only" aria-atomic="true" x-bind="live"></div>
</div>
    </section>
</div>
```