# Store product listing

> A storefront results page: facet sidebar with live counts, active chips, sort, grid and list views, pagination or load more, empty results with suggestions, a mobile filter sheet, plus the storefront product card, quick view and compare tray and table.

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

## Install

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

`StoreListing` is a whole results page in one component: a facet sidebar with counts, removable filter chips, sort, grid and list views, pagination or load more, an empty state that suggests how to loosen the search, and a filter sheet on phones. It is fed a `CommerceProduct[]` and does the filtering, sorting and paging itself (or take control of any part).

The parts are also exported and are meant to be reused elsewhere: `StoreProductCard`, `StoreQuickView`, `StoreCompareTray`, `StoreCompareTable`, `StoreOptionPicker` and `StorePrice`.

## When to use

- Category pages, search results, brand pages, collections.
- `StoreProductCard` in any grid or carousel of products.

## When not to use

- An admin product table: use the products admin.
- One product's page: use `ProductDetail`.

## Import

```tsx
import { StoreListing, StoreProductCard } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
<StoreListing
  title="Clothing"
  products={products}
  currency="USD"
  categoryTree={tree}
  defaultFilters={{ ...EMPTY_LISTING_FILTERS, category: "Clothing" }}
  onAddToCart={(product, variant, qty) => cart.add(variant.id, qty)}
  compare
/>
```

Prices in `CommerceProduct` are integer minor units (cents for USD, halalas for SAR); the components convert with the currency's own digits.

## API

### `StoreListing`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `products` | `CommerceProduct[]` | required | The full result set. Drafts and archived items are ignored. |
| `currency` | `string` | `"USD"` (`"SAR"` in Arabic) | ISO 4217 code. |
| `categoryTree?` | `ListingCategoryNode[]` | none | Category facet. Node ids equal `product.category`. |
| `filters?` / `defaultFilters?` / `onFiltersChange?` | `ListingFilters` | empty | Query, category, brands, options, price range, rating, in stock, on sale. |
| `sort?` / `defaultSort?` / `onSortChange?` | `ListingSort` | `relevance` | Relevance, price, newest, top rated, biggest discount, name. |
| `view?` / `defaultView?` / `density?` | | `grid` | Grid or list; comfortable or compact. |
| `pageSize?` / `paging?` | `number` / `"pages" \| "load-more"` | `12` / `pages` | |
| `loading?` / `error?` / `onRetry?` | | | Skeleton grid and error state. |
| `onAddToCart?` | `(product, variant, qty)` | none | Shows quick add on cards and in quick view. |
| `wishlistIds?` / `onToggleWishlist?` | | own state | |
| `compare?` / `compareMax?` / `compareIds?` / `onCompareChange?` | | off / 4 | Compare boxes, a tray, and a table with a differences-only switch. |
| `getHref?` / `onNavigate?` | | | Card links. |
| `popularSearches?` / `onSearch?` | | | Suggestions in the empty state. |
| `labels?` | `ListingLabels` | locale | Override any string. |

### `StoreProductCard`

`product`, `currency`, `href?`, `layout?` (`grid`, `list`), `ratio?`, `wishlisted?`, `compared?`, `onToggleWishlist?`, `onToggleCompare?`, `onQuickView?`, `onAddToCart?(product, variant, qty)`, `onNavigate?`, `maxSwatches?`, `menu?`, `priority?`, `labels?`. Shows a second image on hover, colour swatches that preview the variant image, badges, a discount, a from-price, a heart and quick add (which asks for any option still open). Context-click, Shift+F10 or the Menu key open its actions.

### `StoreQuickView`

`product`, `open`, `onOpenChange`, `currency`, `href?`, `onAddToCart?`, `closeOnAdd?`, `lowStockAt?`, `labels?`. A dialog with gallery, options, quantity, stock note and add to cart.

### Model helpers

Pure functions, importable in Node and covered by tests: `listingFilter`, `listingSort`, `listingFacets` (disjunctive counts: a facet does not count against its own selection), `listingActiveChips`, `listingRemoveChip`, `listingClear`, `listingRelaxations`, `listingPage`, `listingToggleCompare`, `listingCompareRows`, `listingCompareDifferences`, `listingToMajor`, `listingToMinor`.

## Accessibility

- Options are a radio group; arrow keys move and mirror in RTL. Unavailable values are marked, not hidden.
- Quantity steppers and results counts are live regions; the quick view is a modal dialog with focus returned to the card.
- Facet groups are fieldsets with a legend; the price range slider has named thumbs. The phone sheet applies filters only on Apply.
- The card image is not a link, so context-click works; the name is the link. Hover-only actions are also reachable by keyboard focus.
- Motion (image swap, transitions) is off under reduced motion; images lazy-load with a token placeholder.

## RTL and Arabic

Logical layout, mirrored arrows and sheets, Arabic search normalisation (diacritics, alef and taa marbuta variants), and Arabic strings for every label.

## Code

### React

```tsx
<StoreListing
  title="Clothing"
  products={products}
  currency="USD"
  categoryTree={tree}
  defaultFilters={{ ...EMPTY_LISTING_FILTERS, category: "Clothing" }}
  onAddToCart={(product, variant, qty) => cart.add(variant.id, qty)}
  compare
/>
```

### shadcn

```tsx
<StoreListing
  title="Clothing"
  products={products}
  currency="USD"
  categoryTree={tree}
  defaultFilters={{ ...EMPTY_LISTING_FILTERS, category: "Clothing" }}
  onAddToCart={(product, variant, qty) => cart.add(variant.id, qty)}
  compare
/>
```

### Vue

```vue
<script setup lang="ts">
import { NqStoreListing, EMPTY_LISTING_FILTERS, type CommerceProduct, type CommerceCategoryNode } from "@fadymondy/nasaq/vue";

const products: CommerceProduct[] = [
  { id: "tee", name: "Everyday tee", brand: "Nasaq Goods", category: "Clothing", images: [], options: [], variants: [{ id: "tee-1", options: {}, price: 2900, stock: 8 }] },
  { id: "hoodie", name: "Zip hoodie", brand: "Nasaq Goods", category: "Clothing", images: [], options: [], variants: [{ id: "hoodie-1", options: {}, price: 6900, compareAt: 8900, stock: 3 }] },
  { id: "cap", name: "Canvas cap", brand: "Atlas", category: "Clothing", images: [], options: [], variants: [{ id: "cap-1", options: {}, price: 1900, stock: 0 }] },
];
const tree = [{ id: "Clothing", label: "Clothing" }];
const defaultFilters = { ...EMPTY_LISTING_FILTERS, category: "Clothing" };
const addToCart = (_p: CommerceProduct, variant: { id: string }, qty: number) => console.log("add", variant.id, qty);
</script>

<template>
  <NqStoreListing title="Clothing" :products="products" currency="USD" :category-tree="tree" :default-filters="defaultFilters" compare @add-to-cart="addToCart" />
</template>
```

### Blade

```blade
@php
    // A catalogue in, a live listing out. Prices are minor units (cents). Filtering, sorting, paging, compare and quick view run in the browser.
    $img = fn ($seed) => [['src' => "https://picsum.photos/seed/{$seed}-1/600/750", 'alt' => $seed], ['src' => "https://picsum.photos/seed/{$seed}-2/600/750", 'alt' => $seed]];
    $colour = ['id' => 'color', 'name' => 'Colour', 'display' => 'swatch', 'values' => [['id' => 'black', 'label' => 'Black', 'color' => '#111111'], ['id' => 'sand', 'label' => 'Sand', 'color' => '#d8c3a5']]];
    $size = ['id' => 'size', 'name' => 'Size', 'values' => [['id' => 's', 'label' => 'S'], ['id' => 'm', 'label' => 'M']]];
    $v = fn ($id, $c, $s, $price, $stock, $compareAt = null) => array_filter(['id' => $id, 'options' => ['color' => $c, 'size' => $s], 'price' => $price, 'compareAt' => $compareAt, 'stock' => $stock], fn ($x) => $x !== null);
    $simple = fn ($id, $name, $brand, $cat, $price, $stock, $rating, $compareAt = null) => [
        'id' => $id, 'name' => $name, 'brand' => $brand, 'category' => $cat, 'images' => $img($id), 'options' => [],
        'variants' => [array_filter(['id' => $id.'-1', 'options' => [], 'price' => $price, 'compareAt' => $compareAt, 'stock' => $stock], fn ($x) => $x !== null)],
        'rating' => ['average' => $rating, 'count' => 40 + strlen($name) * 3],
    ];
    $products = [
        ['id' => 'tee', 'name' => 'Everyday tee', 'brand' => 'Nasaq Goods', 'category' => 'tops', 'description' => 'A soft cotton tee.', 'images' => $img('tee'), 'options' => [$colour, $size],
            'variants' => [$v('tee-b-s', 'black', 's', 2900, 8), $v('tee-b-m', 'black', 'm', 2900, 3), $v('tee-s-s', 'sand', 's', 2900, 12, 3900), $v('tee-s-m', 'sand', 'm', 2900, 5, 3900)], 'rating' => ['average' => 4.6, 'count' => 128]],
        ['id' => 'hoodie', 'name' => 'Zip hoodie', 'brand' => 'Nasaq Goods', 'category' => 'tops', 'images' => $img('hoodie'), 'options' => [$colour],
            'variants' => [['id' => 'hoodie-b', 'options' => ['color' => 'black'], 'price' => 6900, 'compareAt' => 8900, 'stock' => 3], ['id' => 'hoodie-s', 'options' => ['color' => 'sand'], 'price' => 6900, 'stock' => 4]], 'rating' => ['average' => 4.2, 'count' => 64]],
        $simple('cap', 'Canvas cap', 'Atlas', 'accessories', 1900, 0, 3.8),
        $simple('belt', 'Leather belt', 'Atlas', 'accessories', 3400, 9, 4.8),
        $simple('socks', 'Wool socks', 'Atlas', 'accessories', 1200, 40, 4.1, 1600),
        $simple('scarf', 'Linen scarf', 'Nasaq Goods', 'accessories', 2700, 6, 4.4),
    ];
    $tree = [['id' => 'tops', 'label' => 'Tops'], ['id' => 'accessories', 'label' => 'Accessories']];
@endphp
<x-nq::store-listing title="Shop" :products="$products" currency="USD" :category-tree="$tree" :page-size="4" :popular-searches="['tee', 'hoodie']"
    x-on:nq-add-to-cart="console.log('add to cart', $event.detail.variantId, $event.detail.quantity)" />
```

### HTML + Alpine

```html
<div data-slot="store-listing" x-data="nqStoreListing(JSON.parse('{\u0022products\u0022:[{\u0022id\u0022:\u0022tee\u0022,\u0022name\u0022:\u0022Everyday tee\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022tops\u0022,\u0022description\u0022:\u0022A soft cotton tee.\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/tee-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022tee\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/tee-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022tee\u0022}],\u0022options\u0022:[{\u0022id\u0022:\u0022color\u0022,\u0022name\u0022:\u0022Colour\u0022,\u0022display\u0022:\u0022swatch\u0022,\u0022values\u0022:[{\u0022id\u0022:\u0022black\u0022,\u0022label\u0022:\u0022Black\u0022,\u0022color\u0022:\u0022#111111\u0022},{\u0022id\u0022:\u0022sand\u0022,\u0022label\u0022:\u0022Sand\u0022,\u0022color\u0022:\u0022#d8c3a5\u0022}]},{\u0022id\u0022:\u0022size\u0022,\u0022name\u0022:\u0022Size\u0022,\u0022values\u0022:[{\u0022id\u0022:\u0022s\u0022,\u0022label\u0022:\u0022S\u0022},{\u0022id\u0022:\u0022m\u0022,\u0022label\u0022:\u0022M\u0022}]}],\u0022variants\u0022:[{\u0022id\u0022:\u0022tee-b-s\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022black\u0022,\u0022size\u0022:\u0022s\u0022},\u0022price\u0022:2900,\u0022stock\u0022:8},{\u0022id\u0022:\u0022tee-b-m\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022black\u0022,\u0022size\u0022:\u0022m\u0022},\u0022price\u0022:2900,\u0022stock\u0022:3},{\u0022id\u0022:\u0022tee-s-s\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022sand\u0022,\u0022size\u0022:\u0022s\u0022},\u0022price\u0022:2900,\u0022compareAt\u0022:3900,\u0022stock\u0022:12},{\u0022id\u0022:\u0022tee-s-m\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022sand\u0022,\u0022size\u0022:\u0022m\u0022},\u0022price\u0022:2900,\u0022compareAt\u0022:3900,\u0022stock\u0022:5}],\u0022rating\u0022:{\u0022average\u0022:4.6,\u0022count\u0022:128}},{\u0022id\u0022:\u0022hoodie\u0022,\u0022name\u0022:\u0022Zip hoodie\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022tops\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/hoodie-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022hoodie\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/hoodie-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022hoodie\u0022}],\u0022options\u0022:[{\u0022id\u0022:\u0022color\u0022,\u0022name\u0022:\u0022Colour\u0022,\u0022display\u0022:\u0022swatch\u0022,\u0022values\u0022:[{\u0022id\u0022:\u0022black\u0022,\u0022label\u0022:\u0022Black\u0022,\u0022color\u0022:\u0022#111111\u0022},{\u0022id\u0022:\u0022sand\u0022,\u0022label\u0022:\u0022Sand\u0022,\u0022color\u0022:\u0022#d8c3a5\u0022}]}],\u0022variants\u0022:[{\u0022id\u0022:\u0022hoodie-b\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022black\u0022},\u0022price\u0022:6900,\u0022compareAt\u0022:8900,\u0022stock\u0022:3},{\u0022id\u0022:\u0022hoodie-s\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022sand\u0022},\u0022price\u0022:6900,\u0022stock\u0022:4}],\u0022rating\u0022:{\u0022average\u0022:4.2,\u0022count\u0022:64}},{\u0022id\u0022:\u0022cap\u0022,\u0022name\u0022:\u0022Canvas cap\u0022,\u0022brand\u0022:\u0022Atlas\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/cap-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022cap\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/cap-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022cap\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022cap-1\u0022,\u0022options\u0022:[],\u0022price\u0022:1900,\u0022stock\u0022:0}],\u0022rating\u0022:{\u0022average\u0022:3.8,\u0022count\u0022:70}},{\u0022id\u0022:\u0022belt\u0022,\u0022name\u0022:\u0022Leather belt\u0022,\u0022brand\u0022:\u0022Atlas\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/belt-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022belt\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/belt-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022belt\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022belt-1\u0022,\u0022options\u0022:[],\u0022price\u0022:3400,\u0022stock\u0022:9}],\u0022rating\u0022:{\u0022average\u0022:4.8,\u0022count\u0022:76}},{\u0022id\u0022:\u0022socks\u0022,\u0022name\u0022:\u0022Wool socks\u0022,\u0022brand\u0022:\u0022Atlas\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/socks-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022socks\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/socks-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022socks\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022socks-1\u0022,\u0022options\u0022:[],\u0022price\u0022:1200,\u0022compareAt\u0022:1600,\u0022stock\u0022:40}],\u0022rating\u0022:{\u0022average\u0022:4.1,\u0022count\u0022:70}},{\u0022id\u0022:\u0022scarf\u0022,\u0022name\u0022:\u0022Linen scarf\u0022,\u0022brand\u0022:\u0022Nasaq Goods\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/scarf-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022scarf\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/scarf-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022scarf\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022scarf-1\u0022,\u0022options\u0022:[],\u0022price\u0022:2700,\u0022stock\u0022:6}],\u0022rating\u0022:{\u0022average\u0022:4.4,\u0022count\u0022:73}}],\u0022tree\u0022:[{\u0022id\u0022:\u0022tops\u0022,\u0022label\u0022:\u0022Tops\u0022},{\u0022id\u0022:\u0022accessories\u0022,\u0022label\u0022:\u0022Accessories\u0022}],\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022filters\u0022:{\u0022query\u0022:\u0022\u0022,\u0022category\u0022:null,\u0022brands\u0022:[],\u0022options\u0022:[],\u0022price\u0022:null,\u0022minRating\u0022:null,\u0022inStock\u0022:false,\u0022onSale\u0022:false},\u0022sort\u0022:\u0022relevance\u0022,\u0022sorts\u0022:[\u0022relevance\u0022,\u0022popular\u0022,\u0022rating\u0022,\u0022price-asc\u0022,\u0022price-desc\u0022,\u0022discount\u0022,\u0022name\u0022],\u0022view\u0022:\u0022grid\u0022,\u0022density\u0022:\u0022comfortable\u0022,\u0022pageSize\u0022:4,\u0022paging\u0022:\u0022pages\u0022,\u0022compare\u0022:true,\u0022compareMax\u0022:4,\u0022wishlistIds\u0022:[],\u0022showQueryChip\u0022:false,\u0022hrefPattern\u0022:null}'))" x-on:nq-wishlist-change="onWish($event)" x-on:nq-add-to-cart="console.log(&#039;add to cart&#039;, $event.detail.variantId, $event.detail.quantity)" class="flex min-w-0 flex-col gap-4">
    <div x-ref="top" class="scroll-mt-20"></div>
            <h1 class="text-h1 text-foreground">Shop</h1>
        <div class="grid gap-x-8 gap-y-4 lg:grid-cols-[16rem_minmax(0,1fr)]">
        <aside class="hidden lg:block" aria-label="Filters">
            <div data-slot="store-facet-sidebar" role="group" aria-label="Product filters" class="flex flex-col">
    <div class="flex flex-col">
            <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Categories<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <button type="button"  aria-current="true"  x-bind:aria-current="filters.category === null ? 'true' : undefined"
                    x-on:click="setCategory('filters', null)" x-bind:class="{ 'bg-nq-selected font-medium': filters.category === null, 'text-muted-foreground': !(filters.category === null) }"
                    class="mb-0.5 w-full rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus bg-nq-selected font-medium">All categories</button>
                <ul class="flex flex-col gap-0.5 ">
            <li>
            <button type="button"  x-bind:aria-current="catSel('filters', 'tops') ? 'true' : undefined"
                x-on:click="setCategory('filters', 'tops')"
                x-bind:class="{ 'bg-nq-selected font-medium text-foreground': catSel('filters', 'tops'), 'text-muted-foreground': !catSel('filters', 'tops') }"
                class="flex w-full items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus text-muted-foreground">
                <span class="min-w-0 truncate">Tops</span>
                <bdi class="text-caption tabular-nums" x-text="n(count('filters', 'cat', 'tops'))">2</bdi>
            </button>
                    </li>
            <li>
            <button type="button"  x-bind:aria-current="catSel('filters', 'accessories') ? 'true' : undefined"
                x-on:click="setCategory('filters', 'accessories')"
                x-bind:class="{ 'bg-nq-selected font-medium text-foreground': catSel('filters', 'accessories'), 'text-muted-foreground': !catSel('filters', 'accessories') }"
                class="flex w-full items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus text-muted-foreground">
                <span class="min-w-0 truncate">Accessories</span>
                <bdi class="text-caption tabular-nums" x-text="n(count('filters', 'cat', 'accessories'))">4</bdi>
            </button>
                    </li>
    </ul>
            </div>
        </section>
            <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Price<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <div class="px-2">
                    <div data-slot="slider" x-data="nqSlider(JSON.parse('{\u0022value\u0022:[12,69],\u0022min\u0022:12,\u0022max\u0022:69,\u0022step\u0022:1,\u0022disabled\u0022:false,\u0022minStepsBetweenThumbs\u0022:0,\u0022format\u0022:{\u0022style\u0022:\u0022currency\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022maximumFractionDigits\u0022:0}}'))" x-modelable="model"     x-model="priceDraft.filters" aria-label="Price" class="flex w-full flex-col gap-2 data-disabled:opacity-50">
            <div data-slot="slider-head" class="flex items-baseline justify-between gap-3 text-body-sm">
            <span></span>            <output data-slot="slider-value" class="text-muted-foreground tabular-nums"><bdi x-text="text">$12 – $69</bdi></output>        </div>
        <div data-slot="slider-control"  x-on:pointerdown="down($event)" class="flex h-5 w-full touch-none select-none items-center">
        <div data-slot="slider-track" x-ref="track" class="relative h-1.5 w-full rounded-full bg-nq-surface-soft">
            <div data-slot="slider-range" :style="rangeStyle()" style="position: absolute; top: 0; bottom: 0; inset-inline-start: calc(0% + 8.00px); inset-inline-end: calc(100% - calc(100% + -8.00px))" class="rounded-full bg-primary"></div>
                            <div data-slot="slider-thumb" role="slider" tabindex="0"
                     aria-label="Minimum price"                     aria-valuemin="12" aria-valuemax="69" aria-orientation="horizontal"
                    :aria-valuenow="values[0]" :aria-valuetext="fmt(values[0])" :data-dragging="dragging && active === 0 ? '' : undefined"
                                        x-on:keydown="key($event, 0)" :style="thumbStyle(0)"
                    style="inset-inline-start: calc(0% + 8.00px); top: 50%; translate: -50% -50%; position: absolute"
                    class="size-4 rounded-full border border-primary bg-card shadow-xs outline-none transition-[box-shadow] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-dragging:shadow-md data-disabled:pointer-events-none"></div>
                                            <div data-slot="slider-thumb" role="slider" tabindex="0"
                     aria-label="Maximum price"                     aria-valuemin="12" aria-valuemax="69" aria-orientation="horizontal"
                    :aria-valuenow="values[1]" :aria-valuetext="fmt(values[1])" :data-dragging="dragging && active === 1 ? '' : undefined"
                                        x-on:keydown="key($event, 1)" :style="thumbStyle(1)"
                    style="inset-inline-start: calc(100% + -8.00px); top: 50%; translate: -50% -50%; position: absolute"
                    class="size-4 rounded-full border border-primary bg-card shadow-xs outline-none transition-[box-shadow] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-dragging:shadow-md data-disabled:pointer-events-none"></div>
                                    </div>
    </div>
    </div>
                </div>
            </div>
        </section>
            <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Brand<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <ul class="flex flex-col gap-1.5">
                                            <li x-data="box('filters', 'Atlas')" x-show="brandShown('filters', 'Atlas', 0)" x-bind:style="{ order: brandOrder('filters', 'Atlas') }"
                            >
                            <label x-bind:class="{ 'opacity-45': count('filters', 'brand', 'Atlas') === 0 && !on }" class="flex cursor-pointer items-center gap-2 text-body-sm ">
                                <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="on" 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>
                                <span class="min-w-0 flex-1 truncate">Atlas</span>
                                <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'brand', 'Atlas'))">3</bdi>
                            </label>
                        </li>
                                            <li x-data="box('filters', 'Nasaq Goods')" x-show="brandShown('filters', 'Nasaq Goods', 1)" x-bind:style="{ order: brandOrder('filters', 'Nasaq Goods') }"
                            >
                            <label x-bind:class="{ 'opacity-45': count('filters', 'brand', 'Nasaq Goods') === 0 && !on }" class="flex cursor-pointer items-center gap-2 text-body-sm ">
                                <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="on" 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>
                                <span class="min-w-0 flex-1 truncate">Nasaq Goods</span>
                                <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'brand', 'Nasaq Goods'))">3</bdi>
                            </label>
                        </li>
                                    </ul>
                            </div>
        </section>
                    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Colour<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <div role="group" aria-label="Colour" class="flex flex-wrap gap-2">
                                                                                                <button type="button" aria-pressed="false" aria-label="Black (2)" title="Black (2)"                                  style="background-color: #111111"                                 x-bind:aria-pressed="isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;) ? 'true' : 'false'" x-bind:disabled="dead('filters', 'color', 'black')"
                                x-bind:aria-label="'Black' + ' (' + n(count(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;)) + ')'" x-bind:title="'Black' + ' (' + n(count(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;)) + ')'"
                                x-bind:class="{ 'ring-2 ring-primary ring-offset-2 ring-offset-background': isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;) }"
                                x-on:click="toggleOpt('filters', 'color', 'black')"
                                class="size-7 rounded-full border border-nq-line-strong outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-35 "></button>
                                                                                                                        <button type="button" aria-pressed="false" aria-label="Sand (2)" title="Sand (2)"                                  style="background-color: #d8c3a5"                                 x-bind:aria-pressed="isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;) ? 'true' : 'false'" x-bind:disabled="dead('filters', 'color', 'sand')"
                                x-bind:aria-label="'Sand' + ' (' + n(count(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;)) + ')'" x-bind:title="'Sand' + ' (' + n(count(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;)) + ')'"
                                x-bind:class="{ 'ring-2 ring-primary ring-offset-2 ring-offset-background': isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;) }"
                                x-on:click="toggleOpt('filters', 'color', 'sand')"
                                class="size-7 rounded-full border border-nq-line-strong outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-35 "></button>
                                                            </div>
            </div>
        </section>
                    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Size<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <div role="group" aria-label="Size" class="flex flex-wrap gap-1.5">
                                                                                                <button type="button" aria-pressed="false"                                 x-bind:aria-pressed="isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;s&quot;) ? 'true' : 'false'" x-bind:disabled="dead('filters', 'size', 's')"
                                x-bind:class="{ 'border-primary bg-nq-selected text-foreground': isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;s&quot;), 'border-border bg-card text-foreground hover:bg-nq-hover': !(isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;s&quot;)) }"
                                x-on:click="toggleOpt('filters', 'size', 's')"
                                class="h-8 min-w-10 rounded-control border px-2.5 text-label outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-40 border-border bg-card text-foreground hover:bg-nq-hover"><bdi>S</bdi></button>
                                                                                                                        <button type="button" aria-pressed="false"                                 x-bind:aria-pressed="isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;m&quot;) ? 'true' : 'false'" x-bind:disabled="dead('filters', 'size', 'm')"
                                x-bind:class="{ 'border-primary bg-nq-selected text-foreground': isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;m&quot;), 'border-border bg-card text-foreground hover:bg-nq-hover': !(isSel(&quot;filters&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;m&quot;)) }"
                                x-on:click="toggleOpt('filters', 'size', 'm')"
                                class="h-8 min-w-10 rounded-control border px-2.5 text-label outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-40 border-border bg-card text-foreground hover:bg-nq-hover"><bdi>M</bdi></button>
                                                            </div>
            </div>
        </section>
    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
        <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Rating<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
        <div x-show="open" class="pt-2">
            <div role="radiogroup" aria-label="Rating" class="flex flex-col gap-0.5">
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('filters', 'rating', 4) ? 'true' : 'false'"
                        x-on:click="setRating('filters', 4)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('filters', 'rating', 4) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>4 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'rating', 4))">5</bdi>
                    </button>
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('filters', 'rating', 3) ? 'true' : 'false'"
                        x-on:click="setRating('filters', 3)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('filters', 'rating', 3) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>3 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'rating', 3))">6</bdi>
                    </button>
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('filters', 'rating', 2) ? 'true' : 'false'"
                        x-on:click="setRating('filters', 2)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('filters', 'rating', 2) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>2 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'rating', 2))">6</bdi>
                    </button>
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('filters', 'rating', 1) ? 'true' : 'false'"
                        x-on:click="setRating('filters', 1)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('filters', 'rating', 1) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>1 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'rating', 1))">6</bdi>
                    </button>
                            </div>
        </div>
    </section>
    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
        <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Availability<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
        <div x-show="open" class="pt-2">
            <ul class="flex flex-col gap-1.5">
                <li>
                    <label class="flex cursor-pointer items-center gap-2 text-body-sm">
                        <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="filters.inStock" 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>
                        <span class="flex-1">In stock</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'inStock'))">5</bdi>
                    </label>
                </li>
                <li>
                    <label class="flex cursor-pointer items-center gap-2 text-body-sm">
                        <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="filters.onSale" 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>
                        <span class="flex-1">On sale</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('filters', 'onSale'))">3</bdi>
                    </label>
                </li>
            </ul>
        </div>
    </section>
</div>
</div>
        </aside>
        <div class="flex min-w-0 flex-col gap-4">
            <div data-slot="store-listing-toolbar" class="flex flex-wrap items-center gap-x-3 gap-y-2">
            <button data-slot="button"
     type="button"                         x-on:click="openSheet()" 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 lg:hidden">
        <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="M10 5H3"/>
  <path d="M12 19H3"/>
  <path d="M14 3v4"/>
  <path d="M16 17v4"/>
  <path d="M21 12h-9"/>
  <path d="M21 19h-5"/>
  <path d="M21 5h-7"/>
  <path d="M8 10v4"/>
  <path d="M8 12H3"/>
</svg>            <span x-text="filtersText">Filters</span></button>
        <p role="status" aria-live="polite" class="me-auto text-body-sm text-muted-foreground" x-text="resultsText">6 results</p>
    <label class="flex items-center gap-2 text-body-sm text-muted-foreground">
        <span class="hidden sm:inline">Sort by</span>
        <div data-slot="select" x-data="nqSelect('relevance', false)" x-modelable="value" x-id="['nq-select']" x-model="sort" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-label="Sort by" class="flex items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-8 w-auto min-w-40">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
            <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('relevance', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('relevance')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Featured</span>
</div>
                                    <div data-slot="select-item" x-bind="item('popular', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('popular')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Most popular</span>
</div>
                                    <div data-slot="select-item" x-bind="item('rating', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('rating')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Top rated</span>
</div>
                                    <div data-slot="select-item" x-bind="item('price-asc', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('price-asc')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Price: low to high</span>
</div>
                                    <div data-slot="select-item" x-bind="item('price-desc', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('price-desc')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Price: high to low</span>
</div>
                                    <div data-slot="select-item" x-bind="item('discount', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('discount')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Biggest discount</span>
</div>
                                    <div data-slot="select-item" x-bind="item('name', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('name')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Name A–Z</span>
</div>
    </div>
</template>
    </div>
    </label>
    <div role="group" data-slot="toggle-group" data-variant="segmented" data-orientation="horizontal"
    x-data="nqToggleGroup(JSON.parse('[\u0022grid\u0022]'), false)" x-modelable="value" x-bind="root"
            aria-label="View" x-model="viewModel" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="toggle" aria-pressed="true"
     x-bind="toggle('grid')"      data-pressed         aria-label="Grid view" class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs"><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">
  <rect width="7" height="7" x="3" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="14" rx="1"/>
  <rect width="7" height="7" x="3" y="14" rx="1"/>
</svg></button>
        <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('list')"             aria-label="List view" class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs"><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="M3 5h.01"/>
  <path d="M3 12h.01"/>
  <path d="M3 19h.01"/>
  <path d="M8 5h13"/>
  <path d="M8 12h13"/>
  <path d="M8 19h13"/>
</svg></button>
</div>
    <div role="group" data-slot="toggle-group" data-variant="segmented" data-orientation="horizontal"
    x-data="nqToggleGroup(JSON.parse('[\u0022comfortable\u0022]'), false)" x-modelable="value" x-bind="root"
            aria-label="Density" x-model="densityModel" x-show="view === &#039;grid&#039;" style="" class="w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5 hidden sm:flex">
    <button type="button" data-slot="toggle" aria-pressed="true"
     x-bind="toggle('comfortable')"      data-pressed         class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Comfortable</button>
        <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('compact')"             class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Compact</button>
</div>
</div>
            <div data-slot="store-active-chips" role="group" aria-label="Active filters" x-show="chips.length"  style="display: none"     class="flex flex-wrap items-center gap-2">
    <template x-for="chip in chips" x-bind:key="chip.id">
        <button type="button" x-bind:aria-label="s('removeFilter', { label: chipLabel(chip) })" x-on:click="removeChip(chip)" class="inline-flex h-7 items-center gap-1.5 rounded-full border border-border bg-card ps-3 pe-2 text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
            <bdi x-text="chipLabel(chip)"></bdi>
            <svg aria-hidden="true" class="size-3.5 text-muted-foreground" 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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>        </button>
    </template>
        <button data-slot="button"
     type="button"                         x-on:click="clearAll()" 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 underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        Clear all</button>
</div>
            <p role="status" x-show="notice" style="display: none" class="text-body-sm text-nq-warning-text" x-text="notice"></p>
                            <div x-show="empty"  style="display: none" >
                    <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" 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">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground"><span x-text="emptyTitle">No products match</span></p>
                    <p class="text-body-sm text-muted-foreground">Check the spelling, or loosen a filter.</p>
            </div>
    <div class="flex flex-col items-center gap-2" x-show="relaxations.length" style="display: none">
                            <p class="text-caption text-muted-foreground">Try removing</p>
                            <div class="flex flex-wrap justify-center gap-2">
                                <template x-for="r in relaxations" x-bind:key="r.chip.id">
                                    <button type="button" x-on:click="removeChip(r.chip)"
                                        class="inline-flex h-7 items-center gap-1.5 rounded-full border border-border bg-card px-3 text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        <bdi x-text="chipLabel(r.chip)"></bdi>
                                        <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"><span x-text="n(r.count)"></span></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                                                    <div class="flex flex-col items-center gap-2">
                                <p class="text-caption text-muted-foreground">Popular searches</p>
                                <div class="flex flex-wrap justify-center gap-2">
                                                                            <button data-slot="button"
     type="button"                         x-on:click="search(&#039;tee&#039;)" 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">
        tee</button>
                                                                            <button data-slot="button"
     type="button"                         x-on:click="search(&#039;hoodie&#039;)" 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">
        hoodie</button>
                                                                    </div>
                            </div>
            <div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button data-slot="button"
     type="button"                         x-on:click="resetFilters()" 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 px-[var(--nq-control-pad)]">
        Reset filters</button></div>
    </div>
                </div>
                <div x-show="!empty"  class="contents">
                    <ul data-slot="store-listing-grid" data-view="grid" x-bind:data-view="view" class="grid grid-cols-2 gap-x-3 gap-y-6 md:grid-cols-3 md:gap-x-4"
                        x-bind:class="{ 'grid': view === 'grid', 'flex flex-col gap-4 sm:gap-6': view === 'list', 'grid-cols-2 gap-x-3 gap-y-6 md:grid-cols-3 md:gap-x-4': view === 'grid' && density === 'comfortable', 'grid-cols-2 gap-x-3 gap-y-5 md:grid-cols-3 xl:grid-cols-4': view === 'grid' && density === 'compact' }">
                                                                                <li x-show="isShown('tee')" style="order: 0;"
                                x-effect="$el.style.order = orderOf('tee')"
                                x-bind:class="{ 'border-b border-border pb-4 sm:pb-6': view === 'list' && !isLast('tee'), 'pb-4 sm:pb-6': view === 'list' && isLast('tee') }"
                                class="min-w-0 ">
                                <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:\u0022tops\u0022,\u0022description\u0022:\u0022A soft cotton tee.\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/tee-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022tee\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/tee-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022tee\u0022}],\u0022options\u0022:[{\u0022id\u0022:\u0022color\u0022,\u0022name\u0022:\u0022Colour\u0022,\u0022display\u0022:\u0022swatch\u0022,\u0022values\u0022:[{\u0022id\u0022:\u0022black\u0022,\u0022label\u0022:\u0022Black\u0022,\u0022color\u0022:\u0022#111111\u0022},{\u0022id\u0022:\u0022sand\u0022,\u0022label\u0022:\u0022Sand\u0022,\u0022color\u0022:\u0022#d8c3a5\u0022}]},{\u0022id\u0022:\u0022size\u0022,\u0022name\u0022:\u0022Size\u0022,\u0022values\u0022:[{\u0022id\u0022:\u0022s\u0022,\u0022label\u0022:\u0022S\u0022},{\u0022id\u0022:\u0022m\u0022,\u0022label\u0022:\u0022M\u0022}]}],\u0022variants\u0022:[{\u0022id\u0022:\u0022tee-b-s\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022black\u0022,\u0022size\u0022:\u0022s\u0022},\u0022price\u0022:2900,\u0022stock\u0022:8},{\u0022id\u0022:\u0022tee-b-m\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022black\u0022,\u0022size\u0022:\u0022m\u0022},\u0022price\u0022:2900,\u0022stock\u0022:3},{\u0022id\u0022:\u0022tee-s-s\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022sand\u0022,\u0022size\u0022:\u0022s\u0022},\u0022price\u0022:2900,\u0022compareAt\u0022:3900,\u0022stock\u0022:12},{\u0022id\u0022:\u0022tee-s-m\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022sand\u0022,\u0022size\u0022:\u0022m\u0022},\u0022price\u0022:2900,\u0022compareAt\u0022:3900,\u0022stock\u0022:5}],\u0022rating\u0022:{\u0022average\u0022:4.6,\u0022count\u0022:128}},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:true,\u0022quickView\u0022:true,\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-1/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="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"                 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" >
                    <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">Quick add</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="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
    <span class="sr-only">Rated 4.6 out of 5, 128 reviews</span>
    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>    <bdi aria-hidden="true" class="tabular-nums text-foreground">4.6</bdi>
            <span aria-hidden="true" class="truncate">
            <span class="me-1.5">·</span>
            <bdi class="tabular-nums">128</bdi> reviews
        </span>
    </span>
                                        <p x-show="list"  style="display: none"  class="line-clamp-2 max-w-prose text-body-sm text-muted-foreground">A soft cotton tee.</p>
                                        <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"  style="display: none" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText"></bdi>
                    </s>
                </span>
                                        <div data-slot="store-option-picker" data-ssr class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" aria-label="Colour" class="flex flex-wrap items-center gap-1.5">
                                            <button type="button" role="radio" aria-checked="false"  aria-label="Black"  title="Black"
                     tabindex="0" data-state="available"
                    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 rounded-full border border-nq-line-strong size-5"  style="background-color: #111111" >
                                                                                                        </button>
                                            <button type="button" role="radio" aria-checked="false"  aria-label="Sand"  title="Sand"
                     tabindex="-1" data-state="available"
                    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 rounded-full border border-nq-line-strong size-5"  style="background-color: #d8c3a5" >
                                                                                                        </button>
                                </div>
    </div>
                        <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">Quick add</span></button>
                        <span class="contents" x-show="hasQuick" >
                            <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"  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>
                            </li>
                                                                                <li x-show="isShown('hoodie')" style="order: 1;"
                                x-effect="$el.style.order = orderOf('hoodie')"
                                x-bind:class="{ 'border-b border-border pb-4 sm:pb-6': view === 'list' && !isLast('hoodie'), 'pb-4 sm:pb-6': view === 'list' && isLast('hoodie') }"
                                class="min-w-0 ">
                                <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:\u0022tops\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/hoodie-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022hoodie\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/hoodie-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022hoodie\u0022}],\u0022options\u0022:[{\u0022id\u0022:\u0022color\u0022,\u0022name\u0022:\u0022Colour\u0022,\u0022display\u0022:\u0022swatch\u0022,\u0022values\u0022:[{\u0022id\u0022:\u0022black\u0022,\u0022label\u0022:\u0022Black\u0022,\u0022color\u0022:\u0022#111111\u0022},{\u0022id\u0022:\u0022sand\u0022,\u0022label\u0022:\u0022Sand\u0022,\u0022color\u0022:\u0022#d8c3a5\u0022}]}],\u0022variants\u0022:[{\u0022id\u0022:\u0022hoodie-b\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022black\u0022},\u0022price\u0022:6900,\u0022compareAt\u0022:8900,\u0022stock\u0022:3},{\u0022id\u0022:\u0022hoodie-s\u0022,\u0022options\u0022:{\u0022color\u0022:\u0022sand\u0022},\u0022price\u0022:6900,\u0022stock\u0022:4}],\u0022rating\u0022:{\u0022average\u0022:4.2,\u0022count\u0022:64}},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:true,\u0022quickView\u0022:true,\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-1/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="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"                 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">22% 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" >
                    <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">Quick add</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="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
    <span class="sr-only">Rated 4.2 out of 5, 64 reviews</span>
    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>    <bdi aria-hidden="true" class="tabular-nums text-foreground">4.2</bdi>
            <span aria-hidden="true" class="truncate">
            <span class="me-1.5">·</span>
            <bdi class="tabular-nums">64</bdi> reviews
        </span>
    </span>
                                                    <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" >
                        <span class="sr-only">was </span><bdi class="tabular-nums" x-text="compareText">$89</bdi>
                    </s>
                </span>
                                        <div data-slot="store-option-picker" data-ssr class="flex min-w-0 flex-col gap-1.5">
                <div role="radiogroup" aria-label="Colour" class="flex flex-wrap items-center gap-1.5">
                                            <button type="button" role="radio" aria-checked="false"  aria-label="Black"  title="Black"
                     tabindex="0" data-state="available"
                    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 rounded-full border border-nq-line-strong size-5"  style="background-color: #111111" >
                                                                                                        </button>
                                            <button type="button" role="radio" aria-checked="false"  aria-label="Sand"  title="Sand"
                     tabindex="-1" data-state="available"
                    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 rounded-full border border-nq-line-strong size-5"  style="background-color: #d8c3a5" >
                                                                                                        </button>
                                </div>
    </div>
                        <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">Quick add</span></button>
                        <span class="contents" x-show="hasQuick" >
                            <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"  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>
                            </li>
                                                                                <li x-show="isShown('cap')" style="order: 2;"
                                x-effect="$el.style.order = orderOf('cap')"
                                x-bind:class="{ 'border-b border-border pb-4 sm:pb-6': view === 'list' && !isLast('cap'), 'pb-4 sm:pb-6': view === 'list' && isLast('cap') }"
                                class="min-w-0 ">
                                <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:\u0022Atlas\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/cap-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022cap\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/cap-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022cap\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022cap-1\u0022,\u0022options\u0022:[],\u0022price\u0022:1900,\u0022stock\u0022:0}],\u0022rating\u0022:{\u0022average\u0022:3.8,\u0022count\u0022:70}},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:true,\u0022quickView\u0022:true,\u0022add\u0022:true,\u0022maxSwatches\u0022:5}'))" x-bind:data-layout="list ? 'list' : 'grid'"
         data-sold-out  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-1/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 opacity-60">
                <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"                 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" ><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" >
                    <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>
        <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">Atlas</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="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
    <span class="sr-only">Rated 3.8 out of 5, 70 reviews</span>
    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>    <bdi aria-hidden="true" class="tabular-nums text-foreground">3.8</bdi>
            <span aria-hidden="true" class="truncate">
            <span class="me-1.5">·</span>
            <bdi class="tabular-nums">70</bdi> reviews
        </span>
    </span>
                                                    <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>
            <label x-show="hasCompare"  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>
                            </li>
                                                                                <li x-show="isShown('belt')" style="order: 3;"
                                x-effect="$el.style.order = orderOf('belt')"
                                x-bind:class="{ 'border-b border-border pb-4 sm:pb-6': view === 'list' && !isLast('belt'), 'pb-4 sm:pb-6': view === 'list' && isLast('belt') }"
                                class="min-w-0 ">
                                <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:\u0022Atlas\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/belt-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022belt\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/belt-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022belt\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022belt-1\u0022,\u0022options\u0022:[],\u0022price\u0022:3400,\u0022stock\u0022:9}],\u0022rating\u0022:{\u0022average\u0022:4.8,\u0022count\u0022:76}},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:true,\u0022quickView\u0022:true,\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-1/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"                 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" >
                    <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">Atlas</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="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
    <span class="sr-only">Rated 4.8 out of 5, 76 reviews</span>
    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>    <bdi aria-hidden="true" class="tabular-nums text-foreground">4.8</bdi>
            <span aria-hidden="true" class="truncate">
            <span class="me-1.5">·</span>
            <bdi class="tabular-nums">76</bdi> reviews
        </span>
    </span>
                                                    <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" >
                            <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"  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>
                            </li>
                                                                                <li x-show="isShown('socks')" style="order: 4; display: none;"
                                x-effect="$el.style.order = orderOf('socks')"
                                x-bind:class="{ 'border-b border-border pb-4 sm:pb-6': view === 'list' && !isLast('socks'), 'pb-4 sm:pb-6': view === 'list' && isLast('socks') }"
                                class="min-w-0 ">
                                <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:\u0022socks\u0022,\u0022name\u0022:\u0022Wool socks\u0022,\u0022brand\u0022:\u0022Atlas\u0022,\u0022category\u0022:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/socks-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022socks\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/socks-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022socks\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022socks-1\u0022,\u0022options\u0022:[],\u0022price\u0022:1200,\u0022compareAt\u0022:1600,\u0022stock\u0022:40}],\u0022rating\u0022:{\u0022average\u0022:4.1,\u0022count\u0022:70}},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:true,\u0022quickView\u0022:true,\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="Wool socks" x-bind:src="primarySrc" x-bind:alt="product.name" x-show="imgOk"  src="https://picsum.photos/seed/socks-1/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="Wool socks" 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"                 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 Wool socks 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" >
                    <button data-slot="button"
     type="button"                         aria-label="Quick view Wool socks" 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">Atlas</p>            <h3 class="text-body font-medium text-foreground">
                <a href="#socks" 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">Wool socks</a>
            </h3>
                            <span data-slot="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
    <span class="sr-only">Rated 4.1 out of 5, 70 reviews</span>
    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>    <bdi aria-hidden="true" class="tabular-nums text-foreground">4.1</bdi>
            <span aria-hidden="true" class="truncate">
            <span class="me-1.5">·</span>
            <bdi class="tabular-nums">70</bdi> reviews
        </span>
    </span>
                                                    <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">$12</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">$16</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" >
                            <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"  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 Wool socks" 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>
                            </li>
                                                                                <li x-show="isShown('scarf')" style="order: 5; display: none;"
                                x-effect="$el.style.order = orderOf('scarf')"
                                x-bind:class="{ 'border-b border-border pb-4 sm:pb-6': view === 'list' && !isLast('scarf'), 'pb-4 sm:pb-6': view === 'list' && isLast('scarf') }"
                                class="min-w-0 ">
                                <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:\u0022accessories\u0022,\u0022images\u0022:[{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/scarf-1\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022scarf\u0022},{\u0022src\u0022:\u0022https:\\\/\\\/picsum.photos\\\/seed\\\/scarf-2\\\/600\\\/750\u0022,\u0022alt\u0022:\u0022scarf\u0022}],\u0022options\u0022:[],\u0022variants\u0022:[{\u0022id\u0022:\u0022scarf-1\u0022,\u0022options\u0022:[],\u0022price\u0022:2700,\u0022stock\u0022:6}],\u0022rating\u0022:{\u0022average\u0022:4.4,\u0022count\u0022:73}},\u0022layout\u0022:\u0022grid\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022href\u0022:null,\u0022wishlisted\u0022:false,\u0022compare\u0022:true,\u0022quickView\u0022:true,\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-1/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="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"                 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" >
                    <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="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
    <span class="sr-only">Rated 4.4 out of 5, 73 reviews</span>
    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>    <bdi aria-hidden="true" class="tabular-nums text-foreground">4.4</bdi>
            <span aria-hidden="true" class="truncate">
            <span class="me-1.5">·</span>
            <bdi class="tabular-nums">73</bdi> reviews
        </span>
    </span>
                                                    <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" >
                            <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"  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>
                            </li>
                                            </ul>
                                            <div class="mt-8 flex flex-col items-center gap-2" x-show="totalPages > 1" >
                            <p class="text-caption text-muted-foreground" x-text="showingText">Showing 1–4 of 6</p>
                            <nav data-slot="pagination" aria-label="Product pages"
    x-data="nqPagination(1, 2, 1, 1)" x-modelable="page"
    x-model="page" x-effect="pageCount = totalPages" x-on:page-change="goPage($event.detail)" class="w-fit max-w-full">
    <ul class="flex flex-wrap items-center gap-1">
        <li>
            <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Previous" x-on:click="go(page - 1)" x-bind:disabled="page &lt;= 1" x-bind:data-disabled="page &lt;= 1 ? &#039;&#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 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <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>
        </li>
                                    <li data-ssr><button type="button" aria-label="Page 1"  aria-current="page"                     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 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 tabular-nums border-primary bg-nq-selected">1</button></li>
                                                <li data-ssr><button type="button" aria-label="Page 2"                     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 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 tabular-nums border-transparent">2</button></li>
                            <template x-for="item in items()" :key="item">
            <li :data-slot="typeof item === 'number' ? undefined : 'pagination-ellipsis'" :class="typeof item === 'number' ? '' : 'flex size-control-sm items-center justify-center text-muted-foreground'">
                <button type="button" x-show="typeof item === 'number'" 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 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 tabular-nums" :class="item === page ? 'border-primary bg-nq-selected' : 'border-transparent'"
                    :aria-label="pageLabel(item)" :aria-current="item === page ? 'page' : undefined" x-text="num(item)" x-on:click="go(item)"></button>
                <span x-show="typeof item !== 'number'" class="contents"><span aria-hidden="true">…</span><span class="sr-only">More pages</span></span>
            </li>
        </template>
        <li>
            <button data-slot="button"
     type="button"                         aria-label="Next" x-on:click="go(page + 1)" x-bind:disabled="page &gt;= pageCount" x-bind:data-disabled="page &gt;= pageCount ? &#039;&#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 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <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>
        </li>
    </ul>
</nav>
                        </div>
                                    </div>
                    </div>
    </div>
    <div data-slot="sheet" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="sheetOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="sheet-portal">
        <div data-slot="sheet-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/10 transition-opacity duration-200 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 dark:bg-nq-bg/60"></div>
        <div data-slot="store-filter-sheet" data-side="bottom" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed z-50 flex flex-col bg-popover text-popover-foreground outline-none shadow-floating transition-[translate,opacity] duration-200 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 inset-x-0 bottom-0 rounded-t-floating border-t border-border data-starting-style:translate-y-8 data-ending-style:translate-y-8 max-h-[90dvh]">
            <div data-slot="sheet-header" class="flex flex-col gap-1 border-b border-border px-4 py-3.5 pe-12"><h2 data-slot="sheet-title" :id="$id('nq-dialog', 'title')" class="text-label text-foreground">Filters</h2>
            <p data-slot="sheet-description" :id="$id('nq-dialog', 'description')" class="text-caption text-muted-foreground sr-only">Product filters</p></div>
        <div data-slot="sheet-body" class="min-h-0 flex-1 overflow-y-auto overscroll-contain"><div data-slot="store-facet-sidebar" role="group" aria-label="Product filters" class="flex flex-col">
                <div class="flex flex-col">
            <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Categories<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <button type="button"  aria-current="true"  x-bind:aria-current="draft.category === null ? 'true' : undefined"
                    x-on:click="setCategory('draft', null)" x-bind:class="{ 'bg-nq-selected font-medium': draft.category === null, 'text-muted-foreground': !(draft.category === null) }"
                    class="mb-0.5 w-full rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus bg-nq-selected font-medium">All categories</button>
                <ul class="flex flex-col gap-0.5 ">
            <li>
            <button type="button"  x-bind:aria-current="catSel('draft', 'tops') ? 'true' : undefined"
                x-on:click="setCategory('draft', 'tops')"
                x-bind:class="{ 'bg-nq-selected font-medium text-foreground': catSel('draft', 'tops'), 'text-muted-foreground': !catSel('draft', 'tops') }"
                class="flex w-full items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus text-muted-foreground">
                <span class="min-w-0 truncate">Tops</span>
                <bdi class="text-caption tabular-nums" x-text="n(count('draft', 'cat', 'tops'))">2</bdi>
            </button>
                    </li>
            <li>
            <button type="button"  x-bind:aria-current="catSel('draft', 'accessories') ? 'true' : undefined"
                x-on:click="setCategory('draft', 'accessories')"
                x-bind:class="{ 'bg-nq-selected font-medium text-foreground': catSel('draft', 'accessories'), 'text-muted-foreground': !catSel('draft', 'accessories') }"
                class="flex w-full items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus text-muted-foreground">
                <span class="min-w-0 truncate">Accessories</span>
                <bdi class="text-caption tabular-nums" x-text="n(count('draft', 'cat', 'accessories'))">4</bdi>
            </button>
                    </li>
    </ul>
            </div>
        </section>
            <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Price<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <div class="px-2">
                    <div data-slot="slider" x-data="nqSlider(JSON.parse('{\u0022value\u0022:[12,69],\u0022min\u0022:12,\u0022max\u0022:69,\u0022step\u0022:1,\u0022disabled\u0022:false,\u0022minStepsBetweenThumbs\u0022:0,\u0022format\u0022:{\u0022style\u0022:\u0022currency\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022maximumFractionDigits\u0022:0}}'))" x-modelable="model"     x-model="priceDraft.draft" aria-label="Price" class="flex w-full flex-col gap-2 data-disabled:opacity-50">
            <div data-slot="slider-head" class="flex items-baseline justify-between gap-3 text-body-sm">
            <span></span>            <output data-slot="slider-value" class="text-muted-foreground tabular-nums"><bdi x-text="text">$12 – $69</bdi></output>        </div>
        <div data-slot="slider-control"  x-on:pointerdown="down($event)" class="flex h-5 w-full touch-none select-none items-center">
        <div data-slot="slider-track" x-ref="track" class="relative h-1.5 w-full rounded-full bg-nq-surface-soft">
            <div data-slot="slider-range" :style="rangeStyle()" style="position: absolute; top: 0; bottom: 0; inset-inline-start: calc(0% + 8.00px); inset-inline-end: calc(100% - calc(100% + -8.00px))" class="rounded-full bg-primary"></div>
                            <div data-slot="slider-thumb" role="slider" tabindex="0"
                     aria-label="Minimum price"                     aria-valuemin="12" aria-valuemax="69" aria-orientation="horizontal"
                    :aria-valuenow="values[0]" :aria-valuetext="fmt(values[0])" :data-dragging="dragging && active === 0 ? '' : undefined"
                                        x-on:keydown="key($event, 0)" :style="thumbStyle(0)"
                    style="inset-inline-start: calc(0% + 8.00px); top: 50%; translate: -50% -50%; position: absolute"
                    class="size-4 rounded-full border border-primary bg-card shadow-xs outline-none transition-[box-shadow] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-dragging:shadow-md data-disabled:pointer-events-none"></div>
                                            <div data-slot="slider-thumb" role="slider" tabindex="0"
                     aria-label="Maximum price"                     aria-valuemin="12" aria-valuemax="69" aria-orientation="horizontal"
                    :aria-valuenow="values[1]" :aria-valuetext="fmt(values[1])" :data-dragging="dragging && active === 1 ? '' : undefined"
                                        x-on:keydown="key($event, 1)" :style="thumbStyle(1)"
                    style="inset-inline-start: calc(100% + -8.00px); top: 50%; translate: -50% -50%; position: absolute"
                    class="size-4 rounded-full border border-primary bg-card shadow-xs outline-none transition-[box-shadow] duration-150 ease-nq motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-dragging:shadow-md data-disabled:pointer-events-none"></div>
                                    </div>
    </div>
    </div>
                </div>
            </div>
        </section>
            <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Brand<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <ul class="flex flex-col gap-1.5">
                                            <li x-data="box('draft', 'Atlas')" x-show="brandShown('draft', 'Atlas', 0)" x-bind:style="{ order: brandOrder('draft', 'Atlas') }"
                            >
                            <label x-bind:class="{ 'opacity-45': count('draft', 'brand', 'Atlas') === 0 && !on }" class="flex cursor-pointer items-center gap-2 text-body-sm ">
                                <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="on" 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>
                                <span class="min-w-0 flex-1 truncate">Atlas</span>
                                <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'brand', 'Atlas'))">3</bdi>
                            </label>
                        </li>
                                            <li x-data="box('draft', 'Nasaq Goods')" x-show="brandShown('draft', 'Nasaq Goods', 1)" x-bind:style="{ order: brandOrder('draft', 'Nasaq Goods') }"
                            >
                            <label x-bind:class="{ 'opacity-45': count('draft', 'brand', 'Nasaq Goods') === 0 && !on }" class="flex cursor-pointer items-center gap-2 text-body-sm ">
                                <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="on" 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>
                                <span class="min-w-0 flex-1 truncate">Nasaq Goods</span>
                                <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'brand', 'Nasaq Goods'))">3</bdi>
                            </label>
                        </li>
                                    </ul>
                            </div>
        </section>
                    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Colour<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <div role="group" aria-label="Colour" class="flex flex-wrap gap-2">
                                                                                                <button type="button" aria-pressed="false" aria-label="Black (2)" title="Black (2)"                                  style="background-color: #111111"                                 x-bind:aria-pressed="isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;) ? 'true' : 'false'" x-bind:disabled="dead('draft', 'color', 'black')"
                                x-bind:aria-label="'Black' + ' (' + n(count(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;)) + ')'" x-bind:title="'Black' + ' (' + n(count(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;)) + ')'"
                                x-bind:class="{ 'ring-2 ring-primary ring-offset-2 ring-offset-background': isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;black&quot;) }"
                                x-on:click="toggleOpt('draft', 'color', 'black')"
                                class="size-7 rounded-full border border-nq-line-strong outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-35 "></button>
                                                                                                                        <button type="button" aria-pressed="false" aria-label="Sand (2)" title="Sand (2)"                                  style="background-color: #d8c3a5"                                 x-bind:aria-pressed="isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;) ? 'true' : 'false'" x-bind:disabled="dead('draft', 'color', 'sand')"
                                x-bind:aria-label="'Sand' + ' (' + n(count(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;)) + ')'" x-bind:title="'Sand' + ' (' + n(count(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;)) + ')'"
                                x-bind:class="{ 'ring-2 ring-primary ring-offset-2 ring-offset-background': isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;color&quot;, &quot;sand&quot;) }"
                                x-on:click="toggleOpt('draft', 'color', 'sand')"
                                class="size-7 rounded-full border border-nq-line-strong outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-35 "></button>
                                                            </div>
            </div>
        </section>
                    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
            <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Size<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
            <div x-show="open" class="pt-2">
                <div role="group" aria-label="Size" class="flex flex-wrap gap-1.5">
                                                                                                <button type="button" aria-pressed="false"                                 x-bind:aria-pressed="isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;s&quot;) ? 'true' : 'false'" x-bind:disabled="dead('draft', 'size', 's')"
                                x-bind:class="{ 'border-primary bg-nq-selected text-foreground': isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;s&quot;), 'border-border bg-card text-foreground hover:bg-nq-hover': !(isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;s&quot;)) }"
                                x-on:click="toggleOpt('draft', 'size', 's')"
                                class="h-8 min-w-10 rounded-control border px-2.5 text-label outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-40 border-border bg-card text-foreground hover:bg-nq-hover"><bdi>S</bdi></button>
                                                                                                                        <button type="button" aria-pressed="false"                                 x-bind:aria-pressed="isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;m&quot;) ? 'true' : 'false'" x-bind:disabled="dead('draft', 'size', 'm')"
                                x-bind:class="{ 'border-primary bg-nq-selected text-foreground': isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;m&quot;), 'border-border bg-card text-foreground hover:bg-nq-hover': !(isSel(&quot;draft&quot;, &#039;opt&#039;, &quot;size&quot;, &quot;m&quot;)) }"
                                x-on:click="toggleOpt('draft', 'size', 'm')"
                                class="h-8 min-w-10 rounded-control border px-2.5 text-label outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:opacity-40 border-border bg-card text-foreground hover:bg-nq-hover"><bdi>M</bdi></button>
                                                            </div>
            </div>
        </section>
    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
        <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Rating<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
        <div x-show="open" class="pt-2">
            <div role="radiogroup" aria-label="Rating" class="flex flex-col gap-0.5">
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('draft', 'rating', 4) ? 'true' : 'false'"
                        x-on:click="setRating('draft', 4)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('draft', 'rating', 4) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>4 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'rating', 4))">5</bdi>
                    </button>
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('draft', 'rating', 3) ? 'true' : 'false'"
                        x-on:click="setRating('draft', 3)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('draft', 'rating', 3) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>3 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'rating', 3))">6</bdi>
                    </button>
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('draft', 'rating', 2) ? 'true' : 'false'"
                        x-on:click="setRating('draft', 2)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('draft', 'rating', 2) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>2 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'rating', 2))">6</bdi>
                    </button>
                                    <button type="button" role="radio" aria-checked="false" x-bind:aria-checked="isSel('draft', 'rating', 1) ? 'true' : 'false'"
                        x-on:click="setRating('draft', 1)" x-bind:class="{ 'bg-nq-selected font-medium': isSel('draft', 'rating', 1) }"
                        class="flex items-center justify-between gap-2 rounded-control px-2 py-1 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus ">
                        <span class="inline-flex items-center gap-1.5"><svg aria-hidden="true" class="size-3.5 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>1 &amp; up</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'rating', 1))">6</bdi>
                    </button>
                            </div>
        </div>
    </section>
    <section class="border-b border-border py-3 last:border-b-0" data-slot="store-facet-group" x-data="{ open: true }">
        <h3><button type="button" aria-expanded="true" x-bind:aria-expanded="open ? 'true' : 'false'" x-on:click="open = !open" class="flex w-full items-center justify-between gap-2 rounded-sm py-1 text-start text-label text-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Availability<svg aria-hidden="true" x-bind:class="{ 'rotate-180': open }" class="size-4 rotate-180 text-muted-foreground transition-transform motion-reduce:transition-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="m6 9 6 6 6-6"/>
</svg></button></h3>
        <div x-show="open" class="pt-2">
            <ul class="flex flex-col gap-1.5">
                <li>
                    <label class="flex cursor-pointer items-center gap-2 text-body-sm">
                        <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="draft.inStock" 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>
                        <span class="flex-1">In stock</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'inStock'))">5</bdi>
                    </label>
                </li>
                <li>
                    <label class="flex cursor-pointer items-center gap-2 text-body-sm">
                        <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="draft.onSale" 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>
                        <span class="flex-1">On sale</span>
                        <bdi class="text-caption tabular-nums text-muted-foreground" x-text="n(count('draft', 'onSale'))">3</bdi>
                    </label>
                </li>
            </ul>
        </div>
    </section>
</div>
            </div></div>
        <div data-slot="sheet-footer" class="flex items-center border-t border-border px-4 py-3 flex-row gap-2"><button data-slot="button"
     type="button"                         x-on:click="clearDraft()" 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 px-[var(--nq-control-pad)] flex-1">
        Clear all</button>
            <button data-slot="button"
     type="button"                         x-bind:disabled="draftCount === 0" x-on:click="applyDraft()" 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 px-[var(--nq-control-pad)] flex-[2]">
        <span x-text="applyText">Show 6 results</span></button></div>
                            <button type="button" data-slot="sheet-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    <div x-data="nqStoreQuickView(JSON.parse('{\u0022currency\u0022:\u0022USD\u0022,\u0022exponent\u0022:2,\u0022lowStockAt\u0022:5,\u0022closeOnAdd\u0022:true}'))" class="contents">
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="host.quickOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="store-quick-view" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] gap-4 rounded-floating border border-border bg-popover text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 max-w-3xl p-0 sm:p-0">
            <div class="grid gap-0 md:grid-cols-2" x-show="product" style="display: none">
                <div class="flex flex-col gap-2 p-4 md:p-6" role="group" aria-label="Product images">
                    <div class="aspect-square overflow-hidden rounded-card bg-secondary">
                        <div class="contents" x-data="{ failed: false }"  x-effect="currentSrc; failed = false" >
    <div role="img"  x-bind:aria-label="product ? product.name : &#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(currentSrc) || 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="currentSrc" x-bind:alt="product ? product.name : &#039;&#039;" x-show="(currentSrc) && !failed"                          loading="eager" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
                    </div>
                    <div x-show="gallery.length > 1" style="display: none" class="flex gap-2 overflow-x-auto">
                        <template x-for="(img, i) in gallery" x-bind:key="img.src + '-' + i">
                            <button type="button" x-bind:aria-label="s('showImage', { n: n(i + 1) })" x-bind:aria-current="i === image ? 'true' : undefined" x-on:click="image = i"
                                x-bind:class="i === image ? 'border-primary' : 'border-border'"
                                class="size-14 shrink-0 overflow-hidden rounded-control border bg-secondary outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                                <div class="contents" x-data="{ failed: false }"  x-effect="img.src; failed = false" >
    <div role="img"  x-bind:aria-label="&#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(img.src) || 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="img.src" x-bind:alt="&#039;&#039;" x-show="(img.src) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
                            </button>
                        </template>
                    </div>
                </div>
                <div class="flex min-w-0 flex-col gap-4 p-4 pt-0 md:p-6 md:ps-2">
                    <div class="flex flex-col gap-1.5 pe-8">
                        <p x-show="product && product.brand" class="text-caption text-muted-foreground" x-text="product ? product.brand : ''"></p>
                        <h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground"><span x-text="product ? product.name : ''"></span></h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground sr-only">Quick view</p>
                        <span x-show="ratingText" data-slot="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
                            <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>                            <bdi class="tabular-nums" x-text="ratingText"></bdi>
                        </span>
                    </div>
                    <span data-slot="store-price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-body-sm text-foreground">
                        <span class="text-caption text-muted-foreground" x-show="fromText" x-text="fromText"></span>
                        <bdi class="text-h2 font-semibold tracking-tight tabular-nums" x-text="priceText"></bdi>
                        <s class="text-caption text-muted-foreground decoration-muted-foreground/60" x-show="compareText"><bdi class="tabular-nums" x-text="compareText"></bdi></s>
                    </span>
                    <p x-show="product && product.description" class="text-body-sm text-muted-foreground" x-text="product ? product.description : ''"></p>
                    <template x-for="o in (product ? product.options : [])" x-bind:key="o.id">
                        <div data-slot="store-option-picker" class="flex min-w-0 flex-col gap-1.5">
                    <p class="text-label text-foreground">
                <span x-text="o.name"></span>
                <span x-show="selectedLabel(o)" class="ms-1.5 font-normal text-muted-foreground" x-text="selectedLabel(o)"></span>
            </p>
                <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-8' : 'rounded-control border px-2.5 text-label tabular-nums h-9 min-w-10',
                        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="flex flex-wrap items-center gap-3">
                        <div role="group" aria-label="Quantity" class="inline-flex h-control items-center rounded-control border border-border">
                            <button data-slot="button"
     type="button"                         aria-label="Decrease quantity" x-on:click="step(-1)" x-bind:disabled="qty &lt;= 1" 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 size-control-sm p-0 rounded-e-none">
        <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="M5 12h14"/>
</svg></button>
                            <output aria-live="polite" class="min-w-8 text-center text-label tabular-nums"><bdi x-text="qtyText()">1</bdi></output>
                            <button data-slot="button"
     type="button"                         aria-label="Increase quantity" x-on:click="step(1)" x-bind:disabled="qty &gt;= max" 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 size-control-sm p-0 rounded-s-none">
        <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="M5 12h14"/>
  <path d="M12 5v14"/>
</svg></button>
                        </div>
                        <span class="contents" x-show="stockTone === 'neutral'"><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"><span x-text="stockText"></span></span>
</span>
                        <span class="contents" x-show="stockTone === 'success'" 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-success/40 bg-nq-success-soft text-nq-success-text"><span x-text="stockText"></span></span>
</span>
                        <span class="contents" x-show="stockTone === 'danger'" 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"><span x-text="stockText"></span></span>
</span>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                                                    <button data-slot="store-quick-view-add"
     type="button"                         x-on:click="add()" x-bind:disabled="busy || !variant || !inStock" x-bind:aria-busy="busy ? &#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 px-[var(--nq-control-pad)] min-w-40 flex-1 sm:flex-none">
        Add to cart</button>
                                                <a x-show="detailsHref" style="display: none" x-bind:href="detailsHref"
                            class="inline-flex h-control shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card px-[var(--nq-control-pad)] font-sans text-label text-foreground transition-colors duration-150 ease-nq hover:bg-nq-hover outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">View full details</a>
                    </div>
                    <p class="sr-only" role="status" aria-live="polite" x-text="live"></p>
                </div>
            </div>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
</div>
            <section data-slot="store-compare-tray" aria-label="Compare products" x-show="compareIds.length" style="display: none"
    class="sticky bottom-3 z-30 mx-auto flex w-full max-w-3xl flex-wrap items-center gap-3 rounded-floating border border-border bg-popover p-3 shadow-floating">
    <ul class="flex min-w-0 basis-full items-center gap-2 sm:flex-1 sm:basis-0">
        <template x-for="(p, i) in slots" x-bind:key="p ? p.id : 'slot-' + i">
            <li class="relative">
                <div x-show="p" class="contents">
                    <div class="size-12 overflow-hidden rounded-control border border-border bg-secondary sm:size-14">
                        <div class="contents" x-data="{ failed: false }"  x-effect="p &amp;&amp; p.images[0] ? p.images[0].src : &#039;&#039;; failed = false" >
    <div role="img"  x-bind:aria-label="p ? p.name : &#039;&#039;"  data-slot="store-image-placeholder"
         x-show="!(p &amp;&amp; p.images[0] ? p.images[0].src : &#039;&#039;) || 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="p &amp;&amp; p.images[0] ? p.images[0].src : &#039;&#039;" x-bind:alt="p ? p.name : &#039;&#039;" x-show="(p &amp;&amp; p.images[0] ? p.images[0].src : &#039;&#039;) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
                    </div>
                    <button type="button" x-bind:aria-label="p ? s('compareRemove', { name: p.name }) : ''" x-on:click="p && removeCompare(p.id)"
                        class="absolute -end-1.5 -top-1.5 inline-flex size-5 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-xs outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3" 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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                <div x-show="!p" title="Add a product" class="size-12 rounded-control border border-dashed border-border sm:size-14"></div>
            </li>
        </template>
    </ul>
    <div class="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-caption text-muted-foreground sm:flex-none sm:items-end" role="status" aria-live="polite">
        <span x-text="compareCountText"></span>
        <span x-show="compareIds.length < 2">Select at least two products to compare</span>
    </div>
    <div class="flex items-center gap-2">
        <button data-slot="button"
     type="button"                         x-on:click="clearCompare()" 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 h-control-sm px-2.5">
        Clear all</button>
        <button data-slot="button"
     type="button"                         x-on:click="compareOpen = true" x-bind:disabled="compareIds.length &lt; 2" 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">
        <span x-text="compareNowText"></span></button>
    </div>
</section>
        <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="compareOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="store-compare-dialog" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 max-w-5xl">
            <div class="flex flex-col gap-1 pe-8">
            <h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">Compare products</h2>
            <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Side by side, with the differences highlighted.</p>
        </div>
        <div data-slot="store-compare-table" class="flex flex-col gap-3">
    <label class="flex w-fit cursor-pointer items-center gap-2 text-body-sm">
        <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="onlyDiff" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked: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">
    <span data-slot="switch-thumb"  data-unchecked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button>
        Show only differences
    </label>
    <div class="overflow-x-auto rounded-card border border-border">
        <div role="table" aria-label="Compare products" class="min-w-[36rem] text-start text-body-sm">
            <div role="row" class="grid items-stretch align-top" x-bind:style="{ gridTemplateColumns: 'minmax(8rem, 10rem) repeat(' + Math.max(compareProducts.length, 1) + ', minmax(0, 1fr))' }">
                <div role="columnheader" class="bg-secondary p-3 text-start text-label text-muted-foreground">Attribute</div>
                <template x-for="p in compareProducts" x-bind:key="p.id">
                    <div role="columnheader" class="border-s border-border p-3 text-start font-normal">
                        <div class="flex flex-col gap-2">
                            <div class="aspect-square w-full max-w-32 overflow-hidden rounded-control bg-secondary">
                                <div class="contents" x-data="{ failed: false }"  x-effect="p.images[0] ? p.images[0].src : &#039;&#039;; failed = false" >
    <div role="img"  x-bind:aria-label="p.name"  data-slot="store-image-placeholder"
         x-show="!(p.images[0] ? p.images[0].src : &#039;&#039;) || 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="p.images[0] ? p.images[0].src : &#039;&#039;" x-bind:alt="p.name" x-show="(p.images[0] ? p.images[0].src : &#039;&#039;) && !failed"                          loading="lazy" decoding="async" data-slot="store-image" x-on:error="failed = true"
            class="size-full object-cover">
    </div>
                            </div>
                            <p class="text-label text-foreground" x-text="p.name"></p>
                            <div class="flex flex-wrap gap-1.5">
                                                                <button data-slot="button"
     type="button"                         x-bind:aria-label="s(&#039;compareRemove&#039;, { name: p.name })" x-on:click="removeCompare(p.id)" 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 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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <template x-for="row in compareRows" x-bind:key="row.id">
                <div role="row" class="grid items-stretch border-t border-border align-top" x-bind:data-differs="row.differs ? '' : undefined"
                    x-bind:style="{ gridTemplateColumns: 'minmax(8rem, 10rem) repeat(' + Math.max(compareProducts.length, 1) + ', minmax(0, 1fr))' }">
                    <div role="rowheader" class="bg-secondary p-3 text-start font-medium text-foreground" x-bind:class="{ 'border-s-2 border-s-primary': row.differs }">
                        <span x-text="rowLabel(row)"></span>
                        <span x-show="row.differs" class="sr-only"> (Compare products)</span>
                    </div>
                    <template x-for="(cell, i) in row.cells" x-bind:key="i">
                        <div role="cell" class="border-s border-border p-3" x-bind:class="{ 'bg-nq-selected/40': row.differs }">
                            <template x-if="row.kind === 'price' && typeof cell === 'number'"><bdi class="font-medium tabular-nums" x-text="money(cell)"></bdi></template>
                            <template x-if="row.kind === 'rating' && typeof cell === 'number'">
                                <span data-slot="rating" class="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
                                    <svg aria-hidden="true" class="size-3.5 shrink-0 fill-nq-accent text-nq-accent" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
</svg>                                    <bdi class="tabular-nums text-foreground" x-text="cell.toFixed(1)"></bdi>
                                </span>
                            </template>
                            <template x-if="row.kind === 'availability'">
                                <span class="contents">
                                    <span class="contents" x-show="cell"><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-success/40 bg-nq-success-soft text-nq-success-text"><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="M20 6 9 17l-5-5"/>
</svg>In stock</span>
</span>
                                    <span class="contents" x-show="!cell"><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">Out of stock</span>
</span>
                                </span>
                            </template>
                            <template x-if="row.kind !== 'availability' && !(row.kind === 'price' && typeof cell === 'number') && !(row.kind === 'rating' && typeof cell === 'number')">
                                <span x-bind:class="{ 'text-muted-foreground': cell === null || cell === '' }" x-text="cellText(cell)"></span>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
            <p x-show="!compareRows.length" style="display: none" class="border-t border-border p-6 text-center text-muted-foreground">These products are identical on every attribute shown.</p>
        </div>
    </div>
</div>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    </div>
```