Untitled

<html lang="en" class="scroll-smooth dark"><head>

<script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/3kTz7WGoZLQTivI-amNftGZO/recaptcha__pl.js" crossorigin="anonymous" integrity="sha384-b/CoNnI3nAFgpr3XgWKy7D9QGuWa81zRv3sO+xTMk6qew2doNj/q50MSabqF5xWG"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-N2C9CDP"></script><script>
                (function(w, d, s, l, i) {
                    w[l] = w[l] || [];
                    w[l].push({
                        'gtm.start': new Date().getTime(),
                        event: 'gtm.js'
                    });
                    var f = d.getElementsByTagName(s)[0],
                        j = d.createElement(s),
                        dl = l != 'dataLayer' ? '&l=' + l : '';
                    j.async = true;
                    j.src =
                        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
                    f.parentNode.insertBefore(j, f);
                })(window, document, 'script', 'dataLayer', 'GTM-N2C9CDP');
            </script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="pRYdJM0y6yA71Gyq24mcYmRziSPAAFafn6Od1ksj">
<title>KSD Store</title>
<meta property="og:title" content="KSD Store">
<meta property="og:description" content="KSD Store has a wide variety of digital products available. Click here to find out more!">
<meta name="description" content="KSD Store has a wide variety of digital products available. Click here to find out more!">
<meta property="og:type" content="website">
<meta property="og:image" content="https://images.unsplash.com/photo-1604076913837-52ab5629fba9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1700&amp;h=200&amp;q=100">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="KSD Store"> <meta name="twitter:description" content="KSD Store has a wide variety of digital products available. Click here to find out more!"> <meta name="twitter:image" content="https://images.unsplash.com/photo-1604076913837-52ab5629fba9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1700&amp;h=200&amp;q=100">
<title>Sell.app</title>

<link rel="icon" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/favicon-16x16.png">

<link rel="preconnect" href="https://rsms.me">
<link rel="dns-prefetch" href="https://rsms.me">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

<link rel="preload" as="style" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/app.adb8b4dd.css"><link rel="stylesheet" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/app.adb8b4dd.css"> <style>
    .laravel-embed__responsive-wrapper { position: relative; height: 0; overflow: hidden; max-width: 100%; }
    .laravel-embed__fallback { background: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; }
    .laravel-embed__fallback,
    .laravel-embed__responsive-wrapper iframe,
    .laravel-embed__responsive-wrapper object,
    .laravel-embed__responsive-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style> <style>[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style>
<script>
            // Gets the current dark mode preference from localStorage. Has to be inline in <head> otherwise there's a FOUC

            function setDarkMode(value) {
                if (value) {
                    document.documentElement.classList.add('dark')
                } else {
                    document.documentElement.classList.remove('dark')
                }
            }

            setDarkMode(localStorage.getItem('theme') === 'dark')
        </script>
<link id="chromealerabat-link" rel="stylesheet" type="text/css" href="chrome-extension://dacdinoicboceafielngnmjjplncljhj/content.css"></head>
<body class="flex flex-col min-h-screen bg-slate-100 dark:bg-ultra text-black dark:text-slate-100">

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N2C9CDP" height="0" width="0"
                    style="display:none;visibility:hidden"></iframe></noscript>

<main class="flex-grow contents">
<div wire:id="V3VWDPVNpSpLSHF9Xv0T" x-data="{ ...tabGroupComponent('browse'), ...{} }" x-init="$nextTick(() => setupTabGroup('', false))" class="flex-grow" style="background: url() center center no-repeat fixed; background-size: cover;">
    <header class="relative bg-white dark:bg-slate-900" style="background-color: ">
    <nav aria-label="Top" class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="relative px-4 pb-14 sm:static sm:px-0 sm:pb-0">
            <div class="h-16 flex items-center justify-between">

                <div class="flex-1 flex">
                    <div class="py-2" x-data="darkMode">
    <svg x-show="!isDark" x-on:click="Dark" class="w-6 h-6 text-slate-300 hover:text-black transition duration-500 ease-in-out" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="display: none;"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg>    <svg x-show="isDark" x-on:click="Light" class="w-6 h-6 text-slate-500 hover:text-white transition duration-500 ease-in-out" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path>
</svg></div>

                </div>

                <div class="absolute bottom-0 inset-x-0 border-t dark:border-black overflow-x-auto sm:static sm:border-t-0">
                    <div class="flex overflow-x-auto items-center px-4 space-x-8 justify-center">
    <template x-for="[name, label] of Object.entries(tabs)" :key="name" hidden="">
<button type="button" @click.prevent="active = name" class="whitespace-nowrap transition duration-500 px-1 py-2 border-b-2 font-medium text-sm focus:outline-none" :class="{
                'border-black dark:border-white text-black dark:text-white': active === name,
                'border-transparent text-slate-400 dark:text-slate-600 hover:border-slate-600 dark:hover:border-slate-400 hover:text-slate-600 dark:hover:text-slate-400': active !== name
            }" x-text="label"></button>
</template><button type="button" @click.prevent="active = name" class="whitespace-nowrap transition duration-500 px-1 py-2 border-b-2 font-medium text-sm focus:outline-none border-black dark:border-white text-black dark:text-white" :class="{
                'border-black dark:border-white text-black dark:text-white': active === name,
                'border-transparent text-slate-400 dark:text-slate-600 hover:border-slate-600 dark:hover:border-slate-400 hover:text-slate-600 dark:hover:text-slate-400': active !== name
            }" x-text="label">Products</button><button type="button" @click.prevent="active = name" class="whitespace-nowrap transition duration-500 px-1 py-2 border-b-2 font-medium text-sm focus:outline-none border-transparent text-slate-400 dark:text-slate-600 hover:border-slate-600 dark:hover:border-slate-400 hover:text-slate-600 dark:hover:text-slate-400" :class="{
                'border-black dark:border-white text-black dark:text-white': active === name,
                'border-transparent text-slate-400 dark:text-slate-600 hover:border-slate-600 dark:hover:border-slate-400 hover:text-slate-600 dark:hover:text-slate-400': active !== name
            }" x-text="label">Support</button><button type="button" @click.prevent="active = name" class="whitespace-nowrap transition duration-500 px-1 py-2 border-b-2 font-medium text-sm focus:outline-none border-transparent text-slate-400 dark:text-slate-600 hover:border-slate-600 dark:hover:border-slate-400 hover:text-slate-600 dark:hover:text-slate-400" :class="{
                'border-black dark:border-white text-black dark:text-white': active === name,
                'border-transparent text-slate-400 dark:text-slate-600 hover:border-slate-600 dark:hover:border-slate-400 hover:text-slate-600 dark:hover:text-slate-400': active !== name
            }" x-text="label">Feedback</button>
</div>

                </div>

                <div class="flex-1 flex items-center justify-end">

                                                            <!-- Store Dropdown -->
                                                            <div class="relative shrink mr-4 ml-1">
                                    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
    <div @click="open = ! open">
        <span class="inline-flex rounded-md">
                                                    <button title="KSD Store" type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-slate-600 dark:text-slate-400 bg-white dark:bg-slate-900 hover:bg-slate-50 hover:text-slate-800 focus:outline-none focus:bg-slate-50 active:bg-slate-50 transition">
                                                        <p class="text-left w-32 lg:w-40 whitespace-nowrap text-ellipsis overflow-hidden">
                                                            KSD Store
                                                        </p>

                                                        <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                                            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                                        </svg>
                                                    </button>
                                                </span>
    </div>

    <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute z-50 mt-2 60 rounded-md shadow-lg dark:shadow-black/10 origin-top-right right-0 " @click="open = false" style="display: none;">
        <div class="rounded-md ring-1 ring-black ring-opacity-5 bg-white dark:bg-slate-900">
            <div class="w-60">
                                                <a class="block px-4 py-2 text-sm leading-5 text-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus:bg-slate-100 transition flex flex-row dark:text-slate-50 dark:hover:bg-black" href="https://sell.app/dashboard"><svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"></path>
</svg>                                                    Store Dashboard</a>

                                                <a href="https://ksd.sell.app?ksd">
                                                    <button class="bg-white dark:bg-slate-900 dark:border-black hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-black dark:focus:bg-slate-700 text-slate-800 dark:text-slate-100 block w-full px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md flex flex-row items-center" role="menuitem">
    <svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path>
  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>                                                        <span class="whitespace-nowrap text-ellipsis overflow-hidden">
                                                            Show Store
                                                        </span>
</button>
                                                </a>
                                                                                                    <a href="https://sell.app/dashboard/settings">
                                                        <button class="bg-white dark:bg-slate-900 dark:border-black hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-black dark:focus:bg-slate-700 text-slate-800 dark:text-slate-100 block w-full px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md flex flex-row items-center border-b-2 dark:border-black" role="menuitem">
    <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"></path>
</svg>                                                            <span class="whitespace-nowrap text-ellipsis overflow-hidden">
                                                                Store Settings
                                                            </span>
</button>
                                                    </a>

                                                <div wire:id="fPsMHGmkZwmQbZ7kwLE4" class="contents">

<form method="POST" action="https://sell.app/current-store">
<input type="hidden" name="_method" value="PUT"> <input type="hidden" name="_token" value="pRYdJM0y6yA71Gyq24mcYmRziSPAAFafn6Od1ksj">

<input type="hidden" name="team_id" value="29536">
<a class="block px-4 py-2 text-sm leading-5 text-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus:bg-slate-100 transition dark:hover:bg-black" href="#" onclick="event.preventDefault(); this.closest('form').submit();"><div class="flex items-center dark:text-slate-200">
<svg class="mr-3 h-5 w-5 text-emerald-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div class="truncate">KSD Store</div>
</div></a>
</form>
<a href="https://sell.app/store/create">
<button class="bg-white dark:bg-slate-900 dark:border-black hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-black dark:focus:bg-slate-700 text-slate-800 dark:text-slate-100 block w-full px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md flex flex-row items-center" role="menuitem">
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg> <span class="whitespace-nowrap text-ellipsis overflow-hidden">
New Store
</span>
</button>
</a>
</div>                                            </div>
        </div>
    </div>
</div>
                                </div>
                                                        <div class="inline-block text-left" slot.class="origin-top-right right-0 ml-4" x-data="{ ...dropdownComponent(true), ...{} }" @click.outside="close()">
    <div x-ref="trigger" @click.stop.prevent="isOpen = !isOpen" class="z-0" aria-haspopup="true">
        <button type="button" class="max-w-xs bg-transparent flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-800 dark:focus:ring-slate-900 dark:focus:ring-offset-slate-900">
            <span class="sr-only">Open user menu</span>
            <img class="h-8 w-8 rounded-full" src="https://ui-avatars.com/api/?name=&amp;color=7F9CF5&amp;background=EBF4FF" alt="">
        </button>
    </div>

    <div x-ref="menu" class="z-10" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(1799px, 48px);" data-popper-placement="bottom">
        <div x-show="isOpen" x-transition:enter="transition transform ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition transform ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="m-2 min-w-[theme(spacing.56)] bg-white dark:bg-slate-900 ring-1 ring-slate-900 ring-opacity-5 focus:outline-none rounded-md shadow-lg overflow-x-hidden divide-y dark:divide-black origin-top-right right-0 ml-4" role="menu" aria-orientation="vertical" style="display: none;">
            <a href="https://sell.app/orders">
        <button class="bg-white dark:bg-slate-900 dark:border-black hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-black dark:focus:bg-slate-700 text-slate-800 dark:text-slate-100 block w-full px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md flex flex-row items-center" role="menuitem">
    <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
</svg>            <span class="whitespace-nowrap text-ellipsis overflow-hidden">
                My Orders
            </span>
</button>
    </a>

    <a href="https://sell.app/user/profile">
        <button class="bg-white dark:bg-slate-900 dark:border-black hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-black dark:focus:bg-slate-700 text-slate-800 dark:text-slate-100 block w-full px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md flex flex-row items-center" role="menuitem">
    <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path>
</svg>            <span class="whitespace-nowrap text-ellipsis overflow-hidden">
                Account Settings
            </span>
</button>
    </a>

    <button wire:id="M9mid6QXqMEWYX31Q2fb" class="bg-white dark:bg-slate-900 dark:border-black hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-black dark:focus:bg-slate-700 text-slate-800 dark:text-slate-100 block w-full px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md flex flex-row items-center" role="menuitem" wire:click="logout">
<svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"></path>
</svg> <span class="whitespace-nowrap text-ellipsis overflow-hidden">
Logout
</span>
</button>
        </div>
    </div>
</div>


                                             <!-- Cart -->
                        <div class="ml-4 flow-root text-sm lg:relative lg:ml-8" x-data="{ show: false }">
    <button type="button" @click="show = !show" @click.outside="show = false" class="group -m-2 p-2 flex items-center" aria-expanded="false">
        <svg class="transition duration-300 shrink h-6 w-6 text-slate-500 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
</svg>        <span class="transition duration-300 ml-2 text-sm font-medium text-slate-800 dark:text-slate-500 group-hover:text-slate-900 dark:group-hover:text-white">0</span>
        <span class="sr-only">items in cart, view bag</span>
    </button>
    <div x-show="show" class="z-50 absolute top-16 inset-x-0 mt-px pb-6 bg-white dark:bg-slate-800 shadow-lg sm:px-2 lg:top-full lg:left-auto lg:right-0 lg:mt-3 lg:-mr-1.5 lg:w-80 lg:rounded-lg lg:ring-1 lg:ring-black lg:ring-opacity-5" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="display: none;">
        <h2 class="sr-only">Shopping Cart</h2>
        <div class="max-w-2xl mx-auto px-4">
                            <p class="flex text-center font-medium text-sm mt-4"> You don't have any items in your shopping cart yet.</p>
                    </div>
    </div>
</div>
                                    </div>
            </div>
        </div>
    </nav>
</header>


    <div class="">
                                    <img class="h-32 w-full object-cover lg:h-56" src="https://images.unsplash.com/photo-1604076913837-52ab5629fba9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1700&amp;h=200&amp;q=100" alt="Store header image">
                        </div>

    <div class="max-w-5xl mx-auto px-4 md:px-6 lg:px-8">
        <div class="
            -mt-12 lg:-mt-48 flex flex-col justify-center items-center


        ">
                            <div class="flex">
                                            <img class="h-24 w-24 rounded-full lg:h-32 lg:w-32 object-cover" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/ms-icon-310x310.png">
                                    </div>

                            <div class="text-center sm:min-w-0 sm:flex sm:items-center sm:justify-end mt-2 lg:mb-6">
                    <h1 class="inline-block backdrop-filter backdrop-blur-md bg-opacity-30 px-3 rounded-2xl text-2xl font-bold text-black lg:text-white dark:text-white">
                        KSD Store
                    </h1>
                </div>

                            <div class="flex flex-row space-x-2 mb-1">
                                                                                                    </div>

                            <div class="flex flex-wrap px-2 space-x-2 space-y-2 my-3">

                                                                                                                                                                                </div>

            <div class="flex flex-row space-x-2 mt-1">
                                                    <div class="bg-white dark:bg-slate-900 rounded-lg shadow dark:shadow-black/20 content-center flex items-center">
                        <span title="Positive feedback" class="text-emerald-500 font-bold px-3">0</span>
                        <span title="Neutral feedback" class="text-slate-600 font-bold px-3">0</span>
                        <span title="Negative feedback" class="text-red-500 font-bold px-3">0
                        </span>
                    </div>
                            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto pb-52 px-3 xl:px-0 space-y-4 w-full">
        <div x-show="active === 'products'" x-transition:enter="transition ease-out duration-300 delay-75 origin-top" x-transition:enter-start="opacity-0 transform scale-y-90" x-transition:enter-end="opacity-100 transform scale-y-100" data-tab-name="products" data-tab-label="Products" x-data="infiniteScrollComponent()" class="">
    <div class="mt-2 relative pb-3 w-full text-slate-500 focus-within:text-slate-700 dark:focus-within:text-slate-500 dark:text-slate-700">
                        <div class="absolute bottom-5 left-[12px] flex items-center pointer-events-none">
                            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>                        </div>

                        <label>
                            <span class="sr-only">Search for a product...</span>
                            <input style="background-color: " type="search" name="search" x-model.debounce.500ms="search" class="block rounded-md bg-slate-50 focus:bg-white dark:bg-slate-900 dark:focus:bg-slate-800 w-full h-full pl-12 pr-3 py-2 border-transparent text-black dark:text-white placeholder-slate-600 focus:placeholder-slate-800 dark:focus:placeholder-slate-400 focus:outline-none shadow-lg shadow-slate-200 focus:shadow-slate-300 dark:shadow-black/20 dark:focus:shadow-black focus:ring-0 focus:border-transparent sm:text-sm transition duration-300 ease-in-out" placeholder="Search for a product...">
                        </label>
                    </div>

                <div class="space-y-4 ">
                    <template x-ref="productTemplate">
<button class="cursor-pointer group col-span-1 rounded-2xl rounded-t-2xl flex flex-col transition duration-500 ease-in-out ring-1 ring-slate-900/5" :class="{
                                'dark:bg-slate-900 dark:hover:bg-ultra bg-slate-50 hover:bg-white hover:shadow-slate-400 shadow-xl dark:shadow-black/20 dark:hover:shadow-black': (
                                    type === 'group' || stock == null || stock > 0
                                ),
                                'dark:bg-red-900 dark:hover:bg-red-800 bg-red-100 hover:bg-red-200 shadow-xl shadow-red-200 hover:shadow-red-400 dark:hover:shadow-red-400 dark:shadow-red-400/20': type !==
                                    'group' &amp;&amp; stock == 0
                            }" @click="type === 'group' ? $dispatch('open-group', { id: id }) : window.location.href = url" style="background-color: ">
<div class="relative w-full">
<div class="relative overflow-hidden rounded-t-2xl aspect-w-16 aspect-h-9">
<template x-if="!!image">
<img class="object-cover" :alt="`Image for product: ${title}`" :src="image">
</template>
<template x-if="!image">
<img class="object-cover" alt="`Image for product: ${title}`" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/placeholder.png">
</template>
</div>
<template x-if="type !== 'group' &amp;&amp; badge">
<div class="z-10 absolute m-auto -my-3 px-1 py-0.5 left-0 right-0 text-white dark:text-black font-bold truncate text-sm md:text-base" x-bind:style="`color: ${badge.text_color};`">
<span class="px-3 py-0.5 rounded-full shadow-inner shadow-inherit" x-bind:style="`background-color: ${badge.color};`" x-text="badge.text"></span>
</div>
</template>
<div class="flex flex-col flex-grow">
<div class="flex flex-col m-4 flex-grow">
<h3 class="text-sm font-medium text-black dark:text-white line-clamp-2 text-left" style="color: " x-text="title"></h3>
</div>
<div class="flex flex-row justify-between items-end m-4 shrink">
<p class="relative font-semibold text-black dark:text-white" :class="{ 'text-sm': type === 'group', 'text-lg': type !== 'group' }">
<template x-if="type === 'group' || variants > 1">
<span style="color: ">Starting
at&nbsp;</span>
</template>
<span x-text="price" style="color: "></span>
</p>
<p class="relative text-xs text-slate-600 dark:text-slate-400" style="color: " x-html="type !== 'group' ? (stock != null ? (stock > 0 ? stock + ' in stock' : 'Sold out') : '∞ in stock' ) : 'Group' ">
</p>
</div>
</div>
</div>
</button>
</template>

                    <div wire:ignore="" wire:loading.remove="" wire:target="search, section" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4" x-ref="products">
<button class="cursor-pointer group col-span-1 rounded-2xl rounded-t-2xl flex flex-col transition duration-500 ease-in-out ring-1 ring-slate-900/5 dark:bg-red-900 dark:hover:bg-red-800 bg-red-100 hover:bg-red-200 shadow-xl shadow-red-200 hover:shadow-red-400 dark:hover:shadow-red-400 dark:shadow-red-400/20" :class="{
                                'dark:bg-slate-900 dark:hover:bg-ultra bg-slate-50 hover:bg-white hover:shadow-slate-400 shadow-xl dark:shadow-black/20 dark:hover:shadow-black': (
                                    type === 'group' || stock == null || stock > 0
                                ),
                                'dark:bg-red-900 dark:hover:bg-red-800 bg-red-100 hover:bg-red-200 shadow-xl shadow-red-200 hover:shadow-red-400 dark:hover:shadow-red-400 dark:shadow-red-400/20': type !==
                                    'group' &amp;&amp; stock == 0
                            }" @click="type === 'group' ? $dispatch('open-group', { id: id }) : window.location.href = url" style="background-color: ">
<div class="relative w-full">
<div class="relative overflow-hidden rounded-t-2xl aspect-w-16 aspect-h-9">
<template x-if="!!image">
<img class="object-cover" :alt="`Image for product: ${title}`" :src="image">
</template>
<template x-if="!image">
<img class="object-cover" alt="`Image for product: ${title}`" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/placeholder.png">
</template><img class="object-cover" alt="`Image for product: ${title}`" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/placeholder.png">
</div>
<template x-if="type !== 'group' &amp;&amp; badge">
<div class="z-10 absolute m-auto -my-3 px-1 py-0.5 left-0 right-0 text-white dark:text-black font-bold truncate text-sm md:text-base" x-bind:style="`color: ${badge.text_color};`">
<span class="px-3 py-0.5 rounded-full shadow-inner shadow-inherit" x-bind:style="`background-color: ${badge.color};`" x-text="badge.text"></span>
</div>
</template>
<div class="flex flex-col flex-grow">
<div class="flex flex-col m-4 flex-grow">
<h3 class="text-sm font-medium text-black dark:text-white line-clamp-2 text-left" style="color: " x-text="title">Random Numbers</h3>
</div>
<div class="flex flex-row justify-between items-end m-4 shrink">
<p class="relative font-semibold text-black dark:text-white text-lg" :class="{ 'text-sm': type === 'group', 'text-lg': type !== 'group' }">
<template x-if="type === 'group' || variants > 1">
<span style="color: ">Starting
at&nbsp;</span>
</template>
<span x-text="price" style="color: ">$1.00</span>
</p>
<p class="relative text-xs text-slate-600 dark:text-slate-400" style="color: " x-html="type !== 'group' ? (stock != null ? (stock > 0 ? stock + ' in stock' : 'Sold out') : '∞ in stock' ) : 'Group' ">Sold out</p>
</div>
</div>
</div>
</button><button class="cursor-pointer group col-span-1 rounded-2xl rounded-t-2xl flex flex-col transition duration-500 ease-in-out ring-1 ring-slate-900/5 dark:bg-slate-900 dark:hover:bg-ultra bg-slate-50 hover:bg-white hover:shadow-slate-400 shadow-xl dark:shadow-black/20 dark:hover:shadow-black" :class="{
                                'dark:bg-slate-900 dark:hover:bg-ultra bg-slate-50 hover:bg-white hover:shadow-slate-400 shadow-xl dark:shadow-black/20 dark:hover:shadow-black': (
                                    type === 'group' || stock == null || stock > 0
                                ),
                                'dark:bg-red-900 dark:hover:bg-red-800 bg-red-100 hover:bg-red-200 shadow-xl shadow-red-200 hover:shadow-red-400 dark:hover:shadow-red-400 dark:shadow-red-400/20': type !==
                                    'group' &amp;&amp; stock == 0
                            }" @click="type === 'group' ? $dispatch('open-group', { id: id }) : window.location.href = url" style="background-color: ">
<div class="relative w-full">
<div class="relative overflow-hidden rounded-t-2xl aspect-w-16 aspect-h-9">
<template x-if="!!image">
<img class="object-cover" :alt="`Image for product: ${title}`" :src="image">
</template><img class="object-cover" :alt="`Image for product: ${title}`" :src="image" alt="Image for product: Roblox 1000 Robux" src="https://storage.sell.app/store/29536/listings/26GzrpIX7HzvLsQ4Z2fGoxD6ysHMveZxa6YLCcOS.png">
<template x-if="!image">
<img class="object-cover" alt="`Image for product: ${title}`" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/img/placeholder.png">
</template>
</div>
<template x-if="type !== 'group' &amp;&amp; badge">
<div class="z-10 absolute m-auto -my-3 px-1 py-0.5 left-0 right-0 text-white dark:text-black font-bold truncate text-sm md:text-base" x-bind:style="`color: ${badge.text_color};`">
<span class="px-3 py-0.5 rounded-full shadow-inner shadow-inherit" x-bind:style="`background-color: ${badge.color};`" x-text="badge.text"></span>
</div>
</template>
<div class="flex flex-col flex-grow">
<div class="flex flex-col m-4 flex-grow">
<h3 class="text-sm font-medium text-black dark:text-white line-clamp-2 text-left" style="color: " x-text="title">Roblox 1000 Robux</h3>
</div>
<div class="flex flex-row justify-between items-end m-4 shrink">
<p class="relative font-semibold text-black dark:text-white text-lg" :class="{ 'text-sm': type === 'group', 'text-lg': type !== 'group' }">
<template x-if="type === 'group' || variants > 1">
<span style="color: ">Starting
at&nbsp;</span>
</template>
<span x-text="price" style="color: ">$6.00</span>
</p>
<p class="relative text-xs text-slate-600 dark:text-slate-400" style="color: " x-html="type !== 'group' ? (stock != null ? (stock > 0 ? stock + ' in stock' : 'Sold out') : '∞ in stock' ) : 'Group' ">2 in stock</p>
</div>
</div>
</div>
</button></div>
                </div>
                <div x-ref="spinner" x-intersect="fetchData">
                    <div class="h-24 flex items-center justify-center col-span-full" wire:loading.flex="" wire:target="loadMore">
                        <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
                    </div>
                </div>
</div>

                    <div x-show="active === 'support'" x-transition:enter="transition ease-out duration-300 delay-75 origin-top" x-transition:enter-start="opacity-0 transform scale-y-90" x-transition:enter-end="opacity-100 transform scale-y-100" data-tab-name="support" data-tab-label="Support" class="max-w-5xl mx-auto" style="display: none;">
    <div wire:id="GPnEZ4bYFNnqEUW1Ppo1" class="bg-white dark:bg-slate-900 rounded-lg shadow-md dark:shadow-black overflow-hidden mt-6">
<div class="divide-y divide-slate-200 lg:grid lg:grid-cols-9 lg:divide-y-0 lg:divide-x">
<form class="lg:col-span-9" wire:submit.prevent="$emit('submit')">
<div class="p-4 text-center bg-slate-50 dark:bg-black/40 drop-shadow">
<h2 class="text-lg leading-6 font-semibold text-black dark:text-slate-100">
Get Support
</h2>
<p class="text-sm italic text-slate-800 dark:text-slate-400">
Fill out the below form to get in touch with this store.
</p>
</div>
<div class="py-6 space-y-6 px-4 sm:p-6 lg:pb-8">
<div class="space-x-2">
</div>
<div class="mt-3 grid gap-2">
<div class="col-span-6 sm:col-span-4">
<label class="col-span-full sm:col-span-2 flex flex-col space-y-1 text-left">
<span class="font-semibold text-sm text-slate-800 dark:text-slate-200">
Title
</span>
<span>
<input class="w-full rounded-md bg-white focus:bg-slate-50 dark:bg-slate-800 dark:focus:bg-ultra text-black dark:text-slate-100 placeholder-slate-600 dark:placeholder-slate-500 focus:placeholder-slate-800 dark:focus:placeholder-slate-400 border border-slate-400 hover:border-slate-600 dark:border-slate-800 dark:hover:border-ultra focus:border-slate-800 dark:focus:border-black focus:ring-0 shadow-md shadow-slate-200 hover:shadow-slate-300 focus:shadow-slate-400 dark:shadow-black/20 dark:hover:shadow-ultra dark:focus:shadow-black transition duration-200 ease-in-out disabled:bg-slate-100 dark:disabled:bg-slate-900 disabled:opacity-70" type="text" name="title" wire:model.defer="title" placeholder="Title">
</span>
</label>
</div>
<div class="col-span-6 sm:col-span-4">
<label class="col-span-full sm:col-span-2 flex flex-col space-y-1 text-left">
<span class="font-semibold text-sm text-slate-800 dark:text-slate-200">
Email
</span>
<span>
<input class="w-full rounded-md bg-white focus:bg-slate-50 dark:bg-slate-800 dark:focus:bg-ultra text-black dark:text-slate-100 placeholder-slate-600 dark:placeholder-slate-500 focus:placeholder-slate-800 dark:focus:placeholder-slate-400 border border-slate-400 hover:border-slate-600 dark:border-slate-800 dark:hover:border-ultra focus:border-slate-800 dark:focus:border-black focus:ring-0 shadow-md shadow-slate-200 hover:shadow-slate-300 focus:shadow-slate-400 dark:shadow-black/20 dark:hover:shadow-ultra dark:focus:shadow-black transition duration-200 ease-in-out disabled:bg-slate-100 dark:disabled:bg-slate-900 disabled:opacity-70" type="email" name="email" wire:model.defer="email" placeholder="Email">
</span>
</label>
</div>
<div class="col-span-6 sm:col-span-4">
<label class="col-span-full sm:col-span-2 flex flex-col space-y-1 text-left">
<span class="font-semibold text-sm text-slate-800 dark:text-slate-200">
Order
</span>
<span>
<input class="w-full rounded-md bg-white focus:bg-slate-50 dark:bg-slate-800 dark:focus:bg-ultra text-black dark:text-slate-100 placeholder-slate-600 dark:placeholder-slate-500 focus:placeholder-slate-800 dark:focus:placeholder-slate-400 border border-slate-400 hover:border-slate-600 dark:border-slate-800 dark:hover:border-ultra focus:border-slate-800 dark:focus:border-black focus:ring-0 shadow-md shadow-slate-200 hover:shadow-slate-300 focus:shadow-slate-400 dark:shadow-black/20 dark:hover:shadow-ultra dark:focus:shadow-black transition duration-200 ease-in-out disabled:bg-slate-100 dark:disabled:bg-slate-900 disabled:opacity-70" type="text" name="invoice" wire:model.defer="invoice" inputmode="numeric" placeholder="Order ID (Optional)">
</span>
</label>
</div>
<div class="col-span-6 sm:col-span-4">
<label class="col-span-full sm:col-span-2 flex flex-col space-y-1 text-left">
<span class="font-semibold text-sm text-slate-800 dark:text-slate-200">
Message
</span>
<span>
<textarea class="resize-none w-full bg-white focus:bg-slate-50 dark:bg-slate-800 dark:focus:bg-ultra text-black dark:text-slate-100 border border-slate-400 hover:border-slate-600 dark:border-slate-800 dark:hover:border-ultra focus:border-slate-800 dark:focus:border-ultra rounded-md placeholder-slate-600 dark:placeholder-slate-500 focus:placeholder-slate-800 dark:focus:placeholder-slate-400 focus:outline-none md shadow-md shadow-slate-200 hover:shadow-slate-300 focus:shadow-slate-400 dark:shadow-black/20 dark:hover:shadow-ultra dark:focus:shadow-black focus:ring-0 transition duration-200 ease-in-out" name="message" wire:model.defer="message" placeholder="I'd like to ask about..." rows="2">
</textarea>
</span>
</label>
</div>
</div>
<div class="col-span-12 mt-6 flex items-center justify-end text-right gap-3">
<button class="inline-flex items-center justify-center sm:text-sm font-medium px-4 py-2 rounded-md shadow-sm shadow-slate-200 focus:shadow-slate-300 dark:shadow-black/20 dark:focus:shadow-black focus:ring-0 focus:outline-none disabled:opacity-75 disabled:cursor-not-allowed transition duration-200 ease-in-out relative justify-center overflow-hidden bg-black shadow dark:shadow-black hover:shadow-lg text-white font-semibold transition duration-150 ease-in-out" type="submit" wire:loading.attr="disabled">
<div wire:loading="" wire:target="save" class="absolute">
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div wire:loading.class="invisible" wire:target="save">
Send Ticket
</div>
<div x-data="loadingButtonComponent('success')" x-show="show" x-transition:enter="transition-opacity ease-in duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 flex items-center justify-center bg-slate-500 text-slate-100" style="backface-visibility: hidden; display: none;">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"></path>
</svg> </div>
</button>
</div>
</div>
</form>
</div>
</div>
</div>

                    <div x-show="active === 'feedback'" x-transition:enter="transition ease-out duration-300 delay-75 origin-top" x-transition:enter-start="opacity-0 transform scale-y-90" x-transition:enter-end="opacity-100 transform scale-y-100" data-tab-name="feedback" data-tab-label="Feedback" style="display: none;">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
                                            <div class="bg-white dark:bg-slate-900 overflow-hidden sm:rounded-lg shadow-md dark:shadow-black mt-2 col-start-1 col-end-5 text-center dark:bg-slate-900 bg-white overflow-hidden shadow rounded-lg">

        <div class="text-center bg-slate-50 dark:bg-black/40 drop-shadow">
        <div class="px-4 sm:px-6 py-3 py-4 text-center bg-slate-50 dark:bg-slate-800 drop-shadow">
            <div class="text-xl font-bold">No Feedback</div>
        </div>
    </div>


            <div class="py-6 space-y-6 px-4 sm:p-6 lg:pb-8">
            <p class="p-4">
                                This store doesn't have any feedback just yet.
                            </p>
        </div>


    </div>
                                    </div>
</div>


                    <div class="z-50 flex flex-col fixed items-center lg:bottom-20 bottom-16 lg:right-7 right-4">
                                                            </div>
            </div>
</div>
<div class="flex items-center justify-center text-center w-full" style="background: url() center center no-repeat fixed; background-size: cover;">
<nav class="px-2 py-2 space-x-2 md:space-x-4 flex flex-row">
<a target="_blank" href="https://sell.app/" class="text-slate-500 text-xs md:text-sm hover:text-black dark:hover:text-white transition ease-in-out duration-200 cursor-pointer">Powered by SellApp</a>
<span class="relative before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1 before:w-1 before:-translate-y-1/2 before:rotate-45 text-slate-500 before:bg-slate-300 hover:text-slate-600 before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300"></span>
<a target="_blank" href="mailto:report@sell.app?subject=Report abuse of store ksd&amp;body=Hi, I am reporting the aforementioned store due to X, the evidence is Y. I represent Z (optionally, with proof)" class="text-slate-500 text-xs md:text-sm hover:text-black dark:hover:text-white transition ease-in-out duration-200 cursor-pointer" onclick="window.open('http://poczta.interia.pl/mh/?mailto=mailto:report@sell.app?subject=Report%2520abuse%2520of%2520store%2520ksd&amp;body=Hi,%2520I%2520am%2520reporting%2520the%2520aforementioned%2520store%2520due%2520to%2520X,%2520the%2520evidence%2520is%2520Y.%2520I%2520represent%2520Z%2520(optionally,%2520with%2520proof)','_blank');return false;">Report Abuse</a>
<span class="relative before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1 before:w-1 before:-translate-y-1/2 before:rotate-45 text-slate-500 before:bg-slate-300 hover:text-slate-600 before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300"></span>
<a target="_blank" href="https://sell.app/terms-of-service" class="text-slate-500 text-xs md:text-sm hover:text-black dark:hover:text-white transition ease-in-out duration-200 cursor-pointer">Terms</a>
<span class="relative before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1 before:w-1 before:-translate-y-1/2 before:rotate-45 text-slate-500 before:bg-slate-300 hover:text-slate-600 before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300"></span>
<a target="_blank" href="https://sell.app/privacy-policy" class="text-slate-500 text-xs md:text-sm hover:text-black dark:hover:text-white transition ease-in-out duration-200 cursor-pointer">Privacy</a>
</nav>
</div>

</main>
<div wire:id="bLxqrIg9RBbyGYNwjDlV" x-data="{ ...dialogComponent(), ...groupShowComponent() }" x-show="isOpen" @open-group.window="open($event)" class="fixed z-30 inset-0 overflow-hidden" aria-labelledby="dialog-title" aria-modal="true" role="dialog" title="" @close.window="close()" style="display: none;">
<div class="absolute inset-0 overflow-y-auto flex items-end sm:items-center justify-center p-4 sm:p-6">
<div @click="close()" x-show="isOpen" x-transition:enter="transition-opacity duration-300 ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300 ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-0 bg-slate-600 bg-opacity-75" aria-hidden="true" style="display: none;"></div>
<div x-show="isOpen" x-transition:enter="transition-all transform duration-300 ease-out" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="transition-all transform duration-200 ease-in" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="bg-white dark:bg-slate-900 overflow-hidden sm:rounded-lg shadow-md relative z-10 w-full my-auto max-w-2xl !rounded-md" style="display: none;">
<div class="block absolute top-0 right-0 pt-4 pr-4">
<button @click="close()" type="button" class="rounded-md text-slate-500 hover:text-slate-600 dark:text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500">
<span class="sr-only">Close</span>
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button>
</div>
<div class="h-full flex items-center justify-center min-h-[10rem]" wire:target="openGroup" wire:loading.flex="">
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
</div>
</div>

<link rel="modulepreload" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/popper.680f2c3d.js"><link rel="modulepreload" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/popper.554e437d.js"><script type="module" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/popper.680f2c3d.js"></script>
<script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false"></script><script data-turbo-eval="false" data-turbolinks-eval="false">window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = 'pRYdJM0y6yA71Gyq24mcYmRziSPAAFafn6Od1ksj';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script>
<link rel="modulepreload" href="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/alpine.aaeb6a1f.js"><script type="module" src="https://d1ocs0c2k933n1.cloudfront.net/b6db99bc-81c9-4b2c-b621-b9ac643cde6d/build/assets/alpine.aaeb6a1f.js"></script> <script>
            Livewire.on('submit', () => {
                window.grecaptcha.ready(function() {
                    grecaptcha.execute('6Lcdi8cfAAAAAO1P592OIren1orH6kTHqgL5ye8y', {action: 'submit'}).then(function(token) {
                        window.livewire.find('GPnEZ4bYFNnqEUW1Ppo1').emitSelf('captchaResponse', token)
                    });
                });
            })
    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('tabGroupComponent', (id) => ({
                    id,
                    active: null,
                    tabs: {},

                    setupTabGroup(initial, internalState) {
                        if (Object.entries(this.tabs).length < 1) {
                            this.$root.querySelectorAll('[data-tab-name]').forEach((panel) => {
                                let name = panel.attributes['data-tab-name']
                                let label = panel.attributes['data-tab-label'] ?? name

                                this.tabs[name.value] = label.value
                            })
                        }

                        const detectTab = () => {
                            let selected = (new URLSearchParams(window.location.search)).get(this.id) ?? initial

                            if (selected.length < 1) {
                                selected = Object.keys(this.tabs)[0]
                            }

                            this.active = selected
                        }

                        if (!internalState) {
                            this.$watch('active', (active) => {
                                const url = new URL(window.location)

                                if (url.searchParams.get(this.id) === active) return

                                const replace = !url.searchParams.has(this.id)

                                url.searchParams.set(this.id, active)

                                const path = url.pathname + url.search

                                this.$nextTick(() => {
                                    if (replace) {
                                        history.replaceState({}, '', path)
                                    } else {
                                        history.pushState({}, '', path)
                                    }
                                })
                            })

                            window.addEventListener('popstate', detectTab)
                        }

                        detectTab()
                    },
                }))
            })
    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('groupShowComponent', () => ({
                    initSlideOverComponent() {
                        this.onDialogOpen((event) => {
                            if ('id' in event?.detail) {
                                this.$wire.call('openGroup', event.detail.id)
                            }
                        })


                        this.onDialogClose(() => {
                            this.$nextTick(() => {
                                this.$wire.call('resetProperties');
                            })
                        })
                    },
                }))
            })
            window.onload = () => {
                const urlSearchParams = new URLSearchParams(window.location.search);
                const { group } = Object.fromEntries(urlSearchParams.entries());
                if(group) {
                    document.dispatchEvent(new CustomEvent('open-group', {
                        detail: {
                            id: group
                        },
                        bubbles: true
                    }));
                }
            }
    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('darkMode', () => ({
                    isDark: localStorage.theme === 'dark',
                    Dark (e) { // Toggle dark mode on
                        localStorage.theme = 'dark',
                            document.documentElement.classList.add('dark'),
                            this.isDark = e
                    },
                    Light ()  { // Toggle dark mode off
                        localStorage.theme = 'light',
                            document.documentElement.classList.remove('dark'),
                            this.isDark = false
                    },
                }))
            });
    </script>
<script async="" src="https://www.google.com/recaptcha/api.js?render=6Lcdi8cfAAAAAO1P592OIren1orH6kTHqgL5ye8y">

        <script>
            // If reCAPTCHA is still loading, grecaptcha will be undefined.
            if(typeof grecaptcha === 'undefined') {
                grecaptcha = {};
            }
            grecaptcha.ready = function(cb){
                if(typeof grecaptcha === 'undefined') {
                    // window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
                    // configuration. By default, any functions listed in its 'fns' property
                    // are automatically executed when reCAPTCHA loads.
                    const c = '___grecaptcha_cfg';
                    window[c] = window[c] || {};
                    (window[c]['fns'] = window[c]['fns']||[]).push(cb);
                } else {
                    cb();
                }
            }

            // Usage
            grecaptcha.ready(function(){
                grecaptcha.render("container", {
                    sitekey: "6Lcdi8cfAAAAAO1P592OIren1orH6kTHqgL5ye8y"
                });
            });

    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('dialogComponent', () => ({
                    isOpen: false,
                    isLoading: false,
                    dialogOpenCallback: [],
                    dialogCloseCallback: [],

                    init() {
                        this.$initComponents()

                        this.$watch('isOpen', (value) => {
                            if (! value) {
                                this.close(null)
                            }
                        });
                    },

                    dispatch(event, detail) {
                        this.$root.dispatchEvent(new CustomEvent(event, {
                            bubbles: true,
                            detail
                        }))
                    },

                    open(event) {
                        this.isOpen = true

                        this.dialogOpenCallback.forEach((fn) => {
                            fn(event)
                        })
                    },

                    onDialogOpen(callback) {
                        this.dialogOpenCallback.push(callback)
                    },

                    close(event) {
                        this.isOpen = false

                        this.dialogCloseCallback.forEach((fn) => {
                            fn(event)
                        })
                    },

                    onDialogClose(callback) {
                        this.dialogCloseCallback.push(callback)
                    }
                }))
            })
    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('dropdownComponent', (setupPopper) => ({
                    isOpen: false,
                    __popper: null,
                    popperOptions: {},

                    init() {
                        if (setupPopper) {
                            this.$nextTick(() => this.setupPopper())
                        }
                    },

                    close() {
                        this.isOpen = false
                    },

                    setupPopper() {
                        this.__popper = createPopper(this.$refs.trigger, this.$refs.menu, {
                            modifiers: [
                                { name: 'eventListeners', enabled: false }, // Disable until further opening.
                            ],
                            ...this.popperOptions
                        })

                        this.$watch('isOpen', (isOpen) => {
                            // Enable or disable popper's scroll and resize events.
                            this.__popper.setOptions({
                                modifiers: [
                                    { name: 'eventListeners', enabled: isOpen },
                                ],
                            })

                            if (!isOpen) return

                            this.$nextTick(() => {
                                this.__popper.update()
                            })
                        })
                    }
                }))
            })
    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('loadingButtonComponent', (successEvent) => ({
                    show: false,
                    timeout: null,

                    init() {
                        this.$wire.on(successEvent, () => {
                            clearTimeout(this.timeout)

                            this.show = true

                            this.timeout = setTimeout(() => {
                                this.show = false
                                this.timeout = null
                            }, 2000)
                        })
                    }
                }))
            })
    </script>
<script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('infiniteScrollComponent', () => ({
                    loading: false,
                    search: window.Livewire.find('V3VWDPVNpSpLSHF9Xv0T').entangle('search').defer,
                    section: window.Livewire.find('V3VWDPVNpSpLSHF9Xv0T').entangle('section').defer,

                    async init() {
                        this.$watch('search', async () => {
                            await this.fetchData(true)
                        })

                        this.$watch('section', async () => {
                            await this.fetchData(true)
                        })
                    },

                    /**
                     * @param {boolean} resetPagination
                     * @returns {Promise<void>}
                     */
                    async fetchData(resetPagination = false) {
                        if (this.loading) return

                        this.loading = true

                        /** @type {HTMLElement} */
                        const productsContainer = this.$refs.products

                        if (resetPagination) {
                            // Little trick to restore original container empty state,
                            // containing only the base product card template
                            productsContainer.removeAttribute('wire:ignore')
                        }

                        /** @type {object[]} */
                        let data = await this.$wire.call('loadMore')

                        this.$append(productsContainer, this.$refs.productTemplate, ...data)

                        this.$nextTick(() => {
                            this.loading = false
                        })
                    },
                }))
            })
    </script>


<div><div class="grecaptcha-badge" data-style="bottomright" style="width: 256px; height: 60px; display: block; transition: right 0.3s ease 0s; position: fixed; bottom: 14px; right: -186px; box-shadow: gray 0px 0px 5px; border-radius: 2px; overflow: hidden;"><div class="grecaptcha-logo"><iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6Lcdi8cfAAAAAO1P592OIren1orH6kTHqgL5ye8y&amp;co=aHR0cHM6Ly9rc2Quc2VsbC5hcHA6NDQz&amp;hl=pl&amp;v=3kTz7WGoZLQTivI-amNftGZO&amp;size=invisible&amp;cb=3wwa6ero6gck" width="256" height="60" role="presentation" name="a-c1xn7gipytwd" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><div class="grecaptcha-error"></div><textarea id="g-recaptcha-response-100000" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div></body></html>